/*
 * Bloque uts/accesos — acceso rápido.
 * Todo color sale de theme.json. Ni un hex literal.
 */

.uts-accesos {
	background: var(--wp--preset--color--papel);
	border-bottom: 1px solid var(--wp--custom--traza--encabezado);
	padding-block: var(--wp--preset--spacing--40);
}

/*
 * El acceso rápido usa un contenedor MÁS ANCHO que el resto del cromado
 * (1.360 px en vez de 1.200), por decisión expresa: la prioridad es que las
 * seis fichas queden en una sola fila con la tipografía legible, aunque el
 * canal no coincida con el de los menús de arriba. Con 1.200 px no cabían.
 */
.uts-accesos__interior {
	/* Se ajusta al contenido y se centra, con el tope de 1.360 como techo:
	   así no queda espacio muerto al final de la fila. */
	width: fit-content;
	max-width: min( var(--wp--custom--contenedor--ancho-accesos), 100% );
	margin-inline: auto;
	padding-inline: var(--wp--custom--contenedor--aire);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	box-sizing: border-box;
}

/*
 * Cejilla «ACCESO / RÁPIDO» apilada, una palabra por línea. Así ocupa unos
 * 60 px de ancho en lugar de 111, y esos 50 px recuperados son parte de lo
 * que permite la fila única.
 */
.uts-accesos__cejilla {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--cejilla);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--wp--preset--color--apagado);
	padding-inline-end: var(--wp--preset--spacing--40);
	border-inline-end: 1px solid var(--wp--custom--traza--encabezado);
	align-self: stretch;
}

.uts-accesos__palabra {
	display: block;
	white-space: nowrap;
}

/*
 * Fila única. Se consigue con tres cosas juntas: contenedor de 1.360 px en vez
 * de 1.200, cejilla apilada (60 px en vez de 111) y relleno de ficha de 8 px.
 * Con eso las seis caben con el nombre a 14 px y el texto completo.
 *
 * Sigue con «wrap» a propósito: por debajo de unos 1.300 px ya no caben seis,
 * y sin «wrap» la fila desbordaría la pantalla en lugar de partirse.
 */
.uts-accesos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Las fichas se ajustan a su contenido y NO crecen.
 *
 * Con «flex: 1 1 auto» crecían para llenar la fila y el sobrante se repartía
 * dentro de cada una, que es lo que se veía como demasiado aire a la derecha
 * del texto. Con «0 0 auto» cada ficha mide exactamente lo que ocupa su
 * contenido, y el sobrante de la fila lo absorbe el contenedor, que se ajusta
 * al contenido y se centra.
 */
.uts-accesos__item {
	display: flex;
	flex: 0 0 auto;
	min-width: max-content;
}

.uts-accesos__ficha {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	min-width: 0;
	min-height: 24px;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--blanco);
	border: 1px solid var(--wp--custom--traza--ficha);
	border-radius: var(--wp--custom--radio--chico);
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: none;
	transition: background var(--wp--custom--transicion--base), border-color var(--wp--custom--transicion--base);
}

/* El «color» se re-declara para blindar el icono («currentColor») del
   «a:hover { color: verde-oscuro }» global de theme.json; sin esto el icono
   cambiaba de tono al pasar el puntero. El nombre y el descriptor conservan
   su propio color, así que sólo afecta al icono. */
.uts-accesos__ficha:hover,
.uts-accesos__ficha:focus-visible {
	background: var(--wp--preset--color--beige);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--verde-escudo);
	text-decoration: none;
}

/* SC 2.5.8 y regla 4 · en móvil no hay hover: sin :active no hay respuesta. */
.uts-accesos__ficha:active {
	background: var(--wp--preset--color--arena);
	border-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--verde-escudo);
	transition-duration: var(--wp--custom--transicion--pulsa);
}

.uts-accesos__icono {
	flex: none;
}

/*
 * «min-width: max-content» es lo que impide el truncado en escritorio. Los
 * seis textos completos suman 1.075 px de los 1.104 disponibles, así que
 * caben; con «min-width: 0» flexbox los encogía y salían con puntos
 * suspensivos, que no es lo que muestra la maqueta.
 */
.uts-accesos__textos {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: max-content;
}

.uts-accesos__nombre {
	font-family: var(--wp--preset--font-family--raleway);
	font-size: var(--wp--preset--font-size--menor);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--tinta);
	white-space: nowrap;
}

.uts-accesos__descriptor {
	font-size: var(--wp--preset--font-size--cejilla);
	line-height: 1.25;
	color: var(--wp--preset--color--gris-suave);
	white-space: nowrap;
}

/* La sexta ficha, Portal Académico, es la destacada: es el destino con más
   tráfico del dominio entero. Fondo verde escudo, icono limón. */
.uts-accesos__ficha--destacada {
	background: var(--wp--preset--color--verde-escudo);
	border-color: var(--wp--preset--color--verde-escudo);
	color: var(--wp--preset--color--verde-limon);
}

.uts-accesos__ficha--destacada .uts-accesos__nombre {
	color: var(--wp--preset--color--blanco);
}

.uts-accesos__ficha--destacada .uts-accesos__descriptor {
	color: var(--wp--custom--pie--fuerte);
}

/* Sobre el verde escudo el realce sube a verde oscuro; el limón se queda
   para el icono, que sobre oscuro sigue rindiendo 8,99:1. El «color» se
   RE-declara a propósito: theme.json pone en «elements.link» un
   «a:hover { color: verde-oscuro }» de la misma especificidad que gana por
   orden de fuente, y como el icono es «currentColor» se volvía verde oscuro
   sobre el verde oscuro del hover y desaparecía. */
.uts-accesos__ficha--destacada:hover,
.uts-accesos__ficha--destacada:focus-visible {
	background: var(--wp--preset--color--verde-oscuro);
	border-color: var(--wp--preset--color--verde-oscuro);
	color: var(--wp--preset--color--verde-limon);
}

.uts-accesos__ficha--destacada:active {
	background: var(--wp--preset--color--verde-oscuro);
	border-color: var(--wp--preset--color--verde-limon);
	color: var(--wp--preset--color--verde-limon);
}

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

@media ( max-width: 900px ) {

	.uts-accesos {
		padding-block: var(--wp--preset--spacing--50);
	}

	/* En vertical la cejilla pasa arriba y las fichas a dos columnas. */
	.uts-accesos__interior {
		flex-direction: column;
		gap: var(--wp--preset--spacing--40);
		padding-inline: var(--wp--preset--spacing--60);
	}

	/* Arriba y en horizontal hay ancho de sobra: las palabras vuelven a una
	   sola línea, que se lee mejor que apiladas. */
	.uts-accesos__cejilla {
		flex-direction: row;
		gap: 0.35em;
		padding-inline-end: 0;
		border-inline-end: 0;
		align-self: flex-start;
	}

	.uts-accesos__lista {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--30);
	}

	.uts-accesos__item {
		display: block;
		min-width: 0;
	}

	.uts-accesos__ficha {
		gap: var(--wp--preset--spacing--40);
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
		min-height: 44px;
	}

	/* En dos columnas ya no cabe el texto completo: aquí sí se recorta, como
	   hace la maqueta móvil. */
	.uts-accesos__textos {
		min-width: 0;
	}

	.uts-accesos__nombre,
	.uts-accesos__descriptor {
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* A 320 px dos columnas dejan el texto en tres letras: pasa a una. */
@media ( max-width: 360px ) {

	.uts-accesos__lista {
		grid-template-columns: 1fr;
	}
}