/**
 * El anfitrión de un paquete externo.
 *
 * Va con el curso y por tanto **viaja dentro de cada SCORM entregado**. Nada de aquí puede
 * depender de una fuente remota ni de un asset que no esté en el ZIP.
 *
 * Las reglas que no son estilo sino comportamiento llevan `!important` y su porqué al lado.
 * Lo demás es aspecto: si se borra, la actividad funciona igual y se ve peor.
 */

.fxc-paquete-lanzador {
	margin: 0;
}

.fxc-paquete-abrir,
.fxc-paquete-continuar {
	font: inherit;
	cursor: pointer;
	border: 0;
	border-radius: 8px;
	padding: 0.75em 1.5em;
	background: var(--fxc-color-primario, #3b82f6);
	color: #fff;
}

.fxc-paquete-abrir:hover,
.fxc-paquete-continuar:hover {
	filter: brightness(0.92);
}

/*
 * El foco se VE. En un curso que se navega con teclado, quitarlo deja al alumno sin saber
 * dónde está, y es la clase de fallo que no da error y no se ve mirando el CSS.
 */
.fxc-paquete-abrir:focus-visible,
.fxc-paquete-continuar:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* ── La ventana ─────────────────────────────────────────────────── */

/*
 * La actividad ocupa la pantalla ENTERA.
 *
 * Un paquete de autor trae su propia cabecera, su propio progreso y su propia navegación:
 * dejarlo en una caja con márgenes le quita alto a lo único que el alumno ha venido a hacer,
 * y encima pone dos marcos concéntricos.
 *
 * `max-width` y `max-height` **hay que anularlos**: un `<dialog>` trae de serie
 * `calc(100% - 6px - 2em)`, así que sin esto se queda corto por los dos lados sin que nadie
 * lo haya pedido.
 */
.fxc-paquete-dialogo {
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;

	/*
	 * Color explícito, NUNCA heredado.
	 *
	 * La primera versión ponía `color: inherit` sobre fondo blanco. En un curso con texto
	 * claro —que es la mitad de ellos— el botón de cerrar quedaba blanco sobre blanco:
	 * **invisible**, y el alumno encerrado en la actividad sin forma de salir. No daba
	 * ningún error y no se ve leyendo el CSS.
	 */
	background: #fff;
	color: #18181b;

	/* Columna: el iframe se queda con lo que sobre. Sin esto colapsa a sus 150 px. */
	display: flex;
	flex-direction: column;
}

/*
 * Un `<dialog>` cerrado no se pinta, y eso lo pone el navegador. Se repite aquí porque el
 * tema del sitio puede darle `display` a todo lo que lleve una clase, y entonces la ventana
 * aparecería abierta encima del módulo desde que carga la página. Es el choque de cascada
 * del 20/08: el `--display` de Elementor pisando lo que no debía.
 */
.fxc-paquete-dialogo:not([open]) {
	display: none !important;
}

.fxc-paquete-dialogo::backdrop {
	background: rgb(0 0 0 / 70%);
}

/* ── La X ───────────────────────────────────────────────────────── */

/*
 * Va por ENCIMA del paquete, con fondo propio.
 *
 * El paquete es de otro y puede tener cualquier cosa debajo —una imagen clara, un vídeo, su
 * propia cabecera—, así que el botón no puede depender de contrastar con lo que haya: se
 * trae su propio fondo oscuro y su propio color.
 */
.fxc-paquete-cerrar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* 44 px es el mínimo cómodo para un dedo. */
	height: 44px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgb(24 24 27 / 82%) !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgb(0 0 0 / 30%);
}

.fxc-paquete-cerrar:hover {
	background: rgb(24 24 27 / 95%) !important;
}

.fxc-paquete-cerrar:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* ── El marco del iframe ────────────────────────────────────────── */

.fxc-paquete-marco {
	flex: 1 1 auto;
	min-height: 0; /* Sin esto un hijo flex no encoge y el iframe desborda la ventana. */
	background: #f4f4f5;
}

/*
 * El iframe llena su marco.
 *
 * `!important` porque los temas ponen `max-width` y `height: auto` a los medios
 * incrustados, y con `height: auto` un iframe vuelve a sus 150 px por defecto: la
 * actividad se ve como una rendija. Se comprueba con `getComputedStyle` en un navegador,
 * no leyendo esto.
 */
.fxc-paquete-iframe {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

/* ── El aviso de completado ─────────────────────────────────────── */

/*
 * INVARIANTE 6 — el feedback va DEBAJO y en el flujo, nunca superpuesto.
 *
 * El alumno tiene que poder ver a la vez el aviso y la actividad que lo produjo.
 */
.fxc-paquete-hecho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.75rem 1rem;
	border-top: 1px solid rgb(0 0 0 / 12%);
	background: #ecfdf5;
	color: #065f46;
}

/* `hidden` tiene que ganarle al `display: flex` de arriba, que es más específico. */
.fxc-paquete-hecho[hidden] {
	display: none !important;
}

.fxc-paquete-vacio {
	margin: 0;
	padding: 1rem;
	border: 1px dashed rgb(0 0 0 / 25%);
	border-radius: 8px;
	text-align: center;
}

/* ── Incrustado en el módulo ────────────────────────────────────── */

.fxc-paquete > .fxc-paquete-marco {
	/* El alto lo pone el control del widget; este es el suelo por si se queda sin valor. */
	min-height: 320px;
	border-radius: 12px;
	overflow: hidden;
}