/**
 * Bloque uts/oferta — la oferta académica con filtros.
 *
 * Ni un color literal: todo sale de theme.json. El canal de 1.200 px lo pone
 * aquí y no el style.css compartido, para no tocar un archivo que otra parte
 * del equipo está editando; la regla es la misma que la de los demás
 * «__interior».
 *
 * @package uts
 */

.uts-oferta {
	background: var(--wp--preset--color--papel);
	/* Poco aire arriba: la página ya trae su H1 «Oferta académica» justo encima.
	   Se conserva el aire inferior para separar del pie. */
	padding-block-start: var(--wp--preset--spacing--40);
	padding-block-end: var(--wp--preset--spacing--70);
}

.uts-oferta__interior {
	max-width: var(--wp--custom--contenedor--ancho);
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.uts-oferta__cabecera {
	margin-bottom: var(--wp--preset--spacing--60);
}

.uts-oferta__cejilla {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-oferta__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--tinta);
}

/* Ciclo propedéutico: bajada editorial bajo el título (nada de recuadro de
   alerta), con una microrruta 6 → 4 que reutiliza el lenguaje de la ficha. */
.uts-oferta__ciclo {
	margin: var(--wp--preset--spacing--30) 0 0;
}

.uts-oferta__ciclo-texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--entrada);
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
}

.uts-oferta__ciclo-pasos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--40) 0 0;
}

.uts-oferta__paso {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.uts-oferta__paso-nivel {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-oferta__paso-sem {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--entrada);
	font-weight: 800;
	color: var(--wp--preset--color--verde-escudo);
	font-variant-numeric: tabular-nums;
}

.uts-oferta__paso-flecha {
	flex: none;
	align-self: center;
	color: var(--wp--preset--color--verde-escudo);
}

/* Enlace a la política de gratuidad dentro de la bajada. */
.uts-oferta__ciclo-texto a {
	color: var(--wp--preset--color--verde-escudo);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* Botón de gratuidad bajo los filtros. Igual que el de la ficha: limón como
   superficie con texto verde oscuro; en hover invierte. */
.uts-oferta__gratuidad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--50);
	min-height: 46px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radio--base);
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	text-decoration: none;
	transition: transform var(--wp--custom--transicion--pulsa), background var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base);
}

.uts-oferta__gratuidad svg {
	flex: none;
}

.uts-oferta__gratuidad:hover,
.uts-oferta__gratuidad:focus-visible {
	color: var(--wp--preset--color--verde-limon);
	background: var(--wp--preset--color--verde-oscuro);
	text-decoration: none;
}

.uts-oferta__gratuidad:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-oscuro);
	outline-offset: 2px;
}

.uts-oferta__gratuidad:active {
	transform: translateY( 1px );
}

@media ( prefers-reduced-motion: reduce ) {

	.uts-oferta__gratuidad {
		transition: none;
	}

	.uts-oferta__gratuidad:active {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Rejilla · filtros a la izquierda, resultados a la derecha
   -------------------------------------------------------------------------- */

.uts-oferta__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

/* Sólo acreditados: sin panel de filtros, las fichas ocupan todo el ancho. */
.uts-oferta--solo-acreditados .uts-oferta__cuerpo {
	grid-template-columns: minmax(0, 1fr);
}

/*
 * Y va DENTRO de un contenedor de la página (Acreditación en Alta Calidad):
 * sin fondo ni relleno propios, o se ve una caja dentro de otra y las fichas
 * no llegan al borde del contenedor, como el resto del texto.
 */
.uts-oferta--solo-acreditados {
	background: transparent;
	padding-block: 0;
}

.uts-oferta--solo-acreditados .uts-oferta__interior {
	padding-inline: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   Panel de filtros
   -------------------------------------------------------------------------- */

.uts-oferta__filtros {
	position: sticky;
	top: var(--wp--custom--cromado--aire-foco);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
}

/* Botón morado de acreditación: el filtro de cabecera. */
.uts-oferta__acreditacion {
	margin: 0;
}

.uts-oferta__acreditacion .uts-oferta__casilla {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.uts-oferta__acreditacion .uts-oferta__toque-texto {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 44px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 1.5px solid var(--wp--preset--color--morado);
	border-radius: var(--wp--custom--radio--pastilla);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	color: var(--wp--preset--color--morado);
	background: transparent;
	cursor: pointer;
	transition: background var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base);
}

.uts-oferta__sello {
	flex: none;
}

/* Hover (sin marcar): anticipa el relleno morado para que el puntero note que
   es pulsable. En móvil no hay hover; ahí responde el :active de más abajo. */
.uts-oferta__acreditacion .uts-oferta__casilla:not(:checked) + .uts-oferta__toque-texto:hover {
	color: var(--wp--preset--color--morado-claro);
	background: var(--wp--preset--color--morado);
}

/* Activo: se rellena de morado y el texto pasa a morado claro. */
.uts-oferta__acreditacion .uts-oferta__casilla:checked + .uts-oferta__toque-texto {
	color: var(--wp--preset--color--morado-claro);
	background: var(--wp--preset--color--morado);
}

.uts-oferta__acreditacion .uts-oferta__casilla:focus-visible + .uts-oferta__toque-texto {
	outline: 2px solid var(--wp--preset--color--morado);
	outline-offset: 2px;
}

/* Regla 4 · respuesta al toque en móvil, donde no hay hover. */
.uts-oferta__acreditacion .uts-oferta__casilla:active + .uts-oferta__toque-texto {
	transform: translateY(1px);
}

/* Grupos de taxonomía */
.uts-oferta__grupo {
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--wp--custom--traza--sutil);
	padding-top: var(--wp--preset--spacing--40);
}

.uts-oferta__leyenda {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: var(--wp--custom--cejilla--espaciado);
	text-transform: uppercase;
	color: var(--wp--preset--color--gris);
}

.uts-oferta__opciones {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 4px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-oferta__opcion {
	margin: 0;
}

.uts-oferta__toque {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 24px;
	padding-block: var(--wp--preset--spacing--10, 4px);
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--tinta);
	cursor: pointer;
}

.uts-oferta__grupo .uts-oferta__casilla {
	flex: none;
	width: 18px;
	height: 18px;
	accent-color: var(--wp--preset--color--verde-escudo);
	cursor: pointer;
}

.uts-oferta__grupo .uts-oferta__casilla:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-escudo);
	outline-offset: 2px;
}

/* Muestra del color del campus junto a su nombre en el filtro. */
.uts-oferta__toque-texto .uts-campus-punto {
	margin-right: 6px;
}

.uts-oferta__grupo .uts-oferta__toque:hover .uts-oferta__toque-texto {
	color: var(--wp--preset--color--verde-escudo);
}

/* Acciones del formulario */
.uts-oferta__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--20);
}

.uts-oferta__enviar {
	min-height: 44px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: 0;
	border-radius: var(--wp--custom--radio--base);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	color: var(--wp--preset--color--papel);
	background: var(--wp--preset--color--verde-escudo);
	cursor: pointer;
	transition: background var(--wp--custom--transicion--base);
}

.uts-oferta__enviar:hover,
.uts-oferta__enviar:focus-visible {
	background: var(--wp--preset--color--verde-oscuro);
}

.uts-oferta__enviar:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde-escudo);
	outline-offset: 2px;
}

.uts-oferta__limpiar {
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uts-oferta__limpiar:hover,
.uts-oferta__limpiar:focus-visible {
	color: var(--wp--preset--color--verde-escudo);
}

/* --------------------------------------------------------------------------
   Resultados
   -------------------------------------------------------------------------- */

/*
 * La rejilla de tarjetas. Cada tarjeta es una .uts-noticia (la misma de las
 * novedades): foto arriba, chip de nivel, título con enlace estirado y meta al
 * pie. Aquí sólo van la rejilla, el sello de acreditación sobre la foto y la
 * meta con iconos; el resto lo hereda del style.css del tema.
 */
.uts-oferta__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El <li> estira la tarjeta a la altura de la fila. */
.uts-oferta__item {
	display: flex;
	margin: 0;
}

/*
 * El filtro (servidor y filtros.js) oculta con el atributo «hidden». La regla
 * «[hidden] { display: none }» del navegador es de baja especificidad y el
 * «display: flex» de arriba la ganaría: sin esto, los programas filtrados
 * seguirían viéndose. Se restituye con una regla más específica.
 */
.uts-oferta__item[hidden] {
	display: none;
}

.uts-oferta__item > .uts-oferta__tarjeta {
	flex: 1;
}

/* Sobre la foto van las insignias, arriba a la izquierda: «Nuevo» (limón) y el
   sello de acreditación (morado). El contenedor las apila en columna para que
   nunca se pisen, sea cual sea el ancho de la tarjeta. */
.uts-oferta__foto {
	position: relative;
}

.uts-oferta__insignias {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	left: var(--wp--preset--spacing--30);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	/* Nunca desbordan la foto: se quedan con el ancho de la tarjeta menos el aire
	   de los dos lados, y si no cabe la etiqueta cae a dos líneas. */
	max-width: calc(100% - (2 * var(--wp--preset--spacing--30)));
}

.uts-oferta__insignia {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	/* La sombra despega la insignia de la foto: es opaca, pero sobre una foto
	   oscura necesita un borde de separación (SC 1.4.11 en espíritu). */
	box-shadow: var(--wp--preset--shadow--tarjeta);
}

.uts-oferta__insignia svg {
	flex: none;
}

/* «Nuevo»: superficie verde limón con texto verde oscuro (8,99:1). El limón es
   superficie o texto sobre verde oscuro, jamás texto sobre claro. */
.uts-oferta__insignia--nuevo {
	padding: 4px 10px;
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-oscuro);
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 800;
	letter-spacing: var(--wp--custom--cejilla--chip);
	text-transform: uppercase;
}

/* «Acreditado en alta calidad» es largo: a tamaño de chip se parte en dos y
   tapa la foto. Se baja el cuerpo, se afloja el interletrado y se recorta el
   aire para que quepa en un renglón; «Nuevo» iguala el tamaño para que ambas se
   vean uniformes. El selector compuesto gana en especificidad a .uts-chip. */
.uts-oferta__insignias .uts-oferta__insignia {
	padding: 3px 8px;
	font-size: 0.6rem;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.uts-oferta__insignias .uts-oferta__insignia svg {
	width: 12px;
	height: 12px;
}

/* Meta al pie, con iconos, al estilo de la fecha de las noticias. */
.uts-oferta__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

.uts-oferta__dato {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 1.3;
	color: var(--wp--preset--color--apagado);
}

.uts-oferta__dato svg {
	flex: none;
	color: var(--wp--preset--color--borde);
}

/* El campus va en su pastilla de color (.uts-campus, style.css del tema). */
.uts-oferta__dato--campus {
	flex-wrap: wrap;
	margin-top: 2px;
}

/* El distintivo de ciclo propedéutico resalta en verde. */
.uts-oferta__dato--ciclo {
	color: var(--wp--preset--color--verde-escudo);
	font-weight: 600;
}

.uts-oferta__dato--ciclo svg {
	color: var(--wp--preset--color--verde-escudo);
}

.uts-oferta__sin-resultados,
.uts-oferta__vacio {
	margin: 0;
	padding: var(--wp--preset--spacing--60) 0;
	font-size: var(--wp--preset--font-size--entrada);
	color: var(--wp--preset--color--gris);
}

.uts-oferta__sin-resultados[hidden] {
	display: none;
}

.uts-oferta__sin-resultados p {
	margin: 0 0 var(--wp--preset--spacing--40);
}

/* La salida del cero: botón con contorno, como los secundarios del sitio. */
.uts-oferta__quitar-filtros {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--base);
	color: var(--wp--preset--color--verde-escudo);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	text-decoration: none;
}

.uts-oferta__quitar-filtros:hover,
.uts-oferta__quitar-filtros:focus-visible {
	background: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
}

.uts-oferta__quitar-filtros:active {
	background: var(--wp--preset--color--verde-oscuro);
	border-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--blanco);
}

/* --------------------------------------------------------------------------
   Móvil · validado a 390 px y a 320 px
   -------------------------------------------------------------------------- */

@media ( max-width: 900px ) {

	.uts-oferta__cuerpo {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	/* En móvil los filtros dejan de ser barra lateral fija: fluyen arriba. */
	.uts-oferta__filtros {
		position: static;
		top: auto;
	}
}

@media ( max-width: 480px ) {

	.uts-oferta__lista {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Regla 5 · sin movimiento cuando se pide reducirlo
   -------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.uts-oferta__acreditacion .uts-oferta__toque-texto,
	.uts-oferta__enviar,
	.uts-oferta__tarjeta {
		transition: none;
	}

	.uts-oferta__acreditacion .uts-oferta__casilla:active + .uts-oferta__toque-texto {
		transform: none;
	}
}