/**
 * La rejilla del escritorio.
 *
 * El motor visual de los widgets de área —Cursos, Manuales, Medios, Paquetes, Empresas y
 * Usuarios—. Un mismo marcado, dos ejes independientes y un panel de Estilo que escribe
 * variables: de ahí salen los veinticinco aspectos sin una sola regla duplicada.
 *
 * ── Las tres reglas que sostienen esto ─────────────────────────────────────────────
 *
 * 1. **El marcado es el mismo en las cinco formas.** Los mismos `data-id`, `data-estado`
 *    y los mismos nombres de clase. La forma cambia dónde va cada cosa, nunca qué cosas
 *    hay. Si una forma dejara de pintar el veredicto de exportación, el fallo sería
 *    silencioso: la rejilla se vería preciosa y el autor entregaría un paquete roto.
 *
 * 2. **Un acabado NO escribe reglas: escribe variables.** Son seis líneas —fondo, borde,
 *    ancho, sombra, elevación y tinte— y las reglas que las usan son las mismas para las
 *    cinco formas. Por eso añadir un acabado cuesta seis líneas y no una hoja entera.
 *
 * 3. **El panel de Estilo escribe ESAS MISMAS variables** sobre `{{WRAPPER}} .fxc-rejilla`.
 *    Así no hay un solo `!important` ni una pelea de especificidad entre el panel y esta
 *    hoja: el panel gana siempre porque llega después y por el mismo camino.
 *
 * ── Y una cuarta, aprendida a base de perderla ─────────────────────────────────────
 *
 * 4. **Cada selector va anclado a `.fxc-rejilla`.** El Kit de Elementor del sitio estiliza
 *    `button`, `a` y `label` por elemento —`.elementor-kit-N button`, que vale (0,1,1)—, y
 *    una clase suelta vale (0,1,0) y pierde siempre. Sin el ancla, la tarjeta más cuidada
 *    del mundo sale con botones de 24 px del color de marca. Ver `fxc-escritorio.css`.
 */

:root:has(.fxc-rejilla) {
	/* ── Lo que el panel de Estilo mueve ───────────────────────────
	 * Todos estos valores son el punto de partida, no la ley: cada uno tiene su control
	 * en el widget. Lo que se toca aquí es lo que se ve cuando alguien arrastra el widget
	 * a una página y todavía no ha abierto la pestaña de Estilo.
	 */
	--fxc-r-columnas: 3;
	--fxc-r-hueco: 1rem;
	--fxc-r-radio: 10px;
	--fxc-r-alto: 320px;
	--fxc-r-proporcion: 16 / 10;
	--fxc-r-relleno: 1rem;

	--fxc-r-fondo: #ffffff;
	--fxc-r-fondo-hover: #ffffff;
	--fxc-r-texto: #12191f;
	--fxc-r-tenue: #5d6b7a;
	--fxc-r-acento: #0b6a67;
	--fxc-r-borde: #dde3ea;
	--fxc-r-borde-hover: #0b6a67;
	--fxc-r-borde-ancho: 1px;
	--fxc-r-sombra: none;
	--fxc-r-sombra-hover: none;
	--fxc-r-elevacion: 0px;
	--fxc-r-tinte: transparent;
	--fxc-r-desenfoque: 0px;

	/* Los estados. Significan algo, no decoran: el borrador no es «otro color», es un
	   curso que todavía no se puede entregar. */
	--fxc-r-publicado: #146c43;
	--fxc-r-borrador: #9a5b06;
	--fxc-r-fallo: #b42318;

	--fxc-r-papel: #f6f7f9;

	--fxc-r-letra: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--fxc-r-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

/*
 * El papel, y el título de la página.
 *
 * Lo mismo que hace `fxc-escritorio.css`, y por el mismo motivo: las piezas son blancas y
 * necesitan un fondo que no lo sea para existir. Va aquí repetido —y no cargando la otra
 * hoja— porque las cinco páginas de área no tienen nada del escritorio de pestañas: pedir
 * treinta kilobytes de CSS para quince líneas sería pagarlas caras.
 *
 * El `h1` lo pone el tema, no el widget, y venía en la letra de display de las portadas: la
 * pantalla empezaba con una tipografía y seguía con otra.
 */
body:has(.fxc-rejilla) {
	background: var(--fxc-r-papel);
	font-family: var(--fxc-r-letra);
}

body:has(.fxc-rejilla) h1.entry-title {
	font-family: var(--fxc-r-letra);
	font-size: 1.875rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--fxc-r-texto);
}

.fxc-rejilla {
	display: grid;
	grid-template-columns: repeat(var(--fxc-r-columnas), minmax(0, 1fr));
	gap: var(--fxc-r-hueco);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--fxc-r-letra);
	color: var(--fxc-r-texto);
}

@media (prefers-color-scheme: dark) {
	:root:has(.fxc-rejilla) {
		--fxc-r-papel: #0f151b;
		--fxc-r-fondo: #161e26;
		--fxc-r-fondo-hover: #1b242d;
		--fxc-r-texto: #e7edf3;
		--fxc-r-tenue: #98a6b5;
		--fxc-r-acento: #4bb8b1;
		--fxc-r-borde: #27323d;
		--fxc-r-borde-hover: #4bb8b1;

		--fxc-r-publicado: #4ec38a;
		--fxc-r-borrador: #e0a03a;
		--fxc-r-fallo: #f0837a;
	}
}

/* ─────────────────────────────────────────────────────────────────
   La zona: filtros, rejilla y ficha
   ───────────────────────────────────────────────────────────────── */

.fxc-cursos {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/*
 * La barra de filtros.
 *
 * Va arriba y en una sola línea porque es una herramienta de paso: se usa, se encuentra el
 * curso y se olvida. Ocupar dos líneas la convertiría en parte de la pantalla, que es justo
 * lo que no es.
 */
.fxc-cursos .fxc-cursos__filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
}

.fxc-cursos .fxc-cursos__caja {
	flex: 1 1 16rem;
	min-inline-size: 0;
	display: flex;
}

/*
 * `input[type="search"]`, y no `input` a secas.
 *
 * El kit del sitio escribe `.elementor-kit-N input:not([type="button"]):not([type="submit"])`,
 * y **cada `:not()` cuenta como su argumento**: una clase más dos atributos son tres, más el
 * elemento — **(0,3,1)**. `.fxc-cursos .fxc-cursos__caja input` es (0,2,1) y pierde por
 * especificidad, no por orden. Con el atributo sube a (0,3,1), empata, y entonces sí decide
 * el orden: esta hoja se encola después del kit.
 *
 * Es el mismo pisotón que se documenta en `fxc-escritorio.css`, con otra cara: allí bastaba
 * anclar a la raíz porque el kit usaba selectores de (0,1,1). Aquí no basta — **anclar no es
 * la regla, es el mínimo**.
 */
.fxc-cursos .fxc-cursos__caja input[type="search"] {
	inline-size: 100%;
	padding: .5rem .7rem;
	border: 1px solid var(--fxc-r-borde);
	border-radius: calc(var(--fxc-r-radio) / 2);
	background: var(--fxc-r-fondo);
	color: var(--fxc-r-texto);
	font: inherit;
	font-family: var(--fxc-r-letra);
	font-size: .875rem;
}

.fxc-cursos .fxc-cursos__filtro {
	padding: .5rem .6rem;
	border: 1px solid var(--fxc-r-borde);
	border-radius: calc(var(--fxc-r-radio) / 2);
	background: var(--fxc-r-fondo);
	color: var(--fxc-r-texto);
	font: inherit;
	font-family: var(--fxc-r-letra);
	font-size: .875rem;
	max-inline-size: 14rem;
}

.fxc-cursos .fxc-cursos__caja input[type="search"]:focus-visible,
.fxc-cursos .fxc-cursos__filtro:focus-visible {
	outline: 2px solid var(--fxc-r-acento);
	outline-offset: 0;
	border-color: var(--fxc-r-acento);
}

.fxc-cursos .fxc-cursos__cuenta {
	font-family: var(--fxc-r-mono);
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--fxc-r-tenue);
	white-space: nowrap;
}

.fxc-cursos .fxc-cursos__nada {
	margin: 0;
	padding: 2.5rem 1.25rem;
	border: 1px dashed var(--fxc-r-borde);
	border-radius: var(--fxc-r-radio);
	text-align: center;
	color: var(--fxc-r-tenue);
	font-family: var(--fxc-r-letra);
	font-size: .9375rem;
}

/* La etiqueta que solo oyen los lectores de pantalla: el hueco lo dice el `placeholder`. */
.fxc-cursos .fxc-cursos__oculto {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * La tarjeta que el filtro deja fuera.
 *
 * Con una clase y no con `hidden`, por lo mismo que se explica abajo: esta hoja le pone
 * `display` a la pieza y el atributo no podría con él. Y `display: none` —y no una
 * opacidad— para que la tarjeta salga del orden de tabulación: filtrar tiene que quitar
 * también lo que se recorre con el teclado, no solo lo que se ve.
 *
 * Y va con las DOS clases en el mismo selector, no por elegancia: con una sola empata en
 * especificidad con la regla que le pone `display: flex` a la pieza, y entonces gana la que
 * esté más abajo en el fichero. Un filtro que funciona o no según el orden de dos bloques
 * de CSS es un fallo esperando a que alguien reordene la hoja.
 */
.fxc-rejilla .fxc-rejilla__pieza.fxc-rejilla__pieza--fuera {
	display: none;
}

/*
 * `hidden` tiene que poder esconder esto.
 *
 * El atributo `hidden` funciona porque el navegador trae `[hidden] { display: none }` en su
 * hoja, y **cualquier** declaración de autor le gana: en cuanto esta hoja dice
 * `display: grid`, poner `hidden` deja de hacer nada. El síntoma no es que falle: es que
 * al abrir la ficha de un curso, la ficha se pintaba DEBAJO de la rejilla, que seguía
 * entera en su sitio. Parecía que el clic no hacía nada.
 *
 * Vale para las tres piezas que se enseñan y se esconden: la rejilla, la zona con sus
 * filtros y la ficha del escritorio.
 */
.fxc-rejilla[hidden],
.fxc-cursos__listado[hidden],
.fxc-escritorio[hidden] {
	display: none;
}

/* ─────────────────────────────────────────────────────────────────
   La pieza — lo común a las cinco formas
   ───────────────────────────────────────────────────────────────── */

.fxc-rejilla .fxc-rejilla__pieza {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--fxc-r-fondo);
	border: var(--fxc-r-borde-ancho) solid var(--fxc-r-borde);
	border-radius: var(--fxc-r-radio);
	box-shadow: var(--fxc-r-sombra);
	overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.fxc-rejilla .fxc-rejilla__pieza:hover {
	background: var(--fxc-r-fondo-hover);
	border-color: var(--fxc-r-borde-hover);
	box-shadow: var(--fxc-r-sombra-hover);
	transform: translateY(calc(var(--fxc-r-elevacion) * -1));
}

/*
 * El foco se dibuja en la PIEZA, no en el botón invisible que la cubre.
 *
 * Quien llega con el teclado enfoca el botón del título, que está estirado sobre toda la
 * tarjeta: pintarle el contorno a él dejaría un rectángulo que no coincide con nada. Con
 * `:focus-within` el contorno rodea la tarjeta, que es lo que la persona está mirando.
 */
.fxc-rejilla .fxc-rejilla__pieza:has(.fxc-rejilla__abrir:focus-visible) {
	outline: 2px solid var(--fxc-r-acento);
	outline-offset: 2px;
}

/* ── El lienzo: la portada, o lo que la sustituye ───────────────── */

.fxc-rejilla .fxc-rejilla__lienzo {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: var(--fxc-r-proporcion);
	overflow: hidden;
	z-index: 0;
	background: color-mix(in oklab, var(--fxc-r-acento) 8%, var(--fxc-r-fondo));
}

.fxc-rejilla .fxc-rejilla__imagen {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Sin portada, la inicial.
 *
 * Un rectángulo gris no dice nada y además invita a pensar que la imagen no cargó. La
 * inicial sobre el color del curso se reconoce de lejos, distingue unos de otros en una
 * rejilla de veinte y deja claro que ahí no falta nada: es que aún no se ha puesto.
 */
.fxc-rejilla .fxc-rejilla__inicial {
	font-family: var(--fxc-r-letra);
	font-size: clamp(1.75rem, 12cqi, 4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.03em;
	color: color-mix(in oklab, var(--fxc-r-acento) 70%, var(--fxc-r-texto));
	user-select: none;
}

/*
 * El tono por curso, cuando se pide.
 *
 * `--fxc-r-tono` lo escribe el PHP en cada pieza a partir del ID: el mismo curso saca
 * siempre el mismo color, que es lo que hace que sirva para reconocerlo. Si el widget está
 * en modo «marca», esta regla no se activa y todos salen del color de la casa.
 */
.fxc-rejilla[data-respaldo="tono"] .fxc-rejilla__lienzo {
	background: hsl(var(--fxc-r-tono, 190) 38% 94%);
}

.fxc-rejilla[data-respaldo="tono"] .fxc-rejilla__inicial {
	color: hsl(var(--fxc-r-tono, 190) 45% 32%);
}

@media (prefers-color-scheme: dark) {
	.fxc-rejilla[data-respaldo="tono"] .fxc-rejilla__lienzo { background: hsl(var(--fxc-r-tono, 190) 24% 18%); }
	.fxc-rejilla[data-respaldo="tono"] .fxc-rejilla__inicial { color: hsl(var(--fxc-r-tono, 190) 45% 72%); }
}

/* ── El cuerpo ─────────────────────────────────────────────────── */

.fxc-rejilla .fxc-rejilla__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: var(--fxc-r-relleno);
	min-width: 0;
	flex: 1 1 auto;
}

.fxc-rejilla .fxc-rejilla__titulo {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--fxc-r-texto);
	text-wrap: balance;
}

/*
 * El botón del título cubre la tarjeta entera.
 *
 * Es el patrón del «enlace estirado»: un solo control de verdad —que es lo que oye un
 * lector de pantalla y lo que recibe el foco— y toda la superficie clicable, que es lo que
 * espera cualquiera que vea una tarjeta. Las acciones de abajo se levantan por encima con
 * `z-index` para que sigan siendo pulsables.
 */
/*
 * El título de una pieza es un `<button>` en Cursos y un `<a>` en Medios, Manuales y
 * Paquetes —según haya ficha que abrir o sitio al que ir—, así que aquí se igualan los dos:
 * sin subrayado y con la letra del contenedor. Si no, la misma rejilla se ve de dos maneras
 * según el área, y esa diferencia no significa nada para quien la mira.
 */
.fxc-rejilla .fxc-rejilla__abrir {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: start;
	text-decoration: none;
	cursor: pointer;
}

.fxc-rejilla .fxc-rejilla__pieza:hover .fxc-rejilla__abrir { text-decoration: underline; }

/*
 * El velo que hace clicable la tarjeta entera.
 *
 * Va por encima del lienzo —que está posicionado y, sin `z-index`, se pintaba encima del
 * velo—: pulsar la portada no hacía nada y solo respondía el texto del título. Las
 * acciones se levantan por encima del velo con su propio `z-index`, para que «Diseñar»
 * siga llevando al editor y no a la ficha.
 *
 * De todas formas el guion no depende de esto: escucha en la tarjeta. Esto es lo que hace
 * que el cursor diga que se puede pulsar.
 */
.fxc-rejilla .fxc-rejilla__abrir::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.fxc-rejilla .fxc-rejilla__pieza { cursor: pointer; }

.fxc-rejilla .fxc-rejilla__abrir:focus-visible { outline: none; }
.fxc-rejilla .fxc-rejilla__pieza:hover .fxc-rejilla__titulo { color: var(--fxc-r-acento); }

/* ── Los datos ─────────────────────────────────────────────────── */

.fxc-rejilla .fxc-rejilla__datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .5rem;
	margin: 0;
	margin-block-start: auto;
}

.fxc-rejilla .fxc-rejilla__dato {
	font-family: var(--fxc-r-mono);
	font-size: .75rem;
	font-variant-numeric: tabular-nums;
	color: var(--fxc-r-tenue);
	white-space: nowrap;
}

/* El estado NO depende solo del color: lleva su palabra. */
.fxc-rejilla .fxc-rejilla__estado {
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
	padding: .1rem .5rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--fxc-r-tenue);
}

.fxc-rejilla .fxc-rejilla__pieza[data-estado="publish"] .fxc-rejilla__estado { color: var(--fxc-r-publicado); }
.fxc-rejilla .fxc-rejilla__pieza[data-estado="draft"] .fxc-rejilla__estado { color: var(--fxc-r-borrador); }

/* El veredicto de la última exportación: la pregunta que más se hace un creador. */
.fxc-rejilla .fxc-rejilla__veredicto {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .02em;
	white-space: nowrap;
	padding: .1rem .5rem;
	border-radius: 4px;
	background: color-mix(in oklab, currentColor 12%, transparent);
}

.fxc-rejilla .fxc-rejilla__veredicto[data-paso="si"] { color: var(--fxc-r-publicado); }
.fxc-rejilla .fxc-rejilla__veredicto[data-paso="no"] { color: var(--fxc-r-fallo); }

/* ── Las acciones ──────────────────────────────────────────────── */

.fxc-rejilla .fxc-rejilla__acciones {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.fxc-rejilla .fxc-rejilla__accion {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .7rem;
	border: 1px solid var(--fxc-r-acento);
	border-radius: calc(var(--fxc-r-radio) / 2);
	background: var(--fxc-r-acento);
	color: #fff;
	font: inherit;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.fxc-rejilla .fxc-rejilla__accion--suave {
	background: transparent;
	color: var(--fxc-r-texto);
	border-color: var(--fxc-r-borde);
}

.fxc-rejilla .fxc-rejilla__accion:hover { filter: brightness(1.08); }
.fxc-rejilla .fxc-rejilla__accion--suave:hover { border-color: var(--fxc-r-acento); color: var(--fxc-r-acento); filter: none; }

.fxc-rejilla .fxc-rejilla__accion:focus-visible {
	outline: 2px solid var(--fxc-r-acento);
	outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────
   Lo propio de cada área
   ───────────────────────────────────────────────────────────────── */

/*
 * MEDIOS — la miniatura va ENTERA, sin recortar.
 *
 * `cover` recorta por los bordes, y en una biblioteca de medios los bordes son justo lo que
 * distingue dos capturas parecidas. Aquí se busca mirando, así que se enseña todo aunque
 * queden franjas: la franja se ignora sola, el recorte no se puede deshacer con la vista.
 */
.fxc-rejilla .fxc-rejilla__imagen--entera {
	object-fit: contain;
	padding: .5rem;
}

/*
 * MEDIOS y PAQUETES — el nombre de un fichero es un dato, no un título.
 *
 * En monoespaciada y sin cortar por la mitad: `atencion-al-cliente-scorm-2004-4.zip` solo
 * se distingue de su hermano por el final, así que el final tiene que verse.
 */
.fxc-rejilla .fxc-rejilla__titulo--fichero {
	font-family: var(--fxc-r-mono);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: 0;
	word-break: break-all;
}

/* PAQUETES — la versión de SCORM, con su palabra y no solo con su color. */
.fxc-rejilla .fxc-rejilla__marca {
	font-family: var(--fxc-r-mono);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .03em;
	white-space: nowrap;
	padding: .1rem .4rem;
	border: 1px solid currentColor;
	border-radius: 3px;
	color: var(--fxc-r-tenue);
}

.fxc-rejilla .fxc-rejilla__marca[data-scorm="2004-3"],
.fxc-rejilla .fxc-rejilla__marca[data-scorm="2004-4"] {
	color: var(--fxc-r-acento);
}

/*
 * EMPRESAS — la cifra es el motivo por el que se mira esta pantalla.
 *
 * Grande y alineada a la derecha en su propia esquina: en una rejilla de doce empresas, lo
 * que se hace es comparar números, y para comparar hay que poder recorrerlos en columna.
 */
.fxc-rejilla .fxc-rejilla__cifra {
	position: absolute;
	inset-block-start: var(--fxc-r-relleno);
	inset-inline-end: var(--fxc-r-relleno);
	font-family: var(--fxc-r-mono);
	font-size: 1.75rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--fxc-r-acento);
}

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__cifra {
	position: static;
	font-size: 1.25rem;
}

/*
 * USUARIOS — quien está sin acceso.
 *
 * De los dos botones que pinta el PHP se enseña uno, según `data-baja` de la tarjeta. Así
 * cambiar de estado es cambiar un atributo: el guion no compone textos ni rutas, y si no
 * llegara a cargar, lo que se ve sigue siendo verdad.
 */
.fxc-rejilla .fxc-rejilla__pieza[data-baja="no"] .fxc-rejilla__accion--alta,
.fxc-rejilla .fxc-rejilla__pieza[data-baja="si"] .fxc-rejilla__accion--baja {
	display: none;
}

/*
 * Y la tarjeta se apaga —pero no se esconde—.
 *
 * Sigue siendo el autor de sus cursos y hay que poder encontrarlo. Apagada se distingue de
 * un vistazo entre veinte; escondida obligaría a buscar por otro sitio una cuenta que ya no
 * aparece y que tampoco se puede recuperar.
 */
.fxc-rejilla .fxc-rejilla__pieza[data-baja="si"] .fxc-rejilla__lienzo,
.fxc-rejilla .fxc-rejilla__pieza[data-baja="si"] .fxc-rejilla__titulo {
	filter: grayscale(1);
	opacity: .6;
}

.fxc-rejilla .fxc-rejilla__estado[data-baja="si"] { color: var(--fxc-r-fallo); }

/* El porqué de un «no puedes», donde se pulsó. */
.fxc-rejilla .fxc-rejilla__aviso {
	margin: .4rem 0 0;
	font-size: .8125rem;
	line-height: 1.4;
	color: var(--fxc-r-fallo);
}

/* USUARIOS — el papel, en chapa. Con su palabra, no solo con su color. */
.fxc-rejilla .fxc-rejilla__papel {
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: .1rem .5rem;
	border-radius: 3px;
	background: color-mix(in oklab, var(--fxc-r-acento) 14%, transparent);
	color: var(--fxc-r-acento);
}

.fxc-rejilla .fxc-rejilla__papel[data-papel="fxc_gestor"],
.fxc-rejilla .fxc-rejilla__papel[data-papel="administrator"] {
	background: color-mix(in oklab, var(--fxc-r-borrador) 14%, transparent);
	color: var(--fxc-r-borrador);
}

/* ─────────────────────────────────────────────────────────────────
   LAS FORMAS — dónde va cada cosa
   ───────────────────────────────────────────────────────────────── */

/* Tarjeta: portada arriba, texto debajo. La de por defecto. */
.fxc-rejilla[data-disposicion="tarjeta"] .fxc-rejilla__lienzo { container-type: inline-size; }

/*
 * Póster: el texto SOBRE la imagen.
 *
 * El degradado no es adorno: sin él, un título claro sobre una foto clara es ilegible y no
 * hay forma de saberlo hasta que alguien sube esa foto. Con el velo, cualquier portada
 * vale y el contraste deja de depender de la suerte.
 */
.fxc-rejilla[data-disposicion="poster"] { --fxc-r-proporcion: auto; }

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__pieza {
	min-block-size: var(--fxc-r-alto);
	justify-content: end;
}

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__lienzo {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	container-type: inline-size;
}

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__cuerpo {
	position: relative;
	z-index: 0;
	color: #fff;
	background: linear-gradient(to top, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 55%) 45%, transparent 100%);
	padding-block-start: 3rem;
}

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__titulo,
.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__dato,
.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__inicial { color: #fff; }

/*
 * En el póster, el respaldo va OSCURO.
 *
 * El texto del póster es blanco por definición —va sobre una foto—, así que un curso sin
 * portada con el respaldo claro de las demás formas sale con el título blanco sobre un
 * fondo casi blanco: ilegible, y solo en las tarjetas sin portada, que son justo las que
 * nadie mira al probar. El velo no puede arreglarlo porque no hay nada oscuro debajo.
 */
.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__lienzo {
	background: color-mix(in oklab, var(--fxc-r-acento) 55%, #10161c);
}

.fxc-rejilla[data-disposicion="poster"][data-respaldo="tono"] .fxc-rejilla__lienzo {
	background: hsl(var(--fxc-r-tono, 190) 34% 24%);
}

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__inicial {
	color: rgb(255 255 255 / 32%);
}

/*
 * Y los estados se aclaran, no se apagan.
 *
 * Siguen significando lo mismo —verde publicado, ámbar borrador, rojo fallo— pero en la
 * versión que se lee sobre negro. Se redefinen como TOKENS: las reglas que los usan no se
 * enteran de que ha cambiado nada.
 */
.fxc-rejilla[data-disposicion="poster"] {
	--fxc-r-publicado: #7fe0a8;
	--fxc-r-borrador: #f2c46b;
	--fxc-r-fallo: #ffa79f;
	--fxc-r-tenue: rgb(255 255 255 / 78%);
}

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__titulo { font-size: 1.25rem; }
.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__pieza:hover .fxc-rejilla__titulo { color: #fff; }

.fxc-rejilla[data-disposicion="poster"] .fxc-rejilla__accion--suave {
	color: #fff;
	border-color: rgb(255 255 255 / 45%);
}

/* Banda: portada al lado. Cabe más texto y se lee de corrido. */
.fxc-rejilla[data-disposicion="banda"] .fxc-rejilla__pieza { flex-direction: row; align-items: stretch; }

.fxc-rejilla[data-disposicion="banda"] .fxc-rejilla__lienzo {
	flex: 0 0 clamp(6rem, 28%, 14rem);
	aspect-ratio: auto;
	container-type: inline-size;
}

/* Editorial: sin imagen y con el número por delante. Un índice, no un escaparate. */
.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__lienzo { display: none; }

.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__cuerpo {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "numero titulo" "numero datos" "numero acciones";
	column-gap: 1rem;
	align-items: start;
}

.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__numero { grid-area: numero; }
.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__titulo { grid-area: titulo; font-size: 1.15rem; }
.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__datos { grid-area: datos; margin-block-start: 0; }
.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__acciones { grid-area: acciones; margin-block-start: .5rem; }

.fxc-rejilla .fxc-rejilla__numero {
	display: none;
	font-family: var(--fxc-r-mono);
	font-size: 2rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: color-mix(in oklab, var(--fxc-r-acento) 45%, var(--fxc-r-fondo));
}

.fxc-rejilla[data-disposicion="editorial"] .fxc-rejilla__numero { display: block; }

/*
 * Lista: una fila por curso, densa.
 *
 * No es la forma pobre: con cuarenta cursos es la única que se lee de una pasada, porque
 * los títulos quedan alineados en la misma vertical. La rejilla es para veinte; la lista,
 * para el día que haya doscientos.
 */
.fxc-rejilla[data-disposicion="lista"] {
	grid-template-columns: 1fr;
	gap: 0;
	border: var(--fxc-r-borde-ancho) solid var(--fxc-r-borde);
	border-radius: var(--fxc-r-radio);
	overflow: hidden;
}

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__pieza {
	flex-direction: row;
	align-items: center;
	gap: .9rem;
	border: 0;
	border-block-end: 1px solid var(--fxc-r-borde);
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__pieza:last-child { border-block-end: 0; }

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__lienzo {
	flex: 0 0 3.5rem;
	block-size: 3.5rem;
	aspect-ratio: 1;
	margin-inline-start: var(--fxc-r-relleno);
	border-radius: calc(var(--fxc-r-radio) / 2);
}

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__inicial { font-size: 1.25rem; }

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__cuerpo {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem .9rem;
}

.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__titulo { flex: 1 1 12rem; }
.fxc-rejilla[data-disposicion="lista"] .fxc-rejilla__datos { margin-block-start: 0; }

/* ─────────────────────────────────────────────────────────────────
   LOS ACABADOS — de qué está hecha la pieza
   Seis variables cada uno. Ni una regla.
   ───────────────────────────────────────────────────────────────── */

.fxc-rejilla[data-acabado="contorno"] {
	--fxc-r-borde-ancho: 1px;
	--fxc-r-sombra: none;
	--fxc-r-sombra-hover: none;
	--fxc-r-elevacion: 0px;
}

.fxc-rejilla[data-acabado="plano"] {
	--fxc-r-borde-ancho: 0px;
	--fxc-r-fondo: color-mix(in oklab, var(--fxc-r-acento) 6%, #ffffff);
	--fxc-r-fondo-hover: color-mix(in oklab, var(--fxc-r-acento) 12%, #ffffff);
	--fxc-r-sombra: none;
	--fxc-r-elevacion: 0px;
}

.fxc-rejilla[data-acabado="elevado"] {
	--fxc-r-borde-ancho: 0px;
	--fxc-r-sombra: 0 1px 2px rgb(18 25 31 / 8%), 0 4px 12px rgb(18 25 31 / 8%);
	--fxc-r-sombra-hover: 0 2px 4px rgb(18 25 31 / 10%), 0 12px 28px rgb(18 25 31 / 14%);
	--fxc-r-elevacion: 3px;
}

/*
 * Cristal.
 *
 * Necesita algo detrás que desenfocar: sobre un fondo blanco liso no se nota, y sobre una
 * imagen es donde luce. Va con un fondo semitransparente PROPIO, no heredado, porque
 * `backdrop-filter` sin opacidad no hace nada visible.
 */
.fxc-rejilla[data-acabado="cristal"] {
	--fxc-r-borde-ancho: 1px;
	--fxc-r-borde: rgb(255 255 255 / 35%);
	--fxc-r-fondo: rgb(255 255 255 / 12%);
	--fxc-r-fondo-hover: rgb(255 255 255 / 20%);
	--fxc-r-desenfoque: 14px;
	--fxc-r-sombra: 0 4px 24px rgb(18 25 31 / 12%);
}

.fxc-rejilla[data-acabado="cristal"] .fxc-rejilla__pieza {
	backdrop-filter: blur(var(--fxc-r-desenfoque));
	-webkit-backdrop-filter: blur(var(--fxc-r-desenfoque));
}

.fxc-rejilla[data-acabado="relleno"] {
	--fxc-r-borde-ancho: 0px;
	--fxc-r-fondo: color-mix(in oklab, var(--fxc-r-acento) 14%, #ffffff);
	--fxc-r-fondo-hover: color-mix(in oklab, var(--fxc-r-acento) 22%, #ffffff);
	--fxc-r-sombra: none;
	--fxc-r-elevacion: 2px;
}

/* Con tono por curso, el relleno se tiñe del color de CADA curso, no del de la casa. */
.fxc-rejilla[data-acabado="relleno"][data-respaldo="tono"] .fxc-rejilla__pieza {
	background: hsl(var(--fxc-r-tono, 190) 40% 96%);
}

@media (prefers-color-scheme: dark) {
	.fxc-rejilla[data-acabado="plano"] { --fxc-r-fondo: color-mix(in oklab, var(--fxc-r-acento) 10%, #0f151b); --fxc-r-fondo-hover: color-mix(in oklab, var(--fxc-r-acento) 18%, #0f151b); }
	.fxc-rejilla[data-acabado="relleno"] { --fxc-r-fondo: color-mix(in oklab, var(--fxc-r-acento) 18%, #0f151b); --fxc-r-fondo-hover: color-mix(in oklab, var(--fxc-r-acento) 26%, #0f151b); }
	.fxc-rejilla[data-acabado="relleno"][data-respaldo="tono"] .fxc-rejilla__pieza { background: hsl(var(--fxc-r-tono, 190) 22% 16%); }
	.fxc-rejilla[data-acabado="cristal"] { --fxc-r-borde: rgb(255 255 255 / 14%); --fxc-r-fondo: rgb(255 255 255 / 7%); --fxc-r-fondo-hover: rgb(255 255 255 / 12%); }
	.fxc-rejilla[data-acabado="elevado"] { --fxc-r-sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 4px 14px rgb(0 0 0 / 34%); --fxc-r-sombra-hover: 0 2px 6px rgb(0 0 0 / 46%); }
}

/* ─────────────────────────────────────────────────────────────────
   El mosaico y los extremos
   ───────────────────────────────────────────────────────────────── */

/*
 * Destacar el primero: ocupa dos por dos.
 *
 * Sin `grid-auto-flow: dense` a propósito. `dense` rellenaría el hueco colando una tarjeta
 * de más adelante, y una lista de cursos ordenada por fecha dejaría de estar ordenada sin
 * que nadie lo pidiera.
 */
.fxc-rejilla[data-destacar="si"] .fxc-rejilla__pieza:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.fxc-rejilla[data-destacar="si"][data-disposicion="poster"] .fxc-rejilla__pieza:first-child .fxc-rejilla__titulo {
	font-size: 1.75rem;
}

/*
 * La destacada mide el doble de alto, y su portada tiene que crecer con ella.
 *
 * Con la proporción fija, la imagen se quedaba de su tamaño y el resto del alto lo ocupaba
 * un vacío entre el título y los datos. La tarjeta grande parecía un error de maquetación
 * en vez de una decisión.
 */
.fxc-rejilla[data-destacar="si"] .fxc-rejilla__pieza:first-child .fxc-rejilla__lienzo {
	aspect-ratio: auto;
	flex: 1 1 auto;
	min-block-size: 0;
}

.fxc-rejilla[data-destacar="si"] .fxc-rejilla__pieza:first-child .fxc-rejilla__titulo {
	font-size: 1.375rem;
}

.fxc-rejilla[data-destacar="si"] .fxc-rejilla__pieza:first-child .fxc-rejilla__cuerpo {
	flex: 0 0 auto;
}

/* Nada que enseñar. Con su forma, no como un renglón suelto. */
.fxc-rejilla__vacio {
	grid-column: 1 / -1;
	margin: 0;
	padding: 2.5rem 1.25rem;
	border: 1px dashed var(--fxc-r-borde, #c2ccd8);
	border-radius: var(--fxc-r-radio, 10px);
	text-align: center;
	color: var(--fxc-r-tenue, #5d6b7a);
	font-family: var(--fxc-r-letra);
	font-size: .9375rem;
}

/*
 * En pantalla estrecha manda la pantalla, no el desplegable.
 *
 * Tres columnas en un móvil no son tres columnas: son tres tarjetas ilegibles. El control
 * de columnas tiene su valor por dispositivo en Elementor, pero esto es la red de seguridad
 * para quien no lo toque.
 */
@media (max-width: 40rem) {
	.fxc-rejilla { grid-template-columns: 1fr; }
	.fxc-rejilla[data-destacar="si"] .fxc-rejilla__pieza:first-child { grid-column: auto; grid-row: auto; }
	.fxc-rejilla[data-disposicion="banda"] .fxc-rejilla__pieza { flex-direction: column; }
	.fxc-rejilla[data-disposicion="banda"] .fxc-rejilla__lienzo { flex-basis: auto; aspect-ratio: var(--fxc-r-proporcion); }
}

@media (prefers-reduced-motion: reduce) {
	.fxc-rejilla .fxc-rejilla__pieza { transition: none; }
	.fxc-rejilla .fxc-rejilla__pieza:hover { transform: none; }
}

/*
 * Lo que ha escrito una persona, en su tarjeta.
 *
 * En tono tenue: es contexto, no un dato de identidad. Quien busca a alguien lo busca por su
 * nombre; esta línea solo tiene que estar ahí el día que a alguien se le ocurra borrarlo.
 */
.fxc-rejilla .fxc-rejilla__escrito {
	margin: .15rem 0 0;
	font-size: .8125rem;
	color: var(--fxc-tenue);
	font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────
   Las claves de ingesta, dentro de la tarjeta de su empresa
   ───────────────────────────────────────────────────────────────── */

/*
 * Va plegado, y ocupa cero hasta que se abre.
 *
 * Es lo correcto para lo que es: se mira el día que se da de alta una integración y no se
 * vuelve a mirar en meses. Desplegado siempre, la rejilla de empresas dejaría de responder
 * a la pregunta por la que se abre —cuántos cursos tiene cada una— y pasaría a ser una lista
 * de credenciales que nadie ha pedido ver.
 */
.fxc-rejilla .fxc-claves {
	margin-top: .75rem;
	border-top: 1px solid var(--fxc-r-borde, #dde3ea);
	padding-top: .5rem;
	font-family: var(--fxc-r-letra);
}

.fxc-rejilla .fxc-claves__resumen {
	cursor: pointer;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--fxc-r-acento, #0b6a67);
	list-style: none;
}

.fxc-rejilla .fxc-claves__resumen::-webkit-details-marker { display: none; }

/*
 * El triángulo se dibuja aquí porque el del navegador se quitó arriba.
 *
 * Quitar el marcador nativo sin poner otro deja un texto que no parece pulsable: la única
 * pista de que ahí hay algo desaparecería justo para quien no va a probar a hacer clic.
 */
.fxc-rejilla .fxc-claves__resumen::before {
	content: "▸";
	display: inline-block;
	margin-right: .35rem;
	transition: transform .15s ease;
}

.fxc-rejilla .fxc-claves__caja[open] > .fxc-claves__resumen::before { transform: rotate(90deg); }

.fxc-rejilla .fxc-claves__resumen:focus-visible {
	outline: 2px solid var(--fxc-r-acento, #0b6a67);
	outline-offset: 2px;
}

.fxc-rejilla .fxc-claves__cuerpo {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: .5rem;
	font-size: .8125rem;
}

.fxc-rejilla .fxc-claves__ayuda,
.fxc-rejilla .fxc-claves__endpoint {
	margin: 0;
	color: var(--fxc-r-tenue, #5d6b7a);
	line-height: 1.45;
}

.fxc-rejilla .fxc-claves__endpoint-texto {
	display: block;
	margin: 0 0 .35rem;
}

/*
 * La llamada entera, para copiar y pegar.
 *
 * Es un `<pre>`: los saltos de línea y la sangría de las cabeceras **son** la instrucción, y con
 * un `<p>` el navegador los colapsa y sale un renglón ilegible que además ya no se puede pegar
 * en una terminal.
 *
 * `white-space: pre-wrap` y no `pre` a secas: dentro de una tarjeta de trescientos píxeles, una
 * URL de ochenta caracteres con `pre` saca una barra de desplazamiento horizontal por cada
 * empresa de la rejilla.
 */
.fxc-rejilla .fxc-claves__llamada {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
}

.fxc-rejilla .fxc-claves__orden {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	padding: .5rem .6rem;
	border: 1px solid var(--fxc-r-borde, #dde3ea);
	border-radius: 6px;
	background: var(--fxc-r-papel, #f6f7f9);
	color: var(--fxc-r-texto, #12191f);
	font-family: var(--fxc-r-mono);
	font-size: .6875rem;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 2;
}


.fxc-rejilla .fxc-claves__pie {
	margin: 0;
	color: var(--fxc-r-tenue, #5d6b7a);
	font-size: .6875rem;
}

/*
 * Las cosas que se copian van en monoespaciada y **se pueden partir**.
 *
 * Una URL o una clave de 56 caracteres dentro de una tarjeta de trescientos píxeles: sin
 * `overflow-wrap`, la tarjeta se estira y rompe la rejilla entera para enseñar una línea que
 * de todas formas no cabe.
 */
.fxc-rejilla .fxc-claves__url,
.fxc-rejilla .fxc-claves__huella,
.fxc-rejilla .fxc-claves__valor {
	font-family: var(--fxc-r-mono);
	font-size: .75rem;
	overflow-wrap: anywhere;
}

.fxc-rejilla .fxc-claves__url { display: block; color: var(--fxc-r-texto, #12191f); }

.fxc-rejilla .fxc-claves__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.fxc-rejilla .fxc-claves__fila {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .5rem;
	border: 1px solid var(--fxc-r-borde, #dde3ea);
	border-radius: 8px;
	background: var(--fxc-r-papel, #f6f7f9);
}

.fxc-rejilla .fxc-claves__quien {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem;
}

.fxc-rejilla .fxc-claves__huella,
.fxc-rejilla .fxc-claves__cuando { color: var(--fxc-r-tenue, #5d6b7a); }

.fxc-rejilla .fxc-claves__cuando { font-variant-numeric: tabular-nums; }

.fxc-rejilla .fxc-claves__ninguna {
	color: var(--fxc-r-tenue, #5d6b7a);
	font-style: italic;
}

/*
 * La clave recién creada, marcada con el color de aviso.
 *
 * No es un error: es la única vez que se puede ver. Si se pinta como una línea más de la
 * lista, se cierra el panel sin copiarla y hay que generar otra — con la anterior viva y sin
 * que nadie sepa para qué era.
 */
.fxc-rejilla .fxc-claves__secreto {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .5rem;
	border: 1px solid var(--fxc-r-borrador, #9a5b06);
	border-radius: 6px;
	background: var(--fxc-r-fondo, #fff);
}

.fxc-rejilla .fxc-claves__una-vez {
	color: var(--fxc-r-borrador, #9a5b06);
	font-size: .75rem;
	font-weight: 500;
}

.fxc-rejilla .fxc-claves__forma {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: .5rem;
}

.fxc-rejilla .fxc-claves__etiqueta {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	flex: 1 1 10rem;
	color: var(--fxc-r-tenue, #5d6b7a);
	font-size: .75rem;
}

.fxc-rejilla .fxc-claves__nota {
	padding: .35rem .5rem;
	border: 1px solid var(--fxc-r-borde, #dde3ea);
	border-radius: 6px;
	background: var(--fxc-r-fondo, #fff);
	color: var(--fxc-r-texto, #12191f);
	font-family: var(--fxc-r-letra);
	font-size: .8125rem;
}

.fxc-rejilla .fxc-claves__generar,
.fxc-rejilla .fxc-claves__revocar,
.fxc-rejilla .fxc-claves__copiar {
	border: 1px solid var(--fxc-r-borde, #dde3ea);
	border-radius: 6px;
	padding: .35rem .6rem;
	background: var(--fxc-r-fondo, #fff);
	color: var(--fxc-r-texto, #12191f);
	font-family: var(--fxc-r-letra);
	font-size: .75rem;
	cursor: pointer;
}

.fxc-rejilla .fxc-claves__generar {
	border-color: var(--fxc-r-acento, #0b6a67);
	color: var(--fxc-r-acento, #0b6a67);
	font-weight: 500;
}

.fxc-rejilla .fxc-claves__copiar { align-self: flex-start; }

.fxc-rejilla .fxc-claves__revocar {
	align-self: flex-start;
	color: var(--fxc-r-fallo, #b42318);
	border-color: var(--fxc-r-fallo, #b42318);
}

.fxc-rejilla .fxc-claves__generar[disabled],
.fxc-rejilla .fxc-claves__revocar[disabled] { opacity: .6; cursor: default; }

.fxc-rejilla .fxc-claves__aviso {
	margin: 0;
	color: var(--fxc-r-fallo, #b42318);
	font-size: .8125rem;
}

/*
 * En la disposición «poster» la tarjeta es una imagen a sangre con el texto encima.
 *
 * Ahí un panel de credenciales no se lee y no se puede arreglar con color: se esconde. La
 * pantalla de empresas por defecto no es esa, y quien elija poster está eligiendo una
 * pantalla para mirar, no para administrar.
 */
.fxc-rejilla[data-disposicion="poster"] .fxc-claves { display: none; }

@media (prefers-reduced-motion: reduce) {
	.fxc-rejilla .fxc-claves__resumen::before { transition: none; }
}