/* Piezas editoriales. Ver inc/front/piezas.php

   Misma familia que el bloque del clima: tarjeta blanca, borde gris azulado,
   esquinas suaves, ícono en color. El acento (barras, anillo, línea de tiempo)
   sale del color secundario del portal. Todo en variables propias, para que un
   portal las pise desde su hoja sin tocar el theme, que es compartido. */

:root {
	--mdpd-piezas-borde: #dfe5ea;
	--mdpd-piezas-fondo: #fff;
	--mdpd-piezas-tenue: #5d6b75;
	--mdpd-piezas-acento: var(--fs-color-secondary, #4a90d9);
	--mdpd-piezas-acento-suave: color-mix(in srgb, var(--mdpd-piezas-acento) 14%, transparent);
	--mdpd-piezas-radio: 8px;
}

.mdpd-pieza-icono {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.mdpd-piezas-titulo {
	margin: 0 0 .8rem;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.3;
}

/* ---- Ícono suelto: en línea con el texto, o más grande con `tamano` ---- */

.mdpd-icono {
	display: inline-block;
	width: var(--mdpd-icono-tam, 1.25em);
	height: var(--mdpd-icono-tam, 1.25em);
	vertical-align: -.25em;
}

/* ---- Cifras ---- */

.mdpd-cifras {
	margin: 0 0 1.5rem;
}

/* Se acomoda sola; `columnas` fija el máximo: cada celda mide al menos lo que le
   toca con ese número de columnas, y nunca menos de 10rem. */
.mdpd-cifras__grilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(10rem, calc((100% - (var(--mdpd-cifras-col, 4) - 1) * .8rem) / var(--mdpd-cifras-col, 4))), 1fr));
	gap: .8rem;
}

.mdpd-cifra {
	border: 1px solid var(--mdpd-piezas-borde);
	border-radius: var(--mdpd-piezas-radio);
	background: var(--mdpd-piezas-fondo);
	padding: 1rem 1.1rem;
	margin: 0 0 1.5rem;
}

.mdpd-cifras .mdpd-cifra {
	margin: 0;
}

.mdpd-cifra p {
	margin: 0;
	line-height: 1.3;
}

.mdpd-cifra__icono {
	display: block;
	width: 2.6em;
	margin-bottom: .55rem;
}

.mdpd-cifra__valor {
	font-size: 2em;
	font-weight: 700;
	line-height: 1.1 !important;
	letter-spacing: -.01em;
}

.mdpd-cifra__texto {
	margin-top: .2rem !important;
	font-weight: 600;
}

.mdpd-cifra__nota {
	margin-top: .35rem !important;
	color: var(--mdpd-piezas-tenue);
	font-size: .82em;
}

/* ---- Porcentaje ---- */

.mdpd-porcentaje__grafico {
	position: relative;
	width: 5.2em;
	margin-bottom: .55rem;
}

.mdpd-porcentaje__anillo {
	display: block;
	width: 100%;
	transform: rotate(-90deg);
}

.mdpd-porcentaje__fondo,
.mdpd-porcentaje__trazo {
	fill: none;
	stroke-width: 3.6;
}

.mdpd-porcentaje__fondo {
	stroke: var(--mdpd-piezas-acento-suave);
}

.mdpd-porcentaje__trazo {
	stroke: var(--mdpd-piezas-acento);
	stroke-linecap: round;
}

.mdpd-porcentaje__valor {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15em;
	font-weight: 700;
}

/* ---- Distancias ---- */

.mdpd-distancias {
	border: 1px solid var(--mdpd-piezas-borde);
	border-radius: var(--mdpd-piezas-radio);
	background: var(--mdpd-piezas-fondo);
	padding: 1rem 1.1rem;
	margin: 0 0 1.5rem;
}

.mdpd-distancias__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdpd-tramo {
	display: grid;
	/* Columnas de ancho fijo: cada fila es su propia grilla, y con anchos que
	   dependieran del contenido las barras arrancarían a distinta altura. */
	grid-template-columns: 2.2em minmax(0, 14rem) 1fr 7.5rem;
	align-items: center;
	gap: .4rem .9rem;
	margin: 0;
	padding: .55rem 0;
	border-top: 1px solid var(--mdpd-piezas-borde);
	line-height: 1.3;
}

.mdpd-tramo:first-child {
	border-top: 0;
	padding-top: 0;
}

.mdpd-tramo:last-child {
	padding-bottom: 0;
}

.mdpd-tramo__icono {
	width: 2.2em;
}

.mdpd-tramo__lugar {
	font-weight: 600;
}

.mdpd-tramo__nota,
.mdpd-tramo__tiempo {
	display: block;
	color: var(--mdpd-piezas-tenue);
	font-size: .82em;
	font-weight: 400;
}

.mdpd-tramo__barra {
	display: block;
	height: .55em;
	border-radius: 1em;
	background: var(--mdpd-piezas-acento-suave);
	overflow: hidden;
}

.mdpd-tramo__barra span {
	display: block;
	height: 100%;
	border-radius: 1em;
	background: var(--mdpd-piezas-acento);
}

.mdpd-tramo__km {
	min-width: 0;
	text-align: right;
	font-weight: 700;
	white-space: nowrap;
}

/* El número no corta («1.624 km» entero); el tiempo sí, dentro de su columna. */
.mdpd-tramo__km .mdpd-tramo__tiempo {
	white-space: normal;
	overflow-wrap: anywhere;
}

/* En el celular, la barra pasa abajo y ocupa todo el ancho. */
@media (max-width: 549px) {
	.mdpd-tramo {
		grid-template-columns: 2.2em 1fr 6.5rem;
	}

	.mdpd-tramo__barra {
		grid-column: 2 / -1;
		grid-row: 2;
	}
}

/* ---- Línea de tiempo ---- */

.mdpd-linea-tiempo {
	margin: 0 0 1.5rem;
}

.mdpd-linea-tiempo__lista {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* La línea: un trazo del color del portal, suave, detrás de las marcas. */
.mdpd-linea-tiempo__lista::before {
	content: "";
	position: absolute;
	top: .6em;
	bottom: .6em;
	left: calc(1.1em - 1.5px);
	width: 3px;
	border-radius: 3px;
	background: var(--mdpd-piezas-acento-suave);
}

.mdpd-hito {
	position: relative;
	margin: 0;
	padding: 0 0 1.4rem 3.2em;
}

.mdpd-hito:last-child {
	padding-bottom: 0;
}

.mdpd-hito__marca {
	position: absolute;
	top: .3em;
	left: calc(1.1em - .5em);
	width: 1em;
	height: 1em;
	border: 3px solid var(--mdpd-piezas-acento);
	border-radius: 50%;
	background: var(--mdpd-piezas-fondo);
}

/* Con ícono, la marca es el dibujo, sobre un círculo blanco que tapa la línea. */
.mdpd-hito--icono .mdpd-hito__marca {
	top: -.1em;
	left: 0;
	width: 2.2em;
	height: 2.2em;
	padding: .25em;
	border: 0;
	box-shadow: 0 0 0 1px var(--mdpd-piezas-borde);
}

.mdpd-hito p {
	margin: 0;
}

.mdpd-hito__anio {
	color: var(--mdpd-piezas-acento);
	font-size: 1.15em;
	font-weight: 700;
	line-height: 1.3;
}

.mdpd-hito__titulo {
	font-weight: 700;
	line-height: 1.35;
}

.mdpd-hito__texto {
	margin-top: .25rem;
}

.mdpd-hito__texto p {
	margin: 0 0 .5em;
}

.mdpd-hito__texto p:last-child {
	margin-bottom: 0;
}

/* ---- Barras ---- */

.mdpd-barras {
	border: 1px solid var(--mdpd-piezas-borde);
	border-radius: var(--mdpd-piezas-radio);
	background: var(--mdpd-piezas-fondo);
	padding: 1rem 1.1rem;
	margin: 0 0 1.5rem;
}

.mdpd-barras__grafico {
	display: grid;
	grid-template-columns: repeat(var(--mdpd-barras-n), minmax(0, 1fr));
	gap: .35rem;
	margin: 0;
	padding: 1.4em 0 0;
	list-style: none;
}

.mdpd-barras__col {
	margin: 0;
	text-align: center;
}

.mdpd-barras__zona {
	position: relative;
	display: block;
	height: 11rem;
}

.mdpd-barras__barra {
	position: absolute;
	left: 50%;
	width: min(100%, 2.2rem);
	transform: translateX(-50%);
	border-radius: .45rem;
	background: var(--mdpd-piezas-acento);
}

/* El rango va de frío a cálido, como un termómetro. */
.mdpd-barras--rango .mdpd-barras__barra {
	background: linear-gradient(to top, #4a90d9, #f6a623 55%, #e8594a);
}

.mdpd-barras__max,
.mdpd-barras__min {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: .78em;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.mdpd-barras__max {
	bottom: calc(100% + .3em);
}

.mdpd-barras__min {
	top: calc(100% + .3em);
	color: var(--mdpd-piezas-tenue);
	font-weight: 600;
}

.mdpd-barras--rango .mdpd-barras__zona {
	margin-bottom: 1.3em;
}

.mdpd-barras__etiqueta {
	display: block;
	margin-top: .45em;
	color: var(--mdpd-piezas-tenue);
	font-size: .8em;
	line-height: 1.2;
}

.mdpd-barras__nota {
	margin: .8rem 0 0;
	color: var(--mdpd-piezas-tenue);
	font-size: .82em;
}

/* Con muchas columnas en un celular, los números se achican antes de pisarse. */
@media (max-width: 549px) {
	.mdpd-barras__grafico {
		gap: .2rem;
	}

	.mdpd-barras__zona {
		height: 9rem;
	}

	.mdpd-barras__max,
	.mdpd-barras__min,
	.mdpd-barras__etiqueta {
		font-size: .66em;
	}
}

/* ---- Destaques ---- */

.mdpd-destaque {
	--mdpd-destaque-color: #4a90d9;
	display: flex;
	gap: .9rem;
	align-items: flex-start;
	margin: 0 0 1.5rem;
	padding: .9rem 1.1rem;
	border-radius: var(--mdpd-piezas-radio);
	border-left: 4px solid var(--mdpd-destaque-color);
	background: color-mix(in srgb, var(--mdpd-destaque-color) 9%, #fff);
}

.mdpd-destaque--consejo { --mdpd-destaque-color: #f2b705; }
.mdpd-destaque--aviso   { --mdpd-destaque-color: #e8594a; }
.mdpd-destaque--dato    { --mdpd-destaque-color: #5fae5a; }
.mdpd-destaque--info    { --mdpd-destaque-color: #4a90d9; }

.mdpd-destaque__icono {
	flex: 0 0 2.2em;
	width: 2.2em;
}

.mdpd-destaque__cuerpo {
	min-width: 0;
}

.mdpd-destaque__cuerpo p {
	margin: 0 0 .5em;
}

.mdpd-destaque__cuerpo p:last-child {
	margin-bottom: 0;
}

.mdpd-destaque__titulo {
	font-weight: 700;
	margin-bottom: .2em !important;
}

/* ---- Fuentes ---- */

.mdpd-fuentes {
	display: flex;
	gap: .5rem;
	align-items: flex-start;
	margin: 1.5rem 0;
	padding-top: .7rem;
	border-top: 1px solid var(--mdpd-piezas-borde);
	color: var(--mdpd-piezas-tenue);
	font-size: .82em;
	line-height: 1.45;
}

.mdpd-fuentes .mdpd-pieza-icono {
	flex: 0 0 1.5em;
	width: 1.5em;
}

/* ---- Banderas de playa ---- */

.mdpd-banderas {
	border: 1px solid var(--mdpd-piezas-borde);
	border-radius: var(--mdpd-piezas-radio);
	background: var(--mdpd-piezas-fondo);
	padding: 1rem 1.1rem;
	margin: 0 0 1.5rem;
}

.mdpd-banderas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdpd-bandera {
	display: flex;
	gap: .7rem;
	align-items: center;
	margin: 0;
	line-height: 1.35;
}

.mdpd-bandera__icono {
	flex: 0 0 2.6em;
	width: 2.6em;
}

.mdpd-bandera__texto strong {
	display: block;
}