/* ==============================================================
   LA AKADEMIA — Design System · CAPA 2: COMPONENTES
   ---------------------------------------------------------------
   Todo scopeado a body.demo-yoga (clase de body del sitio):
   NUNCA toca wp-admin, el editor de bloques ni el editor de Elementor.
   Convención BEM-ish: .akd-<componente>__<pieza>--<modificador>.
   Usa solo tokens de tokens.css (capa 1). Sin !important salvo
   donde se documenta explícitamente (anular !important del tema).
   ============================================================== */

/* ---------- Base accesible ---------- */
body.demo-yoga {
	font-size: var(--font-size-base); /* el demo importaba base 10px: se corrige a 16px */
	transition: background-color var(--transition-base), color var(--transition-base);
}

/* LearnPress imprime body{background:#fff} en sus archivos (learnpress.css):
   en modo oscuro el fondo debe seguir siendo el estelar. Gana por especificidad
   (html.clase + body.clase) y orden de carga; sin !important. */
html.thim-ekit-dark-mode body.demo-yoga {
	background-color: var(--color-bg);
}

/* Enfoque visible en TODO interactivo (nunca outline:none sin reemplazo) */
body.demo-yoga :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

/* Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	body.demo-yoga *,
	body.demo-yoga *::before,
	body.demo-yoga *::after {
		animation-duration: 0.01ms !important; /* !important justificado: anula animaciones del tema/plugins */
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Enlaces y botones: estados consistentes ---------- */
body.demo-yoga a {
	transition: color var(--transition-fast), background-color var(--transition-fast),
		border-color var(--transition-fast), box-shadow var(--transition-fast);
}

body.demo-yoga :is(
	.lp-button,
	.elementor-button,
	.woocommerce button[type="submit"],
	input[type="submit"],
	button[type="submit"]
) {
	transition: background-color var(--transition-base), color var(--transition-base),
		border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}

body.demo-yoga :is(.lp-button, .elementor-button, input[type="submit"], button[type="submit"]):hover {
	box-shadow: var(--shadow-1);
	transform: translateY(-1px);
}

body.demo-yoga :is(.lp-button, .elementor-button, input[type="submit"], button[type="submit"]):active {
	transform: translateY(0);
	box-shadow: none;
}

body.demo-yoga :is(.lp-button, .elementor-button, button, input):disabled,
body.demo-yoga :is(.lp-button, .elementor-button, button, input)[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------- Formularios: inputs, selects, placeholders ---------- */
body.demo-yoga :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	select, textarea) {
	transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

html.thim-ekit-dark-mode body.demo-yoga :is(input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
	select, textarea) {
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	border-color: var(--color-border);
}

html.thim-ekit-dark-mode body.demo-yoga ::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}

/* ---------- Acordeones FAQ (tabs/toggle de Elementor) ---------- */
body.demo-yoga :is(.elementor-tab-title, .elementor-tab-content) {
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

body.demo-yoga .elementor-tab-title {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-heading);
}

body.demo-yoga .elementor-tab-title.elementor-active {
	border-color: var(--color-accent);
}

body.demo-yoga .elementor-tab-content {
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-top: 0;
}

body.demo-yoga .elementor-tab-title:hover {
	background-color: var(--color-surface-2);
	color: var(--color-accent);
}

/* ---------- Cajas de precio / precio de curso (TICK-001) ---------- */
body.demo-yoga :is(
	.lp-course-price,
	.course-price,
	.thim-ekit-single-course__price,
	.elementor-widget-thim-ekits-course-price .elementor-widget-container,
	.elementor-widget-price-list,
	.elementor-widget-price-table .elementor-price-table__header,
	.elementor-widget-price-table .elementor-price-table__footer
) {
	transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

html.thim-ekit-dark-mode body.demo-yoga :is(
	.lp-course-price,
	.course-price,
	.thim-ekit-single-course__price,
	.elementor-widget-thim-ekits-course-price .elementor-widget-container,
	.elementor-widget-price-table .elementor-price-table
) {
	color: var(--color-text);
}

body.demo-yoga .elementor-widget-price-table .elementor-price-table {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
}

body.demo-yoga .elementor-widget-price-table .elementor-price-table__header {
	background-color: var(--color-surface-2);
	color: var(--color-heading);
}

/* Precio destacado en LearnPress usa el acento en ambos modos */
body.demo-yoga :is(.lp-course-price, .course-price) .lp-price-type-regular,
body.demo-yoga :is(.lp-course-price, .course-price) {
	color: var(--color-accent);
}

/* ---------- Filtros de cursos (LearnPress) ----------
   !important justificado: el CSS embebido del tema fuerza
   background-color:#fff con !important en móvil; aquí lo anulamos
   de forma equivalente para que el modo oscuro funcione. */
body.demo-yoga .filter-course,
body.demo-yoga .lp-form-course-filter {
	transition: background-color var(--transition-base);
}

html.thim-ekit-dark-mode body.demo-yoga :is(.filter-course, .lp-form-course-filter, .learnpress-widget-wrapper) {
	background-color: var(--color-surface) !important; /* anula el #fff !important del tema */
	color: var(--color-text);
}

html.thim-ekit-dark-mode body.demo-yoga .filter-course :is(.elementor-widget-container, .lp-form-course-filter__title) {
	background-color: transparent;
	color: var(--color-heading);
}

/* ---------- Tabla de contenidos (ez-toc) — reestilizada con tokens ---------- */
body.demo-yoga #ez-toc-container,
body.demo-yoga div.ez-toc-widget-sticky-container {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	transition: background-color var(--transition-base), border-color var(--transition-base);
}

body.demo-yoga #ez-toc-container nav :is(.ez-toc-link, a),
body.demo-yoga .ez-toc-list li a {
	color: var(--color-text);
	transition: color var(--transition-fast);
}

body.demo-yoga #ez-toc-container nav :is(.ez-toc-link, a):hover,
body.demo-yoga .ez-toc-list li a:hover {
	color: var(--color-accent);
}

/* ---------- Countdown de eventos (wp-events-manager) ---------- */
body.demo-yoga :is(.tp-event-countdown, .event-countdown, [class*="countdown"]) :is(.countdown-amount, .amount) {
	color: var(--color-heading);
	font-family: var(--font-title);
}

body.demo-yoga :is(.tp-event-countdown, .event-countdown, [class*="countdown"]) :is(.countdown-period, .period, .label) {
	color: var(--color-text-muted);
}

/* ---------- Mega menú / desplegables del header ---------- */
body.demo-yoga .thim-ekits-menu__dropdown,
body.demo-yoga ul.thim-ekits-menu__content {
	transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

html.thim-ekit-dark-mode body.demo-yoga :is(.thim-ekits-menu__dropdown, ul.thim-ekits-menu__content) {
	background-color: var(--color-surface);
	box-shadow: var(--shadow-2);
}

html.thim-ekit-dark-mode body.demo-yoga .thim-ekits-menu__dropdown :is(a, .thim-ekits-menu__nav-link, li) {
	color: var(--color-text);
}

html.thim-ekit-dark-mode body.demo-yoga .thim-ekits-menu__dropdown :is(a, .thim-ekits-menu__nav-link):hover {
	color: var(--color-accent);
}

/* Header sticky coherente con el modo (por si algún estilo quedó fijo) */
html.thim-ekit-dark-mode body.demo-yoga :is(.elementor-sticky--active, header.site-header.sticky, .sticky-wrapper.is-sticky .site-header) {
	background-color: var(--color-sticky-bg);
	color: var(--color-sticky-text);
}

/* ---------- Cards y listados: hover uniforme, sin saltos ---------- */
body.demo-yoga :is(.thim-ekit-course-items .item, .thim-ekits-course-category .item, .lp-course-item) {
	transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

body.demo-yoga :is(.thim-ekit-course-items .item:hover, .thim-ekits-course-category .item:hover) {
	box-shadow: var(--shadow-2);
	border-color: var(--color-accent);
}

/* ---------- Newsletter (TICK-003) ---------- */
.akd-newsletter {
	max-width: 460px;
	font-family: var(--font-body);
}

.akd-newsletter__title {
	color: var(--color-heading);
	font-family: var(--font-title);
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 var(--space-1);
}

.akd-newsletter__text {
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
	font-size: 14px;
}

.akd-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.akd-newsletter__label {
	display: block;
	width: 100%;
	font-size: 13px;
	color: var(--color-text-muted);
	margin-bottom: 2px;
}

.akd-newsletter__input {
	flex: 1 1 200px;
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-l);
	background-color: var(--color-bg-alt);
	color: var(--color-text);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.akd-newsletter__input:focus {
	border-color: var(--color-accent);
	outline: none; /* hay reemplazo: ring con box-shadow */
	box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.35);
}

.akd-newsletter__button {
	padding: 12px 24px;
	border: 0;
	border-radius: var(--radius-l);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	font-weight: 700;
	cursor: pointer;
	transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.akd-newsletter__button:hover {
	background-color: var(--color-accent-hover);
	box-shadow: var(--shadow-1);
	transform: translateY(-1px);
}

.akd-newsletter__button:active {
	transform: translateY(0);
}

.akd-newsletter__privacy {
	font-size: 12px;
	color: var(--color-text-muted);
	margin: var(--space-2) 0 0;
}

/* ---------- Header: menú de navegación en modo oscuro ----------
   El widget thim-ekits-nav-menu define --menu-text-color:#0d1b2a (navy,
   para modo claro) SOBRE el propio widget vía CSS de Elementor. En oscuro
   eso pinta las letras navy-sobre-navy (invisibles). Se redefine la
   variable AL NIVEL DEL WIDGET con especificidad mayor (html+body+widget)
   para que el cambio de modo se aplique al instante en TODOS los menús. */
html.thim-ekit-dark-mode body.demo-yoga .elementor-widget-thim-ekits-nav-menu {
	--menu-text-color: var(--color-text);
	--menu-text-color-hover: var(--color-accent-hover);
	--menu-icon-color: var(--color-text);
}

/* Red de seguridad: color directo de los enlaces e iconos del menú,
   incluido el estado pegajoso (sticky) y el menú móvil. */
html.thim-ekit-dark-mode body.demo-yoga :is(
	.thim-ekits-menu__nav-link,
	.thim-ekits-menu__nav > li > a,
	.thim-ekits-menu__nav-text,
	.thim-ekits-menu__icon,
	.thim-ekits-menu .thim-ekits-menu__nav > li
) {
	color: var(--color-text);
}

html.thim-ekit-dark-mode body.demo-yoga :is(
	.thim-ekits-menu__nav-link:hover,
	.thim-ekits-menu__nav > li:hover > a
) {
	color: var(--color-accent-hover);
}

/* El ícono de flecha de los items con dropdown usa ::before */
html.thim-ekit-dark-mode body.demo-yoga .thim-ekits-menu__icon::before {
	background-color: var(--color-text);
}

/* Menú móvil (drawer) en oscuro: fondo y letras coherentes */
html.thim-ekit-dark-mode body.demo-yoga :is(.thim-ekits-menu__container, .thim-ekits-menu__mobile) {
	background-color: var(--color-bg-alt);
}
html.thim-ekit-dark-mode body.demo-yoga .thim-ekits-menu__container :is(a, li, span) {
	color: var(--color-text);
}

/* ---------- Botón "Campus Virtual" ----------
   Siempre en una línea (nowrap), sin encogerse (flex-shrink:0) y con
   padding horizontal compacto para no romper la diagramación del header.
   Selector real: a.widget-button del widget thim-button de Thim EKit. */
body.demo-yoga .thim-ekit__header .elementor-widget-thim-button .widget-button,
body.demo-yoga .thim-ekit__header a.widget-button {
	white-space: nowrap;
	flex-shrink: 0;
	padding: 0.5rem 1rem;
	transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-fast);
}

body.demo-yoga .thim-ekit__header .elementor-widget-thim-button {
	flex-shrink: 0;
}

@media (max-width: 1024px) {
	/* Antes del breakpoint móvil: logo + menú + toggle + botón sin montarse */
	body.demo-yoga .thim-ekit__header .e-con-inner {
		gap: var(--space-2);
	}
	body.demo-yoga .thim-ekit__header .elementor-widget-thim-ekits-nav-menu {
		min-width: 0;
	}
}

/* ---------- Sidebar de curso (meta: Niveles, Estudiantes, Duración...) ----------
   El tema pinta los valores con color fijo claro (--thim-font-title-color #111
   en claro / #f4f1ea en oscuro) sobre fondos del modo contrario. Se fuerza el
   uso de los tokens para que label y valor hereden el modo real. */
body.demo-yoga .thim-ekit-single-course__meta > span,
body.demo-yoga .thim-ekit-single-course__extra__items > div,
body.demo-yoga .thim-ekit-single-course__extra .thim-ekit-single-course__extra__item {
	color: var(--color-text);
}

body.demo-yoga .thim-ekit-single-course__meta > span .value,
body.demo-yoga .thim-ekit-single-course__extra .value {
	color: var(--color-heading);
	font-weight: 600;
}

/* La caja lateral de compra usa superficie con borde del sistema en ambos modos */
body.demo-yoga .thim-ekit-single-course__extra,
body.demo-yoga .single-course-sidebar,
body.demo-yoga .course-extra {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
}

/* ---------- DARK MODE: fondos claros residuales ----------
   Auditoría 2026-09-24: en oscuro sobrevivían superficies claras fijas
   definidas por el CSS generado de Elementor (post-574.css, post-598.css)
   con selectores de especificidad (0,4,0)–(0,5,1) y variables de color
   fijas del kit (#f4f1ea / #f5f5f5), ajenas al sistema de tokens.
   !important justificado: es la única forma de anular colores fijos del
   CSS generado por Elementor (que no distingue modo oscuro) sin editar
   cada plantilla en la base de datos. Alcance acotado a dark mode. */

/* Tarjetas del sidebar de curso (precio/meta/wishlist y compartir) */
html.thim-ekit-dark-mode body.demo-yoga :is(
	.elementor-element-4d073523,
	.elementor-element-28f296e5,
	.content-widget-social-share
) {
	background-color: var(--color-surface) !important;
}

/* Cabecera de cada sección del programa (curriculum) */
html.thim-ekit-dark-mode body.demo-yoga :is(.course-section-header, .lp-course-curriculum .course-section .course-section-header) {
	background-color: var(--color-surface-2) !important;
}

/* Textos fijos oscuros dentro de las tarjetas ahora oscuras
   (títulos de icon-box del meta: Precio, Niveles, Estudiantes...) */
html.thim-ekit-dark-mode body.demo-yoga :is(
	.elementor-element-4d073523,
	.elementor-element-28f296e5,
	.content-widget-social-share
) :is(.elementor-icon-box-title, .elementor-icon-box-description, h4, h5, .title) {
	color: var(--color-text) !important;
}

/* Etiquetas del meta del curso (Niveles, Estudiantes, Duración, Lección,
   Idioma): color fijo #0d1b2a del post CSS -> claro sobre tarjeta oscura */
html.thim-ekit-dark-mode body.demo-yoga :is(
	.thim-ekit-single-course__meta .label,
	.thim-ekit-single-course__meta__count-student,
	.thim-ekit-single-course__meta__count-lesson
) {
	color: var(--color-text) !important;
}

/* Textos dentro de la cabecera de sección del programa */
html.thim-ekit-dark-mode body.demo-yoga .course-section-header :is(.course-section__title, span, div) {
	color: var(--color-heading) !important;
}

/* Precio de oferta: el rojo #c62828 fijo rinde 3.1:1 sobre superficie oscura;
   se aclara en dark para superar 4.5:1 (AA) sin perder la señal de rebaja */
html.thim-ekit-dark-mode body.demo-yoga :is(
	.thim-ekit-single-course__price__price,
	.ins,
	.woocommerce-Price-amount ins
) {
	color: #ef5350 !important;
}

/* Footer: banda crema -> superficie oscura; textos fijos oscuros -> claros.
   Se excluye el botón del newsletter (conserva su dorado corporativo). */
html.thim-ekit-dark-mode body.demo-yoga .thim-ekit__footer .elementor-element-63620c97 {
	background-color: var(--color-bg-alt) !important;
}

html.thim-ekit-dark-mode body.demo-yoga .thim-ekit__footer
	:is(h1, h2, h3, h4, h5, h6, p, a, span, div, li, .elementor-heading-title, .elementor-icon-box-title):not(.akd-newsletter__button) {
	color: var(--color-text) !important;
}

html.thim-ekit-dark-mode body.demo-yoga .thim-ekit__footer a:hover {
	color: var(--color-accent-hover) !important;
}

/* ════════════════════════════════════════════════════════════════
   HEADER UNIFICADO — fondo único por modo + menú responsive
   ---------------------------------------------------------------
   Auditoría 2026-09-24 (alerta bloqueante):
   - El contenedor principal del header (14fa95ca, plantillas 610 y
     equivalente en 12162) trae un fondo NAVY FIJO #0a1628 del CSS
     generado por Elementor: en modo claro pinta una franja oscura
     sobre página clara y en oscuro un navy distinto del fondo real
     (#0a1628 vs #0b0f19) => "doble fondo" con corte visible.
   - El breakpoint real del menú Thim es 1025px, pero el nav (7 items
     + toggle + botón) desborda desde ~1200px y en tablet/móvil no
     aparece la hamburguesa => menú invisible/ montado.
   Solución: fondo del header = UNA variable por modo; hamburguesa
   forzada <=1200px con drawer funcional; nav oculto en ese rango.
   !important justificado: anula colores y displays fijos del CSS
   generado por Elementor/Thim (post-*.css, frontend.css) que no
   distinguen modo ni viewport real del contenido.
   ════════════════════════════════════════════════════════════════ */

/* -- 1) Fondo único del header por modo -- */
body.demo-yoga .thim-ekit__header :is(.elementor-element-14fa95ca, .elementor-element-bd563f7),
body.demo-yoga .thim-ekit__header__inner {
	/* claro: superficie clara institucional; oscuro: mismo navy estelar que la página */
	background-color: var(--color-header-surface) !important;
}

:root,
html.thim-ekit-light-mode {
	--color-header-surface: #ffffff;
}

html.thim-ekit-dark-mode {
	--color-header-surface: #0b0f19; /* idéntico al fondo de página: sin corte */
}

/* El texto del header sigue el modo (navy fijo -> token) */
body.demo-yoga .thim-ekit__header {
	color: var(--color-header-text);
}

:root { --color-header-text: #1c2430; }
html.thim-ekit-light-mode { --color-header-text: #1c2430; }
html.thim-ekit-dark-mode { --color-header-text: #e2e8f0; }

/* En modo claro el menú vuelve a navy institucional (la variable del
   widget está pensada para header oscuro del demo) */
html.thim-ekit-light-mode body.demo-yoga .elementor-widget-thim-ekits-nav-menu {
	--menu-text-color: #1c2430;
	--menu-text-color-hover: #8c6a2f;
}

/* -- 2) Menú responsive real: hamburguesa <= 1200px -- */
@media (max-width: 1200px) {
	/* ocultar el nav horizontal y mostrar la hamburguesa nativa de Thim */
	body.demo-yoga .thim-ekits-menu__nav {
		display: none !important;
	}
	body.demo-yoga .thim-ekits-menu__mobile {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		color: var(--color-header-text);
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	/* el drawer móvil nativo: fondo por modo, legible y fluido */
	body.demo-yoga .thim-ekits-menu__container {
		background-color: var(--color-bg) !important;
		box-shadow: var(--shadow-2);
	}

	body.demo-yoga .thim-ekits-menu__container :is(a, li, span, .thim-ekits-menu__nav-link) {
		color: var(--color-text) !important;
	}

	/* fila del header: logo | hamburguesa | toggle | campus, sin montarse */
	body.demo-yoga .thim-ekit__header .e-con-inner {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2) !important;
		flex-wrap: nowrap !important;
	}

	body.demo-yoga .thim-ekit__header .e-con-inner > .elementor-element {
		flex-shrink: 0;
	}
	body.demo-yoga .thim-ekit__header .elementor-widget-thim-ekits-site-logo {
		margin-right: auto; /* empuja acciones a la derecha */
	}
}

/* ---------- Impresión ---------- */
@media print {
	body.demo-yoga .akd-newsletter,
	body.demo-yoga #ez-toc-container {
		display: none;
	}
}