/* Occhi@perti — palette presa dalla copertina istituzionale del Comune. */
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Titillium';src:url('fonts/TitilliumWeb-Black.ttf') format('truetype');font-weight:900;font-display:swap}

:root{
  --blu:#0C2952; --blu-cupo:#0A1B3D; --blu-chiaro:#A9C0DE;
  --carta:#F5F0EA; --carta-scura:#EFE9E2;
  --montagna:#8DB1CB; --ardesia:#4F6A77;
  --verde:#2E7D4F; --rosso:#C8352C; --oro:#C89B3C;
  --testo:#1D2430; --tenue:#5C6673; --linea:#E2DCD2;
  --r:14px; --r-g:20px;
  --ombra:0 6px 20px rgba(12,41,82,.09), 0 1px 2px rgba(12,41,82,.06);
}
*{box-sizing:border-box}
/* L'attributo [hidden] deve vincere sempre, anche su elementi con display impostato
   da una classe (es. .btn{display:inline-flex}): senza !important un bottone "nascosto"
   in partenza (come «Usa la mia posizione» prima di aprire la mappa) resterebbe visibile
   e cliccabile, con effetti collaterali sul codice che presume sia comparso solo dopo. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{font-family:'Titillium',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--testo);background:var(--carta);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--blu)}
h1,h2,h3{margin:0;line-height:1.15;font-weight:700;color:var(--blu-cupo)}

/* testata istituzionale — riprende la banda blu della copertina */
.testata{background:var(--blu);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:60;box-shadow:0 6px 18px rgba(10,27,61,.18)}
.testata img.stemma{height:44px;width:44px;flex:0 0 auto}
.testata .nome{font-weight:900;font-size:17px;letter-spacing:.4px;line-height:1.1}
.testata .paese{font-size:12.5px;color:var(--blu-chiaro);letter-spacing:.3px}
.testata .sp{flex:1}
/* min-width:0 sblocca lo shrink di un figlio flex con testo dentro (nome/paese): senza,
   il default min-width:auto di un flex item impedirebbe al testo di restringersi sotto
   la sua larghezza intrinseca, e sarebbe lui — non la mancanza di wrap sui link — a
   spingere .testata oltre il bordo su uno schermo stretto. */
.testata > div{min-width:0}
.testata a{color:var(--blu-chiaro);text-decoration:none;font-weight:600;font-size:14px;
  padding:7px 11px;border-radius:9px}
.testata a:hover{background:rgba(255,255,255,.14);color:#fff}
.tricolore{height:5px;display:flex}
.tricolore i{flex:1}
.tricolore i:nth-child(1){background:var(--verde)}
.tricolore i:nth-child(2){background:#fff}
.tricolore i:nth-child(3){background:var(--rosso)}

.foglio{max-width:820px;margin:0 auto;padding:26px 16px 80px}
.foglio.largo{max-width:1180px}
.scheda{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:22px;box-shadow:var(--ombra)}
.scheda + .scheda{margin-top:16px}
.griglia{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Scheda operativa (public/segnalazione.php): stesso principio già annotato sopra per
   .filtri-coda — un rapporto di colonne fisso (1.35fr/1fr) messo come style in linea non
   risponderebbe mai alla media query sotto i 760px. Classe dedicata, così la regola
   mobile qui sotto può vincere e portarla a una colonna sola. */
.scheda-operativa{grid-template-columns:1.35fr 1fr;align-items:start}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  background:var(--blu);color:#fff;font-family:inherit;font-weight:700;font-size:16px;
  padding:14px 24px;border-radius:12px;text-decoration:none;transition:.15s}
.btn:hover{background:var(--blu-cupo)}
.btn.grande{font-size:20px;padding:20px 34px;border-radius:16px;width:100%}
.btn.chiaro{background:#fff;color:var(--blu);border:2px solid var(--blu)}
.btn.verde{background:var(--verde)}
.btn.pericolo{background:var(--rosso)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* campi */
label{display:block;font-weight:600;font-size:14.5px;color:var(--blu-cupo);margin:0 0 6px}
input[type=text],input[type=email],input[type=tel],input[type=password],textarea,select{
  width:100%;font-family:inherit;font-size:16.5px;padding:13px 14px;border:1.5px solid var(--linea);
  border-radius:11px;background:#fff;color:var(--testo)}
input:focus,textarea:focus,select:focus{outline:3px solid rgba(12,41,82,.18);border-color:var(--blu)}
textarea{min-height:120px;resize:vertical}
.campo{margin-bottom:16px}
.errore{color:var(--rosso);font-size:14px;font-weight:600;margin-top:5px}
.aiuto{color:var(--tenue);font-size:13.5px;margin-top:5px}
.esca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* scelta categoria */
.categorie{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.categoria{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 10px;
  background:#fff;border:2px solid var(--linea);border-radius:var(--r);cursor:pointer;text-align:center;
  font-weight:600;font-size:15px;color:var(--blu-cupo);transition:.15s}
.categoria:hover{border-color:var(--montagna)}
.categoria .icona{font-size:32px;line-height:1}
.categoria input{position:absolute;opacity:0}
/* Il radio dentro la card ha opacity:0 (non deve leggersi come un checkbox
   di sistema): significa che l'outline nativo del suo :focus e' invisibile
   a sua volta. L'unico segnale che resta a chi naviga da tastiera e'
   :focus-within sulla card — per questo va rinforzato rispetto ai campi
   di testo, non lasciato al solo cambio di colore (WCAG 2.4.7, obbligo
   L. 4/2004 per un sito della PA). */
.categoria:focus-within{outline:3px solid rgba(12,41,82,.35);outline-offset:2px;border-color:var(--blu)}
.categoria.scelta{border-color:var(--blu);background:#F0F5FB;box-shadow:0 0 0 3px rgba(12,41,82,.10)}

/* passi */
.passi{display:flex;gap:6px;margin-bottom:22px}
.passi i{flex:1;height:6px;border-radius:4px;background:var(--carta-scura)}
.passi i.fatto{background:var(--blu)}
.passo{display:none}
.passo.attivo{display:block}
/* Il titolo del passo prende tabindex="-1" e riceve il focus via JS a ogni
   cambio passo (vedi segnala.js), cosi' uno screen reader annuncia dove si e'
   finiti invece di restare in silenzio. Non e' pero' una tappa del giro
   normale di Tab: un mouse o un tocco non ci arrivano mai, e la persona che ci
   arriva da tastiera lo fa solo attraverso l'azione (Avanti/Indietro) che ha
   gia' appena compiuto, con il contesto quindi gia' chiaro. L'anello di focus
   qui sarebbe rumore, non informazione: spento solo su questo elemento.  */
.passo h1:focus{outline:none}

/* stati — i colori del testo sono scelti sul contrasto, non a occhio:
   per un sito della PA il minimo 4,5:1 delle WCAG AA e' un obbligo di legge
   (L. 4/2004 e Linee guida AgID), non una raffinatezza. Verificati uno per uno. */
.stato{display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700}
.stato-ricevuta{background:#FBF0DA;color:#8A6112}
.stato-confermata{background:#E9F0F8;color:var(--blu)}
.stato-presa_in_carico{background:#E4EEF7;color:#1B4F87}
.stato-in_lavorazione{background:#FDF0E2;color:#8A5210}
.stato-risolta{background:#E7F1E9;color:#26683F}
.stato-non_di_competenza{background:#EFEAE4;color:#47606C}
.stato-duplicata{background:#EFEAE4;color:#47606C}
.stato-archiviata{background:#EEE;color:#595959}

/* linea del tempo */
.tempo{list-style:none;margin:0;padding:0 0 0 26px;border-left:3px solid var(--carta-scura)}
.tempo li{position:relative;padding:0 0 22px 6px}
.tempo li::before{content:'';position:absolute;left:-34px;top:4px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--montagna)}
.tempo li.fatto::before{background:var(--verde);border-color:var(--verde)}
.tempo .quando{color:var(--tenue);font-size:13.5px}

/* numeri in evidenza */
.numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:center}
.numero{background:#fff;border:1px solid var(--linea);border-radius:var(--r);padding:18px 10px}
.numero b{display:block;font-size:34px;font-weight:900;color:var(--blu);line-height:1.1}
.numero span{font-size:13.5px;color:var(--tenue);font-weight:600}
.numeri.g5{grid-template-columns:repeat(5,1fr)}

/* Il rosso da solo non basta (WCAG 1.4.1): chi non lo distingue, o legge una stampa
   in bianco e nero, deve capire lo stesso che qualcosa richiede attenzione. Il riquadro
   in allarme prende anche un bordo più spesso; la riga ferma anche il simbolo ⚠, che
   resta leggibile a prescindere dal colore. */
.numero.allarme{border:2px solid var(--rosso)}
.numero.allarme b{color:var(--rosso)}
td.ferma{color:var(--rosso);font-weight:700}
td.ferma::before{content:'⚠ '}

/* Filtri del cruscotto: stesso principio dei riquadri numerici sopra — una griglia a
   5 colonne fissata con uno style in linea non risponderebbe mai alla media query
   sotto i 760px, e sul telefono i cinque campi si schiaccerebbero in colonnine
   illeggibili. Classe dedicata, cosi' la regola mobile può vincere. */
.filtri-coda{grid-template-columns:1fr 1fr 1fr 1.4fr auto;align-items:end;gap:10px}

.avviso{border-left:5px solid var(--blu);background:#F0F5FB;padding:15px 17px;border-radius:0 var(--r) var(--r) 0;font-size:15px}
.avviso.attenzione{border-color:var(--oro);background:#FBF5E7}
.avviso.buono{border-color:var(--verde);background:#EDF5EF}
.avviso b{color:var(--blu-cupo)}

table.elenco{width:100%;border-collapse:collapse;font-size:14.5px}
table.elenco th{text-align:left;color:var(--tenue);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.5px;padding:8px 10px;border-bottom:2px solid var(--linea)}
table.elenco td{padding:12px 10px;border-bottom:1px solid var(--linea);vertical-align:top}
table.elenco tr:hover td{background:#FAF8F4}

.mappa{height:300px;border-radius:var(--r);border:1px solid var(--linea);overflow:hidden}
.foto-anteprima{max-width:100%;border-radius:var(--r);border:1px solid var(--linea)}
.mascotte-piede{display:block;margin:30px auto 0;max-width:190px;opacity:.95}
.piede{text-align:center;color:var(--tenue);font-size:13px;padding:26px 16px 40px;line-height:1.8}
.piede a{color:var(--ardesia)}

@media(max-width:760px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .numeri{grid-template-columns:repeat(3,1fr)}
  .numeri.g5{grid-template-columns:repeat(2,1fr)}
  .filtri-coda{grid-template-columns:1fr 1fr}
  .filtri-coda button{grid-column:1 / -1}
  .numero b{font-size:26px}
  .foglio{padding:18px 13px 70px}
  .scheda{padding:17px}
  .categorie{grid-template-columns:repeat(2,1fr)}
  /* Scheda operativa a colonna singola. La colonna dei comandi (Assegna area, Fai
     avanzare, Post social, Note interne — il secondo <div> figlio della griglia) va
     PRIMA del dettaglio: su un telefono in cantiere è quella che serve subito, non
     quella che si vede scendendo per mezza pagina. */
  .scheda-operativa{grid-template-columns:1fr}
  .scheda-operativa > div:first-child{order:2}
  .scheda-operativa > div:last-child{order:1}
  /* Testata: quattro voci di navigazione più stemma e nome non stanno mai su una riga
     sola sotto i 761px (display:flex di base è nowrap, quindi senza questa regola la
     riga trabocca invece di andare a capo — il corpo della pagina finisce con uno
     scroll orizzontale, il peggior difetto possibile su una pagina pensata per il
     telefono). .sp è il divisore fra il blocco logo e i link: portarlo a piena
     larghezza (flex-basis:100%, altezza zero: non introduce una riga vuota visibile)
     lo trasforma in un punto di rottura pulito, e i link vanno tutti sulla riga sotto. */
  .testata{flex-wrap:wrap;row-gap:8px}
  .testata .sp{flex-basis:100%;height:0}
  .testata a{padding:6px 9px;font-size:13.5px}
}
@media(min-width:761px){ .categorie{grid-template-columns:repeat(5,1fr)} }

/* Fascia della modalita' dimostrazione: deve essere impossibile non vederla,
   ma non deve sembrare un errore del sito. Giallo d'avviso, testo scuro,
   contrasto verificato (8,9:1). */
.fascia-demo{background:#FBF0DA;color:#6B4A0C;border-bottom:2px solid #C89B3C;
  padding:10px 18px;font-size:14px;font-weight:600;line-height:1.45;text-align:center}
@media(max-width:760px){ .fascia-demo{font-size:13px;padding:9px 13px;text-align:left} }