/* ==========================================================================
   base.css — variables de tema, reset, controles de formulario, superficies
   glass compartidas y el toast global. Se carga primero.
   ========================================================================== */

:root {
  color-scheme: dark;
  --bg:#0f172a; --panel:#1e293b; --border:#334155; --muted:#94a3b8;
  --accent:#38bdf8; --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-radius: 16px;
  --glass-shadow: 0 20px 25px -5px rgba(0,0,0,.3), 0 8px 10px -6px rgba(0,0,0,.3);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display:none !important; }
body {
  margin:0; min-height:100vh; color:#e2e8f0;
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:#0b1120 linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%) fixed;
}

/* --- controles de formulario --- */
input, select, button {
  font:inherit; padding:8px 11px; border-radius:10px; color:inherit;
  border:1px solid rgba(255,255,255,.1); background:rgba(2,6,23,.55);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(56,189,248,.15); }
button { cursor:pointer; }
button:hover { border-color:rgba(255,255,255,.25); }
button.primary {
  background:linear-gradient(180deg,#38bdf8,#0ea5e9); color:#04222f; font-weight:650;
  border:1px solid rgba(255,255,255,.25); box-shadow:0 4px 14px rgba(56,189,248,.35);
}
button.primary:hover { box-shadow:0 6px 22px rgba(56,189,248,.55); }
button.danger { border-color:rgba(248,113,113,.5); color:#fecaca; background:rgba(248,113,113,.08); }
button.danger:hover { border-color:var(--err); box-shadow:0 0 16px rgba(248,113,113,.4); }

/* --- superficie glassmorphic compartida --- */
.glass-card, .panel, #loginView {
  background:var(--glass-bg);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--glass-radius);
  box-shadow:var(--glass-shadow);
}
.panel { padding:20px; margin-top:18px; }

/* --- toast (esquina inferior derecha) --- */
#toast { position:fixed; right:18px; bottom:18px; z-index:4000; display:flex; flex-direction:column; gap:10px; max-width:min(380px,calc(100vw - 36px)); }
#toast .tst {
  padding:13px 16px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background:var(--glass-bg); backdrop-filter:blur(12px); box-shadow:var(--glass-shadow);
  font-size:.86rem; line-height:1.4; animation:tst-in .25s ease-out;
}
#toast .tst.ok { border-color:rgba(74,222,128,.5); box-shadow:0 0 20px rgba(74,222,128,.22), var(--glass-shadow); }
#toast .tst.err { border-color:rgba(248,113,113,.5); box-shadow:0 0 20px rgba(248,113,113,.22), var(--glass-shadow); }
#toast .tst b { display:block; margin-bottom:2px; }
@keyframes tst-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }