:root {
  /* superficies */
  --bg: #F4F8F9;           /* fondo de página, neutro con sesgo verde-azul */
  --card: #FFFFFF;         /* tarjetas */
  --line: #DFE9EC;         /* bordes y divisores */
  --line-strong: #C9D9DE;  /* bordes de controles de formulario */

  /* texto */
  --ink: #0C1A20;          /* texto principal (16.6:1 sobre --bg) */
  --muted: #5C7078;        /* texto secundario (4.9:1 sobre --bg) */

  /* primario: teal */
  --pri: #0A7C88;          /* acción principal; texto blanco encima a 4.9:1 */
  --pri-hover: #086670;
  --pri-soft: #E0F3F5;     /* fondo suave del primario */
  --pri-soft-ink: #086670; /* texto sobre --pri-soft (5.8:1) */
  --pri-bright: #0E8C99;   /* sólo para superficies grandes o sin texto encima */
  --pri-ink: #FFFFFF;

  /* estados: siempre en pareja fondo suave + texto */
  --ok: #127E55;      --ok-soft: #EAF6F0;
  --warn: #A8520A;    --warn-soft: #FCEEDF;
  --danger: #B92C2C;  --danger-soft: #FCE9E9;

  /* barra lateral oscura */
  --side-bg: #0F1D24;
  --side-ink: #E6F1F3;
  --side-muted: #8FA8B2;                  /* 6.9:1 sobre --side-bg */
  --side-line: rgba(255, 255, 255, .08);
  --side-hover: rgba(255, 255, 255, .06);
  --side-active-bg: rgba(14, 140, 153, .22);
  --side-active: #6FE3EE;                 /* 11.4:1 sobre --side-bg */

  /* elevación */
  --sh: 0 1px 2px rgba(12, 26, 32, .06), 0 3px 10px rgba(12, 26, 32, .06);
  --sh-lg: 0 2px 4px rgba(12, 26, 32, .07), 0 12px 28px rgba(12, 26, 32, .10);

  /* métrica */
  --r: 9px;
  --r-sm: 6px;
  --side-w: 224px;

  /* gráficos: 7 series en ESTE orden + gris para "Otras" (ver §9) */
  --viz-1: #2A78D6; --viz-2: #EB6834; --viz-3: #1BAF7A; --viz-4: #EDA100;
  --viz-5: #E87BA4; --viz-6: #008300; --viz-7: #4A3AA7; --viz-other: #B3BFC4;

  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}