/* =============================================================================
   ACCESO — las tres pantallas que se ven sin haber entrado.

   Iniciar sesión, recuperar contraseña y cambiarla son el primer contacto con
   NUUP del día, y hasta ahora eran tres diseños distintos: el login era una
   tarjeta centrada con tipografía Dosis, y las otras dos un split con olas y
   una ilustración de stock. La misma persona, en el mismo minuto, veía dos
   productos.

   Aquí comparten una sola estructura: el navy de marca sostiene la identidad
   de un lado y el formulario vive sobre blanco del otro, que es donde está la
   tarea. Es la misma división que ya conoce quien usa el sistema (sidebar
   navy, contenido claro), solo que antes de entrar.

   Los colores y radios salen de template.css. No se cargan desde ahí porque
   estas tres pantallas no montan el template —no hay sidebar ni breadcrumbs—,
   pero los valores son los mismos: si cambian allá, cambian aquí.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
    /* Marca, estructura y acción. Mismos valores que template.css. */
    --t-navy: #001733;
    --t-navy-hondo: #001028;
    --t-slate: #2c3e50;
    --t-sky: #3498db;
    /* El sky de marca da 3.15:1 sobre blanco: sirve para bordes y anillos de
       foco, pero no para texto chico. Esta es la misma familia, oscurecida
       hasta 4.66:1, y es la que usan los enlaces. */
    --t-sky-texto: #2a7ab0;
    --t-sky-soft: #e8f4fc;

    /* Neutrales */
    --t-lienzo: #ffffff;
    --t-superficie: #f8f9fa;
    --t-linea: #e6e8eb;

    /* Tinta */
    --t-tinta: #1d1b31;
    --t-tinta-media: #667085;

    /* Estado */
    --t-alerta: #f14668;
    --t-alerta-fondo: #fdecf0;
    --t-alerta-ink: #8a1830;
    --t-exito: #48c78e;
    --t-exito-fondo: #effaf5;
    --t-exito-ink: #16613c;
    --t-aviso-ink: #946c00;

    --t-r-sm: 6px;
    --t-r-md: 12px;

    /* Escala de 4pt. Los saltos son los que ya usa el sistema. */
    --e-xs: 4px;
    --e-sm: 8px;
    --e-md: 16px;
    --e-lg: 24px;
    --e-xl: 32px;
    --e-2xl: 48px;

    /* Motion: corta y sin rebote, que esto es una herramienta de trabajo. */
    --t-curva: cubic-bezier(0.22, 1, 0.36, 1);
    --t-rapido: 150ms;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--t-tinta);
    background: var(--t-lienzo);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }


/* ── Estructura ────────────────────────────────────────────────────────────
   En celular hay una sola cosa: el formulario, sobre blanco. El panel de
   marca aparece a partir de 900px, cuando sobra ancho para sostenerlo sin
   robarle lugar a la tarea. */

.acceso {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

/* Un item de grid no baja de su contenido por default (min-width: auto), y
   basta un hijo ancho para estirar la página entera en un celular de 320. */
.acceso > *,
.acceso-forma { min-width: 0; }

@media (min-width: 900px) {
    .acceso {
        /* 46%: el navy pesa lo suficiente para sostener la marca y el
           formulario no queda corrido hasta la orilla derecha. */
        grid-template-columns: minmax(320px, 46%) 1fr;
        grid-template-rows: 1fr;
    }
}


/* ── Panel de marca ───────────────────────────────────────────────────────
   Navy con dos halos de luz desenfocados. Son los colores que ya usa el
   sistema —el sky de acción y el slate de estructura—, nada de morados ni
   magentas: el panel se ve iluminado sin volverse una demo de IA. El logo va
   encima, con su propia transparencia. Nada más: sin planos, sin patrón.

   Los halos son pseudo-elementos con filter: blur en vez de radial-gradient
   porque la caída gaussiana del blur es más suave que la rampa lineal del
   gradiente, y aquí lo único que se ve es esa caída. Se rasterizan una vez
   (nada se mueve), así que no cuestan cuadros. */

/* En celular no sale: la pantalla se queda solo con el formulario. */
.acceso-marca { display: none; }

@media (min-width: 900px) {
    .acceso-marca {
        display: flex;
        /* Centrado en los dos ejes: el logo es lo único que lleva el panel. */
        align-items: center;
        justify-content: center;
        background: var(--t-navy);
        padding: var(--e-2xl);
        /* Los halos salen del panel por los bordes; aquí se recortan. */
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .acceso-marca::before,
    .acceso-marca::after {
        content: "";
        position: absolute;
        /* Degradado radial MÁS desenfoque. Con un círculo de color sólido se
           alcanzaba a ver la orilla del círculo aunque el blur fuera grande;
           el degradado ya llega a transparente por su cuenta y el blur nada
           más suaviza la rampa. Entre los dos no queda ningún borde. */
        filter: blur(90px);
        pointer-events: none;
        z-index: -1;
    }

    /* Arriba a la izquierda, en sky: el color de acción del sistema. */
    .acceso-marca::before {
        width: 760px;
        height: 760px;
        top: -320px;
        left: -280px;
        background: radial-gradient(
            circle at center,
            rgba(52, 152, 219, .52) 0%,
            rgba(52, 152, 219, .22) 38%,
            rgba(52, 152, 219, 0) 68%
        );
    }

    /* Abajo a la derecha, más frío y más tenue: sostiene el peso del panel
       sin competir con el de arriba. */
    .acceso-marca::after {
        width: 820px;
        height: 820px;
        bottom: -380px;
        right: -300px;
        background: radial-gradient(
            circle at center,
            rgba(63, 110, 160, .46) 0%,
            rgba(44, 62, 80, .20) 40%,
            rgba(44, 62, 80, 0) 70%
        );
    }
}

.acceso-marca__logo {
    width: 200px;
    height: auto;
    /* Por encima de los halos. */
    position: relative;
}

/* En un monitor de 2560 el panel navy mide más de 1100px y el logo a 200px se
   veía perdido. No es tipografía fluida: es una pieza gráfica que acompaña al
   tamaño de su panel. */
@media (min-width: 1600px) {
    .acceso-marca__logo { width: 260px; }
}

/* ── Panel del formulario ─────────────────────────────────────────────────── */

.acceso-panel {
    display: flex;
    justify-content: center;
    /* Centrado vertical en todos los tamaños. "safe" es lo que evita el corte
       clásico del centrado en flex: cuando el formulario es más alto que la
       pantalla (un celular chico con el teclado abierto), se
       alinea arriba en vez de desbordar por encima sin poder hacer scroll.
       El align-items de la línea anterior queda como respaldo para los
       navegadores que no entienden la palabra. */
    align-items: center;
    align-items: safe center;
    padding: var(--e-2xl) var(--e-lg);
    background: var(--t-lienzo);
}

@media (min-width: 900px) {
    .acceso-panel { padding: var(--e-2xl); }
}

.acceso-forma {
    width: 100%;
    max-width: 384px;
}

.acceso-forma__titulo {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--t-tinta);
    text-wrap: balance;
}

.acceso-forma__entrada {
    margin: var(--e-sm) 0 0;
    color: var(--t-tinta-media);
    max-width: 42ch;
}

.acceso-forma__campos { margin-top: var(--e-xl); }


/* ── Campos ───────────────────────────────────────────────────────────────
   Label visible siempre arriba: el placeholder no es un label porque
   desaparece justo cuando hace falta. */

/* 28px entre campos: con 24 el texto de ayuda de un campo quedaba tan cerca
   del label del siguiente que se leían como un solo bloque. */
.campo { margin-bottom: 28px; }

.campo__label {
    display: block;
    margin-bottom: var(--e-sm);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--t-slate);
}

.campo__control { position: relative; }

.campo__icono {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #87909f;
    font-size: 0.875rem;
    pointer-events: none;
    transition: color var(--t-rapido) var(--t-curva);
}

.campo__input {
    width: 100%;
    padding: 11px 13px 11px 38px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--t-tinta);
    background: var(--t-lienzo);
    border: 1px solid var(--t-linea);
    border-radius: var(--t-r-sm);
    outline: none;
    transition: border-color var(--t-rapido) var(--t-curva),
                box-shadow var(--t-rapido) var(--t-curva);
}

.campo__input::placeholder {
    color: #707784;
    font-weight: 300;
}

.campo__input:hover:not(:focus) { border-color: #cbd2d9; }

/* Foco en sky: es el color de acción del sistema. El anillo va por fuera del
   borde para que no mueva ni un pixel el tamaño del campo. */
.campo__input:focus {
    border-color: var(--t-sky);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, .18);
}

.campo__input:focus + .campo__icono,
.campo__control:focus-within .campo__icono { color: var(--t-sky); }

/* Con contraseña visible hay un botón de ojo a la derecha: el texto no debe
   pasar por debajo de él. */
.campo__input--con-boton { padding-right: 46px; }

.campo__input[aria-invalid="true"] {
    border-color: var(--t-alerta);
}

.campo__input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(241, 70, 104, .18);
}

.campo__error,
.campo__ayuda {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
    line-height: 1.45;
}

.campo__ayuda { color: var(--t-tinta-media); }

.campo__error {
    color: var(--t-alerta-ink);
    font-weight: 500;
}

/* El error solo ocupa lugar cuando dice algo. */
.campo__error:empty,
.campo__ayuda:empty { display: none; }

/* Aviso de Bloq Mayús: aparece pegado al campo donde importa. */
.campo__mayusculas {
    display: none;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--t-aviso-ink);
}

.campo__mayusculas[data-visible="si"] { display: block; }


/* ── Botón de ver contraseña ──────────────────────────────────────────────── */

.campo__ojo {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--t-r-sm);
    background: transparent;
    color: #87909f;
    cursor: pointer;
    transition: color var(--t-rapido) var(--t-curva),
                background var(--t-rapido) var(--t-curva);
}

/* El cuadro visible mide 34px, pero el área que responde al dedo llega a 44. */
.campo__ojo::before {
    content: "";
    position: absolute;
    inset: -5px;
}

.campo__ojo:hover {
    color: var(--t-slate);
    background: var(--t-superficie);
}

.campo__ojo[aria-pressed="true"] {
    color: var(--t-sky);
    background: var(--t-sky-soft);
}

.campo__ojo:focus-visible {
    outline: 2px solid var(--t-sky);
    outline-offset: 2px;
}


/* ── Botón principal ──────────────────────────────────────────────────────── */

.acceso-boton {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-sm);
    padding: 11px var(--e-md);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--t-lienzo);
    background: var(--t-navy);
    border: none;
    border-radius: var(--t-r-sm);
    cursor: pointer;
    transition: background var(--t-rapido) var(--t-curva);
}

.acceso-boton:hover:not(:disabled) { background: var(--t-slate); }

.acceso-boton:active:not(:disabled) { background: var(--t-navy-hondo); }

.acceso-boton:focus-visible {
    outline: 2px solid var(--t-sky);
    outline-offset: 2px;
}

.acceso-boton:disabled {
    cursor: not-allowed;
    opacity: .72;
}


/* ── Enlaces de apoyo ─────────────────────────────────────────────────────── */

.acceso-apoyo {
    margin-top: var(--e-md);
    text-align: center;
}

.acceso-enlace {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--t-sky-texto);
    text-decoration: none;
    border-radius: var(--t-r-sm);
}

.acceso-enlace:hover { text-decoration: underline; }

.acceso-enlace:focus-visible {
    outline: 2px solid var(--t-sky);
    outline-offset: 3px;
}

/* ── Aviso del formulario ─────────────────────────────────────────────────
   Lo que antes era un modal de SweetAlert que había que cerrar para volver a
   escribir. Ahora el mensaje vive junto al formulario: se lee y se corrige
   sin tocar nada. */

.acceso-aviso {
    display: none;
    gap: var(--e-sm);
    align-items: flex-start;
    /* Separado del título: pegado se leía como su subtítulo. */
    margin: var(--e-lg) 0 0;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: var(--t-r-sm);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.acceso-aviso[data-visible="si"] {
    display: flex;
    animation: aviso-entra 200ms var(--t-curva);
}

.acceso-aviso i { margin-top: 2px; flex: none; }

.acceso-aviso--error {
    color: var(--t-alerta-ink);
    background: var(--t-alerta-fondo);
    border-color: rgba(241, 70, 104, .38);
}

.acceso-aviso--exito {
    color: var(--t-exito-ink);
    background: var(--t-exito-fondo);
    border-color: rgba(72, 199, 142, .45);
}

@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ── Estado de confirmación ───────────────────────────────────────────────
   Reemplaza al formulario cuando la tarea ya se hizo (el correo salió, la
   contraseña cambió). Antes era un modal con temporizador que redirigía solo;
   esto deja leer sin prisa y decidir a dónde ir. */

.acceso-listo { text-align: left; }

/* Recibe el foco por código para que los lectores de pantalla anuncien la
   confirmación, pero no pinta anillo: nadie llegó aquí con el teclado. */
.acceso-listo__titulo:focus,
.acceso-forma__titulo[tabindex]:focus { outline: none; }

.acceso-listo__marca {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--e-md);
    border-radius: 50%;
    background: var(--t-exito-fondo);
    color: var(--t-exito-ink);
    font-size: 1.125rem;
}

.acceso-listo__texto {
    margin: var(--e-sm) 0 var(--e-xl);
    color: var(--t-tinta-media);
    max-width: 42ch;
}

[hidden] { display: none !important; }


/* ── Movimiento reducido ──────────────────────────────────────────────────── */

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

/* El logo y su línea van como un solo bloque centrado: si el párrafo colgara
   suelto del panel, el logo dejaría de estar en el centro óptico. */
.acceso-marca__bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-lg);
}

/* Anticipo del cambio que viene. Temporal: cuando el lanzamiento ocurra, esta
   regla y su párrafo en login.ejs se borran juntos.

   Va en 82% de blanco sobre el navy —12.17:1, el mismo tono que llevaba el
   subtítulo anterior— y con la medida corta para que no se parta en tres
   renglones en una pantalla angosta. */
.acceso-marca__teaser {
    margin: 0;
    max-width: 22ch;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-wrap: balance;
    color: rgba(255, 255, 255, .82);
}

@media (min-width: 900px) {
    .acceso-marca__teaser { font-size: 1.0625rem; }
}

/* El texto que solo existe para lectores de pantalla: fuera de la vista pero
   dentro del árbol de accesibilidad. No se usa display:none porque eso lo
   sacaría también de ahí. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* El cursor de la máquina de escribir. Parpadea mientras escribe y se queda
   quieto al terminar: un cursor que sigue latiendo cuando ya nadie escribe es
   movimiento sin motivo en una pantalla donde la gente viene a teclear. */
.teaser-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: rgba(255, 255, 255, .82);
    animation: teaser-latido 1s steps(2, start) infinite;
}

.teaser-cursor.termino {
    animation: none;
    opacity: 0;
}

/* El remate: se selecciona "IA" y se le dan negritas con el botón B.

   El énfasis NO se aplica solo. Se selecciona el "IA" como lo haría alguien arrastrando
   el cursor, aparece el botón de negritas, se presiona, y hasta entonces las letras
   cambian. Un resalte que aparece por su cuenta es decoración; este se gana a la vista,
   y es la diferencia entre adornar y contar algo.

   El párrafo se vuelve el marco de referencia del botón, que va encima de las letras. */
.acceso-marca__teaser { position: relative; }

/* En reposo la IA no tiene nada: es texto como el resto. */
.teaser-ia {
    transition: color .25s ease-out, font-weight .25s ease-out;
}

/* Y después del clic. Color y peso, nada más: ni gradiente de texto ni glow, que
   DESIGN.md prohibe. Sobre el navy del panel basta con llevarlas a blanco pleno. */
.teaser-ia.en-negritas {
    color: #ffffff;
    font-weight: 700;
}

/* La selección es la del navegador —se hace con la API, no se imita— pero se le da el
   sky de la marca para que no aparezca el azul del sistema sobre el navy. */
.acceso-marca__teaser ::selection { background: rgba(52, 152, 219, .55); color: #fff; }
.acceso-marca__teaser ::-moz-selection { background: rgba(52, 152, 219, .55); color: #fff; }

/* La barrita de formato, como la que sale al seleccionar texto en un correo.

   Tres botones y no uno: un botón suelto no se lee como un editor, tres sí, porque
   es la forma que todo el mundo reconoce. Solo la B hace algo; las otras dos están
   para que la barra se entienda de un vistazo. */
.teaser-barra {
    position: absolute;
    transform: translate(-50%, 46%) scale(.9);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out, transform .22s cubic-bezier(.22, 1, .36, 1);
}

.teaser-barra.visible {
    opacity: 1;
    transform: translate(-50%, 34%) scale(1);
}

.teaser-barra__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    color: #2c3e50;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: .8125rem;
    line-height: 1;
    transition: background .12s ease-out, color .12s ease-out, transform .09s ease-out;
}

.teaser-barra__boton.es-b { font-weight: 700; }
.teaser-barra__boton.es-k { font-style: italic; font-weight: 600; }
.teaser-barra__boton.es-s { text-decoration: underline; font-weight: 600; }

/* El cursor se posa antes de apretar: sin ese momento el botón se hunde solo y no se
   entiende quién lo apretó. */
.teaser-barra__boton.apuntado { background: #eef2f6; }

.teaser-barra__boton.presionado {
    background: #dde6ee;
    transform: scale(.9);
}

/* Y queda marcado, como cualquier botón de formato que ya se aplicó. */
.teaser-barra__boton.activo {
    background: var(--t-sky, #3498db);
    color: #ffffff;
}

/* A quien pidió menos movimiento no se le anima nada —el script ni siquiera corre— y la
   frase final ya está en el HTML. Esto es por si acaso. */
@media (prefers-reduced-motion: reduce) {
    .teaser-ia,
    .teaser-barra,
    .teaser-barra__boton { transition: none; }
}

@keyframes teaser-latido {
    to { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .teaser-cursor { display: none; }
}