/* =====================================================================
   Dystopia Ventas — variables, tipografías y reset.
   Base: css/base.css de dystopia-seguimiento (que a su vez replica la
   paleta de Dystopia). El tema claro conserva esos hex tal cual.
   Tema: data-theme en <html>, "light" (por defecto) o "dark".
   ORDEN DE CARGA (no cambiarlo): base, layout, componentes, responsive.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@500;600;700;800&display=swap');

/* Tokens comunes a los dos temas */
:root{
  --radius-lg:14px; --radius:12px; --radius-sm:8px;
  --font-mono:'Manrope',var(--font-sans);
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  /* Color fijo por cliente (= cuenta de la agencia), mismo que en Dystopia. */
  --c-liam:#D9A441; --c-agus:#9B7EDE; --c-teo:#2FA99B; --c-mauro:#E0687A; --c-lucas:#5E8FD9;

  /* Escala tipográfica: página > sección > tarjeta > cuerpo > metadata > micro-label */
  --fs-page:24px; --fs-section:18px; --fs-card:15px; --fs-body:13px; --fs-meta:12px; --fs-micro:11px;
  --fs-kpi:26px; --fs-kpi-lg:32px;
  /* Espaciado en múltiplos de 4px */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --row-h:40px; --control-h:36px; --control-h-sm:28px;
}

/* ===== TEMA OSCURO (solo por el toggle: data-theme="dark") ===== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0F1117; --bg-alt:#151821; --surface:#181B24; --surface-2:#1F2330;
  --border:#2A2F3C; --border-soft:#232733;
  --text:#E4E7EE; --text-dim:#A3ABBA; --text-faint:#6E7688;
  --accent:#6366F1; --accent-hover:#4F46E5; --accent-soft:rgba(99,102,241,.14); --accent-line:rgba(99,102,241,.45);
  --ink:#F3F4F6;
  --cyan:#2DD4BF; --danger:#F0686C; --danger-soft:rgba(240,104,108,.14); --success:#22C55E; --success-soft:rgba(34,197,94,.14);
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 6px 20px rgba(0,0,0,.45);
  --scroll-thumb:#2E3442;
  --thead-bg:#1B1E28;
}

/* ===== TEMA CLARO (por defecto; = paleta de Seguimiento, hex por hex) ===== */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F6F8; --bg-alt:#FFFFFF; --surface:#FFFFFF; --surface-2:#F3F4F7;
  --border:#E6E8EE; --border-soft:#EFF1F4;
  --text:#1F2430; --text-dim:#5B6473; --text-faint:#98A1AE;
  --accent:#4F46E5; --accent-hover:#4338CA; --accent-soft:rgba(79,70,229,.08); --accent-line:rgba(79,70,229,.32);
  --ink:#111827;
  --cyan:#0EA5A4; --danger:#E5484D; --danger-soft:rgba(229,72,77,.10); --success:#16A34A; --success-soft:rgba(22,163,74,.10);
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md:0 6px 20px rgba(16,24,40,.08);
  --scroll-thumb:#D7DEE3;
  --thead-bg:#FAFBFC;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:var(--accent-soft);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:8px;border:2px solid var(--bg);}
::-webkit-scrollbar-track{background:transparent;}
[hidden]{display:none !important;}