/* ============================================================
   auth.css — Pantallas de acceso de la plataforma (mobile-first)
   ============================================================
   Se diseñan primero para el móvil instalado como app (PWA en pantalla
   completa) y luego se amplían a escritorio. Reglas que sostienen eso:

   - Alturas con 100dvh: en iOS la barra del navegador aparece y desaparece,
     y 100vh deja la pantalla cortada.
   - safe-area-inset: el notch y la barra de gestos no deben tapar nada.
   - Objetivos táctiles de 48px como mínimo y 16px de fuente en los inputs
     (por debajo de 16px, Safari hace zoom automático al enfocar).
   ============================================================ */

:root {
    --auth-azul: #005187;
    --auth-azul-medio: #4d82bc;
    --auth-azul-claro: #84b6f4;
    --auth-azul-palo: #c4dafa;
    --auth-tinta: #0f172a;
    --auth-tenue: #64748b;
    --auth-borde: #e2e8f0;
    --auth-fondo: #f1f5f9;
    --auth-superficie: #ffffff;
    --auth-error: #b3261e;
    --auth-error-suave: #fdeceb;
    --auth-exito: #1b5e20;
    --auth-exito-suave: #e6f4ea;
    --auth-radio: 16px;
    --auth-tap: 48px; /* objetivo táctil mínimo */
}

* { box-sizing: border-box; }

/* Iconos: los Material Symbols se dibujan como LIGADURAS (el texto
   "person_add" se sustituye por su glifo). El CSS de Google solo declara la
   propiedad con prefijo -webkit-, que Chrome en Android ya no aplica, y por
   eso en el móvil aparecía el nombre del icono en vez del dibujo. */
.material-symbols-rounded,
.material-symbols-outlined {
    font-feature-settings: 'liga' 1;
    font-variant-ligatures: common-ligatures discretionary-ligatures;
    -webkit-font-feature-settings: 'liga' 1;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1;
    user-select: none;
}

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

body.auth-body {
    margin: 0;
    min-height: 100dvh;
    background: var(--auth-fondo);
    color: var(--auth-tinta);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Evita el rebote elástico que en PWA parece un fallo. */
    overscroll-behavior-y: none;
}

/* ---------- Estructura ---------- */

.auth-envoltura {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* Panel de marca: oculto en móvil, donde el espacio vale oro. */
.auth-marca {
    display: none;
}

.auth-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Respeta notch, barra de estado y barra de gestos. */
    padding:
        calc(24px + env(safe-area-inset-top))
        calc(20px + env(safe-area-inset-right))
        calc(24px + env(safe-area-inset-bottom))
        calc(20px + env(safe-area-inset-left));
}

.auth-tarjeta {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* ---------- Cabecera ---------- */

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    background: var(--auth-azul);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 20px rgba(0, 81, 135, .25);
}

.auth-logo .material-symbols-rounded { font-size: 30px; }

/* Logotipo de la marca en la tarjeta. A diferencia de .auth-logo (un cuadro
   azul con un icono dentro), aquí va la imagen completa, que ya incluye el
   nombre, así que no lleva fondo ni caja. */
.auth-logo-img {
    display: flex;
    justify-content: center;
    margin: 0 auto 18px;
}
.auth-logo-img img {
    height: 40px;
    width: auto;
    display: block;
}

.auth-titulo {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: center;
    line-height: 1.2;
}

.auth-sub {
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--auth-tenue);
    text-align: center;
    line-height: 1.5;
}

.auth-sub strong { color: var(--auth-tinta); font-weight: 600; }

/* ---------- Formulario ---------- */

.auth-campo { margin-bottom: 16px; }

/* Etiqueta y su enlace de apoyo (p. ej. "¿Olvidaste tu contraseña?") en la
   misma línea: ahorra una fila entera y deja el enlace donde se necesita. */
.auth-etiqueta-fila {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-etiqueta-fila .auth-etiqueta { margin-bottom: 7px; }

.auth-enlace-menor {
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-azul);
    text-decoration: none;
    white-space: nowrap;
}

.auth-enlace-menor:hover { text-decoration: underline; }

.auth-etiqueta {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.auth-input {
    width: 100%;
    min-height: var(--auth-tap);
    padding: 13px 16px;
    /* 16px exactos: menos que eso y Safari hace zoom al enfocar. */
    font-size: 16px;
    font-family: inherit;
    color: var(--auth-tinta);
    background: var(--auth-superficie);
    border: 1.5px solid var(--auth-borde);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.auth-input:focus {
    border-color: var(--auth-azul);
    box-shadow: 0 0 0 4px rgba(0, 81, 135, .12);
}

.auth-input::placeholder { color: #94a3b8; }
.auth-input:disabled { background: #f8fafc; color: var(--auth-tenue); }

/* Campo con icono a la derecha (ojo de contraseña) */
.auth-campo-icono { position: relative; }
.auth-campo-icono .auth-input { padding-right: 52px; }

.auth-ojo {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    color: var(--auth-tenue);
    cursor: pointer;
    border-radius: 10px;
}

.auth-ojo:active { background: var(--auth-fondo); }

/* ---------- Botones ---------- */

.auth-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: var(--auth-tap);
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .08s, box-shadow .15s;
    /* Quita el destello azul del tap en Android. */
    -webkit-tap-highlight-color: transparent;
}

.auth-boton:active { transform: scale(.985); }

.auth-boton--principal {
    background: var(--auth-azul);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 81, 135, .2);
}

.auth-boton--principal:hover { background: #003f6b; }

.auth-boton--principal:disabled {
    background: #94a3b8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.auth-boton--social {
    background: var(--auth-superficie);
    color: var(--auth-tinta);
    border: 1.5px solid var(--auth-borde);
    margin-bottom: 12px;
}

.auth-boton--social:hover { background: #f8fafc; }

.auth-boton--apple {
    background: #000;
    color: #fff;
    border-color: #000;
}

.auth-boton--apple:hover { background: #1a1a1a; }

.auth-boton--texto {
    background: none;
    color: var(--auth-azul);
    min-height: 44px;
    font-size: 15px;
}

.auth-boton svg,
.auth-boton img { width: 20px; height: 20px; flex-shrink: 0; }

/* ---------- Separador ---------- */

.auth-separador {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
}

.auth-separador::before,
.auth-separador::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--auth-borde);
}

/* ---------- Avisos ---------- */

.auth-aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    padding: 13px 15px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 12px;
}

.auth-aviso .material-symbols-rounded { font-size: 20px; flex-shrink: 0; }
.auth-aviso--error { background: var(--auth-error-suave); color: var(--auth-error); }
.auth-aviso--exito { background: var(--auth-exito-suave); color: var(--auth-exito); }
.auth-aviso--info  { background: var(--auth-azul-palo); color: #00344f; }

/* ---------- Código 2FA ---------- */

.auth-codigo {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-codigo input {
    /* Se reparten el ancho en lugar de medir fijo: así entran los 6 dígitos
       incluso en pantallas de 320px sin desbordar. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 56px;
    aspect-ratio: 3 / 4;
    padding: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    font-family: inherit;
    color: var(--auth-tinta);
    background: var(--auth-superficie);
    border: 1.5px solid var(--auth-borde);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.auth-codigo input:focus {
    border-color: var(--auth-azul);
    box-shadow: 0 0 0 4px rgba(0, 81, 135, .12);
}

.auth-codigo input.lleno {
    border-color: var(--auth-azul-medio);
    background: #f8fbff;
}

/* ---------- Pie ---------- */

.auth-pie {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--auth-borde);
    text-align: center;
    font-size: 14.5px;
    color: var(--auth-tenue);
    line-height: 1.7;
}

.auth-pie p { margin: 0; }

.auth-pie-menor {
    margin-top: 6px !important;
    font-size: 13.5px;
}

.auth-pie-menor a { font-weight: 500; color: var(--auth-tenue); }
.auth-pie-menor a:hover { color: var(--auth-azul); }

.auth-pie a {
    color: var(--auth-azul);
    font-weight: 600;
    text-decoration: none;
}

.auth-pie a:hover { text-decoration: underline; }

.auth-legal {
    margin-top: 20px;
    font-size: 12.5px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.5;
}

.auth-legal a { color: var(--auth-tenue); text-decoration: underline; }

/* ---------- Giro entre pantallas ---------- */
/* Al pasar de login a registro (o a demo) la tarjeta gira sobre su eje
   vertical. Lo que hace que se lea como un objeto y no como una imagen
   deformándose:

   - EJE DESPLAZADO: `transform-origin` va hacia el borde por el que la tarjeta
     sale, no al centro. Una puerta gira por su bisagra.
   - ANTICIPO Y ASENTAMIENTO: antes de irse retrocede un grado; al llegar pasa
     de largo y vuelve. Un objeto con masa no arranca ni frena en seco.
   - CURVAS ASIMÉTRICAS: la salida acelera, la entrada frena largo. El mismo
     ease en ambas se siente mecánico.

   La tarjeta se anima como UNA superficie (`transform-style: flat`). El
   contenido no se anima por separado: hacerlo promueve cada bloque a su propia
   capa y aparecen costuras entre ellas. */

.auth-panel {
    /* 1100px: bastante cerca para que el giro tenga volumen, bastante lejos
       para que el texto no se deforme en trapecio mientras rota. */
    perspective: 1100px;
    perspective-origin: 50% 50%;
}

.auth-tarjeta {
    /* `flat`, NO `preserve-3d`. Con preserve-3d cada hijo vive en su propio
       plano y el navegador lo rasteriza como una capa aparte: en los bordes
       aparecen costuras (líneas horizontales cruzando la tarjeta). Aquí gira
       la tarjeta como una superficie sólida, que es el efecto buscado. */
    transform-style: flat;
    will-change: transform, opacity;
    /* La sombra se acompaña por transición y no dentro de los keyframes:
       animar box-shadow en cada fotograma repinta y parpadea en el borde. */
    transition: box-shadow .34s ease;
}

/* Mientras sale, la sombra crece: la tarjeta se despega del fondo. */
.auth-tarjeta.girando-salida,
.auth-tarjeta.girando-salida-inversa {
    box-shadow: 0 26px 56px -22px rgba(15, 23, 42, .22);
}

/* ---- Entrada ----
   Sin `both`/`backwards` a propósito: aplicarían opacity:0 antes de arrancar
   y, si una fuente tarda, la tarjeta se quedaría EN BLANCO. El estado por
   defecto es visible; la animación solo la mueve. */
.auth-tarjeta {
    opacity: 1;
    transform-origin: 30% 50%;
    animation: auth-flip-in .58s cubic-bezier(.16, .84, .27, 1) both;
    /* `both` aquí es seguro porque el fotograma inicial ya no es invisible
       del todo (0.001 basta para no ver un hueco si algo se retrasa). */
}

@keyframes auth-flip-in {
    0% {
        opacity: 0;
        transform: rotateY(-13deg) translate3d(38px, 0, 0) scale(.972);
    }
    /* 60%: la tarjeta ya casi está de frente pero sigue en el aire. Este paso
       intermedio es lo que evita el movimiento lineal de dos fotogramas. */
    60% {
        opacity: 1;
        transform: rotateY(-2.6deg) translate3d(5px, 0, 0) scale(.997);
    }
    /* 82%: micro-rebasamiento. Un objeto con masa no se detiene en seco:
       pasa ligeramente de largo y vuelve. Medio grado basta. */
    82% {
        transform: rotateY(.8deg) translate3d(-2px, 0, 0) scale(1.0015);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* ---- Salida ----
   `forwards`: se queda en el último fotograma hasta que la navegación ocurre;
   sin esto la tarjeta reaparecería de golpe al acabar el giro. */
.auth-tarjeta.girando-salida {
    transform-origin: 70% 50%;
    animation: auth-flip-out .34s cubic-bezier(.55, 0, .85, .35) forwards;
}

@keyframes auth-flip-out {
    0% {
        opacity: 1;
        transform: none;
    }
    /* Contragolpe: antes de irse, la tarjeta se asienta un grado en sentido
       contrario. Es el mismo principio del anticipo en animación clásica y es
       lo que más "peso" añade por lo poco que cuesta. */
    18% {
        transform: rotateY(1.6deg) translate3d(4px, 0, 0) scale(1.003);
    }
    100% {
        opacity: 0;
        transform: rotateY(14deg) translate3d(-42px, 0, 0) scale(.965);
    }
}

/* ---- Sentido inverso (volver atrás) ----
   El eje y los signos se espejan para que el gesto acompañe a la dirección
   de la navegación. */
.auth-tarjeta.girando-salida-inversa {
    transform-origin: 30% 50%;
    animation: auth-flip-out-inv .34s cubic-bezier(.55, 0, .85, .35) forwards;
}

@keyframes auth-flip-out-inv {
    0% {
        opacity: 1;
        transform: none;
    }
    18% {
        transform: rotateY(-1.6deg) translate3d(-4px, 0, 0) scale(1.003);
    }
    100% {
        opacity: 0;
        transform: rotateY(-14deg) translate3d(42px, 0, 0) scale(.965);
    }
}

body.auth-body.volviendo .auth-tarjeta {
    transform-origin: 70% 50%;
    animation-name: auth-flip-in-inv;
}

@keyframes auth-flip-in-inv {
    0% {
        opacity: 0;
        transform: rotateY(13deg) translate3d(-38px, 0, 0) scale(.972);
    }
    60% {
        opacity: 1;
        transform: rotateY(2.6deg) translate3d(-5px, 0, 0) scale(.997);
    }
    82% {
        transform: rotateY(-.8deg) translate3d(2px, 0, 0) scale(1.0015);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}

/* El contenido NO se anima por separado a propósito. Escalonarlo obliga al
   navegador a promover cada bloque a su propia capa y aparecen costuras entre
   ellos; además, con la tarjeta ya girando entera, el escalonado no se
   percibe. Un solo movimiento sólido se lee mejor que muchos pequeños. */

/* ---------- Cargando ---------- */

.auth-girando {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: auth-giro .7s linear infinite;
}

@keyframes auth-giro { to { transform: rotate(360deg); } }

/* ---------- Volver ---------- */

.auth-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 4px;
    color: var(--auth-tenue);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
}

.auth-volver:hover { color: var(--auth-azul); }

/* ============================================================
   TABLET — a partir de 640px la tarjeta se despega del borde
   ============================================================ */
@media (min-width: 640px) {
    .auth-panel { padding: 40px 32px; }

    .auth-tarjeta {
        max-width: 480px;
        padding: 40px 44px;
        background: var(--auth-superficie);
        border-radius: 24px;
    }

    /* Sobre la tarjeta blanca los campos necesitan su propio contraste. */
    .auth-input,
    .auth-codigo input { background: #fbfcfe; }

    .auth-titulo { font-size: 28px; }
}

/* ============================================================
   ESCRITORIO — la pantalla se parte exactamente por la mitad
   ============================================================ */
@media (min-width: 1024px) {
    .auth-envoltura { flex-direction: row; }

    /* 50 / 50 exacto: ambos lados con la misma base y sin crecer de más. */
    .auth-marca,
    .auth-panel {
        flex: 0 0 50%;
        width: 50%;
        max-width: none;
    }

    .auth-marca {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 64px clamp(48px, 5vw, 80px);
        background: var(--auth-azul);
        color: #fff;
        /* La columna de texto no se estira a lo ancho de una pantalla grande:
           pasados los ~60 caracteres la lectura se vuelve incómoda. */
        position: relative;
        overflow: hidden;
    }

    /* Halo suave: da profundidad al plano azul sin recurrir a un degradado. */
    .auth-marca::after {
        content: '';
        position: absolute;
        right: -25%;
        bottom: -30%;
        width: 75%;
        aspect-ratio: 1;
        border-radius: 50%;
        /* Radial en vez de color plano: se desvanece en lugar de cortarse
           contra el borde del panel. */
        background: radial-gradient(circle, rgba(132,182,244,.16) 0%, rgba(132,182,244,0) 70%);
        pointer-events: none;
    }

    .auth-marca > * { position: relative; z-index: 1; max-width: 460px; }

    .auth-marca h2 {
        margin: 0 0 16px;
        font-size: clamp(32px, 3vw, 40px);
        font-weight: 700;
        letter-spacing: -1px;
        line-height: 1.12;
    }

    .auth-marca p {
        margin: 0 0 44px;
        font-size: 17px;
        color: rgba(255, 255, 255, .8);
        line-height: 1.6;
    }

    .auth-marca-lista { display: grid; gap: 22px; }

    .auth-marca-item {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        font-size: 15px;
        color: rgba(255, 255, 255, .9);
        line-height: 1.5;
    }

    .auth-marca-item .material-symbols-rounded {
        font-size: 20px;
        color: var(--auth-azul-claro);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .auth-marca-item strong { font-weight: 600; color: #fff; }

    .auth-marca-logo {
        display: flex;
        align-items: center;
        gap: 11px;
        margin-bottom: 48px;
        font-size: 21px;
        font-weight: 700;
        letter-spacing: -.3px;
    }

    .auth-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px;
        background: var(--auth-superficie);
    }

    /* Sin tarjeta flotante: el propio panel blanco ya separa del lado azul.
       Se gana ancho útil y el formulario deja de verse angosto y alargado. */
    .auth-tarjeta {
        max-width: 440px;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-input,
    .auth-codigo input { background: #f8fafc; }
}

/* Monitores grandes: el contenido no se dispersa, se mantiene centrado. */
@media (min-width: 1600px) {
    .auth-marca > * { max-width: 520px; margin-left: auto; margin-right: auto; }
    .auth-tarjeta { max-width: 460px; }
}

/* ============================================================
   Pantallas muy bajas (móvil en horizontal): reduce el aire
   vertical para que el formulario no obligue a desplazar.
   ============================================================ */
@media (max-height: 640px) and (max-width: 1023px) {
    .auth-logo { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; }
    .auth-logo .material-symbols-rounded { font-size: 28px; }
    .auth-titulo { font-size: 22px; }
    .auth-sub { margin-bottom: 20px; font-size: 14px; }
    .auth-separador { margin: 16px 0; }
}

/* Respeta a quien pidió menos movimiento en el sistema. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    .auth-boton:active { transform: none; }
    /* El giro se cancela por completo: no basta con acortarlo, porque el
       movimiento en 3D es justo lo que molesta a quien lo desactiva. */
    .auth-tarjeta,
    .auth-tarjeta > *,
    .auth-tarjeta.girando-salida,
    .auth-tarjeta.girando-salida-inversa { animation: none !important; opacity: 1 !important; transform: none !important; }
}