/* ============================================================
   ZeroSignal · modo noche (verde oscuro). Redefine los tokens
   del diseño bajo html[data-theme="dark"] + retoques de contraste.
   ============================================================ */
html[data-theme="dark"] {
  --bg: #182620;
  --cream: #182620;
  --cream-2: #1e2e26;
  --surface: #243730;
  --surface-2: #1e2e26;
  --soil: #36453d;
  --text: #e8eee9;
  --subtitle: #b4c2b9;
  --meta: #94a49a;
  --green-ink: #f0f5f1;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  color-scheme: dark;
}

/* foregrounds que eran claros sobre fondos de marca (hay que fijarlos) */
html[data-theme="dark"] .btn--green { color: #f4faf6; }
html[data-theme="dark"] .btn--gold { color: #18241e; }
html[data-theme="dark"] .btn--ghost { color: var(--text); border-color: var(--line-strong); }

/* header */
html[data-theme="dark"] .zs-header { background: rgba(16, 24, 20, 0.82); border-bottom-color: rgba(255, 255, 255, 0.08); }

/* tarjetas / paneles / lista */
html[data-theme="dark"] .rcard,
html[data-theme="dark"] .acard,
html[data-theme="dark"] .ccard,
html[data-theme="dark"] .mr,
html[data-theme="dark"] .mini-route,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .pcard,
html[data-theme="dark"] .repcard { background: var(--surface); }

/* pill del tipo de actividad */
html[data-theme="dark"] .rcard .cat,
html[data-theme="dark"] .mr-b .k { background: rgba(255, 255, 255, 0.08); color: var(--text); }

/* placeholders de foto (sin imagen) */
html[data-theme="dark"] .photo { background: #2a3b32; }

/* búsqueda / filtros / chips / segmentos */
html[data-theme="dark"] .ms-search,
html[data-theme="dark"] .bar-search,
html[data-theme="dark"] .fdrop-btn,
html[data-theme="dark"] .fdrop-pop,
html[data-theme="dark"] .seg,
html[data-theme="dark"] .viewer-tabs,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .fchip,
html[data-theme="dark"] .esearch { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
html[data-theme="dark"] input { color: var(--text); }
html[data-theme="dark"] input::placeholder { color: var(--meta); }

/* fondo del mapa Leaflet mientras cargan teselas */
html[data-theme="dark"] .leaflet-container { background: #182620; }
html[data-theme="dark"] .map-center .map-context { background: rgba(20, 30, 24, 0.92); color: var(--text); }

/* popup del marcador: el wrapper de Leaflet es blanco por defecto y en noche
   los tokens de texto pasan a claro → título invisible. Tematizar el popup. */
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .lpop a { color: var(--gold); }
html[data-theme="dark"] .leaflet-popup-close-button { color: var(--meta); }
/* icono del tipo: recolorear a gris claro para que se vea sobre el popup oscuro */
html[data-theme="dark"] .lpop .c .ci { filter: brightness(0) invert(0.45); }

/* select "Ordenar" de la agenda en modo noche */
html[data-theme="dark"] #sortSel { background-color: var(--surface); color: var(--text); border-color: var(--line-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8eee9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html[data-theme="dark"] #sortSel option { background: var(--surface); color: var(--text); }

/* "Ver todas" y flechas de paginación legibles en oscuro */
html[data-theme="dark"] .see-all { color: var(--gold); border-bottom-color: var(--gold); }
html[data-theme="dark"] .zs-pg { background: var(--surface); color: var(--text); border-color: var(--line-strong); }

/* ---------- toggle día/noche (deslizante) ---------- */
.zs-theme-sw { flex: 0 0 auto; border: 0; background: none; padding: 0; cursor: pointer; }
.zt-track {
  position: relative; display: inline-flex; align-items: center;
  width: 54px; height: 28px; border-radius: 999px;
  background: var(--surface-2); border: 1.4px solid var(--line-strong); transition: background .2s;
}
.zt-thumb {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .22s ease, background .2s;
}
[aria-checked="true"] .zt-thumb { left: 28px; background: var(--gold); }
.zt-ic { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--meta); }
.zt-ic svg { width: 14px; height: 14px; }
.zt-sun { left: 7px; }
.zt-moon { right: 7px; }
[aria-checked="false"] .zt-sun { color: var(--gold-strong); }
[aria-checked="true"] .zt-moon { color: var(--gold); }