/**
 * Bloque uts/oferta-academica — teaser de la oferta en la portada.
 *
 * Ni un color literal: todo sale de theme.json. La tarjeta la comparte con las
 * novedades y con el listado de oferta (.uts-noticia, en el style.css del tema);
 * aquí sólo van el canal, el buscador rápido, la meta con iconos, el sello de
 * acreditación sobre la foto y los accesos por campus.
 *
 * Los controles usan el trazo sólido --wp--custom--traza--control (#8C816A): es
 * el token designado para el trazo de controles y cumple el contraste de
 * componentes (SC 1.4.11). No toca ningún fondo elegido por el cliente, así que
 * queda fuera de la deuda de bordes al 25–45 % (segunda ola).
 *
 * @package uts
 */

.uts-programas {
	background: var(--wp--preset--color--papel);
	padding-block: var(--wp--custom--novedades--aire);
}

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

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

.uts-programas__cabecera {
	margin-bottom: var(--wp--preset--spacing--50);
}

.uts-programas__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--verde-escudo);
}

.uts-programas__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);
}

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

/* --------------------------------------------------------------------------
   Buscador rápido · lleva a la página de oferta ya filtrada
   -------------------------------------------------------------------------- */

.uts-programas__buscador {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--40);
	margin: 0 0 var(--wp--preset--spacing--50);
}

.uts-programas__campo {
	display: flex;
	flex: 1 1 185px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	min-width: 0;
}

.uts-programas__etiqueta {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 600;
	letter-spacing: var(--wp--custom--cejilla--chip);
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
}

.uts-programas__selector {
	position: relative;
	display: block;
}

.uts-programas__select {
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--80) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--chico);
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--tinta);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.3;
	/* La flecha se pinta aparte (SVG), así que se quita la nativa. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
	transition: border-color var(--wp--custom--transicion--base);
}

.uts-programas__select:hover {
	border-color: var(--wp--preset--color--verde-escudo);
}

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

.uts-programas__flecha {
	position: absolute;
	top: 50%;
	right: var(--wp--preset--spacing--40);
	transform: translateY(-50%);
	color: var(--wp--preset--color--gris);
	pointer-events: none;
}

.uts-programas__buscar {
	flex: none;
	min-height: 46px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	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;
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
	transition: background var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--pulsa);
}

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

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

/* Regla 4 · en móvil no hay hover: el toque tiene que responder con algo. */
.uts-programas__buscar:active {
	transform: translateY(1px);
}

/* --------------------------------------------------------------------------
   Barra de controles del carrusel
   -------------------------------------------------------------------------- */

/* Sólo aparece con el carrusel y sólo lleva los controles, alineados a la
   derecha. */
.uts-programas__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   Rejilla de tarjetas · la misma .uts-noticia de las novedades
   -------------------------------------------------------------------------- */

.uts-programas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 0;
	list-style: none;
}

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

.uts-programas__item > .uts-programas__tarjeta {
	flex: 1;
}

/* La foto es el contexto de posicionamiento de las insignias. */
.uts-programas__foto {
	position: relative;
}

/* Insignias apiladas arriba a la izquierda: «Nuevo» (limón) y, debajo, el sello
   de acreditación (morado). En columna nunca se pisan, sea cual sea el ancho. */
.uts-programas__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;
	max-width: calc(100% - (2 * var(--wp--preset--spacing--30)));
}

.uts-programas__insignia {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	/* La sombra despega la insignia de una foto oscura (SC 1.4.11 en espíritu). */
	box-shadow: var(--wp--preset--shadow--tarjeta);
}

.uts-programas__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-programas__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-programas__insignias .uts-programas__insignia {
	padding: 3px 8px;
	font-size: 0.6rem;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.uts-programas__insignias .uts-programas__insignia svg {
	width: 12px;
	height: 12px;
}

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

.uts-programas__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-programas__dato svg {
	flex: none;
	color: var(--wp--preset--color--borde);
}

.uts-programas__dato--ciclo {
	color: var(--wp--preset--color--verde-escudo);
	font-weight: 600;
}

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

/* --------------------------------------------------------------------------
   Accesos por campus
   -------------------------------------------------------------------------- */

.uts-programas__campus {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.uts-programas__campus-titulo {
	margin: 0;
	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-programas__campus-lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-programas__campus-item {
	margin: 0;
}

.uts-programas__pastilla {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--chico);
	background: transparent;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--gris);
	text-decoration: none;
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
	transition: background var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--pulsa);
}

.uts-programas__pastilla:hover,
.uts-programas__pastilla:focus-visible {
	background: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--papel);
}

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

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

.uts-programas__pastilla svg {
	flex: none;
}

/* Filtro de acreditados en alta calidad: morado, el color reservado a la
   acreditación. Trazo sólido; al pulsar se rellena y el texto pasa a morado
   claro (E2C9FF sobre morado 581C87 = 7,4:1). */
.uts-programas__pastilla--acreditados {
	border-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--morado);
}

.uts-programas__pastilla--acreditados:hover,
.uts-programas__pastilla--acreditados:focus-visible {
	background: var(--wp--preset--color--morado);
	border-color: var(--wp--preset--color--morado);
	color: var(--wp--preset--color--morado-claro);
}

.uts-programas__pastilla--acreditados:focus-visible {
	outline-color: var(--wp--preset--color--morado);
}

/* Accesos por campus: cada pastilla con el color de su campus, el mismo de las
   tarjetas de la oferta. Trazo y texto en el tono del campus (≥ 6,3:1 sobre
   blanco); al pasar o enfocar se rellena y el texto pasa a blanco (≥ 6,3:1). */
.uts-programas__pastilla--campus {
	border-color: var(--uts-campus-texto);
	color: var(--uts-campus-texto);
}

.uts-programas__pastilla--campus:hover,
.uts-programas__pastilla--campus:focus-visible,
.uts-programas__pastilla--campus:active {
	background: var(--uts-campus-texto);
	border-color: var(--uts-campus-texto);
	color: var(--wp--preset--color--blanco);
}

.uts-programas__pastilla--campus:focus-visible {
	outline-color: var(--uts-campus-texto);
}

.uts-programas__pastilla--campus:hover .uts-campus-punto,
.uts-programas__pastilla--campus:focus-visible .uts-campus-punto,
.uts-programas__pastilla--campus:active .uts-campus-punto {
	background: var(--wp--preset--color--blanco);
}

/* La pastilla del campus en la meta de la tarjeta. */
.uts-programas__dato--campus {
	flex-wrap: wrap;
	margin-top: 2px;
}

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

/* --------------------------------------------------------------------------
   Carrusel · sólo cuando hay más de cuatro programas en la portada
   -------------------------------------------------------------------------- */

/* Controles: pausa, anterior y siguiente. Botones redondos, en la barra. */
.uts-programas__controles {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.uts-programas__control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--pastilla);
	background: transparent;
	color: var(--wp--preset--color--verde-escudo);
	cursor: pointer;
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
	transition: background var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base), transform var(--wp--custom--transicion--pulsa);
}

.uts-programas__control svg {
	flex: none;
}

.uts-programas__control:hover,
.uts-programas__control:focus-visible {
	background: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--papel);
}

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

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

/* El visor recorta la pista; el relleno deja sitio al anillo de foco de las
   tarjetas, que overflow:hidden recortaría en los bordes. */
.uts-programas__viewport {
	overflow: hidden;
	margin: 0 0 var(--wp--preset--spacing--60);
	padding: 4px;
}

.uts-programas__viewport .uts-programas__lista {
	margin-bottom: 0;
}

/* Con JavaScript la rejilla se vuelve una pista de una sola fila que se desliza.
   Sin la clase «es-carrusel» (sin JS) la lista sigue siendo la rejilla de
   arriba y se ve entera. */
.uts-programas__lista.es-carrusel {
	display: flex;
	flex-wrap: nowrap;
	transition: transform var(--wp--custom--transicion--panel) var(--wp--custom--transicion--curva);
	will-change: transform;
}

/* Cada tarjeta ocupa una fracción exacta del visor para que quepan «por-vista»
   completas; el número lo fija carrusel.js según el ancho. */
.uts-programas__lista.es-carrusel .uts-programas__item {
	flex: 0 0 calc((100% - (var(--uts-por-vista, 4) - 1) * var(--wp--preset--spacing--50)) / var(--uts-por-vista, 4));
}

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

@media ( max-width: 782px ) {

	.uts-programas {
		padding-block: var(--wp--custom--novedades--aireMovil);
	}

	/* El buscador pasa a columna: cada control a todo el ancho, sin apreturas. */
	.uts-programas__campo {
		flex-basis: 100%;
	}

	.uts-programas__buscar {
		width: 100%;
	}
}

@media ( max-width: 480px ) {

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

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

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

	.uts-programas__select,
	.uts-programas__buscar,
	.uts-programas__pastilla,
	.uts-programas__control,
	.uts-programas__lista.es-carrusel,
	.uts-programas__tarjeta {
		transition: none;
	}

	.uts-programas__buscar:active,
	.uts-programas__pastilla:active,
	.uts-programas__control:active {
		transform: none;
	}
}