/* El tiempo (D-146): las tres cajas sobre «Hoy» y la banda de avisos de AEMET. */
/* D-219: cajas bajas, el dibujo al lado de las dos temperaturas. */
section.tiempo { padding: 0 var(--s-4) var(--s-2); }
.tiempo .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.tiempo .tres > div { display: grid; grid-template-areas: "d d" "i t" "i m"; column-gap: 6px; align-items: center; justify-content: center; padding: 6px 4px; border: 1px solid var(--linea); border-radius: var(--r-md); background: var(--papel); line-height: 1.15; }
.tiempo small { grid-area: d; font-size: 1rem; text-align: center; color: var(--tinta-suave); }
.tiempo b { grid-area: t; font-size: 1.2rem; }
.tiempo i { grid-area: m; font-style: normal; font-size: 1rem; color: var(--tinta-suave); }
.tiempo span { grid-area: i; font-size: 1.6rem; line-height: 1; overflow-wrap: anywhere; }
.tiempo .tiempo-pie { margin-top: 6px; text-align: right; }
.tiempo-pie a { color: var(--casa); font-weight: 700; }
.tiempo p { margin: var(--s-2) 0 0; font-size: 1rem; }
.tiempo .tiempo-aviso { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--ambar); color: var(--tinta); }
.tiempo-botones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-2); }
.aviso-tiempo { padding: var(--s-4); line-height: 1.4; color: var(--tinta); }
.aviso-tiempo h2 { margin: 0 0 var(--s-1); font-size: 1.375rem; line-height: 1.25; }
.aviso-tiempo p { margin: 0 0 var(--s-2); font-size: 1.0625rem; }
.aviso-tiempo small { display: block; font-size: 1rem; }
.aviso-tiempo summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; font-size: 1.0625rem; cursor: pointer; }
.aviso-tiempo details p:first-of-type { margin-top: var(--s-2); }
.aviso-naranja { background: #F08A00; }
.aviso-rojo { background: var(--brasa); color: var(--papel); }
.tiempo-compartir, .tiempo-botones a { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s-2); padding: 0 18px; border-radius: 999px; background: var(--casa); color: var(--papel) !important; font-weight: 700; text-decoration: none; }
.tiempo-botones a { display: flex; justify-content: center; margin-top: 0; padding: 0 8px; font-size: .9375rem; white-space: nowrap; }