/*
 * Jessi Lashes · academia (Tutor LMS 4.1.3 gratis): las pantallas de Tutor con los colores y las letras de la web,
 * y las piezas que pinta el plugin (jl-aviso, jl-cerrado, jl-cerrado-nota, jl-curso-info).
 *
 * La carga functions.php (handle jl-academia) solo con Tutor activo, en wp_enqueue_scripts con prioridad 20: sale
 * detrás de las hojas de Tutor y gana por orden. Sin plantillas copiadas de Tutor: solo CSS.
 *
 * Tutor tiene dos diseños (classes/Assets.php):
 *  - Antiguo, en la ficha y la lista de cursos, la entrada y su ventana: tutor.min.css (Assets.php:449) y
 *    tutor-front.min.css (:347). Colores en variables --tutor-color-* y muchos fondos blancos fijos. Va con
 *    «body.tutor-lms», la clase que Tutor pone en todas las páginas (Assets.php:768), para que gane a sus reglas.
 *  - Nuevo, en el panel de la alumna y el aula: tutor-core.min.css (:901), tutor-dashboard.min.css (:913) y
 *    tutor-learning-area.min.css (:918). Todo con variables (--tutor-surface-*, --tutor-text-*…): basta con darles
 *    nuestros valores.
 * Las reglas de Tutor que se citan están en esos ficheros minificados (una sola línea): se cita el selector.
 *
 * Solo variables de theme.json (y, para recolocar un color de Tutor, otra variable de Tutor). Móvil primero.
 * Contrastes medidos (WCAG): blanco roto sobre negro 16,6:1 y sobre ciruela 15,3:1; texto suave sobre ciruela
 * 10,2:1; gris rosado sobre ciruela 8,1:1 y sobre borde 5,5:1; rosa sobre ciruela 9,0:1; tinta sobre rosa 9,2:1
 * (blanco sobre rosa: 2,0:1, no se lee); borde de campo sobre ciruela 4,1:1 (campos, mínimo 3:1).
 * !important solo para ganar a un !important de Tutor, y con el selector de Tutor al lado.
 */

/* ------------------------------------------------------------------------------------------------------------
 * 1. Letras y un tono de apoyo (los dos diseños)
 * --------------------------------------------------------------------------------------------------------- */

:root {
	/* El diseño nuevo las lee con «Inter» de reserva (116 y 9 usos en tutor-core.min.css, p. ej. «html»). */
	--tutor-font-family-body: var(--wp--preset--font-family--texto);
	--tutor-font-family-heading: var(--wp--preset--font-family--titulares);

	/* Superficie en relieve (encima de una tarjeta, al pasar el ratón): mitad borde, mitad ciruela. */
	--jl-academia-relieve: color-mix(in srgb, var(--wp--preset--color--borde) 50%, var(--wp--preset--color--ciruela));
}

/* ------------------------------------------------------------------------------------------------------------
 * 2. Diseño nuevo (panel y aula): variables
 *
 * Tutor las define en «:root,[data-tutor-theme=light]», «[data-tutor-theme=dark]» y sus variantes de contraste y
 * de visión (tutor-core.min.css, al principio). Las dos líneas juntas valen siempre, con o sin atributo (sin sesión,
 * la entrada del panel no lo lleva: classes/UserPreference.php:249-254), y pesan 0,2,0: ganan a todas por orden.
 * Los colores de estado se quedan los de Tutor, que functions.php deja en su juego oscuro, salvo el rojo de error (aquí,
 * rosa) y el verde de aprobado (bloque siguiente): los dos de Tutor no llegan a 4,5:1 sobre estos fondos.
 * --------------------------------------------------------------------------------------------------------- */

:root[data-tutor-theme],
:root:not([data-tutor-theme]) {
	/* Superficies: página negra, tarjetas ciruela, relieve al pasar el ratón. */
	--tutor-surface-base: var(--wp--preset--color--negro);
	--tutor-surface-l1: var(--wp--preset--color--ciruela);
	--tutor-surface-l1-hover: var(--jl-academia-relieve);
	--tutor-surface-l2: var(--jl-academia-relieve);
	--tutor-surface-l2-hover: var(--wp--preset--color--borde);
	--tutor-surface-l3: var(--wp--preset--color--negro);
	--tutor-surface-sidebar-l1: var(--wp--preset--color--ciruela-2);
	--tutor-surface-dark: var(--wp--preset--color--borde);
	--tutor-surface-brand-primary: var(--wp--preset--color--rosa);
	--tutor-surface-brand-primary-2: var(--wp--preset--color--vino);
	--tutor-surface-brand-secondary: var(--wp--preset--color--vino);
	--tutor-surface-brand-tertiary: var(--jl-academia-relieve);
	--tutor-surface-brand-quaternary: var(--wp--preset--color--vino);
	--tutor-surface-brand-dark: var(--wp--custom--color--noche);
	--tutor-surface-exception7: var(--wp--preset--color--vino);

	/* Textos. Los errores, en rosa como en la tienda (el rojo de Tutor sobre ciruela da 3,7:1). */
	--tutor-text-primary: var(--wp--preset--color--blanco-roto);
	--tutor-text-secondary: var(--wp--preset--color--texto-suave);
	--tutor-text-subdued: var(--wp--preset--color--gris-rosado);
	--tutor-text-disabled: var(--wp--custom--color--borde-campo);
	--tutor-text-brand: var(--wp--preset--color--rosa);
	--tutor-text-brand-hover: var(--wp--preset--color--blanco-roto);
	--tutor-text-brand-secondary: var(--wp--preset--color--rosa-claro);
	--tutor-text-critical: var(--wp--preset--color--rosa);
	--tutor-text-critical-hover: var(--wp--preset--color--blanco-roto);

	/* Iconos. Sobre rosa (botón, casilla marcada, insignia), tinta. */
	--tutor-icon-idle: var(--wp--preset--color--texto-suave);
	--tutor-icon-hover: var(--wp--preset--color--blanco);
	--tutor-icon-secondary: var(--wp--preset--color--gris-rosado);
	--tutor-icon-subdued: var(--wp--preset--color--gris-rosado);
	--tutor-icon-disabled: var(--wp--custom--color--borde-campo);
	--tutor-icon-brand: var(--wp--preset--color--rosa);
	--tutor-icon-brand-hover: var(--wp--preset--color--blanco-roto);
	--tutor-icon-brand-secondary: var(--wp--preset--color--borde);
	--tutor-icon-idle-inverse: var(--wp--preset--color--tinta);

	/* Botones rectos, como los de la web; el principal, rosa y blanco roto al pasar el ratón. */
	--tutor-button-primary: var(--wp--preset--color--rosa);
	--tutor-button-primary-hover: var(--wp--preset--color--blanco-roto);
	--tutor-button-primary-focused: var(--wp--preset--color--rosa);
	--tutor-button-primary-disabled: var(--wp--preset--color--borde);
	--tutor-button-primary-soft: var(--jl-academia-relieve);
	--tutor-button-primary-soft-hover: var(--wp--preset--color--borde);
	--tutor-button-primary-soft-focused: var(--jl-academia-relieve);
	--tutor-button-secondary: var(--jl-academia-relieve);
	--tutor-button-secondary-hover: var(--wp--preset--color--borde);
	--tutor-button-secondary-focused: var(--jl-academia-relieve);
	--tutor-button-disabled: var(--jl-academia-relieve);
	--tutor-button-outline-inverse: var(--wp--preset--color--ciruela);
	--tutor-button-outline-hover: var(--jl-academia-relieve);
	--tutor-button-outline-focused-inverse: var(--wp--preset--color--ciruela);
	--tutor-button-ghost-hover: var(--jl-academia-relieve);
	--tutor-button-radius: 0;
	--tutor-input-radius: 0;

	/* Bordes: el de las tarjetas de la web; en los campos, el de 3:1 como mínimo. */
	--tutor-border-idle: var(--wp--preset--color--borde);
	--tutor-border-idle2: var(--wp--preset--color--borde);
	--tutor-border-hover: var(--wp--custom--color--borde-campo);
	--tutor-border-tertiary: var(--wp--custom--color--borde-campo);
	--tutor-border-inverse: var(--wp--preset--color--borde);
	--tutor-border-dark: var(--wp--preset--color--borde);
	--tutor-border-brand: var(--wp--preset--color--rosa);
	--tutor-border-brand-secondary: var(--wp--preset--color--borde);
	--tutor-border-brand-tertiary: var(--wp--preset--color--rosa);
	--tutor-input-border-color: var(--wp--custom--color--borde-campo);

	/* Pestañas, menú lateral, acciones y opciones de examen. */
	--tutor-tab-sidebar-l2-hover: var(--jl-academia-relieve);
	--tutor-tab-sidebar-l2-active: var(--jl-academia-relieve);
	--tutor-tab-sidebar-l4-hover: var(--jl-academia-relieve);
	--tutor-tab-sidebar-l4-active: var(--jl-academia-relieve);
	--tutor-tab-l3: var(--jl-academia-relieve);
	--tutor-tab-l3-hover: var(--wp--preset--color--borde);
	--tutor-tab-l3-active: var(--jl-academia-relieve);
	--tutor-tab-l3-active-hover: var(--wp--preset--color--borde);
	--tutor-actions-brand-primary: var(--wp--preset--color--rosa);
	--tutor-actions-brand-secondary: var(--wp--preset--color--vino);
	--tutor-actions-brand-tertiary: var(--jl-academia-relieve);
	--tutor-actions-gray-empty: var(--wp--preset--color--ciruela);
	--tutor-actions-gray-secondary: var(--jl-academia-relieve);
	--tutor-actions-gray-tertiary: var(--wp--preset--color--ciruela);
	--tutor-actions-gray-quaternary: var(--wp--preset--color--negro);
	--tutor-quiz-idle: var(--wp--preset--color--ciruela);
	--tutor-quiz-hover: var(--jl-academia-relieve);
	--tutor-visual-brand-1: var(--wp--preset--color--rosa);
	--tutor-visual-brand-2: var(--wp--preset--color--ciruela-oscuro);
	--tutor-visual-brand-3: var(--wp--preset--color--vino);

	/* Anillo de foco de Tutor: «box-shadow: 0 0 0 2px var(--tutor-brand-450)» en botones, campos y pestañas
	   (51 usos en tutor-core.min.css, p. ej. «.tutor-btn:focus-visible»). Rosa, como el foco de la web. */
	--tutor-brand-450: var(--wp--preset--color--rosa);
}

/* Verde de aprobado y de respuesta correcta. El de Tutor en oscuro («[data-tutor-theme=dark]{…--tutor-surface-success:
   #0c3114;…--tutor-text-success:#24983f;…--tutor-actions-success-tertiary:#333741…}») da 3,85:1 en la opción correcta
   del examen y en su repaso («.tutor-quiz-question-option[data-option=correct]», tutor-learning-area.min.css) y 3,20:1
   en la insignia «Aprobado» («.tutor-badge-success», tutor-core.min.css). Aquí: letra, el verde claro del propio Tutor
   (--tutor-actions-success-secondary, #9cd7a9 en claro y en oscuro); fondo, su verde al 25 % sobre negro (#132e1a:
   8,8:1); insignia sobre el relieve (#33202c: 9,2:1); sobre ciruela, 10,9:1, y sobre negro, 11,9:1. Los tres a la vez
   y con cualquier tema: en claro, #9cd7a9 sobre el fondo claro de Tutor (#eaf6ec) daría 1,5:1. Sin data-tutor-vision
   (Tutor lo quita en visión normal: classes/UserPreference.php:285-289; tutor-core.js, applyVision), para no pisar sus
   juegos de daltonismo («[data-tutor-theme=dark][data-tutor-vision=protanopia]…», 0,2,0, que llevan su propio verde).
   Pesan 0,3,0 y 0,2,0. */
:root[data-tutor-theme]:not([data-tutor-vision]),
:root:not([data-tutor-theme]) {
	--tutor-text-success: var(--tutor-actions-success-secondary);
	--tutor-surface-success: color-mix(in srgb, var(--tutor-actions-success-primary) 25%, var(--wp--preset--color--negro));
	--tutor-actions-success-tertiary: var(--jl-academia-relieve);
}

/* Fondo rosa (o verde de «hecho»): letra tinta. Tutor les pone --tutor-text-primary-inverse, blanco en los dos modos
   (tutor-core.min.css: «.tutor-btn-primary», «.tutor-badge-primary», «.tutor-badge-success-solid»; aula:
   «.tutor-lesson-content .tutor-mark-as-complete-button.completed» y, en los números del examen, «.answered» y
   «.active»). Se cambia solo dentro de esas piezas: en el resto (rojo, información) el blanco se lee. */
:is(.tutor-btn-primary, .tutor-badge-primary, .tutor-badge-success-solid, .tutor-mark-as-complete-button.completed, .tutor-quiz-question-paginate-item) {
	--tutor-text-primary-inverse: var(--wp--preset--color--tinta);
}

/* Anillo de foco del botón rosa en blanco roto: rosa junto a rosa no se vería. */
.tutor-btn-primary {
	--tutor-brand-450: var(--wp--preset--color--blanco-roto);
}

/* Botón principal desactivado: fondo borde y letra gris rosado (5,5:1), que se note que no se puede pulsar. */
.tutor-btn-primary:is(:disabled, .disabled) {
	--tutor-text-primary-inverse: var(--wp--preset--color--gris-rosado);
}

/* Titulares de Tutor en Playfair a 400, como los de la web (Tutor los pone a 500-700: «.tutor-h1»… «.tutor-h5»). */
body.tutor-lms :is(.tutor-h1, .tutor-h2, .tutor-h3, .tutor-h4, .tutor-h5) {
	font-weight: 400;
}

/* Aula: el texto de la lección se lee mejor con el interlineado de la web (Tutor: 1.375rem fijo, en
   «.tutor-lesson-content .tutor-lesson-wrapper»). Los enlaces, subrayados: el rosa junto al texto suave no se
   distingue solo por el color (Tutor quita el subrayado en «.tutor-learning-area a»). */
body.tutor-lms .tutor-lesson-content .tutor-lesson-wrapper {
	line-height: 1.7;
}

body.tutor-lms .tutor-lesson-content .tutor-lesson-wrapper a:not([class*="tutor-btn"]) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

body.tutor-lms .tutor-lesson-content .tutor-lesson-wrapper :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
}

/* Menú del aula: Tutor quita el contorno al enfocar (« … .tutor-learning-nav-item:focus{outline:none}») y solo
   cambia el fondo. Con el teclado, además, el contorno de la web. */
body .tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav .tutor-learning-nav-item:focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: -2px;
}

/* ------------------------------------------------------------------------------------------------------------
 * 3. Diseño antiguo (ficha y lista de cursos, entrada y su ventana): variables
 *
 * Tutor las define en «:root» (tutor.min.css y tutor-front.min.css, al principio) y vuelve a poner el principal y el
 * texto con su color de marca (en línea tras tutor-frontend: Assets.php:500 y 510-573). En «body» pesan más.
 * Las variables -rgb (fondos suaves al 10-15 %) salen del «Color de marca» de los ajustes de Tutor: con #e7a4bd
 * allí, son rosas; si no, azules muy tenues.
 * --------------------------------------------------------------------------------------------------------- */

body.tutor-lms {
	--tutor-color-primary: var(--wp--preset--color--rosa);
	--tutor-color-primary-hover: var(--wp--preset--color--blanco-roto);
	--tutor-body-color: var(--wp--preset--color--blanco-roto);
	--tutor-border-color: var(--wp--preset--color--borde);
	--tutor-color-white: var(--wp--preset--color--ciruela);
	--tutor-color-secondary: var(--wp--preset--color--texto-suave);
	--tutor-color-muted: var(--wp--preset--color--gris-rosado);
	--tutor-color-subdued: var(--wp--preset--color--gris-rosado);
	--tutor-color-hints: var(--wp--preset--color--gris-rosado);
	--tutor-color-gray: var(--wp--preset--color--borde);
	--tutor-color-gray-10: var(--wp--preset--color--ciruela-2);
}

/* ------------------------------------------------------------------------------------------------------------
 * 4. Diseño antiguo: piezas con color fijo
 * --------------------------------------------------------------------------------------------------------- */

/* Textos grises fijos (tutor.min.css: «.tutor-color-secondary{color:#41454f}», «.tutor-color-muted»,
   «.tutor-color-subdued», «.tutor-color-hints»): sobre negro no se leerían. */
body.tutor-lms .tutor-color-secondary {
	color: var(--wp--preset--color--texto-suave);
}

body.tutor-lms :is(.tutor-color-muted, .tutor-color-subdued, .tutor-color-hints) {
	color: var(--wp--preset--color--gris-rosado);
}

body.tutor-lms .tutor-bg-gray-10 {
	background-color: var(--wp--preset--color--ciruela-2);
}

/* Tarjetas y cajas en ciruela con el borde de jl-tarjeta (tutor.min.css: «.tutor-card{background-color:#fff}»,
   «.tutor-modal-content», «.tutor-modal-content-white»; tutor-front.min.css: la caja de compra
   «.tutor-single-course-sidebar .tutor-sidebar-card .tutor-card-body» y «.tutor-single-course-sidebar-more>div»). */
body.tutor-lms :is(.tutor-card, .tutor-modal-content, .tutor-modal-content-white),
body.tutor-lms .tutor-single-course-sidebar :is(.tutor-sidebar-card .tutor-card-body, .tutor-course-single-info-card),
body.tutor-lms .tutor-single-course-sidebar-more > div {
	background-color: var(--wp--preset--color--ciruela);
}

body.tutor-lms .tutor-modal-content {
	border-color: var(--wp--preset--color--borde);
}

/* Listas en tarjeta (tutor.min.css: «.tutor-card-list-item», sus filas pares y su línea #cdcfd5). */
body.tutor-lms .tutor-card-list-item {
	background-color: var(--wp--preset--color--ciruela);
}

body.tutor-lms .tutor-card-list-item:nth-child(2n) {
	background-color: var(--wp--preset--color--ciruela-2);
}

body.tutor-lms .tutor-card-list-item:not(:last-child) {
	border-bottom-color: var(--wp--preset--color--borde);
}

/* Temario de la ficha (tutor.min.css: «.tutor-accordion-item», «.tutor-accordion-item-header» y su «.is-active»,
   «.tutor-accordion-item-body-content», «.tutor-course-content-list-item» y su «:hover»). */
body.tutor-lms .tutor-accordion-item {
	background-color: var(--wp--preset--color--ciruela);
	border-color: var(--wp--preset--color--borde);
}

body.tutor-lms .tutor-accordion-item-header {
	background-color: var(--wp--preset--color--ciruela);
}

body.tutor-lms .tutor-accordion-item-header.is-active {
	background-color: var(--jl-academia-relieve);
}

body.tutor-lms .tutor-accordion-item-body-content {
	border-top-color: var(--wp--preset--color--borde);
}

body.tutor-lms .tutor-course-content-list-item {
	background-color: var(--wp--preset--color--ciruela);
}

body.tutor-lms .tutor-course-content-list-item:hover {
	background-color: var(--jl-academia-relieve);
}

/* Icono de cada lección: Tutor lo pone al 35 % del texto oscuro de su tema («rgba(var(--tutor-body-color-rgb),.35)»),
   que sobre ciruela no se ve. */
body.tutor-lms .tutor-course-content-list-item-icon {
	color: var(--wp--preset--color--gris-rosado);
}

/* Avisos del diseño antiguo: fondo blanco y letra gris fijos (tutor.min.css: «.tutor-alert.tutor-warning{color:#41454f;
   …;background:#fff}» y sus hermanos). El borde y el icono de color se quedan. */
body.tutor-lms .tutor-alert:is(.tutor-primary, .tutor-success, .tutor-danger, .tutor-warning) {
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--texto-suave);
}

/* Barras de progreso y círculo (tutor.min.css: «.tutor-progress-bar{background:#e3e5eb}»,
   «.tutor-progress-circle:before{…background:#fff}»). */
body.tutor-lms .tutor-progress-bar {
	background: var(--wp--preset--color--borde);
}

body.tutor-lms .tutor-progress-circle::before {
	background: var(--wp--preset--color--ciruela);
}

/* «Ver más» de la descripción: Tutor funde a blanco («.tutor-toggle-more-collapsed:before»); aquí, a negro. */
body.tutor-lms .tutor-toggle-more-collapsed::before {
	background: linear-gradient(transparent, var(--wp--preset--color--negro) 85%);
}

/* Pestañas de la ficha fijas arriba (tutor.min.css, desde 800 px: «.tutor-course-details-page
   .tutor-course-details-tab .tutor-is-sticky{…background:rgba(255,255,255,.6)}»): fondo negro, sin velo blanco. */
body.tutor-lms .tutor-course-details-tab .tutor-is-sticky {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: var(--wp--preset--color--negro);
}

/* Pestañas: al menos 44 px de alto (tutor.min.css: «.tutor-nav-link{…padding:8px 20px}»). */
body.tutor-lms .tutor-nav-link {
	min-height: 44px;
}

/* Reseñas (tutor-front.min.css: «.tutor-review-individual-item{border-top:1px solid #e8eff1}»). */
body.tutor-lms .tutor-review-individual-item {
	border-top-color: var(--wp--preset--color--borde);
}

/* Iniciales de quien no tiene foto, sobre rosa (tutor.min.css: «.tutor-avatar-text{color:rgba(255,255,255,.8);…}»);
   nivel del curso en la tarjeta («.tutor-course-card .tutor-course-difficulty-level{…color:#fff}»). */
body.tutor-lms :is(.tutor-avatar-text, .tutor-course-card .tutor-course-difficulty-level) {
	color: var(--wp--preset--color--tinta);
}

/* Paginación de la lista: botones de 44 × 44 (tutor.min.css: «… .page-numbers.prev,… .page-numbers.next{…width:32px}»). */
body.tutor-lms .tutor-pagination ul.tutor-pagination-numbers .page-numbers {
	min-width: 44px;
	min-height: 44px;
}

/* ------------------------------------------------------------------------------------------------------------
 * 5. Diseño antiguo: botones y campos
 * --------------------------------------------------------------------------------------------------------- */

/* Rosa con letra tinta, como el botón de la web (tutor.min.css: «.tutor-btn-primary{…color:#fff}» y su «:hover»).
   El principal es rosa (o blanco roto al pasar el ratón) en los dos diseños, así que vale para los dos. */
body.tutor-lms .tutor-btn-primary,
body.tutor-lms .tutor-btn-primary:is(:hover, :focus, :active) {
	color: var(--wp--preset--color--tinta);
}

/* Los botones nativos de la ficha heredaban Arial del navegador, a diferencia de los enlaces del curso. */
body.tutor-lms .tutor-btn {
	font-family: var(--wp--preset--font-family--texto);
}

/* El secundario y el de icono secundario ponen blanco sobre el principal-hover, que aquí es blanco roto
   (tutor.min.css: «.tutor-btn-secondary:hover,…{color:#fff;background-color:var(--tutor-color-primary-hover)}»).
   Solo en las páginas del diseño antiguo: en el nuevo, el secundario es oscuro y su letra la pone Tutor. */
body.tutor-lms :is(.tutor-wrap, .tutor-login-modal) :is(.tutor-btn-secondary, .tutor-iconic-btn-secondary):is(:hover, :focus, :active) {
	color: var(--wp--preset--color--tinta);
}

/* Contorno: el botón secundario de la web (borde rosa, sin fondo; al pasar el ratón, rosa con letra tinta). */
body.tutor-lms .tutor-btn-outline-primary:is(:hover, :focus, :active) {
	background-color: var(--wp--preset--color--rosa);
	border-color: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

/* Desactivados (tutor.min.css: «.tutor-btn-primary[disabled]…{background-color:#e9e9ea…}» y «.tutor-btn[disabled]
   {color:#858689}»): borde y gris rosado, que se note que no se puede pulsar sin parecer un hueco blanco. */
body.tutor-lms :is(.tutor-btn-primary, .tutor-btn-secondary, .tutor-btn-outline-primary):is(:disabled, [disabled], .disabled) {
	background-color: var(--wp--preset--color--borde);
	border-color: var(--wp--preset--color--borde);
	color: var(--wp--preset--color--gris-rosado);
}

/* Grises fijos de los botones de texto y de icono (tutor.min.css: «.tutor-btn-ghost{color:#757c8e…}»,
   «.tutor-iconic-btn{color:#757c8e…}»). Con :where, para que sigan valiendo el rosa al pasar el ratón de Tutor y el
   del botón de icono secundario («.tutor-iconic-btn-secondary{…color:var(--tutor-color-primary)}»). Solo en las
   páginas del diseño antiguo: el nuevo también tiene «.tutor-btn-ghost», con su letra. */
body.tutor-lms :where(.tutor-wrap, .tutor-login-modal) :where(.tutor-btn-ghost, .tutor-iconic-btn:not(.tutor-iconic-btn-secondary)) {
	color: var(--wp--preset--color--gris-rosado);
}

body.tutor-lms .tutor-btn-ghost.tutor-has-underline::after {
	background-color: currentColor;
}

/* Dentro de la ficha, la lista, la entrada y su ventana: botones rectos, en mayúsculas y negrita como los de la web,
   y de 44 px como mínimo para el dedo. Los de texto (enlace y fantasma) se quedan como texto. La ventana va por su
   nombre (views/modal/login.php:13): «.tutor-modal» también la usa el diseño nuevo (tutor-core.min.css). */
body.tutor-lms :is(.tutor-wrap, .tutor-login-modal) .tutor-btn {
	border-radius: 0;
}

body.tutor-lms :is(.tutor-wrap, .tutor-login-modal) :is(.tutor-btn-primary, .tutor-btn-outline-primary, .tutor-btn-secondary) {
	justify-content: center;
	min-height: 44px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
}

body.tutor-lms :is(.tutor-wrap, .tutor-login-modal) .tutor-iconic-btn {
	min-width: 44px;
	min-height: 44px;
}

/* Foco visible donde Tutor lo quita (tutor.min.css: «.tutor-btn-ghost:hover,.tutor-btn-ghost:focus,…{box-shadow:none;
   outline:0}» y «.tutor-meta a:hover,.tutor-meta a:focus,…{…outline:0…}»). */
body.tutor-lms :is(.tutor-btn-ghost, .tutor-meta a):focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: 3px;
}

/* Pestañas de la ficha (templates/single/course/enrolled/nav.php:25): Tutor quita el contorno («.tutor-nav-link,
   .tutor-nav-link:focus,…{box-shadow:none;…outline:0…}», 0,2,0) y gana al foco de enlaces de theme.json (0,1,0).
   Esta pesa 0,3,1. Hacia dentro, para que no se salga de la barra fija. */
body.tutor-lms .tutor-nav-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--rosa);
	outline-offset: -2px;
}

/* Casillas y botones de opción del diseño antiguo («Mantener la sesión iniciada» de la ventana de entrada:
   templates/login-form-legacy.php:74). Tutor pone «outline:none!important» y, al enfocar, un halo rosa al 10 %
   («.tutor-form-check-input.tutor-form-check-input:focus{box-shadow:0 0 0 6px rgba(…,.1)}», 0,3,0), que sobre
   ciruela da #2f222b: 1,2:1. Con sombra, porque el contorno no se puede recuperar: anillo negro y rosa (rosa sobre
   ciruela, 9,0:1). Esta pesa 0,4,1. */
body.tutor-lms .tutor-form-check-input.tutor-form-check-input:focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--negro), 0 0 0 4px var(--wp--preset--color--rosa);
}

/* Campos: fondo negro, letra blanco roto y borde de 3:1, como los de la web. Tutor pone el borde con !important y
   la variable de su color (tutor.min.css: «.tutor-form-control{…border:1px solid var(--tutor-border-color)!important}»):
   se cambia la variable en el propio campo. Al enfocarlo, rosa. */
body.tutor-lms .tutor-form-control {
	--tutor-border-color: var(--wp--custom--color--borde-campo);
	background-color: var(--wp--preset--color--negro);
	border-radius: 0;
	color: var(--wp--preset--color--blanco-roto);
}

body.tutor-lms .tutor-form-control:is(:focus, .is-active) {
	--tutor-border-color: var(--wp--preset--color--rosa);
	box-shadow: 0 0 0 1px var(--wp--preset--color--rosa);
}

body.tutor-lms .tutor-form-control:disabled {
	--tutor-border-color: var(--wp--preset--color--borde);
	background-color: var(--jl-academia-relieve);
}

/* Entrada (tutor-front.min.css: «.tutor-login-wrap input.tutor-form-control,#tutor-login-form input.tutor-form-control
   {background-color:#fff;…border-color:#ececed!important}», su «:placeholder-shown:not(:focus)» en #f5f5f6 y su
   «:focus{box-shadow:0 0 0 2px #90a0f7;border-color:#a4bcf4!important}»). Con el id para pesar más que Tutor. */
body.tutor-lms :is(.tutor-login-wrap, #tutor-login-form) input.tutor-form-control,
body.tutor-lms :is(.tutor-login-wrap, #tutor-login-form) input.tutor-form-control:placeholder-shown:not(:focus) {
	background-color: var(--wp--preset--color--negro);
	border-color: var(--wp--custom--color--borde-campo) !important; /* Tutor: border-color:#ececed!important */
	color: var(--wp--preset--color--blanco-roto);
}

body.tutor-lms :is(.tutor-login-wrap, #tutor-login-form) input.tutor-form-control:focus {
	border-color: var(--wp--preset--color--rosa) !important; /* Tutor: border-color:#a4bcf4!important */
	box-shadow: 0 0 0 1px var(--wp--preset--color--rosa);
}

/* Caja de la entrada (tutor-front.min.css: «.tutor-login-wrap,#tutor-registration-wrap{border:1px solid #ececed;
   border-radius:8px;…box-shadow:…}»): una tarjeta de la web. */
body.tutor-lms .tutor-login-wrap {
	background-color: var(--wp--preset--color--ciruela);
	border-color: var(--wp--preset--color--borde);
	border-radius: 0;
	box-shadow: none;
}

/* Campos de formularios sueltos (tutor-front.min.css: «.tutor-form-group input[type=text]{background:#fff;
   border:1px solid #dcdfe5…}», con número, contraseña y área de texto; marcadores en #b0b6c8). */
body.tutor-lms .tutor-form-group :is(input:not([type="submit"]), textarea),
body.tutor-lms .tutor-form-group :is(input:not([type="submit"]), textarea):focus {
	background: var(--wp--preset--color--negro);
	border-color: var(--wp--custom--color--borde-campo);
	color: var(--wp--preset--color--blanco-roto);
}

body.tutor-lms .tutor-form-group :is(input, textarea)::placeholder,
body.tutor-lms .tutor-form-control::placeholder {
	color: var(--wp--preset--color--gris-rosado);
	opacity: 1;
}

body.tutor-lms .tutor-price-preview-box {
	border-color: var(--wp--preset--color--borde);
}

/* Casillas: borde de 3:1 y, marcadas, ciruela oscuro con la marca blanca de Tutor (blanco sobre rosa: 2,0:1; sobre
   ciruela oscuro: 9,4:1). Tutor: «.tutor-form-check-input.tutor-form-check-input[type=checkbox]:checked{…
   background-color:var(--tutor-color-primary);background-image:url("…fill='%23fff'…")}». */
body.tutor-lms .tutor-form-check-input.tutor-form-check-input {
	--tutor-border-color: var(--wp--custom--color--borde-campo);
}

body.tutor-lms .tutor-form-check-input.tutor-form-check-input[type="checkbox"]:checked {
	background-color: var(--wp--preset--color--ciruela-oscuro);
	border-color: var(--wp--preset--color--rosa);
}

/* ------------------------------------------------------------------------------------------------------------
 * 6. Diseño antiguo: letras y márgenes
 * --------------------------------------------------------------------------------------------------------- */

/* Titulares a 400 (Tutor los pone en negrita con «.tutor-fw-bold» o «.tutor-fw-medium»). El título del curso es el
   h1 de la página: a tamaño «titulo», como los h1 de la web (Tutor: «.tutor-fs-4», 24 px). */
body.tutor-lms :is(.tutor-wrap, .tutor-login-modal) :is(h1, h2, h3, h4, h5, h6) {
	font-weight: 400;
}

body.tutor-lms .tutor-course-details-title {
	font-size: var(--wp--preset--font-size--titulo);
	line-height: 1.1;
}

/* La lista de deseos no forma parte de la academia; los niveles ya se explican en la lista y en la ficha. */
.tutor-course-details-page :is(.tutor-course-details-info, .tutor-course-wishlist-btn) {
	display: none;
}

.tutor-course-details-instructors a:is([href="#"], :not([href])) {
	color: inherit;
	text-decoration: none;
}

.jl-curso-previa {
	margin-block: var(--wp--preset--spacing--30) 0;
}

/* Tutor apila las columnas por debajo de 1200 px. Precio y compra antes del temario también en la tableta;
   no depende del agente de usuario, así que el resultado no cambia con la caché ni al girar el dispositivo. */
@media (max-width: 1199.98px) {
	.tutor-course-details-page > .tutor-row > aside.tutor-col-xl-4 {
		order: -1;
		margin-block-end: var(--wp--preset--spacing--40);
	}

	.tutor-course-details-page > .tutor-row > aside .tutor-single-course-sidebar {
		margin-top: 0;
	}
}

/* Lecciones del temario en la letra de texto: una lista larga en Playfair a 16 px cansa (son h5 en la plantilla). */
body.tutor-lms .tutor-course-content-list-item-title {
	font-family: var(--wp--preset--font-family--texto);
}

/* Márgenes laterales iguales a los de la web, hasta el ancho «wide» (tutor.min.css: «.tutor-container{…padding:
   var(--tutor-gutter-x,.75rem)…}» y sus anchos de 540 a 1320 px). Las filas de Tutor (márgenes de -0,75rem) caben
   dentro. Solo lo usan las páginas del diseño antiguo. */
body.tutor-lms .tutor-container {
	box-sizing: border-box;
	max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-left) + var(--wp--style--root--padding-right));
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* Ficha y lista: aire arriba y abajo, como una sección de la web (Tutor no pone ninguno y queda pegada a la cabecera). */
body.tutor-frontend :is(.tutor-course-details-page, .tutor-courses-wrap) {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* Entrada y su ventana con margen a los lados en el móvil: Tutor les da el ancho entero (login.php: «max-width: 100%»
   en línea; tutor.min.css: «.tutor-modal-window{…margin:48px auto}»). */
body.tutor-lms .tutor-page-wrap:has(> .tutor-login-wrap),
body.tutor-lms .tutor-login-modal {
	box-sizing: border-box;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
}

/* ------------------------------------------------------------------------------------------------------------
 * 7. Vídeo (Plyr, el reproductor que trae Tutor: assets/lib/plyr/plyr.css y «.tutor-video-player
 *    .plyr__control--overlaid{background:#00b3ff…}» en tutor-learning-area.min.css)
 * --------------------------------------------------------------------------------------------------------- */

.plyr {
	--plyr-color-main: var(--wp--preset--color--rosa);
	--plyr-video-control-color-hover: var(--wp--preset--color--tinta);
}

/* Botón grande de reproducir: rosa con el triángulo en tinta (el blanco sobre rosa no llega a 3:1). */
.plyr .plyr__control--overlaid {
	--plyr-video-control-color: var(--wp--preset--color--tinta);
}

.tutor-video-player .plyr__control--overlaid {
	background: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
}

/* ------------------------------------------------------------------------------------------------------------
 * 8. Piezas del plugin jessii-lashes-nucleo (las pinta él: avisos de la academia, temas cerrados, información de
 *    compra). Van sueltas, sin depender de dónde las ponga Tutor.
 * --------------------------------------------------------------------------------------------------------- */

/* Aviso (role="status"): tema cerrado, sesión cerrada desde otro sitio, compra aún no abierta. Puede ser un <div> con
   título, párrafos y botón, o un solo <p>. Recuadro ciruela con el borde de las tarjetas y una raya rosa. */
.jl-aviso {
	box-sizing: border-box;
	max-width: 40rem;
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--borde);
	border-inline-start: 2px solid var(--wp--preset--color--rosa);
	background-color: var(--wp--preset--color--ciruela);
	color: var(--wp--preset--color--texto-suave);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 400;
	line-height: 1.7;
	text-align: start;
	overflow-wrap: anywhere;
}

.jl-aviso > * {
	margin-block: 0;
}

.jl-aviso > * + * {
	margin-block-start: 0.75em;
}

/* En el aula, centrado en la zona de la lección. */
.tutor-learning-area .jl-aviso {
	margin-inline: auto;
}

.jl-aviso .jl-aviso__titulo {
	color: var(--wp--preset--color--blanco);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--grande);
	font-weight: 400;
	line-height: 1.25;
	text-wrap: balance;
}

.jl-aviso a:not(.jl-aviso__boton) {
	color: var(--wp--preset--color--rosa);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.jl-aviso a:not(.jl-aviso__boton):hover {
	color: var(--wp--preset--color--blanco-roto);
}

/* Botón del aviso («Seguir donde lo dejé», «Volver al curso»…): el de la web (theme.json, «button»). Se repite aquí
   porque dentro del aula Tutor pone sus propias reglas a los enlaces. */
.jl-aviso .jl-aviso__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 44px;
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 15px 25px;
	border: 0;
	border-radius: 0;
	background-color: var(--wp--preset--color--rosa);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.jl-aviso .jl-aviso__boton:hover {
	background-color: var(--wp--preset--color--blanco-roto);
	color: var(--wp--preset--color--tinta);
}

.jl-aviso .jl-aviso__boton:focus-visible {
	outline: 2px solid var(--wp--preset--color--blanco-roto);
	outline-offset: 3px;
}

/* Lección o tema cerrado en la barra lateral: más apagado (gris rosado, 5,5:1 aun sobre el relieve), sin dejar de
   leerse. Se cambian las variables de Tutor dentro de la pieza, así sus textos e iconos las siguen. */
.jl-cerrado {
	--tutor-text-primary: var(--wp--preset--color--gris-rosado);
	--tutor-text-secondary: var(--wp--preset--color--gris-rosado);
	--tutor-text-brand: var(--wp--preset--color--gris-rosado);
	--tutor-icon-idle: var(--wp--preset--color--gris-rosado);
	--tutor-icon-brand: var(--wp--preset--color--gris-rosado);
	--tutor-body-color: var(--wp--preset--color--gris-rosado);
	--tutor-color-secondary: var(--wp--preset--color--gris-rosado);
	color: var(--wp--preset--color--gris-rosado);
}

/* Frase corta bajo el título del tema («Se abre el 12/11»). Va al principio del cuerpo del tema
   (tutor/lesson_list/before/topic: templates/learning-area/components/sidebar.php:189). */
.jl-cerrado-nota {
	display: block;
	margin: 0;
	padding: 4px 12px 8px;
	color: var(--wp--preset--color--gris-rosado);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.5;
	text-transform: none;
}

/* Información de la compra junto al precio o al artículo del carrito («Acceso: 12 meses · empieza al pagar…»). */
.jl-curso-info {
	margin-block: 12px 0;
	color: var(--wp--preset--color--texto-suave);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	line-height: 1.6;
	text-align: start;
}

.jl-curso-info > * {
	margin-block: 0;
}

.jl-curso-info > * + * {
	margin-block-start: 6px;
}

.jl-curso-info :is(ul, ol) {
	padding-inline-start: 1.1em;
}

.jl-curso-info li::marker {
	color: var(--wp--preset--color--rosa);
}

.jl-curso-info strong {
	color: var(--wp--preset--color--blanco-roto);
}

.jl-curso-info a {
	color: var(--wp--preset--color--rosa);
	text-decoration: underline;
}

/* ------------------------------------------------------------------------------------------------------------
 * 9. Movimiento: solo si la persona no ha pedido reducirlo
 * --------------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.jl-aviso a,
	.jl-aviso .jl-aviso__boton {
		transition: background-color 0.2s ease, color 0.2s ease;
	}
}