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

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Paleta azul marino oscuro */
  --bg:    #0d1520;
  --bg2:   #111d2e;
  --bg3:   #162030;
  --bg4:   #1c2a3e;
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.05);

  /* Texto */
  --text:  #c9d9e8;
  --text2: #7a94b0;
  --text3: #4a6480;

  /* Acento dorado */
  --p1: #c8a000;
  --p2: #7c9885;
  --p3: #28666e;
  --p4: #e07060;
  --p5: #fedc97;

  /* Semáforo */
  --ok:   #5a9e6f;
  --warn: #c8a000;
  --err:  #e07060;
  --info: #3a7fa8;

  /* Tipografía */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-head: 'Bebas Neue', sans-serif;

  /* Layout */
  --sidebar-w:     240px;
  --sidebar-w-col: 58px;
  --topbar-h:      52px;
  --radius:    8px;
  --radius-sm: 4px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.7);
  --t: .18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg); color: var(--text);
  line-height: 1.5; min-height: 100vh; overflow-x: hidden;
}
a { color: var(--p2); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--p5); }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 { color: var(--text); font-weight: 600; line-height: 1.2; }
.mono    { font-family: var(--font-mono); }
.bebas   { font-family: var(--font-head); letter-spacing: 1px; }
.text-2  { color: var(--text2); }
.text-3  { color: var(--text3); }
.text-sm { font-size: .8125rem; }
.text-xs { font-size: .75rem; }

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

.hidden  { display: none !important; }
.flex    { display: flex; }
.flex-1  { flex: 1; }
.gap-2   { gap: .5rem; }
.gap-4   { gap: 1rem; }
.items-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.w-full  { width: 100%; }
.mt-4    { margin-top: 1rem; }
.mb-4    { margin-bottom: 1rem; }
.p-4     { padding: 1rem; }