/* ═══════════════════════════════════════
   SISTEMA DE DISEÑO — EM Automatización
   Base para todos los proyectos
   ═══════════════════════════════════════ */

:root {
  --bg:        #0a0e17;
  --s1:        #0f1520;
  --s2:        #131b2e;
  --s3:        #1a2438;
  --s4:        #1e2d45;
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.1);
  --text:      #e2e8f0;
  --muted:     #64748b;
  --label:     #94a3b8;
  --green:     #22c55e;
  --green-bg:  rgba(34,197,94,0.1);
  --green-b:   rgba(34,197,94,0.3);
  --red:       #ef4444;
  --red-bg:    rgba(239,68,68,0.1);
  --red-b:     rgba(239,68,68,0.3);
  --blue:      #3b82f6;
  --blue-bg:   rgba(59,130,246,0.1);
  --blue-b:    rgba(59,130,246,0.3);
  --amber:     #f59e0b;
  --amber-bg:  rgba(245,158,11,0.1);
  --amber-b:   rgba(245,158,11,0.3);
  --purple:    #8b5cf6;
  --purple-bg: rgba(139,92,246,0.1);
  --cyan:      #06b6d4;
  --cyan-bg:   rgba(6,182,212,0.1);
  --font:      'Inter', sans-serif;
  --mono:      'JetBrains Mono', monospace;
  --radius:    8px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Utilidades ── */
.hidden { display: none !important; }
.empty { text-align: center; padding: 28px 16px; color: var(--muted); font-size: 12px; }