/* =====================================================
   AUTH SCREENS — Login / Registro / Acceso empleado
   Rediseño «bosque editorial» (Task 6).

   Los valores salen del prototipo aprobado
   (`parqueapp-rediseno.html`, bloque «7. AUTENTICACIÓN») traducidos a los
   tokens del sistema (`base.css`): en esta hoja no hay ni un color literal.

   TRES DECISIONES QUE SOSTIENEN LOS CONTRASTES
   ─────────────────────────────────────────────────────────────────────────
   1. El gradiente decorativo del prototipo (`.auth-layer`) vive SOLO en
      `#authScreens`, donde no hay texto, y la tarjeta es OPACA (`--surface`).
      La auditoría corta la pila de fondos en el primer color opaco, así que
      todo el texto de la tarjeta se mide contra un fondo SÓLIDO. Antes había
      un gradiente en la misma capa que el texto y, en escritorio, una tarjeta
      translúcida con `backdrop-filter`: por eso 43 pares de estas seis
      pantallas quedaban congelados como `contrast-sin-medir`. Ahora se miden,
      y pasan.
   2. El botón de envío es de color PLANO (`--brand`), no un degradado: así
      `span.btn-label` (el blanco sobre el botón) es medible y da 9.3:1. Con el
      `linear-gradient` anterior ese par quedaba «sin medir».
   3. El enlace de la política de créditos deja de usar `opacity: .5`. La
      auditoría declara que NO modela la opacidad de un elemento, así que ese
      atenuado era invisible para ella: el separador quedaba en 2.11:1 reales
      sobre el papel (composición al 50% sobre `--surface`: rgb(180,174,165)),
      que ninguna verificación veía. Ahora usa `--text-faint` (5.82:1) como el
      texto que separa.

   Todo va prefijado con `#authScreens`. No es decorativo: `.input-wrap`,
   `.form-group`, `.btn` y `.toggle-password` TAMBIÉN existen en los modales, y
   esta hoja se carga antes que layout/components/responsive.

   EL PREFIJO NO ALCANZA POR SÍ SOLO, y conviene decirlo porque la primera
   versión de esta hoja lo afirmaba mal: prefijar garantiza que las reglas
   prefijadas dejen de aplicar a los modales, pero NO que los modales conserven
   lo que esta hoja les venía dando. La versión anterior de `auth.css` era
   global, así que las propiedades que `components.css` NO redeclara llegaban
   al modal desde acá: con el prefijo, el modal se quedaba sin ellas (el toggle
   de contraseña pasó de 32×32 centrado con radio 8 a 27×27 sin radio). Por eso
   al final del archivo hay un bloque de compatibilidad, el único sin prefijo,
   que redeclara exactamente las propiedades perdidas —y solo esas— para los
   `.input-wrap` y `.toggle-password` de los modales.
   ===================================================== */

/* =====================================================
   Capa de acceso
   ===================================================== */
#authScreens {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
    position: relative;
    overflow: hidden auto;
    /* Los dos radiales son los del prototipo, con tokens en vez de literales.
       Están acá y no en la tarjeta a propósito: es el único lugar de estas
       pantallas donde el gradiente no cae debajo de un texto. */
    background:
        radial-gradient(1100px 620px at 88% -8%, var(--brand-soft), transparent 62%),
        radial-gradient(760px 520px at -10% 108%, var(--amber-100), transparent 60%),
        var(--surface-sunken);
    box-shadow: var(--shadow-lg);
}

#authScreens .auth-page {
    display: none;
    flex: 1;
    flex-direction: column;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
    /* `overflow-y: auto` es lo que permite que la página encoja por debajo de su
       contenido (el mínimo automático de un ítem flex es 0 cuando su `overflow`
       no es `visible`) y scrollee ella misma, que es lo que resetea
       `showAuthScreen` con `target.scrollTop = 0`. */
    overflow-y: auto;
    animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#authScreens .auth-page.active { display: flex; }

#authScreens .auth-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    /* `margin: auto` en vez de `justify-content: center`. Centra la tarjeta
       cuando entra en la pantalla, y cuando no entra (registro a 360×640) la
       deja pegada arriba, ENTERAMENTE alcanzable con scroll. Con
       `justify-content: center` la parte que sobra por arriba queda fuera del
       alcance del scroll: hoy la tarjeta de registro arranca en -67px a
       360×640 y sus primeros campos son inalcanzables. */
    margin: auto;
    padding: var(--space-5);
    /* Opaca a propósito: es lo que corta la pila de fondos y hace medible el
       texto de adentro (decisión 1 del encabezado). */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Volver. Sigue siendo absoluto (como antes) para no agregarle una fila de
   alto a la tarjeta: la de login ya está al límite a 360×640. Va arriba a la
   derecha, alineado con el logotipo, que ahora ocupa la izquierda.
   44×44 = mínimo táctil (antes 38×38, que era un ofensor congelado). */
#authScreens .auth-back-btn {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text-soft);
    font-size: var(--fs-md);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
#authScreens .auth-back-btn:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

/* =====================================================
   Logotipo
   ===================================================== */
#authScreens .auth-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
#authScreens .auth-logo-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-lg);
    box-shadow: var(--shadow-sm);
}
/* El relleno ámbar del prototipo va como TINTE + TINTA y no como bloque
   saturado: el sistema solo define `--on-brand` como «texto sobre relleno», y
   sobre `--amber-500` ese token se invertiría en tema oscuro (daría un glifo
   claro sobre ámbar). `--amber-100` + `--amber-ink` es el par que el sistema sí
   documenta para un fondo teñido: 5.05:1 en tema claro.
   (La ronda de corrección 1 ajustó este número: decía 5.7:1, que es el par
   ámbar sobre la TARJETA —lo que mide el medidor de contraseña—, no sobre el
   tinte. En tema oscuro el par no está medido por nadie: la Task 12 lo tiene
   pendiente, así que acá no se afirma nada sobre oscuro.) */
#authScreens .auth-logo-icon.employee {
    background: var(--amber-100);
    color: var(--amber-ink);
}
#authScreens .auth-logo-block {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#authScreens .auth-logo-text {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
}
#authScreens .auth-logo-tag {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* =====================================================
   Encabezado
   ===================================================== */
#authScreens .auth-head { margin-bottom: var(--space-4); }
#authScreens .auth-title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: var(--space-1);
}
#authScreens .auth-subtitle {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--text-soft);
}

/* =====================================================
   Campos
   ===================================================== */
#authScreens .form-group { margin-bottom: var(--space-3); }
#authScreens .form-group label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: var(--space-2);
}
#authScreens .form-group .req { color: var(--danger-ink); font-weight: 700; }
#authScreens .form-group .opt {
    color: var(--text-faint);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

#authScreens .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
#authScreens .input-wrap .input-icon {
    position: absolute;
    left: 14px;
    font-size: var(--fs-md);
    color: var(--text-faint);
    pointer-events: none;
    transition: color var(--transition-fast);
}
#authScreens .input-wrap input,
#authScreens .input-wrap select {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-md);
    background: var(--surface-raised);
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* El arreglo de la falla más repetida de la línea base: el gris por defecto del
   placeholder sobre blanco daba 2.54:1 en los seis formularios, cuando el
   mínimo AA es 4.5:1. `--text-faint` (clay-600) sobre el fondo REAL del campo
   —`--surface-raised`, el mismo que declara el `background` de la regla de
   abajo— da 6.07:1, que es el par que mide el arnés, y es además el token que
   el prototipo usa para placeholder. Sobre la tarjeta (`--surface`) ese mismo
   token da 5.82:1: los dos números son correctos, pero el que aplica acá es el
   del campo, porque el campo pinta su propio fondo opaco.
   El comentario va FUERA de la regla a propósito: el escáner de colores
   literales recorre el texto entre llaves, así que un valor escrito acá adentro
   cuenta como color literal de la hoja. */
#authScreens .input-wrap input::placeholder { color: var(--text-faint); }
#authScreens .input-wrap input:hover,
#authScreens .input-wrap select:hover { border-color: var(--border-strong); }
#authScreens .input-wrap input:focus,
#authScreens .input-wrap select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--ring);
}
#authScreens .input-wrap input:focus ~ .input-icon,
#authScreens .input-wrap:focus-within .input-icon { color: var(--brand); }

/* Campos de código: verificación de email (`#verifyEmailCode`) y código de
   recuperación (`#resetCode`). El prototipo les da un tratamiento propio
   (`parqueapp-rediseno.html:721-724`: `.code-input`), que la app había perdido:
   quedaban como campos comunes. Son las cinco declaraciones del prototipo,
   calcadas; no se agrega ninguna más (ni peso de fuente, que el prototipo
   tampoco fija). El campo conserva el icono a la izquierda y el `padding-left`
   de 42px del prototipo, así que el centrado deja el código en la misma
   posición que la referencia. */
#authScreens .input-wrap .code-input {
    letter-spacing: .5em;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Campo inválido (tras interacción). Sin literales: el borde es el relleno
   semántico de peligro, el halo es el tinte, y el icono la tinta. */
#authScreens .input-wrap input.user-invalid,
#authScreens .input-wrap select.user-invalid {
    border-color: var(--danger-fill);
    box-shadow: 0 0 0 4px var(--danger-100);
}
#authScreens .input-wrap input.user-invalid ~ .input-icon,
#authScreens .input-wrap:focus-within.user-invalid .input-icon { color: var(--danger-ink); }

/* Los campos con acción a la derecha necesitan lugar para ella: sin esto el
   texto escrito pasa por debajo del botón o del tilde. */
#authScreens .input-wrap:has(> .toggle-password) input { padding-right: 56px; }
#authScreens .input-wrap:has(> .input-match-indicator) input { padding-right: 42px; }

/* Toggle de visibilidad de contraseña: 44×44 (medía 32×32 y era un ofensor
   congelado en tres de las seis pantallas). Entra en el alto del campo sin
   agrandarlo. */
#authScreens .toggle-password {
    position: absolute;
    right: 4px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-faint);
    font-size: var(--fs-md);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}
#authScreens .toggle-password:hover {
    color: var(--text);
    background: var(--surface-sunken);
}

#authScreens .input-match-indicator {
    position: absolute;
    right: 14px;
    color: var(--success-ink);
    font-size: var(--fs-md);
    animation: fadeIn 0.2s;
}

#authScreens .select-caret {
    position: absolute;
    right: 14px;
    font-size: var(--fs-xs);
    color: var(--text-faint);
    pointer-events: none;
}
#authScreens .input-wrap select {
    padding-right: 40px;
    cursor: pointer;
}

/* =====================================================
   Botones
   ===================================================== */
#authScreens .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* 48px: por encima del mínimo táctil de 44 (antes 42, ofensor congelado en
       las seis pantallas) y por debajo de los 52 del prototipo, que a 360×640
       no entran. La afirmación está medida, no supuesta —la ronda de corrección
       1 encontró la misma clase de frase sin medir en el teclado del PIN—:
       forzando `.btn` a 52px, la tarjeta del PIN mide 609.2 y la pantalla
       scrollea 1px (con 48 mide 605.2 y entra, con 17.4px de margen arriba). */
    min-height: 48px;
    padding: 0 var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
#authScreens .btn-block { width: 100%; }

#authScreens .btn-submit {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm);
    margin-top: var(--space-1);
    position: relative;
}
#authScreens .btn-submit:hover:not(:disabled) {
    background: var(--brand-strong);
    box-shadow: var(--shadow-md);
}
#authScreens .btn-submit:disabled,
#authScreens .btn-submit.is-loading {
    cursor: not-allowed;
    opacity: 0.85;
}
/* Estados de carga: se conservan tal cual (`.btn-label` y `.btn-spinner` son
   el contrato de `setSubmitLoading` en auth.js). */
#authScreens .btn-submit.is-loading .btn-label,
#authScreens .btn-submit.is-loading .btn-spinner-icon { display: none; }
#authScreens .btn-submit.is-loading .btn-spinner { display: inline-block !important; }

#authScreens .btn-outline {
    background: var(--surface-raised);
    border: 1.5px solid var(--border-strong);
    color: var(--text);
}
#authScreens .btn-outline:hover {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-soft);
}

/* =====================================================
   Divisor y pies
   ===================================================== */
#authScreens .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}
#authScreens .auth-divider::before,
#authScreens .auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

#authScreens .auth-footer {
    /* Fila centrada: el `.link-btn` mide 44px de alto (mínimo táctil de
       base.css) y como inline-block desalineaba la línea del texto. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-soft);
}
/* `.link-btn` ya trae `min-height: 44px` de base.css: acá solo se le da el
   tratamiento del prototipo (subrayado permanente). */
#authScreens .auth-footer .link-btn {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
#authScreens .auth-footer .link-btn:hover { color: var(--brand-strong); }

#authScreens .auth-credit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-align: center;
    color: var(--text-faint);
}
#authScreens .auth-credit a {
    color: var(--text-soft);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    /* El enlace a UniK medía 27×15 y era un ofensor congelado de
       `touch-targets` (falla por ancho Y por alto). Es un enlace INLINE: el
       relleno vertical no afecta el alto de línea —no mueve nada— pero sí
       agranda la caja del elemento, y con eso el área de toque y el rectángulo
       que mide la auditoría; los márgenes horizontales negativos devuelven el
       relleno horizontal para que la línea de créditos no se corra ni un
       píxel. Resultado: 47×45 de área de toque, mismo dibujo. */
    padding: 15px 10px;
    margin: 0 -10px;
}
#authScreens .auth-credit a:hover { color: var(--brand); }
#authScreens .auth-credit-version { font-variant-numeric: tabular-nums; }

/* =====================================================
   PIN: puntos + teclado
   ===================================================== */
#authScreens .pin-display {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-3) 0 var(--space-1);
    cursor: text;
}
/* El display flex de arriba le ganaba al [hidden] del navegador. */
#authScreens .pin-display[hidden] { display: none; }
#authScreens .pin-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1.5px solid var(--border-strong);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
#authScreens .pin-dot.filled {
    background: var(--brand);
    border-color: var(--brand);
    transform: scale(1.08);
    box-shadow: 0 0 0 5px var(--brand-soft);
}
#authScreens .pin-dot.error {
    background: var(--danger-fill);
    border-color: var(--danger-fill);
    animation: shake 0.4s;
}
/* Puntos del PIN (#pinDots): 4 <i> que app.js llena según loginPin.value. */
#authScreens .pin-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    min-height: 44px;
}
/* El input real (#loginPin) va transparente sobre la fila de puntos: la fila es
   el campo. El foco lo dibuja el contenedor porque el input no se ve. */
#authScreens .pin-field {
    position: relative;
    margin: var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-md);
}
#authScreens .pin-field:focus-within {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
#authScreens .pin-field #loginPin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    background: transparent;
    font-size: 16px; /* 16px: iOS no hace zoom al enfocar */
    cursor: text;
    caret-color: transparent;
}
#authScreens .pin-dots i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--surface-sunken);
    border: 1.5px solid var(--border-strong);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
#authScreens .pin-dots i.filled {
    background: var(--brand);
    border-color: var(--brand);
    transform: scale(1.08);
}
#authScreens .pin-dots i.error {
    background: var(--danger-fill);
    border-color: var(--danger-fill);
    animation: shake 0.4s;
}
@media (prefers-reduced-motion: reduce) {
    #authScreens .pin-dots i, #authScreens .pin-dots i.error { transition: none; animation: none; }
}
#authScreens .pin-input-hidden {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

#authScreens .pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin: var(--space-3) auto;
    max-width: 320px;
}
/* 52px: el alto que el teclado tenía antes del rediseño y el que corresponde.
   El primer intento lo bajó a 48 («el valor del prototipo») con una
   justificación que la contraprueba desmiente: NO son esos 22px los que hacen
   entrar la pantalla. Medido a 360×640 con el resto del diseño ya aplicado:
   48px → tarjeta 589.2, scroll 0 · 52px → tarjeta 605.2, `cardTop=17.4`,
   scroll 0 · 56px → scroll 13. O sea que a 52 la pantalla entra completa y con
   17.4px de margen arriba: bajar a 48 solo regalaba un 7.7% de área táctil
   (48² → 52²) en el punto que el brief marcó como «no lo rompas». */
#authScreens .keypad-btn {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
#authScreens .keypad-btn:hover:not(:disabled) {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-strong);
}
#authScreens .keypad-btn:active:not(:disabled) {
    transform: scale(0.96);
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}
#authScreens .keypad-btn.keypad-empty { visibility: hidden; }
#authScreens .keypad-btn.keypad-back { color: var(--text-soft); }
#authScreens .keypad-btn.keypad-back:hover:not(:disabled) {
    border-color: var(--danger-fill);
    background: var(--danger-100);
    color: var(--danger-ink);
}

/* =====================================================
   Medidor de seguridad de la contraseña
   ===================================================== */
#authScreens .pwd-strength { margin-top: var(--space-2); }
#authScreens .pwd-strength-bar {
    display: flex;
    gap: 6px;
    margin-bottom: var(--space-1);
}
#authScreens .pwd-bar-segment {
    flex: 1;
    height: 5px;
    border-radius: var(--radius-sm);
    background: var(--border);
    transition: background var(--transition-normal);
}
#authScreens .pwd-strength-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-faint);
}
/* Las cuatro tintas del sistema: la barra se RELLENA con la tinta y la
   etiqueta se ESCRIBE con la misma tinta, así barra y texto dicen lo mismo con
   el mismo color. Las cuatro pasan AA como texto sobre la tarjeta (12 px =
   `--fs-xs`, el tamaño real de la etiqueta): danger 6.55:1 · amber 5.68:1 ·
   info 6.98:1 · success 6.17:1 — los cuatro sobre `--surface`, no sobre el
   relleno de la barra, que no lleva texto. */
#authScreens .pwd-strength[data-level="1"] .pwd-bar-segment:nth-child(-n+1) { background: var(--danger-ink); }
#authScreens .pwd-strength[data-level="2"] .pwd-bar-segment:nth-child(-n+2) { background: var(--amber-ink); }
#authScreens .pwd-strength[data-level="3"] .pwd-bar-segment:nth-child(-n+3) { background: var(--info-ink); }
#authScreens .pwd-strength[data-level="4"] .pwd-bar-segment { background: var(--success-ink); }
#authScreens .pwd-strength[data-level="1"] .pwd-strength-label { color: var(--danger-ink); }
#authScreens .pwd-strength[data-level="2"] .pwd-strength-label { color: var(--amber-ink); }
#authScreens .pwd-strength[data-level="3"] .pwd-strength-label { color: var(--info-ink); }
#authScreens .pwd-strength[data-level="4"] .pwd-strength-label { color: var(--success-ink); }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* =====================================================
   Teléfonos angostos (<= 400px)
   El ritmo del prototipo (24 px de padding de tarjeta, 16 px entre bloques)
   está pensado para su lienzo de 430×884. Con ese ritmo, medido a 1440 y a
   414 px, la tarjeta de login mide 657.95 px y a 360×640 no entra en la
   pantalla; acá se aprieta el ritmo vertical SIN tocar ningún tamaño (título,
   botones y campos quedan igual) y queda en 617.95 px, por debajo de los 632 px
   que medía antes de esta tarea. (Eran 609.95 hasta la ronda de corrección 1,
   que devolvió 8 px de separación al crédito por M-2.) El bloque es solo para
   el ancho angosto: la verificación corre a 1440×900, así que la medición de
   contraste ve exactamente el ritmo del prototipo.
   ===================================================== */
@media (max-width: 400px) {
    #authScreens .auth-card { padding: var(--space-4); }
    #authScreens .auth-logo { margin-bottom: var(--space-3); }
    #authScreens .auth-head { margin-bottom: var(--space-3); }
    #authScreens .form-group { margin-bottom: var(--space-2); }
    #authScreens .auth-divider { margin: var(--space-2) 0; }
    #authScreens .auth-footer { margin-top: var(--space-2); }
    /* El crédito NO se aprieta acá (antes bajaba sus dos márgenes de 12 a 8px).
       El enlace a UniK lleva 15px de relleno vertical para que su área de toque
       llegue a 47×45, y ese relleno se come hacia arriba la separación que le
       queda por encima: con 8+8 la caja del enlace quedaba a 2px de «Registrate»
       y le pisaba el borde del área de toque. Con el ritmo del prototipo
       (12+12) quedan 10px, los mismos que a partir de 401px. Cuesta 8px de alto
       en la tarjeta de login (el bloque de 8px de padding inferior que sigue
       siendo lo único que scrollea a 360×640). */
    #authScreens .auth-credit {
        margin-top: var(--space-3);
        padding-top: var(--space-3);
    }
}

/* =====================================================
   Escritorio (>= 900px)
   Los scopes de verificación corren a 1440×900, así que este bloque es el que
   se mide: la tarjeta sigue siendo opaca (sin `backdrop-filter`) y el
   gradiente queda detrás, a sangre, como la `.auth-layer` del prototipo.
   ===================================================== */
@media (min-width: 900px) {
    #authScreens {
        max-width: none;
        width: 100%;
        padding: var(--space-8);
    }
    #authScreens .auth-page { padding: 0; }
    #authScreens .auth-card {
        padding: var(--space-6);
        border-radius: var(--radius-xl);
    }
    #authScreens .auth-back-btn {
        top: var(--space-5);
        right: var(--space-5);
    }
}

/* =====================================================
   COMPATIBILIDAD FUERA DE LAS PANTALLAS DE ACCESO
   ─────────────────────────────────────────────────────
   ÚNICO bloque sin prefijar de la hoja, y por eso está al final y acotado a
   `.modal`. No es un rediseño de los modales: son las propiedades que la
   versión ANTERIOR de `auth.css` les daba a los componentes compartidos
   (`.input-wrap`, `.input-icon`, `.toggle-password`) por no estar prefijada, y
   que `components.css` —la hoja que gobierna el modal— no redeclara.

   Prefijar esta hoja se las quitó en silencio: el modal no cambió de hoja,
   cambió de proveedor para esas propiedades, y nadie las reemplazó. Medido con
   las dos versiones de la hoja en el mismo navegador y con el modal abierto
   (diff de estilos computados sobre los 259 elementos que la hoja toca fuera de
   `#authScreens`): quedaban distintos los 6 campos de `#passwordForm` y
   `#pinForm` y los 3 toggles, más el icono de cada campo.

   Por qué acá y no en `components.css`: esa hoja está fuera del alcance de la
   Task 6 y de esta corrección. Además el orden de carga (auth.css →
   components.css → responsive.css) hace que estas reglas sean inofensivas para
   todo lo que las otras dos sí declaran: a igual especificidad gana el archivo
   que se carga después. Estas reglas solo rellenan lo que allí no existe, así
   que no pisan ninguna decisión de esas hojas.

   Las dos únicas propiedades que no se pueden restaurar con el valor EXACTO
   (la regla vieja usaba un color literal y esta hoja no admite literales: sería
   una falla nueva de `no-literal-colors/auth.css`) van con el token equivalente
   y quedan anotadas una por una.
   ===================================================== */

/* Caja del toggle de contraseña del modal: los seis valores son los de la regla
   vieja (32×32, flex centrado, radio 8px). El borde, el color, el relleno, la
   posición y la tipografía los sigue aportando `.modal .input-wrap
   .toggle-password` de components.css, que es más específica. Sin esto el botón
   mide 27×27, queda como caja de bloque (el icono pasa a `inline-block` y
   pierde sus mínimos) y se queda sin radio. */
.modal .input-wrap .toggle-password {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
/* Tinte de hover: `--brand-soft`, el mismo token que pintaba la regla vieja
   (que lo escribía con el alias de compatibilidad ya retirado), así que no hay
   diferencia alguna con el comportamiento anterior. */
.modal .input-wrap .toggle-password:hover { background: var(--brand-soft); }

/* Icono del campo: transición y color de foco, con los valores de la regla
   vieja tal cual. Los dos se habían perdido. */
.modal .input-wrap .input-icon { transition: color 0.2s; }
.modal .input-wrap:focus-within .input-icon,
.modal .input-wrap input:focus ~ .input-icon { color: var(--brand); }

/* Campo: `appearance: none` es exacto (la regla vieja lo declaraba también para
   `select`, pero no hay ningún `select` dentro de un `.input-wrap`).
   El color de tinta NO puede ser exacto: la regla vieja fijaba `#1f2937`, un
   literal que esta hoja no admite. Se usa `--text` (`#12160F`), el token de
   tinta del sistema. Diferencia real: el texto del modal pasa de negro PURO
   —`rgb(0,0,0)`, lo que deja el control nativo cuando nadie declara `color`— a
   `#12160F`; en tema claro es imperceptible (18.3:1 sobre el blanco del campo),
   y en tema oscuro evita un campo ilegible, porque el negro puro sobre
   `--surface-raised` (#13291E) no se lee. Si el dueño del diseño prefiere el
   negro nativo, se borra la línea de `color` y no cambia nada más. */
.modal .input-wrap input {
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
}
/* Borde de hover: la regla vieja usaba `#c7d4c7`, también literal. Se usa
   `--border-strong`, el token de borde en hover del sistema (el mismo que usan
   las pantallas de acceso y el prototipo). El efecto queda algo más marcado que
   antes (`#B5A891` contra `#c7d4c7`), pero se restituye la señal de hover, que
   era lo que se había perdido. El borde en reposo lo sigue fijando
   `responsive.css` (`.modal .form-group input`): esta regla solo actúa en
   hover. */
.modal .input-wrap input:hover { border-color: var(--border-strong); }