/* ============================================================
   BASE — variables, reset, tipografía, tema
   ============================================================ */

:root {
  /* Tema oscuro (por defecto) */
  --bg:        #0A0D0B;
  --bg-2:      #0E120F;
  --surface:   rgba(20, 26, 22, 0.62);
  --surface-s: #141A16;
  --raised:    #1A211C;
  --line:      rgba(198, 224, 190, 0.15);
  --line-2:    rgba(198, 224, 190, 0.22);

  --ink:       #E9EFE7;
  --ink-2:     #A2B29C;
  --ink-3:     #6E7C6A;

  --acc:       #8FD14F;
  --acc-soft:  rgba(143, 209, 79, 0.12);
  --acc-line:  rgba(143, 209, 79, 0.32);
  --wood:      #D9A05B;
  --wood-soft: rgba(217, 160, 91, 0.12);
  --alert:     #E0664B;
  --alert-soft:rgba(224, 102, 75, 0.12);

  --grid-line: rgba(198, 224, 190, 0.055);
  --grid-dot:  rgba(143, 209, 79, 0.14);
  --glow-a:    rgba(60, 120, 55, 0.30);
  --glow-b:    rgba(120, 100, 45, 0.18);

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.3), 0 24px 64px -20px rgba(0,0,0,.75);

  /* Tipografía */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  /* Métrica */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --gap:  clamp(14px, 3.2vw, 20px);
  --shell: 1080px;
  --pad-x: clamp(16px, 4vw, 32px);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t:    .22s var(--ease);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #F6F5F0;
  --bg-2:      #EFEEE7;
  --surface:   #FFFFFFCC;
  --surface-s: #FFFFFF;
  --raised:    #FAF9F4;
  --line:      rgba(30, 45, 28, 0.12);
  --line-2:    rgba(30, 45, 28, 0.20);

  --ink:       #161D17;
  --ink-2:     #4E5B4B;
  --ink-3:     #7C8878;

  --acc:       #3F7D2E;
  --acc-soft:  rgba(63, 125, 46, 0.10);
  --acc-line:  rgba(63, 125, 46, 0.30);
  --wood:      #9A6425;
  --wood-soft: rgba(154, 100, 37, 0.10);
  --alert:     #B03A22;
  --alert-soft:rgba(176, 58, 34, 0.10);

  --grid-line: rgba(30, 45, 28, 0.055);
  --grid-dot:  rgba(63, 125, 46, 0.16);
  --glow-a:    rgba(120, 180, 100, 0.22);
  --glow-b:    rgba(200, 165, 105, 0.20);

  --shadow:    0 1px 2px rgba(30,45,28,.06), 0 10px 28px -14px rgba(30,45,28,.24);
  --shadow-lg: 0 2px 6px rgba(30,45,28,.07), 0 24px 56px -24px rgba(30,45,28,.30);

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 118px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--acc-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Números siempre en mono tabular: es la firma visual del informe técnico */
.num b, .tot__val, .stat dd span, .chip, .jgrid td, .jgrid tfoot th,
.entry__val, .entry__detail, .kv b, code, pre, .gauge__ticks {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }