/* ══════════════════════════════════════════════════════════════
   BASE.CSS — Variables, reset, tipografía
   ══════════════════════════════════════════════════════════════ */

:root {
  --bg:       #f1f5f9;
  --surface:  #ffffff;
  --card:     #ffffff;
  --border:   #cbd5e1;
  --accent:   #dc2626;
  --accent2:  #ea580c;
  --green:    #16a34a;
  --blue:     #2563eb;
  --text:     #0f172a;
  --muted:    #64748b;
  --input-bg: #f8fafc;
  --purple:   #7c3aed;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
}


/* ── Modo oscuro ── */
body.dark-mode {
  --bg:       #0a0e1a;
  --surface:  #111827;
  --card:     #1a2236;
  --border:   #1f2d45;
  --accent:   #e8382e;
  --accent2:  #f97316;
  --green:    #22c55e;
  --blue:     #60a5fa;
  --text:     #e2e8f0;
  --muted:    #64748b;
  --input-bg: #0d1524;
  --purple:   #a78bfa;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Tipografía utilitaria ── */
.mono { font-family: 'Space Mono', monospace; }
.mono-label {
  font-family: 'Space Mono', monospace;
  font-size: .65rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-bottom: .4rem;
}

/* ── Animaciones ── */
@keyframes pulse   { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes fadeIn  { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideIn { from{transform:translateX(400px)} to{transform:translateX(0)} }

/* ── Tema oscuro: pantallas de login ── */
body.dark-mode .screen { background: var(--bg); }
body.dark-mode .screen-box { background: var(--card); border-color: var(--border); }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
  background: var(--input-bg); color: var(--text); border-color: var(--border);
}