/*
 * preauth.css — capa de PÁGINA del cluster pre-auth (Veriko)
 * ============================================================
 *  La comparten login · registro · recuperar-contrasena: el chrome pre-auth
 *  (tarjeta centrada SIN shell autenticado · selector de idioma · pie) + la
 *  composición de los pasos de acceso. Carga DESPUÉS de components.css.
 *
 *  REUSA tal cual de components.css (NO redefine): .card · .btn/.btn-primary/
 *  .btn-block · .field/.field-label/.field-input/.field-hint · .field-icon ·
 *  .field-phone · .input-affix/.affix-btn · .otp-input/.otp-digit · .meter ·
 *  .callout · .badge · .step-bar/.step/.step-dot · .state-panel/.state-ico ·
 *  el estado .btn.is-loading. Aquí SOLO el chrome + overrides scoped (tamaños
 *  pre-auth) + composición propia (.preauth-*, .auth-*, otp-meta, resend…).
 *  Solo roles de token; cero literal de color.
 * ============================================================
 */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body.preauth { margin: 0; min-height: 100%; display: flex; flex-direction: column; font-family: var(--font-family); color: var(--color-text-primary); background: var(--color-bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.preauth a { color: inherit; text-decoration: none; }
/* Anchor-buttons (CTA "Iniciar sesión", "Ir al panel") son <a> con .btn-primary:
   el `color: inherit` de arriba (mayor especificidad que .btn-primary) les pisaba
   el texto a oscuro. Restablece el contraste del botón sólido en normal + hover. */
body.preauth a.btn-primary, body.preauth a.btn-primary:hover { color: var(--color-primary-contrast); }
.preauth .icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; stroke-width: 1.75; }
.preauth :where(a, button, input):focus-visible { outline: var(--ring-width) solid var(--ring-color); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- ⚠ Fondo de marca (degradado de acento + olas) ----------
   OJO normalización: design.md pide "fondos planos · gradiente solo neutro→neutro
   · sin decorativo". Esto añade un tinte de acento + olas. El owner lo aprobó para
   pre-auth; queda AISLADO a esta capa (no toca el resto de la app). Decisión de
   marca pendiente: confirmarlo como excepción pre-auth o retirarlo. */
.preauth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-accent) 16%, var(--color-bg)) 0%,
        color-mix(in srgb, var(--color-accent) 12%, var(--color-bg)) 9%,
        var(--color-bg) 56%); }
.preauth-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 58vh; display: block; }
.wave-1 { fill: color-mix(in srgb, var(--color-accent) 9%, var(--color-bg)); }
.wave-2 { fill: var(--color-surface); }
.wave-3 { fill: var(--color-bg); }
.wave-line { fill: none; stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .55; }

/* ---------- Selector de idioma (flotante, arriba-derecha) ---------- */
.lang-switch { position: absolute; top: var(--space-4); right: var(--space-4); z-index: 20; display: inline-flex; align-items: center; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 3px 3px 3px var(--space-2-5); box-shadow: var(--shadow-sm); }
.lang-switch .lang-ico { width: 16px; height: 16px; color: var(--color-text-tertiary); margin-right: 4px; }
.lang-btn { min-width: 40px; min-height: 38px; padding: 0 var(--space-2); border: 0; background: transparent; cursor: pointer; color: var(--color-text-secondary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); }
.lang-btn:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
.lang-btn[aria-pressed="true"] { background: var(--color-accent-light); color: var(--color-text-link); }

/* ---------- Layout / chrome ---------- */
/* Posición determinista: el logo + el inicio del contenido quedan FIJOS (padding-top
   por formato) y el contenido crece hacia abajo — NO se centra en vertical (así no
   sube/baja según su propio alto). align-items=center sólo centra en horizontal. */
.preauth-main { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; padding: var(--space-24) var(--space-4) var(--space-8); }
.preauth-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-5); }
.preauth-aside { display: none; }

/* ---------- Wordmark ---------- */
.wordmark { font: var(--font-bold) var(--text-lg)/1 var(--font-family); letter-spacing: -.02em; color: var(--color-text-primary); display: inline-block; }
.wordmark-accent { box-shadow: inset 0 -2px 0 var(--color-accent); padding-bottom: 1px; }
.wordmark--lg { font-size: var(--text-3xl); letter-spacing: -.03em; }
.wordmark--lg .wordmark-accent { box-shadow: inset 0 -3px 0 var(--color-accent); padding-bottom: 2px; }
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--space-6); }

/* ---------- Tarjeta de acceso (compone .card) ---------- */
.auth-card { padding: var(--space-6); box-shadow: var(--shadow-sm); }
.auth-head { margin-bottom: var(--space-5); }
.auth-title { font-size: var(--text-xl); font-weight: var(--font-bold); letter-spacing: -.02em; margin: 0; }
.auth-sub { font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-1) 0 0; text-wrap: pretty; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-form .field { margin-bottom: 0; }
.auth-form > .btn-primary { margin-top: var(--space-2); }
.auth-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-stack--tight { gap: var(--space-4); }
#login-error:empty, #otp-error:empty, #reg-error:empty, #reg-otp-error:empty, #rec-otp-error:empty { display: none; }
#login-error, #reg-error { margin-bottom: var(--space-4); }

/* Overrides SCOPED de tamaño pre-auth (objetivo táctil mayor) — NO redefinen el
   componente, solo lo ajustan dentro de la tarjeta de acceso. */
.auth-card .field-input { height: var(--input-height-lg); }
.auth-card .field-phone { height: var(--input-height-lg); }
.auth-card .input-affix .field-input { padding-right: 50px; }
.auth-card .affix-btn { right: var(--space-1); top: 50%; transform: translateY(-50%); width: 44px; height: 44px; }
.auth-card .otp-digit { width: 46px; height: 56px; font-size: var(--text-2xl); }
@media (max-width: 359px) { .auth-card .otp-digit { width: 40px; height: 52px; } }

/* Enlace bajo el campo (¿olvidaste tu contraseña?) + hint de error */
.field-link-row { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.hint-error { color: var(--color-danger-text); display: inline-flex; align-items: center; gap: 5px; }
.hint-error .icon { width: 14px; height: 14px; flex: 0 0 auto; }

/* ---------- OTP: destino + reenviar (el .otp-input/.otp-digit son centralizados) ---------- */
.otp-meta { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.otp-dest { font-size: var(--text-sm); color: var(--color-text-secondary); }
.otp-dest .mask { font-family: var(--font-family-mono); color: var(--color-text-primary); font-weight: var(--font-medium); }
.otp-expiry { font-size: var(--text-xs); color: var(--color-text-tertiary); text-align: center; margin: calc(var(--space-2) * -1) 0 0; }
.resend-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--color-text-tertiary); }
.countdown { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-weight: var(--font-medium); }
.resend-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 var(--space-2); border: 0; background: transparent; cursor: pointer; color: var(--color-text-link); font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); }
.resend-btn:hover:not(:disabled) { color: var(--color-text-link-hover); text-decoration: underline; }
.resend-btn:disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.resend-btn .icon { width: 15px; height: 15px; }

/* ---------- Volver (paso anterior en tarjeta) ---------- */
.card-back { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 36px; padding: 0; margin-bottom: var(--space-3); border: 0; background: transparent; cursor: pointer; color: var(--color-text-secondary); font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); }
.card-back:hover { color: var(--color-text-primary); }
.card-back .icon { width: 16px; height: 16px; }

/* ---------- Cross-links ---------- */
.auth-alt { text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-5); }
.auth-link { color: var(--color-text-link); font-weight: var(--font-medium); }
.auth-link:hover { color: var(--color-text-link-hover); text-decoration: underline; }
/* «Crear cuenta» (alt): siempre con apariencia de enlace (color + underline), no solo en hover. */
.auth-alt .auth-link { color: var(--color-text-link-hover); text-decoration: underline; }

/* ---------- Éxito (reusa .state-panel/.state-ico del DS; ajuste de caja) ---------- */
.auth-card .state-panel { padding: var(--space-6) var(--space-2) var(--space-2); }
.auth-card .state-actions { margin-top: var(--space-5); }
.auth-card .state-actions .btn { min-width: 160px; }

/* ---------- Pasos en-tarjeta ---------- */
.auth-step[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .auth-step.is-entering { animation: step-in var(--transition-normal) ease; } }
@keyframes step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Honeypot (anti-bot) — fuera de pantalla, sin display:none para no alertar bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Barra de PROTOTIPO (scaffolding de revisión, se ELIMINA al portar) ---------- */
.proto-bar { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 30; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--space-2); }
.proto-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-secondary); font-family: inherit; font-size: var(--text-xs); font-weight: var(--font-semibold); cursor: pointer; box-shadow: var(--shadow-sm); }
.proto-toggle:hover { color: var(--color-text-primary); }
.proto-toggle .icon { width: 15px; height: 15px; color: var(--color-text-tertiary); }
.proto-menu { display: flex; flex-direction: column; min-width: 220px; max-height: 60vh; overflow-y: auto; padding: var(--space-1); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.proto-menu[hidden] { display: none; }
.proto-item { text-align: left; min-height: 38px; padding: 0 var(--space-2-5); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); font-family: inherit; font-size: var(--text-sm); cursor: pointer; }
.proto-item:hover { background: var(--color-surface-sunken); }

/* ---------- Pie ---------- */
.preauth-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.preauth-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); }
.preauth-foot a { color: var(--color-text-tertiary); }
.preauth-foot a:hover { color: var(--color-text-secondary); text-decoration: underline; }
.preauth-ver { font-variant-numeric: tabular-nums; }

/* ============================================================
   TABLET ≥768 — tarjeta centrada en viewport, padding mayor
   ============================================================ */
@media (min-width: 768px) {
    .preauth-main { justify-content: flex-start; padding: var(--space-12) var(--space-6); }
    .auth-card { padding: var(--space-7); }
}

/* Tablet: subir las olas para que la cresta quede DETRÁS del card (que nunca se vean
   por completo); sólo asoma el cuerpo bajo/al costado del card. */
@media (min-width: 768px) and (max-width: 1099px) {
    .preauth-waves { height: 80vh; }
}

/* ============================================================
   ESCRITORIO ≥1100 — trato calmo a un costado (wordmark + línea de marca,
   SIN ilustración); tarjeta a la derecha.
   ============================================================ */
@media (min-width: 1100px) {
    /* Desktop = diseño CD: aside + card centrados en vertical (lado a lado). El
       top-align determinista aplica sólo a mobile/tablet (donde el alto del card varía). */
    .preauth-main { flex-direction: row; align-items: center; justify-content: center; gap: var(--space-16); padding: var(--space-12) var(--space-8); }
    .preauth-aside { display: flex; flex-direction: column; gap: var(--space-5); max-width: 380px; }
    .aside-tagline { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -.03em; line-height: 1.12; margin: var(--space-2) 0 0; max-width: 15ch; text-wrap: balance; color: var(--color-text-primary); }
    .aside-trust { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-success-text); }
    .aside-trust .icon { width: 17px; height: 17px; }
    .preauth-col .auth-brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .preauth *, .preauth *::before, .preauth *::after { animation: none !important; transition: none !important; }
}