:root {
  --rosso: #a3161b; --rosso-chiaro: #fbeaea; --oro: #c9962b;
  --attiva: #c0262d; --programmata: #1f63b8; --conclusa: #8a8f98; --nuove: #b07a12;
  --testo: #1d1f23; --tenue: #5d636c; --fondo: #f6f4f1; --carta: #ffffff; --linea: #e2ded8;
  --raggio: 14px; --ombra: 0 1px 3px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04);
  color-scheme: light dark;
}
/* Colori della mappa di base (letti da mappa.js): la mappa resta chiara anche nel tema scuro, per leggibilità */
:root {
  --mappa-fondo: #eef0ea; --mappa-strada: #ffffff; --mappa-bordo: #d3d4ce;
  --mappa-edificio: #e4e2dc; --mappa-acqua: #c4dce7; --mappa-verde: #dfe8d5;
}
/* Tema scuro: segue il telefono (automatico) oppure la scelta fatta con il pulsante ◐ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rosso: #e5575c; --rosso-chiaro: #3a1e1f; --testo: #ece9e4; --tenue: #a7a39c;
    --fondo: #121212; --carta: #1e1e1e; --linea: #34312d; --conclusa: #8d9097;
    --attiva: #ef5a5f; --programmata: #5b9bf0; --nuove: #e0b04a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --rosso: #e5575c; --rosso-chiaro: #3a1e1f; --testo: #ece9e4; --tenue: #a7a39c;
  --fondo: #121212; --carta: #1e1e1e; --linea: #34312d; --conclusa: #8d9097;
  --attiva: #ef5a5f; --programmata: #5b9bf0; --nuove: #e0b04a;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--testo); background: var(--fondo);
  padding-bottom: env(safe-area-inset-bottom);
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.sotto { color: var(--tenue); font-size: .875rem; margin: .2rem 0; }

/* Testata */
.testata {
  position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: .6rem;
  padding: calc(.5rem + env(safe-area-inset-top)) 1rem .5rem; background: var(--carta);
  border-bottom: 3px solid var(--rosso); box-shadow: var(--ombra);
}
.testata img { border-radius: 50%; flex: none; }
.titolo { flex: 1; min-width: 0; }
.titolo h1 { font-size: 1rem; margin: 0; color: var(--rosso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titolo .sotto { margin: 0; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.azioni { display: flex; gap: .25rem; }
.icona { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea); background: var(--carta); font-size: 1.1rem; }
.avviso { margin: 0; padding: .5rem 1rem; background: var(--rosso-chiaro); color: var(--testo); text-align: center; font-size: .9rem; }

/* Pulsanti */
.primario { background: var(--rosso); color: #fff; border: 0; border-radius: 10px; padding: .75rem 1rem; font-weight: 600; width: 100%; }
.primario:disabled { opacity: .6; }
.secondario { background: var(--carta); border: 1px solid var(--rosso); color: var(--rosso); border-radius: 999px; padding: .45rem .9rem; font-weight: 600; }
.secondario[aria-pressed="true"] { background: var(--rosso); color: #fff; }
.testo { background: none; border: 0; color: var(--rosso); text-decoration: underline; padding: .45rem .3rem; }

/* Accesso */
.accesso { padding: 1rem; display: grid; place-items: start center; }
.pannello { background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1.2rem; width: min(100%, 440px); }
.pannello h2 { font-size: 1.15rem; margin: 0 0 .2rem; }
.schede, .vista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--linea); border-radius: 10px; padding: 4px; margin: 1rem 0; }
.schede button, .vista button { border: 0; border-radius: 8px; padding: .5rem; background: transparent; font-weight: 600; }
.schede [aria-selected="true"], .vista [aria-selected="true"] { background: var(--carta); box-shadow: var(--ombra); color: var(--rosso); }
.modulo { display: grid; gap: .8rem; }
.modulo label { display: grid; gap: .25rem; font-weight: 600; font-size: .95rem; }
.modulo small { font-weight: 400; color: var(--tenue); }
.modulo input:not([type=checkbox]) { padding: .7rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); width: 100%; }
.modulo .spunta { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; font-size: .85rem; }
.modulo .spunta input { margin-top: .2rem; width: 20px; height: 20px; flex: none; }
#passo-codice { display: grid; gap: .8rem; }
.esito { min-height: 1.4em; margin: .8rem 0 0; font-size: .95rem; }
.esito.errore { color: var(--attiva); }

/* Contatori */
main#app { padding: .8rem 1rem 1rem; max-width: 1400px; margin: 0 auto; }
.contatori { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.contatore {
  display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center;
  background: var(--carta); border: 2px solid transparent; border-radius: 12px; padding: .45rem .2rem; box-shadow: var(--ombra);
  border-top: 5px solid var(--c);
}
.contatore strong { font-size: 1.35rem; line-height: 1; color: var(--c); }
.contatore span { font-size: .7rem; color: var(--tenue); line-height: 1.15; }
.contatore[aria-pressed="true"] { border-color: var(--c); }
.contatore.attiva { --c: var(--attiva); } .contatore.programmata { --c: var(--programmata); }
.contatore.nuove { --c: var(--nuove); } .contatore.prossime { --c: var(--rosso); }

/* Filtri */
.filtri { display: grid; gap: .5rem; margin: .8rem 0 .4rem; }
.filtri input, .filtri select { padding: .6rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--carta); width: 100%; min-width: 0; }
.riga-ricerca { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.riga-filtri { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
#f-via { grid-column: 1 / -1; }
.intervallo { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.intervallo label { display: grid; gap: .15rem; font-size: .8rem; color: var(--tenue); }
#altri-filtri summary { cursor: pointer; color: var(--rosso); font-weight: 600; padding: .2rem 0; }
#filtri-attivi { color: #fff; background: var(--rosso); border-radius: 999px; padding: 0 .45rem; font-size: .75rem; }
#filtri-attivi:empty { display: none; }
.icona.esci { width: auto; border-radius: 999px; padding: 0 .8rem; font-size: .85rem; font-weight: 600; }
.riga-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.vicino { background: var(--carta); border-radius: 10px; padding: .6rem .8rem; box-shadow: var(--ombra); }
.vicino label { display: grid; gap: .3rem; font-weight: 600; }
.vicino input[type=range] { accent-color: var(--rosso); padding: 0; }
.conteggio { margin: .3rem 0 .6rem; }

/* Elenco */
.contenuto { display: block; }
.pannello-mappa { display: none; }
body.mostra-mappa .elenco { display: none; }
body.mostra-mappa .pannello-mappa { display: block; }
.elenco { display: grid; gap: .6rem; }
.carta {
  background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra); padding: .8rem .9rem;
  border-left: 6px solid var(--c, var(--conclusa)); text-align: left; width: 100%; border-top: 0; border-right: 0; border-bottom: 0;
}
.carta.attiva { --c: var(--attiva); } .carta.programmata { --c: var(--programmata); } .carta.conclusa { --c: var(--conclusa); }
.carta h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.carta .numero { color: var(--tenue); font-size: .8rem; }
.etichette { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
.etichetta { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--fondo); border: 1px solid var(--linea); white-space: nowrap; }
.etichetta.stato { color: #fff; border: 0; background: var(--c); }
.etichetta.nuova { background: var(--nuove); color: #fff; border: 0; }
.etichetta.distanza { background: var(--rosso-chiaro); border-color: transparent; }
.quando { margin: .2rem 0 0; font-size: .92rem; }
.vuoto { background: var(--carta); border-radius: var(--raggio); padding: 1.2rem; text-align: center; color: var(--tenue); }

/* Mappa */
#mappa { height: calc(100dvh - 290px); min-height: 340px; border-radius: var(--raggio); box-shadow: var(--ombra); background: var(--mappa-fondo); }
/* Controlli e finestre della mappa sempre chiari, come la mappa */
.leaflet-container .leaflet-control-zoom a, .leaflet-container .leaflet-control-attribution, .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: #1d1f23; }
.leaflet-container .leaflet-control-attribution a, .leaflet-popup .popup button { color: #1f63b8; }
.legenda { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; font-size: .85rem; color: var(--tenue); margin: .5rem 0; }
.punto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c); margin-right: .3rem; vertical-align: -1px; }
.punto.attiva { --c: var(--attiva); } .punto.programmata { --c: var(--programmata); } .punto.conclusa { --c: var(--conclusa); }
.popup h4 { margin: 0 0 .3rem; font-size: 1rem; }
.popup ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; max-height: 260px; overflow: auto; }
.popup .sunto { border-top: 1px solid #e2ded8; padding-top: .45rem; }
.popup .sunto p { margin: 0 0 .35rem; font-size: .85rem; line-height: 1.35; }
.popup .attiva { color: #c0262d; } .popup .programmata { color: #1f63b8; } .popup .conclusa { color: #6b7079; }
.popup button { background: none; border: 0; color: var(--programmata); text-decoration: underline; padding: 0; text-align: left; font-size: .9rem; }
.leaflet-container { font: inherit; }
.piede { text-align: center; margin-top: 1rem; }

/* Finestre */
dialog { border: 0; border-radius: var(--raggio); padding: 1.2rem; width: min(96vw, 640px); max-height: 88dvh; background: var(--carta); color: var(--testo); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(0,0,0,.45); }
dialog .chiudi { float: right; border: 0; background: var(--fondo); border-radius: 50%; width: 36px; height: 36px; font-size: 1rem; }
dialog h2 { font-size: 1.15rem; margin: 0 0 .3rem; padding-right: 2.5rem; }
dialog h3 { font-size: 1rem; margin: 1rem 0 .3rem; }
.periodo { border-top: 1px solid var(--linea); padding: .7rem 0; }
.periodo dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .8rem; margin: .4rem 0; font-size: .92rem; }
.periodo dt { color: var(--tenue); }
.periodo dd { margin: 0; }
.collegamenti { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.collegamenti a { display: inline-block; padding: .5rem .8rem; border-radius: 10px; border: 1px solid var(--rosso); color: var(--rosso); text-decoration: none; font-weight: 600; }
.utente { border-top: 1px solid var(--linea); padding: .6rem 0; display: grid; gap: .3rem; }
.utente .pulsanti { display: flex; gap: .4rem; flex-wrap: wrap; }
.utente .pulsanti button { border: 1px solid var(--linea); background: var(--fondo); border-radius: 8px; padding: .3rem .7rem; }

/* Schermi larghi: elenco e mappa affiancati */
@media (min-width: 720px) {
  .contatore { flex-direction: row; justify-content: center; gap: .5rem; padding: .6rem; }
  .contatore strong { font-size: 1.6rem; }
  .contatore span { font-size: .85rem; }
  .riga-filtri { grid-template-columns: 1fr 2fr 1fr 1fr; align-items: end; }
  #f-via, .intervallo { grid-column: auto; }
}
@media (min-width: 1000px) {
  .vista { display: none; }
  .contenuto { display: grid; grid-template-columns: minmax(360px, 1fr) 1.3fr; gap: 1rem; align-items: start; }
  .pannello-mappa, body.mostra-mappa .elenco { display: block; }
  .pannello-mappa { position: sticky; top: 76px; }
  #mappa { height: calc(100dvh - 140px); }
  .elenco { max-height: none; }
}