/* =====================================================================
   GIA theme v1 — capa visual sobre styles.css
   Se carga DESPUÉS de styles.css. Quitar su <link> del index.html
   revierte todo al diseño anterior. No toca IDs ni JS.
   ===================================================================== */
:root{
  --bg-canvas:#0b1a22;
  --accent:#3b74ff;
  --accent-soft:rgba(59,116,255,0.16);
  --gia-blue:#2f6dff;
  --gia-trace:#3cc8e6;
  --gia-steel-hi:#d9dbe0;
  --gia-steel:#aca9b0;
  --gia-steel-lo:#5d6168;
  --gia-field:#0c1419;
  --gia-display:"Chakra Petch","Segoe UI",system-ui,sans-serif;
}
body{ background-color:var(--bg-canvas); }

/* ---------- Fondo del login ---------- */
.login-screen{
  background:
    radial-gradient(ellipse 90% 55% at 50% 12%, rgba(47,109,255,.16), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(60,200,230,.08), transparent 70%),
    var(--bg-canvas);
}
.login-screen::before{
  animation:none;
  opacity:.35;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 6px);
}

/* ---------- Tarjeta con bisel de acero ---------- */
.login-card{
  border:1px solid transparent;
  border-radius:18px;
  background:
    linear-gradient(180deg,#17222a,#131c23) padding-box,
    linear-gradient(160deg,var(--gia-steel-hi),var(--gia-steel-lo) 35%,#26313a 60%,var(--gia-steel) 100%) border-box;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.login-brand{ gap:6px; }

/* ---------- Dial GIA + trazas ---------- */
.logo-halo{ width:100%; height:210px; }
.logo-halo::before{ display:none; }
.gia-traces{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.gia-traces path{ fill:none; stroke:var(--gia-trace); stroke-width:1.6; stroke-linecap:round; opacity:.75;
  stroke-dasharray:var(--len); stroke-dashoffset:0; }
.gia-traces circle{ fill:var(--gia-trace); }
.login-brand .logo-img{
  width:176px; height:176px; object-fit:contain; border-radius:50%; filter:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 38px rgba(60,200,230,.35), 0 0 90px rgba(47,109,255,.25);
}
.login-title{
  margin:6px 0 0; text-align:center; color:var(--text);
  font-family:var(--gia-display); font-weight:600; font-size:1.45rem; line-height:1.15; letter-spacing:.02em;
}
.login-subtitle{ font-family:inherit; font-size:.95rem; letter-spacing:0; }

/* ---------- Campos ---------- */
.login-form .field span{ font-size:.92rem; font-weight:500; color:var(--text); }
.login-form .field input{
  height:48px; border-radius:11px; border:1px solid #2c3a45; background:var(--gia-field);
  color:var(--text); font-size:16px; padding:0 14px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55); transition:border-color .15s, box-shadow .15s;
}
.login-form .field input::placeholder{ color:#5f6c78; }
.login-form .field input:focus{
  outline:none; border-color:var(--gia-trace);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55), 0 0 0 3px rgba(60,200,230,.22);
}

/* ---------- Botón de acero con línea de luz ---------- */
.login-form .btn-primary{
  position:relative; overflow:hidden; height:52px; border-radius:12px; color:#0d1820;
  font-family:var(--gia-display); font-weight:600; font-size:1.05rem; letter-spacing:.03em;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#eef0f3 0%,#b9bec6 48%,#9aa0a9 52%,#c9cdd3 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px rgba(0,0,0,.45);
}
.login-form .btn-primary::after{
  content:""; position:absolute; left:12%; right:12%; bottom:0; height:3px; border-radius:3px;
  background:var(--gia-blue); box-shadow:0 0 12px 2px rgba(47,109,255,.9), 0 0 26px 6px rgba(60,200,230,.45);
}
.login-form .btn-primary:hover{ transform:none; filter:brightness(1.05); }
.login-form .btn-primary:focus-visible{ outline:3px solid var(--gia-trace); outline-offset:3px; }
.login-form .btn-secondary{ height:44px; }
.login-footnote{ font-family:inherit; font-size:.85rem; }

/* ---------- Encabezado interno (sidebar) ---------- */
.sidebar-logo-img{ border-radius:50%; filter:drop-shadow(0 0 8px rgba(60,200,230,.35)); }
.brand-text strong{ font-family:var(--gia-display); font-weight:600; font-size:15.5px; letter-spacing:.02em; }

/* ---------- Único momento animado: el sistema "enciende" ---------- */
@media (prefers-reduced-motion: no-preference){
  .gia-traces path{ stroke-dashoffset:var(--len); animation:gia-draw 1.1s cubic-bezier(.6,0,.2,1) forwards; animation-delay:var(--d,0s); }
  .gia-traces circle{ opacity:0; animation:gia-on .25s ease-out forwards; animation-delay:calc(var(--d,0s) + 1s); }
  .login-brand .logo-img{ animation:gia-power 1.4s ease-out both; }
}
@keyframes gia-draw{ to{ stroke-dashoffset:0; } }
@keyframes gia-on{ to{ opacity:1; } }
@keyframes gia-power{
  0%{ filter:brightness(.55); box-shadow:0 0 0 1px rgba(255,255,255,.06); }
  100%{ filter:none; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 38px rgba(60,200,230,.35), 0 0 90px rgba(47,109,255,.25); }
}