/* ============================================================
   tokens.css — Sistema de diseño del Planificador Municipal
   Mar Chiquita
   ============================================================ */

:root {
  /* Esquema de color nativo (scrollbars, inputs del navegador, etc.) */
  color-scheme: light;

  /* ── Marca ───────────────────────────────────────────── */
  --brand-700:#0f3863;
  --brand-600:#1a4a7a;     /* azul institucional */
  --brand-500:#2563a8;
  --brand-400:#3a82c4;
  --brand-100:#dbeafe;
  --brand-50:#eff6ff;

  /* ── Superficies ─────────────────────────────────────── */
  --surface-0:#ffffff;
  --surface-1:#f8fafc;
  --surface-2:#f1f5f9;
  --surface-3:#e2e8f0;
  --surface-elevated:#ffffff;

  /* ── Texto ───────────────────────────────────────────── */
  --text-1:#0f172a;
  --text-2:#334155;
  --text-3:#64748b;
  --text-4:#94a3b8;
  --text-on-brand:#ffffff;
  --text-link:var(--brand-600);

  /* ── Bordes ──────────────────────────────────────────── */
  --border-1:#e2e8f0;
  --border-2:#cbd5e1;
  --border-strong:#94a3b8;

  /* ── Estados semánticos ──────────────────────────────── */
  --color-success-bg:#d1fae5;
  --color-success-soft:#ecfdf5;
  --color-success-fg:#065f46;
  --color-success-strong:#047857;

  --color-warning-bg:#fef3c7;
  --color-warning-soft:#fff7ed;
  --color-warning-fg:#92400e;
  --color-warning-strong:#c2410c;

  --color-danger-bg:#fee2e2;
  --color-danger-soft:#fef2f2;
  --color-danger-fg:#b91c1c;
  --color-danger-strong:#dc2626;

  --color-info-bg:#e0f2fe;
  --color-info-soft:#f0f9ff;
  --color-info-fg:#075985;
  --color-info-strong:#0369a1;

  --color-neutral-bg:#f1f5f9;
  --color-neutral-fg:#475569;

  --color-blue-bg:#dbeafe;
  --color-blue-fg:#1e40af;

  --color-violet-bg:#ede9fe;
  --color-violet-fg:#5b21b6;

  /* ── Tipos de evento (colores por tipo) ──────────────── */
  --type-municipal:#0f766e;
  --type-privado:#475569;
  --type-fiesta:#16a34a;
  --type-festival:#c026d3;
  --type-patrio:#2563eb;
  --type-aniv:#d97706;
  --type-inauguracion:#dc2626;
  --type-recorrida:#7c3aed;
  --type-visita:#0891b2;
  --type-gira:#db2777;
  --type-reunion:#4f46e5;
  --type-feriado:#9333ea;
  --type-trasladable:#ea580c;
  --type-custom:#78716c;

  /* ── Visibilidad de eventos (scope) ──────────────────── */
  --scope-publico-fg:#059669;
  --scope-publico-bg:#ecfdf5;
  --scope-municipal-fg:#2563eb;
  --scope-municipal-bg:#eff6ff;
  --scope-compartido-fg:#d97706;
  --scope-compartido-bg:#fff7ed;
  --scope-area-fg:#64748b;
  --scope-area-bg:#f8fafc;
  --scope-area-externa-fg:#475569;
  --scope-area-externa-bg:#f1f5f9;

  /* ── Espaciado escala 4 ──────────────────────────────── */
  --space-1:4px; --space-2:8px; --space-3:12px;
  --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:32px; --space-8:48px;

  /* ── Radios ──────────────────────────────────────────── */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px;
  --radius-lg:16px; --radius-xl:20px; --radius-pill:999px;

  /* ── Sombras ─────────────────────────────────────────── */
  --shadow-1:0 1px 2px rgba(15,23,42,.05);
  --shadow-2:0 1px 3px rgba(15,23,42,.08);
  --shadow-3:0 4px 16px rgba(15,23,42,.09);
  --shadow-4:0 8px 32px rgba(15,23,42,.14);
  --shadow-focus:0 0 0 3px rgba(26,74,122,.18);

  /* ── Tipografía ──────────────────────────────────────── */
  --font-sans:'DM Sans', system-ui, -apple-system, sans-serif;
  --font-serif:'DM Serif Display', Georgia, serif;
  --fs-xs:11px; --fs-sm:12px; --fs-md:13px; --fs-lg:14px;
  --fs-xl:16px; --fs-2xl:20px; --fs-3xl:24px; --fs-display:32px;

  /* ── Layout ──────────────────────────────────────────── */
  --sidebar-w:240px;
  --header-h:60px;
  --bottom-nav-h:64px;

  /* ── Aliases legados (para no romper estilos viejos) ── */
  --blue:var(--brand-600);
  --blue-mid:var(--brand-500);
  --blue-light:var(--brand-100);
  --gray-50:var(--surface-1);
  --gray-100:var(--surface-2);
  --gray-200:var(--surface-3);
  --gray-300:#cbd5e1;
  --gray-400:var(--text-4);
  --gray-500:var(--text-3);
  --gray-700:var(--text-2);
  --gray-900:var(--text-1);
  --shadow-sm:var(--shadow-2);
}

/* ── Dark mode (preferencia del sistema) ──────────────── */
@media (prefers-color-scheme: dark) {
  :root.theme-auto, :root.theme-dark {
    color-scheme: dark;
    --brand-700:#1f4f80;
    --brand-600:#2563a8;
    --brand-500:#3a82c4;
    --brand-100:#1e3a5f;
    --brand-50:#15273d;

    --surface-0:#0f172a;
    --surface-1:#111c30;
    --surface-2:#1a2640;
    --surface-3:#243150;
    --surface-elevated:#1a2640;

    --text-1:#f8fafc;
    --text-2:#e2e8f0;
    --text-3:#cbd5e1;
    --text-4:#94a3b8;

    --border-1:#243150;
    --border-2:#334155;
    --border-strong:#475569;

    --color-success-bg:#064e3b;
    --color-success-soft:#022c22;
    --color-success-fg:#a7f3d0;
    --color-success-strong:#10b981;

    --color-warning-bg:#451a03;
    --color-warning-soft:#1c0f01;
    --color-warning-fg:#fcd34d;
    --color-warning-strong:#f59e0b;

    --color-danger-bg:#450a0a;
    --color-danger-soft:#1c0606;
    --color-danger-fg:#fca5a5;
    --color-danger-strong:#ef4444;

    --color-info-bg:#0c2d4d;
    --color-info-soft:#06182b;
    --color-info-fg:#bae6fd;
    --color-info-strong:#38bdf8;

    --color-neutral-bg:#1a2640;
    --color-neutral-fg:#cbd5e1;

    --color-blue-bg:#172554;
    --color-blue-fg:#bfdbfe;

    --color-violet-bg:#2e1065;
    --color-violet-fg:#ddd6fe;

    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 3px rgba(0,0,0,.45);
    --shadow-3:0 4px 16px rgba(0,0,0,.5);
    --shadow-4:0 8px 32px rgba(0,0,0,.6);
  }
}

:root.theme-dark {
  color-scheme: dark;
  /* Superficies */
  --surface-0:#0f172a;
  --surface-1:#111c30;
  --surface-2:#1a2640;
  --surface-3:#243150;
  --surface-elevated:#1a2640;
  /* Texto */
  --text-1:#f8fafc;
  --text-2:#e2e8f0;
  --text-3:#cbd5e1;
  --text-4:#94a3b8;
  /* Bordes */
  --border-1:#243150;
  --border-2:#334155;
  --border-strong:#475569;
  /* Marca */
  --brand-700:#1f4f80;
  --brand-600:#2563a8;
  --brand-500:#3a82c4;
  --brand-400:#5294d4;
  --brand-100:#1e3a5f;
  --brand-50:#15273d;
  /* Semánticos */
  --color-success-bg:#064e3b;
  --color-success-soft:#022c22;
  --color-success-fg:#a7f3d0;
  --color-success-strong:#10b981;
  --color-warning-bg:#451a03;
  --color-warning-soft:#1c0f01;
  --color-warning-fg:#fcd34d;
  --color-warning-strong:#f59e0b;
  --color-danger-bg:#450a0a;
  --color-danger-soft:#1c0606;
  --color-danger-fg:#fca5a5;
  --color-danger-strong:#ef4444;
  --color-info-bg:#0c2d4d;
  --color-info-soft:#06182b;
  --color-info-fg:#bae6fd;
  --color-info-strong:#38bdf8;
  --color-neutral-bg:#1a2640;
  --color-neutral-fg:#cbd5e1;
  --color-blue-bg:#172554;
  --color-blue-fg:#bfdbfe;
  --color-violet-bg:#2e1065;
  --color-violet-fg:#ddd6fe;
  /* Sombras */
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 3px rgba(0,0,0,.45);
  --shadow-3:0 4px 16px rgba(0,0,0,.5);
  --shadow-4:0 8px 32px rgba(0,0,0,.6);
  --shadow-focus:0 0 0 3px rgba(58,130,196,.3);
}

/* ── Utilidades de badges semánticos ──────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-xs); font-weight:700;
  padding:2px 8px; border-radius:var(--radius-pill);
  border:1px solid transparent; line-height:1.4;
}
.pill-success { background:var(--color-success-bg); color:var(--color-success-fg); border-color:transparent; }
.pill-warning { background:var(--color-warning-bg); color:var(--color-warning-fg); }
.pill-danger  { background:var(--color-danger-bg);  color:var(--color-danger-fg); }
.pill-info    { background:var(--color-info-bg);    color:var(--color-info-fg); }
.pill-neutral { background:var(--color-neutral-bg); color:var(--color-neutral-fg); }
.pill-brand   { background:var(--brand-100);        color:var(--brand-600); }
.pill-blue    { background:var(--color-blue-bg);    color:var(--color-blue-fg); }
.pill-violet  { background:var(--color-violet-bg);  color:var(--color-violet-fg); }

/* ── Utilidades de surface ────────────────────────────── */
.surface-0 { background:var(--surface-0); }
.surface-1 { background:var(--surface-1); }
.surface-2 { background:var(--surface-2); }

/* ── Tarjeta de entidad unificada ─────────────────────── */
.entity-card {
  background:var(--surface-0);
  border-radius:var(--radius-lg);
  border:1px solid var(--border-1);
  padding:16px 20px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
}
.entity-card-row {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ── Foco visible accesible ───────────────────────────── */
:focus-visible {
  outline:none;
  box-shadow:var(--shadow-focus);
  border-radius:var(--radius-xs);
}

/* ── Solo para lectores de pantalla ───────────────────── */
.sr-only {
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ── Saltar al contenido (accesibilidad de teclado) ───── */
.skip-link {
  position:absolute; top:-48px; left:8px; z-index:1000;
  background:var(--brand-700,#1a4a7a); color:#fff;
  padding:10px 16px; border-radius:var(--radius-md);
  font-size:var(--fs-sm); font-weight:600; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top:8px; box-shadow:var(--shadow-focus);
}

/* ── Reducir motion para usuarios que lo prefieren ────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Estados vacíos ilustrados ────────────────────────── */
.empty-state-v2 {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-3); padding:var(--space-7) var(--space-4);
  color:var(--text-3); text-align:center;
}
.empty-state-v2 .es-illu {
  width:88px; height:88px; border-radius:var(--radius-pill);
  background:radial-gradient(circle at 30% 30%, var(--brand-100), var(--surface-2));
  display:flex; align-items:center; justify-content:center;
  font-size:36px; color:var(--brand-600);
  box-shadow:var(--shadow-2);
}
.empty-state-v2 .es-title {
  font-family:var(--font-serif); font-size:var(--fs-2xl); color:var(--text-1);
}
.empty-state-v2 .es-text { font-size:var(--fs-md); max-width:380px; }
.empty-state-v2 .es-cta {
  margin-top:var(--space-2);
  background:var(--brand-600); color:var(--text-on-brand);
  border:none; border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-5);
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-lg);
  cursor:pointer; transition:background .15s;
}
.empty-state-v2 .es-cta:hover { background:var(--brand-700); }

/* ── Skeleton de carga ────────────────────────────────── */
@keyframes skel-shimmer {
  0% { background-position:-200px 0; }
  100% { background-position:calc(200px + 100%) 0; }
}
.skel {
  background:linear-gradient(90deg, var(--surface-2) 0px, var(--surface-1) 40px, var(--surface-2) 80px);
  background-size:200px 100%;
  border-radius:var(--radius-sm);
  animation:skel-shimmer 1.4s infinite linear;
  color:transparent;
}

/* ── Nav badge ────────────────────────────────────────── */
.nav-badge {
  margin-left:auto;
  background:var(--color-warning-strong); color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  padding:3px 8px; border-radius:var(--radius-pill);
  min-width:18px; text-align:center;
}
.nav-badge.is-danger { background:var(--color-danger-strong); }
.nav-badge[hidden] { display:none !important; }

/* ── Sidebar sections ─────────────────────────────────── */
.sidebar-section {
  padding:var(--space-2) 0;
  border-bottom:1px solid var(--border-1);
  margin:0 var(--space-2);
}
.sidebar-section:last-of-type { border-bottom:none; }
.sidebar-section-title {
  font-size:10px; font-weight:800; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.7px;
  padding:var(--space-2) var(--space-4) var(--space-1);
}

/* ── Header user menu ────────────────────────────────── */
.header-user-wrap { position:relative; }
.header-user-btn {
  display:flex; align-items:center; gap:var(--space-2);
  background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md);
  padding:6px 10px 6px 6px; cursor:pointer;
  font-family:var(--font-sans);
}
.header-user-btn:hover { background:rgba(255,255,255,.18); }
.header-user-avatar {
  width:30px; height:30px; border-radius:var(--radius-pill);
  background:#fff; color:var(--brand-600);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; text-transform:uppercase;
}
.header-user-info { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; gap:1px; min-width:0; max-width:180px; }
.header-user-name { font-size:var(--fs-md); font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.header-user-rol  { font-size:var(--fs-xs); color:rgba(255,255,255,.7); white-space:nowrap; }
.header-user-chev { color:rgba(255,255,255,.6); font-size:12px; transition:transform .15s; }
.header-user-btn[aria-expanded="true"] .header-user-chev { transform:rotate(180deg); }
.header-user-menu {
  position:absolute; right:0; top:calc(100% + 8px);
  min-width:260px; background:var(--surface-elevated); color:var(--text-1);
  border-radius:var(--radius-md); border:1px solid var(--border-1);
  box-shadow:var(--shadow-3); z-index:60; overflow:hidden;
}
.header-user-menu[hidden] { display:none; }
.header-user-meta {
  padding:var(--space-3) var(--space-4);
  background:var(--surface-1); border-bottom:1px solid var(--border-1);
  font-size:var(--fs-sm); color:var(--text-3);
}
.header-user-meta strong { color:var(--text-1); font-size:var(--fs-lg); display:block; margin-bottom:2px; }
.header-user-area { font-size:var(--fs-xs); color:var(--text-3); margin-top:4px; }
.header-user-item {
  display:flex; align-items:center; gap:8px;
  padding:var(--space-3) var(--space-4);
  font-size:var(--fs-md); color:var(--text-2); text-decoration:none;
  font-weight:600; cursor:pointer;
}
.header-user-item:hover { background:var(--surface-1); color:var(--brand-600); }

/* ── FAB universal (escritorio + mobile) ─────────────── */
.fab-universal {
  position:fixed; right:24px; bottom:24px; z-index:80;
}
.fab-universal-btn {
  width:56px; height:56px; border-radius:var(--radius-pill);
  border:none; background:var(--brand-600); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; cursor:pointer;
  box-shadow:0 10px 28px rgba(26,74,122,.34), 0 2px 6px rgba(15,23,42,.18);
  transition:transform .15s, box-shadow .15s, background .15s;
}
.fab-universal-btn:hover { transform:translateY(-2px); background:var(--brand-700); }
.fab-universal-btn:active { transform:translateY(0); }
.fab-universal-menu {
  position:absolute; right:0; bottom:64px;
  background:var(--surface-elevated); border:1px solid var(--border-1);
  border-radius:var(--radius-md); box-shadow:var(--shadow-3);
  padding:6px; min-width:220px;
}
.fab-universal-menu[hidden] { display:none; }
.fab-universal-item {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:transparent; color:var(--text-2);
  border:none; border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-md); font-weight:600;
  text-align:left; cursor:pointer;
}
.fab-universal-item:hover { background:var(--surface-1); color:var(--brand-600); }
.fab-universal-item i { font-size:18px; color:var(--brand-600); }

@media(max-width:768px){
  .fab-universal { right:14px; bottom:calc(82px + env(safe-area-inset-bottom)); }
}

/* ── Bottom sheet "Más" (mobile) ──────────────────────── */
.mas-sheet-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.4);
  z-index:90; backdrop-filter:blur(2px);
  animation:fadein .15s ease-out;
}
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
.mas-sheet {
  position:fixed; left:0; right:0; bottom:0;
  background:var(--surface-elevated); color:var(--text-1);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-4);
  padding:var(--space-2) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index:91;
  animation:slideup .2s ease-out;
  max-height:80vh; overflow-y:auto;
}
@keyframes slideup { from { transform:translateY(100%); } to { transform:translateY(0); } }
.mas-sheet-handle {
  width:38px; height:4px; border-radius:var(--radius-pill);
  background:var(--border-2); margin:6px auto 12px;
}
.mas-sheet-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-3) var(--space-3);
}
.mas-sheet-head h2 {
  font-family:var(--font-serif); font-size:var(--fs-2xl);
  margin:0; color:var(--text-1);
}
.mas-sheet-close {
  width:38px; height:38px; border-radius:var(--radius-pill);
  border:none; background:var(--surface-2); color:var(--text-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.mas-sheet-body {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:var(--space-2);
}
.mas-sheet-item {
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:var(--space-4) var(--space-2);
  background:var(--surface-1); border:1px solid var(--border-1);
  border-radius:var(--radius-md); cursor:pointer;
  font-family:var(--font-sans); font-size:var(--fs-md); font-weight:600;
  color:var(--text-2);
  min-height:80px;
}
.mas-sheet-item:hover { border-color:var(--brand-600); background:var(--surface-2); }
.mas-sheet-item i { font-size:22px; color:var(--brand-600); }
.mas-sheet-item .nav-badge {
  position:absolute; top:6px; right:8px; margin:0;
}
.mas-sheet-item-label {
  text-align:center; line-height:1.2;
}

/* ── KPI cards (dashboard) ────────────────────────────── */
.kpi-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:var(--space-3); margin-bottom:var(--space-5);
}
.kpi-card {
  background:var(--surface-0); border:1px solid var(--border-1);
  border-radius:var(--radius-md); padding:var(--space-4);
  display:flex; flex-direction:column; gap:var(--space-2);
  box-shadow:var(--shadow-2); transition:box-shadow .15s, transform .15s;
}
.kpi-card:hover { box-shadow:var(--shadow-3); transform:translateY(-1px); }
.kpi-icon {
  width:36px; height:36px; border-radius:var(--radius-sm);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--brand-100); color:var(--brand-600); font-size:18px;
}
.kpi-icon.danger  { background:var(--color-danger-bg);  color:var(--color-danger-fg); }
.kpi-icon.warning { background:var(--color-warning-bg); color:var(--color-warning-fg); }
.kpi-icon.success { background:var(--color-success-bg); color:var(--color-success-fg); }
.kpi-icon.info    { background:var(--color-info-bg);    color:var(--color-info-fg); }
.kpi-label { font-size:var(--fs-xs); color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.kpi-value { font-family:var(--font-serif); font-size:var(--fs-display); color:var(--text-1); line-height:1; }
.kpi-meta { font-size:var(--fs-sm); color:var(--text-3); }
.kpi-card.is-action { cursor:pointer; }
.kpi-card.is-action:hover { border-color:var(--brand-600); }

/* ── Dashboard bandejas/próximos ──────────────────────── */
.dashboard-bandejas {
  display:grid; grid-template-columns:1fr; gap:var(--space-4);
}
@media(min-width:1100px) {
  .dashboard-bandejas { grid-template-columns:1fr 1fr; }
}
.dash-block {
  background:var(--surface-0); border:1px solid var(--border-1);
  border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-2);
}
.dash-block-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-1);
}
.dash-block-head h2 {
  font-family:var(--font-serif); font-size:var(--fs-xl); margin:0; color:var(--text-1);
  display:inline-flex; align-items:center; gap:8px;
}
.dash-block-head h2 i { color:var(--brand-600); }
.dash-btn-link {
  background:transparent; border:none; color:var(--brand-600);
  font-family:var(--font-sans); font-size:var(--fs-md); font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.dash-block-body { padding:var(--space-2); }

.dash-ev {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3); border-radius:var(--radius-sm);
  cursor:pointer; transition:background .15s;
  position:relative;
}
.dash-ev:hover { background:var(--surface-1); }
.dash-ev + .dash-ev { border-top:1px solid var(--border-1); }
.dash-ev-date {
  background:var(--brand-100); color:var(--brand-600);
  border-radius:var(--radius-sm); padding:6px 10px; min-width:54px; text-align:center;
}
.dash-ev-day { font-family:var(--font-serif); font-size:22px; line-height:1; font-weight:700; }
.dash-ev-mon { font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.dash-ev-body { flex:1; min-width:0; }
.dash-ev-name { font-size:var(--fs-lg); font-weight:600; color:var(--text-1); }
.dash-ev-meta { font-size:var(--fs-sm); color:var(--text-3); margin-top:2px; display:flex; flex-wrap:wrap; gap:6px; }
.dash-ev-scope {
  width:4px; height:36px; border-radius:var(--radius-pill);
  background:var(--scope, var(--brand-600));
}

/* ── Dark mode: overrides de elementos con colores hardcodeados ──────────
   Se aplican cuando :root tiene la clase theme-dark (toggle manual),
   independientemente de la preferencia del sistema operativo.
   ──────────────────────────────────────────────────────────────────────── */

/* Formularios */
:root.theme-dark .form-control,
:root.theme-dark .form-select {
  background:var(--surface-1);
  color:var(--text-1);
  border-color:var(--border-2);
}
:root.theme-dark .form-control::placeholder { color:var(--text-4); }
:root.theme-dark .form-control:focus,
:root.theme-dark .form-select:focus {
  background:var(--surface-0);
  border-color:var(--brand-500);
  box-shadow:var(--shadow-focus);
}
:root.theme-dark .form-check-input:not(:checked) {
  background-color:var(--surface-2);
  border-color:var(--border-2);
}

/* Sidebar */
:root.theme-dark #sidebar {
  background:var(--surface-0);
  border-right-color:var(--border-1);
}
:root.theme-dark .sidebar-legend {
  background:var(--surface-2);
  border-color:var(--border-1);
}
:root.theme-dark .side-nav-item { color:var(--text-2); }
:root.theme-dark .side-nav-item:hover { background:var(--surface-2); }
:root.theme-dark .side-nav-item.active {
  background:var(--brand-100);
  color:var(--brand-400);
}

/* Modales */
:root.theme-dark .modal-content { background:var(--surface-0); }
:root.theme-dark .modal-body    { background:var(--surface-0); }
:root.theme-dark .modal-footer  { background:var(--surface-0); border-top-color:var(--border-1); }

/* Scrollbar del cuerpo del modal en modo oscuro (evita que quede blanco/invisible) */
:root.theme-dark .modal-body { scrollbar-color: var(--border-strong) var(--surface-1); }
:root.theme-dark .modal-body::-webkit-scrollbar { width:10px; height:10px; }
:root.theme-dark .modal-body::-webkit-scrollbar-track { background:var(--surface-1); border-radius:8px; }
:root.theme-dark .modal-body::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; border:2px solid var(--surface-1); }
:root.theme-dark .modal-body::-webkit-scrollbar-thumb:hover { background:var(--text-3); }
:root.theme-dark .btn-secondary-mch {
  background:var(--surface-2);
  color:var(--text-1);
  border:1px solid var(--border-2);
}
:root.theme-dark .btn-secondary-mch:hover { background:var(--surface-3); }

/* Barra de carga rápida (intendencia / prensa) */
:root.theme-dark .ev-quick-bar {
  background:var(--surface-2);
  border-color:var(--border-1);
}
:root.theme-dark .ev-modo-switch { background:var(--surface-3); }
:root.theme-dark .ev-modo-btn { color:var(--text-3); }
:root.theme-dark .ev-modo-btn.is-active {
  background:var(--surface-0);
  color:var(--brand-400);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
:root.theme-dark .ev-quick-vis-label { color:var(--text-3); }
:root.theme-dark .quick-pill {
  background:var(--surface-2);
  color:var(--text-1);
  border-color:var(--border-2);
}
:root.theme-dark .quick-pill.active {
  background:var(--brand-600);
  border-color:var(--brand-600);
  color:#fff;
}

/* Calendario */
:root.theme-dark .cal-grid { background:var(--surface-0); border-color:var(--border-1); }
:root.theme-dark .cal-grid.cal-grid-agenda { background:var(--surface-1); }
:root.theme-dark .cal-cell { border-right-color:var(--border-1); border-bottom-color:var(--border-1); }
:root.theme-dark .cal-cell:hover { background:var(--surface-2); }
:root.theme-dark .cal-cell.today { background:var(--brand-50); }
:root.theme-dark .cal-cell.selected { background:var(--brand-100) !important; }
:root.theme-dark .cal-cell.other-month { background:rgba(15,23,42,.3); }
:root.theme-dark .cal-day-num { color:var(--text-2); }
:root.theme-dark .cal-side-panel {
  background:var(--surface-0);
  border-color:var(--border-1);
}
:root.theme-dark .cal-ev-item {
  border-color:var(--border-1);
}
:root.theme-dark .cal-ev-item:hover { border-color:var(--brand-500); }
:root.theme-dark .cal-ev-name { color:var(--text-1); }
:root.theme-dark .cal-ev-meta { color:var(--text-3); }

/* Chips de evento por visibilidad (scope): el --scope-bg claro queda
   ilegible en oscuro. Lo reemplazamos por un tinte translúcido del color
   de acento sobre la superficie oscura, y aseguramos texto claro. */
:root.theme-dark .scope-publico      { --scope-bg:rgba(16,185,129,.16); --scope-soft:rgba(16,185,129,.22); }
:root.theme-dark .scope-municipal    { --scope-bg:rgba(59,130,246,.16); --scope-soft:rgba(59,130,246,.22); }
:root.theme-dark .scope-compartido   { --scope-bg:rgba(245,158,11,.16); --scope-soft:rgba(245,158,11,.22); }
:root.theme-dark .scope-area         { --scope-bg:rgba(148,163,184,.16); --scope-soft:rgba(148,163,184,.22); }
:root.theme-dark .scope-area-externa { --scope-bg:rgba(148,163,184,.20); --scope-soft:rgba(148,163,184,.26); }
:root.theme-dark .cal-mini-event   { color:var(--text-1); }
:root.theme-dark .cal-floating-card{ color:var(--text-1); }
:root.theme-dark .cal-time-title   { color:var(--text-1); }
:root.theme-dark .cal-time-meta    { color:var(--text-3); }
:root.theme-dark .cal-time-block   { box-shadow:0 2px 8px rgba(0,0,0,.45); }
:root.theme-dark .cal-btn-edit { background:var(--surface-2); color:var(--text-2); }
:root.theme-dark .cal-side-new-btn {
  border-color:var(--brand-500);
  color:var(--brand-400);
}
:root.theme-dark .cal-side-new-btn:hover { background:var(--brand-100); }
:root.theme-dark .cal-day-lane {
  background:var(--surface-0);
  border-color:var(--border-1);
}
:root.theme-dark .cal-hour-line { background:var(--border-1); }
:root.theme-dark .cal-agenda-day {
  background:var(--surface-0);
  border-color:var(--border-1);
}
:root.theme-dark .cal-agenda-day.active {
  border-color:var(--brand-500);
  background:var(--brand-50);
}
:root.theme-dark .cal-all-day-col {
  background:var(--surface-0);
  border-color:var(--border-1);
}
:root.theme-dark .cal-time-title { color:var(--text-1); }
:root.theme-dark .cal-agenda-empty {
  background:var(--surface-0);
  border-color:var(--border-1);
}

/* Navegación de período */
:root.theme-dark .cal-mode-toggle,
:root.theme-dark .cal-period-nav {
  background:var(--surface-0);
  border-color:var(--border-1);
}
:root.theme-dark .cal-mode-btn { color:var(--text-3); }
:root.theme-dark .cal-mode-btn.active { background:var(--brand-600); color:#fff; }
:root.theme-dark .cal-period-btn {
  background:var(--surface-2);
  color:var(--brand-400);
}
:root.theme-dark .cal-period-btn:hover { background:var(--brand-100); }
:root.theme-dark .cal-nav-btn {
  background:var(--surface-0);
  border-color:var(--border-1);
  color:var(--text-2);
}
:root.theme-dark .cal-nav-btn.active { background:var(--brand-600); color:#fff; }

/* Chips de filtro */
:root.theme-dark .chip {
  background:var(--surface-0);
  border-color:var(--border-2);
  color:var(--text-2);
}
:root.theme-dark .chip:hover { border-color:var(--brand-500); color:var(--brand-400); }
:root.theme-dark .chip.active { background:var(--brand-600); color:#fff; border-color:var(--brand-600); }

/* Cards de evento */
:root.theme-dark .ev-card { background:var(--surface-0); border-color:var(--border-1); }
:root.theme-dark .ev-card:hover { border-color:var(--border-2); }
:root.theme-dark .ev-name { color:var(--text-1); }
:root.theme-dark .ev-loc,
:root.theme-dark .ev-horario,
:root.theme-dark .ev-notas { color:var(--text-3); }
:root.theme-dark .ev-btn-edit { background:var(--surface-2); color:var(--text-2); }
:root.theme-dark .ev-obras-section { border-top-color:var(--border-1); }

/* Obras */
:root.theme-dark .obras-loc-card { background:var(--surface-0); border-color:var(--border-1); }
:root.theme-dark .obra-item:hover { background:var(--surface-2); }
:root.theme-dark .obra-item { border-bottom-color:var(--border-1); }
:root.theme-dark .obra-nombre { color:var(--text-1); }
:root.theme-dark .btn-edit-obra { background:var(--surface-2); color:var(--text-2); }
:root.theme-dark .obras-chips-selected {
  background:var(--surface-0);
  border-color:var(--border-2);
}
:root.theme-dark .obras-check-list { border-color:var(--border-2); }
:root.theme-dark .obras-check-item { border-bottom-color:var(--border-1); }
:root.theme-dark .obras-check-item label { color:var(--text-2); }

/* Mes heading */
:root.theme-dark .mes-heading { color:var(--brand-400); border-bottom-color:var(--brand-100); }
:root.theme-dark .mes-count { background:var(--brand-100); color:var(--brand-400); }
:root.theme-dark .mes-index-bar { background:var(--surface-1); border-bottom-color:var(--border-1); }
:root.theme-dark .mes-index-btn:hover { color:var(--brand-400); }
:root.theme-dark .mes-index-btn.activo { color:var(--brand-400); border-bottom-color:var(--brand-400); }

/* Vista toggle */
:root.theme-dark .btn-vista { background:var(--surface-2); border-color:var(--border-2); color:var(--text-3); }
:root.theme-dark .btn-vista.activo { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
:root.theme-dark .obras-vista-btn { background:var(--surface-2); border-color:var(--border-2); color:var(--text-3); }
:root.theme-dark .obras-vista-btn.activo { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }

/* Dashboard */
:root.theme-dark .kpi-card { background:var(--surface-0); border-color:var(--border-1); }
:root.theme-dark .kpi-card.is-action:hover { border-color:var(--brand-500); }
:root.theme-dark .dash-block { background:var(--surface-0); border-color:var(--border-1); }
:root.theme-dark .dash-block-head { border-bottom-color:var(--border-1); }
:root.theme-dark .dash-ev:hover { background:var(--surface-1); }
:root.theme-dark .dash-ev + .dash-ev { border-top-color:var(--border-1); }
:root.theme-dark .dash-ev-date { background:var(--brand-100); color:var(--brand-400); }

/* Header */
:root.theme-dark #app-header { background:var(--brand-700); }

/* Toast */
:root.theme-dark .mch-toast { background:var(--surface-elevated); color:var(--text-1); border:1px solid var(--border-2); }
:root.theme-dark .mch-toast-error { background:var(--color-danger-strong); color:#fff; border:none; }