/* Modo oscuro de VoyViajando: se activa con <html data-tema="oscuro"> (ver js/tema.js) */

html[data-tema="oscuro"] {
  --vv-texto: #e6edf3;
  --vv-texto-suave: #a9b7c6;
  --vv-sombra: 0 4px 14px rgba(0, 0, 0, 0.45);
  --vv-sombra-hover: 0 8px 22px rgba(0, 0, 0, 0.6);
  --vv-superficie: #1b2531;
  --vv-superficie-2: #232f3d;
  --vv-borde: #344355;
  --bs-body-color: #e6edf3;
  --bs-body-bg: #121a23;
  --bs-border-color: #344355;
  --bs-secondary-color: #a9b7c6;
}

html[data-tema="oscuro"] body {
  background-color: #121a23 !important;
  color: var(--vv-texto);
}

/* Menú y pie: el mismo azul pero más apagado */
html[data-tema="oscuro"] .bg-primary,
html[data-tema="oscuro"] .dropdown-menu.bg-primary {
  background-color: #0b3d55 !important;
}

/* Fondos claros de las secciones */
html[data-tema="oscuro"] .bg-light,
html[data-tema="oscuro"] .bg-white,
html[data-tema="oscuro"] .bg-gradient-primary-to-secondary-light {
  background-color: #121a23 !important;
  background-image: none !important;
}

html[data-tema="oscuro"] .text-dark,
html[data-tema="oscuro"] .text-black,
html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3,
html[data-tema="oscuro"] h4, html[data-tema="oscuro"] h5, html[data-tema="oscuro"] h6 {
  color: var(--vv-texto) !important;
}

html[data-tema="oscuro"] .text-muted,
html[data-tema="oscuro"] .lead,
html[data-tema="oscuro"] .text-secondary {
  color: var(--vv-texto-suave) !important;
}

html[data-tema="oscuro"] a:not([class]) {
  color: #6cc4ec;
}

/* Paneles, tarjetas y cajas */
html[data-tema="oscuro"] .panel-vv,
html[data-tema="oscuro"] .tarjeta-formulario {
  background: rgba(20, 28, 38, 0.94);
}

html[data-tema="oscuro"] .tarjeta-vv,
html[data-tema="oscuro"] .caja-vv,
html[data-tema="oscuro"] .parada-ruta,
html[data-tema="oscuro"] .lugar-card,
html[data-tema="oscuro"] .map-wrapper,
html[data-tema="oscuro"] .guide,
html[data-tema="oscuro"] .card,
html[data-tema="oscuro"] .list-group-item,
html[data-tema="oscuro"] .content {
  background-color: var(--vv-superficie) !important;
  color: var(--vv-texto);
  border-color: var(--vv-borde);
}

html[data-tema="oscuro"] .content {
  background-color: rgba(20, 28, 38, 0.92) !important;
}

html[data-tema="oscuro"] .lugar-cuerpo p,
html[data-tema="oscuro"] .lugar-valoracion,
html[data-tema="oscuro"] .tarjeta-vv-cuerpo p {
  color: var(--vv-texto-suave);
}

html[data-tema="oscuro"] .tarjeta-vv-img,
html[data-tema="oscuro"] .lugar-cabecera {
  background: var(--vv-superficie-2);
}

html[data-tema="oscuro"] .opinion-vv {
  border-color: var(--vv-borde);
}

/* Botones y pastillas con fondo blanco */
html[data-tema="oscuro"] .btn-vv-borde,
html[data-tema="oscuro"] .filtro-vv:not(.activo),
html[data-tema="oscuro"] .btn-icono-vv,
html[data-tema="oscuro"] .lugar-acciones .btn-mapa,
html[data-tema="oscuro"] .lugar-acciones .btn-valorar,
html[data-tema="oscuro"] .otras-comunidades a,
html[data-tema="oscuro"] .lista-comunidades a {
  background: transparent;
  color: #6cc4ec;
  border-color: #3d8fb4;
}

html[data-tema="oscuro"] .lugar-acciones .btn-valorar {
  color: #f5b54a;
  border-color: #b7791f;
}

html[data-tema="oscuro"] .btn-vv-borde:hover,
html[data-tema="oscuro"] .filtro-vv:hover,
html[data-tema="oscuro"] .lugar-acciones .btn-mapa:hover,
html[data-tema="oscuro"] .otras-comunidades a:hover,
html[data-tema="oscuro"] .lista-comunidades a:hover {
  background: var(--vv-azul);
  color: #fff;
}

html[data-tema="oscuro"] .etiqueta-comunidad {
  background: rgba(20, 28, 38, 0.9);
  color: #6cc4ec;
}

html[data-tema="oscuro"] .etiqueta-categoria {
  background: rgba(255, 140, 0, 0.18);
  color: #ffb74d;
}

/* Formularios */
html[data-tema="oscuro"] .form-control,
html[data-tema="oscuro"] .form-select,
html[data-tema="oscuro"] .buscador-vv input,
html[data-tema="oscuro"] .buscador-nav input,
html[data-tema="oscuro"] .swal2-input,
html[data-tema="oscuro"] .swal2-textarea {
  background-color: var(--vv-superficie-2) !important;
  color: var(--vv-texto) !important;
  border-color: var(--vv-borde) !important;
}

html[data-tema="oscuro"] .form-control::placeholder,
html[data-tema="oscuro"] .buscador-nav input::placeholder {
  color: #8494a5;
}

html[data-tema="oscuro"] .sugerencias-nav {
  background: var(--vv-superficie);
}

/* Tablas */
html[data-tema="oscuro"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--vv-texto);
  color: var(--vv-texto);
  border-color: var(--vv-borde);
}

/* Ventanas de SweetAlert */
html[data-tema="oscuro"] .swal2-popup {
  background: var(--vv-superficie);
  color: var(--vv-texto);
}

html[data-tema="oscuro"] .swal2-title,
html[data-tema="oscuro"] .swal2-html-container {
  color: var(--vv-texto);
}

/* Mapas: teselas oscurecidas y ventanas emergentes oscuras */
html[data-tema="oscuro"] .leaflet-tile-pane {
  filter: brightness(0.75) invert(1) contrast(0.9) hue-rotate(200deg) saturate(0.4) brightness(0.9);
}

html[data-tema="oscuro"] .leaflet-container {
  background: #1b2531;
}

html[data-tema="oscuro"] .leaflet-popup-content-wrapper,
html[data-tema="oscuro"] .leaflet-popup-tip,
html[data-tema="oscuro"] .leaflet-bar a,
html[data-tema="oscuro"] .leaflet-control-attribution {
  background: var(--vv-superficie);
  color: var(--vv-texto);
}

html[data-tema="oscuro"] .leaflet-control-attribution a,
html[data-tema="oscuro"] .leaflet-popup-content a {
  color: #6cc4ec;
}

/* Mapa SVG de comunidades */
html[data-tema="oscuro"] .map-container svg {
  filter: brightness(0.92);
}

/* Carrusel y migas */
html[data-tema="oscuro"] .dropdown-menu {
  background-color: var(--vv-superficie);
}

html[data-tema="oscuro"] .border-top,
html[data-tema="oscuro"] hr {
  border-color: var(--vv-borde) !important;
}

/* Secciones con el fondo claro puesto en línea (portada y mapa) */
html[data-tema="oscuro"] [style*="#eef4f7"] {
  background: #121a23 !important;
}

/* Botones "outline-dark" (p. ej. Favoritos / Iniciar sesión en la portada): en oscuro pasan a borde y texto claros */
html[data-tema="oscuro"] .btn-outline-dark {
  color: #e6edf3;
  border-color: rgba(230, 237, 243, 0.55);
  background-color: transparent;
}
html[data-tema="oscuro"] .btn-outline-dark:hover,
html[data-tema="oscuro"] .btn-outline-dark:focus,
html[data-tema="oscuro"] .btn-outline-dark:active {
  color: #111820;
  background-color: #e6edf3;
  border-color: #e6edf3;
}

/* Filtro por provincia */
html[data-tema="oscuro"] .filtros-provincia .filtro-vv { background: transparent; color: #ffb35c; }
html[data-tema="oscuro"] .filtros-provincia .filtro-vv.activo,
html[data-tema="oscuro"] .filtros-provincia .filtro-vv:hover { background: var(--vv-naranja); color: #111820; }
html[data-tema="oscuro"] .lugar-provincia { color: #ffb35c; }