/* css/login.css — Pantalla de inicio de sesión
   Panel de marca a la izquierda, formulario a la derecha.
   En celular el panel se reduce a una franja y la tarjeta la solapa.
   Usa las variables y componentes de css/base.css. */

.login-fondo {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--fondo);
}

.login-escena {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* =====================================================================
   Panel de marca
   ===================================================================== */
.login-marca {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--e-10);
    padding: clamp(2rem, 5vw, 4.5rem);
    color: #fff;
    background:
        radial-gradient(120% 80% at 0% 0%, rgb(47 176 163 / .5), transparent 55%),
        linear-gradient(160deg, var(--p-700), var(--p-800) 55%, var(--p-950));
}

/* Elipses concéntricas: eco del remolino del logotipo */
.login-orbitas {
    position: absolute;
    z-index: -1;
    right: -28%;
    bottom: -30%;
    width: 120%;
    max-width: 900px;
    height: auto;
    pointer-events: none;
    animation: orbitar 120s linear infinite;
}

@keyframes orbitar {
    to {
        transform: rotate(360deg);
    }
}

.login-logo {
    display: block;
    width: clamp(150px, 16vw, 230px);
    height: auto;
    animation: entrar var(--d-lenta) var(--ease-out) both;
}

.login-bloque {
    max-width: 34rem;
    animation: entrar var(--d-lenta) var(--ease-out) 120ms both;
}

.login-lema {
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.login-sublema {
    margin: var(--e-4) 0 0;
    font-size: var(--t-md);
    line-height: 1.5;
    color: rgb(255 255 255 / .86);
}

/* Línea de pulso (latido): se dibuja y se desvanece en bucle */
.login-pulso {
    display: block;
    width: 100%;
    max-width: 26rem;
    height: 64px;
    margin: var(--e-8) 0;
    overflow: visible;
}

.login-pulso path {
    fill: none;
    stroke: rgb(255 255 255 / .8);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 100;
    animation: pulso 5.5s ease-in-out infinite;
}

@keyframes pulso {
    0% {
        stroke-dashoffset: 100;
    }

    50%,
    80% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -100;
    }
}

.login-puntos {
    display: grid;
    gap: var(--e-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.login-puntos li {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    font-size: var(--t-base);
    font-weight: 600;
}

.login-puntos .icono {
    box-sizing: content-box;
    width: 1.1rem;
    height: 1.1rem;
    padding: 9px;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: var(--r-md);
    background: rgb(255 255 255 / .1);
}

.login-pie {
    margin: 0;
    font-size: var(--t-sm);
    color: rgb(255 255 255 / .78);
}

/* =====================================================================
   Panel del formulario
   ===================================================================== */
.login-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 3rem);
    background:
        radial-gradient(60% 50% at 100% 0%, var(--p-50), transparent 70%),
        var(--fondo);
}

.login-tarjeta {
    width: 100%;
    max-width: 27.5rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    box-shadow: var(--sombra-3);
}

/* Entrada escalonada de cada elemento de la tarjeta */
.login-tarjeta>*,
.login-form>* {
    animation: entrar var(--d-lenta) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}

.login-form {
    display: grid;
    gap: var(--e-5);
}

.login-eyebrow {
    margin: 0 0 var(--e-2);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--p-700);
}

.login-titulo {
    margin: 0;
    font-size: var(--t-3xl);
    font-weight: 750;
    letter-spacing: -.02em;
}

.login-intro {
    margin: var(--e-2) 0 var(--e-6);
    color: var(--texto-suave);
}

.login-estado {
    margin-bottom: var(--e-5);
}

/* ---------- Campos ---------- */
.login-campo {
    position: relative;
}

.login-input-wrap {
    position: relative;
}

.login-icono {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--n-500);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: stroke var(--d-rapida) var(--ease-suave);
}

.login-campo:focus-within .login-icono {
    stroke: var(--p-600);
}

.login-input {
    min-height: 52px;
    padding-left: 3rem;
    border-radius: var(--r-md);
}

.login-input-clave {
    padding-right: 3.5rem;
}

/* Casilla "ver contraseña": la casilla real cubre el botón (44 px) y el
   icono se dibuja debajo, así el clic, el teclado y el lector siguen
   usando el checkbox original. */
.login-ver-input {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4px;
    width: 44px;
    height: 44px;
    margin: 0;
    transform: translateY(-50%);
    opacity: 0;
    cursor: pointer;
}

.login-ver {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 4px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    transform: translateY(-50%);
    border-radius: var(--r-sm);
    color: var(--n-500);
    pointer-events: none;
    transition:
        background-color var(--d-rapida) var(--ease-suave),
        color var(--d-rapida) var(--ease-suave);
}

.login-ver .icono {
    width: 22px;
    height: 22px;
}

.login-ver-tachado {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset var(--d-media) var(--ease-out);
}

.login-ver-input:hover+.login-ver {
    background: var(--n-100);
    color: var(--n-800);
}

.login-ver-input:checked+.login-ver {
    background: var(--p-50);
    color: var(--p-700);
}

.login-ver-input:checked+.login-ver .login-ver-tachado {
    stroke-dashoffset: 0;
}

.login-ver-input:focus-visible+.login-ver {
    outline: 3px solid var(--foco);
    outline-offset: 1px;
}

.login-mayus {
    margin: 0;
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--alerta-texto);
}

/* ---------- Botón ---------- */
.login-boton {
    margin-top: var(--e-2);
    min-height: 56px;
    font-size: var(--t-lg);
}

/* Enviando: sigue verde (no gris) y muestra el indicador de base.css */
.login-boton[aria-busy="true"]:disabled {
    background: var(--p-600);
    border-color: transparent;
    cursor: progress;
}

.login-ayuda {
    margin: var(--e-6) 0 0;
    font-size: var(--t-sm);
    text-align: center;
    color: var(--texto-suave);
}

/* =====================================================================
   Celular y tablet vertical: el panel de marca pasa a ser una franja
   ===================================================================== */
@media (max-width: 860px) {
    .login-escena {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
    }

    .login-marca {
        padding: 1.75rem 1.25rem 4.75rem;
    }

    .login-logo {
        width: 140px;
    }

    .login-bloque,
    .login-pie {
        display: none;
    }

    .login-orbitas {
        right: -45%;
        bottom: -120%;
        width: 150%;
    }

    .login-panel {
        position: relative;
        z-index: 1;
        align-items: flex-start;
        margin-top: -3rem;
        padding: 0 var(--e-4) var(--e-8);
        background: transparent;
    }

    .login-tarjeta {
        box-shadow: var(--sombra-4);
    }
}

@media (max-width: 400px) {
    .login-titulo {
        font-size: var(--t-2xl);
    }
}

/* =====================================================================
   Ventanas bajas: el login debe caber sin scroll.
   Pasa mucho en laptops con la escala de Windows al 125 % o 150 %:
   una pantalla de 1920x1080 se comporta como ~1280x590 px.
   Se compacta por niveles según el alto disponible.
   ===================================================================== */
@media (max-height: 800px) {
    .login-panel {
        padding-block: var(--e-4);
    }

    .login-tarjeta {
        padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
    }

    .login-titulo {
        font-size: var(--t-2xl);
    }

    .login-intro {
        margin: var(--e-1) 0 var(--e-4);
    }

    .login-estado {
        margin-bottom: var(--e-4);
    }

    .login-form {
        gap: var(--e-4);
    }

    .login-input {
        min-height: 48px;
    }

    .login-boton {
        min-height: 52px;
        font-size: var(--t-md);
    }

    .login-ayuda {
        margin-top: var(--e-4);
    }

    .login-marca {
        gap: var(--e-6);
        padding-block: 2rem;
    }

    .login-logo {
        width: clamp(130px, 13vw, 190px);
    }

    .login-lema {
        font-size: clamp(1.75rem, 3vw, 2.5rem);
    }

    .login-sublema {
        margin-top: var(--e-3);
        font-size: var(--t-base);
    }

    .login-pulso {
        height: 44px;
        margin: var(--e-5) 0;
    }

    .login-puntos {
        gap: var(--e-2);
    }
}

@media (max-height: 640px) {
    .login-panel {
        padding-block: var(--e-3);
    }

    .login-tarjeta {
        padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem);
    }

    .login-eyebrow,
    .login-intro {
        display: none;
    }

    .login-titulo {
        margin-bottom: var(--e-4);
    }

    .login-form {
        gap: var(--e-3);
    }

    .login-ayuda {
        margin-top: var(--e-3);
    }

    .login-marca {
        gap: var(--e-4);
        padding-block: 1.5rem;
    }

    .login-logo {
        width: clamp(110px, 11vw, 150px);
    }

    .login-pulso,
    .login-puntos {
        display: none;
    }
}

/* Celular horizontal o ventana baja y angosta: franja de marca mínima */
@media (max-height: 640px) and (max-width: 860px) {
    .login-marca {
        padding: 1rem 1.25rem 3.25rem;
    }

    .login-logo {
        width: 100px;
    }

    .login-panel {
        margin-top: -2.25rem;
    }
}

/* Movimiento reducido: nada gira ni se dibuja; el pulso queda estático */
@media (prefers-reduced-motion: reduce) {

    .login-orbitas,
    .login-pulso path {
        animation: none !important;
    }

    .login-pulso path {
        stroke-dasharray: none;
    }
}