/* ==========================================================================
   Dark Mode para Elementor
   Los colores globales de Elementor (--e-global-color-*) se sobreescriben
   desde PHP (estilos en línea) según los ajustes del plugin.
   ========================================================================== */

:root {
	--edm-bg: #121212;
	--edm-surface: #1e1e1e;
	--edm-text: #e4e4e4;
	--edm-heading: #ffffff;
	--edm-link: #8ab4f8;
	--edm-border: #333333;
	--edm-btn-bg: #ffffff;
	--edm-btn-color: #1a1a1a;
	--edm-btn-border-color: #c8c8c8;
	--edm-btn-border-width: 1px;
	--edm-btn-radius: 999px;
	--edm-btn-icon: 20px;
}

html[data-edm-theme="dark"] { color-scheme: dark; }

/* Transición suave solo cuando el usuario alterna (clase añadida por JS). */
html.edm-transition,
html.edm-transition *,
html.edm-transition *::before,
html.edm-transition *::after {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, fill .3s ease !important;
}

/* ---------- Método "forzar": elementos con colores fijos (no globales) ---------- */

html[data-edm-theme="dark"][data-edm-mode="colors"] .site,
html[data-edm-theme="dark"][data-edm-mode="colors"] #page,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-section,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-top-section,
html[data-edm-theme="dark"][data-edm-mode="colors"] .e-con,
html[data-edm-theme="dark"][data-edm-mode="colors"] .e-parent {
	background-color: var(--edm-bg);
	color: var(--edm-text);
}

html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-background-overlay { opacity: .6; }

html[data-edm-theme="dark"][data-edm-mode="colors"] h1,
html[data-edm-theme="dark"][data-edm-mode="colors"] h2,
html[data-edm-theme="dark"][data-edm-mode="colors"] h3,
html[data-edm-theme="dark"][data-edm-mode="colors"] h4,
html[data-edm-theme="dark"][data-edm-mode="colors"] h5,
html[data-edm-theme="dark"][data-edm-mode="colors"] h6,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-heading-title {
	color: var(--edm-heading);
}

html[data-edm-theme="dark"][data-edm-mode="colors"] p,
html[data-edm-theme="dark"][data-edm-mode="colors"] li,
html[data-edm-theme="dark"][data-edm-mode="colors"] span,
html[data-edm-theme="dark"][data-edm-mode="colors"] label,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-widget-text-editor,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-icon-list-text {
	color: var(--edm-text);
}

html[data-edm-theme="dark"][data-edm-mode="colors"] a:not(.elementor-button):not(.edm-ignore) {
	color: var(--edm-link);
}

html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-accordion-item,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-tab-content,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-tab-title,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-price-table,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-testimonial,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-post,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-card,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-post__card,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-nav-menu--dropdown,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-nav-menu--dropdown a,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-icon-box-wrapper,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-image-box-wrapper,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-popup-modal .dialog-widget-content {
	background-color: var(--edm-surface);
	border-color: var(--edm-border);
	color: var(--edm-text);
}

html[data-edm-theme="dark"][data-edm-mode="colors"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html[data-edm-theme="dark"][data-edm-mode="colors"] textarea,
html[data-edm-theme="dark"][data-edm-mode="colors"] select,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-field-textual {
	background-color: var(--edm-surface);
	border-color: var(--edm-border);
	color: var(--edm-text);
}

html[data-edm-theme="dark"][data-edm-mode="colors"] ::placeholder { color: var(--edm-text); opacity: .6; }

html[data-edm-theme="dark"][data-edm-mode="colors"] hr,
html[data-edm-theme="dark"][data-edm-mode="colors"] .elementor-divider-separator,
html[data-edm-theme="dark"][data-edm-mode="colors"] table,
html[data-edm-theme="dark"][data-edm-mode="colors"] th,
html[data-edm-theme="dark"][data-edm-mode="colors"] td {
	border-color: var(--edm-border);
}

/* El botón del plugin no hereda los colores forzados */
html[data-edm-theme] .edm-toggle span { color: inherit; }

/* ---------- Método: inversión inteligente ---------- */

html[data-edm-theme="dark"][data-edm-mode="invert"] {
	background-color: #fff;
	filter: invert(1) hue-rotate(180deg);
}

html[data-edm-theme="dark"][data-edm-mode="invert"] img,
html[data-edm-theme="dark"][data-edm-mode="invert"] video,
html[data-edm-theme="dark"][data-edm-mode="invert"] iframe,
html[data-edm-theme="dark"][data-edm-mode="invert"] picture,
html[data-edm-theme="dark"][data-edm-mode="invert"] canvas,
html[data-edm-theme="dark"][data-edm-mode="invert"] .elementor-background-video-container,
html[data-edm-theme="dark"][data-edm-mode="invert"] .elementor-motion-effects-element-type-background,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-ignore,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-floating {
	filter: invert(1) hue-rotate(180deg);
}

/* Fondos con imagen (marcados por JS con .edm-keep): conservan su aspecto original */
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep {
	filter: invert(1) hue-rotate(180deg);
}

html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep .edm-keep,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep img,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep video,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep iframe,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep picture,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep canvas,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep .edm-ignore,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep .edm-floating,
html[data-edm-theme="dark"][data-edm-mode="invert"] .edm-keep .elementor-background-video-container {
	filter: none;
}

/* ---------- Controles por elemento (pestaña "Modo oscuro" de Elementor) ---------- */

/* Mostrar solo en claro / solo en oscuro (en el editor no hay data-edm-theme, se ve todo) */
html[data-edm-theme="dark"] .edm-show-light { display: none !important; }
html[data-edm-theme="light"] .edm-show-dark { display: none !important; }

/* Imagen alternativa para modo oscuro (widgets de imagen, logos, etc.) */
.edm-swap-dark { display: none !important; }
html[data-edm-theme="dark"] .edm-swap-dark { display: inline-block !important; }
html[data-edm-theme="dark"] .edm-swap-light { display: none !important; }

/* ---------- Botón de alternancia ---------- */

.edm-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	color: var(--edm-btn-color);
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
}

.edm-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.edm-toggle--button,
.edm-toggle--icon {
	padding: 10px 14px;
	background-color: var(--edm-btn-bg);
	color: var(--edm-btn-color);
	border: var(--edm-btn-border-width) solid var(--edm-btn-border-color);
	border-radius: var(--edm-btn-radius);
}

.edm-toggle--button:hover,
.edm-toggle--button:focus,
.edm-toggle--icon:hover,
.edm-toggle--icon:focus {
	background-color: var(--edm-btn-bg);
	color: var(--edm-btn-color);
	border-color: var(--edm-btn-border-color);
}

.edm-toggle--icon { padding: 12px; }

.edm-toggle--switch,
.edm-toggle--switch:hover,
.edm-toggle--switch:focus {
	padding: 0;
	border: 0;
	background: none;
	color: var(--edm-btn-color);
}

/* Iconos: uno para cada tema */
.edm-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--edm-btn-icon);
	line-height: 0;
}

.edm-ico svg,
.edm-ico i {
	width: 1em;
	height: 1em;
	display: block;
}

.edm-ico--custom svg:not([fill="none"]) { fill: currentColor; }

.edm-ico--dark { display: none; }
html[data-edm-theme="dark"] .edm-ico--dark { display: inline-flex; }
html[data-edm-theme="dark"] .edm-ico--light { display: none; }

/* Textos: uno u otro según el tema */
.edm-label--to-light { display: none; }
html[data-edm-theme="dark"] .edm-label--to-light { display: inline; }
html[data-edm-theme="dark"] .edm-label--to-dark { display: none; }

/* Interruptor */
.edm-track {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
	box-sizing: border-box;
	border-radius: 999px;
	background: #cfd4da;
	transition: background-color .25s ease;
}

.edm-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	color: #1a1a1a;
	transition: transform .25s ease;
}

.edm-knob .edm-ico { font-size: 14px; }

html[data-edm-theme="dark"] .edm-track { background: #4a6cf7; }
html[data-edm-theme="dark"] .edm-knob { transform: translateX(24px); background: #121212; color: #f5f5f5; }

/* Botón flotante */
.edm-floating {
	position: fixed;
	z-index: 99999;
}

.edm-floating .edm-toggle { box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }

@media (prefers-reduced-motion: reduce) {
	html.edm-transition, html.edm-transition * { transition: none !important; }
	.edm-track, .edm-knob { transition: none; }
}