/**
 * Femxa Content — la presentación del curso.
 *
 * Va **aparte** de `fxc-course.css` a propósito. Ese fichero contiene reglas que no son
 * estilo sino comportamiento —la puerta, lo oculto, el idioma inactivo, todas con
 * `!important` y todas explicadas—, y mezclarlas con decisiones de aspecto invita a que
 * alguien retoque una creyendo que toca la otra. Aquí no hay ninguna regla que, si se
 * borra, rompa el curso: solo se verá peor.
 *
 * ## La frontera, dicha en voz alta
 *
 * **El diseño de la página lo pone el autor con Elementor. El plugin maqueta el
 * instrumento.** El menú, la barra de progreso, las actividades, el feedback y las
 * pantallas de evaluación los pinta este código y el autor no los toca, así que tienen que
 * verse bien en cualquier curso y con cualquier paleta.
 *
 * De ahí la regla que gobierna todo lo que sigue: **la estructura es nuestra, el color es
 * del curso.** Casi nada lleva un color literal; casi todo sale de `currentColor` mezclado
 * con el fondo. Un curso con fondo oscuro y letra clara se ve bien sin configurar nada, y
 * uno con la paleta corporativa de un cliente, también.
 *
 * Lo único con color propio son los **estados semánticos** —acierto, fallo, aviso—, porque
 * significan lo mismo en todos los cursos. Y aun así son variables: un cliente con una guía
 * de marca estricta las cambia en un sitio.
 */

.fxc-vista,
.fxc-menu__lista,
.fxc-banco,
.fxc-eval,
.validate-data {
	/* Heredados del curso, no impuestos. */
	--fxc-linea: color-mix(in srgb, currentColor 14%, transparent);
	--fxc-linea-fuerte: color-mix(in srgb, currentColor 28%, transparent);
	--fxc-velo: color-mix(in srgb, currentColor 5%, transparent);
	--fxc-atenuado: color-mix(in srgb, currentColor 65%, transparent);

	/* Semánticos: significan lo mismo en todos los cursos, así que sí son nuestros. */
	--fxc-bien: #1a7f45;
	--fxc-mal: #b3261e;
	--fxc-aviso: #9a6700;

	/* El acento del curso. Por defecto, el propio color del texto: nunca desentona. */
	--fxc-acento-curso: currentColor;
}

/* ─────────────────────────────────────────────────────────────────
   El menú de módulos
   ───────────────────────────────────────────────────────────────── */

.fxc-menu__lista { display: flex; flex-direction: column; gap: .25rem; }

/*
 * Un curso es una SECUENCIA, así que el menú se ve como una: números alineados en la misma
 * vertical, y el estado dentro del número. Que el estado viva ahí y no en el texto es
 * deliberado — el título del módulo no cambia de largo al cambiar de estado, así que la
 * lista no baila cuando el alumno avanza.
 */
.fxc-menu__enlace {
	gap: .7rem;
	align-items: center;
	inline-size: 100%;
	padding: .6rem .75rem;
	border-radius: 7px;
	border: 1px solid transparent;
	transition: background-color .12s ease, border-color .12s ease;
}

.fxc-menu__enlace:hover:not([aria-disabled="true"]) {
	background: var(--fxc-velo);
	border-color: var(--fxc-linea);
}

.fxc-menu__numero {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: 50%;
	border: 1px solid var(--fxc-linea-fuerte);
	font-size: .8125rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.fxc-menu__texto { flex: 1 1 auto; text-align: start; line-height: 1.35; }

/* ── Los cuatro estados ─────────────────────────────────────────── */

/*
 * Cada uno se distingue por DOS cosas: color y forma. El color solo no vale — ni para
 * quien no lo distingue, ni al imprimir el curso, ni en un proyector malo.
 */

/* Completado: el número deja paso a un ✓. */
[data-fxc-modulo][data-estado="completado"] .fxc-menu__numero {
	background: var(--fxc-bien);
	border-color: var(--fxc-bien);
	color: #fff;
	font-size: 0;
}

[data-fxc-modulo][data-estado="completado"] .fxc-menu__numero::after {
	content: "✓";
	font-size: .95rem;
	font-weight: 700;
}

/* Visitado pero sin terminar: empezado, y se nota. */
[data-fxc-modulo][data-estado="visitado"] .fxc-menu__numero {
	border-color: var(--fxc-acento-curso);
	border-width: 2px;
}

/* Bloqueado: candado, y se ve que no se puede. */
[data-fxc-modulo][data-estado="bloqueado"] .fxc-menu__numero {
	border-style: dashed;
	color: var(--fxc-atenuado);
	font-size: 0;
}

[data-fxc-modulo][data-estado="bloqueado"] .fxc-menu__numero::after {
	content: "🔒";
	font-size: .8rem;
}

[data-fxc-modulo][data-estado="bloqueado"] .fxc-menu__texto { color: var(--fxc-atenuado); }

/* Dónde está el alumno AHORA. Es lo que más se busca de un vistazo. */
[data-fxc-modulo][aria-current="true"] .fxc-menu__enlace,
.fxc-menu__enlace[aria-current="true"] {
	background: var(--fxc-velo);
	border-color: var(--fxc-acento-curso);
}

[data-fxc-modulo][aria-current="true"] .fxc-menu__texto { font-weight: 600; }

[data-fxc-modulo][aria-current="true"] .fxc-menu__numero {
	background: var(--fxc-acento-curso);
	border-color: var(--fxc-acento-curso);
	color: var(--fxc-vista-fondo, #fff);
}

/*
 * El texto de bloqueado.
 *
 * `fxc-course.css` lo enseña solo cuando el módulo lo está. Aquí solo se le da forma —y
 * ya NO lleva `aria-hidden`: es la única pista que explica POR QUÉ no se puede entrar, y
 * ocultársela a un lector de pantalla dejaba a esa persona pulsando un botón muerto sin
 * saber el motivo.
 */
.fxc-menu__bloqueado {
	flex: 0 0 auto;
	color: var(--fxc-atenuado);
	font-size: .75em;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ─────────────────────────────────────────────────────────────────
   El progreso — barra, círculo o número
   ───────────────────────────────────────────────────────────────── */

/*
 * Las tres variantes las pinta el MISMO widget y comparten variable: `--fxc-progreso`, que
 * escribe el runtime. El JS no toca el SVG ni calcula geometría — solo un porcentaje.
 *
 * **La cifra siempre está en el texto**, aunque la variante sea gráfica: la forma es el
 * refuerzo y el número es el dato.
 */
.fxc-progreso {
	--fxc-progreso-grosor: 6px;
	--fxc-progreso-diametro: 120px;

	--fxc-linea: color-mix(in srgb, currentColor 14%, transparent);
	--fxc-acento-curso: currentColor;

	display: flex;
	align-items: center;
	gap: .6rem;
}

.fxc-progreso__cifra {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/*
 * Ocultar el número NO es quitarlo.
 *
 * Sale de la vista pero se queda en el árbol de accesibilidad: quien use un lector de
 * pantalla necesita el dato, y una barra sin número no le dice nada.
 */
.fxc-progreso__cifra--oculta {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Lineal ─────────────────────────────────────────────────────── */

.fxc-progreso[data-variante="lineal"] { flex-direction: row; }

.fxc-progreso__pista {
	flex: 1 1 auto;
	display: block;
	block-size: var(--fxc-progreso-grosor);
	border-radius: 999px;
	background: var(--fxc-linea);
	overflow: hidden;
}

.fxc-progreso__relleno {
	display: block;
	block-size: 100%;
	inline-size: var(--fxc-progreso, 0%);
	border-radius: inherit;
	background: var(--fxc-acento-curso);
	transition: inline-size .35s ease;
}

/* ── Circular ───────────────────────────────────────────────────── */

.fxc-progreso[data-variante="circular"] {
	flex-direction: column;
	justify-content: center;
	inline-size: var(--fxc-progreso-diametro);
	block-size: var(--fxc-progreso-diametro);
	position: relative;
}

.fxc-progreso__svg {
	inline-size: 100%;
	block-size: 100%;
	/* Empezar arriba, no a la derecha: es donde todo el mundo espera que empiece. */
	transform: rotate(-90deg);
}

.fxc-progreso__pista-svg,
.fxc-progreso__relleno-svg {
	stroke-width: var(--fxc-progreso-grosor);
	stroke-linecap: round;
}

.fxc-progreso__pista-svg { stroke: var(--fxc-linea); }

/*
 * El arco se recorta con `stroke-dasharray`.
 *
 * El perímetro de r=45 es 2·π·45 ≈ 283. El relleno es ese perímetro por el porcentaje, y
 * el resto queda en hueco. Así el JS solo escribe `--fxc-progreso` y la geometría vive
 * aquí — un solo camino para la barra y para el círculo.
 */
.fxc-progreso__relleno-svg {
	stroke: var(--fxc-acento-curso);
	stroke-dasharray: calc(283 * var(--fxc-progreso, 0%) / 100%) 283;
	transition: stroke-dasharray .35s ease;
}

.fxc-progreso[data-variante="circular"] .fxc-progreso__cifra {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.35rem;
}

.fxc-progreso[data-variante="circular"] .fxc-progreso__cifra--oculta {
	inset: auto;
	position: absolute;
}

/* ── Numérica ───────────────────────────────────────────────────── */

.fxc-progreso[data-variante="numerica"] .fxc-progreso__cifra { font-size: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
	.fxc-progreso__relleno,
	.fxc-progreso__relleno-svg { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────
   El estado del curso
   ───────────────────────────────────────────────────────────────── */

/*
 * Sin forma propia a propósito: es texto del autor, con su tipografía y su color. Lo único
 * que hace falta es que un mensaje de completado se distinga de un párrafo cualquiera, y
 * eso lo decide el autor con Elementor.
 */
.fxc-estado { line-height: 1.55; }

/* Solo en el editor: el tema no se ve en el curso publicado. */
.fxc-tema-aviso {
	padding: .6rem .8rem;
	border: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 6px;
	font-size: .875rem;
	opacity: .8;
}

/* ─────────────────────────────────────────────────────────────────
   Actividades — el banco y la evaluación comparten forma
   ───────────────────────────────────────────────────────────────── */

.fxc-banco__grupo,
.fxc-eval__grupo {
	padding: 1rem 1.1rem;
	border: 1px solid var(--fxc-linea);
	border-radius: 8px;
	background: var(--fxc-velo);
}

.fxc-banco__enunciado,
.fxc-eval__enunciado {
	display: block;
	margin-block-end: .7rem;
	line-height: 1.4;
	text-wrap: balance;
}

/*
 * Cada opción es una diana grande.
 *
 * Un radio de trece píxeles es un objetivo malo con el dedo y con un ratón torpe. La
 * etiqueta entera ya era pulsable; ahora además **se ve** pulsable.
 */
.fxc-banco__opcion,
.fxc-eval__opcion {
	gap: .6rem;
	align-items: start;
	padding: .55rem .65rem;
	border: 1px solid var(--fxc-linea);
	border-radius: 6px;
	margin-block-end: .4rem;
	transition: border-color .12s ease, background-color .12s ease;
}

.fxc-banco__opcion:hover,
.fxc-eval__opcion:hover { border-color: var(--fxc-linea-fuerte); background: var(--fxc-velo); }

.fxc-banco__opcion:has(input:checked),
.fxc-eval__opcion:has(input:checked) {
	border-color: var(--fxc-acento-curso);
	background: var(--fxc-velo);
}

.fxc-banco__opcion:has(input:disabled),
.fxc-eval__opcion:has(input:disabled) { cursor: default; }

.fxc-banco__opcion input,
.fxc-eval__opcion input { margin-block-start: .2em; accent-color: var(--fxc-acento-curso); }

/* ─────────────────────────────────────────────────────────────────
   El feedback — INVARIANTE 6
   ───────────────────────────────────────────────────────────────── */

/*
 * Se refuerza la PRESENTACIÓN, nunca la posición.
 *
 * `position: static` vive en `fxc-course.css` y ahí sigue, porque es la invariante. Esto
 * solo hace que un bloque de feedback parezca feedback: fondo teñido de su tono, franja
 * gruesa al inicio y aire para separarlo de la pregunta **sin taparla**.
 */
.fxc-banco__feedback,
.fxc-eval__feedback,
.correct-feedback,
.incorrect-feedback {
	padding: .8rem 1rem;
	border-radius: 6px;
	border-inline-start-width: 4px;
	border-inline-start-style: solid;
	line-height: 1.5;
}

.fxc-banco__feedback[data-tono="bien"],
.fxc-eval__feedback[data-tono="bien"],
.correct-feedback {
	border-inline-start-color: var(--fxc-bien);
	background: color-mix(in srgb, var(--fxc-bien) 8%, transparent);
}

.fxc-banco__feedback[data-tono="mal"],
.fxc-eval__feedback[data-tono="mal"],
.incorrect-feedback {
	border-inline-start-color: var(--fxc-mal);
	background: color-mix(in srgb, var(--fxc-mal) 8%, transparent);
}

.fxc-banco__feedback[data-tono="aviso"],
.fxc-eval__feedback[data-tono="aviso"] {
	border-inline-start-color: var(--fxc-aviso);
	background: color-mix(in srgb, var(--fxc-aviso) 8%, transparent);
}

.fxc-banco__detalle { display: flex; flex-direction: column; gap: .25rem; }

/* ─────────────────────────────────────────────────────────────────
   La evaluación por pantallas
   ───────────────────────────────────────────────────────────────── */

/*
 * Las tres pantallas —portada, pregunta, resultados— tienen que sentirse como pasos de lo
 * mismo y no como tres sitios distintos. Un marco común y un ritmo común lo dicen.
 */
.fxc-eval {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 1.2rem;
	border: 1px solid var(--fxc-linea);
	border-radius: 10px;
}

.fxc-eval__intro { margin: 0; line-height: 1.55; }

.fxc-eval__datos {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .9rem;
	opacity: 1;
	color: var(--fxc-atenuado);
	font-size: .9em;
}

.fxc-eval__datos li { display: flex; align-items: center; }
.fxc-eval__datos li + li::before { content: "·"; margin-inline-end: .55rem; }

/* «Pregunta 2 de 5» es orientación: discreta, pero presente todo el rato. */
.fxc-eval__progreso {
	margin: 0;
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--fxc-atenuado);
}

.fxc-eval__acciones { margin-block-start: .3rem; }

.fxc-eval__resultado {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.2rem;
	border-width: 1px;
	border-radius: 8px;
	text-align: center;
}

.fxc-eval__resultado[data-estado="aprobado"] { background: color-mix(in srgb, var(--fxc-bien) 7%, transparent); }
.fxc-eval__resultado[data-estado="suspenso"] { background: color-mix(in srgb, var(--fxc-mal) 7%, transparent); }

.fxc-eval__veredicto { font-size: 1.05em; }

/* La nota es el dato del que va toda la pantalla. */
.fxc-eval__nota {
	font-size: 2.25em;
	font-weight: 600;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.fxc-eval__resultado[data-estado="aprobado"] .fxc-eval__nota { color: var(--fxc-bien); }
.fxc-eval__resultado[data-estado="suspenso"] .fxc-eval__nota { color: var(--fxc-mal); }

.fxc-eval__intentos,
.fxc-eval__aviso { color: var(--fxc-atenuado); font-size: .9em; opacity: 1; }

.fxc-eval__solucion { font-weight: 500; }

/* ─────────────────────────────────────────────────────────────────
   Respuestas escritas
   ───────────────────────────────────────────────────────────────── */

.validate-data { display: flex; flex-direction: column; gap: .7rem; }

.validate-data input[type="text"],
.validate-data textarea {
	padding: .6rem .75rem;
	border: 1px solid var(--fxc-linea-fuerte);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	font: inherit;
	inline-size: 100%;
	max-inline-size: 24rem;
}

.validate-data input[type="text"]:focus-visible,
.validate-data textarea:focus-visible { border-color: var(--fxc-acento-curso); }

/*
 * Lo apagado se ve apagado, pero **se sigue leyendo**.
 *
 * Estaba a `opacity: .5`, que sobre fondo claro deja el texto por debajo del contraste
 * mínimo: quien ya había contestado no podía releer su propia respuesta. Subirlo a .75 es
 * la diferencia entre «no se puede tocar» y «no se puede leer».
 */
.disable-fx { opacity: .75; }

/* ─────────────────────────────────────────────────────────────────
   Los botones que pinta el plugin
   ───────────────────────────────────────────────────────────────── */

/*
 * Solo los que pinta el plugin, y solo si el autor no los ha estilado.
 *
 * Un curso lleva los botones del tema del cliente. Estos aparecen dentro de una actividad,
 * no existen en el editor y nadie los va a vestir, así que los vestimos aquí. El
 * `:not(.elementor-button)` es la frontera: en cuanto el autor pone un botón suyo, manda él.
 */
.fxc-eval__accion:not(.elementor-button),
.fxc-eval__continuar:not(.elementor-button),
.fxc-banco__comprobar:not(.elementor-button),
.validate-data .validate:not(.elementor-button),
.validate-data .retry:not(.elementor-button),
.validate-data .view-solution:not(.elementor-button) {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .55rem 1.1rem;
	border: 1px solid var(--fxc-acento-curso);
	border-radius: 6px;
	background: var(--fxc-acento-curso);
	color: var(--fxc-vista-fondo, #fff);
	font: inherit;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
}

/* Las secundarias pesan menos, porque hacen menos. */
.validate-data .retry:not(.elementor-button),
.validate-data .view-solution:not(.elementor-button) {
	background: transparent;
	color: inherit;
	border-color: var(--fxc-linea-fuerte);
}

.fxc-banco__grupo + .fxc-banco__grupo { margin-block-start: .8rem; }


/* ─────────────────────────────────────────────────────────────────
   La cabecera del curso
   ───────────────────────────────────────────────────────────────── */

/*
 * `.head` la pone el autor sobre el contenedor que quiera fijar arriba. Su diseño es suyo
 * —fondo, altura, qué lleva dentro—; lo único que pone el plugin es que se quede quieta y
 * por encima de las vistas.
 *
 * `z-index: 200` contra el 100 de `.fxc-vista`: la cabecera lleva el menú y el botón de
 * cerrar, así que **tiene que ganar**. Y aun así la vista empieza por debajo de ella
 * (`--fxc-cabecera`), de modo que no tapa contenido: se ven las dos cosas a la vez.
 *
 * `--wp-admin--admin-bar--height` deja sitio a la barra de administración cuando el autor
 * previsualiza dentro de WordPress. En el SCORM esa variable no existe y vale 0.
 */
[data-fxc-cabecera],
.head {
	position: fixed;
	inset-block-start: var(--wp-admin--admin-bar--height, 0px);
	inset-inline: 0;
	z-index: 200;
}