:root {
  /* Base — tema claro */
  --mp-bg: #e4e9ef;
  --mp-surface: #ffffff;
  --mp-surface-2: #f3f5f8;
  --mp-surface-3: #eef1f5;
  --mp-border: #c8d0da;
  --mp-border-light: #dde3ea;
  --mp-text: #1a2332;
  --mp-text-muted: #5c6778;
  --mp-accent: #0078d7;
  --mp-accent-soft: rgba(0, 120, 215, 0.12);
  --mp-accent-gasto: #d92d20;
  --mp-hover-bg: rgba(0, 0, 0, 0.04);
  --mp-hover-bg-strong: rgba(0, 0, 0, 0.07);
  --mp-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);

  /* Chrome (header, nav) */
  --mp-header-bg: #ffffff;
  --mp-header-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.05);
  --mp-header-text: #1a2332;
  --mp-header-muted: #5c6778;
  --mp-nav-bg: #ffffff;
  --mp-nav-active: #0078d7;
  --mp-nav-active-bg: rgba(0, 120, 215, 0.12);

  --mp-sidebar-w: 240px;
  --mp-header-h: 56px;
  --mp-bottom-nav-h: 75px;
  --mp-gap: 8px;
}

@media (min-width: 900px) {
  :root {
    --mp-bg: #eef1f6;
    --mp-gap: 12px;
    --mp-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  }
}