/* ======================================================================
   TEMA OSCURO — "Medianoche"
   ======================================================================
   Se activa con el atributo html[data-theme="dark"] (ver
   partials/_theme-init.blade.php y partials/_theme-toggle.blade.php).

   El sitio no usa variables CSS en su hoja de estilos original (style.css
   tiene miles de líneas con colores fijos), así que en vez de reescribir
   esa base, este archivo sobreescribe puntualmente los componentes reales
   que se usan en las vistas públicas y de administración: encabezado,
   pie de página, tarjetas, formularios, tablas, menús y modales. La
   especificidad de `html[data-theme="dark"] selector` ya es mayor que la
   de las reglas originales, así que el orden de carga no importa.
   ====================================================================== */

html[data-theme="dark"] {
	/* Paleta "text / background / primary / secondary / accent" pedida
	   por el usuario. Mapeo: background/text tal cual; primary (gris
	   azulado claro) pasa a texto secundario; secondary (slate oscuro)
	   arma la escala de superficies/bordes; accent reemplaza el rojo de
	   marca solo en modo oscuro. */
	--tur-bg: #101318;
	--tur-bg-alt: #06080a;
	/* Escala de superficies recalculada para que se note al lado del
	   nuevo --tur-bg (antes coincidían en el mismo #101318 y las
	   tarjetas/botones de categoría quedaban invisibles sobre el fondo). */
	--tur-surface: #161b24;
	--tur-surface-2: #2c3241;
	--tur-surface-3: #343b4d;
	--tur-border: #394256;
	--tur-border-strong: #47516a;
	--tur-text: #e6ebee;
	--tur-text-muted: #b0bfca;
	--tur-text-faint: #545b62;
	--tur-accent: #7b7da7;
	--tur-accent-glow: rgba(123, 125, 167, 0.35);
	--tur-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
	--tur-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
	color-scheme: dark;
}

/* ---------------------------------------------------------------------
   Transición suave al cambiar de tema (solo en las superficies grandes,
   no en todo * — eso sería costoso y se ve nervioso).
------------------------------------------------------------------------ */
body,
#header,
#header.cloned,
#footer,
#dashboard,
.dashboard-content,
#titlebar,
.tarjeta,
.tarjetaFavorito,
.listing-item,
.category-small-box-alt,
.main-search-input,
.main-search-input-item {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ---------------------------------------------------------------------
   Base
------------------------------------------------------------------------ */
html[data-theme="dark"] body {
	background-color: var(--tur-bg);
	color: var(--tur-text);
}

html[data-theme="dark"] #wrapper {
	background-color: var(--tur-bg);
}
/* #dashboard ocupa como mínimo toda la altura de la pantalla: con el mismo
   tono del contenido (ver .dashboard-content) no queda un corte de color
   cuando la página es corta. */
html[data-theme="dark"] #dashboard {
	background-color: #12161b;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
	color: var(--tur-text);
}

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] li,
html[data-theme="dark"] label {
	color: inherit;
}

html[data-theme="dark"] .headline-with-separator {
	color: var(--tur-text);
}

/* Algunas secciones fijan su fondo con JS a partir de data-background-color
   (custom.js -> inlineCSS()), lo que queda como estilo inline y le gana a
   cualquier regla de clase. Solo un !important puede ganarle a eso. */
html[data-theme="dark"] section.fullwidth[data-background-color] {
	background-color: var(--tur-bg) !important;
}

html[data-theme="dark"] hr {
	border-color: var(--tur-border);
}

html[data-theme="dark"] ::selection {
	background: var(--tur-accent);
	color: #fff;
}

/* Scrollbar (WebKit) — sutil, a tono con la superficie oscura */
html[data-theme="dark"] ::-webkit-scrollbar-track {
	background: var(--tur-bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
	background: var(--tur-surface-3);
	border-radius: 8px;
}

/* ---------------------------------------------------------------------
   Header público y de administración
------------------------------------------------------------------------ */
html[data-theme="dark"] #header,
html[data-theme="dark"] #header.cloned {
	background-color: var(--tur-bg);
}

html[data-theme="dark"] #navigation.style-1 > ul > li > a {
	color: var(--tur-text);
}

html[data-theme="dark"] #navigation.style-1 > ul > li > a.current,
html[data-theme="dark"] #navigation.style-1 > ul > li:hover > a {
	color: var(--tur-accent);
}

html[data-theme="dark"] .hamburger-inner,
html[data-theme="dark"] .hamburger-inner::before,
html[data-theme="dark"] .hamburger-inner::after {
	background-color: var(--tur-text);
}

/* Menú móvil deslizante (mmenu) */
html[data-theme="dark"] .mm-menu {
	background: var(--tur-surface);
}
html[data-theme="dark"] .mm-menu,
html[data-theme="dark"] .mm-menu a,
html[data-theme="dark"] .mm-menu a:link,
html[data-theme="dark"] .mm-menu a:visited {
	color: var(--tur-text);
}
html[data-theme="dark"] .mm-panel {
	background: var(--tur-surface);
}

/* Menú de usuario / "Mi cuenta" / notificaciones */
html[data-theme="dark"] .user-menu ul,
html[data-theme="dark"] .tarjetaNotificacion,
html[data-theme="dark"] #language-menu {
	background: var(--tur-surface) !important;
	color: var(--tur-text);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .user-menu ul li a,
html[data-theme="dark"] #language-menu a {
	color: var(--tur-text);
}
html[data-theme="dark"] .user-menu ul li a:hover,
html[data-theme="dark"] #language-menu a:hover {
	background: var(--tur-surface-2);
}
html[data-theme="dark"] .tarjetaInicio {
	background-color: var(--tur-surface);
	border-color: var(--tur-border);
	color: var(--tur-text);
}
/* Selector de idioma: sin borde en oscuro (igual que en claro, donde solo
   se ve la sombra). */
html[data-theme="dark"] .lang-switcher-toggle {
	background-color: var(--tur-surface);
	border-color: transparent;
	color: var(--tur-text);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .lang-switcher-toggle .lang-switcher-globe {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .lang-switcher-chevron {
	color: var(--tur-text-muted) !important;
}
html[data-theme="dark"] #notificaciones-menu p {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .campanitaSinValoracion {
	color: var(--tur-text-muted) !important;
}

/* ---------------------------------------------------------------------
   Footer
------------------------------------------------------------------------ */
html[data-theme="dark"] #footer {
	background-color: var(--tur-bg-alt);
	border-top-color: var(--tur-border);
}
html[data-theme="dark"] #footer h4 {
	color: var(--tur-text);
}
html[data-theme="dark"] #footer a {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] #footer a:hover {
	color: var(--tur-text);
}
html[data-theme="dark"] .text-widget span {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .copyrights {
	color: var(--tur-text-faint);
	border-top-color: var(--tur-border);
}

/* ---------------------------------------------------------------------
   Tarjetas y listados (destinos, rutas, favoritos)
------------------------------------------------------------------------ */
html[data-theme="dark"] .tarjeta,
html[data-theme="dark"] .tarjetaFavorito,
html[data-theme="dark"] .listing-item,
html[data-theme="dark"] .listing-item-container,
html[data-theme="dark"] .category-small-box-alt,
html[data-theme="dark"] .main-search-input,
html[data-theme="dark"] .main-search-input-item {
	background-color: var(--tur-surface);
	color: var(--tur-text);
}

/* Un borde de 1px define el borde de estos contenedores en oscuro. Las
   tarjetas de destino y los botones de categoría quedan SIN borde (solo
   sombra) — ver el bloque siguiente. */
html[data-theme="dark"] .tarjeta,
html[data-theme="dark"] .tarjetaFavorito,
html[data-theme="dark"] .main-search-input {
	border: 1px solid var(--tur-border);
	box-shadow: var(--tur-shadow);
}

html[data-theme="dark"] .listing-item-container,
html[data-theme="dark"] .category-small-box-alt {
	border: none;
	box-shadow: var(--tur-shadow);
}

html[data-theme="dark"] .tarjeta:hover {
	border-color: var(--tur-border-strong);
	box-shadow: var(--tur-shadow-lg);
}

/* La tarjeta de destino (.listing-item-container) ya sube con un
   translate3d(0,-6px,0) al hover (definido en style.css); en oscuro
   se refuerza con una sombra y un borde más visibles para que la
   elevación se perciba de verdad. */
html[data-theme="dark"] .listing-item-container:hover {
	box-shadow: var(--tur-shadow-lg);
}

/* Sección de categorías: fondo #090b0e y botones con el fondo general
   del sitio (--tur-bg), es decir, los colores invertidos respecto del
   resto de las secciones. La sección fija su fondo con JS inline
   (data-background-color), por eso el !important y el selector con la
   misma especificidad que la regla genérica de section.fullwidth. El
   bloque de botones va después del de superficies de arriba a propósito
   (misma especificidad, gana el último). */
html[data-theme="dark"] section.fullwidth.tur-categorias-section[data-background-color] {
	background-color: #090b0e !important;
}
html[data-theme="dark"] .category-small-box-alt {
	background-color: var(--tur-bg);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html[data-theme="dark"] .category-small-box-alt:hover,
html[data-theme="dark"] .category-small-box-alt.is-active {
	box-shadow: var(--tur-shadow-lg);
}

html[data-theme="dark"] .category-small-box-alt h4 {
	color: var(--tur-text);
}

html[data-theme="dark"] .listing-item-content span,
html[data-theme="dark"] .listing-item-content h3 {
	color: var(--tur-text);
}

/* Variante "list-layout" (destinosMaps/eventosMaps, tarjetas en fila):
   style.css le fija texto oscuro (#333/#808080) con una regla más
   específica que la de arriba, pensada para su fondo claro original. */
html[data-theme="dark"] .listing-item-container.list-layout .listing-item-inner h3 {
	color: var(--tur-text);
}
html[data-theme="dark"] .listing-item-container.list-layout .listing-item-inner span {
	color: var(--tur-text-muted);
}

html[data-theme="dark"] .main-search-input-item {
	border-right-color: var(--tur-border);
}

/* Botón de geolocalizar (ícono de pin) del buscador bajo el mapa: fondo
   blanco fijo en el CSS original, pensado para ir sobre el buscador
   claro. */
html[data-theme="dark"] .main-search-input-item.location a {
	background: var(--tur-surface);
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .main-search-input-item.location a:hover {
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Formularios: inputs, selects, Chosen
------------------------------------------------------------------------ */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .main-search-input input {
	background-color: var(--tur-surface);
	border-color: var(--tur-border);
	color: var(--tur-text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
	color: var(--tur-text-faint);
}

html[data-theme="dark"] .chosen-container-single .chosen-single {
	background-color: var(--tur-surface);
	border-color: var(--tur-border);
	color: var(--tur-text);
}
html[data-theme="dark"] .chosen-container-single .chosen-single span,
html[data-theme="dark"] .chosen-container-single .chosen-default {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .chosen-container .chosen-drop {
	background-color: var(--tur-surface);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .chosen-container .chosen-results li {
	color: var(--tur-text);
}
html[data-theme="dark"] .chosen-container .chosen-results li.highlighted {
	background-color: var(--tur-accent);
	color: #fff;
}
html[data-theme="dark"] .chosen-container .chosen-search input {
	background-color: var(--tur-surface);
	border-color: var(--tur-border);
	color: var(--tur-text);
}

/* El buscador de rutas/destinos con Chosen tiene una "tapa de costura"
   blanca fija (.chosen-single:after, en style.css) pensada para fundir
   el borde inferior redondeado del dropdown con el fondo blanco del
   buscador original — en oscuro queda como una línea blanca suelta. */
html[data-theme="dark"] .main-search-input-item .chosen-single:after {
	background: var(--tur-surface);
}

/* ---------------------------------------------------------------------
   Botones: feedback táctil (hover, presión, foco)
------------------------------------------------------------------------ */

/* Botones primarios (rojo de marca, .button sin variante): en oscuro
   se les da una leve elevación al pasar el mouse y un "press" sutil al
   hacer click, para que la interacción se sienta más física. */
html[data-theme="dark"] button.button,
html[data-theme="dark"] a.button,
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="submit"] {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] button.button:not(.border):not(.gray):hover,
html[data-theme="dark"] a.button:not(.border):not(.gray):hover,
html[data-theme="dark"] input[type="button"]:hover,
html[data-theme="dark"] input[type="submit"]:hover {
	box-shadow: 0 6px 18px var(--tur-accent-glow);
	transform: translateY(-1px);
}
html[data-theme="dark"] button.button:not(.border):not(.gray):active,
html[data-theme="dark"] a.button:not(.border):not(.gray):active,
html[data-theme="dark"] input[type="button"]:active,
html[data-theme="dark"] input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px var(--tur-accent-glow);
}

/* Botones secundarios (los primarios ya usan el rojo de marca) */
html[data-theme="dark"] .button.border {
	border-color: var(--tur-border);
	color: var(--tur-text);
}
html[data-theme="dark"] .button.border:hover {
	background-color: var(--tur-surface-2);
	border-color: var(--tur-border-strong);
}
html[data-theme="dark"] .button.gray,
html[data-theme="dark"] .button.fullwidth.gray {
	background-color: var(--tur-surface-2);
	color: var(--tur-text);
}
html[data-theme="dark"] .button.gray:hover,
html[data-theme="dark"] .button.fullwidth.gray:hover {
	background-color: var(--tur-surface-3);
}

/* Foco visible por teclado: el sitio original no define ninguno, por
   lo que en oscuro (donde el foco del navegador por defecto es casi
   invisible) se agrega uno propio, a tono con la marca. */
html[data-theme="dark"] button.button:focus-visible,
html[data-theme="dark"] a.button:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] .js-theme-toggle:focus-visible,
html[data-theme="dark"] a:focus-visible {
	outline: 2px solid var(--tur-accent);
	outline-offset: 2px;
}

/* Foco en campos de texto: reemplaza el resplandor azul por defecto
   del navegador por uno a tono con la marca. */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
	border-color: var(--tur-accent);
	box-shadow: 0 0 0 3px var(--tur-accent-glow);
	outline: none;
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Dashboard: contenido, cabecera de sección, breadcrumbs
------------------------------------------------------------------------ */
/* El contenido del dashboard va un escalón más claro que el header y el
   sidebar (igual que en claro, donde el header es blanco y el contenido gris
   suave), para que se distinga dónde termina la cabecera. En vez de tocar
   cada componente, se redefinen las superficies solo dentro de
   .dashboard-content: tarjetas, tablas, formularios y cabeceras de sección
   suben un escalón con él y conservan su contraste relativo. El header
   (#101318) y el sidebar (#06080a) quedan con la paleta original. */
html[data-theme="dark"] .dashboard-content {
	--tur-surface: #171b23;
	--tur-surface-2: #101318;
	--tur-surface-3: #303849;
	--tur-border: #202632;
	background-color: #12161b;
}

/* Sombra bajo el header del dashboard (en claro la trae style.css; en
   oscuro esa sombra de 12% de opacidad no se ve sobre un fondo oscuro). */
html[data-theme="dark"] #header-container.dashboard #header {
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] #titlebar {
	background-color: var(--tur-surface);
}

/* Ficha de destino/evento/ruta: el título va sobre el fondo de página,
   no sobre una superficie de tarjeta (pidieron #000920, no #0d1836). */
html[data-theme="dark"] #titlebar.listing-titlebar {
	background-color: var(--tur-bg);
}

html[data-theme="dark"] #breadcrumbs,
html[data-theme="dark"] #breadcrumbs ul li a {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] #breadcrumbs ul li:last-child {
	color: var(--tur-text);
}

html[data-theme="dark"] .dashboard-responsive-nav-trigger {
	background-color: var(--tur-surface);
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Tablas (listados de dashboard y DataTables)
------------------------------------------------------------------------ */
html[data-theme="dark"] table {
	color: var(--tur-text);
}
html[data-theme="dark"] table.dataTable,
html[data-theme="dark"] table.dataTable tbody tr,
html[data-theme="dark"] table.dataTable thead th {
	background-color: var(--tur-surface);
	color: var(--tur-text);
	border-color: var(--tur-border) !important;
}
html[data-theme="dark"] table.dataTable tbody tr:hover {
	background-color: var(--tur-surface-2) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: var(--tur-accent) !important;
	border-color: var(--tur-accent) !important;
	color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input {
	background-color: var(--tur-surface-2);
	border-color: var(--tur-border);
	color: var(--tur-text);
}
html[data-theme="dark"] table.dataTable.table-striped tbody tr.odd {
	background-color: var(--tur-surface-2) !important;
}
/* Botón "Excel" (extensión Buttons de DataTables): blanco fijo por
   defecto en su tema bootstrap4. */
html[data-theme="dark"] .dt-buttons .dt-button,
html[data-theme="dark"] .dt-buttons .btn-secondary {
	background-color: var(--tur-surface-2);
	border-color: var(--tur-border);
	color: var(--tur-text);
}
html[data-theme="dark"] .dt-buttons .dt-button:hover {
	background-color: var(--tur-surface-3);
	color: var(--tur-text);
}

/* Paginación propia del sitio */
html[data-theme="dark"] .pagination li a,
html[data-theme="dark"] .pagination li span {
	background-color: var(--tur-surface);
	color: var(--tur-text);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .pagination li a:hover {
	background-color: var(--tur-surface-2);
}

/* ---------------------------------------------------------------------
   Modales y alertas (SweetAlert2)
------------------------------------------------------------------------ */
html[data-theme="dark"] .swal2-popup {
	background: var(--tur-surface);
	color: var(--tur-text);
}
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container {
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Reabrir preferencias de cookies (botón flotante 🍪)
------------------------------------------------------------------------ */
html[data-theme="dark"] #tc-reopen {
	background-color: var(--tur-surface);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* ---------------------------------------------------------------------
   Galería de imágenes (detalle de destino/evento/ruta)
------------------------------------------------------------------------ */
html[data-theme="dark"] .listing-slider {
	background-color: var(--tur-surface);
}

/* ---------------------------------------------------------------------
   Navegación por pestañas (Descripción / Ubicación / Valoraciones)
------------------------------------------------------------------------ */
html[data-theme="dark"] .listing-nav,
html[data-theme="dark"] .listing-nav-container.cloned.stick {
	background-color: var(--tur-bg);
	border-bottom-color: var(--tur-border);
}
html[data-theme="dark"] .listing-nav li a {
	color: var(--tur-text-muted);
	border-bottom-color: var(--tur-border);
}
html[data-theme="dark"] .listing-nav-container.cloned .listing-nav li:first-child a.active,
html[data-theme="dark"] .listing-nav-container.cloned .listing-nav li:first-child a:hover,
html[data-theme="dark"] .listing-nav li:first-child a,
html[data-theme="dark"] .listing-nav li a.active,
html[data-theme="dark"] .listing-nav li a:hover {
	color: var(--tur-accent);
	border-color: var(--tur-accent);
}
html[data-theme="dark"] .apartment-details {
	background: var(--tur-surface-2);
}

/* Pestañas genéricas (FAQ, Términos y condiciones) */
html[data-theme="dark"] .tab-content {
	background-color: var(--tur-surface);
	color: var(--tur-text);
}
html[data-theme="dark"] .tabs-nav li a {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .tab-reviews {
	color: var(--tur-text-faint);
}
html[data-theme="dark"] .tabs-nav li.active .tab-reviews {
	color: var(--tur-text);
}
html[data-theme="dark"] .tabs-nav li a:hover,
html[data-theme="dark"] .tabs-nav li.active a {
	border-color: var(--tur-accent);
	color: var(--tur-accent);
}

/* ---------------------------------------------------------------------
   Panel "Mis Publicaciones" / "Mis Rutas" del dashboard (dashboard-list-box)
------------------------------------------------------------------------ */
html[data-theme="dark"] .dashboard-list-box h4,
html[data-theme="dark"] .dashboard-list-box h4.gray,
html[data-theme="dark"] .dashboard-list-box ul,
html[data-theme="dark"] .dashboard-list-box-static {
	background-color: var(--tur-surface);
	color: var(--tur-text);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .dashboard-list-box ul li {
	border-bottom-color: var(--tur-border);
}
html[data-theme="dark"] .dashboard-list-box ul li:hover {
	background-color: var(--tur-surface-2);
}
html[data-theme="dark"] .dashboard-list-box ul li i.list-box-icon {
	background-color: var(--tur-surface-3);
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .dashboard-list-box ul li:hover i.list-box-icon {
	background-color: var(--tur-border);
}

/* ---------------------------------------------------------------------
   Contenedor del mapa: fondo oscuro mientras cargan los tiles de Google Maps
------------------------------------------------------------------------ */
html[data-theme="dark"] #map,
html[data-theme="dark"] #map-container {
	background-color: var(--tur-surface);
}

/* Controles de Leaflet (formularios de publicar/editar destino y crear
   ruta): por defecto son cajas blancas que desentonan sobre los tiles
   oscuros de CARTO (ver public/js/tur-map-theme.js). */
html[data-theme="dark"] .leaflet-bar a,
html[data-theme="dark"] .leaflet-control-attribution {
	background-color: var(--tur-surface);
	color: var(--tur-text-muted);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .leaflet-bar a:hover {
	background-color: var(--tur-surface-2);
	color: var(--tur-text);
}
html[data-theme="dark"] .leaflet-control-attribution a {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip {
	background-color: var(--tur-surface);
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Logo del dashboard: en pantallas <=1365px style.css le pone fondo
   blanco fijo (bloque "Small devices and browsers"), que queda mal
   sobre el header oscuro.
------------------------------------------------------------------------ */
html[data-theme="dark"] .dashboard #logo {
	background-color: #101318;
}

/* ---------------------------------------------------------------------
   Switch "Lista / Mapa" (home): estilos inline en index.blade.php,
   fondo blanco fijo que no reaccionaba al tema.
------------------------------------------------------------------------ */
html[data-theme="dark"] .vista-switch {
	background-color: var(--tur-surface-2);
}
html[data-theme="dark"] .vista-switch-btn {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] #vista-switch-wrapper.fijo,
html[data-theme="dark"] #vista-mapa.activo {
	background-color: var(--tur-bg);
}

/* ---------------------------------------------------------------------
   Controles flotantes sobre el mapa (buscar ciudad / categoría / cerca
   de mí): en home, destinosMaps y eventosMaps tienen el fondo blanco
   fijado por style="" inline, que gana a cualquier regla sin !important.
------------------------------------------------------------------------ */
html[data-theme="dark"] #input-ciudad,
html[data-theme="dark"] #filtro-categoria,
html[data-theme="dark"] #filtro-subcategoria,
html[data-theme="dark"] #btn-cerca-mi {
	background-color: var(--tur-surface-2) !important;
	color: var(--tur-text) !important;
}

/* ---------------------------------------------------------------------
   InfoWindow de Google Maps (tarjeta emergente al hacer click en un
   marcador): Google inyecta su propio DOM sin sombra, se puede
   apuntar directo con estos selectores globales.
------------------------------------------------------------------------ */
html[data-theme="dark"] .iw-content {
	background-color: var(--tur-surface) !important;
	color: var(--tur-text);
}
html[data-theme="dark"] .iw-content h3,
html[data-theme="dark"] .iw-content strong {
	color: var(--tur-text);
}
html[data-theme="dark"] .iw-content p {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .gm-style .gm-style-iw-c {
	background-color: var(--tur-surface);
	box-shadow: var(--tur-shadow) !important;
}
html[data-theme="dark"] .gm-style .gm-style-iw-tc::after {
	background: var(--tur-surface);
}
/* La X del botón de cerrar es un <span> recortado con mask-image (un SVG
   en data URI): lo que se ve no es un fondo ni una imagen de por sí, es
   el background-color del span asomando a través de esa máscara. Por
   eso el fix es ponerle color al span, no un filter. */
html[data-theme="dark"] .gm-ui-hover-effect {
	background-color: var(--tur-surface-2) !important;
	border-radius: 50% !important;
}
html[data-theme="dark"] .gm-ui-hover-effect span {
	background-color: var(--tur-text) !important;
}

/* Control de Street View (pegman): es el único control nativo que se
   deja en los mapas (mapType, zoom y fullscreen se apagan por JS al
   crear cada mapa). Su botón cuadrado es blanco fijo — Google no
   expone una opción de estilo para esto — así que se recolorea por
   CSS igual que el resto de los controles nativos de Maps. */
html[data-theme="dark"] .gm-svpc {
	background-color: var(--tur-surface-2) !important;
}
html[data-theme="dark"] .gm-svpc:hover {
	background-color: var(--tur-surface-3) !important;
}

/* ---------------------------------------------------------------------
   Tarjeta de destino rediseñada (.tur-destino-card, ver tur-cards.css)
------------------------------------------------------------------------ */
html[data-theme="dark"] .tur-destino-card-title {
	color: var(--tur-text);
}
html[data-theme="dark"] .tur-destino-card-city {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .tur-destino-card-event {
	color: var(--tur-text-faint);
}

/* Insignia de categoría: fallback (por si idCategoria no matchea
   ninguna de las 13 de abajo) con el rojo de marca. */
html[data-theme="dark"] .tur-destino-card-category {
	background-color: #3f121b;
	border-color: #871d30;
	color: #f36881;
}

/* Colores por categoría (tema oscuro): mismo tono que en claro, pero
   como relleno traslúcido oscuro + borde más saturado, igual que el
   resto del tema oscuro del sitio. */
html[data-theme="dark"] .tur-cat-1  { background-color: #3b2616 !important; border-color: #854f29 !important; color: #d2b39d !important; } /* Patrimonio y Cultura */
html[data-theme="dark"] .tur-cat-2  { background-color: #45140c !important; border-color: #9a2513 !important; color: #e4978b !important; } /* Gastronomía y Vida Nocturna */
html[data-theme="dark"] .tur-cat-3  { background-color: #2d123f !important; border-color: #60208d !important; color: #bd96d9 !important; } /* Bares y Discotecas */
html[data-theme="dark"] .tur-cat-4  { background-color: #163b29 !important; border-color: #298557 !important; color: #9dd2b8 !important; } /* Naturaleza y Parques */
html[data-theme="dark"] .tur-cat-5  { background-color: #263918 !important; border-color: #50802d !important; color: #b4cea1 !important; } /* Plazas y Parques */
html[data-theme="dark"] .tur-cat-6  { background-color: #47380a !important; border-color: #9f7b0f !important; color: #e7d088 !important; } /* Playas y Costa */
html[data-theme="dark"] .tur-cat-7  { background-color: #3f121e !important; border-color: #8d203b !important; color: #d996a7 !important; } /* Pastelerías y Cafés */
html[data-theme="dark"] .tur-cat-8  { background-color: #183935 !important; border-color: #2d8075 !important; color: #a1cec8 !important; } /* Bienestar y Termas */
html[data-theme="dark"] .tur-cat-9  { background-color: #3f1230 !important; border-color: #8d2069 !important; color: #d996c3 !important; } /* Eventos y Festivales */
html[data-theme="dark"] .tur-cat-10 { background-color: #3f2d12 !important; border-color: #8d6020 !important; color: #d9bd96 !important; } /* Artesanía y Compras */
html[data-theme="dark"] .tur-cat-11 { background-color: #43200e !important; border-color: #964217 !important; color: #e0aa8f !important; } /* Food Trucks */
html[data-theme="dark"] .tur-cat-12 { background-color: #363b16 !important; border-color: #788529 !important; color: #cbd29d !important; } /* Aventura y Deporte */
html[data-theme="dark"] .tur-cat-13 { background-color: #1b2637 !important; border-color: #31507c !important; color: #a4b4cb !important; } /* Monumentos Nacionales */
html[data-theme="dark"] .tur-cat-14 { background-color: #171b3d !important; border-color: #3a4a9c !important; color: #a9b3e8 !important; } /* Astroturismo */
html[data-theme="dark"] .tur-cat-15 { background-color: #3d1226 !important; border-color: #8d2050 !important; color: #dc9bb6 !important; } /* Enoturismo */
html[data-theme="dark"] .tur-cat-16 { background-color: #34300f !important; border-color: #7d7024 !important; color: #d3c98f !important; } /* Turismo Rural y Pueblos Originarios */
html[data-theme="dark"] .tur-cat-17 { background-color: #0f2d3b !important; border-color: #2b6f8f !important; color: #97c7dc !important; } /* Guías de Turismo */

/* Colores por categoría de RUTA (tema oscuro) — ver tur-cards.css. */
html[data-theme="dark"] .tur-catruta-1 { background-color: #43190e !important; border-color: #963117 !important; color: #e09f8f !important; } /* Ruta Gastronómica */
html[data-theme="dark"] .tur-catruta-2 { background-color: #163b26 !important; border-color: #29854f !important; color: #9dd2b3 !important; } /* Ruta de Naturaleza */
html[data-theme="dark"] .tur-catruta-3 { background-color: #12343f !important; border-color: #20728d !important; color: #96c8d9 !important; } /* Ruta Costera */
html[data-theme="dark"] .tur-catruta-4 { background-color: #363b16 !important; border-color: #788529 !important; color: #cbd29d !important; } /* Ruta Aventura */
html[data-theme="dark"] .tur-catruta-5 { background-color: #3b2616 !important; border-color: #854f29 !important; color: #d2b39d !important; } /* Ruta Patrimonial */
html[data-theme="dark"] .tur-catruta-6 { background-color: #412f10 !important; border-color: #92661c !important; color: #ddc292 !important; } /* Ruta Familiar */
html[data-theme="dark"] .tur-catruta-7 { background-color: #2d123f !important; border-color: #60208d !important; color: #bd96d9 !important; } /* Ruta Cultural */

/* Tags libres: gris neutro y discreto, no colores — la categoría ya
   lleva el color de la tarjeta. */
html[data-theme="dark"] .tur-destino-card-tags .tagDiseno {
	background-color: #4f4f4f40 !important;
	border-color: #525252;
	color: #ababab !important;
}


/* ---------------------------------------------------------------------
   Ficha de destino/evento/ruta: widgets del sidebar y footer/publicador
------------------------------------------------------------------------ */

/* Horarios (y cualquier otro .boxed-widget del sidebar, como el de
   valoraciones/costos): tarjeta blanca fija en style.css, sin variante
   oscura. */
html[data-theme="dark"] .boxed-widget {
	background-color: var(--tur-surface);
	box-shadow: var(--tur-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.4));
}
html[data-theme="dark"] .boxed-widget h3 {
	color: var(--tur-text);
	border-bottom-color: var(--tur-border);
}
html[data-theme="dark"] .opening-hours ul li {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .opening-hours ul li:hover {
	color: var(--tur-text);
}
html[data-theme="dark"] .opening-hours.summary li.total-costs {
	border-top-color: var(--tur-border);
}

/* Publicado por: la tarjeta (.tarjeta) ya es oscura, pero el nombre del
   publicador y los links de redes sociales tienen su color de texto
   fijo en style.css (gris oscuro, pensado para fondo blanco). */
html[data-theme="dark"] .hosted-by-title h4 a,
html[data-theme="dark"] .hosted-by-title h4 span {
	color: var(--tur-text);
}
html[data-theme="dark"] .facebook-profile,
html[data-theme="dark"] .instagram-profile,
html[data-theme="dark"] .facebook-profile i,
html[data-theme="dark"] .instagram-profile i {
	color: var(--tur-text-muted) !important;
}

/* Botones de contacto de la ficha (teléfono, email, sitio web): pill
   gris claro fija en style.css. Los de marca (Facebook/YouTube/
   Instagram/Twitter, en el otro <ul class="listing-links"> sin
   .contact-links) ya llevan su propio color de marca y se dejan tal
   cual — por eso el selector va con .contact-links, no con
   .listing-links a secas. */
html[data-theme="dark"] .listing-links.contact-links li a {
	background: var(--tur-surface-2);
	color: var(--tur-text);
	border-left-color: var(--tur-border);
}
html[data-theme="dark"] .listing-links.contact-links li a:hover {
	background: var(--tur-surface-3);
	color: var(--tur-text);
}

/* Caja "Reseñas" (promedio + barra de valoración): tarjeta blanca fija
   en style.css. */
html[data-theme="dark"] .rating-overview {
	background: var(--tur-surface);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .rating-overview-box {
	border-right-color: var(--tur-border);
}
html[data-theme="dark"] .rating-overview-box-total {
	color: var(--tur-text);
}
html[data-theme="dark"] .rating-overview-box-percent {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .rating-bars-name {
	color: var(--tur-text);
}
html[data-theme="dark"] .rating-bars-item strong {
	color: var(--tur-text-muted);
	background: var(--tur-surface-2);
}
html[data-theme="dark"] .rating-bars-rating {
	background-color: var(--tur-surface-3);
}
html[data-theme="dark"] .rating-bars-rating-inner {
	background-color: var(--tur-border-strong);
}

/* Botón "Favorito!": pill blanca fija en style.css. */
html[data-theme="dark"] .like-button {
	background-color: var(--tur-surface-2);
	color: var(--tur-text);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .like-button:hover {
	background-color: var(--tur-surface-3);
	border-color: var(--tur-border-strong);
}

/* Botón flotante de preferencias de cookies: borde blanco fijo, se ve
   como un aro suelto sobre el fondo oscuro. */
html[data-theme="dark"] #tc-reopen {
	background: var(--tur-surface);
	border-color: var(--tur-border);
}
html[data-theme="dark"] #tc-reopen:hover {
	background: var(--tur-surface-2);
}

/* Selector de idioma: la opción activa usa un gris claro fijo
   (#f2f2f2) pensado para el menú blanco original; con el texto ya
   puesto en var(--tur-text) por la regla de abajo, quedaba texto claro
   sobre fondo claro. */
html[data-theme="dark"] #language-menu {
	background-color: var(--tur-surface) !important;
}
html[data-theme="dark"] #language-menu a {
	color: var(--tur-text);
}
html[data-theme="dark"] #language-menu a:hover {
	background: var(--tur-surface-2);
}
html[data-theme="dark"] #language-menu a.lang-option-activa {
	background: var(--tur-surface-2);
}

/* ---------------------------------------------------------------------
   Perfil público de usuario (usuario.blade.php): titlebar con gradiente
   blanco fijo pensado para tema claro — en oscuro queda texto claro
   sobre fondo claro.
------------------------------------------------------------------------ */
html[data-theme="dark"] #titlebar.gradient {
	background: linear-gradient(to bottom, var(--tur-surface) 0%, var(--tur-bg) 100%);
}

/* ---------------------------------------------------------------------
   Formularios de dashboard "Agregar/Editar" (destino, ruta): la tarjeta
   blanca estándar de Listeo (#add-listing/.add-listing-section) usada
   en dashboardPublicar, dashboardCrearRuta, dashboardEditarRuta y
   editarPublicacion.
------------------------------------------------------------------------ */
html[data-theme="dark"] .add-listing-section {
	background-color: var(--tur-surface);
	box-shadow: var(--tur-shadow);
}
html[data-theme="dark"] .add-listing-headline {
	background-color: var(--tur-surface-2);
	border-bottom-color: var(--tur-border);
}
html[data-theme="dark"] .add-listing-headline h3 {
	color: var(--tur-text);
}
html[data-theme="dark"] #add-listing h5 {
	color: var(--tur-text);
}
html[data-theme="dark"] #add-listing h5 span {
	color: var(--tur-text-muted);
}

/* ---------------------------------------------------------------------
   Select2 (perfil.blade.php y los mismos formularios de dashboard de
   arriba): plugin aparte de "chosen". style.css trae su propia copia de
   los estilos default de Select2 (línea ~5606) y varios de esos usan
   !important, así que hace falta iguales acá para poder ganarles.
------------------------------------------------------------------------ */
html[data-theme="dark"] .select2-container--default .select2-selection--single,
html[data-theme="dark"] .select2-container--default .select2-selection--multiple {
	background-color: var(--tur-surface) !important;
	border-color: var(--tur-border) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection__rendered {
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection__placeholder {
	color: var(--tur-text-faint) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection__choice {
	background-color: var(--tur-surface-2) !important;
	border-color: var(--tur-border) !important;
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-dropdown {
	background-color: var(--tur-surface) !important;
	border-color: var(--tur-border) !important;
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
	background-color: var(--tur-surface-2) !important;
	border-color: var(--tur-border) !important;
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-results__option {
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--tur-surface-3) !important;
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: var(--tur-surface-2) !important;
	color: var(--tur-text) !important;
}
html[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single,
html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--tur-border-strong) !important;
}
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--tur-text-muted) transparent transparent transparent !important;
}

/* ---------------------------------------------------------------------
   Tagify (input de tags en dashboardPublicar/dashboardCrearRuta): se
   configura 100% por variables CSS propias, no hace falta pelear
   especificidad con !important.
------------------------------------------------------------------------ */
html[data-theme="dark"] .tagify {
	--tags-border-color: var(--tur-border);
	--tags-hover-border-color: var(--tur-border-strong);
	--tags-focus-border-color: var(--tur-accent);
	--tag-bg: var(--tur-surface-2);
	--tag-hover: var(--tur-surface-3);
	--tag-text-color: var(--tur-text);
	--tag-text-color--edit: var(--tur-text);
	--tag-remove-btn-color: var(--tur-text);
	--input-color: var(--tur-text);
	--placeholder-color: var(--tur-text-faint);
	--placeholder-color-focus: var(--tur-text-muted);
}
html[data-theme="dark"] .tagify__dropdown {
	--tagify-dd-bg-color: var(--tur-surface);
	--tagify-dd-text-color: var(--tur-text);
	--tagify-dd-color-primary: var(--tur-accent);
}

/* Botón "Subir Foto" (imagen de presentación en Agregar Publicación). */
html[data-theme="dark"] .change-photo-btn {
	color: var(--tur-text);
	background-color: var(--tur-surface-2);
}
html[data-theme="dark"] .change-photo-btn:hover {
	color: var(--tur-text);
	background-color: var(--tur-surface-3);
}

/* Botón "Agregar fotos" (galería en dashboardPublicar/dashboardCrearRuta). */
html[data-theme="dark"] .uploadButton .uploadButton-button {
	color: var(--tur-text);
	background-color: var(--tur-surface-2);
}
html[data-theme="dark"] .uploadButton .uploadButton-button:hover {
	background-color: var(--tur-surface-3);
	color: var(--tur-text);
}
html[data-theme="dark"] .uploadButton .uploadButton-file-name {
	color: var(--tur-text-muted);
}

/* Latitud/Longitud (dashboardPublicar y editarPublicacion): llevan un
   style="background-color:#f8f9fa" inline en el blade — solo un
   !important le puede ganar a eso. */
html[data-theme="dark"] #latitud,
html[data-theme="dark"] #longitud {
	background-color: var(--tur-surface-2) !important;
	color: var(--tur-text) !important;
}

/* ---------------------------------------------------------------------
   Mis Rutas (dashboardMisRutas.blade.php): fila de ruta con estilos
   propios inline en el archivo, blanco fijo.
------------------------------------------------------------------------ */
html[data-theme="dark"] .ruta-row {
	background: var(--tur-surface);
	border-color: var(--tur-border);
}
html[data-theme="dark"] .ruta-row-info span {
	color: var(--tur-text-muted);
}

/* ---------------------------------------------------------------------
   Sidebar del dashboard (.dashboard-nav): tenía un gris fijo (#2a2a2a)
   ajeno a la paleta "medianoche" en ambos temas. Ahora sigue la misma
   escala de superficies que el resto del panel.
------------------------------------------------------------------------ */
html[data-theme="dark"] .dashboard-nav {
	background-color: #101318;
	box-shadow: none;
}
html[data-theme="dark"] .dashboard-nav ul:before {
	color: var(--tur-text-faint);
}
html[data-theme="dark"] .dashboard-nav ul li,
html[data-theme="dark"] .dashboard-nav ul li a {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .dashboard-nav ul li.active,
html[data-theme="dark"] .dashboard-nav ul li:hover {
	color: var(--tur-text);
	background-color: var(--tur-surface);
}
html[data-theme="dark"] .dashboard-nav ul li a:hover {
	color: var(--tur-text);
}

html[data-theme="dark"] table.dataTable a {
	color: var(--tur-accent);
}
html[data-theme="dark"] table.dataTable a:hover {
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Header en mobile (<=1024px): línea blanca fija y botón hamburguesa
   con fondo gris claro fijo, pensados para header claro.
------------------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {
	html[data-theme="dark"] .header-widget {
		border-top-color: var(--tur-border);
	}
}
html[data-theme="dark"] .mmenu-trigger {
	background-color: var(--tur-surface-2);
}

html[data-theme="dark"] table.tur-datatable {
	border-color: var(--tur-border);
}

html[data-theme="dark"] .tur-icon-btn {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .tur-icon-btn:hover {
	color: var(--tur-accent);
}

/* Extensión Responsive de DataTables (Mis Publicaciones, Pausadas,
   Suscripciones): la flechita "►" que expande la fila y el detalle
   expandido traen su propio dark-mode nativo, pero atado a
   html.dark — este sitio usa html[data-theme="dark"], así que no se
   activa solo; se repite acá con nuestro selector. */
html[data-theme="dark"] table.dataTable > tbody > tr > td.dtr-control:before,
html[data-theme="dark"] table.dataTable > tbody > tr > th.dtr-control:before {
	color: var(--tur-text-muted) !important;
}
html[data-theme="dark"] table.dataTable > tbody > tr.child ul.dtr-details > li {
	border-bottom-color: var(--tur-border);
}
html[data-theme="dark"] table.dataTable > tbody > tr.child span.dtr-title {
	color: var(--tur-text);
}


/* ---------------------------------------------------------------------
   Banner de cookies y panel de preferencias
   (includes/usuario/cookieBanner.blade.php). Sus estilos base están en el
   propio partial, con colores claros fijos; acá se pasan a la paleta
   oscura. El rojo de marca #f91942 no da contraste suficiente para texto
   chico sobre fondo oscuro, por eso el texto/enlaces usan un tono más claro.
------------------------------------------------------------------------ */
html[data-theme="dark"] #tc-banner,
html[data-theme="dark"] #tc-modal {
	background: var(--tur-surface);
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] #tc-modal {
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
}
html[data-theme="dark"] #tc-banner .tc-text {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] #tc-banner .tc-text strong,
html[data-theme="dark"] #tc-banner .tc-text a,
html[data-theme="dark"] #tc-modal h3 {
	color: #ff6b85;
}
html[data-theme="dark"] .tc-btn-reject {
	background: var(--tur-surface-2);
	color: var(--tur-text);
}
html[data-theme="dark"] .tc-btn-settings {
	color: #ff6b85;
	border-color: #ff6b85;
}
html[data-theme="dark"] #tc-modal .tc-modal-sub,
html[data-theme="dark"] .tc-category-desc {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .tc-category {
	border-color: var(--tur-border);
	background: var(--tur-bg);
}
html[data-theme="dark"] .tc-category-title {
	color: var(--tur-text);
}
html[data-theme="dark"] .tc-toggle-slider {
	background: var(--tur-border-strong);
}
html[data-theme="dark"] .tc-toggle input:checked + .tc-toggle-slider {
	background: #f91942;
}
html[data-theme="dark"] .tc-toggle input:disabled + .tc-toggle-slider {
	background: #3d6b45;
}
html[data-theme="dark"] .tc-required-label {
	background: rgba(102, 187, 106, 0.16);
	color: #8fd894;
}
html[data-theme="dark"] #tc-reopen {
	background: var(--tur-surface);
	border-color: var(--tur-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] #tc-reopen:hover {
	background: var(--tur-surface-2);
}


/* ---------------------------------------------------------------------
   Vista de ruta: tarjetas de paradas (.parada-card, ver ruta.blade.php).
   Sus estilos base están inline en la vista, con colores claros fijos.
   La franja con el número queda en el rojo de marca en ambos temas.
------------------------------------------------------------------------ */
html[data-theme="dark"] .parada-card {
	background: var(--tur-surface);
	border-color: var(--tur-border);
	box-shadow: var(--tur-shadow);
}
html[data-theme="dark"] .parada-card:hover {
	box-shadow: var(--tur-shadow-lg);
}
html[data-theme="dark"] .parada-body h4,
html[data-theme="dark"] .parada-body h4 a {
	color: var(--tur-text);
}
html[data-theme="dark"] .parada-body p {
	color: var(--tur-text-muted);
}
html[data-theme="dark"] .parada-fotos a img {
	border-color: var(--tur-border);
}

/* ---------------------------------------------------------------------
   Perfil público (.tur-perfil, ver tur-perfil.css): solo se redefinen las
   variables --pf-*; el resto del perfil ya las usa.
------------------------------------------------------------------------ */
html[data-theme="dark"] .tur-perfil {
	--pf-surface: #15191f;
	--pf-text: var(--tur-text);
	--pf-muted: var(--tur-text-muted);
	--pf-line: var(--tur-border);
	--pf-chip: var(--tur-surface-2);
	--pf-cover: var(--tur-surface-2);
	--pf-accent: #d92646;
	--pf-accent-hover: #bd1e3b;
	--pf-accent-ink: #fff;
	--pf-star: #f0b429;
}
html[data-theme="dark"] .tur-perfil-toast {
	background: var(--tur-surface-3);
	color: var(--tur-text);
}

/* ---------------------------------------------------------------------
   Galería de Instagram (.tur-ig, ver tur-instagram.css). El editor usa las
   variables --f-* de tur-form.css y no necesita reglas aquí.
------------------------------------------------------------------------ */
html[data-theme="dark"] .tur-ig {
	--ig-text: var(--tur-text);
	--ig-muted: var(--tur-text-muted);
	--ig-line: var(--tur-border);
	--ig-tile: var(--tur-surface);
	--ig-tile-hover: var(--tur-surface-2);
	--ig-accent: #d92646;
	--ig-accent-hover: #bd1e3b;
}

/* ---------------------------------------------------------------------
   Subcategorías (chips) del index (ver tur-taxonomia.css)
------------------------------------------------------------------------ */
html[data-theme="dark"] .tur-subcats {
	--tsc-line: var(--tur-border);
	--tsc-bg: var(--tur-surface);
	--tsc-text: var(--tur-text);
	--tsc-accent: #ff6b85;
	--tsc-accent-soft: rgba(217, 38, 70, 0.2);
}