/* Brújula Financiera — tokens de diseño para la versión independiente (claro y oscuro) */
[hidden] { display: none !important; }
:root {
  --font-anthropic-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-anthropic-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cds-font-size-caption: 0.8125rem;
  --cds-font-size-body: 0.9375rem;
  --cds-font-size-heading: 1.0625rem;
  --cds-font-size-title: 1.75rem;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 16px; --cds-gap-lg: 24px; --cds-gap-xl: 32px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 20px; --cds-pad-xl: 28px;
  --cds-radius: 10px;
  --cds-dur-slow: 320ms;
  --cds-ease-out: cubic-bezier(.2, .7, .2, 1);

  --color-bg: #f7f6f2;
  --color-panel: #ffffff;
  --color-fg: #1f1e1b;
  --color-fg-muted: #6b6860;
  --color-border-line: #e2dfd6;
  --color-ok: #1e7f4f;
  --color-warn: #a96b00;
  --color-bad: #c0392b;
  --cds-border: #d9d5ca;
  --cds-text-secondary: #6b6860;
  --cds-surface-popover: #ffffff;
  --cds-shadow-popover: 0 6px 24px rgba(20, 18, 12, .14);
  --cds-chart-axis: #b9b4a7;
  --cds-chart-grid: #ebe8df;
  --cds-chart-muted: #c9c5ba;
  --cds-chart-reference: #8b877c;
  --cds-chart-status-critical: #c0392b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #1a1917; --color-panel: #23221f; --color-fg: #ecebe6; --color-fg-muted: #a6a398; --color-border-line: #3a3833;
    --color-ok: #4cc38a; --color-warn: #e0a83a; --color-bad: #f0796b;
    --cds-border: #45423c; --cds-text-secondary: #a6a398; --cds-surface-popover: #2b2a26; --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .5);
    --cds-chart-axis: #5d5a52; --cds-chart-grid: #2f2d29; --cds-chart-muted: #55524a; --cds-chart-reference: #9a968b; --cds-chart-status-critical: #f0796b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #1a1917; --color-panel: #23221f; --color-fg: #ecebe6; --color-fg-muted: #a6a398; --color-border-line: #3a3833;
  --color-ok: #4cc38a; --color-warn: #e0a83a; --color-bad: #f0796b;
  --cds-border: #45423c; --cds-text-secondary: #a6a398; --cds-surface-popover: #2b2a26; --cds-shadow-popover: 0 6px 24px rgba(0, 0, 0, .5);
  --cds-chart-axis: #5d5a52; --cds-chart-grid: #2f2d29; --cds-chart-muted: #55524a; --cds-chart-reference: #9a968b; --cds-chart-status-critical: #f0796b;
  color-scheme: dark;
}
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); }
body { padding: 24px 16px 48px; font-family: var(--font-anthropic-sans); -webkit-text-size-adjust: 100%; }
.bec { max-width: 1280px; margin: 0 auto; }
.dash-skeleton { color: transparent !important; background: linear-gradient(90deg, var(--color-border-line), var(--color-panel), var(--color-border-line)); background-size: 200% 100%; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) { .dash-skeleton { animation: bf-sk 1.4s linear infinite; } }
@keyframes bf-sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.bf-foot { max-width: 1280px; margin: 40px auto 0; font-size: var(--cds-font-size-caption); color: var(--color-fg-muted); border-top: 1px solid var(--color-border-line); padding-top: 12px; }