/* ── Login portada: vista única de marca, sin shell ───────────────────────
   persona_login.php (documento standalone) + loginFlow.js
   (docs/planes/PLAN_LOGIN_IDENTIFIER_FIRST.md). data-paso decide qué bloque
   vive; sin JS el flujo degrada por round-trip del server (POST sin password
   re-renderiza abierto en paso 2). La escena es navy de marca en ambos temas;
   la tarjeta sigue a los tokens de superficie. */
.login-portada {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vh, 3rem);
    padding: clamp(1.5rem, 5vh, 3.5rem) 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    position: relative;
    background:
        radial-gradient(52rem 38rem at 84% -14%, color-mix(in srgb, var(--brand-600) 36%, transparent), transparent 62%),
        radial-gradient(42rem 32rem at -16% 110%, color-mix(in srgb, var(--brand-400) 18%, transparent), transparent 60%),
        linear-gradient(165deg, var(--neutral-950), color-mix(in srgb, var(--brand-800) 45%, var(--neutral-950)));
}
/* Ecos de la Casilla (rx 25% = 30/120 del isotipo): geometría propia, no
   ornamento. position:fixed a propósito: lo que queda fuera del viewport no
   computa al scrollable overflow → cero scroll horizontal por construcción. */
.login-portada::before,
.login-portada::after {
    content: "";
    position: fixed;
    aspect-ratio: 1;
    border: 1.5px solid color-mix(in srgb, var(--brand-50) 9%, transparent);
    border-radius: 25%;
    pointer-events: none;
}
.login-portada::before { width: min(34rem, 85vw); top: -11rem; right: -9rem; rotate: 14deg; }
.login-portada::after  { width: 19rem; bottom: -7rem; left: -6.5rem; rotate: -8deg; }

.login-portada__escena {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.75rem, 4.5vh, 3rem);
    align-items: center;
    align-content: center;
    flex: 1;   /* la escena come el alto libre → el pie queda en el fondo real */
    width: 100%;
    max-width: 68rem;
    position: relative;
    z-index: 1;
}
.login-portada__marca,
.login-portada__panel { min-width: 0; }
.login-portada__logo {
    display: block;
    width: clamp(11.5rem, 46vw, 14.5rem);
    height: auto;
    margin-inline: auto;
}
.login-portada__lede {
    margin: 1rem auto 0;
    max-width: 32rem;
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: color-mix(in srgb, var(--brand-50) 78%, transparent);
}
.login-portada__pie {
    position: relative;
    z-index: 1;
    margin: 0;
    text-align: center;
    font-size: var(--text-xs);
    letter-spacing: .02em;
    color: color-mix(in srgb, var(--brand-50) 62%, transparent);
}

.login-portada__tarjeta {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 2.25rem);
    background: var(--surface-card);
    border-radius: var(--radius-xl);
    box-shadow:
        0 24px 70px -28px color-mix(in srgb, var(--neutral-950) 85%, transparent),
        0 4px 18px -8px color-mix(in srgb, var(--neutral-950) 45%, transparent);
}
.login-portada .form-control { min-height: 3rem; }
.login-portada .form-label { font-weight: 600; }
.login-portada .input-group .btn { display: inline-flex; align-items: center; }

.login-flujo[data-paso="1"] .login-flujo__solo2 { display: none; }
.login-flujo[data-paso="2"] .login-flujo__solo1 { display: none; }

.login-flujo__titulo {
    font-size: var(--text-xl);
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.5rem;
}
.login-flujo__enviar {
    width: 100%;
    min-height: 3rem;
    font-weight: 600;
}
.login-flujo__registro {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--content-secondary);
}

/* Identidad resuelta del paso 1: pastilla que se toca para corregir — a
   propósito NO parece un input (hallazgo de QA del 23/08: el chip con borde
   de campo leía como un formulario de dos campos). */
.login-flujo__chip {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: fit-content;
    max-width: 100%;
    min-height: 2.75rem;   /* blanco táctil WCAG (DoD §12) sin engordar la pastilla visualmente */
    margin: 0 auto 1.1rem;
    padding: .4rem .8rem .4rem .7rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--content-primary);
    background: color-mix(in srgb, var(--brand-600) 9%, transparent);
    border: 0;
    border-radius: var(--radius-full);
}
.login-flujo__chip:hover { background: color-mix(in srgb, var(--brand-600) 16%, transparent); }
.login-flujo__chip .ai { color: var(--content-brand); }
.login-flujo__chip .login-flujo__chip-pluma { width: .95em; height: .95em; color: var(--content-secondary); }

/* El único momento de motion: el paso que entra se asienta (y la primera carga) */
@media (prefers-reduced-motion: no-preference) {
    .login-flujo[data-paso="1"] .login-flujo__solo1,
    .login-flujo[data-paso="2"] .login-flujo__solo2 {
        animation: login-paso-entra .28s cubic-bezier(.16, 1, .3, 1) both;
    }
}
@keyframes login-paso-entra {
    from { opacity: 0; translate: 0 .5rem; }
}

@media (min-width: 992px) {
    .login-portada__escena {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 26rem);
        gap: clamp(3rem, 7vw, 5.5rem);
    }
    .login-portada__marca { text-align: left; }
    .login-portada__logo { margin-inline: 0; width: clamp(14rem, 24vw, 18rem); }
    .login-portada__lede { margin-inline: 0; text-align: left; font-size: var(--text-md); max-width: 28rem; }
}