/*
 * Las tres pantallas que se ven sin sesión: acceso, recuperar y restablecer.
 *
 * Dirección: la pantalla está GRABADA como un instrumento financiero. Lo
 * que emite este sistema son títulos ejecutivos, y los instrumentos de
 * verdad llevan grabado —líneas finas, nada de brillos—. Por eso no hay
 * tarjeta flotante ni degradados: los campos van directo sobre el campo
 * grabado, con reglas de un pixel. Lo único sólido es el botón de entrar.
 *
 * Los nombres cortos (--marina, --azul…) son alias de los tokens que emite
 * TenantBranding::tokens() — nunca vuelven a fijar un color por su cuenta,
 * así que no pueden desincronizarse del resto del sitio. Aquí vivía la
 * versión equivocada de --tenue —ocho-efe-a-seis-ce-cuatro en vez del valor
 * correcto en Marca::TENUE—; con el alias ese error deja de ser posible.
 */

:root {
    --marina: var(--sagit-marina);
    --marina-alta: var(--sagit-marina-alta);
    --azul: var(--sagit-azul);
    --blanco: var(--sagit-blanco);
    --tenue: var(--sagit-tenue);
    --alerta: var(--sagit-alerta);
    --verde: var(--sagit-exito);
    /* Separaciones decorativas: pueden ser finas, no delimitan nada tocable. */
    --regla: color-mix(in srgb, var(--sagit-tenue) 28%, transparent);
    /* El límite de un CAMPO sí: WCAG 1.4.11 pide 3:1 y `--regla` daba 1.63:1
       sobre el marino. Es lo único que dice dónde empieza el campo y dónde
       está la casilla de «Mantener la sesión iniciada», en la primera pantalla
       que abre todo mundo. */
    --regla-campo: color-mix(in srgb, var(--sagit-tenue) 72%, transparent);
}

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

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

body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    background: var(--marina);
    color: var(--blanco);
    font-family: 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── Retícula ──────────────────────────────────────────────────────────── */

.lienzo {
    display: grid;
    width: 100%;
    min-height: 100dvh;
}

@media (min-width: 60rem) {
    .lienzo { grid-template-columns: 1.05fr .95fr; }
}

/* ── Panel grabado ─────────────────────────────────────────────────────── */

.emblema {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem .5rem;
}

@media (min-width: 60rem) {
    .emblema {
        padding: 4rem;
        border-inline-end: 1px solid var(--regla);
    }
}

/* La forma y los colores del logotipo los trae public/css/sagit-logotipo.css,
   para que sirva igual aquí y en el panel. Aquí sólo se decide de qué tamaño
   va: es la pieza principal de la pantalla y puede crecer. */
.emblema .logotipo { font-size: clamp(1.75rem, 8vw, 2.25rem); }

@media (min-width: 60rem) {
    .emblema .logotipo { font-size: 3rem; }
}

/* La columna de trabajo entra con el mismo compás que el trazado del
   logotipo, apenas desfasada: una sola secuencia, no dos animaciones
   sueltas. */
@media (prefers-reduced-motion: no-preference) {
    .acceso > * {
        opacity: 0;
        animation: lg-entrar .5s .2s ease-out forwards;
    }
}

@keyframes lg-entrar {
    from { opacity: 0; translate: 0 .5rem; }
    to { opacity: 1; translate: 0 0; }
}

/* ── Panel de trabajo ──────────────────────────────────────────────────── */

.acceso {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1.75rem 3rem;
}

@media (min-width: 60rem) {
    .acceso { padding: 4rem; }
}

.acceso > * { width: 100%; max-width: 24rem; margin-inline: auto; }

h1 {
    margin: 0 0 .375rem;
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* `margin-block`, nunca el atajo `margin`: el atajo también fija los
   laterales en 0 y anula el `margin-inline: auto` de `.acceso > *`,
   con lo que el párrafo se descuelga a la izquierda del resto. Misma
   especificidad, va después, gana. Pasó. */
.instruccion {
    margin-block: 0 2rem;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--tenue);
    text-wrap: pretty;
}

h1 + form, h1 + .aviso { margin-block-start: 2rem; }

/* ── Campos ────────────────────────────────────────────────────────────── */

label {
    display: block;
    margin-block-end: .5rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tenue);
}

input[type="email"],
input[type="password"],
input[type="text"] {
    display: block;
    width: 100%;
    margin-block-end: 1.5rem;
    padding: .625rem 0;
    border: 0;
    /* Regla, no recuadro: la referencia es un formulario impreso
       sobre un certificado, no una caja de aplicación. */
    border-block-end: 1px solid var(--regla-campo);
    border-radius: 0;
    background: transparent;
    color: var(--blanco);
    /* 16px exactos: por debajo de eso Safari en iOS hace zoom al
       enfocar y descuadra la pantalla. */
    font: inherit;
    font-size: 1rem;
    transition: border-color .15s;
}

input:hover { border-block-end-color: var(--tenue); }

/* El foco se marca engrosando la regla y pasándola al azul: contra el
   fondo marina da 6.4:1, muy por encima del 3:1 que pide WCAG para
   indicadores que no son texto.

   Sin `outline`: los navegadores dan por cumplido `:focus-visible` en
   todo campo de texto —porque recibe teclado—, así que el recuadro
   aparecía también al hacer clic y convertía la regla en una caja,
   que es justo lo que este diseño evita. En el botón, la casilla y
   las ligas sí va, porque ahí no hay otra señal. */
input:focus {
    outline: 0;
    border-block-end-color: var(--azul);
    box-shadow: 0 1px 0 0 var(--azul);
}

input[aria-invalid="true"] {
    border-block-end-color: var(--alerta);
}

/* Sólo lectura: el correo lo trae la liga y editarlo nada más rompe el canje
   del token. Punteado y `not-allowed`, el mismo lenguaje que el panel usa para
   lo que no se toca. Sigue enfocable a propósito —es tabulable, necesita
   indicador— y `readonly` sí envía su valor, que el broker necesita.

   La lista de tipos, no `input:read-only` pelón: en CSS una casilla también es
   `:read-only`, y la de «recordarme» habría salido con cursor de prohibido. */
/* ── Ver la contraseña ──────────────────────────────────────────────────── */

/* El contenedor no aporta caja: sólo da el sistema de coordenadas para que el
   botón se pose sobre el campo. El margen inferior del input se escapa hacia
   afuera —no hay padding ni borde que lo detenga—, así que este bloque mide
   exactamente lo que el campo y el botón queda a su altura. */
.sagit-contrasena {
    position: relative;
}

/* Espacio para el botón: sin esto, una contraseña larga se mete debajo. */
.sagit-contrasena input {
    padding-inline-end: 2.5rem;
}

.sagit-contrasena__ojo {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    /* Alto completo del contenedor, que mide exactamente lo que el campo: su
       margen inferior se escapa hacia afuera —no hay padding ni borde que lo
       detenga—, así que el 100% llega justo hasta la regla y ni un pixel más. */
    inset-block-end: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tenue);
    cursor: pointer;
    transition: color .15s;
}

.sagit-contrasena__ojo:hover { color: var(--blanco); }

.sagit-contrasena__ojo:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
    border-radius: .25rem;
}

.sagit-contrasena__icono {
    width: 1.125rem;
    height: 1.125rem;
}

/* Se muestra el que corresponde al estado: con la contraseña oculta, el ojo
   abierto —«puedes verla»—; revelada, el tachado —«puedes esconderla»—. */
.sagit-contrasena__icono--ocultar { display: none; }

.sagit-contrasena__ojo[aria-pressed="true"] .sagit-contrasena__icono--ver { display: none; }
.sagit-contrasena__ojo[aria-pressed="true"] .sagit-contrasena__icono--ocultar { display: block; }

input[type="email"]:read-only,
input[type="password"]:read-only,
input[type="text"]:read-only {
    color: var(--tenue);
    cursor: not-allowed;
    border-block-end-style: dashed;
}

input[type="email"]:read-only:hover,
input[type="password"]:read-only:hover,
input[type="text"]:read-only:hover { border-block-end-color: var(--regla-campo); }

input:-webkit-autofill {
    -webkit-text-fill-color: var(--blanco);
    -webkit-box-shadow: 0 0 0 100px var(--marina) inset;
    caret-color: var(--blanco);
}

.error-campo {
    display: block;
    margin: -1.25rem 0 1.25rem;
    font-size: .75rem;
    color: var(--alerta);
}

.error-campo[hidden] { display: none; }

/* ── Recordar sesión ───────────────────────────────────────────────────── */

.recordar {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-block-end: 1.75rem;
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tenue);
    cursor: pointer;
}

.recordar input {
    appearance: none;
    width: 1.0625rem;
    height: 1.0625rem;
    margin: 0;
    flex-shrink: 0;
    /* La casilla es un control: su borde es lo único que dice que existe. */
    border: 1px solid var(--regla-campo);
    border-radius: .1875rem;
    background: transparent;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.recordar input:checked {
    border-color: var(--azul);
    background: var(--azul);
    /* Palomita dibujada, para no depender de una fuente de iconos.

       El color va escrito a mano y NO como `var()`: un data URI es texto
       estático, no CSS, y no puede resolver variables. Es la única
       excepción que ColoresDeMarcaTest permite, y está documentada ahí
       mismo por la razón contraria: aquí no hay forma de evitarla. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000C24' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
    background-size: contain;
}

.recordar input:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ── Acción ────────────────────────────────────────────────────────────── */

button[type="submit"] {
    width: 100%;
    padding: .8125rem 1.25rem;
    border: 0;
    border-radius: .375rem;
    /* Lo único sólido de la pantalla: todo lo demás es línea. */
    background: var(--azul);
    color: var(--marina);
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: filter .15s;
}

button[type="submit"]:hover { filter: brightness(1.08); }
button[type="submit"]:active { filter: brightness(.94); }
button[type="submit"]:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; }

/* ── Avisos ────────────────────────────────────────────────────────────── */

.aviso {
    margin-block-end: 1.5rem;
    padding: .75rem .875rem;
    border-inline-start: 2px solid var(--verde);
    background: color-mix(in srgb, var(--verde) 8%, transparent);
    font-size: .8125rem;
    line-height: 1.6;
    /* Verde claro sintonizado para leerse sobre el fondo oscuro; no es el
       verde de marca (--verde), que ahí resultaría demasiado saturado. */
    color: #9BE9C4;
}

/* ── Pie ───────────────────────────────────────────────────────────────── */

/* Sin regla divisoria: el espacio en blanco ya separa, y el filete
   suelto competía con las reglas de los campos. */
.pie {
    margin-block-start: 1.75rem;
    font-size: .8125rem;
    color: var(--tenue);
}

.pie a { color: var(--azul); text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie a:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: .125rem; }

/* ── Accesibilidad ─────────────────────────────────────────────────────── */

/* En pantalla táctil se restituye el objetivo mínimo cómodo. */
@media (pointer: coarse) {
    input[type="email"],
    input[type="password"],
    input[type="text"] { padding-block: .875rem; }

    button[type="submit"] { padding-block: 1rem; }

    /* 44px, el mismo criterio que el panel. `.recordar` quedaba en 35.5px
       porque se resolvía a ojo con padding en vez de declarar el mínimo.

       El ojo entra en la misma lista: es un control que se toca, y esta
       enumeración ya se ha quedado corta cada vez que se agregó uno. */
    .recordar { min-height: 2.75rem; }

    .sagit-contrasena__ojo { min-width: 2.75rem; }

    /* Las ligas del pie NO estaban en esta lista: «¿Olvidaste tu contraseña?»
       y «Volver al acceso» son la otra acción de estas pantallas y medían
       19.5px de alto — por debajo incluso de los 24px de WCAG 2.5.8. */
    .pie a {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; }
}