/*----------- CATALOGO DE CURSOS EN TARJETAS ----------------*/
/* Estilo inspirado en Alpha Cloud (VILLAWOLVES/ALPHA_CLOUD): panel unico
   contenedor (.app-panel), buscador compacto siempre visible, categorias
   como ayuda de navegacion en un modal a pantalla casi completa (nunca
   chips sueltas por toda la pagina ni scroll lateral), y un unico scroll
   interno para toda la lista de categorias/tarjetas (nunca uno por
   categoria) — el protagonismo visual es del listado de cursos, buscador
   y categorias son solo ayudas. Reutiliza --COLOR_PRINCIPAL/--COLOR_2 ya
   definidos en style_asociados.css en vez de duplicar la paleta. */

.catalogo_cursos {
	--catalogo-radius-sm: 10px;
	--catalogo-radius-md: 14px;
	--catalogo-radius-lg: 20px;
	--catalogo-radius-pill: 999px;
	--catalogo-shadow-soft: 0 8px 20px rgba(15, 23, 42, 0.06);
	--catalogo-shadow-hover: 0 10px 22px rgba(0, 118, 165, 0.16);
	--catalogo-border: #e3e8ef;
	margin: 1.5em 0;
}

/* style.css define una regla global "i { margin-right: 1em; }" pensada
   para separar icono+texto en botones de toda la app. Dentro del
   catalogo eso descentra cualquier icono que vaya solo (p.ej. el de la
   tarjeta de curso) o duplica el espaciado donde ya usamos "gap". Se
   resetea aqui y el espaciado icono+texto se controla solo con gap. */
.catalogo_cursos i {
	margin: 0;
}

.catalogo_cursos_panel {
	background: linear-gradient(160deg, #ffffff 0%, rgba(0, 118, 165, 0.035) 100%);
	border: 1px solid rgba(0, 118, 165, 0.14);
	border-radius: var(--catalogo-radius-lg);
	box-shadow: var(--catalogo-shadow-soft);
	padding: clamp(14px, 2vw, 26px);
}

/* ---- Cabecera: buscador + categorias (ayudas de navegacion) + contador.
   Fija (sticky) arriba: el scroll es el de la pagina/body, no una caja
   interna, pero la cabecera se queda siempre visible mientras se recorre
   el listado. */
.catalogo_cursos_cabecera {
	position: sticky;
	top: 0;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0 0 1.1em;
	padding: 0.6em 10px 0.9em;
	background: #fdfeff;
	border-bottom: 1px solid var(--catalogo-border);
}

.catalogo_cursos_acciones {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-wrap: wrap;
}

/* Buscador compacto y siempre visible (no un boton que oculta la
   funcionalidad): ocupa poco mas que un boton, sin pasos extra. */
.catalogo_cursos_buscador {
	width: min(280px, 60vw);
	background: #fff;
	border-radius: var(--catalogo-radius-pill);
	border: 1px solid var(--catalogo-border);
	overflow: hidden;
}

.catalogo_cursos_buscador .input-group-text {
	background: transparent;
	color: var(--COLOR_PRINCIPAL);
	border: none;
	padding-left: 14px;
}

.catalogo_cursos_buscador .catalogo_cursos_buscador_input {
	border: none;
	box-shadow: none;
	min-height: 36px;
	font-size: 0.85em;
	padding-left: 0.3em;
}

.catalogo_cursos_buscador .catalogo_cursos_buscador_input:focus {
	box-shadow: none;
}

.catalogo_cursos_buscador_cerrar {
	border: none;
	background: transparent;
	color: #94a3b8;
	padding: 0 12px;
	cursor: pointer;
}

.catalogo_cursos_buscador_cerrar:hover {
	color: var(--COLOR_PRINCIPAL);
}

.catalogo_cursos_contador {
	font-size: 0.8em;
	color: #6b7280;
	margin: 0;
	white-space: nowrap;
}

/* Boton secundario (contorno, no relleno) para la ayuda de categorias. */
.catalogo_cursos_categorias_boton {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 36px;
	padding: 0 14px;
	border-radius: var(--catalogo-radius-pill);
	background: rgba(0, 118, 165, 0.06);
	border: 1.5px solid var(--COLOR_PRINCIPAL);
	color: var(--COLOR_PRINCIPAL);
	font-size: 0.82em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.catalogo_cursos_categorias_boton:hover {
	background: rgba(0, 118, 165, 0.14);
}

/* "Marcar todos" (seleccion masiva, modo admin): mismo patron de boton-toggle
   que catalogo_cursos_filtro_dq/euneiz, en la misma fila del buscador. */
.personalizacion_marcar_todos {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 36px;
	padding: 0 14px;
	border-radius: var(--catalogo-radius-pill);
	background: #fff;
	border: 1.5px solid var(--catalogo-border, #e3e8ef);
	color: var(--COLOR_PRINCIPAL);
	font-size: 0.82em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.personalizacion_marcar_todos:hover {
	border-color: var(--COLOR_PRINCIPAL);
}
.personalizacion_marcar_todos[aria-pressed="true"] {
	background: var(--COLOR_PRINCIPAL);
	border-color: var(--COLOR_PRINCIPAL);
	color: #fff;
}

/* Boton-filtro (toggle) para DQ, mismo patron que el de EUNEIZ (mas abajo).
   DQ es una etiqueta fija en toda la pagina de cursos_elearning (no hay
   columna DQ en BD, a diferencia de Euneiz), asi que activarlo no reduce
   el listado; se mantiene por consistencia visual con el resto de filtros. */
.catalogo_cursos_filtro_dq {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 36px;
	padding: 0 14px;
	border-radius: var(--catalogo-radius-pill);
	background: #fff;
	border: 1.5px solid var(--catalogo-border, #e3e8ef);
	color: #b3660a;
	font-size: 0.82em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.catalogo_cursos_filtro_dq:hover {
	border-color: #b3660a;
}

.catalogo_cursos_filtro_dq[aria-pressed="true"] {
	background: #b3660a;
	border-color: #b3660a;
	color: #fff;
}

/* Boton-filtro (toggle) para mostrar solo cursos con certificacion EUNEIZ.
   Mismo tamaño que el boton de categorias; el estado activo usa el mismo
   tono morado que .tarjeta_curso_badge_euneiz para que se reconozca de un
   vistazo. */
.catalogo_cursos_filtro_euneiz {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 36px;
	padding: 0 14px;
	border-radius: var(--catalogo-radius-pill);
	background: #fff;
	border: 1.5px solid var(--catalogo-border, #e3e8ef);
	color: #6633b3;
	font-size: 0.82em;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.catalogo_cursos_filtro_euneiz:hover {
	border-color: #6633b3;
}

.catalogo_cursos_filtro_euneiz[aria-pressed="true"] {
	background: #6633b3;
	border-color: #6633b3;
	color: #fff;
}

.catalogo_cursos_categorias_boton_contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	border-radius: var(--catalogo-radius-pill);
	background: var(--COLOR_PRINCIPAL);
	color: #fff;
	font-size: 0.72em;
	font-weight: 500;
}

/* ---- Modal de categorias: ayuda de navegacion a pantalla casi completa,
   nunca chips sueltas por la pagina ni scroll lateral (con 20-30
   categorias no cabe en una fila ni en una columna estrecha). ---- */
.catalogo_cursos_categorias_fondo {
	position: fixed;
	inset: 0;
	z-index: 2500;
	background: rgba(15, 23, 42, 0.4);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.catalogo_cursos_categorias_fondo.catalogo_cursos_categorias_visible {
	opacity: 1;
	pointer-events: auto;
}

/* Siempre a pantalla (casi) completa, independiente del numero de
   categorias: lo que se adapta al contenido es el tamano de las tarjetas
   de dentro (ver .catalogo_cursos_filtros/.catalogo_cursos_chip mas
   abajo), no el modal en si. Se deja un margen para que se vea el fondo
   oscurecido/difuminado alrededor — clicar ahi tambien cierra el modal
   (.catalogo_cursos_categorias_fondo ya tiene ese comportamiento). */
.catalogo_cursos_categorias_panel {
	position: fixed;
	inset: 28px;
	z-index: 2600;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var(--catalogo-radius-lg);
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
	opacity: 0;
	transform: scale(0.98);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.catalogo_cursos_categorias_panel.catalogo_cursos_categorias_visible {
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
}

.catalogo_cursos_categorias_cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--catalogo-border);
}

.catalogo_cursos_categorias_titulo {
	margin: 0;
	font-size: 1.1em;
	font-weight: 500;
	color: #1e293b;
}

.catalogo_cursos_categorias_cerrar {
	border: none;
	background: none;
	cursor: pointer;
	color: #94a3b8;
	font-size: 1.2em;
	line-height: 1;
	padding: 4px 8px;
}

.catalogo_cursos_categorias_cerrar:hover {
	color: var(--COLOR_PRINCIPAL);
}

/* Grid de categorias dentro del modal: columnas de ancho FIJO (no 1fr),
   para que las tarjetas nunca se estiren de mas cuando hay pocas
   categorias — el modal siempre es pantalla completa, pero el numero de
   tarjetas dentro es variable, asi que centramos el grid en vez de forzar
   que ocupen todo el ancho. Nunca una fila/columna que fuerce scroll
   lateral (auto-fill calcula las columnas segun el ancho disponible). */
.catalogo_cursos_filtros {
	display: grid;
	grid-template-columns: repeat(auto-fill, 260px);
	grid-auto-rows: min-content;
	justify-content: center;
	align-content: start;
	align-items: start;
	gap: 0.7em;
	padding: 24px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.catalogo_cursos_chip {
	display: flex;
	align-items: center;
	gap: 0.5em;
	width: 260px;
	padding: 0.6em 0.75em;
	border-radius: var(--catalogo-radius-sm);
	border: 1px solid var(--catalogo-border);
	background: #fff;
	color: #475569;
	font-size: 0.85em;
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.catalogo_cursos_chip:hover {
	border-color: var(--COLOR_PRINCIPAL);
	color: var(--COLOR_PRINCIPAL);
	background: rgba(0, 118, 165, 0.04);
	text-decoration: none;
}

.catalogo_cursos_chip i {
	flex: 0 0 auto;
	font-size: 0.9em;
	color: var(--COLOR_PRINCIPAL);
}

.catalogo_cursos_chip span:not(.catalogo_cursos_chip_contador) {
	flex: 1;
	text-align: left;
	white-space: normal;
	line-height: 1.25;
}

.catalogo_cursos_chip_contador {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 0.35em;
	margin-left: auto;
	border-radius: var(--catalogo-radius-pill);
	background: var(--COLOR_2);
	color: var(--COLOR_PRINCIPAL);
	font-size: 0.72em;
	font-weight: 500;
}

/* ---- Contenido: flujo natural, sin caja de scroll propia — el scroll es
   el de la pagina/body. La cabecera (arriba) es sticky, asi que el
   buscador/categorias siguen visibles mientras se recorre el listado. */
.catalogo_cursos .catalogo_cursos_contenido {
	height: auto;
	overflow: visible;
}

.catalogo_cursos_categoria_titulo {
	display: flex;
	align-items: center;
	gap: 0.7em;
	text-align: left;
	padding: 0 0 0.8em;
	margin: 0 0 1.2em;
	font-size: 1.05em;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: #0f172a;
	border-bottom: 3px solid var(--COLOR_PRINCIPAL);
	background: transparent;
	transform: none;
	left: auto;
}

/* Icono en insignia (mismo lenguaje que el icono de las tarjetas de curso,
   pero en tonos claros ya que va sobre fondo blanco): moderno y acorde a
   los colores corporativos en vez de un icono suelto. Color por defecto
   (azul corporativo); las variantes .categoria_color_N de mas abajo lo
   sobrescriben para que cada categoria mantenga su propio color en todas
   partes (cabecera, tarjetas y chip del modal de categorias). */
.catalogo_cursos_categoria_titulo i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	flex: 0 0 auto;
	border-radius: var(--catalogo-radius-sm);
	background: var(--COLOR_2);
	color: var(--COLOR_PRINCIPAL);
	font-size: 0.6em;
	line-height: 1;
}

.catalogo_cursos_categoria_contador {
	background: var(--COLOR_2);
	color: var(--COLOR_PRINCIPAL);
	font-size: 0.6em;
	margin-left: 0.2em;
}

/* Mismo bucle de color que .tarjeta_curso_color_N (12 tonos), version
   clara/pastel para usar sobre fondo blanco (cabecera de categoria + chip
   del modal). color_0 (azul corporativo) no necesita override: ya es el
   valor por defecto de .catalogo_cursos_categoria_titulo/.catalogo_cursos_chip.
   accent/light por familia: 1 azul-violeta #3d4dbd/#e3e6fb, 2 violeta
   #7c4dbd/#ece3fb, 3 purpura-magenta #a34dbd/#f5e3fb, 4 magenta-rosa
   #c23d8f/#fbe3f2, 5 rosa-rojo #c23d57/#fbe2e7, 6 rojo #c2453d/#fbe4e2,
   7 rojo-naranja #cc5f1f/#fdebdc, 8 naranja #cc7a1f/#fdead4, 9 verde
   #2f9464/#def5ea, 10 verde-azulado #1f9482/#ddf5f0, 11 cian-azulado
   #1f7fa8/#ddf0fb. */
.categoria_color_1.catalogo_cursos_categoria_titulo { border-bottom-color: #3d4dbd; }
.categoria_color_2.catalogo_cursos_categoria_titulo { border-bottom-color: #7c4dbd; }
.categoria_color_3.catalogo_cursos_categoria_titulo { border-bottom-color: #a34dbd; }
.categoria_color_4.catalogo_cursos_categoria_titulo { border-bottom-color: #c23d8f; }
.categoria_color_5.catalogo_cursos_categoria_titulo { border-bottom-color: #c23d57; }
.categoria_color_6.catalogo_cursos_categoria_titulo { border-bottom-color: #c2453d; }
.categoria_color_7.catalogo_cursos_categoria_titulo { border-bottom-color: #cc5f1f; }
.categoria_color_8.catalogo_cursos_categoria_titulo { border-bottom-color: #cc7a1f; }
.categoria_color_9.catalogo_cursos_categoria_titulo { border-bottom-color: #2f9464; }
.categoria_color_10.catalogo_cursos_categoria_titulo { border-bottom-color: #1f9482; }
.categoria_color_11.catalogo_cursos_categoria_titulo { border-bottom-color: #1f7fa8; }

.categoria_color_1.catalogo_cursos_categoria_titulo i { background: #e3e6fb; color: #3d4dbd; }
.categoria_color_2.catalogo_cursos_categoria_titulo i { background: #ece3fb; color: #7c4dbd; }
.categoria_color_3.catalogo_cursos_categoria_titulo i { background: #f5e3fb; color: #a34dbd; }
.categoria_color_4.catalogo_cursos_categoria_titulo i { background: #fbe3f2; color: #c23d8f; }
.categoria_color_5.catalogo_cursos_categoria_titulo i { background: #fbe2e7; color: #c23d57; }
.categoria_color_6.catalogo_cursos_categoria_titulo i { background: #fbe4e2; color: #c2453d; }
.categoria_color_7.catalogo_cursos_categoria_titulo i { background: #fdebdc; color: #cc5f1f; }
.categoria_color_8.catalogo_cursos_categoria_titulo i { background: #fdead4; color: #cc7a1f; }
.categoria_color_9.catalogo_cursos_categoria_titulo i { background: #def5ea; color: #2f9464; }
.categoria_color_10.catalogo_cursos_categoria_titulo i { background: #ddf5f0; color: #1f9482; }
.categoria_color_11.catalogo_cursos_categoria_titulo i { background: #ddf0fb; color: #1f7fa8; }

.categoria_color_1.catalogo_cursos_chip:hover, .categoria_color_1.catalogo_cursos_chip i { color: #3d4dbd; }
.categoria_color_1.catalogo_cursos_chip:hover { border-color: #3d4dbd; background: #f2f3fd; }
.categoria_color_1.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #e3e6fb; color: #3d4dbd; }

.categoria_color_2.catalogo_cursos_chip:hover, .categoria_color_2.catalogo_cursos_chip i { color: #7c4dbd; }
.categoria_color_2.catalogo_cursos_chip:hover { border-color: #7c4dbd; background: #f6f2fd; }
.categoria_color_2.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #ece3fb; color: #7c4dbd; }

.categoria_color_3.catalogo_cursos_chip:hover, .categoria_color_3.catalogo_cursos_chip i { color: #a34dbd; }
.categoria_color_3.catalogo_cursos_chip:hover { border-color: #a34dbd; background: #f9f2fd; }
.categoria_color_3.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #f5e3fb; color: #a34dbd; }

.categoria_color_4.catalogo_cursos_chip:hover, .categoria_color_4.catalogo_cursos_chip i { color: #c23d8f; }
.categoria_color_4.catalogo_cursos_chip:hover { border-color: #c23d8f; background: #fdf1f8; }
.categoria_color_4.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #fbe3f2; color: #c23d8f; }

.categoria_color_5.catalogo_cursos_chip:hover, .categoria_color_5.catalogo_cursos_chip i { color: #c23d57; }
.categoria_color_5.catalogo_cursos_chip:hover { border-color: #c23d57; background: #fdf1f3; }
.categoria_color_5.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #fbe2e7; color: #c23d57; }

.categoria_color_6.catalogo_cursos_chip:hover, .categoria_color_6.catalogo_cursos_chip i { color: #c2453d; }
.categoria_color_6.catalogo_cursos_chip:hover { border-color: #c2453d; background: #fdf2f1; }
.categoria_color_6.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #fbe4e2; color: #c2453d; }

.categoria_color_7.catalogo_cursos_chip:hover, .categoria_color_7.catalogo_cursos_chip i { color: #cc5f1f; }
.categoria_color_7.catalogo_cursos_chip:hover { border-color: #cc5f1f; background: #fdf3ea; }
.categoria_color_7.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #fdebdc; color: #cc5f1f; }

.categoria_color_8.catalogo_cursos_chip:hover, .categoria_color_8.catalogo_cursos_chip i { color: #cc7a1f; }
.categoria_color_8.catalogo_cursos_chip:hover { border-color: #cc7a1f; background: #fdf5eb; }
.categoria_color_8.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #fdead4; color: #cc7a1f; }

.categoria_color_9.catalogo_cursos_chip:hover, .categoria_color_9.catalogo_cursos_chip i { color: #2f9464; }
.categoria_color_9.catalogo_cursos_chip:hover { border-color: #2f9464; background: #eefbf4; }
.categoria_color_9.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #def5ea; color: #2f9464; }

.categoria_color_10.catalogo_cursos_chip:hover, .categoria_color_10.catalogo_cursos_chip i { color: #1f9482; }
.categoria_color_10.catalogo_cursos_chip:hover { border-color: #1f9482; background: #eafbf7; }
.categoria_color_10.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #ddf5f0; color: #1f9482; }

.categoria_color_11.catalogo_cursos_chip:hover, .categoria_color_11.catalogo_cursos_chip i { color: #1f7fa8; }
.categoria_color_11.catalogo_cursos_chip:hover { border-color: #1f7fa8; background: #eaf6fd; }
.categoria_color_11.catalogo_cursos_chip .catalogo_cursos_chip_contador { background: #ddf0fb; color: #1f7fa8; }

.catalogo_cursos_categoria {
	margin-bottom: 1.8em;
	/* La cabecera es sticky (~60px); sin esto, al saltar aqui desde un chip
	   de categoria el titulo queda tapado debajo de ella. */
	scroll-margin-top: 90px;
}

.catalogo_cursos_categoria:last-child {
	margin-bottom: 0;
}

.catalogo_cursos_grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.7em;
}

/* Portátil/laptop: entre el ancho de escritorio y el del breakpoint de
   tablet (870px) ya existente mas abajo. */
@media screen and (max-width: 1200px) {
	.catalogo_cursos_grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	}
}

/* Tarjeta vertical: foto/icono apaisado arriba a todo el ancho, cuerpo
   (titulo/horas/universidades) abajo. Sin patron de color automatico: fondo
   blanco y texto negro por defecto en toda la tarjeta -solo la miniatura de
   arriba (.tarjeta_curso_imagen) toma el color/degradado si hay
   personalizacion propia elegida a mano (ver mas abajo). */
.catalogo_cursos_contenido .tarjeta_curso {
	display: flex;
	flex-direction: column;
	position: relative;
	min-width: 0;
	border: 1px solid var(--catalogo-border);
	border-radius: var(--catalogo-radius-sm);
	overflow: hidden;
	text-decoration: none;
	background: #fff;
	color: #000;
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

/* Animacion al pasar el cursor: la tarjeta se eleva, la foto/icono hace un
   ligero zoom (mismo lenguaje visual que una miniatura de video/noticia) y
   aparece el aviso "Ver curso" sobre la imagen -todo para dejar claro que es
   un enlace clicable al indice del curso, no solo una tarjeta informativa. */
.catalogo_cursos_contenido .tarjeta_curso:hover {
	box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
	transform: translateY(-4px);
	border-color: var(--COLOR_PRINCIPAL);
}

.catalogo_cursos_contenido .tarjeta_curso:hover .tarjeta_curso_imagen > i,
.catalogo_cursos_contenido .tarjeta_curso:hover .tarjeta_curso_imagen > img,
.catalogo_cursos_contenido .tarjeta_curso:hover .tarjeta_curso_imagen > .personalizacion_imagen_mascara {
	transform: scale(1.08);
}

.catalogo_cursos_contenido .tarjeta_curso:hover .tarjeta_curso_ver {
	opacity: 1;
	transform: translateY(0);
}

/* Paleta que rota por categoria (indice % 12) para diferenciarlas
   visualmente y que ese color se mantenga siempre que se navega/filtra
   (va ligado al indice de la categoria, no cambia con la busqueda).
   12 paradas en bucle armonico alrededor de la rueda de color (~30 grados
   entre paradas contiguas, para que una categoria y la siguiente/anterior
   se distingan facilmente pero sin saltos raros), partiendo del azul
   corporativo: azul -> azul-violeta -> violeta -> purpura-magenta ->
   magenta-rosa -> rosa-rojo -> rojo -> rojo-naranja -> naranja (salto
   deliberado saltandose el amarillo puro) -> verde -> verde-azulado ->
   cian-azulado -> vuelve a azul. Todas pastel/suaves salvo la de marca. */
.tarjeta_curso_color_0 { background: linear-gradient(135deg, #012a4a 0%, #0076A5 100%); } /* azul corporativo */
.tarjeta_curso_color_1 { background: linear-gradient(135deg, #1e2a6e 0%, #9aa8e8 100%); } /* azul-violeta */
.tarjeta_curso_color_2 { background: linear-gradient(135deg, #3c1f66 0%, #b09bdb 100%); } /* violeta */
.tarjeta_curso_color_3 { background: linear-gradient(135deg, #591e5e 0%, #cf9bd9 100%); } /* purpura-magenta */
.tarjeta_curso_color_4 { background: linear-gradient(135deg, #6e1f52 0%, #e2a0c9 100%); } /* magenta-rosa */
.tarjeta_curso_color_5 { background: linear-gradient(135deg, #7a2038 0%, #e6a3ae 100%); } /* rosa-rojo */
.tarjeta_curso_color_6 { background: linear-gradient(135deg, #7a1f1f 0%, #e8a3a3 100%); } /* rojo */
.tarjeta_curso_color_7 { background: linear-gradient(135deg, #7a3712 0%, #f0b088 100%); } /* rojo-naranja */
.tarjeta_curso_color_8 { background: linear-gradient(135deg, #8a4b12 0%, #f5bd82 100%); } /* naranja */
.tarjeta_curso_color_9 { background: linear-gradient(135deg, #1e5c3f 0%, #97dcb8 100%); } /* verde */
.tarjeta_curso_color_10 { background: linear-gradient(135deg, #14524a 0%, #8fd9c4 100%); } /* verde-azulado */
.tarjeta_curso_color_11 { background: linear-gradient(135deg, #0a4560 0%, #7ec8e0 100%); } /* cian-azulado */

/* Foto/icono apaisado a todo el ancho, arriba de la tarjeta -proporcion fija
   (16:9) para que toda la fila de tarjetas quede a la misma altura pese a
   tener fotos/iconos distintos. Sin fondo propio: es transparente a
   proposito para que se vea el fondo/degradado personalizado de TODA la
   tarjeta (.tarjeta_curso, ver mas abajo) tambien detras del icono -si el
   fondo se pintara solo aqui, una imagen personalizada en JPG (sin canal
   alfa, cubre la caja entera) taparia por completo la personalizacion y no
   se veria. */
.tarjeta_curso_imagen {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #0f172a;
	font-size: 2.8em;
	line-height: 1;
}

.tarjeta_curso_imagen i {
	line-height: 1;
	transition: transform 0.25s ease;
}

.tarjeta_curso_imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.tarjeta_curso_imagen .personalizacion_imagen_mascara {
	/* Mismo icono/imagen pero teñido via mask-image (icono_o_imagen_html())
	   cuando no tiene color propio -mismo tamaño que .tarjeta_curso_imagen img. */
	display: inline-block;
	width: 100%;
	height: 100%;
	transition: transform 0.25s ease;
}

/* Aviso "Ver curso" sobre la foto/icono, oculto hasta el hover (ver
   .tarjeta_curso:hover .tarjeta_curso_ver mas arriba): refuerza que la
   tarjeta entera es un enlace clicable al indice del curso. */
.tarjeta_curso_ver {
	/* rem, no em: mismo motivo que .tarjeta_curso_badge_horas -el font-size
	   grande de .tarjeta_curso_imagen (icono) no debe inflar este texto.
	   Ocupa el 60% inferior de la foto/icono (no solo su propia altura de
	   contenido) para que el degradado oscuro tape suficiente imagen debajo
	   del texto y este se lea bien en blanco sobre cualquier foto. */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0.3em;
	padding: 0 0.5em 0.5em;
	background: linear-gradient(0deg, rgba(15, 23, 42, 0.85) 0%, rgba(15, 23, 42, 0.55) 45%, rgba(15, 23, 42, 0) 100%);
	color: #fff;
	font-size: 1.27rem;
	font-weight: 600;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.tarjeta_curso_cuerpo {
	/* Sin fondo/color propio: hereda el blanco/negro por defecto (o el
	   personalizado) de .tarjeta_curso, toda la tarjeta es una sola
	   superficie de color, no una foto + una caja de texto aparte. */
	padding: 0.9em 1em 1em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	flex: 1;
	min-width: 0;
}

.tarjeta_curso_titulo {
	font-size: 1.27em;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Horas: insignia flotante en la esquina superior izquierda de la
   foto/icono (como la duracion sobre una miniatura de video), no una fila
   mas del cuerpo -siempre oscura semitransparente + texto blanco para
   leerse igual encima de cualquier foto/color. */
.tarjeta_curso_badge_horas {
	/* px/rem, no em: esta insignia vive dentro de .tarjeta_curso_imagen, cuyo
	   font-size (2.8em, para el icono grande) haria un "pequeño" relativo
	   gigante si heredara de ahi -incluida la posicion (top/left en em se
	   miden contra el propio font-size del elemento, no el del padre)-.
	   Regla unica y completa a proposito (no comparte selector con las
	   badges de .tarjeta_curso_universidades mas abajo): compartir selector
	   ahi hacia que esa otra regla, por ir despues en el CSS, pisara este
	   padding/font-size pequeño con uno mucho mayor. */
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	background: rgba(15, 23, 42, 0.72);
	color: #fff;
	padding: 3px 6px;
	border-radius: var(--catalogo-radius-pill);
	font-size: 0.55rem;
	gap: 3px;
}

.tarjeta_curso_badge_horas i {
	font-size: 0.85em;
}

/* Universidades/certificaciones (DQ, EUNEIZ): ultima fila de la tarjeta. */
.tarjeta_curso_universidades {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	margin-top: auto;
	padding-top: 0.2em;
}

.tarjeta_curso_universidades .badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.3em 0.6em;
	border-radius: var(--catalogo-radius-pill);
	font-size: 0.7em;
	font-weight: 500;
}

/* Etiquetas de certificacion (cursos_elearning): DQ para todos los cursos,
   EUNEIZ solo si Cursos.Euneiz=1 en BD. Fondo/color neutro (cuerpo de la
   tarjeta es blanco por defecto): el color de texto real lo pone
   catalogo_cursos.php en linea segun $color_texto_curso (personalizacion en
   cascada), este gris/negro es solo el valor por defecto sin personalizar.
   .tarjeta_curso_badge_horas queda fuera: siempre oscura+texto blanco (ver
   regla propia mas arriba), no sigue la personalizacion de texto. */
.tarjeta_curso_badge_dq,
.tarjeta_curso_badge_euneiz {
	background: #f1f5f9;
	color: #334155;
}

.catalogo_cursos_contenido .tarjeta_curso.bloqueado {
	cursor: default;
	opacity: 0.55;
	filter: grayscale(0.6);
	pointer-events: none;
}

.catalogo_cursos_contenido .tarjeta_curso.bloqueado:hover {
	transform: none;
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
}

.tarjeta_curso_candado {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65em;
	z-index: 1;
}

.tarjeta_curso_submodulo {
	border-left: solid 3px #cbd5e1;
}

.catalogo_cursos_sin_resultados {
	text-align: center;
	padding: 3em 1em;
	color: #777;
}

/* RESPONSIVE */
@media screen and (max-width: 870px) {
	.catalogo_cursos_grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 0.6em;
	}
}

@media screen and (max-width: 720px) {
	.catalogo_cursos_cabecera {
		gap: 0.8em;
	}

	.catalogo_cursos_acciones {
		width: 100%;
	}

	.catalogo_cursos_buscador {
		width: 100%;
	}

	.catalogo_cursos_grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 0.5em;
	}

	.tarjeta_curso_imagen {
		font-size: 2em;
	}

	.tarjeta_curso_cuerpo {
		padding: 0.7em 0.8em 0.8em;
	}

	.tarjeta_curso_titulo {
		font-size: 1.1em;
	}

	.tarjeta_curso_ver {
		font-size: 1.1rem;
	}

	.catalogo_cursos_categorias_panel {
		inset: 10px;
		border-radius: var(--catalogo-radius-md);
	}

	.catalogo_cursos_filtros {
		grid-template-columns: 1fr;
	}

	.catalogo_cursos_chip {
		width: 100%;
	}
}

/* ==================================================================
   FICHA DE CURSO — cursos_elearning_datos.php (CURSOS_ELEARNING/:id) y
   cursos_certificados_datos.php, tanto con :modulo solo como con
   :modulo/:unidad. Las tres variantes reutilizan exactamente las mismas
   clases (.informacion_datos_cursos/.titulo/.horas/.titulo_objetivo/
   .objetivos/.contenedor_indice/.titulo_curso/.titulo_leccion/.leccion),
   asi que un unico bloque de estilo cubre las tres. Sobrescribe las
   reglas antiguas de style_asociados.css (mismo selector, pero este
   archivo carga despues en servicios/index.php, asi que gana el cascade
   sin tener que tocar ese archivo compartido con otras paginas). ================================================================== */
.informacion_datos_cursos {
	max-width: 900px;
	margin: 1.5em auto;
	padding: clamp(16px, 3vw, 32px);
	background: linear-gradient(160deg, #ffffff 0%, rgba(0, 118, 165, 0.035) 100%);
	border: 1px solid rgba(0, 118, 165, 0.14);
	border-radius: var(--catalogo-radius-lg, 20px);
	box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

/* Titulo + duracion fijos (sticky) arriba de la ficha mientras se recorre
   el indice, igual que la cabecera del catalogo. */
.ficha_curso_cabecera {
	position: sticky;
	top: 0;
	z-index: 5;
	background: #fdfeff;
	margin: calc(-1 * clamp(16px, 3vw, 32px)) calc(-1 * clamp(16px, 3vw, 32px)) 0;
	padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 32px) 0.8em;
	border-bottom: 1px solid var(--catalogo-border, #e3e8ef);
	border-radius: var(--catalogo-radius-lg, 20px) var(--catalogo-radius-lg, 20px) 0 0;
}

.informacion_datos_cursos .titulo {
	text-align: left;
	margin: 0 0 0.5em;
	padding: 0;
	background: none;
	color: #0f172a;
	font-size: 1.7em;
	font-weight: 500;
	text-transform: none;
	letter-spacing: -0.01em;
}

.informacion_datos_cursos .horas {
	display: inline-flex;
	align-items: center;
	text-align: left;
	font-size: 0.85em;
	font-weight: 500;
	padding: 0.4em 0.9em;
	border-radius: 999px;
	background: var(--COLOR_2);
	color: var(--COLOR_PRINCIPAL);
	margin: 0;
}

.informacion_datos_cursos hr {
	border: none;
	border-top: 1px solid #e3e8ef;
	margin: 1.2em 0;
}

.informacion_datos_cursos .titulo_objetivo {
	font-weight: 500;
	font-size: 1.05em;
	text-align: left;
	margin: 0 0 0.6em;
	color: var(--COLOR_PRINCIPAL);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.informacion_datos_cursos .objetivos {
	text-align: left;
	display: block;
	color: #475569;
	line-height: 1.6;
}

.informacion_datos_cursos .contenedor_indice {
	display: block;
}

.informacion_datos_cursos .titulo_curso {
	margin: 1em 0 0.4em;
	padding: 0.5em 0.8em;
	font-size: 1em;
	font-weight: 500;
	color: #fff;
	background: var(--COLOR_PRINCIPAL);
	border-radius: var(--catalogo-radius-sm, 10px);
}

.informacion_datos_cursos .titulo_leccion {
	margin: 0.6em 0 0.3em 0.8em;
	font-size: 0.95em;
	font-weight: 500;
	text-align: left;
	color: #0f172a;
}

.informacion_datos_cursos .leccion {
	position: relative;
	margin: 0.3em 0 0.3em 1.6em;
	padding-left: 1em;
	font-size: 0.88em;
	color: #64748b;
}

.informacion_datos_cursos .leccion::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--COLOR_PRINCIPAL);
}

@media screen and (max-width: 720px) {
	.informacion_datos_cursos {
		margin: 0.8em;
	}

	.informacion_datos_cursos .titulo {
		font-size: 1.3em;
	}
}

/* ==================================================================
   OFFCANVAS GLOBAL (#ventana_emergente_offcanvas, definido en
   servicios/index.php) donde se abre la ficha de curso en iframe al
   pinchar una tarjeta (via modulos.js). Mismo lenguaje visual que el
   modal de categorias: esquinas redondeadas, margen con fondo
   difuminado, misma sombra. Usa las mismas variables via fallback
   porque este elemento vive fuera de .catalogo_cursos en el DOM.
   OJO: #ventana_pantalla_completa (mas abajo) es un offcanvas distinto,
   siempre a pantalla completa sin margen, para los 4 enlaces rapidos de
   zona_asociado.php; el blur del fondo es generico (.offcanvas-backdrop)
   porque es lo mismo para cualquier offcanvas de la app. ================================================================== */
#ventana_emergente_offcanvas {
	margin: 28px;
	width: calc(100% - 56px);
	height: calc(100vh - 56px);
	border-radius: 20px;
	box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
	overflow: hidden;
}

.offcanvas-backdrop {
	background-color: #0f172a;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.offcanvas-backdrop.show {
	opacity: 0.4;
}

@media screen and (max-width: 720px) {
	#ventana_emergente_offcanvas {
		margin: 10px;
		width: calc(100% - 20px);
		height: calc(100vh - 20px);
		border-radius: 14px;
	}
}

/* ==================================================================
   PRELOADER DEL OFFCANVAS — el catalogo/fichas de curso NO tienen
   preloader de pantalla completa (ver servicios/index.php,
   $mostrar_preloader=false para esas rutas); el unico preloader es este,
   dentro del offcanvas/iframe, para evitar el "modal en blanco" mientras
   carga: se muestra al abrirse el offcanvas, se oculta cuando el iframe
   termina de cargar — logica en catalogo_cursos.js. ================================================================== */
@keyframes preloader_moderno_girar {
	to { transform: rotate(360deg); }
}

.preloader_moderno_anillo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 4px solid var(--COLOR_2, #c9e1ff);
	border-top-color: var(--COLOR_PRINCIPAL, #0076A5);
	animation: preloader_moderno_girar 0.8s linear infinite;
}

.preloader_moderno_texto {
	margin: 0;
	font-size: 0.85em;
	font-weight: 500;
	color: var(--COLOR_PRINCIPAL, #0076A5);
	letter-spacing: 0.02em;
}

/* Overlay dentro del offcanvas-body (no a pantalla completa) mientras
   carga el iframe correspondiente. Clase compartida por los DOS
   preloaders (#preloader_offcanvas y #preloader_pantalla_completa) para
   que no se pueda dar el caso de estilar uno y olvidar el otro. */
#ventana_emergente_offcanvas .offcanvas-body,
#ventana_pantalla_completa .offcanvas-body {
	position: relative;
}

.preloader_moderno_overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	background: rgba(253, 254, 255, 0.96);
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.preloader_moderno_oculto {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ==================================================================
   VENTANA A PANTALLA COMPLETA (#ventana_pantalla_completa) — para los 4
   enlaces rapidos de la portada de asociado (Oferta general/Competencias/
   Especialidades/SEPE). A diferencia de #ventana_emergente_offcanvas
   (tarjetas de curso, con margen/esquinas redondeadas como el modal de
   categorias), esta va SIEMPRE a pantalla completa: sin margen, sin
   border-radius, solo la barra de titulo (nombre del boton) + la X, y el
   iframe ocupando el resto. ================================================================== */
#ventana_pantalla_completa {
	width: 100%;
	height: 100vh;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

#ventana_pantalla_completa .offcanvas-header {
	padding: 14px 20px;
	border-bottom: 1px solid var(--catalogo-border, #e3e8ef);
}

#ventana_pantalla_completa .offcanvas-title {
	font-weight: 500;
	font-size: 1.1em;
	color: #0f172a;
}

#ventana_pantalla_completa .offcanvas-body {
	position: relative;
	padding: 0;
	overflow: hidden;
}

#ventana_pantalla_completa iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
}