/* ==============================================================================
 * NOTICIAS DE CIRCOMBIA — VAMOS PA'LANTE
 * Identidad visual tomada de la pieza oficial del evento (Filantropía Uniandes)
 * ============================================================================== */

:root {
    --night: #1B1835;      /* fondo del banner */
    --night-2: #241F45;    /* superficies */
    --night-3: #312B5C;    /* bordes y superficies elevadas */
    --lemon: #FCFF61;      /* resaltado de "Vamos Pa'lante" */
    --lemon-ink: #1B1835;  /* texto sobre limón */
    --brass: #E5C07B;      /* dorado de "Circombia" */
    --paper: #F7F5EE;      /* texto principal */
    --muted: #ABA5CF;      /* texto secundario */
    --curtain: #D7262E;    /* rojo del moño y del telón */
    --seat-free: #4A4391;
    --seat-free-edge: #7D74D1;
    --seat-taken: #2A2550;
}

html { -webkit-text-size-adjust: 100%; }

body.brand {
    background: var(--night);
    color: var(--paper);
    font-family: 'Poppins', system-ui, sans-serif;
}

.font-circus {
    font-family: 'Rye', 'Poppins', serif;
    font-weight: 400;
    letter-spacing: 0.01em;
}

[x-cloak] { display: none !important; }

/* Foco visible y consistente para navegación con teclado */
.brand :focus-visible {
    outline: 3px solid var(--lemon);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Fila de puntos como la de la pieza bajo "Circombia" */
.brass-dots {
    height: 4px;
    background-image: radial-gradient(circle, var(--brass) 1.4px, transparent 1.6px);
    background-size: 12px 4px;
    background-repeat: repeat-x;
}

/* Telón rojo y amarillo del escenario */
.curtain-stripes {
    background: repeating-linear-gradient(
        -60deg,
        var(--curtain) 0 14px,
        var(--lemon) 14px 28px
    );
}

/* Número grande del selector de cantidad */
.qty-figure {
    font-variant-numeric: tabular-nums;
    line-height: 0.9;
}

/* Sillas del plano */
.seat-node { cursor: pointer; }
.seat-node rect { transition: fill .15s ease, stroke .15s ease; }
.seat-node:hover rect,
.seat-node:focus-visible rect { stroke: var(--lemon); stroke-width: 2px; }
.seat-node:focus { outline: none; }
.seat-node.is-taken { cursor: not-allowed; }
.seat-node.is-taken:hover rect { stroke: transparent; }

/* Selección confirmada: un único pulso al elegir una silla */
@keyframes seat-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.seat-node.just-picked rect {
    transform-box: fill-box;
    transform-origin: center;
    animation: seat-pop .28s ease-out;
}

/* Revelado inicial del telón: el único movimiento no solicitado de la página */
@keyframes curtain-drop {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}
.curtain-reveal {
    transform-origin: top;
    animation: curtain-drop .6s cubic-bezier(.2, .8, .2, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* SweetAlert2 con la paleta del evento */
.brand .swal2-popup {
    background: var(--night-2);
    color: var(--paper);
    border: 1px solid var(--night-3);
    border-radius: 18px;
    font-family: 'Poppins', system-ui, sans-serif;
}
.brand .swal2-title { color: var(--paper); font-size: 1.25rem; }
.brand .swal2-html-container { color: var(--muted); font-size: .95rem; }
.brand .swal2-confirm {
    background: var(--lemon) !important;
    color: var(--lemon-ink) !important;
    font-weight: 700;
    border-radius: 12px !important;
}
.brand .swal2-cancel {
    background: var(--night-3) !important;
    color: var(--paper) !important;
    border-radius: 12px !important;
}

@media print {
    .no-print { display: none !important; }
    body.brand { background: #fff !important; color: #111 !important; }
}