/**
 * Bloque uts/normatividad — archivo normativo con buscador y filtros.
 *
 * Son cerca de cuatrocientos documentos, así que el diseño se ordena por lo que
 * la gente hace aquí: llega buscando UNA norma, casi siempre por su número. De
 * ahí que el buscador ocupe toda la anchura y esté arriba del todo; las
 * pastillas de tipo y el año son el segundo camino, para quien viene a explorar.
 *
 * Cada norma es una ficha con un fondo suave del color de su familia y un
 * borde visible —sin sombras apiladas, que en cuatrocientas tarjetas cansan—.
 * Las modificaciones de una norma viven dentro de su ficha, en una línea de
 * tiempo desplegable. El rótulo del año se queda pegado arriba mientras se
 * recorre la lista, para no perder el hilo.
 */

/* --- Panel de consulta ------------------------------------------------------
 *
 * Buscador y filtros van juntos en una tarjeta blanca sobre el fondo papel, para
 * que se lean como UN control y no como tres cosas sueltas. Dentro, dos filas:
 *
 *   1. la consulta —el buscador, que es ancho porque es el camino principal, y
 *      el año pegado a su derecha, porque también es «qué busco»—;
 *   2. las familias de norma, que son navegación y por eso ocupan su propia fila
 *      completa: con nueve pastillas, cualquier otro reparto deja una huérfana
 *      colgando en la segunda línea.
 * ---------------------------------------------------------------------------- */

.uts-norm__controles {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
}

.uts-norm__linea {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
}

/* Buscador: se lleva todo el ancho que sobre. */

.uts-norm__buscador {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1 1 320px;
	gap: var(--wp--preset--spacing--30);
}

.uts-norm__lupa {
	position: absolute;
	inset-inline-start: 14px;
	color: var(--wp--preset--color--verde-escudo);
	pointer-events: none;
}

.uts-norm__campo {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px 0 44px;
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--tinta);
	background-color: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--base);
	transition: border-color var(--wp--custom--transicion--base), background-color var(--wp--custom--transicion--base);
}

.uts-norm__campo::placeholder {
	color: var(--wp--preset--color--apagado);
	text-overflow: ellipsis;
}

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

/* El anillo de foco del tema se conserva tal cual (SC 2.4.7): quitarlo y dejar
   sólo un box-shadow tenue deja sin señal a quien navega con teclado y, en modo
   de alto contraste de Windows, donde las sombras no se pintan, lo deja ciego.
   El fondo blanco y el borde verde son el refuerzo, no el sustituto. */
.uts-norm__campo:focus-visible {
	background-color: var(--wp--preset--color--blanco);
	border-color: var(--wp--preset--color--verde-escudo);
}

/* Año: mismo alto y mismo lenguaje que el buscador, para que hagan pareja. */

.uts-norm__anio {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--wp--preset--spacing--30);
}

.uts-norm__anio-etiqueta {
	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);
	white-space: nowrap;
}

.uts-norm__selector {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.uts-norm__selector select {
	height: 48px;
	min-width: 150px;
	padding: 0 40px 0 14px;
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--tinta);
	background-color: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--base);
	appearance: none;
	cursor: pointer;
	transition: border-color var(--wp--custom--transicion--base);
}

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

/* El chevron lo pinta el tema, no el sistema: el control nativo cambia de
   aspecto en cada navegador y rompía la pareja con el buscador. */
.uts-norm__chevron {
	position: absolute;
	inset-inline-end: 14px;
	color: var(--wp--preset--color--verde-escudo);
	pointer-events: none;
}

/* Botones de envío: sólo los ve quien no tiene JavaScript. */
.uts-norm__enviar {
	flex: none;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--50);
	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-color: var(--wp--preset--color--verde-escudo);
	border: 1px solid var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--base);
	cursor: pointer;
}

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

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

/* Pastillas de tipo, en su propia fila, separadas por una línea del buscador. */

.uts-norm__tipos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--custom--traza--sutil);
}

.uts-norm__pastilla {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px; /* objetivo táctil holgado (SC 2.5.8) */
	padding: 0 14px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--tinta);
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--wp--preset--color--papel);
	border: 1px solid var(--wp--custom--traza--sutil);
	border-radius: var(--wp--custom--radio--pastilla);
	transition: background-color var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base), color var(--wp--custom--transicion--base);
}

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

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

.uts-norm__pastilla.es-activa {
	color: var(--wp--preset--color--papel);
	background-color: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
}

/* El recuento va en su propia píldora, más apagado que la etiqueta: informa,
   pero no compite con el nombre de la familia. */
.uts-norm__cuenta {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--gris);
	background-color: var(--wp--preset--color--arena);
	border-radius: var(--wp--custom--radio--pastilla);
}

.uts-norm__pastilla.es-activa .uts-norm__cuenta {
	color: var(--wp--preset--color--verde-oscuro);
	background-color: var(--wp--preset--color--verde-limon);
}

/* --- Resumen de resultados --------------------------------------------------- */

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

.uts-norm__limpiar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.uts-norm__limpiar:hover {
	color: var(--wp--preset--color--verde-oscuro);
}

.uts-norm__limpiar:active {
	color: var(--wp--preset--color--verde-oscuro);
	transform: translateY( 1px );
}

/* --- Estado y vacío --------------------------------------------------------- */

.uts-norm__estado {
	margin: 0;
	margin-inline-end: auto;
	font-size: var(--wp--preset--font-size--menor);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.uts-norm__sin,
.uts-norm__vacio {
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	text-align: center;
	color: var(--wp--preset--color--gris);
	background-color: var(--wp--preset--color--blanco);
	border: 1px dashed var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--base);
}

/* --- Lista ------------------------------------------------------------------
 *
 * Cada norma es una FICHA con fondo propio: un velo muy suave del color de su
 * familia, un borde que se ve y una barra lateral del mismo tono. Sobre el papel
 * del sitio, la ficha se recorta con claridad sin gritar —cuatrocientas tarjetas
 * con sombra cansan; cuatrocientas filas sin fondo se confunden—.
 *
 * El color de familia se define UNA vez, en --norm-tono, y todo lo demás
 * (fondo, borde, insignia, línea de tiempo) se deriva con color-mix sobre los
 * tokens de theme.json. Ningún hex nuevo.
 *
 * Contraste: el texto de la insignia es el propio tono sobre un velo del 12 %;
 * todos los tonos elegidos son oscuros (≥ 6,9:1 sobre blanco), así que el par
 * queda por encima de 4,5:1 con holgura.
 * ---------------------------------------------------------------------------- */

.uts-norm__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.uts-norm__grupo + .uts-norm__grupo {
	margin-top: var(--wp--preset--spacing--70);
}

/* Rótulo del año: se queda pegado arriba mientras se recorre la lista. */
.uts-norm__anio-rotulo {
	position: sticky;
	top: var(--wp--custom--cromado--altoEncabezado);
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 10px 0 8px;
	background-color: var(--wp--preset--color--papel);
	border-bottom: 2px solid var(--wp--preset--color--verde-limon);
}

.uts-norm__anio-num {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--titulo-3);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--verde-escudo);
	/* Raleway trae cifras elzevirianas: en los años se piden las de caja alta. */
	font-variant-numeric: lining-nums tabular-nums;
}

.uts-norm__anio-cuenta {
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.uts-norm__items {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Ficha --- */

.uts-norm__item {
	--norm-tono: var(--wp--preset--color--verde-escudo);

	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: start;
	column-gap: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) calc( var(--wp--preset--spacing--50) + 2px );
	background-color: color-mix( in srgb, var(--norm-tono) 4%, var(--wp--preset--color--blanco) );
	border: 1px solid color-mix( in srgb, var(--norm-tono) 20%, var(--wp--preset--color--blanco) );
	border-radius: var(--wp--custom--radio--base);
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
	transition: border-color var(--wp--custom--transicion--base), box-shadow var(--wp--custom--transicion--base), background-color var(--wp--custom--transicion--base);
}

/*
 * El buscador oculta con el atributo «hidden», pero «display: grid» de la regla
 * de arriba le gana a la regla [hidden] del navegador y las fichas descartadas
 * se quedaban a la vista: escribir no filtraba nada. Lo mismo con los grupos.
 */
.uts-norm__item[hidden],
.uts-norm__grupo[hidden] {
	display: none;
}

/* Barra de familia: dentro del radio de la ficha, no un borde que se tuerce. */
.uts-norm__item::before {
	content: "";
	position: absolute;
	inset-block: -1px;
	inset-inline-start: -1px;
	width: 5px;
	background-color: var(--norm-tono);
	border-radius: var(--wp--custom--radio--base) 0 0 var(--wp--custom--radio--base);
}

.uts-norm__item:hover {
	background-color: color-mix( in srgb, var(--norm-tono) 6%, var(--wp--preset--color--blanco) );
	border-color: color-mix( in srgb, var(--norm-tono) 45%, var(--wp--preset--color--blanco) );
	box-shadow: 0 10px 24px -18px color-mix( in srgb, var(--norm-tono) 70%, transparent );
}

/* Llegada desde «Ir a la ficha» o «Modifica a»: se marca un instante. */
.uts-norm__item:target,
.uts-norm__item.es-destino {
	border-color: var(--norm-tono);
	box-shadow: 0 0 0 3px var(--wp--preset--color--verde-limon);
}

.uts-norm__item--resolucion { --norm-tono: var(--wp--preset--color--verde-escudo); }
.uts-norm__item--acuerdo    { --norm-tono: var(--wp--preset--color--magenta); }
/* Las políticas son acuerdos del Consejo Directivo, pero se buscan por su
   nombre y no por su número, así que van en su propia familia. Comparten el
   verde oscuro con los estatutos —la paleta no da para nueve tonos legibles—;
   la insignia de cada ficha dice cuál es cuál. */
.uts-norm__item--politica   { --norm-tono: var(--wp--preset--color--verde-oscuro); }
.uts-norm__item--reglamento { --norm-tono: var(--wp--preset--color--morado); }
.uts-norm__item--estatuto   { --norm-tono: var(--wp--preset--color--verde-oscuro); }
.uts-norm__item--manual     { --norm-tono: var(--wp--preset--color--gris); }
.uts-norm__item--circular   { --norm-tono: var(--wp--preset--color--tinta); }
.uts-norm__item--ley        { --norm-tono: var(--wp--preset--color--tinta); }
.uts-norm__item--decreto    { --norm-tono: var(--wp--preset--color--tinta); }

.uts-norm__principal {
	min-width: 0;
}

/* Cabeza de la ficha: familia, fecha y, si la hay, la marca de modificaciones. */
.uts-norm__cabeza {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 8px;
}

.uts-norm__insignia {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	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--chip);
	text-transform: uppercase;
	color: var(--norm-tono);
	background-color: color-mix( in srgb, var(--norm-tono) 12%, var(--wp--preset--color--blanco) );
	border-radius: var(--wp--custom--radio--chico);
}

.uts-norm__fecha {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

/* Los iconos de fecha y de documento van en el CSS como máscara y no como SVG
   en línea: son 391 fichas, y repetir el SVG en cada una engordaba el HTML en
   cientos de KB. La máscara toma el color del texto (currentColor). */
.uts-norm__fecha::before,
.uts-norm__doc::before {
	content: "";
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--norm-icono) center / contain no-repeat;
	mask: var(--norm-icono) center / contain no-repeat;
}

.uts-norm__fecha::before {
	--norm-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
	width: 14px;
	height: 14px;
	opacity: 0.85;
}

.uts-norm__doc::before {
	--norm-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M12 18v-6M9 15l3 3 3-3'/%3E%3C/svg%3E");
	width: 17px;
	height: 17px;
}

/* «3 modificaciones»: aviso de que el texto original ya no está solo. */
.uts-norm__marca-mods {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px 0 8px;
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	color: var(--wp--preset--color--verde-oscuro);
	background-color: color-mix( in srgb, var(--wp--preset--color--verde-limon) 45%, var(--wp--preset--color--blanco) );
	border-radius: var(--wp--custom--radio--pastilla);
	font-variant-numeric: tabular-nums;
}

.uts-norm__marca-mods::before {
	content: "";
	width: 7px;
	height: 7px;
	background-color: var(--wp--preset--color--verde-escudo);
	border-radius: 50%;
}

.uts-norm__titulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--tinta);
	font-variant-numeric: lining-nums;
	text-wrap: pretty;
}

.uts-norm__desc {
	margin: 6px 0 0;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.6;
	color: var(--wp--preset--color--gris);
	text-wrap: pretty;
}

/* «Modifica a …»: la relación en el otro sentido. */
.uts-norm__modifica {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 12px 0 0;
	padding: 8px 12px;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.5;
	color: var(--wp--preset--color--tinta);
	background-color: var(--wp--preset--color--blanco);
	border: 1px dashed color-mix( in srgb, var(--norm-tono) 35%, var(--wp--preset--color--blanco) );
	border-radius: var(--wp--custom--radio--base);
}

.uts-norm__modifica svg {
	flex: none;
	margin-top: 2px;
	color: var(--norm-tono);
}

.uts-norm__modifica a {
	font-weight: 600;
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uts-norm__modifica a:hover,
.uts-norm__modifica a:focus-visible {
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration-thickness: 2px;
}

.uts-norm__modifica a:active {
	color: var(--wp--preset--color--tinta);
}

/* --- Acción principal --- */

.uts-norm__acciones {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-top: 2px;
}

/*
 * Botón del documento. Texto blanco en TODOS los estados: el enlace global de
 * theme.json pinta :hover/:focus en verde oscuro, y sobre el fondo del botón el
 * texto desaparecía (el mismo arreglo que en Control Interno).
 */
.uts-norm__doc,
.uts-norm__doc:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 8px 16px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--blanco);
	text-decoration: none;
	background-color: var(--wp--preset--color--verde-escudo);
	border-radius: var(--wp--custom--radio--base);
	transition: background-color var(--wp--custom--transicion--base);
}

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

.uts-norm__doc:active {
	color: var(--wp--preset--color--blanco);
	background-color: var(--wp--preset--color--tinta);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

.uts-norm__sin-doc {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 12px;
	font-size: var(--wp--preset--font-size--pequeno);
	font-style: italic;
	color: var(--wp--preset--color--magenta);
	background-color: var(--wp--preset--color--blanco);
	border: 1px dashed color-mix( in srgb, var(--wp--preset--color--magenta) 35%, var(--wp--preset--color--blanco) );
	border-radius: var(--wp--custom--radio--base);
}

/* --- Modificaciones: línea de tiempo desplegable --- */

.uts-norm__mods {
	grid-column: 1 / -1;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid color-mix( in srgb, var(--norm-tono) 18%, var(--wp--preset--color--blanco) );
}

.uts-norm__mods-boton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	padding: 6px 14px;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 700;
	color: var(--wp--preset--color--verde-escudo);
	list-style: none;
	cursor: pointer;
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--control);
	border-radius: var(--wp--custom--radio--pastilla);
	scroll-margin-top: var(--wp--custom--cromado--aire-foco);
	transition: background-color var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base);
}

.uts-norm__mods-boton::-webkit-details-marker { display: none; }
.uts-norm__mods-boton::marker { content: ""; }

.uts-norm__mods-boton:hover {
	border-color: var(--wp--preset--color--verde-escudo);
	background-color: color-mix( in srgb, var(--wp--preset--color--verde-limon) 22%, var(--wp--preset--color--blanco) );
}

.uts-norm__mods-boton:active {
	color: var(--wp--preset--color--verde-oscuro);
	background-color: color-mix( in srgb, var(--wp--preset--color--verde-limon) 40%, var(--wp--preset--color--blanco) );
}

.uts-norm__mods-flecha {
	transition: transform var(--wp--custom--transicion--base);
}

.uts-norm__mods[open] .uts-norm__mods-flecha { transform: rotate( 180deg ); }
.uts-norm__mods-ocultar { display: none; }
.uts-norm__mods[open] .uts-norm__mods-ver { display: none; }
.uts-norm__mods[open] .uts-norm__mods-ocultar { display: inline; }

.uts-norm__cronologia {
	position: relative;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

/* El hilo de la línea de tiempo. */
.uts-norm__cronologia::before {
	content: "";
	position: absolute;
	inset-block: 10px 10px;
	inset-inline-start: 7px;
	width: 2px;
	background-color: color-mix( in srgb, var(--norm-tono) 25%, var(--wp--preset--color--blanco) );
	border-radius: 2px;
}

.uts-norm__mod {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	margin-inline-start: 28px;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--sutil);
	border-radius: var(--wp--custom--radio--base);
}

.uts-norm__mod:last-child { margin-bottom: 0; }

/* El punto: anillo del tono sobre la ficha, relleno limón. */
.uts-norm__mod::before {
	content: "";
	position: absolute;
	top: 18px;
	inset-inline-start: -27px;
	width: 12px;
	height: 12px;
	background-color: var(--wp--preset--color--verde-limon);
	border: 2px solid var(--norm-tono);
	border-radius: 50%;
}

.uts-norm__mod-cabeza {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0 0 4px;
}

.uts-norm__mod-clase {
	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(--norm-tono);
}

.uts-norm__mod-fecha {
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--gris);
	font-variant-numeric: tabular-nums;
}

.uts-norm__mod-nombre {
	margin: 0;
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--tinta);
}

.uts-norm__mod-desc {
	margin: 4px 0 0;
	font-size: var(--wp--preset--font-size--menor);
	line-height: 1.55;
	color: var(--wp--preset--color--gris);
}

.uts-norm__mod-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 10px 0 0;
}

.uts-norm__mod-enlace {
	display: inline-flex;
	align-items: center;
	min-height: 24px; /* SC 2.5.8 */
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.uts-norm__mod-enlace:hover,
.uts-norm__mod-enlace:focus-visible {
	color: var(--wp--preset--color--verde-oscuro);
	text-decoration-thickness: 2px;
}

.uts-norm__mod-enlace:active {
	color: var(--wp--preset--color--tinta);
}

.uts-norm__mod-enlace--interno::after {
	content: "↓";
	margin-inline-start: 4px;
}

/* --- Móvil ------------------------------------------------------------------ */

@media ( max-width: 781px ) {

	.uts-norm__item {
		grid-template-columns: minmax( 0, 1fr );
		row-gap: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) calc( var(--wp--preset--spacing--40) + 4px );
	}

	.uts-norm__acciones {
		justify-content: stretch;
	}

	.uts-norm__doc,
	.uts-norm__sin-doc {
		flex: 1;
		justify-content: center;
		white-space: normal;
		text-align: center;
	}

	.uts-norm__mods {
		margin-top: 0;
	}

	.uts-norm__mods-boton {
		display: flex;
		justify-content: center;
	}

	.uts-norm__mod {
		margin-inline-start: 22px;
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.uts-norm__cronologia::before { inset-inline-start: 5px; }
	.uts-norm__mod::before { inset-inline-start: -23px; }

	.uts-norm__anio-num {
		font-size: var(--wp--preset--font-size--titulo-3);
	}

	/* El año pasa a su propia línea y se estira: a 320 px, «Todos (394)» no
	   cabe al lado del buscador sin apretarlo. */
	.uts-norm__anio {
		flex: 1 1 100%;
	}

	.uts-norm__selector,
	.uts-norm__selector select {
		flex: 1;
		width: 100%;
	}

	.uts-norm__campo,
	.uts-norm__selector select {
		font-size: 16px; /* por debajo de 16px, iOS hace zoom al enfocar */
	}

	.uts-norm__controles {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	/* Nueve pastillas apiladas son nueve filas: casi quinientos píxeles de
	   filtros antes del primer resultado. A 320 px sólo quedan 242 útiles y ni
	   siquiera caben dos por fila, así que se convierten en una tira que se
	   desliza de lado —el patrón de chips que la gente ya conoce del móvil—.
	   Ninguna opción se pierde: el tabulador las recorre todas y el navegador
	   desplaza la tira solo al enfocar la siguiente. */
	.uts-norm__tipos {
		gap: 6px;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-top: var(--wp--preset--spacing--40);
		padding-inline: var(--wp--preset--spacing--40);
		margin-inline: calc( var(--wp--preset--spacing--40) * -1 );
		scroll-padding-inline: var(--wp--preset--spacing--40);
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		scrollbar-width: thin;
	}

	.uts-norm__pastilla {
		flex: none;
		height: 34px;
		padding: 0 10px;
		gap: 6px;
		font-size: var(--wp--preset--font-size--pequeno);
		scroll-snap-align: start;
	}

	.uts-norm__cuenta {
		height: 18px;
		padding: 0 6px;
	}

	.uts-norm__anio-rotulo {
		top: 0; /* en móvil la cabecera no es fija */
	}
}

/* --- Movimiento ------------------------------------------------------------- */

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

	.uts-norm__campo,
	.uts-norm__pastilla,
	.uts-norm__enviar,
	.uts-norm__selector select,
	.uts-norm__item,
	.uts-norm__doc,
	.uts-norm__mods-boton,
	.uts-norm__mods-flecha {
		transition: none;
	}

	.uts-norm__pastilla:active,
	.uts-norm__enviar:active,
	.uts-norm__limpiar:active {
		transform: none;
	}
}

/* --- Impresión -------------------------------------------------------------- */

@media print {

	.uts-norm__controles,
	.uts-norm__resumen,
	.uts-norm__mods-boton {
		display: none;
	}

	.uts-norm__item {
		break-inside: avoid;
		background: none;
		border: 1px solid #999;
		box-shadow: none;
	}

	.uts-norm__item::before {
		background-color: #000;
	}

	.uts-norm__anio-rotulo {
		position: static;
	}

	.uts-norm__doc {
		color: #000 !important;
		background: none !important;
		border: 1px solid #000;
		padding: 2pt 6pt;
		min-height: 0;
	}

	.uts-norm__doc::before {
		display: none;
	}
}