/*
 * Modo oscuro de la página de Popayum (no aplica a los portales ni a los menús digitales).
 * Se activa con <html data-tema="oscuro">, que pone js/tema.js según lo que el usuario escogió
 * (queda guardado en su navegador). Cambia los tokens de styles.css y corrige los fondos claros fijos.
 */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #15110e;
  --superficie: #211b17;
  --tinta: #f2eae3;
  --tinta-suave: #b8aa9f;
  --borde: #3b312a;
  --acento: #e46a42;
  --acento-oscuro: #c2502e;
  --abierto: #4fc27f;
  --cerrado: #ff7a6e;
  --pronto: #e8ac4a;
  --sombra: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 20px rgba(0, 0, 0, .35);
}

/* Colores de categoría: los fondos pastel pasan a un tono oscuro del mismo color */
html[data-tema="oscuro"] [style*="--cat-fondo"],
html[data-tema="oscuro"] .lf,
html[data-tema="oscuro"] .seo-cabeza-cat {
  --cat-fondo: color-mix(in srgb, var(--cat, #c2502e) 26%, #211b17) !important;
}
/* La categoría "Todo/Todas" usa el color de la tinta: en oscuro se aclara */
html[data-tema="oscuro"] [style*="--cat:#2a211c"] { --cat: #8a7a6e !important; }

/* Avisos amarillos */
html[data-tema="oscuro"] .aviso,
html[data-tema="oscuro"] .nota-lugar.alerta { background: #3a2f14; color: #f3d58a; }

/* Controles con fondos claros fijos */
html[data-tema="oscuro"] .switch { background: #4a3f37; }
html[data-tema="oscuro"] .interruptor:has(input:checked) { background: color-mix(in srgb, var(--abierto) 18%, var(--superficie)); }
html[data-tema="oscuro"] .vistas { background: #2c241f; }
html[data-tema="oscuro"] .portada-sello { background: rgba(33, 27, 23, .85); }
html[data-tema="oscuro"] .portada-sello.con-logo { background: #fff; } /* los logos se ven mejor sobre blanco */
html[data-tema="oscuro"] .cerrar { background: rgba(33, 27, 23, .92); color: var(--tinta); }
html[data-tema="oscuro"] .reco-otra { background: var(--superficie); }
html[data-tema="oscuro"] .pastilla:hover,
html[data-tema="oscuro"] .accion:hover,
html[data-tema="oscuro"] .sede:hover { border-color: #5a4c42; }

/* Botones que usaban la tinta (oscura) de fondo con letra blanca: en oscuro van con el acento */
html[data-tema="oscuro"] .menu-pestanas .chip[aria-pressed="true"],
html[data-tema="oscuro"] .sedes-badge,
html[data-tema="oscuro"] .sede[aria-pressed="true"],
html[data-tema="oscuro"] .vistas-indicador,
html[data-tema="oscuro"] .vistas::before { background: var(--acento); border-color: var(--acento); color: #fff; }

/* Fichas de lugares y páginas de categorías */
html[data-tema="oscuro"] .seo-lugar-logo { background: #2c241f; }
html[data-tema="oscuro"] .lf-chip { background: var(--superficie); color: var(--tinta); }
html[data-tema="oscuro"] .seo-horario tr.hoy { background: color-mix(in srgb, var(--acento) 22%, var(--superficie)); }
html[data-tema="oscuro"] .legal-cabeza { background: color-mix(in srgb, var(--acento) 18%, var(--superficie)); }

/* Ofertas, Salchi-Fest y Arepa-Fest */
html[data-tema="oscuro"] .oferta-precios b { color: #ff7d8f; }
html[data-tema="oscuro"] .fest-sello { background: #3a2c4d; color: #d9c2ff; }
html[data-tema="oscuro"] .fest-cierre { background: #2c2236; }
html[data-tema="oscuro"] .af-sello,
html[data-tema="oscuro"] .af-precio { background: #3b2f12; color: #f3d58a; }
html[data-tema="oscuro"] .af-pronto { background: #2a2210; border-color: #8a6d1f; }
html[data-tema="oscuro"] .af-cierre { background: #2a2210; }
html[data-tema="oscuro"] .boton-historia.claro:hover { background: #2c241f; }

/* Mapa: los mosaicos se oscurecen para no deslumbrar */
html[data-tema="oscuro"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.6); }
html[data-tema="oscuro"] .leaflet-container { background: #1b1714; }
html[data-tema="oscuro"] .leaflet-popup-content-wrapper,
html[data-tema="oscuro"] .leaflet-popup-tip { background: var(--superficie); color: var(--tinta); }

/* ---------- Botón para cambiar de modo (abajo a la izquierda en todas las páginas) ---------- */
.tema-boton {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); cursor: pointer;
  transition: transform .15s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.tema-boton:hover { transform: translateY(-2px); }
.tema-boton:active { transform: scale(.94); }
.tema-boton:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.tema-boton svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema-boton .sol { display: none; }
html[data-tema="oscuro"] .tema-boton .sol { display: block; }
html[data-tema="oscuro"] .tema-boton .luna { display: none; }
@media print { .tema-boton { display: none; } }

/* Portadas de color: en oscuro, el mismo naranja pero más profundo */
html[data-tema="oscuro"] .portada-inicio,
html[data-tema="oscuro"] .historia-portada { background: #7a2f17; }
html[data-tema="oscuro"] .boton-inicio.principal { background: var(--superficie); color: #ffb08f; border-color: var(--superficie); }