/* ==========================================================================
   PRIME CHAMPIONS · PANTALLA DE ACCESO
   --------------------------------------------------------------------------
   Capa que se carga DESPUÉS de style.css / prime-theme.css y se ocupa sólo de
   #auth y #crearClub. Existe por dos motivos:

   1. Arreglar el checkbox "Mantener sesión iniciada". `.authBox input`
      (style.css:1532) y `#auth input` (style.css:7561) aplican `width:100%` y
      `padding:12px 16px !important` a TODOS los inputs de la caja, incluido el
      `type="checkbox"`. El resultado era un cuadrado azul del sistema de ~48px
      centrado encima de su propia etiqueta. Aquí el checkbox se rehace como
      interruptor con la paleta violeta y la etiqueta vuelve a su renglón.

   2. Dar entrada al acceso: fondo animado, aparición escalonada de los campos
      y jerarquía real entre "Iniciar sesión" (acción principal) e "Iniciar
      como invitado" (secundaria). Antes eran dos botones violetas idénticos.

   Los efectos son puertos de reactbits.dev que ya vivían en el proyecto
   (js/reactbits.js, js/reactbits-fondos.js). Todo respeta
   `prefers-reduced-motion`.
   ========================================================================== */

/* ==========================================================================
   1 · ESCENARIO
   ========================================================================== */

#auth,
#crearClub {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: clamp(16px, 4vw, 40px);
}

/* Lienzo del fondo animado. Va detrás de todo y no intercepta el puntero:
   los campos tienen que seguir siendo clicables. */
.accesoFondo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
}

html.modo-claro .accesoFondo { opacity: 0.38; }

/* Viñeta que hunde los bordes para que la caja no compita con el fondo. */
.accesoFondo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, var(--pc-fondo) 100%);
}

html.modo-claro .accesoFondo::after {
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, var(--pc-fondo) 100%);
}

/* Rejilla tenue por encima del fondo: da textura sin robar atención. */
.accesoRejilla {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        linear-gradient(var(--pc-borde-suave) 1px, transparent 1px),
        linear-gradient(90deg, var(--pc-borde-suave) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
}

/* ==========================================================================
   2 · LA CAJA
   ========================================================================== */

#auth .authBox,
#crearClub .clubBox {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    padding: clamp(26px, 4.5vw, 38px) clamp(22px, 4vw, 34px) clamp(22px, 3.5vw, 30px) !important;
    border-radius: var(--pc-radio-xl) !important;
    background:
        linear-gradient(160deg, rgba(33, 29, 56, 0.86) 0%, rgba(18, 15, 36, 0.92) 100%) !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    box-shadow:
        var(--pc-sombra-4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

html.modo-claro #auth .authBox,
html.modo-claro #crearClub .clubBox {
    background: linear-gradient(160deg, #ffffff 0%, #f7f2ff 100%) !important;
    box-shadow: 0 24px 60px rgba(72, 46, 119, 0.16), inset 0 1px 0 #fff !important;
}

/* Halo giratorio del borde — port de StarBorder (reactbits.dev/animations).
   Es un cónico enmascarado a 1px: se ve como si la luz recorriera el canto. */
#auth .authBox::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--acceso-giro, 0deg),
        transparent 0deg,
        var(--pc-primario-alt) 40deg,
        var(--pc-oro) 75deg,
        transparent 130deg,
        transparent 360deg
    );
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0.75;
    animation: accesoGiro 6s linear infinite;
    pointer-events: none;
}

@property --acceso-giro {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes accesoGiro {
    to { --acceso-giro: 360deg; }
}

/* ==========================================================================
   3 · CABECERA
   ========================================================================== */

#auth .authBox h1,
#crearClub .clubBox h1 {
    font-size: clamp(1.65rem, 5.5vw, 2.1rem) !important;
    line-height: 1.05;
    margin: 0 0 6px !important;
    letter-spacing: 0.5px;
}

/* Con el título partido, el color lo pone cada letra (lo calcula acceso.js).
   Hay que apagar los dos mecanismos que traía el h1, o el título desaparece:

   · el degradado recortado (`background-clip: text` de prime-theme.css), que
     deja de alcanzar a las letras porque cada una lleva un `transform`;
   · `-webkit-text-fill-color: transparent` de style.css:7546, que gana sobre
     `color` — era lo que dejaba el título en blanco, y su `text-shadow`
     oscuro lo que se veía como una mancha borrosa en su lugar. */
#auth .authBox h1.accesoTituloPartido,
#crearClub .clubBox h1.accesoTituloPartido {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    color: var(--pc-texto) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    animation: none !important;
}

.accesoTituloPartido .accesoLetra {
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 2px 18px rgba(10, 8, 19, 0.55);
}

html.modo-claro .accesoTituloPartido .accesoLetra {
    text-shadow: none;
}

/* SplitText escribe un <span> por letra. Cada una entra por separado. */
.accesoLetra {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px) rotateX(-40deg);
    animation: accesoLetraEntra 520ms var(--pc-salida) forwards;
    animation-delay: var(--retraso, 0ms);
}

@keyframes accesoLetraEntra {
    to { opacity: 1; transform: none; }
}

#auth .authBox h2,
#crearClub .clubBox h2 {
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue) !important;
    margin: 0 0 22px !important;
}

/* ==========================================================================
   4 · CAMPOS
   ========================================================================== */

#auth .authBox input:not([type="checkbox"]),
#crearClub .clubBox input:not([type="checkbox"]) {
    width: 100%;
    margin-top: 10px !important;
    padding: 14px 16px !important;
    border-radius: var(--pc-radio-sm) !important;
    background: rgba(10, 8, 19, 0.55) !important;
    border: 1px solid var(--pc-borde) !important;
    color: var(--pc-texto) !important;
    font-size: 0.95rem !important;
    transition:
        border-color var(--pc-normal),
        box-shadow var(--pc-normal),
        background var(--pc-normal) !important;
}

html.modo-claro #auth .authBox input:not([type="checkbox"]),
html.modo-claro #crearClub .clubBox input:not([type="checkbox"]) {
    background: #ffffff !important;
    border-color: var(--pc-borde-fuerte) !important;
}

#auth .authBox input:not([type="checkbox"]):focus,
#crearClub .clubBox input:not([type="checkbox"]):focus {
    border-color: var(--pc-primario) !important;
    background: rgba(16, 12, 30, 0.75) !important;
    box-shadow: 0 0 0 3px var(--pc-glow-suave) !important;
}

html.modo-claro #auth .authBox input:not([type="checkbox"]):focus {
    background: #ffffff !important;
}

/* ==========================================================================
   5 · EL CHECKBOX  ·  el bug de esta pantalla
   --------------------------------------------------------------------------
   La etiqueta vuelve a ser una fila: interruptor a la izquierda, texto a la
   derecha, alineados al centro vertical. El `input` se saca del flujo de
   `.authBox input` con reglas propias más específicas.
   ========================================================================== */

/* `.oculto` tiene que seguir ganando: el bloque de términos sólo aparece en
   el registro, y un `display:flex` a secas lo mostraba también en el login. */
.authCheckbox:not(.oculto) {
    display: flex !important;
}

.authCheckbox {
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 14px 0 4px;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pc-texto-suave);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.authCheckbox:hover { color: var(--pc-texto); }

/* El interruptor. `appearance:none` borra el control azul del sistema; el
   resto lo dibuja el propio elemento.
   `min-height` es obligatorio aquí: `input,select,textarea` de prime-ui.css
   fija `min-height: var(--pc-tap)` (44 px) y el mínimo gana siempre sobre
   `height`, así que sin anularlo el interruptor sale cuadrado. */
#auth .authCheckbox input[type="checkbox"],
#crearClub .authCheckbox input[type="checkbox"],
.authCheckbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    position: relative;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: rgba(10, 8, 19, 0.8) !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background var(--pc-normal), border-color var(--pc-normal);
}

html.modo-claro .authCheckbox input[type="checkbox"] {
    background: #e3d8f5 !important;
}

/* La perilla. */
.authCheckbox input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pc-texto-tenue);
    transform: translateY(-50%);
    transition: transform var(--pc-normal) var(--pc-salida), background var(--pc-normal);
}

.authCheckbox input[type="checkbox"]:checked {
    background: linear-gradient(135deg, var(--pc-500), var(--pc-300)) !important;
    border-color: transparent !important;
}

.authCheckbox input[type="checkbox"]:checked::after {
    background: #ffffff;
    transform: translateY(-50%) translateX(16px);
}

.authCheckbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--pc-primario-alt);
    outline-offset: 3px;
}

/* El de términos comparte la clase pero es una casilla, no un interruptor:
   se distingue por su id para no confundir "acepto" con "recordame". */
.authCheckbox input#aceptarTerminos {
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    border-radius: 6px !important;
}

.authCheckbox input#aceptarTerminos::after {
    top: 45%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    background: none;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transition: transform var(--pc-rapido) var(--pc-salida);
}

.authCheckbox input#aceptarTerminos:checked::after {
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
    background: none;
}

.authCheckbox a {
    min-height: 0 !important;
    padding: 0 !important;
    color: var(--pc-primario-alt) !important;
}

/* ==========================================================================
   6 · BOTONES  ·  jerarquía
   --------------------------------------------------------------------------
   Antes "Iniciar sesión" e "Iniciar como invitado" eran el mismo botón
   violeta: dos acciones de peso muy distinto compitiendo por igual. Ahora el
   principal es sólido y el invitado es de contorno.
   ========================================================================== */

#auth .authBox > button,
#crearClub .clubBox > button {
    width: 100%;
    margin-top: 16px !important;
    padding: 14px 20px !important;
    border-radius: var(--pc-radio-sm) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.3px !important;
    cursor: pointer;
}

/* Los ids van prefijados por `#auth` / `#crearClub` porque style.css:7577
   define `#auth button` (0,1,1) y un `#btnInvitado` suelto (0,1,0) perdería
   contra él aun con la misma propiedad. */
#auth #btnAuth,
#crearClub #btnCrearClub,
#auth #btnConfirmarInvitado {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pc-500), var(--pc-300)) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 10px 26px var(--pc-glow-suave) !important;
}

/* Brillo que cruza el botón principal — port de ShinyText. */
#auth #btnAuth::after,
#crearClub #btnCrearClub::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
    transform: skewX(-18deg);
    animation: accesoBrillo 3.4s ease-in-out infinite;
    animation-delay: 1.2s;
    pointer-events: none;
}

@keyframes accesoBrillo {
    0%, 62% { left: -60%; }
    92%, 100% { left: 130%; }
}

/* El invitado: mismo tamaño, menos peso. */
#auth #btnInvitado {
    background: transparent !important;
    border: 1px solid var(--pc-borde-fuerte) !important;
    color: var(--pc-texto-suave) !important;
    box-shadow: none !important;
    transition:
        border-color var(--pc-normal),
        color var(--pc-normal),
        background var(--pc-normal),
        transform var(--pc-rapido) var(--pc-salida) !important;
}

#auth #btnInvitado:hover {
    background: var(--pc-borde-suave) !important;
    border-color: var(--pc-primario) !important;
    color: var(--pc-texto) !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

/* "Cancelar" es el escape del bloque de invitado: tiene que leerse como
   enlace, no como un tercer botón. Traía sus colores en un atributo `style`
   pero `#auth button` los pisaba y salía violeta a ancho completo. */
#auth #btnCancelarInvitado {
    width: auto !important;
    margin: 8px auto 0 !important;
    padding: 6px 10px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--pc-texto-tenue) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    text-decoration: underline;
    display: block;
}

#auth #btnCancelarInvitado:hover {
    color: var(--pc-texto) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Los dos botones verdes de verificación heredaban `background:#26a375` de un
   atributo `style` y quedaban fuera de la paleta. Se los pasa a la familia
   del éxito del tema. */
#auth #btnVerify,
#auth #btnResetPassCode {
    background: linear-gradient(135deg, #1f9b71, var(--pc-exito)) !important;
    border: none !important;
    color: #06231a !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   7 · SEPARADOR
   ========================================================================== */

.accesoSeparador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue);
}

.accesoSeparador::before,
.accesoSeparador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pc-borde-fuerte), transparent);
}

/* ==========================================================================
   8 · ENLACES Y PIE
   ========================================================================== */

#auth .authBox p {
    margin: 12px 0 0 !important;
    font-size: 0.85rem;
}

#auth .textoTerminos {
    margin-top: 18px !important;
    font-size: 0.72rem !important;
    line-height: 1.5;
    color: var(--pc-texto-tenue) !important;
}

/* El bloque de invitado hereda el mismo lenguaje que el resto de la caja:
   antes traía sus colores en atributos `style`, ajenos al tema. */
#contenedorInvitado {
    margin-top: 14px !important;
    padding: 16px !important;
    border-radius: var(--pc-radio) !important;
    background: rgba(10, 8, 19, 0.4) !important;
    border: 1px solid var(--pc-borde) !important;
    animation: accesoDespliegue 320ms var(--pc-salida);
}

html.modo-claro #contenedorInvitado {
    background: rgba(72, 46, 119, 0.05) !important;
}

@keyframes accesoDespliegue {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

#contenedorInvitado h3 {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--pc-texto-tenue) !important;
    margin: 0 0 10px !important;
}

/* ==========================================================================
   9 · ENTRADA ESCALONADA
   --------------------------------------------------------------------------
   Port de AnimatedContent. El JS marca los hijos directos de la caja con
   `--retraso`; cada uno sube a su turno.
   ========================================================================== */

.accesoEntra {
    opacity: 0;
    transform: translateY(16px);
    animation: accesoSube 560ms var(--pc-salida) forwards;
    animation-delay: var(--retraso, 0ms);
}

@keyframes accesoSube {
    to { opacity: 1; transform: none; }
}

/* La caja entera entra antes que su contenido. */
.accesoCajaEntra {
    animation: accesoCajaSube 700ms var(--pc-salida);
}

@keyframes accesoCajaSube {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   10 · MOVIMIENTO REDUCIDO
   --------------------------------------------------------------------------
   Nada se mueve solo: las animaciones de entrada dejan el estado final y los
   bucles (halo, brillo) se apagan.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .accesoLetra,
    .accesoEntra {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .accesoCajaEntra,
    #contenedorInvitado { animation: none; }

    #auth .authBox::before,
    #btnAuth::after,
    #btnCrearClub::after { animation: none; }

    #auth .authBox::before { opacity: 0.4; }
}

/* ==========================================================================
   11 · PANTALLAS ESTRECHAS
   ========================================================================== */

@media (max-width: 480px) {
    #auth,
    #crearClub { padding: 14px; }

    #auth .authBox,
    #crearClub .clubBox {
        padding: 24px 18px 20px !important;
        border-radius: var(--pc-radio-lg) !important;
    }

    .accesoRejilla { background-size: 40px 40px; }
}

/* Alto muy corto (móvil apaisado): la caja deja de centrarse y la pantalla
   scrollea, en vez de recortar el formulario por arriba. */
@media (max-height: 620px) {
    #auth,
    #crearClub {
        align-items: flex-start;
        overflow-y: auto;
    }
}