/* ═══ login.css — estética ÚNICA de /login, independiente del skin de la app ══════════
   Mismo criterio que byt-analitico/ui/login.css (Fase 20-UX, leído solo-lectura, sólo
   como referencia de PATRÓN — no se copian sus tokens: acá no existe la identidad
   "RIA Labs" con eclipse dorado, así que la pantalla se re-construye alrededor del
   logo animado propio de este repo, `login-logo.gif` — ver la decisión de cuál de los
   candidatos de material/gif-dataflow/salida/serie4/ se eligió, en el reporte de esta
   fase). /login.html NO carga skin.css/neon.css/dataflow.css: esta hoja define su
   propio namespace (`--login-*`), sin colisión con `:root[data-skin=...]`.

   Paleta: cian (#57d6ff-ish) sobre casi-negro, el mismo tono que ya usa
   `login-logo.gif` (grilla + trazos "DATA FLOW" cian) y muy cerca de
   `--color-info`/`--color-acento` del skin "neon" de la app (#38bdf8) — para que el
   salto de /login a la SPA autenticada no sea un cambio de identidad, aunque las hojas
   no compartan una sola variable. */

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}
html,body{height:100%}

:root{
  color-scheme: dark;
  --login-bg:       #060a10;
  --login-bg2:      #0d131c;   /* tarjeta */
  --login-bg3:      #101924;   /* relleno de inputs */
  --login-line:     #21303f;
  --login-fg:       #e9f2fb;
  --login-fg2:      #93a7bd;
  --login-accent:   #4fd8ff;
  --login-tinta:    #03141c;   /* texto oscuro sobre --login-accent relleno */
  --login-err-bg:   #2a0f14;
  --login-err-line: #5e2530;
  --login-err-fg:   #ffb3bb;
  --login-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}

body{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 24px; position:relative; overflow-x:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 10%, #0c1826 0%, var(--login-bg) 55%);
  color:var(--login-fg); font-family:var(--login-sans);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}

main.escenaLogin{
  width:100%; max-width:400px; display:flex; flex-direction:column;
  align-items:center; gap:22px;
}

.hero{display:flex; flex-direction:column; align-items:center; gap:8px}
.heroGif{
  width:clamp(140px, 26vmin, 220px); border-radius:16px; overflow:hidden;
  box-shadow:0 0 0 1px var(--login-line), 0 20px 50px rgba(0,0,0,.55),
             0 0 46px rgba(79,216,255,.16);
}
.heroGif img{width:100%; height:auto; display:block}

.wordmark{
  display:flex; align-items:baseline; gap:9px; font-size:clamp(22px,5vmin,28px);
  letter-spacing:.08em;
}
.wordmark .ria{color:var(--login-fg); font-weight:700}
.wordmark .dataflow{color:var(--login-accent); font-weight:300; letter-spacing:.2em}

.tarjeta{
  width:100%; background:var(--login-bg2); border:1px solid var(--login-line);
  border-radius:16px; padding:28px 26px 24px; position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.02) inset;
}
.tarjeta::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--login-accent), transparent);
  opacity:.7;
}
.tarjeta h1{font-size:16px; text-align:center; margin-bottom:5px; font-weight:600}
.tarjeta .sub{
  text-align:center; margin-bottom:20px; font-size:12.5px; color:var(--login-fg2);
  line-height:1.6;
}

form{display:flex; flex-direction:column; gap:12px}
label.campo{width:100%; display:block}
label.campo span{
  display:block; margin-bottom:6px; font-size:11.5px; color:var(--login-fg2);
  font-weight:600; letter-spacing:.02em;
}
label.campo input{
  width:100%; background:var(--login-bg3); border:1px solid var(--login-line);
  border-radius:9px; color:var(--login-fg); font-family:var(--login-sans); font-size:13.5px;
  padding:11px 13px; transition:border-color .2s ease, box-shadow .2s ease;
}
label.campo input::placeholder{color:#5c7186}
label.campo input:focus{
  outline:none; border-color:var(--login-accent);
  box-shadow:0 0 0 3px rgba(79,216,255,.18);
}

button.entrar{
  margin-top:8px; width:100%; display:flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 14px; font-size:13.5px; font-weight:700; font-family:var(--login-sans);
  background:var(--login-accent); color:var(--login-tinta); border:none; border-radius:9px;
  cursor:pointer; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, filter .2s ease;
}
button.entrar:hover{filter:brightness(1.08); box-shadow:0 8px 24px rgba(79,216,255,.28)}
button.entrar:active{transform:scale(.98)}

.err{
  margin-top:10px; padding:10px 12px; border-radius:8px; font-size:12px;
  background:var(--login-err-bg); border:1px solid var(--login-err-line); color:var(--login-err-fg);
}

.cargando{
  text-align:center; padding:24px 0; color:var(--login-fg2); font-size:13px;
}

@media (prefers-reduced-motion: reduce){
  button.entrar{ transition:none }
  label.campo input{ transition:none }
}