/* ============================================================
   ADRANO OGGI — foglio di stile
   Mobile-first, ma pienamente usabile da browser desktop.
   Vincoli: contrasto AA, target >=44px, nessuna informazione
   veicolata dal solo colore.
   ============================================================ */

:root{
  --bg:#f6f4f0;
  --surface:#ffffff;
  --surface-2:#fbfaf8;
  --ink:#1a1a18;
  --ink-2:#3d3a35;
  --muted:#605c55;
  --line:#e5e1d9;
  --line-2:#d5d0c6;

  --primary:#1c5b7d;
  --primary-dark:#164a66;
  --primary-soft:#e8f0f5;

  --urgente:#a1301d;      --urgente-bg:#fbeae7;   --urgente-line:#e8c4bc;
  --importante:#8a5410;   --importante-bg:#fcf2e1; --importante-line:#ecd9b4;
  --info:#1c5b7d;         --info-bg:#eaf1f6;      --info-line:#c5d8e4;

  --ok:#2f6b48; --ok-bg:#e9f2ec;

  /* Il fondo del campo quando ci si scrive dentro. Era scritto a mano come
     #fff in cinque punti: di notte diventava bianco mentre il testo è chiaro,
     e si scriveva bianco su bianco. Un colore fisso in un'app con due temi è
     sempre un bug che aspetta il tramonto. */
  --campo-fuoco:#ffffff;

  --r-sm:8px; --r:12px; --r-lg:18px;
  --shadow:0 1px 2px rgba(26,26,24,.05), 0 6px 20px -12px rgba(26,26,24,.22);
  --nav-h:66px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* color-scheme dice al browser di che colore disegnare i controlli suoi
   (campi, menu a tendina, barre di scorrimento). Segue la scelta, non il
   sistema: altrimenti in tema chiaro forzato su telefono scuro si finisce
   con testo bianco dentro un campo bianco — è già successo. */
:root[data-tema="chiaro"]{color-scheme:light}
:root[data-tema="scuro"]{color-scheme:dark}
body{
  margin:0; background:var(--bg); color:var(--ink);
  /* ⚠️ `rem` e non `px`, e non è pedanteria. Con i pixel, chi ingrandisce il
     carattere dalle impostazioni del telefono non vede crescere questo, ma
     vede crescere tutto il resto — che è in `rem`. Risultato misurato con il
     carattere di sistema a 24px: il NOME della farmacia resta 17, il suo
     indirizzo diventa 20 e il numero di telefono 24. La gerarchia si rovescia,
     e si rovescia addosso proprio a chi ha alzato il carattere perché fatica a
     leggere. 1,0625rem fa 17px quando il predefinito è 16. */
  font-family:var(--font); font-size:1.0625rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.015em}
p{margin:0}
button{font:inherit; color:inherit}
svg{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* `.skip` tolto l'11-09-2026 insieme al suo link: era il doppione vecchio di
   `.salta` (più in basso in questo file), e i due si sono ignorati per mesi
   solo perché avevano due nomi diversi. */

:focus-visible{outline:3px solid var(--primary); outline-offset:2px; border-radius:4px}

/* ---------- boot ---------- */
.boot{min-height:100dvh; display:grid; place-content:center; gap:14px; justify-items:center; color:var(--muted)}
.boot-dot{width:26px;height:26px;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--primary);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important} }

/* ============ ONBOARDING ============ */
.ob{min-height:100dvh; display:flex; flex-direction:column; background:var(--surface)}
.ob-body{flex:1; padding:32px 22px 20px; max-width:560px; margin:0 auto; width:100%}
.ob-foot{
  padding:16px 22px calc(20px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto; width:100%;
  /* Resta attaccato in basso: con ventuno zone in elenco, "Continua" finiva
     sotto la piega e chi aveva appena scelto la sua contrada non vedeva
     nessuna conferma di poter proseguire. */
  position:sticky; bottom:0; z-index:5;
  background:linear-gradient(to top, var(--surface) 62%, transparent);
}
.ob-steps{display:flex; gap:6px; margin-bottom:28px}
.ob-steps span{height:4px; flex:1; background:var(--line); border-radius:2px}
.ob-steps span.on{background:var(--primary)}
/* Sta sulla prima schermata apposta: chi installa deve sapere prima di
   iscriversi che questo non e il Comune. Discreta, ma leggibile — non un
   grigio su grigio che nessuno riesce a leggere. */
.ob-nota{margin-top:22px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.5; color:var(--muted)}
.ob h1{font-size:1.75rem; margin-bottom:12px}
.ob .lead{color:var(--muted); font-size:1.02rem; margin-bottom:26px}
.ob-mark{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  font-weight:700; letter-spacing:-.02em; font-size:1.05rem; color:var(--primary);
}
.ob-mark svg{width:30px;height:30px;stroke-width:1.7}

.punti{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:14px}
.punti li{display:flex; gap:13px; align-items:flex-start}
.punti svg{width:22px;height:22px;flex:none;margin-top:3px;color:var(--primary)}
.punti b{display:block; font-weight:620}
.punti span{color:var(--muted); font-size:.95rem}

/* ---------- ricerca zona ---------- */
.campo{position:relative; margin-bottom:8px}
.campo svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); width:20px;height:20px; color:var(--muted); pointer-events:none}
.campo input{
  width:100%; padding:15px 16px 15px 46px; font:inherit; font-size:1.05rem;
  border:1.5px solid var(--line-2); border-radius:var(--r); background:var(--surface-2);
  color:var(--ink); min-height:54px;
}
.campo input:focus{background:var(--campo-fuoco); color:var(--ink); border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft)}

.risultati{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:2px}
.risultati li button{
  width:100%; text-align:left; background:none; border:0; padding:13px 14px;
  border-radius:var(--r-sm); cursor:pointer; min-height:52px; display:block;
}
.risultati li button:hover{background:var(--surface-2)}
.risultati b{display:block; font-weight:600}
.risultati small{color:var(--muted)}
/* Via vera di cui non conosciamo ancora la zona: si distingue, perché toccarla
   non sceglie niente — porta a scegliere. */
.risultati li button.senza-zona{border-left:3px solid var(--line-2)}
.risultati li button.senza-zona small{font-style:italic}

.zone-lista{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.zone-lista button{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; min-height:56px; background:var(--surface-2);
  border:1.5px solid var(--line); border-radius:var(--r); cursor:pointer; text-align:left;
}
.zone-lista button:hover{border-color:var(--line-2); background:var(--campo-fuoco)}
.zone-lista button[aria-pressed="true"]{border-color:var(--primary); background:var(--primary-soft)}
.zone-lista .tipo{font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.zone-lista svg{width:20px;height:20px;color:var(--primary);opacity:0}
.zone-lista button[aria-pressed="true"] svg{opacity:1}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:54px; padding:14px 22px; font-size:1.05rem; font-weight:620;
  border:0; border-radius:var(--r); cursor:pointer; text-decoration:none;
  background:var(--primary); color:#fff; transition:background .15s;
}
.btn:hover{background:var(--primary-dark)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-2{background:transparent; color:var(--primary); border:1.5px solid var(--line-2)}
.btn-2:hover{background:var(--surface-2)}
.btn-3{background:none;color:var(--muted);min-height:46px;font-weight:500;font-size:.95rem}
.btn-3:hover{background:var(--surface-2);color:var(--ink)}

/* ---------- avviso iOS ---------- */
.ios-box{background:var(--importante-bg); border:1px solid var(--importante-line); border-radius:var(--r); padding:16px 18px; margin-bottom:20px}
.ios-box h2{font-size:1rem; margin-bottom:8px; color:var(--importante)}
.ios-box ol{margin:0; padding-left:20px; font-size:.95rem; color:var(--ink-2)}
.ios-box li{margin-bottom:5px}

/* ============ SHELL APP ============ */
.shell{min-height:100dvh; display:flex; flex-direction:column}
.top{
  position:sticky; top:0; z-index:20; background:rgba(246,244,240,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top);
}
.top-in{display:flex; align-items:center; gap:12px; padding:12px 18px; max-width:900px; margin:0 auto}
.top .marchio{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;color:var(--primary)}
.top .marchio svg{width:24px;height:24px}
.top .luogo{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:1px solid var(--line-2); border-radius:100px;
  padding:8px 14px; font-size:.88rem; cursor:pointer; min-height:44px; color:var(--ink-2);
}
.top .luogo:hover{border-color:var(--primary); color:var(--primary)}
/* Testata stretta (320 px): il marchio non va a capo e il nome della zona si accorcia coi puntini. */
.top .marchio{white-space:nowrap; flex:none}
.top .luogo{min-width:0; white-space:nowrap}
.top .luogo-nome{overflow:hidden; text-overflow:ellipsis; min-width:0}
@media (max-width:360px){
  .top-in{padding:12px 12px; gap:8px}
  .top .luogo{padding:8px 12px}
}
.top .luogo svg{width:15px;height:15px;color:var(--primary)}

main{flex:1; width:100%; max-width:900px; margin:0 auto; padding:20px 18px calc(var(--nav-h) + 28px)}
.sezione-tit{font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700; margin:26px 0 11px}
.sezione-tit:first-child{margin-top:4px}

/* ---------- card avviso ---------- */
.avviso{
  display:block; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-left:5px solid var(--line-2);
  border-radius:var(--r); padding:15px 17px; margin-bottom:11px;
  cursor:pointer; box-shadow:var(--shadow); position:relative;
}
.avviso:hover{border-color:var(--line-2)}
.avviso.g-urgente{border-left-color:var(--urgente)}
.avviso.g-importante{border-left-color:var(--importante)}
.avviso.g-info{border-left-color:var(--info)}

.avviso-cima{display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; padding:4px 9px; border-radius:100px;
  border:1px solid transparent;
}
.chip svg{width:13px;height:13px;stroke-width:2.2}
.g-urgente .chip{background:var(--urgente-bg); color:var(--urgente); border-color:var(--urgente-line)}
.g-importante .chip{background:var(--importante-bg); color:var(--importante); border-color:var(--importante-line)}
.g-info .chip{background:var(--info-bg); color:var(--info); border-color:var(--info-line)}
.categoria{font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:5px}
.categoria svg{width:15px;height:15px}

.avviso h3{font-size:1.06rem; margin-bottom:7px; letter-spacing:-.01em}
.avviso .quando{font-size:.88rem; color:var(--muted); display:flex; align-items:center; gap:6px}
.avviso .quando svg{width:15px;height:15px; flex:none}
.avviso .zone{font-size:.83rem; color:var(--muted); margin-top:6px; display:flex; gap:6px; align-items:flex-start}
.avviso .zone svg{width:14px;height:14px;flex:none;margin-top:3px}

.stato-vuoto{
  text-align:center; padding:38px 22px; background:var(--surface);
  border:1px dashed var(--line-2); border-radius:var(--r-lg); color:var(--muted);
}
.stato-vuoto svg{width:36px;height:36px; color:var(--ok); margin-bottom:12px}
.stato-vuoto b{display:block; color:var(--ink); font-size:1.05rem; margin-bottom:5px}
.stato-vuoto span{font-size:.94rem}

/* ---------- riquadro rifiuti ---------- */
.rifiuti-oggi{
  display:flex; align-items:center; gap:14px; background:var(--ok-bg);
  border:1px solid #cadfd2; border-radius:var(--r); padding:14px 17px; margin-bottom:11px;
}
.rifiuti-oggi svg{width:26px;height:26px;color:var(--ok);flex:none}
.rifiuti-oggi b{display:block; font-size:1rem}
.rifiuti-oggi span{font-size:.88rem; color:var(--muted)}

table.cal{width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
table.cal th,table.cal td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line)}
table.cal tr:last-child td{border-bottom:0}
table.cal th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--surface-2)}
table.cal tr.oggi td{background:var(--ok-bg); font-weight:620}
table.cal td:first-child{width:38%; color:var(--muted)}
table.cal tr.oggi td:first-child{color:var(--ok)}

/* ---------- dettaglio ---------- */
.det-top{display:flex; align-items:center; gap:6px; margin-bottom:16px}
.btn-back{
  display:inline-flex; align-items:center; gap:6px; background:none; border:0;
  color:var(--primary); cursor:pointer; padding:10px 12px 10px 6px; min-height:44px;
  font-weight:560; border-radius:var(--r-sm);
}
.btn-back:hover{background:var(--surface-2)}
.det{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow)}
.det.g-urgente{border-top:5px solid var(--urgente)}
.det.g-importante{border-top:5px solid var(--importante)}
.det.g-info{border-top:5px solid var(--info)}
.det h1{font-size:1.4rem; margin:11px 0 15px}
.det .corpo{color:var(--ink-2); white-space:pre-wrap; margin-bottom:20px}
.meta{display:grid; gap:11px; border-top:1px solid var(--line); padding-top:17px; font-size:.92rem}
.meta div{display:flex; gap:10px}
.meta dt{color:var(--muted); flex:0 0 90px; font-size:.85rem}
.meta dd{margin:0; font-weight:520}
/* Avviso annullato: resta, ma si vede da lontano che non vale più. Il colore
   non basta da solo — c'è anche la parola "Annullato" nel chip.

   ⚠️ NIENTE `opacity`, E QUESTA E' LA SECONDA VOLTA CHE LO SCRIVO IN QUESTO
      FILE (l'altra è su `.riga.spenta`). Qui c'era `opacity:.62` sull'annullato
      e `.72` sul concluso, e l'opacità **abbassa il contrasto davvero mentre il
      controllo di accessibilità non se ne accorge**: legge i colori dichiarati,
      non i pixel. Misurato sulla tavolozza che vince (tema.css, caricato dopo):
      la riga della data passa da 6,26:1 dichiarato a circa 3,37:1 reale —
      sotto la soglia di 4,5, su una scheda che uno apre proprio per capire se
      quel guasto all'acqua vale ancora.
      Si spegne coi colori dichiarati: così il controllo li vede, e chi legge
      pure. La parola nel chip e il barrato restano, perché il grigio da solo
      non è un'informazione. */
.avviso.annullato{background:var(--surface-2); border-left-color:var(--line-2)}
.avviso.annullato h3{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px}
.avviso.annullato .quando, .avviso.annullato .zone{color:var(--muted)}
/* Concluso non e' annullato: e' finito da solo, non e' stato smentito. Si
   spegne, ma non si sbarra — sbarrarlo direbbe che non e' mai valso. */
.avviso.concluso{background:var(--surface-2); border-left-color:var(--line-2)}
.avviso.concluso h3{color:var(--ink-2)}
.annullo{
  display:flex; gap:11px; align-items:flex-start; margin:14px 0 4px;
  background:var(--urgente-bg); border:1px solid var(--urgente-line);
  border-radius:var(--r-sm); padding:13px 15px;
}
.annullo svg{width:20px;height:20px;color:var(--urgente);flex:none;margin-top:2px}
.annullo b{display:block; color:var(--urgente)}
.annullo span{font-size:.92rem; color:var(--ink-2)}
.corretto{margin-top:12px; font-size:.88rem; color:var(--muted); font-style:italic}

.fonte-box{
  margin-top:17px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px 15px; font-size:.9rem;
}
.fonte-box b{color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; display:block; margin-bottom:3px}
/* Il link all'originale è la prova: senza, "fonte: Comune di Adrano" è una
   parola che il cittadino deve credere sulla fiducia. */
.fonte-box a{display:inline-block; margin-top:6px; color:var(--primary-dark); font-weight:600}

/* ---------- archivio ---------- */
/* La riga dei filtri scorre di lato, ma su un telefono l'ultima voce restava
   tagliata a metà senza nessun segno che ce ne fossero altre: sembrava un
   difetto grafico, non un invito a trascinare. La sfumatura a destra dice
   "c'è dell'altro" e sparisce quando si arriva in fondo. Il padding negativo
   e quello positivo servono a far scorrere i chip fino al bordo dello schermo
   invece che fermarsi al margine del contenuto. */
.filtri{
  display:flex; gap:7px; overflow-x:auto; padding:2px 16px 12px; margin:0 -16px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  scroll-snap-type:x proximity;
  /* Safari su iPhone vuole ancora il prefisso, ed è proprio il browser
     principale di questo progetto. */
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.filtri::-webkit-scrollbar{display:none}
.filtri button{scroll-snap-align:start}
/* Senza scorrimento laterale la sfumatura non serve e taglierebbe l'ultimo chip. */
@media (min-width: 620px){ .filtri{-webkit-mask-image:none; mask-image:none; margin:0; padding:2px 0 12px} }
.filtri button{
  flex:none; padding:9px 15px; min-height:44px; border-radius:100px; cursor:pointer;
  border:1.5px solid var(--line-2); background:var(--surface); font-size:.9rem; white-space:nowrap;
}
.filtri button[aria-pressed="true"]{background:var(--primary); color:var(--bg); border-color:var(--primary)}

/* ---------- impostazioni ---------- */
.gruppo{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:16px}
.riga{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 17px; border-bottom:1px solid var(--line); min-height:60px; width:100%;
  background:none; border-left:0; border-right:0; border-top:0; text-align:left; cursor:pointer;
}
.riga:last-child{border-bottom:0}
button.riga:hover{background:var(--surface-2)}
.riga b{display:block; font-weight:560}
.riga small{color:var(--muted); display:block; font-size:.85rem; margin-top:1px}
.riga .val{color:var(--muted); font-size:.9rem; flex:none}
/* Il numero è la cosa per cui si è aperta la pagina: si legge da lontano e si
   capisce che è toccabile. */
.riga .val.numero{color:var(--primary-dark); font-weight:650; font-variant-numeric:tabular-nums; font-size:1rem}
/* La farmacia aperta adesso, e quella che ha finito.
   ⚠️ La differenza NON è affidata al colore: la riga aperta dice «Di turno
   adesso» e quella finita dice «Turno finito il 4/09». Chi non distingue i
   colori — o guarda lo schermo al sole, di notte, di corsa — legge le parole.
   Il colore è un rinforzo, non l'informazione. */
.riga .val.aperta{color:var(--primary-dark); font-weight:650}

/* La scheda con le azioni in fondo: sopra cosa è, sotto cosa puoi farci.
   ⚠️ `min-height:48px` non è estetica: la misura minima consigliata per un
   dito è 44, e questi tasti si toccano al buio, di corsa, spesso con una mano
   sola. Il controllo di accessibilità li misura a 390 e 1280 px.
   ⚠️ I due tasti stanno AFFIANCATI, non impilati: affiancati la scheda resta
   corta e su un telefono si vedono quattro voci senza scorrere. È il motivo
   per cui l'etichetta dev'essere corta — «Chiama», «Indicazioni». */
.riga.con-azioni{flex-direction:column; align-items:stretch; gap:0; padding:0}
.riga-testa{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 17px;
}
.riga-testa > span:first-child{flex:1; min-width:0}
.azioni-riga{display:flex; border-top:1px solid var(--line)}
.azioni-riga a{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 10px; text-decoration:none;
  color:var(--primary-dark); font-size:.94rem; font-weight:600;
}
.azioni-riga a + a{border-left:1px solid var(--line)}
.azioni-riga a svg{width:18px;height:18px;flex:none}
.azioni-riga a:hover{background:var(--primary-soft)}
/* ⚠️ Niente `opacity` per «spegnere» la riga finita: l'opacità abbassa il
   contrasto davvero, e il controllo di accessibilità NON se ne accorge —
   legge i colori dichiarati, non i pixel. Sarebbe un difetto di contrasto
   invisibile a tutta la suite. Qui si cambia solo il peso del carattere. */
.riga.spenta b{font-weight:500}
a.riga{text-decoration:none; color:inherit}

/* Un link a cui nessuno ha dato un colore resta blu #0000EE, e su fondo scuro
   fa 1.81:1 — illeggibile. Il controllo di accessibilità l'ha trovato appena ho
   aggiunto un link dentro una nota. Meglio una regola di base che ricordarsene
   ogni volta. Le eccezioni (bottoni, righe, voci) si dichiarano da sole. */
a{color:var(--primary-dark)}
.btn, .btn:visited, a.riga, a.voce, a.mini{color:inherit}
.btn{color:#fff}
.btn-2, .btn-3{color:var(--primary-dark)}
.riga.pericolo b{color:var(--urgente)}

.sw{position:relative; flex:none; width:50px; height:30px}
.sw input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.sw span{position:absolute; inset:0; background:var(--line-2); border-radius:100px; transition:background .16s; pointer-events:none}
.sw span::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; background:#fff; border-radius:50%; transition:transform .16s; box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw input:checked + span{background:var(--primary)}
.sw input:checked + span::after{transform:translateX(20px)}
.sw input:focus-visible + span{outline:3px solid var(--primary); outline-offset:2px}

.nota-piede{font-size:.84rem; color:var(--muted); text-align:center; padding:8px 10px 0; line-height:1.5}

/* La scheda delle novità: si legge una volta e non torna più.
   Sta in cima alla home e non è un riquadro che copre lo schermo — chi apre
   l'app perché manca l'acqua deve poter vedere l'avviso senza prima chiudere
   qualcosa. */
/* ⚠️ Corta di proposito. Questa scheda sta SOPRA gli avvisi, e chi apre l'app
   perché manca l'acqua deve vedere l'avviso senza scorrere. Tre righe brevi e
   un tasto: se serve dire di più, si dice nella schermata di cui si parla,
   non qui. */
.novita{
  background:var(--primary-soft); border-radius:var(--r);
  padding:13px 15px; margin-bottom:14px;
}
.novita h2{
  display:flex; align-items:center; gap:8px;
  font-size:.97rem; color:var(--primary-dark); margin-bottom:7px;
}
.novita h2 svg{width:17px;height:17px;flex:none}
.novita ul{margin:0 0 11px; padding-left:18px; display:grid; gap:5px}
.novita li{font-size:.9rem; line-height:1.4; color:var(--ink-2)}
.novita li b{color:var(--ink); font-weight:620}
/* Il tasto deve sembrare un tasto: dentro una scheda colorata, il solo testo
   colorato si legge come una riga qualunque e non lo preme nessuno. */
.novita .btn{
  width:auto; padding:0 18px; min-height:44px; font-size:.92rem;
  background:var(--surface); border:1px solid var(--line-2); color:var(--primary-dark);
}

/* La riga che compare quando l'app è partita senza rete. Colori dichiarati e
   non opacità, e una parola scritta oltre all'icona: da sola l'icona non dice
   niente a chi non la riconosce. */
.senza-rete{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 16px;
  background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:12px 14px;
  color:var(--ink-2); font-size:.92rem; line-height:1.45;
}
.senza-rete svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--muted)}

/* ============ NAVIGAZIONE ============ */
.nav{
  position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); display:flex;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:var(--nav-h); text-decoration:none; color:var(--muted); font-size:.72rem; font-weight:560;
}
.nav a svg{width:23px;height:23px}
.nav a[aria-current="page"]{color:var(--primary)}
.nav a[aria-current="page"] svg{stroke-width:2.1}
/* Con cinque voci un'etichetta lunga come "Suggerimenti" sfonda la sua
   colonna sui telefoni stretti. Rimpicciolisce, e solo sotto i 340px taglia. */
.nav a span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width:420px){
  .nav a{font-size:.65rem}
  .nav a svg{width:21px;height:21px}
}

/* ============ DESKTOP ============ */
@media (min-width:768px) and (min-height:560px){
  body{font-size:1.03125rem}   /* 16,5px col predefinito a 16 — vedi la nota su body */
  .shell{flex-direction:row}
  .top{
    position:sticky; top:0; align-self:flex-start; height:100dvh; width:250px; flex:none;
    border-bottom:0; border-right:1px solid var(--line); background:var(--surface);
    backdrop-filter:none; display:flex; flex-direction:column; padding:24px 16px;
  }
  .top-in{flex-direction:column; align-items:stretch; padding:0 6px; gap:18px; max-width:none}
  .top .marchio{font-size:1.15rem}
  .top .luogo{margin-left:0; width:100%; justify-content:flex-start}
  main{padding:34px 40px 60px; max-width:760px; margin:0}
  .nav{
    position:static; flex-direction:column; border-top:0; background:none;
    backdrop-filter:none; margin-top:22px; gap:3px; padding:0 6px;
  }
  .nav a{
    flex-direction:row; justify-content:flex-start; gap:12px; min-height:48px;
    padding:0 12px; border-radius:var(--r-sm); font-size:.98rem; font-weight:520;
  }
  .nav a:hover{background:var(--surface-2); color:var(--ink)}
  .nav a[aria-current="page"]{background:var(--primary-soft); color:var(--primary); font-weight:620}
  .desktop-solo{display:block}
}
@media (max-width:767px), (max-height:559px){ .desktop-solo{display:none} }

/* ============================================================
   SEGNALAZIONI, PROFILO, RIFINITURE
   ============================================================ */

.sp{margin-top:18px}
.intro{color:var(--muted); margin-bottom:20px; font-size:.96rem}
.vuoto-ric{padding:12px 14px; color:var(--muted); font-size:.93rem}
.nota-ios{margin-top:10px; font-size:.9rem; color:var(--ink-2)}
.errore{padding-top:60px}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:calc(var(--nav-h) + 18px); transform:translateX(-50%);
  z-index:60; display:flex; align-items:center; gap:10px; max-width:92vw;
  background:var(--ink); color:#fff; padding:13px 18px; border-radius:100px;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.4); font-size:.94rem; transition:opacity .3s;
}
.toast svg{width:18px;height:18px;flex:none}
.toast.ko{background:var(--urgente)}
.toast.via{opacity:0}
@media (min-width:768px) and (min-height:560px){ .toast{bottom:26px} }

/* ---------- passi del modulo ---------- */
fieldset.passo{border:0; padding:0; margin:0 0 26px}
fieldset.passo legend{
  display:flex; align-items:center; gap:9px; padding:0; margin-bottom:12px;
  font-size:1rem; font-weight:620; letter-spacing:-.01em;
}
fieldset.passo legend em{font-style:normal; color:var(--muted); font-weight:400; font-size:.86rem}
fieldset.passo legend .n{
  flex:none; width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}

/* ---------- griglia categorie ---------- */
.cat-griglia{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.cat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:92px; padding:12px 8px; background:var(--surface); cursor:pointer;
  border:1.5px solid var(--line); border-radius:var(--r); text-align:center;
  font-size:.82rem; line-height:1.25; color:var(--ink-2);
}
.cat svg{width:24px;height:24px;color:var(--muted)}
.cat:hover{border-color:var(--line-2)}
.cat[aria-pressed="true"]{border-color:var(--primary); background:var(--primary-soft); color:var(--primary); font-weight:600}
.cat[aria-pressed="true"] svg{color:var(--primary)}
@media(max-width:360px){ .cat-griglia{grid-template-columns:repeat(2,1fr)} }

/* ---------- foto ---------- */
.foto-scatta{
  display:flex; align-items:center; gap:14px; padding:18px; cursor:pointer;
  border:1.5px dashed var(--line-2); border-radius:var(--r); background:var(--surface-2);
  min-height:80px;
}
.foto-scatta:hover{border-color:var(--primary); background:var(--primary-soft)}
.foto-scatta svg{width:26px;height:26px;color:var(--primary);flex:none}
.foto-scatta b{display:block; font-weight:600}
.foto-scatta small{color:var(--muted)}
.foto-anteprima img{width:100%; border-radius:var(--r); display:block; border:1px solid var(--line)}
.foto-anteprima .peso{font-size:.85rem; color:var(--muted); margin:8px 0 4px; text-align:center}

/* ---------- posizione ---------- */
.pos-box .attesa{display:flex; align-items:center; gap:9px; color:var(--muted); padding:14px 2px}
.pos-box .attesa svg{width:18px;height:18px}
.pos-ok{
  display:flex; align-items:center; gap:11px; background:var(--ok-bg); border:1px solid #cadfd2;
  border-radius:var(--r); padding:14px 16px;
}
.pos-ok svg{width:22px;height:22px;color:var(--ok);flex:none}
.pos-ok b{display:block}
.pos-ok span{font-size:.86rem; color:var(--muted)}
.pos-negata{
  display:flex; gap:11px; background:var(--importante-bg); border:1px solid var(--importante-line);
  border-radius:var(--r); padding:14px 16px; margin-bottom:14px;
}
.pos-negata svg{width:22px;height:22px;color:var(--importante);flex:none}
.pos-negata b{display:block}
.pos-negata span{font-size:.88rem; color:var(--ink-2)}
.etich{display:block; font-size:.85rem; color:var(--muted); margin-bottom:6px}
#via-man, textarea{
  width:100%; padding:14px 16px; font:inherit; border:1.5px solid var(--line-2);
  border-radius:var(--r); background:var(--surface-2); color:var(--ink);
  min-height:52px; resize:vertical;
}
#via-man:focus, textarea:focus{background:var(--campo-fuoco); color:var(--ink); border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-soft)}

/* ---------- conferma invio ---------- */
.successo{text-align:center; padding:42px 20px}
.successo svg{width:56px;height:56px;color:var(--ok);margin-bottom:16px}
.successo h1{font-size:1.5rem; margin-bottom:10px}
.successo .codice{
  display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:1.12rem;
  letter-spacing:.06em; background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:9px 16px; margin-bottom:16px;
}
.successo .lead{color:var(--muted); margin-bottom:26px}
.successo .btn{margin-bottom:9px}

/* ---------- elenco segnalazioni ---------- */
.segn{
  display:block; background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--line-2);
  border-radius:var(--r); padding:14px 16px; margin-bottom:10px; text-decoration:none; color:inherit;
  box-shadow:var(--shadow);
}
.segn:hover{border-color:var(--line-2)}
.segn.s-attesa{border-left-color:var(--importante)}
.segn.s-corso{border-left-color:var(--info)}
.segn.s-fatto{border-left-color:var(--ok)}
.segn.s-chiuso{border-left-color:var(--muted)}
.segn-cima{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:6px}
.segn .stato{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em}
.segn.s-attesa .stato{color:var(--importante)}
.segn.s-corso .stato{color:var(--info)}
.segn.s-fatto .stato{color:var(--ok)}
.segn.s-chiuso .stato{color:var(--muted)}
.segn .cod{font-family:ui-monospace,monospace; font-size:.76rem; color:var(--muted)}
.segn b{display:block; margin-bottom:3px}
.segn .desc{font-size:.9rem; color:var(--muted); margin-bottom:6px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.segn .quando{display:flex; align-items:center; gap:5px; font-size:.82rem; color:var(--muted)}
.segn .quando svg{width:13px;height:13px}

.chip.stato-attesa{background:var(--importante-bg);color:var(--importante);border-color:var(--importante-line)}
.chip.stato-corso{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.chip.stato-fatto{background:var(--ok-bg);color:var(--ok);border-color:#cadfd2}
.chip.stato-chiuso{background:var(--surface-2);color:var(--muted);border-color:var(--line-2)}

/* ---------- cronologia stati ---------- */
.linea{list-style:none; padding:0; margin:0; position:relative}
.linea::before{content:""; position:absolute; left:6px; top:8px; bottom:14px; width:2px; background:var(--line)}
.linea li{display:flex; gap:16px; position:relative; padding-bottom:20px}
.linea li:last-child{padding-bottom:0}
.linea .punto{
  flex:none; width:14px; height:14px; border-radius:50%; background:var(--surface);
  border:3px solid var(--primary); margin-top:4px; z-index:1;
}
.linea li:not(:last-child) .punto{border-color:var(--line-2)}
.linea b{display:block}
.linea p{font-size:.92rem; color:var(--ink-2); margin:2px 0}
.linea small{color:var(--muted); font-size:.82rem}

/* ---------- riga cliccabile ---------- */
a.riga{text-decoration:none; color:inherit}
a.riga:hover{background:var(--surface-2)}
.riga .val svg{width:16px;height:16px; transform:rotate(180deg); color:var(--muted)}
a.rifiuti-oggi{text-decoration:none; color:inherit}
a.rifiuti-oggi:hover{border-color:var(--ok)}

/* ---------- visibilità nav ---------- */
.nav.mobile-solo{display:flex}
@media (min-width:768px) and (min-height:560px){
  .nav.mobile-solo{display:none}
  .nav.desktop-solo{display:flex}
}
@media (max-width:767px), (max-height:559px){ .nav.desktop-solo{display:none} }

/* ============================================================
   Correzioni dopo la verifica di accessibilità.
   WCAG 2.1 AA non impone una dimensione minima dei bersagli (è AAA),
   ma WCAG 2.2 sì — 24×24 come minimo. Porto tutto a 44×44, che è la
   soglia comoda per un pollice e ci mette al riparo se lo standard
   di riferimento viene aggiornato.
   ============================================================ */

.top .luogo{min-height:44px}
.filtri button{min-height:44px}
.btn-3{min-height:44px}

/* Il selettore ha un'area di tocco di 44px anche se la levetta ne mostra 30. */
.sw{height:44px}
.sw span{inset:7px 0}

/* I collegamenti dentro il testo restano alti quanto la riga: qui li rendo
   toccabili senza spostare la grafica. */
.d-mappa .coord a, .nota-piede a{
  display:inline-block; padding:6px 4px; min-height:24px;
}

/* ---------- possibili doppioni ---------- */
.simile{
  background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--info);
  border-radius:var(--r); padding:15px 17px; margin-bottom:11px; box-shadow:var(--shadow);
}
.s-cima{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.s-cima .stato{font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--info)}
.s-cima .dist{margin-left:auto; font-size:.82rem; color:var(--muted)}
.simile .desc{margin-bottom:6px}
.simile .meta-s{font-size:.82rem; color:var(--muted); margin-bottom:13px}

/* ---------- rifiuti: le due domande vere ----------
   "Cosa metto fuori stasera?" e "cosa raccolgono oggi?" sono due domande
   diverse con due risposte diverse, e la prima dipende da domani. Prima
   stavano mescolate in una colonna sola e bisognava fare il conto a mente. */
.rifiuti-adesso{display:grid; gap:10px; margin-bottom:22px}
@media (min-width:520px){ .rifiuti-adesso{grid-template-columns:1fr 1fr} }
.ra-blocco{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; border-left:5px solid var(--line-2);
}
.ra-blocco.stasera{border-left-color:var(--primary); background:var(--primary-soft)}
.ra-blocco.oggi{border-left-color:var(--line-2)}
.ra-et{display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); font-weight:600; margin-bottom:4px}
.ra-blocco b{display:block; font-size:1.32rem; line-height:1.25; letter-spacing:-.02em; margin-bottom:4px}
.ra-blocco.stasera b{color:var(--primary-dark)}
.ra-nota2{display:block; font-size:.85rem; color:var(--muted)}

.cal-eti{color:var(--primary-dark); font-weight:700; font-size:.85rem}
/* Tre colonne su un telefono da 360 pixel non ci stanno: la tabella usciva
   di 44px e bisognava trascinarla di lato, cosa che nessuno scopre. Sotto i
   440 la terza colonna scende sotto il nome del giorno. */
.sera-stretta{display:none}
@media (max-width:440px){
  .cal .cal-sera, .cal th:nth-child(3){display:none}
  .sera-stretta{display:block; font-size:.8rem; color:var(--muted); font-weight:400; margin-top:2px}
}
.cal .cal-sera{color:var(--ink-2)}
.cal tr.domani td{background:var(--surface-2)}

/* ---------- invito a installare ---------- */
.invito-installa{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  padding:15px 17px; margin-bottom:20px; box-shadow:var(--shadow);
}
.ii-testo{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px}
.ii-testo svg{width:22px;height:22px;flex:none;color:var(--primary);margin-top:2px}
.ii-testo b{display:block; margin-bottom:3px}
.ii-testo span{font-size:.9rem; color:var(--muted); line-height:1.45}
.ii-azioni{display:flex; gap:8px; flex-wrap:wrap}

/* ---------- istruzioni di installazione ---------- */
.passi-installa{list-style:none; counter-reset:p; padding:0; margin:18px 0; display:grid; gap:14px}
.passi-installa li{
  counter-increment:p; display:grid; grid-template-columns:32px 1fr; gap:13px; align-items:start;
}
.passi-installa li::before{
  content:counter(p); display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; background:var(--primary); color:#fff; font-weight:700; font-size:.95rem;
}
.passi-installa b{display:block; margin-bottom:2px}
.passi-installa span{color:var(--muted); font-size:.92rem; line-height:1.5}
.passi-installa li b, .passi-installa li span{grid-column:2}

/* ---------- scelta del tema ---------- */
.tema-scelta{display:flex; gap:6px; background:var(--surface-2);
  border:1.5px solid var(--line-2); border-radius:100px; padding:4px; width:fit-content; max-width:100%}
.tema-scelta button{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px; min-height:44px;
  border:0; background:none; border-radius:100px; cursor:pointer; font-size:.9rem; color:var(--ink-2);
}
.tema-scelta button svg{width:17px;height:17px}
.tema-scelta button[aria-pressed="true"]{background:var(--primary); color:var(--bg); font-weight:650}
@media (max-width:380px){ .tema-scelta button{padding:9px 11px; font-size:.85rem} }
.versione{color:var(--muted); font-size:.78rem; opacity:.8}

/* ---------- riga notifiche e diagnosi ---------- */
#riga-push small{display:block; line-height:1.4}
.diagnosi{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.diagnosi summary{
  cursor:pointer; font-size:.88rem; color:var(--muted); min-height:44px;
  display:flex; align-items:center;
}
.diagnosi dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:6px 0 10px; font-size:.86rem}
.diagnosi dt{color:var(--muted)}
.diagnosi dd{margin:0; color:var(--ink); font-weight:600}

/* La scelta del promemoria dentro la schermata del consenso: è una riga come
   quelle del Profilo, così chi la ritrova là dentro la riconosce. */
.scelta-extra{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:var(--surface-2); border:1.5px solid var(--line); border-radius:var(--r);
  padding:14px 16px; margin-top:20px; min-height:64px; cursor:pointer;
}
.scelta-extra b{display:block}
.scelta-extra small{color:var(--muted); font-size:.87rem; line-height:1.4}

/* --- Salta al contenuto ------------------------------------------------
   Chi naviga da tastiera o con un lettore di schermo, senza questo link,
   deve attraversare tutta la barra di navigazione a ogni schermata prima di
   arrivare a quello che è venuto a leggere. Sta fuori dallo schermo finché
   non riceve il fuoco: allora compare in alto, sopra ogni altra cosa. */
.salta{
  position:absolute; left:8px; top:-60px; z-index:9999;
  /* `--fondo` e `--testo` non esistono in questo progetto: vincevano sempre i
     ripieghi. Funzionava per caso (bianco su quasi-nero si legge), ma in tema
     scuro era una toppa bianca. I nomi veri sono questi. */
  background:var(--surface); color:var(--ink);
  border:2px solid currentColor; border-radius:8px;
  padding:10px 16px; font-weight:600; text-decoration:none;
  transition:top .12s ease;
}
.salta:focus{top:8px}
@media (prefers-reduced-motion: reduce){ .salta{transition:none} }

/* Il contenuto principale riceve il fuoco a ogni cambio di schermata, ma non
   deve mostrare il contorno: non è un elemento su cui si è arrivati tabulando,
   è il punto da cui il lettore di schermo riparte a leggere. */
main#principale:focus{outline:none}

/* La riga che avverte quando una preferenza accesa non può funzionare.
   Sta dentro il gruppo, subito sotto l'interruttore che la riguarda: staccata
   diventerebbe un avviso generico che si impara a ignorare. */
.riga-guasta{
  margin:0; padding:10px 14px;
  background:var(--urgente-bg); color:var(--urgente);
  border-top:1px solid var(--urgente-line);
  font-size:.88rem; line-height:1.45;
}

/* ============ TELEFONO IN ORIZZONTALE ============
   In orizzontale l'altezza e' poca (390px su un telefono comune): barra in
   alto fissa (69px) + barra in basso (66px) mangiavano il 35-39% dello
   schermo, e la lettura restava in una fessura. Qui la barra in alto scorre
   via con la pagina e quella in basso si ferma a 44px, con l'icona accanto
   all'etichetta: fissa resta solo l'11% circa. */
@media (orientation:landscape) and (max-height:500px){
  :root{--nav-h:44px}
  .top{position:static}
  .nav a{flex-direction:row; gap:6px; min-height:44px}
  main{padding-bottom:calc(var(--nav-h) + 16px)}
  .toast{bottom:calc(var(--nav-h) + 8px)}
}

/* Numeri di telefono dentro un testo: si devono riconoscere e toccare. */
.corpo a.tel{color:var(--primary-dark); font-weight:650; text-decoration:underline; display:inline-block; min-height:24px}
.riga .val.numero{text-decoration:underline}