/* Centrale soccorsi — foglio di stile.
   Segue REGOLE-DI-DESIGN.md (Regma). Dove una regola nasce da un difetto vero,
   il commento lo dice: serve a non rimettere l'errore fra sei mesi.

   Principio che decide tutto il resto: si progetta per chi sta peggio. Qui e'
   chi risponde mentre un cliente e' fermo in strada, spesso in piedi, magari
   col telefono in mano. Da li' il contrasto alto, i bersagli grandi, le frasi
   corte. */

:root{
  /* --- fondo e superfici ------------------------------------------------ */
  --bg:#0a0e15;
  --panel:#121722;
  --s1:rgba(255,255,255,.05);
  --s2:rgba(255,255,255,.08);
  --s3:rgba(255,255,255,.12);
  --s4:rgba(255,255,255,.17);
  --border:rgba(255,255,255,.13);
  --border-strong:rgba(255,255,255,.28);

  /* --- testo ------------------------------------------------------------
     ink-muted sta a 10,3:1 sul pannello, non al minimo di accessibilita':
     le soglie sono calcolate per uno schermo guardato al chiuso, e quasi tutte
     le etichette qui sono secondarie. Un grigio che "passa" a 5:1 sparisce in
     cortile a mezzogiorno, e con lui spariscono le etichette.
     ink-faint esiste per una cosa sola: i suggerimenti nei campi vuoti. Con il
     secondario cosi' chiaro, un suggerimento scritto uguale sembrerebbe un
     valore gia' inserito. */
  --ink:#ffffff;
  --ink-muted:#c8d0dd;
  --ink-faint:#8b93a1;

  /* --- identita': azione, selezione, marchio ---------------------------- */
  --brand:#5dcaa5;
  --brand-solid:#168059;
  --brand-on:#eafff6;
  --gold:#e0b64c;
  --gold-on:#241a03;

  /* --- stati: cosa sta succedendo a un intervento -----------------------
     Famiglia separata dall'identita'. Se il teal fosse anche "confermato", il
     giorno che una riga selezionata e una confermata stanno nella stessa lista
     non si capisce piu' quale delle due cose il colore sta dicendo. */
  --ok:#97c459;    --ok-bg:rgba(151,196,89,.28);
  --warn:#e0b64c;  --warn-bg:rgba(224,182,76,.28);
  /* Misurato il 22/09/2026 con un validatore, non a occhio: fra --ok e --warn
     la distanza percettiva e' 10,2 a vista normale (sotto la soglia di 15, cioe'
     gia' faticosa per chiunque) e 1,4 per un occhio protanopico, cioe' lo stesso
     colore per un uomo su dodici. Dove accanto c'e' la pastiglia con scritto lo
     stato si legge lo stesso; dove il colore e' solo -- la striscia a sinistra di
     una riga, in un elenco che si scorre con la coda dell'occhio -- verde e oro
     diventano la stessa cosa, e quelle due strisce dicono l'opposto l'una
     dell'altra. Questo e' l'oro delle strisce: 16,1 a vista normale e 10,8
     protanopico contro lo stesso verde, e tiene il 3:1 sul fondo. Resta un oro,
     quindi nessuno deve rimparare la legenda. Il chiaro resta per il testo, dove
     serve il 4,5:1 sulla pastiglia e questo non ce la farebbe. */
  --warn-mark:#b8862f;

  /* --- il grafico -------------------------------------------------------
     Le tinte del grafico NON sono quelle degli stati, ed e' voluto. In una
     pastiglia accanto c'e' sempre la parola, e la parola dice lo stato meglio
     della tinta; in una colonna impilata due pezzi si toccano e non c'e'
     nessuna parola: li' il colore e' l'unica cosa che separa "accettato al
     primo giro" da "ha tenuto il contatto di sicurezza", che sono un servizio
     che funziona e un servizio che ha tenuto per un pelo. Misurate il
     22/09/2026: queste stanno a 15,7 a vista normale e 8,5 per un occhio
     protanopico; quelle degli stati stavano a 10,2 e 1,4.
     Il quarto e' grigio apposta: "senza esito" non e' un esito. */
  --g-primo:#4fae84;
  --g-sicurezza:#c9973a;
  --g-umana:#bd5553;
  --g-altro:rgba(255,255,255,.22);
  --info:#8fb8e6;  --info-bg:rgba(143,184,230,.28);
  --wait:#c084e8;  --wait-bg:rgba(192,132,232,.28);
  --err:#e28685;   --err-bg:rgba(226,134,133,.30);

  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  font-family:var(--ui);
  font-size:15px;
  color:var(--ink);
  background:var(--bg);
  color-scheme:dark;
}

*{box-sizing:border-box}
body{margin:0;display:flex;min-height:100vh;background:var(--bg)}
button,input,select,textarea{font:inherit}
button,a{touch-action:manipulation}

/* Un serif da display ha discendenti lunghi e, se il ripiego usa le cifre
   minuscole, 3 e 9 scendono sotto la riga: il numero si vede storto solo su
   certi valori, che e' il difetto peggiore, quello a intermittenza. */
h1,h2,.stat strong,.mark{font-family:var(--display);font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}

/* ---------------------------------------------------------------- barra */
aside{
  position:fixed;width:246px;height:100vh;
  background:var(--panel);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:24px 16px;
}
.brand{display:flex;align-items:center;gap:12px}
.mark{
  display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--brand-solid);color:var(--brand-on);
  font-size:22px;letter-spacing:-.02em;
}
.brand-name,.brand>div{font-size:13px;font-weight:700;letter-spacing:.18em;color:var(--ink)}
.brand small{
  display:block;margin-top:5px;font-size:12px;font-weight:400;
  letter-spacing:.02em;color:var(--ink-muted);
}

nav{margin-top:34px;display:grid;gap:4px}
nav button{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;                 /* 44px e' la misura sotto cui un dito manca */
  padding:0 12px;border:0;border-radius:6px;
  background:transparent;color:var(--ink-muted);
  font-size:15px;text-align:left;cursor:pointer;
}
nav button:hover{background:var(--s2);color:var(--ink)}
nav button{position:relative}
nav button.active{background:var(--s3);color:var(--ink);font-weight:600}
nav button.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
/* Il contatore compare solo quando c'e' qualcosa da guardare: gli zeri non si
   disegnano, e un totale che non chiede niente a nessuno e' inchiostro. */
nav .conta{
  min-width:22px;padding:2px 7px;border-radius:999px;
  background:var(--s3);color:var(--ink);
  font-size:12px;font-weight:700;text-align:center;
}
nav .conta:empty{display:none}
nav .conta.urgente{background:var(--err-bg);color:var(--err)}

.aside-bottom{margin-top:auto;padding-top:20px;color:var(--ink-muted);font-size:13px;line-height:1.65}
.aside-bottom small{display:block;margin-top:6px;font-size:12px;color:var(--ink-faint)}
.label,.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:700;text-transform:uppercase}
.label{color:var(--ink-muted)}
.eyebrow{color:var(--brand)}

/* -------------------------------------------------------------- pagina */
main{margin-left:246px;width:calc(100% - 246px);max-width:1700px;padding:32px 32px 56px}
header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
h1{margin:8px 0 0;font-size:30px;line-height:1.1;letter-spacing:-.01em}
h2{font-size:24px;margin:0;letter-spacing:-.005em}
h3{font-size:16px;margin:0 0 10px;font-weight:650}

/* --------------------------------------------------------------- bottoni */
button{
  min-height:44px;padding:0 16px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:var(--s2);color:var(--ink);
  font-size:14px;font-weight:600;cursor:pointer;
}
button:hover{background:var(--s3)}
button:disabled{cursor:default;opacity:.4}
/* Un bordo al 7% e nessun fondo non e' un pulsante: e' un rettangolo che si
   scopre passandoci sopra. Qui ogni bottone ha un fondo suo. */
button:focus-visible,a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.primary{background:var(--brand-solid);border-color:var(--brand-solid);color:var(--brand-on)}
.primary:hover{background:#1a9669;border-color:#1a9669}
.link-button{
  min-height:0;padding:0;border:0;background:transparent;color:var(--brand);
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
}
.link-button:hover{background:transparent;color:#7fdcbb}
/* Tornare indietro non e' ne' un passo avanti ne' un danno: il verde lo
   metterebbe in fila con le CTA, il rosso lo confonderebbe con "Annulla
   intervento", che invece ferma tutto. Resta in grigio, secondario. */
.link-indietro{color:var(--ink-muted);font-weight:500}
.link-indietro:hover{background:transparent;color:var(--ink)}

/* ---------------------------------------------------------------- avvisi
   Le telefonate reali attive sono l'informazione piu' pericolosa della pagina:
   prende il rosso piu' forte, e nessun'altra tinta le arriva vicino. */
.notice{
  display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  margin-bottom:24px;padding:13px 16px;border-radius:10px;
  background:var(--info-bg);border:1px solid var(--border);
  color:var(--ink);font-size:14px;
}
.notice strong{font-weight:700}
.notice span{color:var(--ink-muted)}
.notice.live{background:var(--err-bg);border-color:var(--err);color:var(--ink)}
.notice.live strong{color:var(--err)}

/* ------------------------------------------------------------- contatori */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px 18px}
.stat span{display:block;font-size:13px;color:var(--ink-muted)}
.stat strong{display:block;margin-top:6px;font-size:34px;line-height:1;font-weight:700}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}
.toolbar input{max-width:340px}

.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:22px;margin-bottom:18px}

/* ------------------------------------------------------------- tabelle */
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th{
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--ink-muted);
}
td{padding:14px;border-bottom:1px solid var(--border);vertical-align:top}
tr:last-child td{border-bottom:0}
td small{display:block;margin-top:4px;font-size:13px;color:var(--ink-muted)}
tbody tr:hover{background:var(--s1)}

/* -------------------------------------------------------------- badge
   Lo stesso stato ha lo stesso colore ovunque: nella tabella, nel dettaglio,
   nella cronologia. Un colore che cambia schermata smette di voler dire
   qualcosa, e i "quasi uguali" sono peggio dei "diversi": non si nota che sono
   cambiati, si nota solo che qualcosa non torna.
   Il colore segnala LAVORO, non esito. Cio' che e' chiuso resta grigio: non
   vuol dire meno importante, vuol dire fatto. */
.badge{
  display:inline-block;padding:4px 10px;border-radius:999px;white-space:nowrap;
  font-size:12px;font-weight:700;
  background:var(--s3);color:var(--ink-muted);       /* chiuso, o sconosciuto */
}
.badge.ricerca,.badge.da_chiamare,.badge.in_corso,.badge.pianificato{background:var(--wait-bg);color:var(--wait)}
.badge.assegnato,.badge.accettato{background:var(--info-bg);color:var(--info)}
.badge.ticket_simulato{background:var(--warn-bg);color:var(--warn)}
.badge.ticket_pronto{background:var(--info-bg);color:var(--info)}
.badge.contatti_inviati,.badge.consegna_simulata,.badge.inviato,.badge.consegnato{background:var(--ok-bg);color:var(--ok)}
.badge.gestione_umana,.badge.fallito,.badge.tardivo{background:var(--err-bg);color:var(--err)}
.badge.concluso,.badge.annullato,.badge.saltato,.badge.rifiutato,.badge.timeout,.badge.non_risposto{background:var(--s3);color:var(--ink-muted)}

.empty{padding:44px 16px;text-align:center;color:var(--ink-muted);font-size:14px}

/* ----------------------------------------------------------- riquadri */
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px}
.provider-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

/* Se una card si apre, ha una striscia colorata a sinistra, e si vede PRIMA di
   toccarla. Il cambio di colore al passaggio del mouse non basta: sul telefono
   il mouse non esiste, e su un monitor bisogna comunque provare a toccare tutto
   per scoprire cosa si apre. */
.provider{position:relative;padding-left:26px;overflow:hidden;cursor:pointer}
.provider::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand)}
.provider.reserve::before{background:var(--gold)}
.provider:hover{background:#161c29}
.provider p{font-size:14px;line-height:1.6;color:var(--ink-muted)}
.provider footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}

.detail-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px}
.details{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.details dt{margin-bottom:5px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.details dd{margin:0;font-size:15px;overflow-wrap:anywhere}

.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.steps span{padding:7px 11px;border-radius:999px;background:var(--s2);color:var(--ink-muted);font-size:13px}
.steps span.current{background:var(--s4);color:var(--ink);font-weight:650}

/* ----------------------------------------------------- simulatore tasti */
.simulator{background:#0e1420;border:1px solid var(--border-strong)}
.simulator small{color:var(--ink-muted)}
.simulator p{font-size:15px;line-height:1.7;color:var(--ink)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keys button{min-height:64px;padding:10px 8px;flex-direction:column}
.keys b{display:block;margin-bottom:5px;font-size:22px;font-family:var(--display)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ------------------------------------------------------------ cronologia */
.timeline{margin:0;padding:0;list-style:none}
.timeline li{padding:0 0 18px 16px;border-left:2px solid var(--border);font-size:14px;line-height:1.5;color:var(--ink)}
.timeline small{display:block;margin-bottom:4px;font-size:12px;color:var(--ink-muted)}

.message{
  padding:16px;border-radius:12px;white-space:pre-wrap;line-height:1.7;font-size:14px;
  background:var(--s1);border:1px solid var(--border);color:var(--ink);
}
.cta{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.cta a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:var(--s2);color:var(--brand);text-decoration:none;font-size:14px;font-weight:600;
}
.cta a:hover{background:var(--s3)}
.muted{color:var(--ink-muted);font-size:14px;line-height:1.65}

/* ----------------------------------------------------------------- campi */
input,select,textarea{
  width:100%;min-height:44px;padding:10px 12px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:#0d1220;color:var(--ink);
}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
label{display:block;margin-bottom:16px;font-size:13px;font-weight:650;color:var(--ink-muted)}
label input,label select,label textarea{margin-top:6px;color:var(--ink)}
textarea{min-height:88px;resize:vertical;line-height:1.6}
label.check{display:flex;gap:10px;align-items:center;min-height:44px;color:var(--ink)}
label.check input{width:auto;min-height:0;margin:0;accent-color:var(--brand)}

/* L'ombra e' una grammatica, non decorazione: ce l'ha solo cio' che sta sopra
   il resto. Qui sta sopra soltanto la finestra. */
dialog{
  width:min(660px,94vw);max-height:90vh;padding:24px;
  border:1px solid var(--border-strong);border-radius:16px;
  background:var(--panel);color:var(--ink);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
}
dialog::backdrop{background:rgba(5,8,14,.72)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-head h2{margin:0}
#fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.full{grid-column:1/-1}
#error,#form-error:not(:empty){
  margin-bottom:14px;padding:12px 14px;border-radius:10px;
  background:var(--err-bg);border:1px solid var(--err);color:var(--ink);font-size:14px;
}
.provider-form{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

footer{margin-top:24px;font-size:12px;color:var(--ink-muted);line-height:1.7}
footer span{display:block;color:var(--ink-faint)}
.plan{
  white-space:pre-wrap;font-family:var(--ui);font-size:14px;line-height:1.8;
  overflow-wrap:anywhere;color:var(--ink-muted);margin:0;
}

/* ------------------------------------------------------------ adattamenti */
@media(max-width:1080px){
  aside{width:210px;padding:20px 12px}
  main{margin-left:210px;width:calc(100% - 210px);padding:26px 20px 48px}
  .grid,.provider-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{display:block}
  aside{position:static;width:100%;height:auto;padding:16px;border-right:0;border-bottom:1px solid var(--border)}
  .brand small,.aside-bottom{display:none}
  nav{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
  nav button{padding:0 12px}
  main{margin:0;width:100%;padding:20px 16px 44px}
  .stats{grid-template-columns:1fr 1fr}
  .provider-form,#fields{grid-template-columns:1fr}
  .full{grid-column:auto}
  .details{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  .toolbar input{max-width:none}
  h1{font-size:24px}
  h2{font-size:20px}
  .detail-head{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------- blocchi
   Un mucchio per volta, uno sotto l'altro. Il titolo di un blocco e' un titolo
   vero (serif, 24px, col numero accanto): se avesse la stessa taglia delle
   righe sotto, la separazione — che e' tutto il senso dei blocchi — si
   vedrebbe solo cercandola. */
.blocco{margin-bottom:30px}
.blocco h2{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.conta-blocco{
  font-family:var(--ui);font-size:13px;font-weight:700;
  min-width:24px;padding:3px 9px;border-radius:999px;
  background:var(--s3);color:var(--ink);
}
.b-umano .conta-blocco{background:var(--err-bg);color:var(--err)}
.blocco-nota{margin:0 0 12px}
.righe{display:grid;gap:8px}

/* Le regole del vecchio elenco a schede sono state tolte in 0.9.42.
   Adesso «riga» e' una <tr> dentro .tabella: un display:grid su una tr la
   scardina dalla griglia della tabella, e i dati escono impilati invece che
   incolonnati. Restano .riga-id e .riga-allarme, che sono ancora usate.
   Le regole tolte sono in git alla 0.9.41. */

/* --------------------------------------------------- quando risponde
   I giorni sono sette caselle in fila e non un menu: si vede a colpo d'occhio
   quali sono accesi, e un buco nella settimana si nota senza aprire niente. */
.disponibilita{display:flex;flex-direction:column;gap:10px}
.disponibilita .et{font-size:12px;color:var(--ink-faint)}
.disponibilita .fascia{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* `hidden` da solo non basta: una regola con display:flex vince sul display:none
   del browser, e il blocco restava visibile anche con "Sempre disponibile"
   spuntato. Risultato: il modulo mostrava giorni e ore, qualcuno li compilava, e
   al salvataggio non contavano niente -- una pagina che chiede un dato e poi lo
   butta. Trovato il 22/09/2026 guardando una scheda salvata con 08:00-20:00
   compilato e le fasce vuote. */
.disponibilita .fascia[hidden]{display:none}
.disponibilita .giorni{display:flex;flex-wrap:wrap;gap:6px}
.disponibilita .giorni .check{
  min-height:44px;padding:0 10px;border:1px solid var(--border);border-radius:10px;
  display:flex;align-items:center;gap:6px;margin:0;
}
.disponibilita .ore{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--ink-muted)}
.disponibilita .ore input{
  min-height:44px;padding:0 10px;margin-left:6px;border-radius:10px;
  background:var(--s1);border:1px solid var(--border);color:var(--ink);font-family:inherit;
}
.badge.fuori-ora{background:var(--s3);color:var(--ink-muted);margin-left:8px}

/* ------------------------------------------------------- tabelle dense
   Una tabella si legge scorrendo in verticale: le colonne strette stanno
   attaccate, le righe respirano poco, e l'occhio confronta due soccorritori
   senza doverli tenere a mente. E' l'opposto di una carta, ed e' il motivo per
   cui la rubrica non e' piu' fatta di carte. */
.tabella{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.tabella table{width:100%;border-collapse:collapse;font-size:14px}
.tabella th{
  text-align:left;padding:10px 14px;background:var(--s1);white-space:nowrap;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);
}
.tabella th[data-ord]{cursor:pointer;color:var(--ink-muted)}
.tabella th[data-ord]:hover,.tabella th[data-ord]:focus-visible{color:var(--ink)}
.tabella td{padding:10px 14px;border-top:1px solid var(--s2);vertical-align:top}
.tabella tr.riga{cursor:pointer}
.tabella tr.riga:hover td{background:var(--s1)}
.tabella .larga{min-width:180px}
.tabella .num{text-align:right;font-variant-numeric:tabular-nums}
.tabella .piccolo{font-size:13px;color:var(--ink-muted)}
/* Una scheda senza numero non viene chiamata: e' un guasto, non un dettaglio. */
.tabella .manca{color:var(--err)}
.tabella tr.spenta td{opacity:.55}
.tabella tr.sicurezza td{background:rgba(255,255,255,.04)}
.badge.attivo-ora{background:var(--ok-bg);color:var(--ok)}
.r-ora{min-height:44px;display:flex;align-items:center;gap:8px;margin:0}

/* Le caselle della copertura. Zero non e' "poco": e' un buco, e si vede prima
   di leggere il numero. */
.cop{text-align:center;font-variant-numeric:tabular-nums;font-weight:700}
.cop.buco{background:var(--err-bg);color:var(--err)}
.cop.sottile{background:rgba(184,134,47,.26);color:var(--warn)}
.cop.coperta{color:var(--ok)}

/* Una riga che chiede una persona si vede prima di leggerla. Stesso rosso
   della fascia in cima: e' la stessa cosa, vista da due posti. */
.tabella tr.allarme td{background:var(--err-bg)}
.tabella .azioni-riga{white-space:nowrap;text-align:right}
.tabella .azioni-riga button{margin-left:6px}
/* In una tabella densa un pulsante da 44px fa una riga alta il doppio delle
   altre. Il minimo dei 44px nasce per il dito, non per il mouse: resta dove
   c'e' un dito. */
button.piccolo{font-size:13px;padding:6px 10px;min-height:36px}
@media (pointer:coarse){button.piccolo{min-height:44px}}

/* ------------------------------------------------------------ filtri
   Stanno in una riga sola sopra l'elenco: un filtro che si apre da un menu e'
   un filtro che nessuno sa di avere, e quello che non sai di avere resta
   acceso e ti fa guardare mezzo archivio credendo di guardarlo tutto. */
.toolbar.filtri{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
/* La ricerca e' un filtro come gli altri e sta nella stessa struttura:
   etichetta sopra, campo sotto. Prima era un campo nudo in mezzo a campi con
   l'etichetta, e si posava piu' in basso di tutti: una riga storta si nota
   prima del filtro che contiene. */
.filtro.cerca{flex:1 1 280px}
.filtro.cerca input{width:100%;box-sizing:border-box}
.filtro{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-faint)}
.filtro select,.filtro input{
  min-height:44px;padding:0 10px;border-radius:10px;font-family:inherit;font-size:14px;
  background:var(--s1);border:1px solid var(--border);color:var(--ink);
}

/* Il paginatore dice sempre DOVE SEI, non solo dove puoi andare: "da 26 a 50
   di 1.284" e' un'informazione, tre frecce non lo sono. */
.paginatore{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.paginatore .muted{margin-right:auto}
.pag{
  min-width:44px;min-height:44px;padding:0 10px;border-radius:10px;font-family:inherit;
  background:none;border:1px solid var(--border);color:var(--ink-muted);cursor:pointer;
}
.pag:hover:not(:disabled){border-color:var(--border-strong);color:var(--ink)}
.pag:disabled{opacity:.35;cursor:default}
.pag.qui{background:var(--s3);border-color:var(--border-strong);color:var(--ink);font-weight:700}

/* ----------------------------------------------------------- cruscotto
   Le carte della sorveglianza dicono DA QUANTO, e il numero e' la cosa piu'
   grande della carta: il pallino dice solo se guardare o no. Il grigio non e'
   un terzo stato fra verde e giallo, vuol dire "non lo sappiamo" -- e una cosa
   che non sappiamo non deve somigliare a una che va bene. */
.vigili{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.vigile{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--s1)}
.vigile-capo{display:flex;align-items:center;gap:8px}
.vigile .pallino{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:0 0 auto}
.v-ok .pallino{background:var(--ok)}
.v-attenzione .pallino{background:var(--warn-mark)}
.v-attenzione{border-color:var(--warn-mark)}
.vigile-quando{font-size:20px;margin:8px 0 6px;font-variant-numeric:tabular-nums}
.vigile p{margin:0;font-size:13px;line-height:1.45}

.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.numero{padding:14px 16px;border:1px solid var(--border);border-radius:12px;
        background:var(--s1);display:flex;flex-direction:column;gap:2px}
.numero-et{font-size:13px;color:var(--ink-muted)}
.numero strong{font-size:28px;font-variant-numeric:tabular-nums}
.numero .n-ok{color:var(--ok)}
.numero .n-err{color:var(--err)}
.numero-nota{font-size:12px;color:var(--ink-faint)}

.legenda{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px;font-size:13px;color:var(--ink-muted)}
.legenda span{display:flex;align-items:center;gap:7px}
.chiave{width:10px;height:10px;border-radius:3px;display:inline-block}
.grafico{display:flex;align-items:flex-end;gap:8px;min-height:236px}
.colonna-g{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
/* Due millimetri di fondo fra un pezzo e l'altro: senza, due tinte vicine si
   leggono come una banda sola e il confine lo si indovina. */
.pila{width:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:1px}
.pezzo{display:block;width:100%}
.p-primo_giro{background:var(--g-primo)}
.p-sicurezza{background:var(--g-sicurezza)}
.p-umana{background:var(--g-umana)}
.p-altro{background:var(--g-altro)}
.et-g{font-size:11px;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.colonna-g .tip{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  opacity:0;pointer-events:none;transition:opacity .12s;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:8px;
  padding:8px 10px;font-size:12px;white-space:nowrap;z-index:3;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.colonna-g:hover .tip,.colonna-g:focus-within .tip{opacity:1}

/* -------------------------------------------------------------- fascia
   Sta sopra tutto e fuori dalle viste: il caso peggiore del sistema non puo'
   dipendere da quale pagina si sta guardando. Rossa solo quando qualcosa non
   va; quando il sistema aspetta soltanto una conferma che solo una persona puo'
   dare resta in grassetto, in colore normale. E' la stessa regola della 0.9.25:
   un colore che grida a ogni funzionamento corretto smette di voler dire
   qualcosa, e il giorno che conta non lo guarda piu' nessuno. */
#banner[hidden]{display:none}
.banner{
  display:flex;align-items:center;gap:16px;
  margin:0 0 18px;padding:14px 18px;
  border:1px solid var(--border-strong);border-radius:12px;background:var(--s2);
}
.banner-testo{flex:1 1 auto;min-width:0}
.banner strong{display:block;font-size:15px}
.banner span{display:block;margin-top:2px;font-size:14px;color:var(--ink-muted)}
.banner button{flex:0 0 auto;min-height:44px}
.banner.grave{border-color:var(--err);background:var(--err-bg)}
.banner.grave span{color:var(--ink)}
@media(max-width:720px){
  .banner{flex-direction:column;align-items:stretch;gap:10px}
}

/* -------------------------------------------------------------- adesso
   Cosa sta succedendo, e tocca a me. */
.adesso{
  position:relative;margin:0 0 18px;padding:16px 18px 16px 24px;
  border:1px solid var(--border);border-radius:12px;background:var(--panel);
}
.adesso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ink-faint)}
.adesso-frase{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.adesso-tocca{margin:6px 0 0;font-size:14px;color:var(--ink-muted)}

/* Stesso stato, stesso colore ovunque: pastiglia, striscia della riga,
   striscia della testata. Se cambiasse da una schermata all'altra, chi passa
   fra le due dovrebbe rimparare la legenda ogni volta. */
.s-ricerca::before{background:var(--wait)}
.s-assegnato::before{background:var(--info)}
.s-ticket_simulato::before{background:var(--warn-mark)}
.s-ticket_pronto::before{background:var(--info)}
.s-contatti_inviati::before{background:var(--ok)}
.s-gestione_umana::before{background:var(--err)}
.s-concluso::before,.s-annullato::before,.s-accettato::before,.s-rifiutato::before{background:var(--ink-faint)}
/* Il rosso piu' forte della tavolozza va all'urgenza che non ha ancora preso
   nessuno, e nient'altro le arriva vicino. */
.s-gestione_umana{background:var(--err-bg);border-color:var(--err)}
.s-gestione_umana .adesso-frase{color:var(--ink)}

@media(max-width:720px){
  .adesso-frase{font-size:16px}
  .toolbar input{max-width:none}
}

/* ------------------------------------------------------------- contatori
   Non sono un riassunto, sono scorciatoie: ognuno porta al suo blocco. Un
   numero che dice che c'e' qualcosa da fare ma non ci porta e' inchiostro.
   Lo zero qui resta scritto — spento — perche' "nessuno da gestire a mano" e'
   esattamente cio' che si vuole vedere aprendo la pagina. */
.cifre{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.cifra{
  display:block;padding:14px 18px;border-radius:12px;text-decoration:none;
  background:var(--panel);border:1px solid var(--border);color:var(--ink);
}
.cifra:hover{background:#161c29}
.cifra span{display:block;font-size:13px;color:var(--ink-muted)}
.cifra strong{display:block;margin-top:4px;font-family:var(--display);font-size:34px;line-height:1;font-variant-numeric:lining-nums}
.cifra.c-cerca strong{color:var(--wait)}
.cifra.c-assegnati strong{color:var(--info)}
.cifra.c-attenzione strong{color:var(--err)}
.cifra.zero{pointer-events:none}
.cifra.zero strong{color:var(--ink-faint)}

.riga-id{font-size:13px;color:var(--ink-faint)}
.riga-allarme{font-size:13px;font-weight:650;color:var(--err)}
.b-attenzione .conta-blocco{background:var(--err-bg);color:var(--err)}

@media(max-width:720px){
  .cifre{grid-template-columns:1fr;gap:8px}
  .cifra{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .cifra span{font-size:14px}
  .cifra strong{margin:0;font-size:26px}
}

.adesso-contatti{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.contatto{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--border-strong);border-radius:8px;
  background:var(--s2);color:var(--brand);
  font-size:14px;font-weight:600;text-decoration:none;
}
.contatto:hover{background:var(--s3)}

/* Le azioni che non si annullano stanno staccate dalle altre: in una coda che
   si smaltisce di fretta, un bersaglio distruttivo a un centimetro da uno
   normale e' un bersaglio che prima o poi si colpisce. */
.actions.pericolose{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.actions.pericolose button{border-color:var(--err);color:var(--err);background:transparent}
.actions.pericolose button:hover{background:var(--err-bg)}
button.conferma{
  background:var(--err-bg);border-color:var(--err);color:var(--ink);
  font-weight:600;text-align:left;padding:12px 16px;max-width:560px;line-height:1.4;
}
.s-arrivata::before{background:var(--ok)}
.badge.arrivata{background:var(--ok-bg);color:var(--ok)}

/* Lo storico e i rimasugli sono grigi: non chiedono niente a nessuno. */
.b-chiusi h2,.b-fuori h2{color:var(--ink-muted)}

/* ---------------------------------------------------------------- flusso
   Il percorso dell'intervento. Nella riga e' compatto e si legge a colpo
   d'occhio; nel dettaglio e' grande e ogni icona ha il suo nome sotto.
   Le icone sono bottoni veri: la riga non lo e' piu', perche' un bottone dentro
   un bottone non e' HTML valido e col tabulatore diventa inutilizzabile. */
.flusso{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-top:10px}
.nodo{display:flex;align-items:center}
.tratto{width:18px;height:2px;background:var(--border-strong);margin:0 2px;align-self:center}
.tratto.debole{background:repeating-linear-gradient(90deg,var(--ink-faint) 0 3px,transparent 3px 7px)}
.flusso.grande .tratto{width:30px}

.pit{
  display:grid;place-items:center;position:relative;
  width:34px;height:34px;min-height:34px;padding:0;
  border-radius:999px;border:1px solid var(--border-strong);
  background:var(--s2);color:var(--ink-muted);cursor:pointer;
}
.pit svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pit:hover{background:var(--s4);color:var(--ink)}
.flusso.grande .pit{width:52px;height:52px;min-height:52px}
.flusso.grande .pit svg{width:28px;height:28px}

/* Lo stato di un passo usa gli stessi colori degli stati di un intervento. */
.p-fatto{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.p-corso{border-color:var(--wait);color:var(--wait);background:var(--wait-bg)}
.p-fallito{border-color:var(--err);color:var(--err);background:var(--err-bg)}
.p-saltato{border-style:dashed;color:var(--ink-faint)}
.p-futuro{color:var(--ink-faint);background:transparent}
/* Cio' che non sappiamo si vede che non lo sappiamo. */
.p-ignoto{border-style:dashed;border-color:var(--ink-faint);color:var(--ink-faint);background:transparent}

.spunta{
  position:absolute;right:-3px;bottom:-3px;
  width:16px;height:16px;border-radius:999px;
  background:var(--ok);color:#08200f;
  font-size:11px;font-style:normal;font-weight:800;
  display:grid;place-items:center;
}
.flusso.grande .spunta{width:20px;height:20px;font-size:13px;right:-2px;bottom:-2px}

.flusso.grande{align-items:flex-start}
.flusso.grande .nodo{flex-direction:column;align-items:center;width:104px}
/* il tratto si allinea alla riga delle icone, non al centro della colonna */
.flusso.grande .tratto{align-self:flex-start;margin-top:26px;width:16px}
.pit-nome{
  margin-top:8px;font-size:12px;line-height:1.35;text-align:center;color:var(--ink-muted);
  max-width:104px;
}
.percorso{overflow-x:auto}

@media(max-width:1200px){
  .flusso.media .pit{width:44px;height:44px;min-height:44px}
  .flusso.media .pit svg{width:24px;height:24px}
}
@media(max-width:900px){
  .flusso.media{justify-content:flex-start}
}
@media(max-width:720px){
  .flusso.grande .nodo{width:84px}
}

#popup{width:min(680px,94vw)}
#popup .details{grid-template-columns:1fr 1fr;gap:14px}
#popup .details dd{font-size:15px}
#popup .message{max-height:46vh;overflow:auto;margin-top:8px}

/* Riferito non e' confermato: mezza tinta, bordo continuo ma non pieno. */
.p-riferito{border-color:var(--warn);color:var(--warn);background:transparent}
.badge.in_viaggio{background:var(--info-bg);color:var(--info)}
.s-in_viaggio::before{background:var(--info)}

/* Lo stesso soccorritore richiamato piu' volte e' una icona sola con quante
   volte: sette cerchi rossi in fila dicono sette volte "e' andata male" e non
   dicono a chi. */
.volte{
  position:absolute;right:-4px;top:-4px;
  min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--panel);border:1px solid currentColor;
  font-size:10.5px;font-style:normal;font-weight:700;
  display:grid;place-items:center;
}
.flusso.grande .volte{min-width:22px;height:22px;font-size:12px}

/* Misura intermedia: nell'elenco il percorso e' la cosa che si guarda, e lo
   spazio a destra era vuoto. Senza nomi sotto le icone — li' servono a chi
   studia l'intervento, non a chi scorre la lista. */
.flusso.media{margin-top:0;justify-content:flex-start}
.flusso.media .pit{width:50px;height:50px;min-height:50px}
.flusso.media .pit svg{width:27px;height:27px}
.flusso.media .tratto{width:16px}
.flusso.media .spunta{width:19px;height:19px;font-size:12px}
.flusso.media .volte{min-width:20px;height:20px;font-size:11.5px}

/* --------------------------------------------------------------- avvisi
   Un'azione che non risponde niente e' indistinguibile da un'azione che non e'
   partita: chi ha salvato resta a fissare lo schermo e ripreme il pulsante.
   L'avviso compare dove guardi gia' (in basso, al centro) e se ne va da solo,
   perche' una conferma che resta li' diventa rumore da chiudere a mano. */
#avvisi{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.avviso{pointer-events:auto;cursor:pointer;max-width:min(560px,90vw);
  padding:13px 20px;border-radius:12px;font-size:15px;line-height:1.35;
  border:1px solid var(--ok,#2f6f4e);background:#10241a;color:#d8f3e3;
  box-shadow:0 12px 34px rgba(0,0,0,.45);animation:sali .18s ease-out}
.avviso.ko{border-color:var(--err,#8b3a3a);background:#2a1414;color:#f6dcdc}
@keyframes sali{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
button[disabled]{opacity:.55;cursor:progress}
@media (prefers-reduced-motion:reduce){.avviso{animation:none}}

/* Il blocco "Tocca a te" quando e' vuoto: non sparisce, si calma. */
.blocco.sereno{opacity:.75}
.blocco.sereno h2{margin-bottom:6px}
.cifra.c-tocca strong{color:var(--err)}
.cifra.c-corso strong{color:var(--wait)}
.cifra.c-chiusi strong{color:var(--ink-faint)}
.b-persona .conta-blocco{background:var(--err-bg);color:var(--err)}

/* ------------------------------------------------------------- colonne
   Tre contenitori affiancati invece di tre mucchi uno sotto l'altro. Il guadagno
   non e' estetico: le tre domande — devo fare qualcosa, sta andando avanti da
   solo, com'e' finito — si guardano insieme invece che scorrendo, e ogni
   intervento diventa una carta alta un terzo di quanto era larga una riga.
   Le colonne partono dall'alto (align-items:start): una colonna corta non deve
   allungarsi per pareggiare quella lunga, lo spazio vuoto e' informazione. */
/* Due colonne dal 17/09/2026: i conclusi hanno una pagina loro. Con tre
   tracce e due blocchi restava una colonna vuota e le altre due strette per
   niente. */
.colonne{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:24px}
.colonne .blocco{
  margin:0;padding:14px 14px 16px;
  border:1px solid var(--border);border-radius:14px;background:var(--panel);
}
.colonne .blocco h2{font-size:19px;margin-bottom:2px}
.colonne .blocco-nota{font-size:13px;line-height:1.4;margin:0 0 12px}
.colonne .blocco.sereno .blocco-nota{margin-bottom:0}
.colonne .righe{gap:10px}
/* La colonna diventa rossa solo se dentro c'e' davvero qualcosa che non va.
   Prima lo era sempre, quindi lo era anche quando conteneva solo "aspetto che
   l'auto entri in carrozzeria": un colore che grida a ogni funzionamento
   corretto smette di voler dire qualcosa. */
.b-persona{border-color:var(--border)!important}
.b-persona.grave{border-color:var(--err)!important}
.b-persona.sereno{border-color:var(--border)!important}

/* La carta: alta quanto serve, larga quanto la colonna. */
.carta{
  position:relative;display:grid;gap:5px;
  padding:12px 14px 12px 16px;
  border:1px solid var(--border);border-radius:11px;background:var(--s2,#131a26);
}
.carta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:11px 0 0 11px;background:var(--ink-faint)}
.carta.allarme{background:var(--err-bg);border-color:var(--err)}
.carta.allarme::before{background:var(--err)}
.carta-capo{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.carta-capo strong{font-size:15px;font-weight:650}
.carta-quando{font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.carta-dove{font-size:13px;color:var(--ink-muted)}
.carta p{margin:2px 0 0;font-size:13px;line-height:1.4}
.carta-azioni{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.carta-azioni .primary{min-height:34px;padding:0 12px;font-size:13px}
.fuori-colonne{margin-top:8px}

@media(max-width:1100px){
  .colonne{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .colonne{grid-template-columns:1fr}
}
/* L'etichetta in fondo alla barra: quando il sistema e' acceso non e' un'etichetta
   di ambiente, e' un avvertimento. */
.aside-bottom .label.vivo{color:var(--err)}
#impostazioni h3{margin:0 0 4px;font-size:16px}

/* --------------------------------------------- dettaglio, terza versione
   Quattro fasce a piena larghezza. Le due colonne di prima portavano riquadri di
   altezza diversa e si sfalsavano per costruzione: qualunque cosa ci mettessi
   dentro, il disallineamento era garantito. */
.testata{padding-bottom:16px}
.testata-capo{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.testata-capo h2{margin:0;font-size:26px}
.testata-dati{margin:0}
/* Le azioni stanno in alto e sempre allo stesso posto. In fondo alla pagina si
   trovano solo se si sa gia' che ci sono. */
.azioni .adesso-frase{margin:0 0 4px;font-size:16px;line-height:1.45}
.azioni .adesso-tocca{margin:0 0 14px;font-weight:650;color:var(--err)}
/* Stessa evidenza, senza l'allarme: e' un passaggio normale del lavoro, non un
   guasto. Resta in grassetto perche' e' comunque l'istruzione della pagina. */
.azioni .adesso-passo{margin:0 0 14px;font-weight:650;color:var(--ink)}
/* Le CTA dell'intervento sono verdi come i pulsanti "Chiama". La consegna a
   mano non e' un ripiego: e' l'azione che chiude quel passaggio, e un pulsante
   bianco in mezzo a due verdi si legge come secondario. */
.azioni .actions button{color:var(--brand)}
.azioni .actions .primary{color:var(--brand-on)}
.azioni .actions.pericolose button{color:var(--err)}
.azioni .muted{margin:0 0 14px}
.azioni.allarme{border-color:var(--err)}
.azioni .actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.azioni .actions+.actions{margin-top:12px}
.azioni .actions.prova{padding-top:12px;border-top:1px solid var(--border)}
.azioni .actions.prova .muted{margin:0;font-size:13px}
.azioni .actions.pericolose{padding-top:12px;border-top:1px solid var(--border)}

/* Le schede: una alla volta, quindi nessun incastro e nessuna pagina lunga tre
   schermate. Quale sia aperta si ricorda, cosi' passando da un intervento
   all'altro non si perde il punto di vista. */
.tab-bar{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 16px;
  border-bottom:1px solid var(--border);padding-bottom:10px}
.tab-bar button{min-height:36px;padding:0 14px;font-size:14px;
  background:transparent;border-color:transparent;color:var(--ink-muted)}
.tab-bar button:hover{background:var(--s3);color:var(--ink)}
.tab-bar button.attiva{background:var(--s3);color:var(--ink);border-color:var(--border)}
.schede h3{margin:0 0 8px;font-size:16px}
/* Il rimedio dentro l'avviso che annuncia il guaio. */
.avviso-annulla{margin-left:12px;min-height:30px;padding:0 12px;font-size:13px;
  background:transparent;border-color:currentColor;color:inherit}
/* Un dato che si scrive, non un'azione che si lancia. */
.campo-inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.campo-inline label{font-size:13px;color:var(--ink-muted)}
.campo-inline input{min-height:38px;padding:0 12px;min-width:220px}
.campo-inline button{min-height:38px;padding:0 14px;font-size:13px}
/* La trascrizione: intera, ma dentro un riquadro che scorre. Una telefonata di
   tre minuti sono trenta righe, e in fondo a una pagina gia' lunga diventerebbe
   il motivo per non arrivarci mai. */
.trascrizione .message.scorre{max-height:340px;overflow:auto;white-space:pre-wrap;line-height:1.6}
.qualita-male{color:var(--err)}

/* Lo storico ha le stesse carte degli interventi ma nessuna colonna da
   affiancare: si distribuisce in griglia e usa tutta la larghezza, perche' qui
   si scorre cercando una cosa, non si confrontano tre mucchi. */
.colonne-storico{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.verso-storico{margin:18px 0 0}

/* Soccorso-NET, tappa 3: la stessa segnalazione anche fuori dalle tabelle. */
.manca{color:var(--err)}

/* La mappa della copertura (24/09/2026). */
.mappa-controlli{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;margin:4px 0 10px}
.mappa-controlli .fasce{display:flex;flex-wrap:wrap;gap:4px}
.mappa-controlli .fasce button{padding:6px 10px;font-size:13px}
.mappa-controlli .fasce button.attivo{background:var(--s3);color:var(--ink);border-color:var(--ink-faint);font-weight:600}
#mappa-copertura{height:460px;border:1px solid var(--border);border-radius:12px;background:var(--bg);margin:0 0 8px;z-index:0}
#mappa-copertura .empty{padding:24px}
.legenda-mappa{line-height:1.9}
.legenda-mappa .sw{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin:0 5px 0 12px}
.legenda-mappa .sw:first-child{margin-left:0}
.legenda-mappa .punto{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;vertical-align:-1px;margin:0 5px 0 8px}
.legenda-mappa .rombo{margin:0 5px 0 8px}
.segno-carrozzeria{color:#fff;font-size:20px;line-height:20px;text-align:center;text-shadow:0 0 3px #000,0 0 6px #000}
.leaflet-container{font:inherit}
.leaflet-tooltip{font-size:13px;line-height:1.45}
.sfondo-spento{filter:saturate(.25) brightness(1.05)}

/* Scheda veloce di un intervento (25/09/2026) */
#popup .anteprima dd{font-size:15px;line-height:1.35}
.anteprima-contatti{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.anteprima-piede{display:flex;justify-content:flex-end;margin-top:16px}
tr.riga[data-riga]{cursor:pointer}

/* Giallo: da guardare, ma il soccorso va avanti (25/09/2026). Il rosso resta per
   quando qualcuno e' a piedi. */
.tabella tr.giallo td{background:var(--warn-bg)}
.riga-giallo{font-size:13px;font-weight:650;color:var(--warn)}
.azioni.giallo{border-color:var(--warn)}

.conta-blocco.urgente{background:var(--err-bg);color:var(--err)}

/* 25/09/2026 — la vista (service provider o un soccorritore) e i numeri dei carroattrezzi */
aside .vista{display:flex;flex-direction:column;gap:6px;margin:22px 0 18px}
aside .vista[hidden]{display:none}
aside .vista select{width:100%;padding:8px 10px;border-radius:10px;font:inherit;
 background:rgba(255,255,255,.06);color:inherit;border:1px solid rgba(255,255,255,.18)}
fieldset.carroattrezzi{border:1px solid rgba(127,127,127,.35);border-radius:12px;padding:12px 14px;margin:4px 0}
fieldset.carroattrezzi legend{padding:0 6px;font-weight:600}
fieldset.carroattrezzi .provider-form{margin-bottom:8px}

/* 26/09/2026 — le note dietro una "i": si aprono passandoci sopra, col Tab o toccandole */
.info{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;
 margin-left:10px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-muted);color:var(--ink-muted);
 cursor:help;font:italic 700 12px/1 Georgia,"Times New Roman",serif;letter-spacing:0;text-transform:none;flex:none}
.info:hover,.info:focus-visible,.info.aperta{border-color:var(--brand);color:var(--brand);outline:none}
.info-testo{display:none;position:fixed;z-index:1000;top:0;left:0;width:min(420px,80vw);
 padding:12px 14px;border-radius:12px;background:#1a2130;border:1px solid var(--border-strong);
 box-shadow:0 12px 30px rgba(0,0,0,.35);color:var(--ink);text-align:left;white-space:normal;cursor:auto;
 font:400 13.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.info-testo p{margin:0}
.info-testo p+p{margin-top:8px}
.info:hover .info-testo,.info:focus-within .info-testo,.info.aperta .info-testo{display:block}
.info-sola{margin:0 0 10px}
.info-sola .info{margin-left:0}
legend .info{margin-left:8px}

/* 26/09/2026 — Il sistema: una card sola, la frase in cima e le tre domande sotto */
.sistema{border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden}
.sistema.s-attenzione{border-color:var(--warn)}
.sistema.s-ko{border-color:var(--err)}
.salute{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:650;padding:16px 18px;background:var(--s1);
 border-bottom:1px solid var(--border)}
.salute-segno{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
 font-size:16px;font-weight:800;color:#0a0e15;background:var(--ok)}
.s-attenzione .salute-segno{background:var(--warn)}
.s-ko .salute-segno{background:var(--err)}
.controlli{list-style:none;margin:0;padding:0}
.controlli li{display:flex;gap:14px;align-items:flex-start;padding:13px 18px}
.controlli li+li{border-top:1px solid var(--border)}
.controlli strong{display:block;font-size:15px}
.c-risposta{display:block;margin-top:2px;color:var(--ink-muted);font-size:14.5px}
.c-fare{display:block;margin-top:6px;font-size:14px;color:var(--ink)}
.c-segno{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
 font-size:13px;font-weight:800;color:#0a0e15;background:var(--ok);margin-top:1px}
.c-attenzione .c-segno{background:var(--warn)}
.c-attenzione .c-risposta{color:var(--warn)}
.c-ko .c-segno{background:var(--err)}
.c-ko .c-risposta{color:var(--err)}
.c-neutro .c-segno{background:var(--ink-faint)}

/* 26/09/2026 — la prima card del dettaglio: cliente a sinistra, operatore a destra */
.testata-riga{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.testata-titolo{margin:0;font-size:26px}
.testata-due{display:grid;grid-template-columns:1fr 1fr;gap:0}
.testata-meta{min-width:0}
.testata-meta+.testata-meta{border-left:1px solid var(--border);padding-left:24px;margin-left:24px}
.testata-ruolo{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-bottom:4px}
.testata-meta h2{margin:0 0 12px;font-size:21px}
.testata-dati.uno{grid-template-columns:1fr;margin-top:18px}
.testata-vuoto{margin:4px 0 0}
@media (max-width:760px){.testata-due{grid-template-columns:1fr}
 .testata-meta+.testata-meta{border-left:0;padding-left:0;margin-left:0;border-top:1px solid var(--border);padding-top:16px;margin-top:16px}}

/* ------------------------------------------------------------ Chiamate */
.scelta-chiamate{display:flex;gap:8px}
.chiamata{border:1px solid var(--border);border-left:4px solid var(--err);border-radius:12px;background:var(--panel);padding:16px 18px;margin-bottom:12px}
.chiamata-testa{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.chiamata-azioni{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
a.bottone{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1px solid var(--brand-solid);color:var(--brand);font-weight:650;text-decoration:none;white-space:nowrap}
a.bottone:hover{background:var(--s2)}
.trascrizione summary{cursor:pointer;color:var(--ink-muted);font-weight:600}
.trascrizione pre{white-space:pre-wrap;font-family:inherit;font-size:14px;line-height:1.5;background:var(--s1);border-radius:8px;padding:10px 12px;margin:8px 0 0;max-height:260px;overflow:auto}
.tabella-chiamate td{vertical-align:top}
.tabella-chiamate .trascrizione pre{max-width:520px}
.piccolo{font-size:12px}

/* ------------------------------------------------------------ mappa degli operatori */
#mappa-operatori{height:520px;border:1px solid var(--border);border-radius:12px;background:var(--bg);margin:0 0 8px;z-index:0}
#mappa-operatori .empty{padding:24px}
.legenda-mappa .punto.quadro{border-radius:3px}
.legenda-mappa .punto.tratteggio{border:1.5px dashed #fff;background:transparent}
.segno-intervento span{display:inline-block;padding:2px 6px;border-radius:6px;color:#fff;font-size:11px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 1.5px #fff,0 1px 4px rgba(0,0,0,.5);transform:translate(-50%,-50%)}
.segno-chiamata{color:#fff;font-size:18px;line-height:22px;text-align:center;background:var(--err);border-radius:50%;box-shadow:0 0 0 2px #fff,0 1px 4px rgba(0,0,0,.5)}

/* ---- Importare i clienti da un file (06/10/2026) ---------------------------
   La finestra si allarga solo per i passi con le tabelle: le colonne del file
   e gli esiti devono stare in una riga, o non si confrontano. */
.toolbar .actions{margin-top:0}
dialog:has(.import-colonne),dialog:has(.import-esiti){width:min(880px,94vw)}
.import-colonne,.import-esiti{margin:6px 0 10px}
.import-colonne select{min-width:170px;margin:0}
.import-colonne td{vertical-align:middle}
.import-esiti{max-height:42vh;overflow:auto}
.import-stats{grid-template-columns:repeat(4,1fr);margin:4px 0 14px}
.import-stats .stat{padding:12px 14px}
.import-stats .stat strong{font-size:26px}
.import-stats .stat .piccolo{margin-top:6px;font-size:12px}
@media(max-width:720px){.import-stats{grid-template-columns:1fr 1fr}}