/*
 * Dark Mode Toggle — dark-mode.css
 */

:root {
	--dmt-bg:           #0f1117;
	--dmt-card:         #1b1f2a;
	--dmt-text:         #e6e9ef;
	--dmt-text-muted:   #a7b0c0;
	--dmt-border:       #2b3242;
	--dmt-accent:       #4f8cff;
	--dmt-accent-hover: #6fa3ff;
	--dmt-ease:         0.25s ease;
}

/* ── Contenido ────────────────────────────────────────────────── */
body.dmt-dark .dmt-content {
	background-color: var(--dmt-bg) !important;
	transition: background-color var(--dmt-ease);
}

/* Secciones sin background propio: transparentar para que el root oscuro se vea */
body.dmt-dark .dmt-content .elementor-section:not([style*="background"]),
body.dmt-dark .dmt-content .e-con:not([style*="background"]),
body.dmt-dark .dmt-content .elementor-column:not([style*="background"]),
body.dmt-dark .dmt-content .elementor-widget-wrap:not([style*="background"]) {
	background-color: transparent !important;
	transition: background-color var(--dmt-ease);
}

/* Widgets internos: siempre transparente para no crear cajas blancas */
body.dmt-dark .dmt-content .elementor-widget-container,
body.dmt-dark .dmt-content .elementor-widget {
	background-color: transparent !important;
}

/* ── Texto ────────────────────────────────────────────────────── */
body.dmt-dark .dmt-content h1, body.dmt-dark .dmt-content h2,
body.dmt-dark .dmt-content h3, body.dmt-dark .dmt-content h4,
body.dmt-dark .dmt-content h5, body.dmt-dark .dmt-content h6,
body.dmt-dark .dmt-content p, body.dmt-dark .dmt-content li,
body.dmt-dark .dmt-content label, body.dmt-dark .dmt-content td,
body.dmt-dark .dmt-content th, body.dmt-dark .dmt-content blockquote,
body.dmt-dark .dmt-content .elementor-heading-title,
body.dmt-dark .dmt-content .elementor-text-editor,
body.dmt-dark .dmt-content .elementor-widget-container p,
body.dmt-dark .dmt-content .elementor-widget-container h1,
body.dmt-dark .dmt-content .elementor-widget-container h2,
body.dmt-dark .dmt-content .elementor-widget-container h3,
body.dmt-dark .dmt-content .elementor-widget-container h4,
body.dmt-dark .dmt-content .elementor-widget-container li {
	color: var(--dmt-text) !important;
	transition: color var(--dmt-ease);
}

body.dmt-dark .dmt-content small,
body.dmt-dark .dmt-content figcaption,
body.dmt-dark .dmt-content time {
	color: var(--dmt-text-muted) !important;
}

/* ── Links ────────────────────────────────────────────────────── */
body.dmt-dark .dmt-content a {
	color: var(--dmt-accent) !important;
	transition: color var(--dmt-ease);
}
body.dmt-dark .dmt-content a:hover {
	color: var(--dmt-accent-hover) !important;
}
body.dmt-dark .dmt-content nav a,
body.dmt-dark .dmt-content .menu a,
body.dmt-dark .dmt-content [class*="menu"] a,
body.dmt-dark .dmt-content [class*="nav"] a {
	color: inherit !important;
}

/* ── Botones ──────────────────────────────────────────────────── */
body.dmt-dark .dmt-content .elementor-button {
	background-color: var(--dmt-accent) !important;
	color: #fff !important;
	border-color: transparent !important;
}
body.dmt-dark .dmt-content .elementor-button:hover {
	background-color: var(--dmt-accent-hover) !important;
}

/* ── Formularios ──────────────────────────────────────────────── */
body.dmt-dark .dmt-content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.dmt-dark .dmt-content textarea,
body.dmt-dark .dmt-content select {
	background-color: var(--dmt-card) !important;
	color: var(--dmt-text) !important;
	border-color: var(--dmt-border) !important;
}

/* ── Divisores ────────────────────────────────────────────────── */
body.dmt-dark .dmt-content hr,
body.dmt-dark .dmt-content .elementor-divider-separator {
	border-color: var(--dmt-border) !important;
}

/* ── ElementsKit Tabs — texto con color inline hardcodeado ────
   El HTML tiene <span style="color:#000000"> hardcodeado.
   CSS no puede ganar sobre inline style directamente,
   pero el JS inyecta un <style> con !important que sí puede.
   Este bloque cubre los casos donde el JS ya corrió.        */
body.dmt-dark .elementkit-tab-pane span,
body.dmt-dark .elementkit-tab-pane h4,
body.dmt-dark .elementkit-tab-pane h4 span,
body.dmt-dark .elementkit-tab-pane strong,
body.dmt-dark .elementkit-tab-pane h4 strong span,
body.dmt-dark .tab-pane h4 span,
body.dmt-dark .ekit-wid-con .tab-content span,
body.dmt-dark .ekit-wid-con .tab-content h4 {
	color: var(--dmt-text) !important;
}

/* Tabs nav — títulos de las pestañas */
body.dmt-dark .elementkit-nav-link .elementskit-tab-title,
body.dmt-dark .elementkit-nav-link {
	color: var(--dmt-text-muted) !important;
}
body.dmt-dark .elementkit-nav-link.active .elementskit-tab-title,
body.dmt-dark .elementkit-nav-link.active {
	color: var(--dmt-text) !important;
}


/* ── Elementor Accordion / FAQ (preguntas-frecuentes) ──────────
   Clases del widget accordion nativo de Elementor:
   .elementor-accordion-item     = cada pregunta/respuesta
   .elementor-tab-title          = el titulo clickeable
   .elementor-tab-content        = el contenido desplegado
   .elementor-accordion-icon     = el icono +/-
   Tambien cubre HT Mega, Essential Addons y otros addons.    */

/* Contenedor del accordion */
body.dmt-dark .dmt-content .elementor-accordion,
body.dmt-dark .dmt-content .eael-accordion,
body.dmt-dark .dmt-content .htmega-accordion {
	background-color: transparent !important;
}

/* Cada item del accordion */
body.dmt-dark .dmt-content .elementor-accordion-item {
	background-color: var(--dmt-card) !important;
	border-color: var(--dmt-border) !important;
}

/* Titulo / pregunta */
body.dmt-dark .dmt-content .elementor-tab-title,
body.dmt-dark .dmt-content .elementor-tab-title a,
body.dmt-dark .dmt-content .elementor-accordion-title {
	color: var(--dmt-text) !important;
	background-color: transparent !important;
	border-color: var(--dmt-border) !important;
}

/* Titulo activo (item abierto) */
body.dmt-dark .dmt-content .elementor-tab-title.elementor-active,
body.dmt-dark .dmt-content .elementor-tab-title.elementor-active a {
	color: var(--dmt-accent) !important;
}

/* Icono +/- */
body.dmt-dark .dmt-content .elementor-accordion-icon,
body.dmt-dark .dmt-content .elementor-accordion-icon svg {
	color: var(--dmt-text) !important;
	fill: var(--dmt-text) !important;
}

/* Contenido / respuesta */
body.dmt-dark .dmt-content .elementor-tab-content,
body.dmt-dark .dmt-content .elementor-tab-content p,
body.dmt-dark .dmt-content .elementor-tab-content span,
body.dmt-dark .dmt-content .elementor-tab-content li,
body.dmt-dark .dmt-content .elementor-tab-content a {
	color: var(--dmt-text) !important;
	background-color: transparent !important;
	border-color: var(--dmt-border) !important;
}

/* ── ElementsKit FAQ widget ────────────────────────────────────
   Clases del widget elementskit-faq:
   .elementskit-single-faq   = cada item pregunta/respuesta
   .elementskit-faq-header   = cabecera con la pregunta
   .elementskit-faq-title    = texto del titulo
   .elementskit-faq-body     = texto de la respuesta             */

/* Cada item: mantener fondo gris (--dmt-card), NO blanco */
body.dmt-dark .dmt-content .elementskit-single-faq {
	background-color: var(--dmt-card) !important;
	border-color: var(--dmt-border) !important;
}

/* Cabecera de la pregunta: fondo gris, texto blanco */
body.dmt-dark .dmt-content .elementskit-faq-header {
	background-color: var(--dmt-card) !important;
	border-color: var(--dmt-border) !important;
}

/* Titulo de la pregunta */
body.dmt-dark .dmt-content .elementskit-faq-title,
body.dmt-dark .dmt-content .elementskit-faq-header h2,
body.dmt-dark .dmt-content .elementskit-faq-header h3 {
	color: var(--dmt-text) !important;
	background-color: transparent !important;
}

/* Cuerpo / respuesta */
body.dmt-dark .dmt-content .elementskit-faq-body,
body.dmt-dark .dmt-content .elementskit-faq-body p,
body.dmt-dark .dmt-content .elementskit-faq-body span,
body.dmt-dark .dmt-content .elementskit-faq-body a {
	color: var(--dmt-text) !important;
	background-color: transparent !important;
}

/* Icono toggle del FAQ (si lo hay) */
body.dmt-dark .dmt-content .elementskit-faq-header .ekit-faq-icon,
body.dmt-dark .dmt-content .elementskit-faq-header svg {
	color: var(--dmt-text) !important;
	fill: var(--dmt-text) !important;
}

/* ── ElementsKit Social Icons widget ──────────────────────────
   Estructura HTML:
   .ekit-wid-con
     ul.ekit-social-media
       li > a.ekit-social-icon-anchor
             i.fab.fa-facebook  ← Font Awesome, color negro por defecto
             span               ← label opcional
   El color negro viene de la hoja de estilos del widget,
   no de inline styles — solo CSS con !important lo pisa.      */

body.dmt-dark .dmt-content .ekit-social-media,
body.dmt-dark .dmt-content .elementskit-social-list {
	background-color: transparent !important;
}

/* Forzar blanco en TODOS los íconos i/svg de social icons */
body.dmt-dark .dmt-content .ekit-social-media i,
body.dmt-dark .dmt-content .ekit-social-media svg,
body.dmt-dark .dmt-content .ekit-social-media .ekit-social-icon-anchor,
body.dmt-dark .dmt-content .ekit-social-media .ekit-social-icon-anchor *,
body.dmt-dark .dmt-content .elementskit-social-list i,
body.dmt-dark .dmt-content .elementskit-social-list svg,
body.dmt-dark .dmt-content .elementskit-social-list a,
body.dmt-dark .dmt-content .elementskit-social-list a * {
	color: var(--dmt-text) !important;
	fill: var(--dmt-text) !important;
}

/* Labels de texto */
body.dmt-dark .dmt-content .ekit-social-media span,
body.dmt-dark .dmt-content .elementskit-social-list span {
	color: var(--dmt-text) !important;
}

/* Si hay fondo claro inline en el link, neutralizarlo */
body.dmt-dark .dmt-content .ekit-social-media a,
body.dmt-dark .dmt-content .elementskit-social-list a {
	background-color: var(--dmt-card) !important;
	border-color: var(--dmt-border) !important;
}

/* ── HT Mega Blockquote — cobertura total de clases ───────────── */
body.dmt-dark .dmt-content [class*="htmega"],
body.dmt-dark .dmt-content [class*="htmega"] * {
	background-color: var(--dmt-card) !important;
	color: var(--dmt-text) !important;
	border-color: var(--dmt-border) !important;
}
body.dmt-dark .dmt-content [class*="htmega"] img,
body.dmt-dark .dmt-content [class*="htmega"] svg {
	background-color: transparent !important;
}
body.dmt-dark .dmt-content [class*="htmega"] cite,
body.dmt-dark .dmt-content [class*="htmega"] .htmega-author-name {
	color: var(--dmt-accent) !important;
}
body.dmt-dark .dmt-content [class*="htmega"] svg {
	fill: var(--dmt-text) !important;
}

/* ── Editor de texto Elementor — cobertura total ───────────────
   Cubre TODO lo que está dentro del text-editor, incluyendo
   cajas con fondo claro generadas por el editor visual.        */
body.dmt-dark .dmt-content .elementor-widget-text-editor,
body.dmt-dark .dmt-content .elementor-widget-text-editor * {
	color: var(--dmt-text) !important;
	border-color: var(--dmt-border) !important;
}
body.dmt-dark .dmt-content .elementor-widget-text-editor,
body.dmt-dark .dmt-content .elementor-widget-text-editor div,
body.dmt-dark .dmt-content .elementor-widget-text-editor blockquote,
body.dmt-dark .dmt-content .elementor-widget-text-editor table,
body.dmt-dark .dmt-content .elementor-widget-text-editor td,
body.dmt-dark .dmt-content .elementor-widget-text-editor th,
body.dmt-dark .dmt-content .elementor-widget-text-editor tr {
	background-color: var(--dmt-card) !important;
}
body.dmt-dark .dmt-content .elementor-widget-text-editor p,
body.dmt-dark .dmt-content .elementor-widget-text-editor span,
body.dmt-dark .dmt-content .elementor-widget-text-editor li,
body.dmt-dark .dmt-content .elementor-widget-text-editor strong,
body.dmt-dark .dmt-content .elementor-widget-text-editor em {
	background-color: transparent !important;
}
body.dmt-dark .dmt-content .elementor-widget-text-editor img {
	background-color: transparent !important;
	filter: none !important;
}

/* ── Smart Slider 3 — bajar brillo al 50% ─────────────────────
   Se aplica a todo el slider completo. Simple y efectivo.      */
body.dmt-dark .n2-section-smartslider {
	filter: brightness(0.5) !important;
	transition: filter 0.3s ease;
}

/* Smart Slider 3 — forzar texto blanco en slides con texto negro */
body.dmt-dark .n2-font-5404c4748772a0a8926cf1201f464c0d-hover,
body.dmt-dark .n2-font-4b9c62abb907f5e5c4ad69bcf8c52ad5-hover,
body.dmt-dark .n2-font-48e82666a8dba30a8c205f4ce2222c7c-hover {
	color: #ffffff !important;
}

/* ── SSA iframe ───────────────────────────────────────────────── */
body.dmt-dark .ssa_booking_iframe,
body.dmt-dark iframe[name="ssa_booking"],
body.dmt-dark iframe[src*="embed-inner"] {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* ── Toggle button ────────────────────────────────────────────── */
.dmt-toggle {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 999999;
	border: none;
	padding: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.dmt-toggle:focus-visible {
	outline: 2px solid #4f8cff;
	outline-offset: 4px;
	border-radius: 50px;
}
.dmt-track {
	display: flex;
	align-items: center;
	position: relative;
	width: 68px;
	height: 36px;
	border-radius: 50px;
	padding: 3px;
	box-sizing: border-box;
	overflow: hidden;
	background: linear-gradient(135deg, #74b9ff 0%, #a29bfe 50%, #fd79a8 100%);
	box-shadow: 0 4px 20px rgba(116,185,255,.45), 0 2px 8px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.3);
	transition: background 0.45s ease, box-shadow 0.45s ease;
}
.dmt-stars {
	display: flex;
	gap: 3px;
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.dmt-star { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.9); }
.dmt-star:nth-child(2) { width: 2px; height: 2px; margin-top: -3px; }
.dmt-star:nth-child(3) { margin-top: 4px; }
.dmt-thumb {
	position: relative;
	width: 30px; height: 30px;
	border-radius: 50%;
	flex-shrink: 0;
	background: linear-gradient(145deg, #fff9e6, #fff3c4);
	box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.15), inset 0 -1px 2px rgba(0,0,0,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateX(0);
	transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), background 0.4s ease, box-shadow 0.4s ease;
}
.dmt-icon {
	position: absolute;
	width: 18px; height: 18px;
	display: flex; align-items: center; justify-content: center;
	transition: opacity 0.2s ease, transform 0.3s ease;
}
.dmt-icon svg { width: 100%; height: 100%; display: block; }
.dmt-icon--sun  { opacity: 1; transform: rotate(0) scale(1); }
.dmt-icon--moon { opacity: 0; transform: rotate(30deg) scale(0.5); pointer-events: none; }
.dmt-toggle:hover .dmt-track { box-shadow: 0 6px 28px rgba(116,185,255,.55), 0 3px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35); }
.dmt-toggle:hover .dmt-thumb  { transform: translateX(0) scale(1.06); }
.dmt-toggle:active .dmt-thumb { transform: translateX(0) scale(0.94); }

body.dmt-dark .dmt-track {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	box-shadow: 0 4px 20px rgba(129,140,248,.4), 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
body.dmt-dark .dmt-stars { opacity: 1; }
body.dmt-dark .dmt-thumb {
	transform: translateX(32px);
	background: linear-gradient(145deg, #e8e8ff, #c9c5f0);
	box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.3), inset -3px -2px 4px rgba(129,140,248,.3);
}
body.dmt-dark .dmt-toggle:hover .dmt-thumb  { transform: translateX(32px) scale(1.06); }
body.dmt-dark .dmt-toggle:active .dmt-thumb { transform: translateX(32px) scale(0.94); }
body.dmt-dark .dmt-icon--sun  { opacity: 0; transform: rotate(-30deg) scale(0.5); pointer-events: none; }
body.dmt-dark .dmt-icon--moon { opacity: 1; transform: rotate(0) scale(1); pointer-events: auto; }

@media (max-width: 480px) {
	.dmt-toggle { bottom: 20px; right: 20px; }
	.dmt-track  { width: 60px; height: 32px; }
	.dmt-thumb  { width: 26px; height: 26px; }
	body.dmt-dark .dmt-thumb                    { transform: translateX(28px); }
	body.dmt-dark .dmt-toggle:hover .dmt-thumb  { transform: translateX(28px) scale(1.06); }
	body.dmt-dark .dmt-toggle:active .dmt-thumb { transform: translateX(28px) scale(0.94); }
}