/**
 * Esther Perarnau Cursos — LearnDash, WooCommerce y WPML
 * ══════════════════════════════════════════════════════
 *
 * Solo lo propio de esta web. La paleta y su aplicación básica vienen de
 * paleta.css y base.css, comunes con estherperarnau.com.
 *
 * Aquí van KLS (las landings) y KPS (las páginas). Los cuatro ejes de
 * identidad tienen que estar puestos en *Landings KLS → Ajustes globales*, y
 * KPS los hereda de ahí si no tiene los suyos.
 *
 * El usuario no está leyendo una biografía: está comprando un curso o
 * cursándolo. Eso cambia dos cosas respecto a la web profesional —el acento
 * aparece más, porque hay más acciones, y hay estados que comunican
 * (completado, en progreso, bloqueado) que necesitan contraste suficiente
 * para no depender solo del color.
 *
 * Con la paleta reducida no hay verde intermedio, así que los estados se
 * distinguen por **petróleo frente a acento**, y siempre acompañados del
 * icono que ya trae LearnDash.
 */

/* ═══ LearnDash: tarjetas y listados de curso ════════════════════════════ */

.ld-course-list-items .ld_course_grid .thumbnail,
.learndash-wrapper .ld-course-list-items .ld-course-list-item {
	background-color: var(--color-bg-blanco);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra-suave);
	overflow: hidden;
}

.learndash-wrapper .ld-course-list-items h3,
.learndash-wrapper .ld-item-title {
	color: var(--color-heading);
}

/* ═══ LearnDash: barra de progreso ═══════════════════════════════════════ */

/* El canal tiene que verse aunque el progreso sea 0 %, o el alumno no sabe
   que hay barra. El fondo cálido sobre blanco es flojo, así que lleva además
   un borde: la barra se ve por su forma, no solo por su color. */
.learndash-wrapper .ld-progress-bar {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-borde);
	border-radius: 999px;
	overflow: hidden;
}

.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
	background-color: var(--esther-oscuro);
	border-radius: 999px;
}

/* Al completar, acento: es el único momento del curso que merece el color de
   atención. */
.learndash-wrapper .ld-progress-bar.ld-progress-bar-complete .ld-progress-bar-percentage,
.learndash-wrapper .ld-status-complete {
	background-color: var(--color-cta-bg);
	color: var(--color-cta-texto);
}

.learndash-wrapper .ld-progress-heading,
.learndash-wrapper .ld-progress-stats {
	color: var(--color-text-suave);
}

/* ═══ LearnDash: temario ═════════════════════════════════════════════════ */

.learndash-wrapper .ld-item-list-item {
	background-color: var(--color-bg-blanco);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio);
	margin-bottom: .5rem;
}

.learndash-wrapper .ld-item-list-item.ld-is-current-lesson,
.learndash-wrapper .ld-item-list-item-preview.ld-is-current-lesson {
	border-color: var(--esther-oscuro);
	border-left-width: 4px;
	background-color: var(--color-bg-alt);
}

/* Estados. El color no puede ser lo único que los distinga: quien no
   distingue un tono de otro tiene que poder saber qué lección ha terminado,
   así que el icono de LearnDash se queda y esto solo lo colorea. */
.learndash-wrapper .ld-status-icon.ld-status-complete,
.learndash-wrapper .ld-icon-checkmark {
	background-color: var(--esther-oscuro);
	color: var(--color-text-inverso);
}

.learndash-wrapper .ld-status-icon.ld-status-incomplete {
	border-color: var(--color-borde-campo);
	color: var(--color-borde-campo);
}

/* Bloqueado: no un gris apagado, el tono sutil de la paleta — que además se
   lee (4.52:1), porque suele llevar el texto "bloqueado" al lado. */
.learndash-wrapper .ld-status-icon.ld-status-waiting,
.learndash-wrapper .ld-item-list-item.ld-is-locked .ld-item-title {
	color: var(--color-text-sutil);
}

/* ═══ LearnDash: botones ═════════════════════════════════════════════════ */

.learndash-wrapper .ld-button,
.learndash-wrapper input[type="submit"].ld-button {
	background-color: var(--color-cta-bg);
	border: 2px solid var(--color-cta-bg);
	border-radius: var(--radio);
	color: var(--color-cta-texto);
	font-weight: 600;
	transition: background-color .2s ease, border-color .2s ease;
}

.learndash-wrapper .ld-button:hover,
.learndash-wrapper input[type="submit"].ld-button:hover {
	background-color: var(--color-cta-bg-hover);
	border-color: var(--color-cta-bg-hover);
	color: var(--color-cta-texto);
}

.learndash-wrapper .ld-button.ld-button-transparent {
	background-color: transparent;
	border-color: var(--esther-oscuro);
	color: var(--esther-oscuro);
}

/* ═══ LearnDash: Modo enfoque ════════════════════════════════════════════ */

/* La barra lateral en petróleo y el contenido en marfil: el alumno sigue en
   la misma web, no en una pantalla gris de LearnDash. */
.learndash-wrapper .ld-focus {
	background-color: var(--color-bg);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading {
	background-color: var(--color-bg-oscuro);
	color: var(--color-text-inverso);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar a,
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-item-title {
	color: var(--color-text-inverso);
}

.learndash-wrapper .ld-focus .ld-focus-sidebar a:hover {
	color: var(--color-bg-calido);
}

/* La lección en curso, dentro de la barra oscura: un tono más claro del
   petróleo, que es justo el que derivan los plugins para las tarjetas. */
.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-is-current-lesson {
	background-color: var(--color-bg-oscuro-alt);
}

.learndash-wrapper .ld-focus .ld-focus-header {
	background-color: var(--color-bg-blanco);
	border-bottom: 1px solid var(--color-borde);
}

/* ═══ LearnDash: cuestionarios ═══════════════════════════════════════════ */

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList {
	background-color: var(--color-bg-blanco);
	border-radius: var(--radio);
}

/* Acierto y fallo. El texto va en carbón sobre fondos claros, no en blanco
   sobre color saturado: son mensajes que hay que leer con calma. Y el filete
   lateral es lo que los diferencia de un vistazo. */
.learndash-wrapper .wpProQuiz_correct,
.learndash-wrapper .wpProQuiz_response .wpProQuiz_correct {
	background-color: var(--color-bg-alt);
	border-left: 4px solid var(--esther-oscuro);
	color: var(--esther-texto);
}

.learndash-wrapper .wpProQuiz_incorrect,
.learndash-wrapper .wpProQuiz_response .wpProQuiz_incorrect {
	background-color: var(--color-bg-calido);
	border-left: 4px solid var(--color-cta-bg);
	color: var(--esther-texto);
}

/* ═══ WooCommerce ════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product,
.woocommerce div.product .woocommerce-tabs {
	background-color: var(--color-bg-blanco);
	border-radius: var(--radio);
}

.woocommerce ul.products li.product h2,
.woocommerce div.product .product_title {
	color: var(--color-heading);
}

/* El precio en petróleo, no en acento: el precio es información, no una
   llamada a la acción. El acento se guarda para el botón y para el precio
   rebajado, que sí es un argumento. */
.woocommerce div.product p.price,
.woocommerce ul.products li.product .price {
	color: var(--esther-oscuro);
	font-weight: 700;
}

.woocommerce div.product p.price del {
	color: var(--color-text-sutil);
	font-weight: 400;
}

.woocommerce div.product p.price ins {
	color: var(--color-cta-bg);
	text-decoration: none;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--color-cta-bg);
	border-radius: var(--radio);
	color: var(--color-cta-texto);
	font-weight: 600;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background-color: var(--color-cta-bg-hover);
	color: var(--color-cta-texto);
}

/* Avisos. WooCommerce los pinta en verde sanitario y en rojo de error, los
   dos colores que la guía descarta expresamente. Aquí se distinguen por el
   filete superior, no por el fondo. */
.woocommerce-message,
.woocommerce-info {
	background-color: var(--color-bg-alt);
	border-top-color: var(--esther-oscuro);
	color: var(--esther-texto);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--esther-oscuro);
}

.woocommerce-error {
	background-color: var(--color-bg-calido);
	border-top-color: var(--color-cta-bg);
	color: var(--esther-texto);
}

.woocommerce-error::before {
	color: var(--color-cta-bg);
}

/* ═══ WPML: selector de idioma ═══════════════════════════════════════════ */

/* Cinco idiomas caben mal en una fila; el desplegable se queda. Lo que hay
   que asegurar es que el idioma activo se distinga por algo más que el color
   —va en negrita— y que el desplegable no herede el blanco de WPML sobre el
   marfil de la web. */
.wpml-ls-legacy-dropdown .wpml-ls-item-toggle,
.wpml-ls-legacy-dropdown-click .wpml-ls-item-toggle {
	background-color: var(--color-bg-blanco);
	border: 1px solid var(--color-borde-campo);
	border-radius: var(--radio);
	color: var(--color-text);
}

.wpml-ls-legacy-dropdown .wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown-click .wpml-ls-sub-menu {
	background-color: var(--color-bg-blanco);
	border: 1px solid var(--color-borde-campo);
	border-radius: var(--radio);
	box-shadow: var(--sombra-suave);
}

.wpml-ls-legacy-dropdown a:hover,
.wpml-ls-legacy-dropdown a:focus,
.wpml-ls-legacy-list-horizontal a:hover {
	background-color: var(--color-bg);
	color: var(--color-link-hover);
}

.wpml-ls-current-language > a {
	font-weight: 700;
	color: var(--esther-oscuro);
}

/* ═══ Barra de menú de Divi ══════════════════════════════════════════════
 *
 * Las reglas están en base.css, comunes con la web profesional. Aquí solo se
 * elige el verde, que es lo único que cambia entre las dos.
 *
 * **Verde oliva oscurecido en vez del petróleo**, a propósito: las dos
 * webs son de Esther y comparten identidad, así que la barra tenía que
 * distinguirlas sin salirse de la paleta. Se probó primero el petróleo claro
 * `#0B5B61` y era demasiado parecido: petróleo también, sólo que más claro.
 * El oliva cambia de familia de tono —100° contra 185°— y ya no se confunden.
 *
 * El desplegable sube otro escalón por el mismo motivo que en la profesional:
 * con el mismo color que la barra no se despegaría de ella. Aquí hay que
 * decirlo a mano porque el valor por defecto —el oscuro alterno— es
 * justamente el que aquí ocupa la barra.
 *
 * Contraste comprobado: marfil sobre este fondo da 9,20:1, y blanco 10,28:1.
 */
:root {
	--barra-bg:         var(--esther-oliva-oscuro);
	--barra-submenu-bg: var(--esther-oliva-oscuro-alt);
}