/*
 * Colores: este archivo no lleva colores propios de ninguna web. Usa los
 * huecos de la paleta del tema (--wp--preset--color--titulo, fondo, borde…)
 * y las variables de acento de Kommad Base (--kmd-acento-texto,
 * --kmd-acento-oscuro, --kmd-acento-claro), que cambian solas en la zona
 * turística. Cada uno lleva un color de respaldo por si el tema activo no es
 * Kommad Base.
 *
 * Excepción a propósito, en mapa.css: las marcas del mapa (salida en verde,
 * llegada en negro, bordes blancos) y el aviso amarillo. Son símbolos del
 * mapa y avisos, no color de marca: tienen que verse igual en todas las webs.
 */

/*
 * Kommad Contenidos — mapa de la ficha de ruta.
 * Solo la mecánica (tamaño, controles, marcas). El aspecto fino lo pone el tema.
 */

.kmd-mapa {
	position: relative;
	margin-block: 1rem 0.75rem;
	border: var(--kmd-borde-tarjeta, 1px solid var(--wp--preset--color--borde, #b8b8b8));
	border-radius: var(--kmd-radio-grande, 4px);
	box-shadow: var(--kmd-sombra-tarjeta, none);
	overflow: hidden;
	background: var(--wp--preset--color--fondo-medio, #eeece6);
}

/* El hueco se reserva desde el principio: la página no salta al cargar. */
.kmd-mapa-lienzo {
	width: 100%;
	aspect-ratio: 4 / 3;
	min-height: 18rem;
	max-height: 75vh;
}

/* En móvil, cuadrado: caben los controles sin taparse. */
@media (max-width: 30em) {
	.kmd-mapa-lienzo {
		aspect-ratio: 1 / 1;
		min-height: 20rem;
	}
}

@media (min-width: 48em) {
	.kmd-mapa-lienzo {
		aspect-ratio: 16 / 9;
	}
}

.kmd-mapa--fallo .kmd-mapa-lienzo {
	display: none;
}

.kmd-mapa-aviso {
	margin: 0;
	padding: 1rem;
	background: #fff8e1;
	border-left: 4px solid #8a6d00;
}

.kmd-mapa noscript .kmd-mapa-aviso {
	position: absolute;
	inset: auto 0 0 0;
}

/* «Saltar el mapa»: invisible hasta que recibe el foco. */
.kmd-saltar-mapa {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kmd-saltar-mapa:focus {
	position: static;
	width: auto;
	height: auto;
	overflow: visible;
	clip-path: none;
	display: inline-block;
	padding: 0.5rem 0.75rem;
	background: var(--wp--preset--color--titulo, #1a1a1a);
	color: var(--wp--preset--color--fondo, #fff);
}

/* Controles propios (botones de verdad, 44 px de objetivo táctil).
   Fondo arriba a la izquierda, zoom arriba a la derecha, flechas abajo a la
   derecha sobre la atribución, escala abajo a la izquierda. */
.kmd-mapa .kmd-mapa-grupo {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--fondo, #fff);
	border-radius: var(--kmd-radio-pequeno, 4px);
	box-shadow: 0 0 0 2px rgb(0 0 0 / 0.15);
	overflow: hidden;
}

.kmd-mapa .kmd-mapa-fondo {
	flex-direction: row;
}

.kmd-mapa .kmd-mapa-mover {
	display: grid;
	grid-template-columns: repeat(3, 2.75rem);
	grid-template-areas: ". n ." "o . e" ". s .";
	gap: 2px;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.kmd-mapa .kmd-mapa-mover .kmd-n { grid-area: n; }
.kmd-mapa .kmd-mapa-mover .kmd-s { grid-area: s; }
.kmd-mapa .kmd-mapa-mover .kmd-e { grid-area: e; }
.kmd-mapa .kmd-mapa-mover .kmd-o { grid-area: o; }

.kmd-mapa .kmd-mapa-mover .kmd-mapa-boton {
	border: 0;
	border-radius: var(--kmd-radio-pequeno, 4px);
	box-shadow: 0 0 0 2px rgb(0 0 0 / 0.15);
}

.kmd-mapa .kmd-mapa-boton {
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--fondo-medio, #ddd);
	background: var(--wp--preset--color--fondo, #fff);
	color: var(--wp--preset--color--titulo, #1a1a1a);
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.kmd-mapa .kmd-mapa-zoom .kmd-mapa-boton:last-child {
	border-bottom: 0;
}

.kmd-mapa .kmd-mapa-fondo .kmd-mapa-boton {
	border-bottom: 0;
	border-right: 1px solid var(--wp--preset--color--fondo-medio, #ddd);
}

.kmd-mapa .kmd-mapa-fondo .kmd-mapa-boton:last-child {
	border-right: 0;
}

.kmd-mapa .kmd-mapa-boton:hover {
	background: var(--wp--preset--color--fondo-suave, #f0f0f0);
}

.kmd-mapa .kmd-mapa-boton:focus-visible {
	outline: 3px solid var(--wp--preset--color--titulo, #1a1a1a);
	outline-offset: -3px;
}

.kmd-mapa .kmd-mapa-boton svg {
	display: block;
	margin: auto;
}

.kmd-mapa .kmd-mapa-boton--texto {
	font-size: 0.875rem;
	padding: 0 0.75rem;
}

.kmd-mapa .kmd-mapa-boton[aria-pressed="true"],
.kmd-mapa .kmd-mapa-boton[aria-pressed="true"]:hover {
	background: var(--wp--preset--color--titulo, #1a1a1a);
	color: var(--wp--preset--color--fondo, #fff);
	font-weight: 600;
}

/* Marcas: formas distintas, no solo colores distintos. */
.kmd-marca {
	display: inline-block;
	width: 1.125rem;
	height: 1.125rem;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.6), 0 1px 3px rgb(0 0 0 / 0.4);
	vertical-align: middle;
	box-sizing: border-box;
}

.kmd-marca--salida {
	border-radius: 50%;
	background: #1b7f3b;
}

.kmd-marca--llegada {
	border-radius: 0;
	background: #1a1a1a;
}

.kmd-marca--salida-llegada {
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 28%, #1b7f3b 30%);
}

.kmd-marca-linea {
	display: inline-block;
	width: 1.75rem;
	height: 0.5rem;
	border-radius: 0.25rem;
	background: var(--kmd-color-ruta, #c2185b);
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgb(0 0 0 / 0.4);
	vertical-align: middle;
}

.kmd-mapa-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.kmd-mapa-leyenda li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.kmd-mapa-leyenda:focus {
	outline: none;
}

/* La atribución, siempre legible. */
.kmd-mapa .maplibregl-ctrl-attrib {
	font-size: 0.75rem;
	background: rgb(255 255 255 / 0.9);
}

.kmd-mapa .maplibregl-ctrl-attrib a {
	color: var(--wp--preset--color--titulo, #1a1a1a);
	text-decoration: underline;
}

/* Mapa de conjunto: una marca numerada por ruta, que enlaza a su ficha.
   Con `.kmd-mapa` delante a propósito: el color de los enlaces de la zona
   turística del tema (.zona-turistica :where(a)) pesa lo mismo que una
   clase sola, carga después y dejaba el número en terracota sobre rosa. */
.kmd-mapa .kmd-marca-ruta,
.kmd-mapa .kmd-marca-ruta:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.375rem;
	border: 2px solid #fff;
	border-radius: 1rem;
	background: var(--kmd-color-ruta, #c2185b);
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
	box-sizing: border-box;
}

.kmd-marca-ruta:hover {
	background: var(--wp--preset--color--titulo, #1a1a1a);
}

.kmd-marca-ruta:focus-visible {
	outline: 3px solid var(--wp--preset--color--titulo, #1a1a1a);
	outline-offset: 2px;
}

.kmd-marca-ruta[hidden] {
	display: none;
}

/* Nombre de la marca al pasar el ratón o con el foco del teclado. Fondo
   blanco y texto oscuro fijos: tiene que leerse sobre cualquier fondo de
   mapa (topográfico u ortofoto). */
.kmd-marca-nombre {
	position: absolute;
	bottom: calc(100% + 0.375rem);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	background: #fff;
	color: #1a1a1a;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.kmd-marca-ruta:hover .kmd-marca-nombre,
.kmd-marca-ruta:focus-visible .kmd-marca-nombre {
	opacity: 1;
	visibility: visible;
}

/* La marca con el nombre a la vista, por encima de las vecinas. */
.kmd-marca-ruta:hover,
.kmd-marca-ruta:focus-visible {
	z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
	.kmd-marca-nombre {
		transition: none;
	}
}

/* «Dónde está» del pueblo: enlaces para llegar con la app de mapas del móvil. */
.kmd-localizacion .kmd-listado-mapa {
	margin-bottom: 1rem;
}

.kmd-como-llegar:focus {
	outline: none;
}

/* El botón es el <summary>; al abrirse, las aplicaciones van debajo. */
.kmd-como-llegar summary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0 1.25rem;
	border-radius: var(--kmd-radio-pequeno, 4px);
	background: var(--kmd-acento-texto, #1a1a1a);
	color: var(--wp--preset--color--fondo, #fff);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	box-sizing: border-box;
}

.kmd-como-llegar summary::-webkit-details-marker {
	display: none;
}

/* Flecha que gira al abrir. */
.kmd-como-llegar summary::after {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.kmd-como-llegar[open] summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.kmd-como-llegar summary:hover {
	background: var(--kmd-acento-oscuro, #444);
}

.kmd-como-llegar summary:focus-visible {
	outline: 3px solid var(--wp--preset--color--titulo, #1a1a1a);
	outline-offset: 2px;
}

.kmd-como-llegar ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.kmd-como-llegar a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 2px solid currentColor;
	border-radius: var(--kmd-radio-pequeno, 4px);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	box-sizing: border-box;
}

.kmd-como-llegar a:hover {
	background: var(--kmd-acento-texto, #1a1a1a);
	border-color: var(--kmd-acento-texto, #1a1a1a);
	color: var(--wp--preset--color--fondo, #fff);
}

.kmd-como-llegar a:focus-visible {
	outline: 3px solid var(--wp--preset--color--titulo, #1a1a1a);
	outline-offset: 2px;
}

.kmd-como-llegar-geo[hidden] {
	display: none;
}

.kmd-coordenadas {
	margin-top: 0.75rem;
	font-size: 0.875rem;
}