*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#0279FF;--text:#0f1117;--muted:#6b7280;--border:#e5e7eb;--bg:#fff;--soft:#f8fafc;--r:10px;--green:#16a34a;--red:#dc2626}
/* color:var(--text) explícito en body — sin esto h1 hereda del default
   black y queda ilegible en dark mode (issue reportado 2026-05-09). */
body{font-family:'Inter',sans-serif;background:var(--soft);color:var(--text);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.wrap{width:100%;max-width:380px}
.logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:2.5rem}
.logo img{height:30px}
.logo-sep{width:1px;height:16px;background:var(--border)}
.logo-name{font-family:'Ubuntu',sans-serif;font-size:1rem;color:var(--muted)}
.card{background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:2.2rem 2rem}
h1{font-family:'Ubuntu',sans-serif;font-size:1.1rem;font-weight:500;margin-bottom:.2rem}
.sub{font-size:.875rem;color:var(--muted);margin-bottom:1.8rem}
.f{margin-bottom:1rem}
label{display:block;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
input{width:100%;padding:.68rem .9rem;border:1px solid var(--border);border-radius:var(--r);font-family:'Inter',sans-serif;font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s;color:var(--text)}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(2,121,255,.1)}
.btn{width:100%;margin-top:.4rem;padding:.78rem;background:var(--blue);color:#fff;border:none;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:.95rem;font-weight:500;cursor:pointer;transition:background .15s}
.btn:hover{background:color-mix(in srgb, var(--blue) 88%, black)}.btn:disabled{opacity:.6;cursor:not-allowed}
.err{display:none;background:var(--surface-danger-bg);border:1px solid var(--surface-danger-bd);color:#c62828;border-radius:var(--r);padding:.6rem .9rem;font-size:.875rem;margin-bottom:.9rem}
.err.show{display:block}
.ok{display:none;background:var(--surface-success-bg);border:1px solid var(--surface-success-bd);color:var(--surface-success-fg-strong);border-radius:var(--r);padding:.6rem .9rem;font-size:.875rem;margin-bottom:.9rem}
.ok.show{display:block}
.foot{text-align:center;margin-top:1.4rem;font-size:.78rem;color:var(--muted)}
.link{color:var(--blue);cursor:pointer;font-size:.84rem;text-align:center;margin-top:1rem;display:block}
.link:hover{text-decoration:underline}
.remember{margin-top:-.2rem;margin-bottom:.2rem}
.chk-label{display:flex;align-items:center;gap:.45rem;cursor:pointer;font-size:.84rem;color:var(--muted);text-transform:none;letter-spacing:0}
.chk-label input[type=checkbox]{width:15px;height:15px;accent-color:var(--blue);cursor:pointer;margin:0}
.panel{display:none}
.panel.active{display:block}

/* ─── Theme toggle (esquina superior derecha) ──────────────────────────
   Replica los estilos de nav.css `.theme-toggle` pero standalone para
   que login.php no necesite cargar nav.css. Misma lógica de visibilidad:
   sun en dark, moon en light. */
.theme-toggle{position:fixed;top:1rem;right:1rem;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.theme-toggle:hover{background:var(--soft);color:var(--text);border-color:var(--text)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .theme-ico{display:none}
html[data-theme="light"] .theme-toggle .theme-ico-moon{display:block}
html[data-theme="dark"]  .theme-toggle .theme-ico-sun{display:block}
html:not([data-theme]) .theme-toggle .theme-ico-moon{display:block}


/* ── Dark theme overrides — keep in sync with /app/assets/app.css ─────── */
html[data-theme="dark"] {
  --blue: #3B95FF;
  --blue-soft: #86C6FF;
  --text: #f1f5f9;
  --text-alt: #abcdef;
  --text-dim: #cbd5e1;
  --slate-dark: #e2e8f0;
  --muted: #94a3b8;
  --border: #1f2937;
  --bg: #0f172a;
  --soft: #1e293b;
  --hov: #1f2a3c;
  --green: #29ff7b;
  --red: #f87171;
  --amber: #fbbf24;
}

/* En dark, el input hereda fondo blanco del browser default y el texto
   var(--text)=#f1f5f9 queda blanco-sobre-blanco (issue 2026-05-09).
   Forzamos fondo dark + borde tenue para que el texto escrito sea
   legible y los inputs se sientan parte de la card oscura. */
html[data-theme="dark"] input{
  background:var(--bg);
  color:var(--text);
  border-color:var(--border);
}
html[data-theme="dark"] input::placeholder{color:var(--muted);opacity:.7}
html[data-theme="dark"] input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,149,255,.18)}