/*
 * auth.css: la piel de las páginas de acceso — login, register, forgot-password y reset-password.
 *
 * POR QUÉ EXISTE: las cuatro tenían cada una su <style> con su propia paleta vieja («warm dark»,
 * degradé cian, halo azul, cursor de mira), y el login de la landing v3 (2026-09-22) fijó UNA
 * estructura para todas: texto a la izquierda, el formulario en el panel del plan a la derecha.
 * Cuatro copias del mismo CSS derivan en cuatro dialectos; esto es la fuente única, igual que
 * nav.js lo es de la barra y footer.js del pie.
 *
 * NI UN COLOR PROPIO: todo es token de theme.css. En el sitio público resuelve al tema grafito
 * que fija assets/nav.js (ADR-0027). Tamaños de letra por la escala --fs-* (regla de oro 3).
 *
 * USO: <link rel="stylesheet" href="/assets/auth.css"> DESPUÉS de theme.css, y la estructura:
 *   .lg-escena (fondo) · main.lg-main > section (texto) + .auth-card (panel)
 * La red del fondo la dibuja assets/auth-red.js.
 *
 * 🔴 EL BODY ES UNA COLUMNA, NO UN FLEX CENTRADO. Así estaban las cuatro, y con la barra
 * compartida adentro la barra quedaba aplastada en el medio de la pantalla, con la marca encima
 * de los links. Lo que se centra es el contenido del main, nunca el body.
 */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--txt); font-family:var(--font-ui); font-size:var(--fs-15);
  line-height:1.62; font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column}
::selection{background:var(--accent); color:var(--bg)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ── La escena: la idea del #stage de la landing, en quieto y a baja intensidad ── */
.lg-escena{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(110% 85% at 70% 45%,var(--surface) 0%,var(--bg) 62%)}
.lg-escena canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.55}
/* 📕 Acá había un `#site-nav{position:relative;z-index:50}`. Lo borró el 2026-09-24 el
   arreglo de la barra fija: nav.js ahora declara `#site-nav{position:sticky;top:0;z-index:50}`,
   y ese `relative` tiene la MISMA especificidad. No rompía —el <style> de nav.js se inyecta
   después de los <link>, así que ganaba por orden—, pero era una dependencia silenciosa:
   mover un <link> abajo del <script> habría despegado la barra sin que nada lo dijera. */
#site-footer{position:relative; z-index:1}

/* ── Dos columnas: el texto a la izquierda, el acceso a la derecha ── */
.lg-main{position:relative; z-index:1; flex:1; display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:clamp(40px,7vw,120px);
  width:100%; max-width:1180px; margin:0 auto;
  padding:clamp(48px,9vh,110px) clamp(18px,4vw,44px) clamp(56px,10vh,120px)}
@media(max-width:900px){ .lg-main{grid-template-columns:minmax(0,1fr); gap:36px; max-width:560px} }

.lg-eyebrow{font-size:var(--fs-10); font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0}
.lg-h1{font-weight:800; font-size:clamp(var(--fs-20),4.4vw,var(--fs-22)); line-height:1.02;
  letter-spacing:-.034em; margin:18px 0 0; text-wrap:balance; color:var(--txt-hi)}
.lg-h1 span{display:block; color:var(--txt-2)}
.lg-lead{margin:22px 0 0; max-width:44ch; color:var(--txt-2); font-size:var(--fs-15)}
/* Hechos del sistema con filete entre ellos (el patrón .faq de la landing).
   🔴 SÓLO LO QUE ES CIERTO HOY: nada de «hasta 2 dispositivos» mientras ese límite siga apagado
   (docs/deuda-limite-de-dispositivos.md). */
.lg-hechos{margin:34px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); max-width:46ch}
.lg-hechos li{display:grid; grid-template-columns:130px 1fr; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line); font-size:var(--fs-12)}
.lg-hechos b{font-weight:500; font-size:var(--fs-9); letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3); padding-top:2px}
.lg-hechos span{color:var(--txt-2)}
@media(max-width:900px){ .lg-hechos{display:none} .lg-lead{margin-top:14px} }

/* ── El panel: la receta de .plan de la landing (radio 0, filete de acento arriba) ──
   🔴 ES BLOCK, NO FLEX, y el aire entre hijos lo pone `> * + *`. register, forgot y reset
   alternan paneles con `style.display = 'block'`: con flex, el primer cambio de estado se
   llevaba el espaciado. */
.auth-card{background:linear-gradient(150deg,color-mix(in srgb,var(--surface) 94%,transparent),
                                           color-mix(in srgb,var(--bg) 80%,transparent));
  border:1px solid var(--line2); border-top:2px solid var(--accent);
  padding:clamp(26px,3.4vw,38px); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  display:block; min-width:0}
.auth-card > * + *{margin-top:20px}
/* El login arranca invisible y se revela cuando getSession() decide que no hay que redirigir:
   así el que ya tiene sesión no ve el formulario parpadear. */
.auth-card.lg-oculta{opacity:0; transition:opacity .25s ease}
.auth-card.lg-oculta.visible{opacity:1}

.lg-cab{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.lg-cab h2{margin:0; font-size:var(--fs-18); font-weight:700; letter-spacing:-.02em; color:var(--txt-hi)}
.lg-cab small{font-size:var(--fs-9); letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3)}
.lg-sub{margin:0; font-size:var(--fs-13); color:var(--txt-2)}
.lg-sub a{color:var(--txt-hi); text-decoration:none; border-bottom:1px solid var(--line2);
  transition:color var(--dur-hover),border-color var(--dur-hover)}
.lg-sub a:hover{color:var(--accent); border-bottom-color:var(--accent)}

.form-group{display:flex; flex-direction:column; gap:8px; min-width:0}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:420px){ .form-row{grid-template-columns:1fr} }
.lg-fila{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.form-label{font-size:var(--fs-9); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2)}
.form-forgot{font-size:var(--fs-10); color:var(--txt-3); text-decoration:none; border-bottom:1px solid transparent;
  transition:color var(--dur-hover),border-color var(--dur-hover)}
.form-forgot:hover{color:var(--accent); border-bottom-color:var(--accent)}
.form-input{width:100%; height:48px; padding:0 16px; background:var(--plot); border:1px solid var(--line2);
  border-radius:0; color:var(--txt-hi); font:400 var(--fs-13)/1 var(--font-ui); outline:none;
  transition:border-color var(--dur-hover),box-shadow var(--dur-hover)}
.form-input::placeholder{color:var(--txt-4)}
.form-input:hover{border-color:var(--txt-4)}
.form-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-lo)}
/* El autocompletado de Chrome pintaba el campo celeste claro: se tapa con una sombra interior
   del color del campo. */
.form-input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--plot) inset; -webkit-text-fill-color:var(--txt-hi);
  caret-color:var(--txt-hi); transition:background-color 9999s}
.pw-wrap{position:relative}
.pw-wrap .form-input{padding-right:52px}
.pw-toggle{position:absolute; top:0; right:0; width:48px; height:48px; display:flex; align-items:center;
  justify-content:center; background:none; border:0; color:var(--txt-3); cursor:pointer;
  transition:color var(--dur-hover)}
.pw-toggle:hover{color:var(--accent)}
.eye-svg{width:18px; height:18px; display:block; overflow:visible}
.eye-pupil{transform-origin:12px 12px; transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .2s ease}
.pw-toggle.showing .eye-pupil{transform:scale(0); opacity:0}
.eye-slash{stroke-dasharray:30; stroke-dashoffset:30; transition:stroke-dashoffset .3s ease .04s}
.pw-toggle.showing .eye-slash{stroke-dashoffset:0}

/* Fortaleza de la contraseña: cuatro segmentos rectos. El color del texto lo pone el JS con
   var(--red|--accent|--green); las barras, por clase. */
.pw-strength{display:flex; align-items:center; gap:12px; margin-top:2px}
.pw-bars{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; flex:1}
.pw-bar{height:3px; background:var(--line2); transition:background var(--dur-hover)}
.pw-bar.weak{background:var(--red)}
.pw-bar.fair{background:var(--accent)}
.pw-bar.strong{background:var(--green)}
.pw-hint{font-size:var(--fs-10); color:var(--txt-3); min-width:9ch; text-align:right}

/* Casillas: términos y edad */
.terms-row{display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-12); color:var(--txt-2); line-height:1.55}
.terms-row input{flex:none; width:16px; height:16px; margin:2px 0 0; accent-color:var(--accent); cursor:pointer}
.terms-row label{cursor:pointer}
.terms-row a{color:var(--txt); text-decoration:none; border-bottom:1px solid var(--line2)}
.terms-row a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* El botón: el .btn de la landing, a todo el ancho. Sirve también en <a>. */
.btn-auth{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:50px;
  font:500 var(--fs-10)/1 var(--font-ui); letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--accent); background:var(--accent); color:var(--bg); cursor:pointer;
  transition:background .22s ease,color .22s ease}
.btn-auth:hover{background:transparent; color:var(--accent)}
.btn-auth:disabled{cursor:progress; background:transparent; color:var(--accent)}
.btn-auth.ghost{background:transparent; color:var(--txt-2); border-color:var(--line2)}
.btn-auth.ghost:hover{color:var(--accent); border-color:var(--accent)}
.spinner{display:inline-block; width:14px; height:14px; border:2px solid var(--accent-md); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* El aviso se escribe con textContent (sin HTML), así que el color lo lleva el marco */
.auth-alert{display:none; padding:13px 15px; font-size:var(--fs-12); line-height:1.5; border:1px solid; color:var(--txt)}
.auth-alert.show{display:block}
.auth-alert.error{border-color:color-mix(in srgb,var(--red) 45%,transparent); background:color-mix(in srgb,var(--red) 8%,transparent)}
.auth-alert.success{border-color:color-mix(in srgb,var(--green) 45%,transparent); background:color-mix(in srgb,var(--green) 8%,transparent)}

/* Un estado del panel que no es formulario: enviado, expirado, listo, verificando */
.lg-estado{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.lg-estado .ico{width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line2); color:var(--accent)}
.lg-estado .ico svg{width:20px; height:20px}
.lg-estado .ico.ok{color:var(--green); border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.lg-estado .ico.warn{color:var(--red); border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.lg-estado h2{margin:0; font-size:var(--fs-18); font-weight:700; letter-spacing:-.02em; color:var(--txt-hi)}
.lg-estado p{margin:0; font-size:var(--fs-13); color:var(--txt-2)}
.lg-estado b{font-weight:500; color:var(--txt-hi); word-break:break-all}
.lg-estado .btn-auth{margin-top:8px}
.lg-cargando{display:flex; align-items:center; gap:12px; font-size:var(--fs-13); color:var(--txt-2)}

.lg-pie{margin:0; border-top:1px solid var(--line); padding-top:18px; font-size:var(--fs-12); color:var(--txt-3)}
.lg-pie a{color:var(--txt); text-decoration:none; border-bottom:1px solid var(--line2);
  transition:color var(--dur-hover),border-color var(--dur-hover)}
.lg-pie a:hover{color:var(--accent); border-bottom-color:var(--accent)}

@media(prefers-reduced-motion:reduce){ .spinner{animation-duration:2s} }