body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; margin: 0; padding: 0; overflow-x: hidden; }
.controls-bar { background: #ffffff; padding: 10px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 10000; border-bottom: 1px solid #ddd; }
.header-content { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.header-logo { height: 50px; width: auto; object-fit: contain; }
.btn-pdf { background-color: #e74c3c; color: white; border: none; padding: 10px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 16px; transition: background 0.3s; }
.btn-pdf:hover { background-color: #c0392b; }

.main-view-container { display: flex; justify-content: center; padding: 40px 20px; min-height: 100vh; box-sizing: border-box; }
#pdf-target { background-color: white; width: 100%; max-width: 1100px; box-shadow: 0 0 20px rgba(0,0,0,0.5); padding: 0; }
.venue-wrapper { position: relative; width: 100%; overflow: hidden; }
.venue-container {
  position: relative; width: 100%; padding-bottom: 60.71428571428571%;
  background-color: #fff; background-image: url('../base.jpg'); /* OJO CON LA RUTA DE LA IMAGEN */
  background-size: 100% 100%; background-repeat: no-repeat; container-type: inline-size;
}

.seat-placeholder, .text-label, .aisle-element { position: absolute; box-sizing: border-box; user-select: none; }
.seat-placeholder { color: rgba(255,255,255,0.5); cursor: pointer; transform-origin: center center; transform: scale(0.96); }
.seat-placeholder svg { width: 100%; height: 100%; overflow: visible; display: block; }
.seat-placeholder polygon {
  fill: color-mix(in srgb, currentColor 80%, transparent); stroke: currentColor; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: all 0.2s;
}
.seat-placeholder:hover { z-index: 5000; }
.seat-placeholder:hover polygon { fill-opacity: 1; stroke-width: 2; filter: brightness(1.1); }

/* Clases de estado */
.estado-rojo-blink { animation: blink-anim 1s infinite; color: #ff0000 !important; }
.estado-verde { color: #2ecc71 !important; }
.estado-cafe { color: #795548 !important; }
.estado-morado { color: #9b59b6 !important; }
.estado-celeste { color: #81d4fa !important; }
.estado-coral { color: #ff8a65 !important; }
.estado-azul-oscuro { color: #2c3e50 !important; }
.estado-naranja { color: #f39c12 !important; }
.estado-gris-oscuro { color: #555555 !important; }
.estado-beige { color: #f5f5dc !important; }
@keyframes blink-anim { 50% { opacity: 0.6; } }

.swal2-container { z-index: 30000 !important; }
.text-label { font-weight: bold; white-space: nowrap; transform-origin: center center; color: #000; background-color: transparent; text-shadow: 0 0 3px rgba(255,255,255,0.9); padding: 2px; line-height: 1.1; text-align: center; pointer-events: none; z-index: 6000; }
.dashboard-panel { padding: 15px 20px; border-top: 1px solid #eee; background: #fff; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 10px; }
.legend-item { display: flex; align-items: center; font-size: 0.9em; color: #444; }
.legend-color-box { width: 18px; height: 18px; margin-right: 8px; border: 1px solid #ccc; flex-shrink: 0; }
.total-row { border-top: 1px solid #eee; padding-top: 10px; text-align: right; font-size: 1.3em; font-weight: bold; color: #333; }

/* --- LOADER / PANTALLA DE CARGA --- */
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco casi opaco */
    z-index: 99999; /* Por encima de TODO (swal, modales, etc) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* El círculo giratorio */
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3; /* Color gris claro */
    border-top: 6px solid #e74c3c; /* Color rojo (el mismo de tu botón PDF) */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.loading-text {
    font-size: 1.2em;
    color: #333;
    font-weight: bold;
    font-family: "Segoe UI", sans-serif;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Clase para ocultar el loader suavemente */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}