/**
 * Cabecera, navegación, pie de página y panel de accesibilidad.
 *
 * La cabecera y el pie se editan en un solo lugar y se reflejan en todas las
 * páginas: no existe variante por página.
 */

/* ==========================================================================
   Barra superior
   ========================================================================== */

.barra-superior {
	background-color: var(--color-navy);
	color: var(--color-texto-inverso);
	font-family: var(--fuente-institucional);
	font-size: var(--fs-200);
}

.barra-superior__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2xs) var(--e-md);
	min-height: var(--objetivo-minimo);
	padding-block: var(--e-3xs);
}

/* ==========================================================================
   Buscador de la barra superior
   ========================================================================== */

.buscador {
	display: flex;
	flex-direction: column;
	gap: var(--e-3xs);
	flex: 1 1 12rem;
	max-width: 22rem;
}

.buscador__etiqueta {
	font-size: var(--fs-100);
}

.barra-superior .buscador__etiqueta {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.buscador__grupo {
	display: flex;
	align-items: stretch;
	gap: var(--e-3xs);
}

.buscador__campo {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--objetivo-minimo);
	padding: var(--e-3xs) var(--e-2xs);
	background-color: var(--color-fondo);
	color: var(--color-texto);
	border: var(--borde-grueso) solid var(--color-borde-fuerte);
	border-radius: var(--radio-sm);
	font-size: var(--fs-200);
}

.buscador__enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--objetivo-minimo);
	min-height: var(--objetivo-minimo);
	background-color: var(--color-acento);
	color: var(--color-acento-texto);
	border: var(--borde-grueso) solid transparent;
	border-radius: var(--radio-sm);
	cursor: pointer;
}

.buscador__enviar:hover,
.buscador__enviar:focus-visible {
	background-color: var(--color-acento-oscuro);
}

.buscador__enviar svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.barra-superior__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--e-2xs) var(--e-sm);
	padding: 0;
	margin: 0;
	list-style: none;
}

.barra-superior__enlace {
	display: inline-flex;
	align-items: center;
	min-height: var(--objetivo-minimo);
	padding-inline: var(--e-3xs);
	color: var(--color-texto-inverso);
	text-decoration: none;
}

.barra-superior__enlace:hover,
.barra-superior__enlace:focus-visible {
	color: var(--color-celeste);
	text-decoration: underline;
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.cabecera {
	position: relative;
	z-index: var(--capa-cabecera);
	background-color: var(--color-celeste);
}

.cabecera__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-sm);
	min-height: 4.5rem;
	padding-block: var(--e-2xs);
}

.cabecera__marca {
	display: flex;
	align-items: center;
	gap: var(--e-2xs);
	text-decoration: none;
	color: var(--color-navy);
	min-height: var(--objetivo-minimo);
}

.cabecera__escudo {
	width: auto;
	max-height: 3.25rem;
}

/* Logotipo del Servicio Local, al lado del escudo como en la maqueta y a su
   misma altura: más pequeño se leía como un añadido y no como parte de la
   marca institucional. */
.cabecera__servicio {
	width: auto;
	max-height: 3.25rem;
	margin-left: var(--e-xs);
}

.cabecera__nombre {
	font-family: var(--fuente-institucional);
	font-size: var(--fs-300);
	font-weight: var(--peso-fuerte);
	line-height: var(--interlinea-apretada);
	max-width: 14rem;
}

.cabecera__lema {
	display: block;
	font-size: var(--fs-100);
	font-weight: var(--peso-normal);
}

/* ==========================================================================
   Botón de menú en teléfono
   ========================================================================== */

/* Sin guion no hay nada que alternar: el menú ya está desplegado. */
.alternar-menu {
	display: none;
}

.con-guion .alternar-menu {
	display: inline-flex;
	align-items: center;
	gap: var(--e-3xs);
	min-height: var(--objetivo-minimo);
	min-width: var(--objetivo-minimo);
	padding: var(--e-3xs) var(--e-2xs);
	background: transparent;
	color: var(--color-navy);
	font-family: var(--fuente-institucional);
	font-size: var(--fs-200);
	font-weight: var(--peso-fuerte);
	border: var(--borde-grueso) solid currentColor;
	border-radius: var(--radio-sm);
	cursor: pointer;
}

.alternar-menu svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

.alternar-menu__cerrar {
	display: none;
}

.alternar-menu[aria-expanded="true"] .alternar-menu__abrir {
	display: none;
}

.alternar-menu[aria-expanded="true"] .alternar-menu__cerrar {
	display: block;
}

/* ==========================================================================
   Menú principal
   ========================================================================== */

.menu-principal {
	flex-basis: 100%;
	background-color: var(--color-fondo);
	border-top: var(--borde-grueso) solid var(--color-celeste-oscuro);
}

/* Con guion disponible, el menú pasa a ser un panel desplegable. */
.con-guion .menu-principal {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: var(--capa-menu);
	box-shadow: var(--sombra-media);
	max-height: calc(100vh - 8rem);
	overflow-y: auto;
}

/* El plegado se decide con el estado ARIA del propio control, no con un
   atributo aparte: así el estado vive en un solo lugar y no puede quedar
   descoordinado con lo que anuncia el lector de pantalla. */
.con-guion .alternar-menu[aria-expanded="false"] + .menu-principal {
	display: none;
}

.menu-principal__lista {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	list-style: none;
}

.menu-principal__elemento {
	border-bottom: var(--borde-fino) solid var(--color-borde);
}

.menu-principal__enlace,
.menu-principal__disparador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2xs);
	width: 100%;
	min-height: var(--objetivo-minimo);
	padding: var(--e-2xs) var(--margen-lateral);
	background: transparent;
	color: var(--color-azul-enlace);
	font-family: var(--fuente-institucional);
	font-size: var(--fs-300);
	font-weight: var(--peso-fuerte);
	text-align: left;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.menu-principal__enlace:hover,
.menu-principal__disparador:hover {
	background-color: var(--color-celeste);
}

.menu-principal__enlace[aria-current="page"] {
	color: var(--color-acento);
	text-decoration: underline;
}

.menu-principal__marca {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	fill: currentColor;
	transition: transform var(--transicion-media);
}

.menu-principal__disparador[aria-expanded="true"] .menu-principal__marca {
	transform: rotate(180deg);
}

.menu-principal__panel {
	padding: var(--e-2xs) 0 var(--e-xs);
	background-color: var(--color-fondo-suave);
}

.con-guion .menu-principal__disparador[aria-expanded="false"] + .menu-principal__panel {
	display: none;
}

.menu-principal__sublista {
	padding: 0;
	margin: 0;
	list-style: none;
}

.menu-principal__subenlace {
	display: flex;
	align-items: center;
	min-height: var(--objetivo-minimo);
	padding: var(--e-3xs) var(--margen-lateral) var(--e-3xs) calc(var(--margen-lateral) + var(--e-sm));
	color: var(--color-navy);
	font-family: var(--fuente-institucional);
	font-weight: var(--peso-medio);
	text-decoration: none;
}

.menu-principal__subenlace:hover,
.menu-principal__subenlace:focus-visible {
	background-color: var(--color-celeste);
	text-decoration: underline;
}

.menu-principal__subenlace[aria-current="page"] {
	color: var(--color-acento);
	text-decoration: underline;
}

/* ---------- Escritorio: mega menú en tres columnas ---------- */

@media (min-width: 64em) {
	.con-guion .alternar-menu {
		display: none;
	}

	.menu-principal,
	.con-guion .menu-principal,
	.con-guion .alternar-menu[aria-expanded="false"] + .menu-principal {
		display: block;
		position: static;
		flex-basis: auto;
		background: transparent;
		border-top: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
	}

	/* La fila horizontal solo se arma cuando el guion puede plegar los
	   paneles. Sin guion, el menú queda como lista vertical y sigue
	   siendo navegable. */
	.con-guion .menu-principal__lista {
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-end;
		gap: var(--e-sm);
	}

	.con-guion .menu-principal__elemento {
		position: relative;
		border-bottom: 0;
		display: flex;
		align-items: stretch;
	}

	/* Separador vertical del diseño, entre elementos del menú. */
	.con-guion .menu-principal__elemento + .menu-principal__elemento::before {
		content: "";
		align-self: center;
		width: 1px;
		height: 1.4em;
		margin-right: var(--e-sm);
		background-color: var(--color-acento);
	}

	.con-guion .menu-principal__enlace,
	.con-guion .menu-principal__disparador {
		width: auto;
		padding: var(--e-2xs) var(--e-3xs);
		white-space: nowrap;
	}

	.con-guion .menu-principal__enlace:hover,
	.con-guion .menu-principal__disparador:hover {
		background-color: transparent;
		text-decoration: underline;
	}

	.con-guion .menu-principal__panel {
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		min-width: 15rem;
		padding: var(--e-2xs) 0;
		background-color: var(--color-fondo);
		border: var(--borde-grueso) solid var(--color-azul-enlace);
		border-radius: var(--radio-xs);
		box-shadow: var(--sombra-alta);
	}

	/* El último elemento abre su panel hacia la izquierda para no salirse de
	   la pantalla y provocar desplazamiento horizontal. */
	.con-guion .menu-principal__elemento:last-child .menu-principal__panel {
		inset-inline-start: auto;
		inset-inline-end: 0;
	}

	.con-guion .menu-principal__subenlace {
		padding: var(--e-3xs) var(--e-md);
		white-space: nowrap;
	}

	.menu-principal__sublista > li + li .menu-principal__subenlace {
		border-top: var(--borde-fino) solid var(--color-borde);
	}
}

/* ==========================================================================
   Accesos rápidos de portada
   ========================================================================== */

.accesos-rapidos {
	background-color: var(--color-fondo-alterno);
	/* El aire va aquí y no en la lista: el reinicio le aplica «ul[class]
	   { padding: 0 }», que gana en especificidad a una sola clase. */
	padding-block: var(--e-lg);
}

.accesos-rapidos__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Los cuatro accesos quedaban pegados y se leían como un solo bloque. */
	gap: var(--e-sm) var(--e-xl);
	margin: 0;
	list-style: none;
}

/* ==========================================================================
   Pie de página
   ========================================================================== */

.pie {
	background-color: var(--color-navy);
	color: var(--color-texto-inverso);
}

.pie a {
	color: var(--color-texto-inverso);
}

.pie a:hover,
.pie a:focus-visible {
	color: var(--color-celeste);
}

.pie__columnas {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--e-lg);
	padding-block: var(--e-xl);
}

.pie__columnas > * {
	min-width: 0;
}

@media (min-width: 64em) {
	.pie__columnas {
		grid-template-columns: 1fr 1.1fr 1fr;
		gap: var(--e-xl);
		align-items: stretch;
	}

	/* El mapa se quedaba en su altura minima y la fila parecia descuadrada
	   frente al texto de los lados. Estirado, las tres columnas cierran a la
	   misma altura. */
	.pie__columna--mapa {
		display: flex;
		flex-direction: column;
	}

	.pie__columna--mapa .mapa {
		flex: 1;
	}
}

.pie__titulo {
	color: var(--color-texto-inverso);
	font-size: var(--fs-600);
	margin-bottom: var(--e-sm);
}

.pie__rotulo {
	display: block;
	font-size: var(--fs-100);
	text-transform: uppercase;
	letter-spacing: var(--espaciado-letras-rotulo);
	margin-bottom: var(--e-2xs);
}

.pie__logotipo {
	max-height: 7rem;
	width: auto;
	margin-bottom: var(--e-sm);
}

.pie__datos {
	display: flex;
	flex-direction: column;
	gap: var(--e-2xs);
	padding: 0;
	margin: 0;
	list-style: none;
}

.pie__datos li {
	max-width: 24rem;
}

.pie__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2xs) var(--e-md);
	padding: 0;
	margin: var(--e-md) 0 0;
	list-style: none;
}

.pie__menu a {
	display: inline-flex;
	align-items: center;
	min-height: var(--objetivo-minimo);
}

.pie__creditos {
	border-top: var(--borde-fino) solid var(--color-navy-claro);
}

.pie__creditos-interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-2xs) var(--e-md);
	padding-block: var(--e-sm);
	font-size: var(--fs-200);
}

.pie__creditos p {
	max-width: none;
	margin: 0;
}