/* ══════════════════════════════════════════════════════
   SIAA · Login — estilo infosystem
   ══════════════════════════════════════════════════════ */

:root{
  --bg:#0f0f17;--surface:#16161f;--surface2:#1e1e2a;--surface3:#252533;
  --border:rgba(255,255,255,0.08);
  --red:#e74c3c;--red-dim:rgba(231,76,60,0.15);
  --blue:#4a9edd;--blue-dim:rgba(74,158,221,0.15);
  --green:#27ae60;--amber:#f39c12;
  --text:#e8e8f0;--muted:#7a7a9a;
  --font:'Syne',sans-serif;--mono:'JetBrains Mono',monospace;
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}
[data-theme="light"]{
  --bg:#f0f2f8;--surface:#ffffff;--surface2:#f5f6fa;--surface3:#ebedf5;
  --border:rgba(0,0,0,0.09);
  --red:#c0392b;--red-dim:rgba(192,57,43,0.1);
  --blue:#1a6fa8;--blue-dim:rgba(26,111,168,0.12);
  --text:#1e1e2e;--muted:#6b7080;
  --shadow-lg:0 8px 32px rgba(0,0,0,.14);
}

*{box-sizing:border-box;margin:0;padding:0}

html{background:var(--bg)}

body{
  background:transparent;color:var(--text);font-family:var(--font);
  font-size:14px;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem;
}

/* ── Cuadrícula con brillo (porteado de contabilidad/login.php) ──────────── */
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(52,152,219,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52,152,219,0.22) 1px, transparent 1px);
  background-size:52px 52px;
}
.bg-glow{
  position:fixed;z-index:-1;pointer-events:none;
  width:650px;height:650px;border-radius:50%;
  background:radial-gradient(circle, rgba(52,152,219,0.40) 0%, rgba(52,152,219,0.15) 40%, transparent 70%);
  animation:glow-move 12s ease-in-out infinite;
  top:-325px;left:-325px;
}
@keyframes glow-move{
  0%  {transform:translate(15vw, 25vh);}
  25% {transform:translate(70vw, 15vh);}
  50% {transform:translate(60vw, 65vh);}
  75% {transform:translate(10vw, 60vh);}
  100%{transform:translate(15vw, 25vh);}
}

/* ── Wrap ──────────────────────────────────────────────── */
.login-wrap{width:100%;max-width:380px;position:relative;z-index:1}

/* ── Brand ─────────────────────────────────────────────── */
.login-brand{text-align:center;margin-bottom:2rem}
.brand-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:.6rem}
.login-logo{font-size:2rem;font-weight:700;letter-spacing:.15em;color:var(--blue);text-transform:uppercase}
.login-tagline{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5}

/* ── Card ──────────────────────────────────────────────── */
.login-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:2rem;box-shadow:var(--shadow-lg);
}

/* ── Alert ─────────────────────────────────────────────── */
.alert-err{
  background:rgba(231,76,60,0.12);border:1px solid var(--red);
  color:var(--red);border-radius:8px;padding:.7rem .9rem;
  font-size:12px;margin-bottom:1.2rem;
  display:flex;align-items:center;gap:8px;
}

/* ── Form ──────────────────────────────────────────────── */
.form-group{margin-bottom:1.1rem}
.form-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:block}
.input-wrap{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.input-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;display:flex;transition:color .15s}
.input-eye:hover{color:var(--text)}
.form-input{
  width:100%;background:var(--surface2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  padding:10px 14px;font-family:var(--font);font-size:14px;
  outline:none;transition:border-color .15s;
}
.form-input.with-icon{padding-left:38px}
.form-input.with-eye{padding-right:36px}
.form-input:focus{border-color:var(--blue)}
.form-input::placeholder{color:var(--muted)}

/* ── Submit ─────────────────────────────────────────────── */
.btn-submit{
  width:100%;background:var(--blue-dim);color:var(--blue);
  border:1px solid var(--blue);border-radius:8px;
  padding:11px;font-family:var(--font);font-size:14px;font-weight:600;
  cursor:pointer;transition:all .15s;margin-top:.5rem;
}
.btn-submit:hover{background:var(--blue);color:#fff}

/* ── Footer ─────────────────────────────────────────────── */
.login-foot{text-align:center;font-size:11px;color:var(--muted);margin-top:1.5rem}

/* ── Theme toggle ───────────────────────────────────────── */
.theme-btn{
  position:fixed;top:1rem;right:1rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:6px 10px;cursor:pointer;
  color:var(--muted);font-family:var(--font);font-size:11px;
  display:flex;align-items:center;gap:5px;transition:all .15s;
  z-index:10;
}
.theme-btn:hover{border-color:var(--amber);color:var(--amber)}