/* Tokens de tema que usan los tableros, con la paleta de Datacivis (claro y oscuro).
   Si la página carga datacivis-tema.css, los colores y tipografías salen de ese tema
   (--bg, --surface, --fg, --muted, --line, --grid, --bar, --font-body, --font-display). */
:root {
  --color-bg: #f2f5f9;
  --color-panel: #ffffff;
  --color-fg: #0c1a2e;
  --color-fg-muted: #4e617b;
  --color-border-line: #d3dce8;
  --color-ok: #0d8c7f;
  --color-warn: #b7791f;
  --color-bad: #c0392b;

  --font-anthropic-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-anthropic-serif: "Archivo", "Public Sans", system-ui, sans-serif;

  --cds-font-size-caption: 12.5px;
  --cds-font-size-body: 15px;
  --cds-font-size-heading: 19px;
  --cds-font-size-title: clamp(26px, 4vw, 36px);
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px;
  --cds-gap-sm: 8px;
  --cds-gap-md: 16px;
  --cds-gap-lg: 28px;
  --cds-pad-xs: 4px;
  --cds-pad-sm: 8px;
  --cds-pad-md: 12px;
  --cds-pad-lg: 20px;
  --cds-radius: 8px;
  --cds-border: #d3dce8;
  --cds-text-secondary: #4e617b;
  --cds-surface-popover: #ffffff;
  --cds-shadow-popover: 0 6px 24px rgba(12, 26, 46, .16);
  --cds-dur-slow: 400ms;
  --cds-chart-muted: #b4c0cf;
  --cds-chart-grid: #e3e8ef;
  --cds-chart-axis: #7d8ea6;
  --cds-chart-status-critical: #c0392b;

  --dl-c0: #0d8c7f;
  --dl-c1: #c9581d;
  --dl-c2: #2f5d8a;
  --dl-c3: #b8860b;
  --dl-c4: #7a4fa0;
  --dl-c5: #4fb3a5;
  --dl-c6: #a23b52;
  --dl-c7: #6b7c93;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a1626;
    --color-panel: #10213a;
    --color-fg: #eaf0f8;
    --color-fg-muted: #94a7c0;
    --color-border-line: #243a5a;
    --color-ok: #45d8c5;
    --color-warn: #f0b350;
    --color-bad: #ff7b6b;
    --cds-border: #243a5a;
    --cds-text-secondary: #94a7c0;
    --cds-surface-popover: #14243a;
    --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .45);
    --cds-chart-muted: #3d5270;
    --cds-chart-grid: #1d3150;
    --cds-chart-axis: #7d8ea6;
    --cds-chart-status-critical: #ff7b6b;
    --dl-c0: #45d8c5;
    --dl-c1: #ff8c42;
    --dl-c2: #7fb2e5;
    --dl-c3: #e8c15a;
    --dl-c4: #b896e0;
    --dl-c5: #8fe0d2;
    --dl-c6: #f08aa0;
    --dl-c7: #a9b8cc;
    color-scheme: dark;
  }
}

/* Enlace con el tema Datacivis (datacivis-tema.css): manda cuando está cargado */
html:root {
  --color-bg: var(--bg, #f2f5f9);
  --color-panel: var(--surface, #ffffff);
  --color-fg: var(--fg, #0c1a2e);
  --color-fg-muted: var(--muted, #4e617b);
  --color-border-line: var(--line, #d3dce8);
  --cds-border: var(--line, #d3dce8);
  --cds-text-secondary: var(--muted, #4e617b);
  --cds-chart-grid: var(--grid, #e3e8ef);
  --cds-surface-popover: var(--surface, #ffffff);
  --font-anthropic-sans: var(--font-body, "Public Sans", system-ui, sans-serif);
  --font-anthropic-serif: var(--font-display, "Archivo", system-ui, sans-serif);
  --dl-c0: var(--bar, #0d8c7f);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); }
.dl-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 14px var(--dash-gutter, 20px); font-size: 13px; }
.dl-bar a { color: var(--aqua, var(--color-ok)); text-decoration: none; font-weight: 600; }
.dl-bar span { color: var(--color-fg-muted); }
#dash-root { --dash-gutter: clamp(12px, 3vw, 32px); padding: 8px var(--dash-gutter) 48px; }
#dash-root[data-dash-state="loading"] { cursor: progress; }
.dl-foot { max-width: 1280px; margin: 0 auto; padding: 0 var(--dash-gutter, 20px) 40px; color: var(--color-fg-muted); font-size: 12.5px; }