/* ==========================================================
   Componenti: ricerca, card, meteo attuale, messaggi, caricamento.
   ========================================================== */

/* ---------- Ricerca città ---------- */

.ricerca {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ricerca__campo {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  border: 1px solid var(--bordo);
  border-radius: 23px;
  background: var(--superficie);
  box-shadow: var(--ombra);
}

.ricerca__lista,
.ricerca__stato {
  position: absolute;
  left: 0; right: 0; top: 52px;
  margin: 0;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
}

.ricerca__lista {
  padding: 6px;
  list-style: none;
  max-height: 60dvh;
  overflow-y: auto;
}

.ricerca__lista li {
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
}

.ricerca__lista li[aria-selected="true"],
.ricerca__lista li:hover { background: var(--superficie-tenue); }

.suggerimento__nome { display: block; font-weight: 600; }
.suggerimento__luogo { display: block; font-size: 0.85rem; color: var(--testo-tenue); }

.ricerca__stato {
  padding: 12px 14px;
  font-size: 0.92rem;
  color: var(--testo-tenue);
}

/* ---------- Pulsanti ---------- */

.pulsante-icona {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: var(--ombra);
  cursor: pointer;
}
.pulsante-icona:disabled { opacity: 0.5; cursor: default; }
.pulsante-icona.in-corso svg { animation: gira 0.9s linear infinite; }

.pulsante {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: var(--accento);
  color: var(--accento-testo);
  font-weight: 600;
  cursor: pointer;
}

@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Card ---------- */

.card {
  min-width: 0;
  padding: var(--spazio);
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
}

.card__titolo {
  margin-bottom: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ---------- Meteo attuale ---------- */

.attuale { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio); }

.attuale__testa {
  padding: 8px 4px 4px;
  text-align: center;
}

.attuale__citta { font-size: 1.5rem; font-weight: 700; }
.attuale__luogo { font-size: 0.9rem; opacity: 0.85; }

.attuale__principale {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.attuale__icona { font-size: clamp(6rem, 34vw, 9rem); align-self: center; margin-right: -6px; }

.attuale__temperatura {
  font-size: clamp(4.5rem, 24vw, 6.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.attuale__descrizione { font-size: 1.15rem; font-weight: 600; }
.attuale__percepita { font-size: 0.95rem; opacity: 0.85; }
.attuale__aggiornato { margin-top: 6px; font-size: 0.8rem; opacity: 0.75; }

.dettagli {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
@media (min-width: 560px) {
  .dettagli { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dettaglio {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--ombra);
}
.dettaglio dt { font-size: 0.78rem; color: var(--testo-tenue); }
.dettaglio dd {
  margin: 2px 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dettaglio__nota {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--testo-tenue);
}

/* ---------- Messaggi (benvenuto, errori, avvisi) ---------- */

.messaggio {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 28px 20px;
  text-align: center;
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra);
}
.messaggio__icona { font-size: 2.6rem; line-height: 1; }
.messaggio__titolo { font-size: 1.15rem; font-weight: 700; }
.messaggio__testo { color: var(--testo-tenue); }

.messaggio--errore { background: var(--errore-sfondo); }
.messaggio--errore .messaggio__titolo { color: var(--errore); }

.avviso {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--errore-sfondo);
  color: var(--errore);
  font-size: 0.9rem;
}

/* ---------- Caricamento (sagome grigie che pulsano) ---------- */

.sagoma {
  border-radius: 14px;
  background: var(--superficie);
  opacity: 0.7;
  animation: pulsa 1.2s ease-in-out infinite alternate;
}
.sagoma--grande { height: 190px; }
.sagoma--griglia { height: 74px; }

@keyframes pulsa { from { opacity: 0.35; } to { opacity: 0.8; } }

.card__nota { margin-bottom: 6px; font-size: 0.85rem; color: var(--testo-tenue); }

/* ---------- Striscia oraria ---------- */

.striscia-oraria {
  display: flex;
  gap: 2px;
  margin: 0 calc(var(--spazio) * -1);
  padding: 4px var(--spazio) 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.ora {
  flex: 0 0 auto;
  min-width: 52px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 4px;
  scroll-snap-align: start;
  font-variant-numeric: tabular-nums;
}
.ora--nuovo-giorno { margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--bordo); }
.ora--nuovo-giorno .ora__quando { font-weight: 700; color: var(--testo); }

.ora__quando { font-size: 0.8rem; color: var(--testo-tenue); }
.ora__icona { font-size: 2rem; }
.ora__temperatura { font-weight: 600; }
.ora__pioggia { font-size: 0.75rem; color: var(--grafico-pioggia); }
.ora__pioggia--zero { color: var(--testo-tenue); opacity: 0.6; }

/* ---------- Previsioni a 7 giorni ---------- */

.giorni { margin: 0; padding: 0; list-style: none; }
.giorno + .giorno { border-top: 1px solid var(--bordo); }
.giorno__testata { font-size: 1rem; font-weight: 400; }

.giorno__riga {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px 44px minmax(130px, 42%);
  align-items: center;
  column-gap: 8px;
  row-gap: 2px;
  padding: 12px 4px;
  border: 0;
  border-radius: 10px;
  background: none;
  text-align: left;
  cursor: pointer;
}
.giorno__riga:hover { background: var(--superficie-tenue); }
.giorno__riga[aria-expanded="true"] .giorno__nome { color: var(--accento); }

.giorno__nome { font-weight: 600; }
.giorno__icona { font-size: 2rem; justify-self: center; }
.giorno__pioggia { font-size: 0.85rem; color: var(--grafico-pioggia); text-align: right; font-variant-numeric: tabular-nums; }

.giorno__temperature {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.giorno__minima { color: var(--testo-tenue); text-align: right; }
.giorno__massima { font-weight: 600; text-align: right; }

.escursione {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--superficie-tenue);
}
.escursione__riempimento {
  position: absolute;
  top: 0; bottom: 0;
  min-width: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--grafico-pioggia), var(--grafico-temperatura));
}

.giorno__extra {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--testo-tenue);
}

.giorno__dettaglio { padding: 4px 4px 16px; }
.giorno__sintesi { margin-bottom: 6px; font-size: 0.9rem; }

/* ---------- Grafici ---------- */

.grafici { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 8px; }

.grafico { margin: 0; --colore-serie: var(--accento); }
.grafico--temperatura { --colore-serie: var(--grafico-temperatura); }
.grafico--pioggia { --colore-serie: var(--grafico-pioggia); }
.grafico--vento { --colore-serie: var(--grafico-vento); }

.grafico__titolo { font-size: 0.9rem; font-weight: 600; }

.grafico__legenda {
  display: flex;
  gap: 14px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
  color: var(--testo-tenue);
}
.grafico__legenda li { display: flex; align-items: center; gap: 6px; }
.grafico__campione { width: 18px; border-top: 2px solid var(--colore-serie); }
.grafico__campione--tratteggio { border-top-style: dashed; }

.grafico__area { position: relative; margin-top: 4px; }

.grafico__svg { display: block; touch-action: pan-y; border-radius: 8px; }

.grafico__griglia { stroke: var(--bordo); stroke-width: 1; }
.grafico__giorno { stroke: var(--testo-tenue); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.grafico__asse { font-size: 11px; fill: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.grafico__asse--forte { font-weight: 700; fill: var(--testo); }
.grafico__vuoto { font-size: 13px; fill: var(--testo-tenue); }

.grafico__linea {
  fill: none;
  stroke: var(--colore-serie);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.grafico__linea--tratteggio { stroke-dasharray: 5 4; stroke-width: 1.5; }
.grafico__barra { fill: var(--colore-serie); }

.grafico__mirino { stroke: var(--testo-tenue); stroke-width: 1; }
.grafico__pallino { fill: var(--colore-serie); stroke: var(--superficie); stroke-width: 2; }
.grafico__sensore { fill: transparent; cursor: crosshair; }

.grafico__fumetto {
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  display: grid;
  padding: 5px 9px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: var(--ombra);
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.grafico__fumetto-ora { color: var(--testo-tenue); }

/* ---------- Nome città con stella dei preferiti ---------- */

.attuale__nome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-left: 44px; /* bilancia la stella, così il nome resta centrato */
}

.stella {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.stella svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.stella[aria-pressed="true"] svg { fill: #f5b301; stroke: #f5b301; }

/* ---------- Barra dei preferiti ---------- */

.preferiti { margin: 0 calc(var(--spazio) * -1) 10px; }
.preferiti ul {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 2px var(--spazio) 4px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.preferiti ul::-webkit-scrollbar { display: none; }

.preferito {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--bordo);
  border-radius: 18px;
  background: var(--superficie);
  white-space: nowrap;
  font-size: 0.9rem;
  cursor: pointer;
}
.preferito[aria-current="true"] {
  border-color: var(--accento);
  background: var(--accento);
  color: var(--accento-testo);
  font-weight: 600;
}

/* ---------- Impostazioni ---------- */

.gruppo-impostazioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio); }

.interruttore {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}
.interruttore input { width: 22px; height: 22px; accent-color: var(--accento); flex: 0 0 auto; }

.elenco-preferiti { margin: 0; padding: 0; list-style: none; }
.elenco-preferiti li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
}
.elenco-preferiti li + li { border-top: 1px solid var(--bordo); }
.elenco-preferiti small { display: block; color: var(--testo-tenue); }

.pulsante--secondario {
  border: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo);
}
.pulsante--pericolo { background: var(--errore); color: var(--superficie); }
.pulsante--piccolo { min-height: 36px; padding: 0 14px; font-size: 0.85rem; }

/* ---------- Notifica e finestra di conferma ---------- */

.notifica {
  position: fixed;
  left: 50%;
  bottom: calc(var(--altezza-barra-schede) + env(safe-area-inset-bottom) + 12px);
  z-index: 40;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(92vw, 520px);
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--testo);
  color: var(--sfondo);
  font-size: 0.9rem;
  box-shadow: var(--ombra);
}

.finestra {
  width: min(92vw, 420px);
  padding: 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--testo);
}
.finestra::backdrop { background: rgba(0, 0, 0, 0.5); }
.finestra h2 { margin-bottom: 8px; font-size: 1.15rem; }
.finestra p { color: var(--testo-tenue); }
.finestra__azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Pioggia nelle prossime 2 ore ---------- */

.pioggia__frase { font-size: 1.1rem; font-weight: 600; }

/* ---------- Rischio temporali (stima dell'app) ---------- */

.temporali { border-left: 6px solid var(--colore-rischio); --colore-rischio: var(--rischio-basso); }
.temporali--2 { --colore-rischio: var(--rischio-moderato); }
.temporali--3 { --colore-rischio: var(--rischio-alto); }

.temporali__titolo { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.temporali__livello { color: var(--colore-rischio); }
.temporali p { margin-top: 6px; }
.temporali__nota { font-size: 0.85rem; color: var(--testo-tenue); }

/* ---------- Allerte ufficiali ---------- */

.allerte p { font-size: 0.92rem; }
.allerte a { font-weight: 600; }

/* ---------- Mappa e radar ---------- */

.mappa-contenuto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio); }

.mappa {
  position: relative;
  z-index: 0;                 /* tiene i livelli di Leaflet sotto le barre dell'app */
  height: min(56dvh, 520px);
  min-height: 300px;
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra);
  background: var(--superficie-tenue);
}
.mappa.leaflet-container { font: inherit; font-size: 0.75rem; }

.punto__principale { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.punto__icona { font-size: 3rem; }
.punto__temperatura { font-size: 2.2rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.punto__principale small { display: block; color: var(--testo-tenue); }
.card > .pulsante { margin-top: 10px; }

.radar__comandi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.radar__comandi input[type="range"] { flex: 1 1 120px; min-width: 0; accent-color: var(--accento); }
.radar__ora { font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--testo-tenue); }

/* ---------- Scheda Aria ---------- */

.gruppo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spazio); }
.scheda__luogo { margin-top: -10px; color: var(--testo-tenue); }
.card__sottotitolo { margin: 14px 0 2px; font-size: 0.95rem; }

.qualita { display: flex; align-items: center; gap: 14px; }
.qualita__numero {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 6px 10px;
  border-radius: 16px;
  border: 3px solid var(--bordo);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.qualita__numero--1 { border-color: var(--aria-1); }
.qualita__numero--2 { border-color: var(--aria-2); }
.qualita__numero--3 { border-color: var(--aria-3); }
.qualita__numero--4 { border-color: var(--aria-4); }
.qualita__numero--5 { border-color: var(--aria-5); }
.qualita__numero--6 { border-color: var(--aria-6); }
.qualita__numero--uv { border-color: var(--grafico-temperatura); }
.qualita__nome { font-size: 1.25rem; font-weight: 700; }
.qualita__consiglio { margin-top: 10px; }

.fascia { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.fascia__pallino {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background: var(--bordo);
}
.fascia__pallino--grande { width: 18px; height: 18px; }
.fascia__pallino--1 { background: var(--aria-1); }
.fascia__pallino--2 { background: var(--aria-2); }
.fascia__pallino--3 { background: var(--aria-3); }
.fascia__pallino--4 { background: var(--aria-4); }
.fascia__pallino--5 { background: var(--aria-5); }
.fascia__pallino--6 { background: var(--aria-6); }
.fascia__pallino--polline-0 { background: transparent; border-color: var(--testo-tenue); }
.fascia__pallino--polline-1 { background: var(--aria-2); }
.fascia__pallino--polline-2 { background: var(--aria-3); }
.fascia__pallino--polline-3 { background: var(--aria-4); }
.fascia__pallino--polline-4 { background: var(--aria-5); }

.inquinanti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.inquinante { padding: 10px 12px; border-radius: 12px; background: var(--superficie-tenue); }
.inquinante dt { font-size: 0.85rem; font-weight: 600; }
.inquinante dt small { margin-left: 6px; font-weight: 400; color: var(--testo-tenue); }
.inquinante dd { margin: 2px 0 0; display: grid; gap: 2px; }
.inquinante__valore { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.pollini { margin: 4px 0 8px; padding: 0; list-style: none; }
.polline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 8px;
  border-radius: 10px;
}
.polline + .polline { border-top: 1px solid var(--bordo); }
.polline--seguito { background: var(--superficie-tenue); border-left: 4px solid var(--accento); }
.polline__nome { font-weight: 600; }
.polline__segno {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--accento);
  color: var(--accento-testo);
  font-size: 0.72rem;
  font-weight: 600;
}
.polline__valori { grid-column: 1 / -1; font-size: 0.8rem; color: var(--testo-tenue); }

/* ---------- Sole e luna ---------- */

.dettagli--due { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.dettaglio--piatto { background: var(--superficie-tenue); box-shadow: none; }
.dettaglio--piatto dd { font-size: 1.05rem; }
.luna__icona { font-size: 3rem; line-height: 1; }

/* ---------- Consigli pratici ---------- */

.consigli { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.consiglio { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.consiglio__icona { font-size: 1.5rem; line-height: 1.2; text-align: center; }

.qualita__numero--fiume { border-color: var(--grafico-pioggia); }

/* ---------- Storico e affidabilità ---------- */

.qualita__numero--storico { border-color: var(--accento); }

.affidabilita { margin: 0 0 8px; padding: 0; list-style: none; }
.affidabilita__giorno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 4px;
}
.affidabilita__giorno + .affidabilita__giorno { border-top: 1px solid var(--bordo); }
.affidabilita__livello { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; }
.affidabilita__dettaglio { grid-column: 1 / -1; font-size: 0.8rem; color: var(--testo-tenue); }

.tacche { display: inline-flex; align-items: flex-end; gap: 3px; }
.tacca { width: 6px; border-radius: 2px; border: 1px solid var(--testo-tenue); }
.tacca:nth-child(1) { height: 8px; }
.tacca:nth-child(2) { height: 13px; }
.tacca:nth-child(3) { height: 18px; }
.tacca--piena { background: var(--accento); border-color: var(--accento); }

/* ==========================================================
   Fase 10 — rifiniture del design
   ========================================================== */

/* Icone meteo disegnate: la grandezza segue il font-size del contesto */
.icona-meteo { width: 1em; height: 1em; flex: 0 0 auto; display: block; }

/* ---------- Meteo attuale: testo a sinistra, grande icona a destra ---------- */

.attuale__testa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 4px;
  padding: 10px 4px 6px;
  text-align: left;
}
.attuale__nome { justify-content: flex-start; padding-left: 0; margin-left: 0; }
.attuale__citta { font-size: 1.7rem; letter-spacing: -0.015em; line-height: 1.15; overflow-wrap: anywhere; }
.attuale__luogo { opacity: 0.9; }
.attuale__temperatura {
  margin: 2px 0 0 -4px;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: clamp(5.5rem, 30vw, 8rem);
  font-weight: 200;
  line-height: 0.95;
}
.attuale__descrizione { margin-top: 4px; font-size: 1.25rem; }
.attuale__percepita, .attuale__aggiornato { opacity: 0.9; }

/* ---------- Indice della scheda Altro ---------- */

.indice {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--spazio) * -1);
  padding: 2px var(--spazio) 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.indice::-webkit-scrollbar { display: none; }
.indice button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--bordo);
  border-radius: 19px;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- Barra delle schede: un po' di respiro su schermi grandi ---------- */

@media (min-width: 760px) {
  .barra-schede {
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(560px, 92vw);
    padding-bottom: 0;
    border: 1px solid var(--bordo);
    border-radius: 24px;
    box-shadow: var(--ombra);
    overflow: hidden;
  }
  main { padding-bottom: calc(var(--altezza-barra-schede) + 48px); }
  .notifica { bottom: calc(var(--altezza-barra-schede) + 30px); }
}

/* ==========================================================
   Revisione UI — accessibilità e tocco
   ========================================================== */

/* Bersagli al tocco di almeno 44 px */
.preferito, .indice button { min-height: 44px; padding: 0 16px; border-radius: 22px; }
.pulsante--piccolo { min-height: 44px; }
.radar__comandi input[type="range"] { min-height: 44px; }
.mappa.leaflet-container .leaflet-bar a { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }

/* Nessun testo sotto i 12 px */
.barra-schede a { font-size: 0.75rem; }
.polline__segno, .inquinante dt small { font-size: 0.75rem; }
.grafico__asse { font-size: 12px; }

/* Contrasto: niente testo reso più chiaro con la trasparenza */
.ora__pioggia--zero { opacity: 1; }
.ricerca__campo::placeholder { color: var(--testo-tenue); opacity: 1; }

/* Simboli a tratto */
.simbolo { width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.consiglio__icona { margin-top: 1px; color: var(--accento); }
.temporali__simbolo { color: var(--colore-rischio); }
.messaggio__icona .simbolo, .messaggio__icona .icona-meteo { width: 48px; height: 48px; }
.messaggio--errore .messaggio__icona { color: var(--errore); }
.luna__icona { font-size: 3.4rem; }

/* Risposta visiva immediata al tocco (senza spostare il resto della pagina) */
button, .barra-schede a { transition: opacity 0.12s ease, transform 0.12s ease, background-color 0.12s ease; }
button:active:not(:disabled), .barra-schede a:active { opacity: 0.7; }
.pulsante:active, .pulsante-icona:active:not(:disabled), .preferito:active, .indice button:active { transform: scale(0.97); }
.giorno__riga:active, .ricerca__lista li:active { background: var(--superficie-tenue); }

/* Con la tastiera, l'elemento a fuoco non finisce sotto le barre fisse */
html {
  scroll-padding-top: 88px;
  scroll-padding-bottom: calc(var(--altezza-barra-schede) + 24px);
}

/* Telefono in orizzontale: il contenuto non va sotto la tacca */
main {
  padding-left: max(var(--spazio), env(safe-area-inset-left));
  padding-right: max(var(--spazio), env(safe-area-inset-right));
}

/* ==========================================================
   Radar: mappa e comandi in un unico blocco
   ========================================================== */

a.pulsante { display: inline-flex; align-items: center; text-decoration: none; }
.collegamento-radar { margin-top: 12px; }

.mappa-cornice {
  border-radius: var(--raggio);
  overflow: hidden;
  box-shadow: var(--ombra);
  background: var(--superficie);
  color: var(--testo);
}
.mappa-cornice__mappa { position: relative; }
.mappa-cornice .mappa {
  height: min(52dvh, 520px);
  min-height: 300px;
  border-radius: 0;
  box-shadow: none;
}

/* Interruttore del radar, sopra la mappa in alto a destra */
.radar-interruttore {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 800;                       /* sopra i livelli di Leaflet */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-radius: 22px;
  background: #ffffff;
  color: #14202e;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.radar-interruttore__spia {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #536274;
}
.radar-interruttore[aria-pressed="true"] { background: #14202e; color: #ffffff; border-color: #14202e; }
.radar-interruttore[aria-pressed="true"] .radar-interruttore__spia { background: #4ad0e6; border-color: #4ad0e6; }

/* Barra dei comandi sotto la mappa */
.radar-barra { padding: 10px 12px 12px; border-top: 1px solid var(--bordo); }
.radar-comandi { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }

.radar-avvia {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accento);
  color: var(--accento-testo);
  cursor: pointer;
}
.radar-avvia svg { width: 26px; height: 26px; }

.radar-tempo input[type="range"] {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--accento);
}
.radar-tempo__estremi {
  display: flex;
  justify-content: space-between;
  margin-top: -8px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.radar-ora { display: grid; justify-items: end; min-width: 74px; font-variant-numeric: tabular-nums; }
.radar-ora strong { font-size: 1.35rem; line-height: 1.1; }
.radar-ora small { font-size: 0.75rem; color: var(--testo-tenue); }

.radar-legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--testo-tenue);
}
/* Gli stessi colori usati dalle immagini radar, dal più debole al più forte */
.radar-legenda__scala {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 5px;
  border: 1px solid var(--bordo);
  background: linear-gradient(90deg,
    #cdbf93 0%, #88d4e4 14%, #18a4e0 30%, #0070b0 46%, #004068 62%,
    #f0e000 70%, #f09000 85%, #f04000 100%);
}

.radar-stato { padding: 10px 12px; font-size: 0.9rem; color: var(--testo-tenue); border-top: 1px solid var(--bordo); }

/* Passaggio morbido da un'immagine radar alla successiva */
.radar-strato { transition: opacity 0.2s linear; }

/* ---------- Avviso offline e pulsanti accanto al nome della città ---------- */

.avviso--offline { margin-bottom: 12px; font-weight: 600; }
.attuale__nome .stella + .stella { margin-left: -6px; }
.stella:disabled { opacity: 0.5; }
.stella .simbolo { width: 26px; height: 26px; }

/* ==========================================================
   Stile "Strumento": riquadri affiancati, densità maggiore
   ========================================================== */

.attuale { gap: 8px; }
.scheda, .gruppo, .mappa-contenuto, .gruppo-impostazioni { gap: 8px; }

.card { padding: 12px; border-radius: var(--raggio); }
.card__titolo { margin-bottom: 6px; font-size: 0.82rem; font-weight: 600; color: var(--testo-tenue); letter-spacing: 0; }
.card__nota { font-size: 0.8rem; }

/* Intestazione della scheda Oggi */
.attuale__testa { display: block; padding: 2px 2px 4px; animation: none; }
.attuale__nome { justify-content: flex-start; gap: 2px; padding: 0; }
.attuale__citta { font-size: 1.35rem; letter-spacing: -0.01em; }
.attuale__luogo { margin-top: -4px; font-size: 0.82rem; color: var(--testo-tenue); opacity: 1; }
.stella { width: 44px; height: 44px; }
.stella svg, .stella .simbolo { width: 22px; height: 22px; }

/* Griglia a riquadri: 3 colonne */
.riquadri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }

.riquadro {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--raggio);
}
.riquadro__etichetta { font-size: 0.75rem; color: var(--testo-tenue); }
.riquadro__valore { font-size: 1.25rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.riquadro__nota { font-size: 0.75rem; font-weight: 400; color: var(--testo-tenue); }

.riquadro--temperatura { position: relative; grid-column: span 2; grid-row: span 2; padding: 12px 14px; }
.riquadro--temperatura:only-child { grid-column: span 3; }
.riquadro__icona { position: absolute; top: 10px; right: 10px; font-size: 3.4rem; }
.attuale__temperatura {
  margin: 0 0 0 -3px;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  font-size: clamp(4.6rem, 22vw, 6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
}
.attuale__descrizione { margin-top: 0; font-size: 1rem; font-weight: 600; color: var(--accento); }

/* Pioggia a 2 ore, compatta */
.pioggia__frase { font-size: 1rem; }

/* Strisce orarie più fitte */
.ora { min-width: 46px; gap: 2px; padding: 4px 2px; }
.ora__icona { font-size: 1.7rem; }
.ora__pioggia { color: var(--accento); }
.ora__pioggia--zero { color: var(--testo-tenue); }

/* Anteprima del radar nella scheda Oggi */
.anteprima-radar { display: block; padding: 0; overflow: hidden; text-decoration: none; }
.anteprima-radar__vista { position: relative; height: 150px; overflow: hidden; background: var(--superficie-tenue); }
.anteprima-radar__mosaico { position: absolute; width: 768px; height: 768px; }
.anteprima-radar__mosaico img { position: absolute; width: 256px; height: 256px; }
.anteprima-radar__pioggia { opacity: 0.8; }
.anteprima-radar__punto {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accento); border: 2px solid #ffffff;
}
.anteprima-radar__titolo, .anteprima-radar__fonti {
  position: absolute;
  padding: 3px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  color: var(--testo);
}
.anteprima-radar__titolo { left: 8px; top: 8px; font-size: 0.82rem; font-weight: 600; }
.anteprima-radar__orario { font-weight: 400; color: var(--testo-tenue); }
.anteprima-radar__fonti { right: 6px; bottom: 6px; font-size: 0.75rem; color: var(--testo-tenue); }
.anteprima-radar__frase { padding: 10px 12px; font-size: 0.92rem; }

/* Consigli e giorni: icone con il colore d'accento */
.consigli { gap: 10px; }
.consiglio p { font-size: 0.92rem; }
.giorno__pioggia { color: var(--accento); }
.escursione__riempimento { background: linear-gradient(90deg, var(--grafico-pioggia), var(--grafico-temperatura)); }

/* Barra delle schede */
.barra-schede { background: var(--fondo); border-top: 1px solid var(--bordo); }
.barra-schede a[aria-current="page"] { color: var(--accento); }

/* Mappa e radar */
.mappa-cornice { border: 1px solid var(--bordo); box-shadow: none; }
.radar-interruttore[aria-pressed="true"] .radar-interruttore__spia { background: #37d6c8; border-color: #37d6c8; }

/* Titoli di scheda più contenuti */
.scheda__titolo { font-size: 1.25rem; }
.qualita__nome { font-size: 1.1rem; }
.qualita__numero { font-size: 1.9rem; border-width: 2px; border-radius: 12px; }

/* ==========================================================
   Scheda Altro: menu e pagine separate
   ========================================================== */

.menu-altro { padding: 4px 12px; }
.menu-altro ul { margin: 0; padding: 0; list-style: none; }
.menu-altro li + li { border-top: 1px solid var(--bordo); }
.menu-altro a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 8px 2px;
  color: var(--testo);
  text-decoration: none;
}
.menu-altro a:active { opacity: 0.7; }
.menu-altro .simbolo { color: var(--accento); }
.menu-altro__testo { display: grid; }
.menu-altro__testo strong { font-size: 1rem; font-weight: 600; }
.menu-altro__testo small { font-size: 0.8rem; color: var(--testo-tenue); }
.menu-altro__freccia { width: 20px; height: 20px; color: var(--testo-tenue); }

.pagina-altro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }

/* "‹ Altro": torna al menu */
.ritorno {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  padding-right: 12px;
  margin-left: -6px;
  color: var(--accento);
  font-weight: 600;
  text-decoration: none;
}
.ritorno svg { width: 22px; height: 22px; }

/* Pagina senza contenuto (nessuna città, o sezione nascosta dalle impostazioni) */
.pagina-altro > .gruppo:empty::after {
  content: "Niente da mostrare qui: scegli una città, oppure riattiva questa sezione nelle impostazioni.";
  color: var(--testo-tenue);
}

/* ==========================================================
   Indicatori da cruscotto e layout per schermi larghi
   ========================================================== */

/* ---------- Scala a fasce con segnalino ---------- */
.scala { position: relative; margin: 12px 0 2px; padding-top: 8px; }
.scala__fasce { display: flex; gap: 2px; height: 8px; }
.scala__fasce span { flex: 1; border-radius: 2px; }
.scala__fasce span:first-child { border-radius: 4px 2px 2px 4px; }
.scala__fasce span:last-child { border-radius: 2px 4px 4px 2px; }
.scala__segnalino {
  position: absolute;
  top: 3px;
  width: 6px; height: 18px;
  margin-left: -3px;
  border-radius: 3px;
  background: var(--testo);
  border: 2px solid var(--superficie);
  box-sizing: content-box;
}
.scala__numeri { display: flex; margin-top: 4px; font-size: 0.75rem; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.scala__numeri span { flex: 1; }

/* ---------- Livello a tacche (pollini) ---------- */
.livello { display: inline-flex; gap: 2px; }
.livello__tacca { width: 10px; height: 8px; border-radius: 2px; background: var(--bordo); }
.livello__tacca--1 { background: var(--aria-2); }
.livello__tacca--2 { background: var(--aria-3); }
.livello__tacca--3 { background: var(--aria-4); }
.livello__tacca--4 { background: var(--aria-5); }

/* ---------- Mini-andamento nel riquadro "Adesso" ---------- */
.riquadro__andamento { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bordo); }
.mini-andamento { width: 100%; height: 36px; display: block; }
.mini-andamento__linea { fill: none; stroke: var(--grafico-temperatura); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mini-andamento__area { fill: var(--grafico-temperatura); opacity: 0.14; }

/* ---------- Riepilogo della settimana ---------- */
.riquadri--riepilogo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.riquadro__nota::first-letter { text-transform: none; }

/* ---------- Misure incolonnate nelle righe dei giorni ---------- */
.giorno__extra { display: grid; grid-template-columns: 1.1fr 1.4fr 0.6fr 0.9fr; gap: 8px; margin-top: 2px; color: var(--testo); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.misura { display: grid; }
.misura__etichetta { font-size: 0.75rem; color: var(--testo-tenue); }

/* ---------- Barre di confronto (storico) ---------- */
.confronto { display: grid; gap: 8px; margin: 6px 0 4px; }
.confronto__riga { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 10px; }
.confronto dt { font-size: 0.85rem; color: var(--testo-tenue); }
.confronto dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 8px; }
.confronto__binario { height: 12px; border-radius: 4px; background: var(--superficie-tenue); overflow: hidden; }
.confronto__barra { display: block; height: 100%; border-radius: 4px; background: var(--testo-tenue); }
.confronto__barra--evidenza { background: var(--accento); }
.confronto__valore { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Arco del sole ---------- */
.arco-sole { display: block; width: 100%; max-width: 420px; margin: 0 auto 4px; }
.arco-sole__percorso { fill: none; stroke: var(--bordo); stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
.arco-sole__fatto { fill: none; stroke: var(--grafico-temperatura); stroke-width: 3; stroke-linecap: round; }
.arco-sole__orizzonte { stroke: var(--testo-tenue); stroke-width: 1; }
.arco-sole__sole { fill: #ffc533; stroke: var(--superficie); stroke-width: 3; }
.arco-sole__sole--notte { fill: var(--testo-tenue); }
.arco-sole__testo { font-size: 12px; fill: var(--testo-tenue); font-variant-numeric: tabular-nums; }

/* ---------- Scheda Oggi: una colonna sul telefono, due su schermi larghi ---------- */
.attuale__colonna { display: contents; }

@media (min-width: 900px) {
  :root { --larghezza-massima: 1080px; }

  .attuale { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .attuale > .avviso, .attuale > .attuale__testa { grid-column: 1 / -1; }
  .attuale__colonna { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
  .anteprima-radar__vista { height: 220px; }

  /* Previsioni: settimana e affidabilità affiancate, grafici in riga */
  #scheda-previsioni { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #scheda-previsioni > h1, #andamento-contenuto { grid-column: 1 / -1; }
  .riquadri--riepilogo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #andamento-contenuto .grafici { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Aria: qualità dell'aria e pollini affiancati */
  #aria-contenuto > .gruppo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #aria-contenuto > .gruppo > .avviso, #aria-contenuto > .gruppo > .messaggio { grid-column: 1 / -1; }

  /* Altro: menu e pagine restano in una colonna comoda da leggere */
  #scheda-altro { max-width: 720px; }
  .mappa-cornice .mappa { height: min(62dvh, 640px); }
}

/* ==========================================================
   Stima radar della prossima ora
   ========================================================== */

/* Sei barrette, una ogni 10 minuti: l'altezza dice quanta pioggia è stimata sulla città */
.prossima-ora { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 4px; padding: 0; list-style: none; }
.prossima-ora__passo { display: grid; gap: 4px; justify-items: stretch; text-align: center; }
.prossima-ora__barra { align-self: end; height: 4px; border-radius: 3px; background: var(--bordo); }
.prossima-ora__passo { grid-template-rows: 34px auto; }
.prossima-ora__barra--1 { height: 10px; background: #cdbf93; }
.prossima-ora__barra--2 { height: 18px; background: #6cc4e0; }
.prossima-ora__barra--3 { height: 26px; background: #1a86c8; }
.prossima-ora__barra--4 { height: 34px; background: #f0a000; }
.prossima-ora__quando { font-size: 0.75rem; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }

/* Anteprima nella scheda Oggi */
.anteprima-radar__frase { padding: 10px 12px 0; }
.anteprima-radar__stima { padding: 6px 12px 10px; }
.anteprima-radar__frase:last-child, .anteprima-radar__frase:has(+ [hidden]) { padding-bottom: 10px; }
.anteprima-radar__previsione { font-size: 0.92rem; font-weight: 600; }
.etichetta-stima {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid var(--accento);
  color: var(--accento);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Linea del tempo del radar: "adesso" sta dove finiscono le misure e iniziano le stime */
.radar-tempo__estremi { position: relative; }
.radar-tempo__adesso--in-mezzo { position: absolute; left: var(--posizione); transform: translateX(-50%); color: var(--testo); font-weight: 600; }
.radar-tempo__futuro { margin-left: auto; color: var(--accento); }
.radar-ora--stima strong, .radar-ora--stima small { color: var(--accento); }