.auth-page-body {
    overflow: hidden;
}

.auth-page-main {
    min-height: 100vh;
    min-height: 100dvh; /* 100vh de respaldo: en móvil ignora la barra de direcciones */
    /* Con viewport-fit=cover el relleno suma las áreas seguras (muesca, barra de gestos); env() vale 0 si no hay. */
    padding: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(1.5rem + env(safe-area-inset-right, 0px))
             calc(1.5rem + env(safe-area-inset-bottom, 0px)) calc(1.5rem + env(safe-area-inset-left, 0px));
}

.auth-shell {
    min-height: calc(100vh - 3rem);
    /* Resta también las áreas seguras que .auth-page-main ya sumó a su relleno: si no, la página
       crecería esa altura (unos 34px en un iPhone con barra de gestos) y aparecería un scroll de más. */
    min-height: calc(100dvh - 3rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 460px);
    gap: 1.5rem;
    align-items: stretch;
}

.auth-shell-single {
    justify-content: center;
}

/* min-width: 1024px, no un breakpoint intermedio — tiene que ser el
   COMPLEMENTO exacto del @media (max-width: 1023px) de más abajo (que
   fuerza minmax(0, 1fr) en .auth-shell, mismo elemento). Sin esta simetría
   exacta, un rango intermedio (ej. 600-1023px) quedaría con las DOS reglas
   compitiendo por la misma propiedad y misma especificidad — el resultado
   dependería de cuál aparece después en el archivo, tan fráil como el bug
   original que esto reemplaza. */
@media (min-width: 1024px) {
    .auth-shell-single {
        grid-template-columns: minmax(320px, 560px);
    }
}

.auth-showcase,
.auth-panel {
    position: relative;
    overflow: hidden;
    border-radius: 2rem;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
}

.auth-showcase {
    padding: 2.25rem;
    background:
        linear-gradient(145deg, var(--bg-main-strong) 0%, var(--bg-main-soft) 48%, var(--bg-main-accent) 100%);
    box-shadow: var(--chart-card-hover-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.auth-showcase::before,
.auth-panel::before {
    content: "";
    position: absolute;
    inset: auto auto 12% -10%;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: var(--interactive-accent-glow);
    filter: blur(24px);
    opacity: 0.85;
    pointer-events: none;
}

.auth-panel::before {
    inset: -12% -10% auto auto;
}

.auth-brand,
.auth-showcase-copy,
.auth-feature-list,
.auth-metric-band,
.auth-panel-header,
.auth-form,
.auth-panel-footer,
.auth-alert {
    position: relative;
    z-index: 1;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.auth-brand-mark {
    width: 3.25rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border-radius: 1.15rem;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-strong));
    color: var(--text-on-accent);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: var(--sidebar-brand-shadow);
}

.auth-brand-copy {
    display: grid;
    gap: 0.2rem;
}

.auth-brand-title {
    color: var(--text-main-strong);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.auth-brand-subtitle {
    color: var(--text-muted);
    font-size: 0.92rem;
}

.auth-eyebrow,
.auth-panel-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: var(--interactive-accent-contrast);
    color: var(--color-primary-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-showcase-copy {
    display: grid;
    gap: 1rem;
    max-width: 42rem;
}

.auth-showcase-copy h1,
.auth-panel-header h2 {
    margin: 0;
    color: var(--text-main-strong);
    line-height: 1.02;
}

.auth-showcase-copy h1 {
    font-size: clamp(2.4rem, 4vw, 4.35rem);
    letter-spacing: -0.04em;
}

.auth-showcase-copy p,
.auth-panel-header p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.6;
}

.auth-showcase-copy p {
    max-width: 36rem;
    font-size: 1.02rem;
}

.auth-feature-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.auth-feature-card,
.auth-metric {
    padding: 1rem 1.05rem;
    border-radius: 1.25rem;
    background: var(--glass-bg-soft);
    border: 1px solid var(--glass-border-soft);
    box-shadow: inset 0 1px 0 var(--glass-highlight-soft);
}

.auth-feature-title {
    display: block;
    color: var(--text-main-strong);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.auth-feature-text {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.auth-metric-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.auth-metric {
    display: grid;
    gap: 0.4rem;
}

.auth-metric strong {
    color: var(--text-main-strong);
    font-size: 2rem;
    line-height: 1;
}

.auth-metric span {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.auth-panel {
    padding: 2rem 1.8rem;
    background: var(--modal-surface);
    box-shadow: var(--modal-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-panel-centered {
    min-height: min(720px, calc(100vh - 3rem));
    min-height: min(720px, calc(100dvh - 3rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

.auth-panel-header {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.auth-panel-header h2 {
    font-size: 2rem;
    letter-spacing: -0.04em;
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-inline-links {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.2rem;
}

.auth-inline-links a,
.auth-secondary-link {
    color: var(--color-primary-light);
    font-size: 0.92rem;
    font-weight: 600;
}

.auth-field {
    display: grid;
    gap: 0.45rem;
}

.auth-field label {
    color: var(--text-main-strong);
    font-size: 0.92rem;
    font-weight: 600;
}

.auth-field input {
    width: 100%;
    min-height: 3.2rem;
    padding: 0.88rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-main);
    /* 16px fijo — sin esto hereda el html{font-size:14px} de common.css (14px
       reales, medido en vivo con DevTools), disparando el zoom automático de
       iOS Safari al hacer foco en Login/Register/etc. Mismo fix puntual que
       B3 del audit responsive (Fase 2, decisión A), encontrado durante la
       verificación de Fase 3 — no estaba en el alcance original del audit,
       que solo cubría inputs del Grid RCL. */
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.auth-field input:focus {
    border-color: var(--input-border-strong);
    background: var(--input-bg-focus);
    box-shadow: var(--input-shadow-focus);
}

/* .auth-field input ya estiliza cualquier <input> como un campo de texto de
   ancho completo — sin esto, el checkbox de consentimiento hereda esas
   reglas y sale como una caja gigante en vez de un checkbox normal. */
.auth-field-checkbox {
    gap: 0;
}

.auth-field-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    color: var(--text-soft);
    font-size: 0.88rem;
    line-height: 1.5;
    cursor: pointer;
}

.auth-field-checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--color-primary-light);
    cursor: pointer;
}

.auth-field-checkbox a {
    color: var(--text-main-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-submit {
    min-height: 3.25rem;
    margin-top: 0.35rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-secondary));
    color: var(--text-on-accent);
    font-weight: 700;
    box-shadow: var(--button-shadow-cta);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.auth-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.auth-divider {
    margin: 1.1rem 0;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-subtle);
    font-size: 0.84rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--glass-border);
}

.auth-divider span {
    white-space: nowrap;
}

.auth-external-form {
    display: grid;
}

.auth-social-btn {
    min-height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg-soft);
    color: var(--text-main-strong);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.auth-social-btn:hover {
    transform: translateY(-1px);
    border-color: var(--interactive-accent-border);
    background: var(--glass-bg-strong);
}

.auth-social-icon {
    width: 1.2rem;
    height: 1.2rem;
    display: inline-flex;
}

.auth-social-icon svg {
    width: 100%;
    height: 100%;
}

.auth-alert {
    margin-bottom: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
}

.auth-alert ul {
    margin: 0;
    padding-left: 1rem;
}

.auth-panel-footer {
    margin-top: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 0.94rem;
}

.auth-panel-footer a {
    color: var(--color-primary-light);
    font-weight: 600;
}

.auth-link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary-light);
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-legal-doc-list {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.auth-legal-doc-list a {
    display: inline-block;
    padding: 0.7rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-main-strong);
    font-weight: 600;
    text-decoration: none;
    width: 100%;
}

.auth-legal-doc-list a:hover {
    border-color: var(--input-border-strong);
}

/* .auth-status-card/.auth-status-card h2/p/.is-success/.is-danger/
   .auth-status-actions se movieron a UiMetadata.Elements (.ui-status-card/
   .ui-status-actions) — ver docs/reusability-audit.md. */

/* 1023px — breakpoint tablet/desktop acordado en Fase 2, antes 1080px. */
@media (max-width: 1023px) {
    /* .auth-page-body tiene overflow:hidden pensado para desktop (el layout
       de 2 columnas encaja justo en un viewport, sin necesidad de scroll).
       Acá abajo .auth-shell pasa a 1 columna (showcase + panel apilados,
       ver arriba) y con eso YA no entra en una pantalla — bloquear el
       scroll del body dejaba al usuario sin forma de bajar hasta el botón
       "Entrar"/Google en cuanto el contenido superaba el alto disponible.
       Bug real, intermitente: en mobile el alto de viewport varía según la
       barra de direcciones del navegador esté visible o colapsada — con
       más alto disponible el contenido entraba "de casualidad" y no se
       notaba, con menos quedaba atascado sin scroll. */
    .auth-page-body {
        overflow-y: auto;
        /* Red de seguridad: overflow:hidden del body (arriba, pensado para
           desktop) bloqueaba también el eje horizontal — si por lo que sea
           algo queda apenas más ancho que el viewport (ej. un elemento con
           un mínimo de contenido que el CSS no puede achicar del todo),
           ese contenido quedaba cortado SIN forma de hacer scroll para
           verlo, en vez de simplemente desbordar con scroll disponible. */
        overflow-x: auto;
    }

    /* minmax(0, 1fr), no "1fr" a secas — un grid track nunca se encoge por
       debajo del ancho mínimo de su contenido si no se lo permitís
       explícitamente (min-width:auto implícito en los ítems de grid). Sin
       el minmax(0, ...), .auth-panel (con .auth-shell-single fijando
       minmax(320px, 560px) fuera de este media query, misma especificidad
       pero antes en el archivo) terminaba más ancho que el viewport en vez
       de encogerse — la tarjeta entera se veía desbordada/cortada en
       mobile, no solo las casillas del código. */
    .auth-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-showcase {
        min-height: 420px;
    }

    .auth-panel {
        max-width: 680px;
        width: 100%;
        margin-inline: auto;
        /* Tope duro, no solo confiar en que el grid/flex de adentro se
           encoja solo — ya intenté eso dos veces (ver #117/#119) y seguía
           desbordando en Safari iOS real. box-sizing:border-box para que
           el padding (line ~539 más abajo) cuente DENTRO de este 100%, no
           se sume aparte. */
        max-width: min(680px, 100%);
        box-sizing: border-box;
    }

    .auth-panel-centered {
        min-height: auto;
    }
}

/* 599px — breakpoint móvil acordado en Fase 2, antes 768px. */
@media (max-width: 599px) {
    .auth-page-main {
        padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px))
                 calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
    }

    .auth-shell {
        min-height: auto;
        gap: 1rem;
    }

    .auth-showcase,
    .auth-panel {
        padding: 1.35rem;
        border-radius: 1.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }

    .auth-showcase-copy h1 {
        font-size: 2rem;
    }

    .auth-feature-list,
    .auth-metric-band {
        grid-template-columns: 1fr;
    }

    .auth-panel-header h2 {
        font-size: 1.6rem;
    }
}

/* Versión de la app, discreta bajo la tarjeta de login/registro. */
.auth-version {
    text-align: center;
    padding: 0 16px 20px;
    font-size: .72rem;
    opacity: .55;
}