/**
 * Puente de color: Tutor LMS 4.0.9 → marca Fundación Gomaespuma
 * ═════════════════════════════════════════════════════════════════
 *
 * CUIDADO AL ACTUALIZAR TUTOR: este archivo está escrito contra los nombres
 * de variable que usa la versión 4.0.9, que es la que se instala hoy desde
 * wordpress.org. La rama de desarrollo del plugin usa otro sistema distinto
 * (una rampa --tutor-brand-100…950); si algún día el plugin salta a eso, los
 * nombres de aquí dejarán de existir y habrá que rehacer este archivo. La
 * forma de comprobarlo es buscar "--tutor-" en
 * wp-content/plugins/tutor/assets/css/tutor.min.css.
 *
 * Cómo pinta Tutor 4.0.9: el plugin imprime un <style> en línea justo detrás
 * de su hoja tutor-front, con el color de marca que haya en sus ajustes
 * (Tutor LMS → Ajustes → Diseño). Este archivo se encola declarando
 * dependencia de 'tutor-frontend', así que sale DESPUÉS de ese <style> y gana.
 *
 * Por eso el color de marca de la plataforma se cambia AQUÍ, en
 * --tutor-color-primary, y no en la pantalla de ajustes de Tutor: lo que se
 * ponga allí queda pisado por esto.
 *
 * Solo van aquí las 28 variables que el plugin usa de verdad. Todo lo que no
 * sea color (radios, tipografías, proporciones) va en tutor-components.css,
 * porque en esta versión Tutor no lo expone como variable.
 */

:root {
	/* ── Marca ───────────────────────────────────────────────────── */
	/* Cambiar estas tres líneas recolorea botones, enlaces, pestañas,
	   iconos y barras de progreso de todo el plugin. */
	--tutor-color-primary: #FF5B00;
	--tutor-color-primary-rgb: 255, 91, 0;
	--tutor-color-primary-hover: #E04E00;

	/* ── Texto ───────────────────────────────────────────────────── */
	--tutor-body-color: #0B0B0B;
	--tutor-body-color-rgb: 11, 11, 11;
	--tutor-color-black: #0B0B0B;
	--tutor-color-white: #FFFFFF;

	/* Los tres grises de texto secundario del plugin, en tinta FG. */
	--tutor-color-secondary: rgba(11, 11, 11, 0.66);
	--tutor-color-subdued: rgba(11, 11, 11, 0.66);
	--tutor-color-hints: rgba(11, 11, 11, 0.5);
	--tutor-color-muted: rgba(11, 11, 11, 0.5);

	/* ── Bordes y fondos suaves ──────────────────────────────────── */
	--tutor-border-color: rgba(11, 11, 11, 0.12);
	/* Estas dos SIEMPRE se usan como fondo, nunca como texto, así que van
	   en los cremas de la marca y no en un gris frío. */
	--tutor-color-gray: #EDE5D3;
	--tutor-color-gray-10: #FBF7EC;

	--tutor-disabled-bg: #EDE5D3;
	--tutor-disabled-color: rgba(11, 11, 11, 0.35);

	/* ── Estados ─────────────────────────────────────────────────── */
	/* "Completado" en el verde oliva de la marca, no en el verde de aviso. */
	--tutor-color-success: #6B7B4E;
	--tutor-color-success-rgb: 107, 123, 78;

	/* Aviso y error se quedan como vienen: son señales, no marca. */

	/* ── Medidas ─────────────────────────────────────────────────── */
	--tutor-table-border-radius: 16px;
}

/* ── La rampa de la pantalla del vídeo ────────────────────────────────────
 *
 * Corrige lo que decía el comentario de arriba: la rampa --tutor-brand-100…950
 * NO es solo de la rama master. En 4.0.9 el CSS de la «learning area» (la
 * pantalla donde se ve el vídeo) la USA en 140 sitios —botón de play, pestañas,
 * «Marcar como completo», anillos de foco—, aunque no la DECLARA en ninguno:
 * siempre la escribe como var(--tutor-brand-600, #3e64de), con el azul de
 * fábrica dentro como respaldo. Por eso esa pantalla salía azul mientras el
 * resto de la plataforma ya era naranja.
 *
 * Al declararla aquí los respaldos dejan de aplicarse y se tiñe la pantalla
 * entera. El orden de carga da igual: como el plugin no declara estas
 * variables en ningún sitio, no hay nada con lo que competir.
 *
 * (Tutor genera su propia rampa en PHP a partir del color de sus ajustes, pero
 * solo si ese color está guardado. Se ha preferido escribirla a mano: así el
 * color viaja con el tema y los tonos son elegidos, no calculados.)
 */
:root {
	--tutor-brand-100: #FFF7F1;
	--tutor-brand-200: #FFE7D6;  /* fondo de la pestaña activa */
	--tutor-brand-300: #FFD2B4;
	--tutor-brand-400: #FFA167;
	--tutor-brand-450: #FF8746;  /* anillo de foco del teclado */
	--tutor-brand-500: #FF5B00;  /* el naranja de la Fundación */
	--tutor-brand-600: #E04E00;  /* texto y botones: más oscuro para que se lea */
	--tutor-brand-700: #B83F00;
	--tutor-brand-800: #8E3100;
	--tutor-brand-900: #6A2400;
	--tutor-brand-950: #3C1400;
}

/* El reproductor de vídeo es Plyr, que trae su propio color (#00b2ff) y no
   mira ninguna variable de Tutor. Es el botón grande de play y la barra de
   volumen. */
:root {
	--plyr-color-main: #FF5B00;
}