/**
 * Femxa Content — el curso.
 *
 * INVARIANTE 1: todas las vistas están en el DOM desde la carga. Aquí solo se decide
 * cuál se ve. Nada de esto pide nada a la red.
 */

.fxc-vistas {
	position: relative;
}

.fxc-vista {
	position: fixed;

	/*
	 * La vista empieza DEBAJO de la cabecera fija, no encima.
	 *
	 * No es estética: la cabecera de un curso lleva el menú, el progreso y el botón de
	 * cerrar. Una vista a pantalla completa que la tape deja al alumno dentro de un módulo
	 * **sin forma de salir**. Con `inset: 0` a secas era exactamente lo que pasaba.
	 *
	 * `--fxc-cabecera` la mide `fxc-navegacion.js` con un `ResizeObserver`, así que sigue
	 * siendo correcta cuando cambia el tamaño de pantalla, cuando cargan las tipografías o
	 * cuando aparece la barra de administración. El sistema anterior lo medía una sola vez
	 * al arrancar (`marginTopPopup()`), y al rotar el móvil se descuadraba.
	 *
	 * Sin cabecera vale `0px` y esto es exactamente `inset: 0`.
	 */
	inset: var(--fxc-cabecera, 0px) 0 0 0;
	z-index: 100;
	overflow-y: auto;
	background: var(--fxc-vista-fondo, #fff);

	/* El navegador se ahorra pintar las vistas cerradas sin sacarlas del documento.
	   Esta es la respuesta al peso del HTML — no la red. Medido: ~650 KB por curso. */
	content-visibility: auto;
	contain-intrinsic-size: 100vh;
}

.fxc-vista[hidden] {
	display: none;
}

.fxc-vista[data-fxc-activa] {
	content-visibility: visible;
}

/* El foco de una vista recién abierta no debe dibujar un cerco: el foco se mueve ahí
   para que un lector de pantalla lo anuncie, no para señalarlo visualmente. */
.fxc-vista:focus {
	outline: none;
}

/* Lo que sí lleva foco visible es todo lo demás. Nunca quitar esto. */
.fxc-vista :focus-visible {
	outline: 3px solid var(--fxc-foco, #1e63d0);
	outline-offset: 2px;
}

/**
 * INVARIANTE 6 — el feedback va debajo, en el flujo.
 *
 * Nunca superpuesto, nunca tapando la actividad: el usuario tiene que poder ver a la
 * vez el fallo y lo que lo causó. Si alguien escribe `position:absolute` sobre esto,
 * está rompiendo la invariante.
 */
.fxc-feedback {
	position: static;
	display: block;
	margin-block-start: 1rem;
}

/* Estado de módulo, para que el menú pinte sin consultar el DOM de las vistas. */
[data-fxc-modulo][data-estado="bloqueado"] {
	cursor: not-allowed;
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	.fxc-vista {
		transition: none !important;
	}
}

/**
 * next-container — la puerta.
 *
 * Lo que queda por detrás del marcador se oculta hasta que la puerta se abre. Ocultar,
 * no descargar: el contenido ya está en el documento y no vuelve a pedirse nunca.
 */
[data-fxc-bloqueado] {
	/**
	 * `!important` a propósito, y es de las pocas veces que se justifica.
	 *
	 * Esto no es estilo: es la regla que impide ver contenido que todavía no toca. Un
	 * selector de atributo (0,1,0) EMPATA con `.elementor-element` y con cualquier clase
	 * de tema, y como esas hojas se cargan después, ganan ellas. Comprobado el
	 * 19/08/2026: el atributo se ponía bien y el contenido se seguía viendo.
	 *
	 * Si esto pierde una carrera de especificidad, la puerta deja de existir sin que
	 * nadie se entere. No se quita.
	 */
	display: none !important;
}

/* La puerta abierta deja de pedir atención, pero no desaparece: el usuario tiene que
   poder ver qué la abrió. */
[data-fxc-abierta] {
	opacity: 0.65;
}

/* Estados de módulo en el menú. Se pintan leyendo el estado, nunca el DOM de la vista. */
[data-fxc-modulo][data-estado="completado"]::after { content: " ✓"; }
[data-fxc-modulo][aria-current="true"] { font-weight: 600; }

[data-fxc-progreso] {
	--fxc-progreso: 0%;
}

/* El menú de módulos. Estilo mínimo: el diseño lo pone el autor con Elementor. */
.fxc-menu__lista { list-style: none; margin: 0; padding: 0; }
.fxc-menu__enlace { display: flex; gap: .5rem; align-items: baseline; width: 100%; text-align: start;
	background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: .5rem 0; }
.fxc-menu__enlace[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.fxc-menu__bloqueado { display: none; font-size: .85em; }
.fxc-menu__enlace[aria-disabled="true"] .fxc-menu__bloqueado { display: inline; }

/* Banco de preguntas. */
.fxc-banco__grupo { border: 0; padding: 0; margin: 0 0 1rem; }
.fxc-banco__enunciado { font-weight: 600; padding: 0; }
.fxc-banco__opcion { display: flex; gap: .5rem; align-items: baseline; padding: .25rem 0; cursor: pointer; }

/**
 * INVARIANTE 6 — el feedback va debajo, en el flujo.
 * `position: static` no es el valor por defecto por casualidad: está escrito para que se
 * vea que es deliberado. Si alguien lo cambia a absolute o fixed, rompe la invariante.
 */
.fxc-banco__feedback { position: static; display: block; margin-block-start: 1rem; }
.fxc-banco__feedback:empty { display: none; }
.fxc-banco__feedback[data-tono="bien"] { border-inline-start: 4px solid var(--fxc-bien, #1a7f45); padding-inline-start: .75rem; }
.fxc-banco__feedback[data-tono="mal"]  { border-inline-start: 4px solid var(--fxc-mal, #b3261e); padding-inline-start: .75rem; }
.fxc-banco__feedback[data-tono="aviso"]{ border-inline-start: 4px solid var(--fxc-aviso, #9a6700); padding-inline-start: .75rem; }
.fxc-banco__detalle { list-style: none; margin: .5rem 0 0; padding: 0; }
.fxc-banco__linea[data-correcta="no"] { color: var(--fxc-mal, #b3261e); }

/**
 * Elementos ocultos con persistencia (hide-click · save-hide-show · show-after-play).
 *
 * `!important` por el mismo motivo que la puerta: un selector de atributo empata con
 * `.elementor-element` y pierde por orden de carga. Aquí además el efecto de perder es
 * que el alumno ve contenido que no debía ver todavía.
 */
[data-fxc-oculto] {
	display: none !important;
}

/* Evaluación con pantallas. */
.fxc-eval__grupo { border: 0; padding: 0; margin: 0 0 1rem; }
.fxc-eval__enunciado { font-weight: 600; padding: 0; }
.fxc-eval__opcion { display: flex; gap: .5rem; align-items: baseline; padding: .3rem 0; cursor: pointer; }
.fxc-eval__opcion input:disabled + span { opacity: .7; }
.fxc-eval__datos { list-style: none; margin: 0 0 1rem; padding: 0; opacity: .8; }
.fxc-eval__progreso { font-size: .9em; opacity: .8; }
.fxc-eval__acciones { display: flex; gap: .5rem; flex-wrap: wrap; margin-block-start: 1rem; }

/* INVARIANTE 6: el feedback va debajo, en el flujo. Nunca superpuesto. */
.fxc-eval__feedback { position: static; display: block; margin-block-start: 1rem; }
.fxc-eval__feedback:empty { display: none; }
.fxc-eval__feedback[data-tono="bien"]  { border-inline-start: 4px solid var(--fxc-bien, #1a7f45); padding-inline-start: .75rem; }
.fxc-eval__feedback[data-tono="mal"]   { border-inline-start: 4px solid var(--fxc-mal, #b3261e); padding-inline-start: .75rem; }
.fxc-eval__feedback[data-tono="aviso"] { border-inline-start: 4px solid var(--fxc-aviso, #9a6700); padding-inline-start: .75rem; }

.fxc-eval__resultado { padding: 1rem; border: 1px solid; border-radius: 6px; }
.fxc-eval__resultado[data-estado="aprobado"] { border-color: var(--fxc-bien, #1a7f45); }
.fxc-eval__resultado[data-estado="suspenso"] { border-color: var(--fxc-mal, #b3261e); }
.fxc-eval__veredicto { font-weight: 600; margin: 0 0 .3rem; }
.fxc-eval__nota { font-size: 1.4em; margin: 0; }
.fxc-eval__intentos, .fxc-eval__aviso { opacity: .8; font-size: .9em; }

/* Lo apagado por `fxc-validacion`: se ve, pero no se toca. */
.disable-fx { opacity: .5; pointer-events: none; cursor: not-allowed; }

/*
 * El contenido de las otras lenguas.
 *
 * `display: none` y no `visibility`: tiene que salir del flujo, del orden de tabulación
 * y del árbol de accesibilidad. `!important` porque compite con `.elementor-element`,
 * que empata en especificidad y gana por orden de carga.
 */
[data-fxc-otro-idioma] { display: none !important; }