/* =========================================================
   SS DECO - THEME UI FIX 2.4
   Hamburguesa + sol/luna + lineas del toggle
   ========================================================= */

/* ---------------------------------------------------------
   1. HAMBURGUESA: visible en modo claro
   --------------------------------------------------------- */

html[data-ss-theme="light"] #header .ct-header-trigger,
html[data-ss-theme="light"] #header [data-id="trigger"],
html[data-ss-theme="light"] #header .ct-trigger,
html[data-ss-theme="light"] #header .ct-header-trigger .ct-icon {
	--theme-icon-color: #141416 !important;
	--theme-text-color: #141416 !important;
	color: #141416 !important;
}

html[data-ss-theme="light"] #header .ct-header-trigger svg,
html[data-ss-theme="light"] #header [data-id="trigger"] svg,
html[data-ss-theme="light"] #header .ct-trigger svg {
	color: #141416 !important;
	stroke: currentColor !important;
}

html[data-ss-theme="light"] #header .ct-header-trigger svg *,
html[data-ss-theme="light"] #header [data-id="trigger"] svg *,
html[data-ss-theme="light"] #header .ct-trigger svg * {
	stroke: currentColor !important;
}

html[data-ss-theme="light"] #header .ct-trigger span,
html[data-ss-theme="light"] #header .ct-trigger span::before,
html[data-ss-theme="light"] #header .ct-trigger span::after {
	background-color: #141416 !important;
	border-color: #141416 !important;
}

/* Modo oscuro: icono claro. */
html[data-ss-theme="dark"] #header .ct-header-trigger,
html[data-ss-theme="dark"] #header [data-id="trigger"],
html[data-ss-theme="dark"] #header .ct-trigger,
html[data-ss-theme="dark"] #header .ct-header-trigger .ct-icon {
	--theme-icon-color: #f3eee6 !important;
	--theme-text-color: #f3eee6 !important;
	color: #f3eee6 !important;
}

/* ---------------------------------------------------------
   2. TOGGLE: quitar borde/linea no deseada
   --------------------------------------------------------- */

.ss-theme-toggle,
.ss-theme-toggle:hover,
.ss-theme-toggle:focus,
.ss-theme-toggle:active {
	border: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	text-decoration: none !important;
}

/* ---------------------------------------------------------
   3. ICONOS MONOCROMOS: evita emojis casi invisibles
   --------------------------------------------------------- */

.ss-theme-toggle__sun,
.ss-theme-toggle__moon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	font-size: 0 !important;
	line-height: 1 !important;
	font-family: Arial, sans-serif !important;
}

.ss-theme-toggle__sun::before {
	content: "\2600";
	display: block;
	font-size: 18px;
	line-height: 1;
	color: currentColor;
}

.ss-theme-toggle__moon::before {
	content: "\263E";
	display: block;
	font-size: 18px;
	line-height: 1;
	color: currentColor;
}

.ss-theme-toggle__slash {
	display: inline-block !important;
	font-family: Arial, sans-serif !important;
	font-size: 12px !important;
	line-height: 1 !important;
	opacity: 0.35 !important;
	color: currentColor !important;
}

/* Header claro */
html[data-ss-theme="light"] #header .ss-theme-toggle {
	color: #141416 !important;
}

html[data-ss-theme="light"] #header .ss-theme-toggle__sun {
	opacity: 1 !important;
	color: #141416 !important;
}

html[data-ss-theme="light"] #header .ss-theme-toggle__moon {
	opacity: 0.42 !important;
	color: #5f5a56 !important;
}

/* Header oscuro */
html[data-ss-theme="dark"] #header .ss-theme-toggle {
	color: #f3eee6 !important;
}

html[data-ss-theme="dark"] #header .ss-theme-toggle__sun {
	opacity: 0.42 !important;
	color: #aaa39a !important;
}

html[data-ss-theme="dark"] #header .ss-theme-toggle__moon {
	opacity: 1 !important;
	color: #f3eee6 !important;
}

/*
 * Offcanvas y footer son oscuros en ambos modos.
 * Por eso NO deben heredar el texto oscuro del modo light.
 */
.ct-panel .ss-theme-toggle,
.ct-offcanvas .ss-theme-toggle,
#offcanvas .ss-theme-toggle,
.site-footer .ss-theme-toggle,
footer .ss-theme-toggle {
	color: #f3eee6 !important;
	border: 0 !important;
	box-shadow: none !important;
}

html[data-ss-theme="light"] .ct-panel .ss-theme-toggle__sun,
html[data-ss-theme="light"] .ct-offcanvas .ss-theme-toggle__sun,
html[data-ss-theme="light"] #offcanvas .ss-theme-toggle__sun,
html[data-ss-theme="light"] .site-footer .ss-theme-toggle__sun,
html[data-ss-theme="light"] footer .ss-theme-toggle__sun {
	opacity: 1 !important;
	color: #f3eee6 !important;
}

html[data-ss-theme="light"] .ct-panel .ss-theme-toggle__moon,
html[data-ss-theme="light"] .ct-offcanvas .ss-theme-toggle__moon,
html[data-ss-theme="light"] #offcanvas .ss-theme-toggle__moon,
html[data-ss-theme="light"] .site-footer .ss-theme-toggle__moon,
html[data-ss-theme="light"] footer .ss-theme-toggle__moon {
	opacity: 0.38 !important;
	color: #9e9890 !important;
}

html[data-ss-theme="dark"] .ct-panel .ss-theme-toggle__sun,
html[data-ss-theme="dark"] .ct-offcanvas .ss-theme-toggle__sun,
html[data-ss-theme="dark"] #offcanvas .ss-theme-toggle__sun,
html[data-ss-theme="dark"] .site-footer .ss-theme-toggle__sun,
html[data-ss-theme="dark"] footer .ss-theme-toggle__sun {
	opacity: 0.38 !important;
	color: #9e9890 !important;
}

html[data-ss-theme="dark"] .ct-panel .ss-theme-toggle__moon,
html[data-ss-theme="dark"] .ct-offcanvas .ss-theme-toggle__moon,
html[data-ss-theme="dark"] #offcanvas .ss-theme-toggle__moon,
html[data-ss-theme="dark"] .site-footer .ss-theme-toggle__moon,
html[data-ss-theme="dark"] footer .ss-theme-toggle__moon {
	opacity: 1 !important;
	color: #f3eee6 !important;
}

/* En mobile tampoco queremos la antigua linea superior. */
@media (max-width: 999px) {
	.ss-theme-toggle {
		border: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.ss-theme-toggle-item {
		border: 0 !important;
	}
}