/*
 * Hoja del login.
 *
 * Vive aparte, como `login` es una pantalla con su propio diseño (`cabecera.css` y `lateral.css`
 * hicieron lo mismo con las suyas). Se carga después de `app.css` porque reusa sus tokens, los
 * botones y el aviso de error.
 *
 * **Qué agrega sobre lo que había.** El login era una tarjeta pelada: ahora tiene la marca, un
 * fondo con un halo tenue, una entrada suave, el foco marcado en los campos, el **ojo** para
 * mostrar/ocultar la clave, el aviso de **Bloq Mayús** y el estado de «Entrando…». Mobile primero
 * y con las `safe-area` (está en `fullscreen`, ver `manifest.webmanifest`).
 *
 * Todos los efectos respetan `prefers-reduced-motion` por la regla global de `app.css`.
 */

.cuerpo-login {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    /* El notch (arriba y abajo). */
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    /* Un halo tenue del acento arriba, sobre el fondo del panel: da profundidad sin decorar de más. */
    background:
        radial-gradient(
            120% 75% at 50% -10%,
            color-mix(in srgb, var(--acento) 12%, transparent),
            transparent 62%
        ),
        var(--fondo);
}

/* **Centrado sin regla de altura.** El grid mide `max(100dvh, contenido)`: si la tarjeta entra,
   queda centrada; si no entra (el teclado del celular, un teléfono apaisado), el grid crece al
   contenido y la tarjeta queda arriba **sin que se corte el botón** — que es lo que pasaba si se
   forzaba el centrado. Una `@media (max-height:)` acá descentraba a ventanas normales (todo lo de
   ≤ 40rem quedaba pegado al tope). */

/* ---- La tarjeta ------------------------------------------------------------ */

.login {
    display: grid;
    gap: 0.7rem;
    width: min(100%, 24rem);
    padding: clamp(1.25rem, 4vw, 1.75rem);
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: calc(var(--radio) + 4px);
    box-shadow:
        0 24px 60px -32px rgb(0 0 0 / 45%),
        var(--sombra);
    /* Entra con un fundido y un levante corto. `both` para que no parpadee antes de arrancar. */
    animation: entrar 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes entrar {
    from {
        opacity: 0;
        transform: translateY(0.7rem) scale(0.99);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.login__marca {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--acento);
    background: color-mix(in srgb, var(--acento) 12%, var(--panel));
    border-radius: 0.9rem;
}

.login__titulo {
    justify-self: center;
    margin: 0.25rem 0 0;
    font-size: 1.4rem;
}

.login__sub,
.login__pie {
    margin: 0;
    color: var(--tenue);
    font-size: 0.85rem;
}

.login__sub {
    justify-self: center;
    max-width: 21rem;
    text-align: center;
}

.login__pie {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    line-height: 1.45;
}

.login__form {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

/* ---- Los campos ------------------------------------------------------------ */

.campo {
    display: grid;
    gap: 0.3rem;
}

.campo__etiqueta {
    color: var(--tenue);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.campo__par {
    position: relative;
    display: grid;
}

.campo__entrada {
    min-height: 2.9rem; /* 16 px de fuente o iOS hace zoom al enfocar */
    padding: 0 0.75rem;
    background: var(--panel-alt);
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font: inherit;
    font-size: 1rem;
    transition:
        border-color 140ms linear,
        background-color 140ms linear,
        box-shadow 140ms linear;
}

.campo__entrada:hover {
    border-color: color-mix(in srgb, var(--acento) 35%, var(--borde));
}

/* El anillo de foco reemplaza al `outline` por defecto: se ve igual de bien y queda a tono. */
.campo__entrada:focus-visible {
    outline: none;
    background: var(--panel);
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 28%, transparent);
}

/* El ojo ocupa la derecha: el texto de la clave no pasa por debajo. */
.campo__par .campo__entrada {
    padding-inline-end: 2.9rem;
}

.campo__ojo {
    position: absolute;
    inset-inline-end: 0.35rem;
    inset-block: 0.35rem;
    width: 2.2rem;
    display: grid;
    place-items: center;
    color: var(--tenue);
    background: transparent;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition:
        color 120ms linear,
        background-color 120ms linear;
}

.campo__ojo:hover {
    color: var(--texto);
    background: color-mix(in srgb, var(--borde) 45%, transparent);
}

.campo__ojo:focus-visible {
    outline: 3px solid var(--acento);
    outline-offset: 1px;
}

/* Los dos iconos, uno encima del otro: se muestra el que corresponde a `aria-pressed`. */
.ojo__icono {
    grid-area: 1 / 1;
    transition: opacity 120ms linear;
}

.ojo__icono--ocultar,
.campo__ojo[aria-pressed='true'] .ojo__icono--ver {
    opacity: 0;
}

.campo__ojo[aria-pressed='true'] .ojo__icono--ocultar {
    opacity: 1;
}

/* El aviso de Bloq Mayús. Aparece solo cuando está activado y la clave tiene el foco. */
.campo__nota {
    margin: 0.1rem 0 0;
    color: var(--alerta);
    font-size: 0.8rem;
}

/* ---- El botón -------------------------------------------------------------- */

.boton--ancho {
    width: 100%;
}

.boton__girando {
    display: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
}

/* Mientras el POST viaja: el botón no se puede volver a tocar y muestra el giro. El texto pasa a
   «Entrando…» desde `js/login.js`. */
.boton.es-cargando {
    pointer-events: none;
    opacity: 0.85;
}

.boton.es-cargando .boton__girando {
    display: inline-block;
}

@keyframes girar {
    to {
        transform: rotate(1turn);
    }
}

/* El aviso de error sacude el foco hacia él, sin cambiar el layout. */
.cuerpo-login .aviso--error:not([hidden]) {
    animation: sacudir 400ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes sacudir {
    0%,
    100% {
        transform: none;
    }
    20% {
        transform: translateX(-0.35rem);
    }
    40% {
        transform: translateX(0.35rem);
    }
    60% {
        transform: translateX(-0.2rem);
    }
    80% {
        transform: translateX(0.2rem);
    }
}