/* El bloque del pronóstico. Ver inc/front/clima-shortcode.php

   Los colores salen de variables propias para que un portal las pise desde su
   hoja sin tocar el theme, que es compartido. */

.mdpd-clima {
	--mdpd-clima-borde: #dfe5ea;
	--mdpd-clima-fondo: #fff;
	--mdpd-clima-tenue: #5d6b75;

	border: 1px solid var(--mdpd-clima-borde);
	border-radius: 6px;
	background: var(--mdpd-clima-fondo);
	padding: 1rem 1.1rem;
	margin: 0 0 1.5rem;
}

.mdpd-clima__titulo {
	margin: 0 0 .8rem;
	font-size: 1.05em;
	line-height: 1.3;
}

.mdpd-clima__ahora {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: .9rem;
	margin-bottom: .9rem;
	border-bottom: 1px solid var(--mdpd-clima-borde);
}

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

.mdpd-clima__temp {
	font-size: 2.4em;
	font-weight: 700;
	line-height: 1;
}

.mdpd-clima__desc {
	font-size: 1em;
}

.mdpd-clima__detalle,
.mdpd-clima__cielo,
.mdpd-clima__lluvia,
.mdpd-clima__pie {
	color: var(--mdpd-clima-tenue);
	font-size: .85em;
}

/* Los días van en una grilla que se acomoda sola. `auto-fit` con un mínimo
   evita tener que declarar cuántas columnas hay en cada ancho: el shortcode
   puede pedir de uno a cinco días y la fila se reparte igual. */
.mdpd-clima__dias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdpd-clima__dia {
	text-align: center;
	margin: 0;
	padding: .5rem .2rem;
	border-radius: 4px;
}

.mdpd-clima__dia p {
	margin: .15rem 0;
	line-height: 1.25;
}

.mdpd-clima__fecha {
	font-weight: 600;
	font-size: .9em;
}

.mdpd-clima__max {
	font-weight: 700;
}

.mdpd-clima__min {
	color: var(--mdpd-clima-tenue);
	margin-left: .35em;
}

/* El ícono sigue al texto: en `em`, así que si el portal cambia el cuerpo de
   letra el bloque entero acompaña sin tocar nada. */
.mdpd-clima__svg {
	display: block;
	width: 2.6em;
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

.mdpd-clima__icono--grande .mdpd-clima__svg {
	width: 4em;
}

.mdpd-clima__pie {
	margin: .9rem 0 0;
	padding-top: .7rem;
	border-top: 1px solid var(--mdpd-clima-borde);
}

/* La atribución es la condición de la licencia de los datos: se ve siempre,
   aunque discreta. */
.mdpd-clima__pie a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.mdpd-clima__ahora {
		gap: .7rem;
	}

	.mdpd-clima__temp {
		font-size: 2em;
	}

	.mdpd-clima__cielo {
		display: none; /* En cinco columnas angostas, la descripción no entra. */
	}
}