/* ====================================
   VARIABLES DE COLOR
==================================== */

:root {
    --fondo: #02040d;
    --azul: #172554;
    --azul-panel: #101b3a;
    --dorado: #f5d78e;
    --dorado-claro: #fff0c5;
    --texto: #cbd5e1;
    --borde: rgba(245, 215, 142, 0.45);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: hidden;

    color: white;
    font-family: Georgia, serif;
}

body.modal-activo {
    overflow: hidden;
}

button,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 4px;
}


/* ====================================
   NAVBAR TRANSPARENTE
==================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 30;

    background: rgba(8, 13, 32, 0.2);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-bottom:
        1px solid rgba(245, 215, 142, 0.15);
}

.navbar-contenido {
    max-width: 1400px;
    min-height: 72px;

    padding: 10px 35px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.marca {
    color: var(--dorado);
    text-decoration: none;

    font-size: clamp(13px, 2vw, 19px);
    white-space: nowrap;

    text-shadow:
        0 0 15px rgba(245, 215, 142, 0.5);
}

.navbar-acciones {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    gap: 12px;
}

.navbar-enlaces {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    margin-left: 14px;
}

.navbar-enlaces a {
    padding: 8px 14px;
    border-radius: 20px;

    color: rgba(245, 215, 142, 0.85);
    text-decoration: none;
    font: 600 14px Arial, sans-serif;

    transition:
        color 0.3s,
        text-shadow 0.3s;
}

.navbar-enlaces a:hover {
    color: var(--dorado-claro);
    text-shadow: 0 0 12px rgba(245, 215, 142, 0.6);
}

.nav-boton {
    white-space: nowrap;
    padding: 12px 23px;
    min-height: 43px;

    border: 1px solid var(--dorado);
    border-radius: 30px;

    background: rgba(8, 13, 32, 0.4);
    color: var(--dorado);

    font: bold 14px Arial, sans-serif;

    transition:
        transform 0.3s,
        background 0.3s,
        box-shadow 0.3s;
}

.nav-boton.registro {
    background: linear-gradient(
        120deg,
        #b99b52,
        #f5d78e
    );

    color: #081122;
}

.nav-boton:hover {
    transform: translateY(-2px);

    box-shadow:
        0 0 20px rgba(245, 215, 142, 0.4);
}


/* El cielo estrellado vive en fondo-estrellado.css (compartido). */


/* ====================================
   CONTENIDO CENTRAL
==================================== */

.contenedor {
    position: relative;
    z-index: 2;

    min-height: 100vh;
    min-height: 100dvh;

    padding: 90px 25px 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    pointer-events: none;
}

.luna {
    margin-bottom: 18px;

    font-size: clamp(60px, 8vw, 100px);
    color: var(--dorado);

    text-shadow:
        0 0 20px rgba(245, 215, 142, 0.7),
        0 0 35px rgba(245, 215, 142, 0.4);
}

.contenedor h1 {
    color: var(--dorado-claro);

    font-size: clamp(32px, 6vw, 75px);
    letter-spacing: 2px;

    text-shadow: 0 0 25px #b99b52;
}

.linea {
    width: 160px;
    height: 2px;

    margin: 25px auto;

    background: #d4af65;
}

.contenedor h2 {
    font: bold clamp(
        18px,
        3vw,
        36px
    ) Arial, sans-serif;

    letter-spacing: 7px;

    animation:
        aparecer 3s ease-in-out infinite alternate;
}

.contenedor p {
    margin-top: 24px;
    max-width: 580px;

    font-size: 19px;
    line-height: 1.5;
    color: var(--texto);
}

.iconos-decorativos {
    margin-top: 30px;

    font-size: 28px;
    letter-spacing: 8px;

    color: var(--dorado);
}

@keyframes aparecer {
    from {
        opacity: 0.45;
    }

    to {
        opacity: 1;
    }
}


/* ====================================
   CONTENEDOR DE ÍCONOS ESTÁTICOS
==================================== */

.orbita {
    position: fixed;
    inset: 0;

    z-index: 10;
    pointer-events: none;
}


/* ====================================
   ÍCONOS FIJOS CON BRILLO DORADO
==================================== */

.astro-icono {
    /* Color de cada ícono (se redefine con style="--acento: r, g, b") */
    --acento: 245, 215, 142;

    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;

    width: var(--tam-icono, 82px);
    height: var(--tam-icono, 82px);

    display: flex;
    align-items: center;
    justify-content: center;

    /* La posición la controla el carrusel orbital (index1.js) */

    border-radius: 50%;
    border: 1px solid rgba(var(--brillo), 0.85);

    color: rgb(var(--acento));
    text-decoration: none;

    background: radial-gradient(
        circle,
        rgba(var(--brillo), 0.16),
        rgba(23, 37, 84, 0.6) 70%,
        rgba(8, 13, 32, 0.85)
    );

    box-shadow:
        0 0 9px rgba(var(--brillo), 0.4),
        0 0 18px rgba(var(--brillo), 0.15),
        inset 0 0 8px rgba(var(--brillo), 0.12);

    pointer-events: auto;

    /* No hay animación de movimiento */
    transition:
        background 0.3s,
        box-shadow 0.3s,
        border-color 0.3s;
}


/* AURA FIJA ALREDEDOR DE CADA ÍCONO */

.astro-icono::before {
    content: "";

    position: absolute;
    inset: -3px;

    border-radius: 50%;
    pointer-events: none;

    background: radial-gradient(
        circle,
        rgba(var(--brillo), 0.18),
        transparent 70%
    );

    filter: blur(6px);

    opacity: 0.18;

    /* Sin pulsación */
    animation: none;
}


/* SVG DE CADA ZONA */

.astro-icono svg .relleno {
    fill: currentColor;
}

.astro-icono svg {
    position: relative;
    z-index: 1;

    width: 56%;
    height: 56%;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;

    /* Brillo permanente */
    filter: none;

    /* Sin rotación ni pulsación */
    animation: none;
    transform: none;

    transition:
        color 0.3s,
        filter 0.3s;
}


/* ====================================
   EFECTO HOVER DE LOS ÍCONOS
==================================== */

.astro-icono:hover,
.astro-icono.activo,
.astro-icono:focus-visible {

    border-color: color-mix(in srgb, rgb(var(--brillo)) 70%, #fff);

    background: radial-gradient(
        circle,
        rgba(var(--brillo), 0.24),
        rgba(23, 37, 84, 0.7)
    );

    box-shadow:
        0 0 13px rgba(var(--brillo), 0.55),
        0 0 26px rgba(var(--brillo), 0.2),
        inset 0 0 10px rgba(var(--brillo), 0.16);

}

.astro-icono:hover svg,
.astro-icono.activo svg,
.astro-icono:focus-visible svg {

    color: color-mix(in srgb, rgb(var(--acento)) 30%, #fff);

    filter: none;

    /* Permanece estático */
    transform: none;
    animation: none;
}


/* ====================================
   VENTANA INFORMATIVA DE CADA ZONA
==================================== */

.ventana-info {
    position: fixed;

    top: 110px;
    left: 20px;

    width: min(290px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);

    overflow-y: auto;

    z-index: 20;
    padding: 23px;

    text-align: center;

    background: linear-gradient(
        145deg,
        rgba(25, 38, 78, 0.98),
        rgba(7, 13, 33, 0.99)
    );

    border:
        1px solid rgba(245, 215, 142, 0.7);

    border-radius: 18px;

    box-shadow:
        0 0 25px rgba(212, 175, 101, 0.25),
        0 15px 40px rgba(0, 0, 0, 0.45);

    opacity: 0;
    visibility: hidden;

    transform: translateY(12px) scale(0.95);

    pointer-events: none;

    transition:
        opacity 0.3s,
        transform 0.3s,
        visibility 0.3s;
}

.ventana-info.visible {
    opacity: 1;
    visibility: visible;

    /* Con el cursor encima, la órbita sigue detenida */
    pointer-events: auto;

    transform: translateY(0) scale(1);
}

.info-icono {
    margin-bottom: 10px;

    font-size: 32px;
    color: var(--dorado);
}

.ventana-info h3 {
    font-size: 23px;
    color: var(--dorado-claro);
}

.info-linea {
    width: 70px;
    height: 1px;

    margin: 15px auto;

    background: #d4af65;
}

.ventana-info p {
    font: 15px/1.6 Arial, sans-serif;
    color: #d7dfef;
}

.info-indicacion {
    display: block;

    margin-top: 17px;

    font: 12px Arial, sans-serif;
    color: var(--dorado);
}


/* ====================================
   FONDO OSCURECIDO DEL MODAL
==================================== */

.modal-fondo {
    position: fixed;
    inset: 0;

    z-index: 100;

    display: grid;
    place-items: center;

    padding: 16px;

    background: rgba(2, 4, 13, 0.85);
}


/* ====================================
   VENTANA LOGIN Y REGISTRO
==================================== */

.modal {
    position: relative;

    width: min(100%, 425px);
    max-height: calc(100dvh - 32px);

    overflow-y: auto;
    padding: 40px 36px 32px;

    background: linear-gradient(180deg, rgba(22, 36, 80, 0.94) 0%, rgba(9, 15, 38, 0.97) 100%);

    border: 1px solid rgba(245, 215, 142, 0.30);
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    text-align: center;

    /* Barra de desplazamiento discreta: pista transparente y pulgar
       dorado translúcido (Firefox: scrollbar-*; Chrome/Edge/Safari:
       ::-webkit-scrollbar). Reemplaza la barra oculta global. */
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 215, 142, 0.35) transparent;
}

.modal::-webkit-scrollbar {
    display: block;
    width: 6px;
    background: transparent;
}

.modal::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-corner {
    background: transparent;
}

.modal::-webkit-scrollbar-thumb {
    background: rgba(245, 215, 142, 0.30);
    border-radius: 6px;
}

.modal::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 215, 142, 0.55);
}

.cerrar-modal {
    position: absolute;

    top: 12px;
    right: 13px;

    width: 36px;
    height: 36px;

    background: transparent;
    border: none;
    border-radius: 50%;

    color: #e4d9bf;
    font: 28px Arial, sans-serif;
}

.cerrar-modal:hover {
    background: rgba(245, 215, 142, 0.15);
    color: white;
}

.modal h2 {
    margin-bottom: 8px;

    font: italic 600 32px/1.1 'Playfair Display', Georgia, serif;
    color: #fff3cf;
}

#modalDescripcion {
    margin-bottom: 24px;

    font: 15px/1.5 'Jost', 'Segoe UI', sans-serif;
    color: #b4bedc;
}


/* ====================================
   FORMULARIOS
==================================== */

.form-cuenta {
    display: flex;
    flex-direction: column;

    gap: 7px;
    text-align: left;
}

.form-cuenta label {
    margin-top: 9px;

    color: #c9d2ec;
    font: 500 13px 'Jost', 'Segoe UI', sans-serif;
    letter-spacing: 0.02em;
}

.form-cuenta input,
.form-cuenta select {
    width: 100%;
    height: 50px;

    padding: 0 14px;

    background: rgba(2, 4, 13, 0.72);

    border:
        1px solid rgba(160, 180, 255, 0.20);

    border-radius: 12px;
    outline: none;

    color: #f2f4fb;
    font: 16px 'Jost', 'Segoe UI', sans-serif;

    transition: border-color .2s, box-shadow .2s, background .2s;
}

.form-cuenta input::placeholder {
    color: #8792b3;
}

.form-cuenta select {
    color-scheme: dark;
    cursor: pointer;
}

.form-cuenta input:focus,
.form-cuenta select:focus {
    border-color: #f5d78e;
    background: rgba(2, 4, 13, 0.85);
    box-shadow: 0 0 0 4px rgba(245, 215, 142, 0.18);
}

.form-cuenta input:user-invalid {
    border-color: #ff8a97;
    background: rgba(60, 10, 20, 0.35);
}

.nota-form {
    margin-top: 2px;

    color: #9aa9c6;
    font: 12px/1.4 Arial, sans-serif;
}


/* ====================================
   CONTRASEÑAS
==================================== */

.campo-contrasena {
    position: relative;
}

.campo-contrasena input {
    padding-right: 48px;
}

.ver-contrasena {
    position: absolute;

    top: 50%;
    right: 8px;

    transform: translateY(-50%);

    padding: 7px;

    border: none;
    background: transparent;

    color: var(--dorado);
    cursor: pointer;

    display: flex;
    align-items: center;
}

.ver-contrasena .ojo {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Contraseña oculta: ojo abierto (para mostrar) */
.ver-contrasena .ojo-cerrado,
.ver-contrasena[aria-pressed="true"] .ojo-abierto {
    display: none;
}

/* Contraseña visible: ojo cerrado (para ocultar) */
.ver-contrasena[aria-pressed="true"] .ojo-cerrado {
    display: block;
}


/* ====================================
   BOTONES DE ENVÍO
==================================== */

.boton-enviar {
    min-height: 52px;
    margin-top: 20px;

    border: none;
    border-radius: 13px;

    background: linear-gradient(180deg, #f9e2a5 0%, #e0bb6c 100%);
    box-shadow: 0 10px 28px rgba(224, 187, 108, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.55);

    color: #0a1030;

    font: 600 17px 'Jost', 'Segoe UI', sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;

    transition: transform .2s, box-shadow .2s;
}

.boton-enviar:hover {
    background: linear-gradient(180deg, #fff0c4 0%, #ecc97b 100%);
    box-shadow: 0 14px 34px rgba(224, 187, 108, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
}

.boton-enviar:focus-visible {
    outline: 2px solid #f5d78e;
    outline-offset: 3px;
}

.boton-enviar:disabled {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: none;
    color: #8f9bbd;
    cursor: not-allowed;
    transform: none;
}

.borrar-formulario {
    align-self: center;
    margin-top: 6px;
    padding: 6px 10px;

    background: transparent;
    border: none;

    color: #9aa9c6;
    font: 13px 'Jost', 'Segoe UI', sans-serif;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.borrar-formulario:hover {
    color: var(--dorado-claro);
}

.mensaje-form {
    min-height: 18px;

    text-align: center;
    color: #f5d78e;

    font: 14px/1.5 'Jost', 'Segoe UI', sans-serif;
}

.mensaje-form.error {
    color: #ffb3bc;
}


/* ====================================
   SESIÓN ACTIVA EN LA BARRA
==================================== */

.usuario-sesion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.usuario-datos {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;

    font-family: Arial, sans-serif;
    line-height: 1.25;
}

.usuario-nombre {
    max-width: 160px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--dorado-claro);
    font-size: 14px;
    font-weight: bold;
}

.usuario-rol {
    color: var(--dorado);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-boton:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* ====================================
   AVISO TEMPORAL
==================================== */

.aviso-global {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);

    z-index: 120;

    max-width: calc(100vw - 32px);
    padding: 12px 20px;

    background: var(--azul-panel);
    border: 1px solid var(--borde);
    border-radius: 10px;

    color: var(--dorado-claro);
    font: 14px/1.4 Arial, sans-serif;
    text-align: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.aviso-global.error {
    color: #fca5a5;
}


/* ====================================
   CAMBIAR LOGIN / REGISTRO
==================================== */

.cambiar-cuenta {
    margin-top: 24px;

    color: var(--texto);
    font: 14px Arial, sans-serif;
}

.cambiar-cuenta button {
    margin-left: 4px;

    border: none;
    background: transparent;

    color: var(--dorado);

    font: 600 14px Arial, sans-serif;
    cursor: pointer;
}

.cambiar-cuenta button:hover {
    text-decoration: underline;
}



/* ====================================
   DISEÑO RESPONSIVO
==================================== */

@media (max-width: 430px) {

    /* en pantallas muy angostas los enlaces pasan a una segunda fila */
    .navbar-contenido {
        flex-wrap: wrap;
    }

    .navbar-enlaces {
        order: 3;
        flex-basis: 100%;
        justify-content: center;
    }

    .contenedor {
        padding-top: 125px;
    }
}

@media (max-width: 600px) {

    .navbar-contenido {
        min-height: 64px;
        padding: 10px 12px 6px;
    }

    .navbar-enlaces a {
        padding: 6px 9px;
        font-size: 12.5px;
    }

    .marca {
        font-size: 12px;
    }

    .navbar-acciones {
        gap: 7px;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
    }

    .usuario-sesion {
        gap: 7px;
    }

    .usuario-nombre {
        max-width: 90px;
        font-size: 12px;
    }

    .usuario-rol {
        font-size: 10px;
    }

    .nav-boton {
        padding: 9px 11px;

        font-size: 12px;
        min-height: 38px;
    }

    .contenedor h1 {
        font-size: clamp(28px, 8vw, 40px);
    }

    .contenedor h2 {
        font-size: 22px;
        letter-spacing: 4px;
    }

    .contenedor p {
        max-width: 270px;
        font-size: 15px;
    }

    .luna {
        font-size: 65px;
    }

    .ventana-info {
        padding: 17px;

        width: min(
            255px,
            calc(100vw - 24px)
        );
    }

    .ventana-info h3 {
        font-size: 19px;
    }

    .modal {
        padding: 25px 20px;
    }

    .modal h2 {
        font-size: 27px;
    }
}

/* PANTALLAS CON POCA ALTURA */

@media (max-height: 600px) {
    .contenedor {
        padding-top: 75px;
    }

    .luna {
        font-size: 50px;
        margin-bottom: 8px;
    }

    .linea {
        margin: 12px auto;
    }

    .contenedor p {
        margin-top: 12px;
    }

    .iconos-decorativos {
        margin-top: 12px;
    }
}

/* ACCESIBILIDAD */

@media (prefers-reduced-motion: reduce) {

    .estrellas,
    .contenedor h2,
    .modal,
    .modal-fondo {
        animation: none;
    }

    .astro-icono,
    .astro-icono svg,
    .ventana-info {
        transition: none;
    }
}


/* ====================================
   FLECHAS DEL CARRUSEL (solo teléfonos)
==================================== */

.orbita-controles {
    display: none;
}

@media (max-width: 600px) and (pointer: coarse) {

    .orbita-controles {
        display: block;
        position: absolute;
        inset: 0;

        z-index: 11;
        pointer-events: none;
    }

    .orbita-flecha {
        position: absolute;
        top: var(--flecha-top, 100px);

        width: 44px;
        height: 44px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(245, 215, 142, 0.4);

        color: var(--dorado);
        background: rgba(8, 13, 32, 0.6);

        box-shadow:
            0 0 10px rgba(245, 215, 142, 0.18),
            0 4px 12px rgba(0, 0, 0, 0.35);

        cursor: pointer;
        pointer-events: auto;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;

        transition:
            border-color 0.3s,
            box-shadow 0.3s,
            background 0.3s;
    }

    /* Centradas debajo de la órbita, separadas de forma simétrica */
    .orbita-flecha-izq { left: calc(50% - 68px); }
    .orbita-flecha-der { left: calc(50% + 24px); }

    .orbita-flecha svg {
        width: 22px;
        height: 22px;

        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .orbita-flecha:hover,
    .orbita-flecha:active,
    .orbita-flecha:focus-visible {
        border-color: rgba(245, 215, 142, 0.8);
        background: rgba(23, 37, 84, 0.75);

        box-shadow:
            0 0 14px rgba(245, 215, 142, 0.35),
            0 4px 12px rgba(0, 0, 0, 0.35);
    }
}


/* ====================================
   GIRO INDIVIDUAL DEL SÍMBOLO
   Una sola vuelta de 360° al seleccionar un ícono. Gira solo el SVG
   interno: el contenedor únicamente se posiciona (carrusel) y no
   cambia de tamaño, así que no tapa la ventana informativa.
==================================== */

.astro-icono.girando svg {
    animation: giro-simbolo 0.9s cubic-bezier(0.45, 0.05, 0.25, 1) 1;
}

@keyframes giro-simbolo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {

    .astro-icono.girando svg {
        animation: none;
    }
}


/* ====================================
   DISTRIBUCIÓN VERTICAL EN TELÉFONOS
   Contenido más arriba; órbita y flechas debajo (index1.js calcula las
   posiciones). Si no cabe, la página se desplaza.
==================================== */

@media (max-width: 600px) and (pointer: coarse) {

    .contenedor {
        justify-content: flex-start;
        padding-top: calc(var(--alto-barra, 70px) + 14px);
        min-height: var(--alto-pagina, 100dvh);
    }

    /* La órbita se mueve junto con la página */
    .orbita {
        position: absolute;
    }
}


/* ====================================
   ÍCONOS BLANCOS CON CÍRCULO AMARILLO LUMINOSO
   --acento: color del símbolo (blanco).
   --brillo: color del borde y del resplandor del círculo (amarillo).
==================================== */

.astro-icono {
    --acento: 255, 255, 255 !important;            /* símbolo blanco */
    --brillo: 245, 205, 95 !important;           /* círculo amarillo */
}


/* ====================================
   VENTANAS INFORMATIVAS COMPACTAS (TELÉFONOS)
   La posición la calcula posicionarVentana() (index1.js): centrada
   sobre la órbita, para no tapar íconos ni flechas.
==================================== */

@media (max-width: 600px) and (pointer: coarse) {

    .ventana-info {
        width: min(215px, calc(100vw - 24px));
        padding: 10px 13px 11px;
        border-radius: 14px;
        overflow-y: auto;
    }

    .info-icono {
        margin-bottom: 3px;
        font-size: 18px;
    }

    .ventana-info h3 {
        font-size: 16px;
        line-height: 1.2;
    }

    .info-linea {
        width: 46px;
        margin: 7px auto;
    }

    .ventana-info p {
        font-size: 12.5px;
        line-height: 1.45;
    }

    .info-indicacion {
        margin-top: 8px;
        font-size: 11px;
    }
}


/* ====================================
   PASE QR Y VALIDADOR
==================================== */

.pase-caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.pase-caja[hidden] {
    display: none;
}

.pase-tipo {
    margin: 0;
    color: #fff3cf;
    font: 600 17px 'Jost', 'Segoe UI', sans-serif;
}

.pase-qr {
    min-height: 254px;
    display: grid;
    place-items: center;
}

.pase-qr img {
    width: 230px;
    height: 230px;
    padding: 12px;
    background: #fff;
    border-radius: 14px;
}

.pase-qr img[hidden] {
    display: none;
}

.pase-folio {
    margin: 0;
    color: #f5d78e;
    font: 600 26px 'Jost', 'Segoe UI', sans-serif;
    letter-spacing: 0.08em;
}

.pase-estado {
    padding: 6px 16px;
    border-radius: 20px;
    background: #14532d;
    color: #bbf7d0;
    font: 600 13px 'Jost', 'Segoe UI', sans-serif;
    letter-spacing: 0.06em;
}

.pase-estado.usado {
    background: #7f1d1d;
    color: #fecaca;
}

.pase-aviso {
    margin: 4px 0 0;
    color: #b4bedc;
    font: 14px/1.5 'Jost', 'Segoe UI', sans-serif;
}

.pase-aviso.error {
    color: #ffb3bc;
}

.pase-boton {
    width: 100%;
}

.pase-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.pase-stats div {
    padding: 12px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.pase-stats strong {
    display: block;
    color: #f5d78e;
    font: 600 24px 'Jost', 'Segoe UI', sans-serif;
}

.pase-stats small {
    color: #b4bedc;
    font: 13px 'Jost', 'Segoe UI', sans-serif;
}

#paseAdmin .form-cuenta {
    width: 100%;
}

.pase-resultado {
    min-height: 20px;
    margin: 4px 0 0;
    font: 15px/1.5 'Jost', 'Segoe UI', sans-serif;
    color: #b4bedc;
}

.pase-resultado.bien {
    color: #7fd6a4;
}

.pase-resultado.mal {
    color: #ffb3bc;
}