/*
 * Kommad Contenidos — ficha de ruta.
 *
 * Bloques kmd/ruta-*. Criterio de accesibilidad: los datos son listas de
 * definiciones, la dificultad va siempre en texto y el itinerario es una
 * lista ordenada legible sin el mapa.
 *
 * Colores: huecos de la paleta y variables --kmd-acento* del tema. Esquinas,
 * sombras, bordes y densidad: variables --kmd-* de Kommad Base (base.css,
 * sección 0 bis), siempre con respaldo, para que el bloque funcione con
 * cualquier tema. Hasta la 0.16 estos estilos estaban en el tema (Kommad
 * Base 0.4, base.css, secciones 4 y 5).
 */

.kmd-ruta-numero {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--texto-pequeno);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kmd-acento-texto);
}

/* Datos técnicos: rejilla de pares etiqueta/valor. */
.kmd-ruta-datos,
.kmd-ruta-mide {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
	padding: var(--kmd-esp-caja, var(--wp--preset--spacing--40));
	background-color: var(--kmd-acento-claro);
	border-radius: var(--kmd-radio-medio, 4px);
}

.kmd-ruta-datos dt,
.kmd-ruta-mide dt {
	font-size: var(--wp--preset--font-size--texto-pequeno);
	color: var(--wp--preset--color--texto);
	margin: 0;
}

.kmd-ruta-datos dd,
.kmd-ruta-mide dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulares);
	font-size: var(--wp--preset--font-size--titular-5);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--titulo);
}

.kmd-ruta-mide-epoca {
	font-size: var(--wp--preset--font-size--texto-pequeno);
	color: var(--wp--preset--color--texto);
}

/* Itinerario: lista ordenada, con el kilómetro destacado. */
.kmd-itinerario {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 3px solid var(--kmd-acento);
}

.kmd-itinerario li {
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

.kmd-itinerario li::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 0.45em;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--fondo);
	border: 3px solid var(--kmd-acento);
}

.kmd-itinerario-km {
	display: inline-block;
	min-width: 4.5em;
	font-family: var(--wp--preset--font-family--titulares);
	font-weight: 700;
	color: var(--kmd-acento-texto);
}

/* Seguridad: el 112 siempre visible. */
.kmd-ruta-seguridad {
	padding: var(--kmd-esp-caja, var(--wp--preset--spacing--40));
	border: 2px solid var(--wp--preset--color--texto);
	border-radius: var(--kmd-radio-medio, 4px);
}

.kmd-ruta-seguridad .kmd-subtitulo {
	margin-top: 0;
}

.kmd-ruta-revision {
	font-size: var(--wp--preset--font-size--texto-pequeno);
	color: var(--wp--preset--color--texto);
	margin-bottom: 0;
}

/* Perfil de desnivel (fase 2). SVG con título y descripción; los valores
   exactos, en la tabla plegable. */
.kmd-ruta-perfil {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.kmd-ruta-perfil svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 800 / 240;
	overflow: visible;
}

.kmd-perfil-area {
	fill: var(--kmd-acento-claro);
}

.kmd-perfil-linea {
	fill: none;
	stroke: var(--kmd-acento-texto);
	stroke-width: 2.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.kmd-perfil-rejilla {
	stroke: var(--wp--preset--color--fondo-medio);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.kmd-perfil-eje {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 13px;
	fill: var(--wp--preset--color--texto);
}

.kmd-perfil-descripcion,
.kmd-perfil-nota,
.kmd-ruta-licencia {
	font-size: var(--wp--preset--font-size--texto-pequeno);
	color: var(--wp--preset--color--texto);
}

.kmd-perfil-tabla summary {
	cursor: pointer;
	font-weight: 600;
}

.kmd-perfil-tabla table {
	margin-top: var(--wp--preset--spacing--20);
	border-collapse: collapse;
	min-width: 16em;
}

.kmd-perfil-tabla th,
.kmd-perfil-tabla td {
	text-align: left;
	padding: 4px 16px 4px 0;
	border-bottom: 1px solid var(--wp--preset--color--fondo-medio);
}

.kmd-ruta-descarga {
	margin-top: var(--wp--preset--spacing--40);
}