/* web/static/style.css — un solo foglio per tutto il sito.
   Linea grafica presa dal progetto Claude Design "EasyUAS Dark": fondo scuro
   da sala operativa, accento ciano, Space Grotesk per l'interfaccia e
   JetBrains Mono per etichette, date e codici. I valori qui sotto sono quelli
   del disegno, non riavvicinati a occhio. */

/* I caratteri stanno in static/fonts (2026-09-19): da Google Fonts ogni
   visitatore mandava il suo IP a Google. Sono i file variabili di Google Fonts
   (un file copre tutti i pesi), sottoinsiemi latin e latin-ext con gli stessi
   unicode-range; licenza SIL OFL nella stessa cartella. */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(/static/fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url(/static/fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url(/static/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --fondo:#0d141c; --superficie:#131d28; --superficie-2:#16212e; --barra:#111b25;
  --riga:#1f2c3a; --riga-forte:#26374a;
  --ink:#e8eef4; --ink-2:#c6d4e0; --soft:#8fa3b5; --tenue:#6f8598;
  /* --spento era #55697c: 3,26:1 su --fondo e 3,00:1 su --superficie, sotto la
     soglia WCAG AA 4,5:1 (testo piccolo). Schiarito al minimo che supera 4,5:1
     su entrambi i fondi in cui compare (placeholder e .vuoto su --fondo,
     .vuoto dentro .documenti/.scroll-x su --superficie): 4,94:1 su --fondo,
     4,54:1 su --superficie. */
  --spento:#758695;
  --accent:#4fc3d9; --accent-chiaro:#7fd8e8;
  --ok:#52d69b; --avviso:#e6a83d; --male:#f0707d;
  --ok-fondo:rgba(63,196,138,.14);   --ok-bordo:rgba(63,196,138,.35);
  --avviso-fondo:rgba(230,168,61,.14); --avviso-bordo:rgba(230,168,61,.35);
  --male-fondo:rgba(224,82,96,.14);  --male-bordo:rgba(224,82,96,.40);
  --ciano-fondo:rgba(79,195,217,.12); --ciano-bordo:rgba(79,195,217,.32);
  --ciano-ink:#6fd2e4;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--ink);
       font:14px/1.55 'Space Grotesk', system-ui, -apple-system, sans-serif;
       -webkit-font-smoothing:antialiased; }
::selection { background:rgba(79,195,217,.28); }

/* --- intestazione ------------------------------------------------------- */
header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
         gap:1rem; padding:0 2rem; min-height:60px; background:var(--barra);
         border-bottom:1px solid var(--riga); position:sticky; top:0; z-index:5; }
.marchio { font-size:16px; font-weight:600; letter-spacing:.01em; text-decoration:none;
           color:var(--ink); display:inline-flex; align-items:center; gap:.7rem; }
.marchio::before { content:""; width:9px; height:9px; border-radius:50%;
           background:var(--accent); box-shadow:0 0 0 4px rgba(79,195,217,.16); }
nav { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
nav a { color:var(--soft); text-decoration:none; padding:6px 13px; border-radius:5px;
        font-size:13.5px; }
nav a:hover { color:var(--ink); }
nav a.attivo { color:var(--fondo); background:var(--accent); font-weight:600; }
nav form { display:inline; background:none; border:0; padding:0; margin-left:6px;
           box-shadow:none; }
nav form button { background:none; color:var(--ink); border:1px solid var(--riga-forte);
                  font-size:13px; padding:7px 14px; font-weight:400; }
nav form button:hover { background:none; border-color:var(--accent); }

/* --- impaginazione ------------------------------------------------------ */
main { max-width:78rem; margin:0 auto; padding:1.6rem 2rem 4rem; }
main.stretto { max-width:27rem; padding-top:3.5rem; }
/* Pagine di solo testo (informativa): una colonna da leggere. */
main.testo { max-width:48rem; padding-top:2.5rem; }
main.testo p, main.testo li, main.testo td { color:var(--ink-2); line-height:1.65; }
main.testo tbody tr:hover { background:none; }
h1 { font-size:23px; font-weight:600; letter-spacing:-.01em; margin:0 0 .3rem; }
h2 { font-family:var(--mono); font-size:10.5px; font-weight:500; text-transform:uppercase;
     letter-spacing:.12em; color:var(--tenue); margin:2rem 0 .7rem; }
.sottotitolo { color:var(--soft); font-size:13.5px; margin:.2rem 0 1.4rem; }
.testata-pagina { display:flex; flex-wrap:wrap; justify-content:space-between;
                  align-items:flex-start; gap:1rem; margin-bottom:1.2rem; }

/* Pagina della pratica: contenuto a sinistra, avanzamento del gestore a destra. */
.colonne { display:grid; grid-template-columns:minmax(0,1fr) 23rem; gap:1.4rem;
           align-items:start; }
@media (max-width:62rem) { .colonne { grid-template-columns:minmax(0,1fr); } }
/* La pratica (spec 2026-10-06, §3.1): tre blocchi fratelli, la colonna laterale parte in alto. */
.colonne.pratica { grid-template-areas:"testata lato" "principale lato"; grid-template-rows:auto 1fr; }
.colonne.pratica > .testata { grid-area:testata; min-width:0; }
.colonne.pratica > .principale { grid-area:principale; min-width:0; }
.colonne.pratica > aside.avanzamento { grid-area:lato; }
@media (max-width:62rem) { .colonne.pratica { grid-template-areas:"testata" "lato" "principale"; grid-template-rows:none; } }
details.sezione > summary .descrizione { margin-left:auto; font-size:12.5px; color:var(--soft);
  text-align:right; }
.cosa-fare .pagamento form, .cosa-fare form.fattura-cliente { max-width:none; }
.cosa-fare .pagamento .oppure { margin:.6rem 0 .2rem; opacity:.7; }
.colonne .principale > h2:first-child { margin-top:0; }

/* --- la pagina della pratica: linguette, email, avanzamento (spec 2026-09-27) --- */
.linguette-pratica { border-bottom:1px solid var(--riga); gap:0; margin-bottom:1.2rem; }
.linguette-pratica a { border:0; border-bottom:2px solid transparent; border-radius:0;
                       padding:10px 14px; }
.linguette-pratica a.attiva { color:var(--ink); background:none; border-bottom-color:var(--accent);
                              font-weight:600; }
.linguette-pratica .numero { color:var(--tenue); }
.materiale-interno, .altro, .chiudi-a-mano { margin-top:1rem; }
.materiale-interno > summary, .altro > summary, .chiudi-a-mano > summary {
        cursor:pointer; display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
        font-size:12.5px; color:var(--soft); }
.materiale-interno .descrizione, .altro .descrizione { color:var(--soft); }
.email { background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
         padding:.6rem 1rem 1rem; margin-bottom:.9rem; }
.email > summary { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; cursor:pointer;
                   padding:.4rem 0; }
.email .titolo-sezione { font-family:'Space Grotesk', system-ui, sans-serif; font-size:14px;
                         text-transform:none; letter-spacing:0; color:var(--ink); }
.email .campo { display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto; gap:.6rem;
                align-items:start; margin-top:.7rem; font-size:13px; }
.email .chiave { font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
                 letter-spacing:.12em; color:var(--tenue); padding-top:.3rem; }
.email .valore { color:var(--ink-2); overflow-wrap:anywhere; padding-top:.2rem; }
.email .testo-email { background:var(--fondo); border:1px solid var(--riga-forte); border-radius:6px;
                      padding:.75rem .9rem; font-size:12.5px; line-height:1.6; color:var(--ink-2); }
.email form.spunte { background:none; border:0; padding:0; margin-top:.8rem; display:flex;
                     flex-direction:column; gap:.45rem; }
.email form.inviata { background:none; border:0; padding:0; margin-top:.8rem; }
.check { display:flex; flex-direction:row; align-items:center; gap:.6rem; font-family:inherit;
         font-size:13px; text-transform:none; letter-spacing:0; color:var(--ink-2); }
.check input { width:auto; }
button.mini { padding:4px 9px; font-size:11.5px; font-weight:500; }
.badge.ok { background:var(--ok-fondo); border-color:var(--ok-bordo); color:var(--ok); }
.badge.avviso { background:var(--avviso-fondo); border-color:var(--avviso-bordo); color:var(--avviso); }
.badge.male { background:var(--male-fondo); border-color:var(--male-bordo); color:var(--male); }
aside.avanzamento { background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
                    padding:1rem 1.1rem; position:sticky; top:80px; }
aside.avanzamento h2 { margin-top:0; }
aside.avanzamento form { max-width:none; }
/* «.scaletta», non «.passi»/«.passo»: quelle sono del modulo a passi della
   richiesta (~riga 634 più sotto) e collidevano — i link della pratica
   uscivano in maiuscolo monospazio. */
.scaletta { list-style:none; margin:0; padding:0; }
.scaletta .passo { display:flex; gap:.8rem; padding:.8rem 0; border-top:1px solid var(--riga); }
.scaletta .passo:first-child { border-top:0; }
.scaletta .passo.attivo { background:var(--superficie-2); margin:0 -1.1rem; padding:.9rem 1.1rem; }
.pallino-passo { flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--riga-forte);
                 display:flex; align-items:center; justify-content:center; font-family:var(--mono);
                 font-size:11px; color:var(--tenue); }
.scaletta .passo.attivo .pallino-passo { background:var(--accent); border-color:var(--accent); color:var(--fondo); font-weight:600; }
.scaletta .passo.fatto .pallino-passo { background:var(--ok-fondo); border-color:var(--ok-bordo); color:var(--ok); }
.corpo-passo { flex:1; min-width:0; }
.corpo-passo h3 { margin:0; font-size:13.5px; font-weight:600; }
.scaletta .passo.prossimo .corpo-passo h3 { color:var(--spento); }
.corpo-passo .nota-passo, .corpo-passo p { margin:.3rem 0 0; font-size:12.5px; color:var(--soft); line-height:1.5; }
.corpo-passo form { margin-top:.7rem; }
@media (max-width:62rem) { aside.avanzamento { position:static; } }

/* --- riquadri ----------------------------------------------------------- */
.riquadro { background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
            padding:1.1rem 1.25rem; }
.riquadro h3 { margin:0 0 .5rem; font-size:14px; font-weight:600; }
.riquadro p { margin:.3rem 0; font-size:12.5px; color:var(--soft); }

.dati { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
        gap:1rem 1.5rem; }
.dati div { min-width:0; }
.dati .etichetta { font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
                   letter-spacing:.12em; color:var(--tenue); }
.dati .valore { margin:.25rem 0 0; font-size:13.5px; font-weight:600;
                overflow-wrap:anywhere; }

/* --- tabelle ------------------------------------------------------------ */
.scroll-x { overflow-x:auto; background:var(--superficie); border:1px solid var(--riga);
            border-radius:8px; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--riga);
         vertical-align:top; }
th { font-family:var(--mono); font-size:10.5px; font-weight:500; text-transform:uppercase;
     letter-spacing:.11em; color:var(--tenue); background:var(--superficie-2);
     white-space:nowrap; padding:11px 18px; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--superficie-2); }
td.principale a { color:var(--ink); font-size:13.5px; font-weight:600; text-decoration:none; }
td.principale a:hover { color:var(--accent); }
td .sotto { display:block; font-family:var(--mono); font-size:10.5px; color:var(--tenue);
            margin-top:4px; font-weight:400; letter-spacing:.02em; }
td form { background:none; border:0; padding:0; max-width:none; }
td form button { font-size:12px; padding:5px 10px; }
.numero { font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
.numero .sotto { font-family:'Space Grotesk', system-ui, sans-serif; font-size:12px;
                 font-weight:600; letter-spacing:0; }
/* La riga che scade entro una settimana porta la barra rossa a sinistra. */
tr.urgente td:first-child { border-left:3px solid var(--male); }
tr:not(.urgente) td:first-child { border-left:3px solid transparent; }
tr.urgente td.quando .sotto { color:var(--male); }

/* --- pastiglie di stato ------------------------------------------------- */
.stato, .da-fare, .badge { display:inline-block; padding:3px 9px; border-radius:4px;
      font-family:'Space Grotesk', system-ui, sans-serif; font-size:11.5px; font-weight:600;
      white-space:nowrap; background:transparent; border:1px solid var(--riga-forte);
      color:var(--soft); }
.stato[data-stato="bozze_pronte"] { background:var(--ok-fondo); border-color:var(--ok-bordo); color:var(--ok); }
.stato[data-stato="ricevuta"], .stato[data-stato="deriva_enti"] {
      background:var(--ciano-fondo); border-color:var(--ciano-bordo); color:var(--ciano-ink); }
.stato[data-stato="da_lavorare"] {
      background:var(--avviso-fondo); border-color:var(--avviso-bordo); color:var(--avviso); }
.stato[data-stato="serve_ricerca_ente"], .stato[data-stato="errore"] {
      background:var(--male-fondo); border-color:var(--male-bordo); color:var(--male); }
.da-fare[data-fare="fatto"] { background:var(--ok-fondo); border-color:var(--ok-bordo); color:var(--ok); }
.da-fare[data-fare="ente da cercare"], .da-fare[data-fare="motore fermo"] { background:var(--male-fondo); border-color:var(--male-bordo); color:var(--male); }
.da-fare[data-fare="da approvare"], .da-fare[data-fare="da inviare"],
.da-fare[data-fare="risposte da caricare"], .da-fare[data-fare="numero fattura"],
.da-fare[data-fare="da compilare"], .da-fare[data-fare="cancellabile"] {
      background:var(--avviso-fondo); border-color:var(--avviso-bordo); color:var(--avviso); }

/* --- moduli ------------------------------------------------------------- */
form { display:flex; flex-direction:column; gap:.85rem; max-width:30rem;
       background:var(--superficie); padding:1.1rem 1.25rem; border:1px solid var(--riga);
       border-radius:8px; }
form h3 { margin:0; font-size:14px; font-weight:600; }
form p { margin:0; font-size:12.5px; color:var(--soft); line-height:1.55; }
fieldset { border:1px solid var(--riga); border-radius:6px; padding:1rem; margin:0;
           display:flex; flex-direction:column; gap:.85rem; }
legend { font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
         letter-spacing:.12em; color:var(--tenue); padding:0 .3rem; }
label { display:flex; flex-direction:column; gap:.35rem;
        font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
        letter-spacing:.12em; color:var(--tenue); }
input, select, textarea { padding:8px 10px; background:var(--fondo);
        border:1px solid var(--riga-forte); border-radius:5px; color:var(--ink);
        font-family:'Space Grotesk', system-ui, sans-serif; font-size:13.5px;
        text-transform:none; letter-spacing:0; max-width:100%; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
input::placeholder, textarea::placeholder { color:var(--spento); }
textarea { resize:vertical; line-height:1.5; }
input[type=checkbox], input[type=radio] { width:auto; accent-color:var(--accent); }
/* Casella o pallino sulla STESSA riga della loro etichetta: col
   `flex-direction:column` dei label normali finivano sopra il testo, e il
   modulo sembrava sfasato (Giuseppe, 2026-09-10). E' la regola che
   `.filtri .spunta` aveva gia' per se'. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
        flex-direction:row; align-items:center; gap:.5rem;
        font-family:'Space Grotesk', system-ui, sans-serif; font-size:13.5px;
        text-transform:none; letter-spacing:0; color:var(--soft); }
button { padding:9px 16px; border:0; border-radius:5px; background:var(--accent);
         color:var(--fondo); font-family:'Space Grotesk', system-ui, sans-serif;
         font-size:13.5px; font-weight:700; cursor:pointer; }
button:hover { background:var(--accent-chiaro); }
button.secondario { background:none; color:var(--ink-2); border:1px solid var(--riga-forte);
                    font-weight:400; }
button.secondario:hover { background:none; border-color:var(--accent); color:var(--ink); }
button.pericolo { background:var(--male-fondo); color:var(--male);
                  border:1px solid var(--male-bordo); font-weight:600; }
button.pericolo:hover { background:rgba(224,82,96,.22); }
/* Il modulo pieno porta dentro una tabella di quattro colonne (piano di
   produzione): i 30rem del form standard la stringerebbero troppo. */
form.modulo-servizio { max-width:46rem; }
form.modulo-servizio table input { min-width:7rem; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }

/* --- mappa e ricerca indirizzo in /richiedi (ripresa da 2a55ff6, colori
   riportati ai token di questo foglio invece dei valori chiari originali) --- */
#mappa { height:380px; margin:6px 0; border:1px solid var(--riga); border-radius:8px; }
/* I livelli interni di Leaflet (z-index 200-1000) altrimenti scavalcano l'header
   sticky (z-index:5) scorrendo la pagina: il contenitore non aveva un contesto di
   impilamento suo (Giuseppe, 2026-09-21). Vale per ogni mappa (richiesta, /mappa,
   tendina in sola lettura). */
.leaflet-container { isolation: isolate; }
.mappa-tools { margin:0 0 6px; }
.mappa-tools button { font-size:13px; padding:5px 10px; margin-right:6px; }
.mappa-cerca { display:flex; gap:6px; margin:6px 0 0; flex-wrap:wrap; }
.mappa-cerca input { flex:1; min-width:200px; }
.mappa-cerca button { font-size:13px; padding:5px 12px; }
#mappa_risultati { list-style:none; margin:4px 0 0; padding:0; width:100%;
      border:1px solid var(--riga); border-radius:8px; background:var(--superficie);
      max-height:160px; overflow:auto; }
#mappa_risultati li { padding:6px 10px; font-size:13px; border-bottom:1px solid var(--riga);
      cursor:pointer; }
#mappa_risultati li:last-child { border-bottom:0; }
#mappa_risultati li:hover { background:var(--ciano-fondo); }

/* --- barra dei filtri --------------------------------------------------- */
.filtri { flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:.8rem .9rem;
          max-width:none; margin-bottom:1rem; padding:13px 16px; }
.filtri select { width:190px; }
.filtri .conteggio { margin-left:auto; padding-bottom:9px; font-family:var(--mono);
                     font-size:12.5px; color:var(--tenue); }

/* --- messaggi ----------------------------------------------------------- */
.avvisi { background:var(--male-fondo); border:1px solid var(--male-bordo);
          border-left:3px solid var(--male); border-radius:8px; padding:.9rem 1.1rem;
          margin:1rem 0; }
.avvisi h2 { margin:0 0 .4rem; color:var(--male); }
.avvisi ul { margin:0; padding-left:1.1rem; font-size:13px; color:var(--ink-2); }
.attenzione, .blocco { background:var(--avviso-fondo); border:1px solid var(--avviso-bordo);
          border-left:3px solid var(--avviso); color:var(--avviso); padding:.75rem .95rem;
          border-radius:6px; font-size:12.5px; line-height:1.55; }
.errore { background:var(--male-fondo); border:1px solid var(--male-bordo);
          color:var(--male); padding:.75rem .95rem; border-radius:6px; font-size:13px; }
.ok { background:var(--ok-fondo); border:1px solid var(--ok-bordo); color:var(--ok);
      padding:.75rem .95rem; border-radius:6px; font-size:13px; }
.vuoto { color:var(--spento); font-size:13px; }
.pre-line { white-space:pre-line; }
/* Avviso sotto un campo di modulo (a differenza di .errore, che e' il
   riquadro di un errore a livello di pagina) e data scaduta accanto a un
   attestato o una polizza: stesso rosso, due usi diversi. */
p.avviso { color:var(--male); font-size:12px; margin:.25rem 0 0; }
.scaduto { color:var(--male); font-weight:600; }
.tipo { font-family:var(--mono); font-size:10px; text-transform:uppercase;
        letter-spacing:.1em; color:var(--tenue); }
.disclaimer { border-left:2px solid var(--riga-forte); padding-left:.9rem;
              color:var(--tenue); font-size:12.5px; line-height:1.6; margin-top:1.5rem; }

/* --- elenchi ------------------------------------------------------------ */
.documenti, .eventi { background:var(--superficie); border:1px solid var(--riga);
                      border-radius:8px; padding:.4rem 1.25rem; margin:0; }
.documenti { list-style:none; padding-left:1.25rem; }
.documenti li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.7rem;
                padding:.7rem 0; border-bottom:1px solid var(--riga); }
.documenti li:last-child { border-bottom:0; }
.documenti a { font-size:13.5px; }
.eventi { font-family:var(--mono); font-size:11.5px; color:var(--soft);
          padding-left:2.4rem; letter-spacing:.01em; }
.eventi li { padding:.35rem 0; line-height:1.5; }
a { color:var(--accent); }
a:hover { color:var(--accent-chiaro); }
.torna { display:inline-block; margin-top:2rem; font-size:13px; }

/* --- i quattro servizi in /richiedi -------------------------------------- */
.servizi { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
           gap:1rem; margin-bottom:1.2rem; }
.servizi .riquadro { display:flex; flex-direction:column; gap:.3rem; }
.servizi .prezzo { min-height:1.4em; }   /* spazio riservato, oggi sempre vuoto */
.servizi .riquadro a { align-self:flex-start; margin-top:.5rem; }

/* --- l'esito del Base: mappa e i due modi di proseguire ----------------- */
.mappa-satellite { max-width:100%; display:block; margin:.4rem 0 1.2rem;
                   border:1px solid var(--riga); border-radius:8px; }
.prosegui-opzioni { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; }
.prosegui-opzioni form { flex:1 1 16rem; }

/* --- le sezioni di /area (spec 2026-09-27) ------------------------------- */
.sezione-elenco { background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
                  margin:0 0 .9rem; }
.sezione-elenco[data-sezione="da_controllare"] { border-left:3px solid var(--avviso); }
.sezione-elenco > summary { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem;
                  padding:.85rem 1.1rem; cursor:pointer; list-style:none; }
.sezione-elenco > summary::-webkit-details-marker { display:none; }
.sezione-elenco > summary::before { content:""; width:.5rem; height:.5rem; flex:none;
                  border-right:1.6px solid var(--tenue); border-bottom:1.6px solid var(--tenue);
                  transform:rotate(-45deg); transition:transform .15s; }
.sezione-elenco[open] > summary::before { transform:rotate(45deg); }
.sezione-elenco .titolo-sezione { font-family:var(--mono); font-size:10.5px; font-weight:500;
                  text-transform:uppercase; letter-spacing:.12em; color:var(--ink-2); }
.sezione-elenco[data-sezione="da_controllare"] .titolo-sezione { color:var(--avviso); }
.sezione-elenco[data-sezione="motore"] .titolo-sezione { color:var(--ciano-ink); }
.sezione-elenco .descrizione { margin-left:auto; font-size:12.5px; color:var(--soft); }
.sezione-elenco .dentro { margin:0 1.1rem .8rem; }
.sezione-elenco .scroll-x { border:0; border-top:1px solid var(--riga); border-radius:0 0 8px 8px; }
.filtri .cerca { flex:1 1 16rem; }
.filtri .cerca input { width:100%; }

/* --- mappa delle zone D-Flight (Parte 1) -------------------------------------
   Colori delle zone: quelli regolamentati, scritti nei dati dal server. Qui solo
   la cornice, nella linea EasyUAS Dark. */
.mappa-legenda { background:var(--superficie); border:1px solid var(--riga); border-radius:6px;
                 padding:8px 10px; font-size:12px; color:var(--ink-2); line-height:1.5; }
.mappa-legenda .voce { display:flex; align-items:center; gap:6px; }
.mappa-legenda .campione { width:14px; height:10px; border:1.5px solid var(--riga-forte);
                           border-radius:2px; }
.mappa-legenda .quota { font-family:var(--mono); font-size:10.5px; color:var(--tenue); }
.mappa-legenda .nota { margin-top:4px; font-size:11px; color:var(--soft); max-width:12rem; }
.mappa-avviso { font-size:12.5px; color:var(--avviso); margin:0; }
.mappa-avviso:empty { display:none; }
.scheda-zona { background:var(--superficie); border:1px solid var(--riga);
               border-left:4px solid var(--riga-forte); border-radius:0 8px 8px 0;
               padding:.8rem 1rem; margin:.5rem 0; }
.scheda-zona .testa { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.scheda-zona h3 { margin:0; font-size:14px; font-weight:600; }
.badge.tocca { background:var(--avviso-fondo); border-color:var(--avviso-bordo); color:var(--avviso); }
.scheda-zona dl { display:grid; grid-template-columns:9.5rem minmax(0,1fr); gap:.3rem .8rem;
                  margin:.6rem 0 0; }
.scheda-zona dt { font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
                  letter-spacing:.1em; color:var(--tenue); padding-top:2px; }
.scheda-zona dd { margin:0; font-size:13px; grid-column:2; overflow-wrap:anywhere; }
.scheda-zona .ente .sotto, .scheda-zona .contatti { display:block; font-size:12px; }
.scheda-zona .ente .sotto { color:var(--soft); }
.scheda-zona .contatti a { color:var(--accent); }
.scheda-zona .tenue { color:var(--tenue); }
@media (max-width:40rem) {
  /* sotto la mappa (mappa-zone.js la sposta): una riga che va a capo, non una colonna */
  .mappa-legenda { display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin:.5rem 0; }
  .mappa-legenda .nota { flex-basis:100%; max-width:none; margin-top:2px; }
  .scheda-zona dl { grid-template-columns:minmax(0,1fr); }
  .scheda-zona dd { grid-column:1; }
}

/* --- linguette dell'elenco e intestazioni cliccabili (spec 2026-09-16) ---
   `.linguette`, non `.schede`: quel nome e' delle schede di «I miei dati»
   (Parte 3, qui sotto). */
.linguette { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 1rem; }
.linguette a { color:var(--soft); text-decoration:none; padding:6px 13px; border-radius:5px;
               border:1px solid var(--riga-forte); font-size:13.5px; }
.linguette a:hover { color:var(--ink); border-color:var(--accent); }
.linguette a.attiva { color:var(--fondo); background:var(--accent); border-color:var(--accent);
                      font-weight:600; }
.linguette .numero { font-family:var(--mono); font-size:12px; margin-left:.45rem; }
th a { color:inherit; text-decoration:none; }
th a:hover { color:var(--accent); }
/* --- I miei dati a sezioni (spec 2026-09-15, Parte 3) ------------------- */
form.sezioni { display:block; max-width:none; background:none; border:0; padding:0; }
details.sezione { background:var(--superficie); border:1px solid var(--riga);
                  border-radius:8px; margin:0 0 .7rem; }
details.sezione > summary { display:flex; align-items:center; gap:.7rem; min-width:0;
                  padding:.8rem 1.1rem; cursor:pointer; list-style:none; }
details.sezione > summary::-webkit-details-marker { display:none; }
details.sezione > summary::after { content:"▸"; margin-left:auto; padding-left:.5rem;
                  color:var(--tenue); }
details.sezione[open] > summary::after { content:"▾"; }
details.sezione > .corpo { display:flex; flex-direction:column; gap:.85rem;
                  padding:0 1.1rem 1rem; }
.pallino { flex:none; width:9px; height:9px; border-radius:50%; background:var(--spento); }
.pallino[data-pallino="verde"] { background:var(--ok); }
.pallino[data-pallino="giallo"] { background:var(--avviso); }
.pallino[data-pallino="rosso"] { background:var(--male); }
.titolo-sezione { flex:none; font-weight:600; }
.riassunto { min-width:0; font-family:var(--mono); font-size:12px; color:var(--soft);
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schede { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.7rem; }
.scheda { background:var(--superficie-2); border:1px solid var(--riga); border-radius:6px;
          padding:.7rem .9rem; }
.scheda h4 { margin:0 0 .4rem; font-size:14px; font-weight:600; }
.scheda dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.15rem .7rem;
             margin:0 0 .5rem; font-size:12.5px; }
.scheda dt { color:var(--tenue); }
.scheda dd { margin:0; overflow-wrap:anywhere; }
.scheda form { background:none; border:0; padding:0; }
.mono { font-family:var(--mono); }
details.aggiungi > summary { color:var(--accent); cursor:pointer; margin:.2rem 0 .6rem; }
details.aggiungi form { background:var(--superficie-2); }

/* --- il passo Quando: dettaglio a schede per giorno (bozza C, 2026-09-21).
   Riusa .sezione/.schede/.scheda (gia' dell'Hangar): qui solo il contenuto di
   ogni scheda-giorno, pensato per non scorrere mai in orizzontale. --------- */
.scheda-giorno h4 { display:flex; align-items:center; gap:.6rem; margin:0 0 .6rem;
                    font-size:11px; }
.scheda-giorno h4 input[type=date] { flex:1 1 auto; min-width:0; }
.scheda-giorno-fasce { display:flex; flex-direction:column; gap:.6rem; margin-bottom:.6rem; }
.fascia-riga { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end;
              padding-top:.6rem; border-top:1px solid var(--riga); }
.fascia-riga:first-child { border-top:0; padding-top:0; }
.fascia-riga label { flex:1 1 6rem; min-width:0; }
.fascia-riga label:last-child { flex:2 1 10rem; }
.quando-azioni { display:flex; flex-wrap:wrap; gap:.6rem; }
.quando-azioni button { font-size:12.5px; padding:6px 11px; }

/* --- migliorie dal progetto Claude Design «EasyUAS Dark» (docs/design/,
   riportate il 2026-09-17): animazioni, home, accesso, dettagli di area e
   pratica. Chi chiede meno movimento non vede animazioni. ------------------ */
@keyframes uas-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes uas-ping { 0% { transform:scale(.6); opacity:.9; } 100% { transform:scale(2.6); opacity:0; } }
@keyframes uas-blink { 0%, 100% { opacity:1; } 50% { opacity:.25; } }
@keyframes uas-blip { 0%, 70%, 100% { opacity:.25; } 78% { opacity:1; } }
@keyframes uas-strip { from { background-position:0 0; } to { background-position:40px 0; } }
@keyframes uas-dash { to { stroke-dashoffset:-400; } }
.uas-rise { animation:uas-rise .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .uas { display:none; }
}

/* testata: etichetta mono accanto al marchio, pulsanti per chi non e' dentro */
.marchio .ruolo { font-family:var(--mono); font-size:10.5px; font-weight:400;
                  text-transform:uppercase; letter-spacing:.13em; color:var(--tenue); }
.marchio .ruolo.gestore { color:var(--avviso); }
@media (max-width:40rem) { .marchio .ruolo, nav a[href^="#"] { display:none; } }
nav a:has(> button) { padding:0; }
nav > a > button { padding:7px 14px; font-size:13px; }

/* input piu' ariosi, come nel disegno; nei filtri e nelle tabelle restano compatti */
input, select, textarea { padding:11px 12px; font-size:14.5px; }
.filtri select, td input { padding:8px 10px; font-size:13.5px; }

/* --- la home ------------------------------------------------------------- */
main.home { max-width:1240px; padding-top:0; }
.home section { padding:56px 0; border-top:1px solid var(--riga); }
.home section.hero { border-top:0; padding:72px 0 56px; display:grid;
                     grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
                     gap:48px; align-items:center; }
.home .occhiello { font-family:var(--mono); font-size:11px; letter-spacing:.16em;
                   text-transform:uppercase; color:var(--accent); margin:0 0 22px; }
.home .hero h1 { font-size:clamp(34px,5vw,54px); line-height:1.03; letter-spacing:-.03em;
                 margin:0 0 22px; text-wrap:pretty; }
.home .hero .sottotitolo { font-size:17px; line-height:1.62; margin:0 0 32px; max-width:50ch;
                           text-wrap:pretty; }
.home .azioni-hero { display:flex; gap:12px; flex-wrap:wrap; }
.home .azioni-hero button { font-size:15px; padding:14px 24px; border-radius:6px; }
.home .azioni-hero button.secondario { background:var(--superficie); padding:14px 22px; }
.home h2 { font-family:'Space Grotesk', system-ui, sans-serif; font-size:32px; font-weight:600;
           letter-spacing:-.025em; text-transform:none; color:var(--ink); margin:0 0 30px; }
.home .testata-sezione { display:flex; align-items:flex-end; justify-content:space-between;
                         gap:24px; flex-wrap:wrap; margin-bottom:30px; }
.home .testata-sezione h2 { margin:0; }
.home .testata-sezione p { font-family:var(--mono); font-size:12.5px; color:var(--tenue);
                           margin:0; max-width:40ch; line-height:1.6; }
.home .chi-siamo p { max-width:70ch; color:var(--ink-2); line-height:1.65; }

/* il radar: un'anteprima animata del controllo area, con dati d'esempio */
.radar { background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
         overflow:hidden; animation-delay:.15s; }
.radar .testa { display:flex; justify-content:space-between; gap:12px; padding:12px 16px;
                background:var(--superficie-2); border-bottom:1px solid var(--riga);
                font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
                text-transform:uppercase; color:var(--tenue); }
.radar .testa .vivo { color:var(--accent); animation:uas-blink 2.2s ease-in-out infinite; }
.radar svg { display:block; width:100%; height:auto; background:#0b1118; }
.radar text { font-family:var(--mono); font-size:9px; letter-spacing:1px; }
.radar .ping { transform-box:fill-box; transform-origin:center;
               animation:uas-ping 2.4s ease-out infinite; }
.radar .blip { animation:uas-blip 4s linear infinite; }
/* Le tre eco partono sfasate: erano style= inline, che la CSP non ammette. */
.radar .blip-2 { animation-delay:.4s; }
.radar .blip-3 { animation-delay:1.9s; }
.radar .blip-4 { animation-delay:3.1s; }
.radar .esito div { display:flex; justify-content:space-between; gap:16px; align-items:center;
                    padding:12px 16px; border-top:1px solid var(--riga); }
.radar .esito .k { font-family:var(--mono); font-size:11.5px; color:var(--soft); }
.radar .esito .v { font-size:13px; font-weight:600; text-align:right; }
.radar .esito .v.avviso { color:var(--avviso); }
.radar .esito .v.ok { background:none; border:0; padding:0; }

/* le schede dei servizi: Pro in evidenza */
.home .servizi { grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:16px;
                 margin:0; }
.home .servizi .riquadro { padding:24px 22px; gap:14px; }
.home .servizi h3 { font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0; }
.home .servizi p { font-size:13.5px; line-height:1.62; }
.home .servizi .riquadro a { align-self:stretch; margin-top:auto; padding-top:16px; }
.home .servizi .riquadro a button { width:100%; padding:11px; font-size:13.5px; font-weight:600; }
.home .servizi .in-evidenza { border-color:var(--ciano-bordo); }
.home .servizi .in-evidenza h3 { color:var(--accent); }

/* come funziona: quattro fasi lungo una rotta */
.rotta { display:block; width:100%; height:56px; margin-bottom:12px; }
.rotta .tratteggio { stroke-dasharray:8 8; animation:uas-dash 14s linear infinite; }
/* Solo della home: «.passi» e' anche la barra del modulo a passi, che non deve ereditarle. */
.home .passi { list-style:none; margin:0; padding:0; display:grid; gap:24px;
         grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }
.home .passi li { border-top:2px solid var(--accent); padding-top:16px; }
.home .passi .fase { font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
               color:var(--tenue); margin-bottom:10px; }
.home .passi h3 { font-size:17px; font-weight:600; letter-spacing:-.01em; margin:0 0 7px; }
.home .passi p { font-size:13.5px; line-height:1.6; color:var(--soft); margin:0; text-wrap:pretty; }
.notam { background:var(--superficie); border:1px solid var(--riga);
         border-left:3px solid var(--avviso); border-radius:6px; padding:18px 20px;
         display:flex; gap:14px; align-items:flex-start; max-width:940px; margin-top:36px; }
.notam .sigla { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
                color:var(--avviso); margin-top:2px; }
.notam p { font-size:13.5px; line-height:1.6; color:var(--soft); margin:0; text-wrap:pretty; }
.notam strong { color:var(--ink); }
.piede-home { border-top:1px solid var(--riga); padding:28px 0; display:flex;
              justify-content:space-between; gap:20px; flex-wrap:wrap;
              font-family:var(--mono); font-size:11px; color:var(--spento); letter-spacing:.04em; }
.piede-home p { margin:0; }

/* --- accedi e registrati ------------------------------------------------- */
main.accesso { max-width:1080px; padding-top:3.5rem; display:grid; gap:44px; align-items:start;
               grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr)); }
.scheda-accesso { padding:28px 26px; }
.scheda-accesso h1 { font-size:25px; letter-spacing:-.02em; margin:0 0 8px; }
.scheda-accesso .sottotitolo { margin:0 0 22px; }
.scheda-accesso form { max-width:none; background:none; border:0; padding:0; }
.scheda-accesso form button[type=submit] { font-size:14.5px; padding:13px; border-radius:6px;
                                           margin-top:4px; }
.scheda-accesso .altro { margin:14px 0 0; font-size:12.5px; color:var(--soft); }
.linguette-accesso { display:flex; gap:4px; background:var(--fondo); border:1px solid var(--riga);
                     border-radius:6px; padding:4px; margin-bottom:24px; }
.linguette-accesso a { flex:1; text-align:center; padding:9px; border-radius:4px;
                       font-size:13.5px; font-weight:600; color:var(--soft); text-decoration:none; }
.linguette-accesso a.attiva { background:var(--accent); color:var(--fondo); }
.servizio-scelto { background:rgba(79,195,217,.10); border:1px solid var(--ciano-bordo);
                   border-radius:6px; padding:13px 15px; margin-bottom:20px; }
.servizio-scelto strong { display:block; font-size:13.5px; color:var(--accent); }
.servizio-scelto span { font-size:12.5px; color:var(--soft); }
.punti-accesso .tipo { font-size:10.5px; letter-spacing:.14em; margin-bottom:16px; }
.punti-accesso div + div { border-top:1px solid var(--riga); padding:16px 0; }
.punti-accesso h3 { font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 0 5px; }
.punti-accesso p { font-size:13.5px; color:var(--soft); line-height:1.6; margin:0; }

/* --- area e pratica ------------------------------------------------------ */
/* Il motore sta lavorando: una striscia ambra che scorre, sopra la testata. */
.al-lavoro { height:3px; margin-bottom:1rem; border-radius:2px;
             background-image:repeating-linear-gradient(90deg, var(--avviso) 0 20px, var(--fondo) 20px 40px);
             animation:uas-strip 1.4s linear infinite; }

/* --- l'Hangar del cliente (spec 2026-09-17) ------------------------------
   Titoli grandi (Giuseppe), riquadri affiancati che si adattano alla
   larghezza, sotto la sezione del riquadro premuto. Senza JavaScript: il
   riquadro e' un'ancora e la sezione si vede quando e' :target; quelle che il
   server apre da solo (rosse, ?aperta=, errore di un form) hanno `aperta`, e
   il primo clic su un riquadro le chiude. */
.testata-hangar { padding:1.4rem 0 1.5rem; border-bottom:1px solid var(--riga); margin-bottom:.4rem; }
.testata-hangar .occhiello { font-family:var(--mono); font-size:11px; letter-spacing:.16em;
                             text-transform:uppercase; color:var(--accent); margin:0 0 .6rem; }
.testata-hangar h1 { font-size:clamp(32px,4.5vw,44px); line-height:1.05; letter-spacing:-.03em;
                     margin:0 0 .6rem; }
.testata-hangar .sottotitolo { margin:0; max-width:62ch; font-size:14.5px; }
h2.grande { font-family:'Space Grotesk', system-ui, sans-serif; font-size:20px; font-weight:600;
            text-transform:none; letter-spacing:-.01em; color:var(--ink); margin:2rem 0 .8rem; }
.linguette-hangar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
                    gap:.6rem; margin:0 0 1rem; }
.linguette-hangar .linguette { margin:0; }
.riquadri-hangar { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
                   gap:.7rem; margin:0 0 .9rem; }
.riquadro-hangar { display:flex; flex-direction:column; gap:.35rem; min-width:0;
                   background:var(--superficie); border:1px solid var(--riga);
                   border-top:3px solid var(--riga-forte); border-radius:8px;
                   padding:.9rem 1rem; text-decoration:none; color:var(--ink); }
.riquadro-hangar:hover { border-color:var(--accent); color:var(--ink); }
.riquadro-hangar[data-pallino="verde"] { border-top-color:var(--ok); }
.riquadro-hangar[data-pallino="giallo"] { border-top-color:var(--avviso); }
.riquadro-hangar[data-pallino="rosso"] { border-top-color:var(--male); }
.riquadro-hangar .titolo-sezione { font-size:17px; }
.riquadro-hangar .riassunto { white-space:normal; }
.riquadro-hangar.aperto { background:var(--superficie-2); border-color:var(--accent); }
main:has(.pannello-hangar:target) .riquadro-hangar.aperto { background:var(--superficie);
                                                            border-color:var(--riga); }
.pannello-hangar { background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
                   padding:1.1rem 1.25rem; margin:0 0 .7rem;
                   display:flex; flex-direction:column; gap:.85rem; }
.pannello-hangar h3 { margin:0; font-size:18px; font-weight:600; }
.pannello-hangar:not(:target):not(.aperta) { display:none; }
main:has(.pannello-hangar:target) .pannello-hangar.aperta:not(:target) { display:none; }
.azioni-scheda { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.azioni-scheda a { text-decoration:none; }
.azioni-scheda button { font-size:12px; padding:5px 10px; }

/* Il testo dell'email da copiare (Pro): a capo come l'ha scritto il motore. */
.testo-email { white-space:pre-line; }

/* --- La richiesta a passi (spec 2026-09-19). Senza passi.js la classe a-passi
   non c'e': l'indice e' una riga di ancore e le sezioni sono tutte visibili. --- */
.passi { display:flex; flex-wrap:wrap; gap:4px; list-style:none; padding:0; margin:0 0 1rem;
  counter-reset:passo; }
.passi li { flex:1 1 7rem; counter-increment:passo; }
.passi a { display:block; padding:8px 10px; border-top:3px solid var(--riga-forte);
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--soft); text-decoration:none; }
.passi a::before { content:counter(passo) " · "; color:var(--tenue); }
.passi a.fatto { border-top-color:var(--ciano-bordo); color:var(--ink-2); }
.passi a[aria-current="step"] { border-top-color:var(--accent); color:var(--ink); }
.passi a.chiuso { cursor:default; opacity:.6; }
.passo > h2 { margin:1.4rem 0 .6rem; }
form.a-passi .passo:not(.corrente) { display:none; }
form.a-passi .passo > h2:focus { outline:none; }
.passi-nav { display:flex; justify-content:space-between; gap:8px; margin-top:1.2rem; }
.passi-nav button:only-child { margin-left:auto; }
.tendina { margin:0 0 1rem; }
.tendina-riga { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 6px;
  padding:8px 10px; background:var(--superficie); border:1px solid var(--riga); border-radius:6px; }
.tendina-riga .mono { flex:1 1 12rem; font-size:12.5px; color:var(--ink-2); }
.tendina-riga button { font-size:13px; padding:5px 10px; }
form.a-passi #tendina_corpo.chiusa { display:none; }
/* Il passo Dove a due colonne (Giuseppe, 2026-10-05: scorrendo i campi si
   perdeva la mappa): campi a sinistra con la larghezza di sempre (30rem il Base,
   46rem gli altri), mappa a destra nello spazio che avanza, fissa come
   aside.avanzamento della pratica. Tutte le sezioni stanno nella STESSA cella:
   se ne vede una sola (.corrente), e negli altri passi la cella destra tiene la
   riga «Mostra mappa». Sotto i 62rem resta la colonna unica di sempre. */
@media (min-width:62.01rem) {
  form.a-passi { display:grid; grid-template-columns:minmax(0,30rem) minmax(0,1fr);
                 column-gap:1.4rem; align-items:start; max-width:none; }
  form.a-passi.modulo-servizio { grid-template-columns:minmax(0,46rem) minmax(0,1fr); }
  form.a-passi > [role=navigation] { grid-column:1 / -1; }
  form.a-passi > .passo { grid-column:1; grid-row:2; }
  form.a-passi > .tendina { grid-column:2; grid-row:2; position:sticky; top:80px; margin:0; }
  /* Quanto schermo c'è sotto l'intestazione, aiuto, ricerca e bottoni compresi. */
  form.a-passi #mappa { height:clamp(300px, 100vh - 22rem, 520px); }
}
form.a-passi .tendina.sola-lettura .mappa-cerca,
form.a-passi .tendina.sola-lettura .mappa-tools,
form.a-passi .tendina.sola-lettura #mappa_aiuto { display:none; }
#entro:empty, #area_misura:empty { display:none; }
.riepilogo h3 { display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--soft); border-bottom:1px solid var(--riga); padding-bottom:4px; margin:1.1rem 0 .4rem; }
.riepilogo h3 button { font-size:12px; padding:2px 8px; }
.riepilogo dl { display:grid; grid-template-columns:minmax(7rem, 11rem) 1fr; gap:4px 12px; margin:0; }
.riepilogo dt { color:var(--soft); font-size:13px; }
.riepilogo dd { margin:0; white-space:pre-line; }
@media (max-width:40rem) { .riepilogo dl { grid-template-columns:1fr; } .riepilogo dd { margin-bottom:6px; } }

/* --- Richiesta a passi, Fase 2: punti di decollo/atterraggio e voci di
   sicurezza. Tutto col solo CSS: senza JavaScript non cambia niente. --- */
#blocco_atterraggio { display:flex; flex-direction:column; gap:.85rem; }
#punti_da:has(#atterraggio_uguale:checked) #blocco_atterraggio { display:none; }
button[data-segna] { align-self:flex-start; font-size:13px; padding:5px 10px; }
button[data-segna][aria-pressed="true"] { border-color:var(--accent); color:var(--ink); }
.voce-sicurezza { display:flex; flex-direction:column; gap:.4rem; }
.anteprima { display:none; flex-direction:column; gap:.5rem; margin:0 0 .3rem 1.6rem;
             padding-left:.8rem; border-left:2px solid var(--ciano-bordo); }
.voce-sicurezza:has(> label > input:checked) > .anteprima { display:flex; }
/* Un browser senza :has() non aprirebbe mai i campi delle voci: li lascia aperti. */
@supports not selector(:has(*)) { .anteprima { display:flex; } }
/* I marcatori D e A sulla mappa (deciso il 2026-09-14): cerchio scuro, bordo e
   lettera bianchi. Il ciano resta a pulsanti e passi. */
.punto-da { background:var(--fondo); color:#fff; border:2px solid #fff; border-radius:50%;
            font:700 13px/22px 'Space Grotesk', system-ui, sans-serif; text-align:center;
            box-shadow:0 1px 4px rgba(0,0,0,.5); }
.punto-da.fuori { background:var(--male); }   /* fuori dall'area di volo */
/* Un fieldset non scende sotto la larghezza «naturale» dei suoi campi: sul
   telefono i gruppi col campo di testo sbordavano dal modulo di ~35px. */
#passo-sicurezza fieldset, #punti_da { min-width:0; }
/* La pagina «Correggi» (spec 2026-09-28, §3.3): ogni pagina del PDF e' un canvas
   con sopra il livello delle caselle di pdf.js (pdf.js lo dimensiona con
   --total-scale-factor e le variabili che correggi.js scrive sulla .pagina). */
.pdf-modulo .pagina { position: relative; margin: 0 auto 1rem; background: #fff; }
.pdf-modulo canvas { display: block; }
.pdf-modulo .annotationLayer input, .pdf-modulo .annotationLayer textarea { color: #000; background: #fffbe6; }
.avviso-giallo { color:var(--avviso); }

/* --- Telefono in verticale (spec 2026-10-06) ---------------------------------
   Due soli punti di rottura in tutto il foglio: 40rem (telefono) e 62rem (colonne).
   Le regole dei singoli pezzi (menu, schede, pratica, passi) stanno qui sotto,
   ognuna col suo commento. Nessun elemento fisso: le barre sono sticky. */
.modulo-mappa #mappa { height:clamp(420px, 70vh, 720px); }
.menu-mobile { display:none; }
.passo-corrente { display:none; }
/* Nuova pratica e Modifica la richiesta (spec 2026-10-06, §5): mappa fissa a destra sopra i
   62rem, sopra i campi sotto. Lo stesso schema del passo Dove del cliente. */
form.colonne-mappa { max-width:none; }
form.colonne-mappa > .campi { display:flex; flex-direction:column; gap:.85rem; min-width:0; }
@media (min-width:62.01rem) {
  form.colonne-mappa { display:grid; grid-template-columns:minmax(0,46rem) minmax(0,1fr);
                       column-gap:1.4rem; align-items:start; }
  form.colonne-mappa > .campi { grid-column:1; grid-row:1; }
  form.colonne-mappa > .mappa-lato { grid-column:2; grid-row:1; position:sticky; top:80px; }
  form.colonne-mappa #mappa { height:clamp(300px, 100vh - 22rem, 520px); }
}
@media (max-width:40rem) {
  main { padding-left:1rem; padding-right:1rem; }
  /* Sotto i 16px Safari su iPhone ingrandisce la pagina a ogni tocco su un campo. */
  input, select, textarea { font-size:16px; }
  /* Bersagli da toccare: almeno 44px per bottoni, voci di menu, linguette, summary e link in tabella. */
  button, .linguette a, nav a, summary, td a { min-height:44px; }
  .linguette a, nav a, td a { display:inline-flex; align-items:center; }
  /* Le linguette della pratica in una riga che scorre di lato, mai su tre righe. */
  .linguette-pratica { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .linguette-pratica::-webkit-scrollbar { display:none; }
  .linguette-pratica a { flex:none; }
  /* I campi dell'email: etichetta sopra, valore a tutta larghezza, Copia accanto all'etichetta. */
  .email .campo { grid-template-columns:minmax(0,1fr) auto; }
  .email .campo button { grid-column:2; grid-row:1; }
  .email .campo .valore, .email .campo .testo-email { grid-column:1 / -1; grid-row:2; }
  /* /mappa: la mappa e' la pagina. */
  .modulo-mappa #mappa { height:max(380px, 60vh); }
  /* /mappa sul telefono: via la riga d'aiuto e il campo «Località (facoltativa)» sopra la
     mappa (la ricerca indirizzi resta); la mappa deve stare nel primo schermo. */
  .modulo-mappa #mappa_aiuto, .modulo-mappa > label:first-child { display:none; }
  /* L'intestazione a una riga: marchio, bottone principale, ≡ (spec 2026-10-06, §1). */
  header { min-height:60px; padding:0 1rem; }
  /* Solo con JavaScript (html.js): senza, il nav resta visibile e a capo come prima. */
  html.js header { flex-wrap:nowrap; }
  html.js .menu-mobile { display:flex; gap:6px; align-items:center; flex:none; }
  .menu-mobile button { padding:7px 12px; font-size:13px; min-height:40px; }
  .menu-apri { font-size:18px; line-height:1; padding:6px 11px; }
  html.js nav.menu { display:none; }
  /* Sul telefono «Nuova richiesta» sta gia' nella barra: nel menu aperto non si ripete. */
  html.js nav.menu a[href="/richiedi"] { display:none; }
  html.js nav.menu.aperto { display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; left:0; right:0; top:100%; background:var(--barra);
    border-bottom:1px solid var(--riga); padding:.4rem 1rem .8rem; }
  nav.menu.aperto a { display:flex; align-items:center; min-height:44px; padding:6px 10px; }
  nav.menu.aperto a button { width:100%; }
  nav.menu.aperto form { margin:.4rem 0 0; }
  nav.menu.aperto form button { width:100%; min-height:44px; }
  /* Elenchi a schede (spec 2026-10-06, §2): la stessa tabella, una scheda per riga, niente
     scorrimento laterale. L'ordine lo danno le classi dei td, mai nth-child. */
  .scroll-x.schede { overflow:visible; background:none; border:0; }
  .sezione-elenco .scroll-x.schede { border-top:1px solid var(--riga); padding-top:.6rem; }
  .schede table, .schede tbody, .schede td { display:block; }
  .schede thead { display:none; }
  .schede tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px;
    background:var(--superficie); border:1px solid var(--riga); border-radius:8px;
    padding:10px 12px; margin:0 0 .6rem; }
  .schede tbody tr:hover { background:var(--superficie); }
  .schede tr.urgente { border-left:3px solid var(--avviso); }
  .schede td { padding:0; border:0; }
  .schede td.numero { grid-column:1; grid-row:1; }
  .schede td.quando { grid-column:2; grid-row:1; text-align:right; }
  .schede td.principale { grid-column:1 / -1; grid-row:2; }
  .schede td.cliente, .schede td.servizio { grid-column:1 / -1; font-size:12.5px; color:var(--soft); }
  .schede td.esito,.schede td.azione, .schede td.documenti, .schede td.archiviata,
  .schede td[data-etichetta] { grid-column:1 / -1; margin-top:3px; }
  .schede td[data-etichetta]::before { content:attr(data-etichetta); display:block;
    font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.12em;
    color:var(--tenue); }
  .schede td .sotto { margin-top:2px; }
  /* La richiesta a passi (spec 2026-10-06, §4): barra compatta e Indietro/Avanti a portata di
     pollice. Solo con passi.js (form.a-passi): senza, la barra resta a cinque voci. */
  form.a-passi .passo-corrente { display:flex; justify-content:space-between; gap:8px; margin:0 0 6px;
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); }
  form.a-passi .passo-corrente .poi { color:var(--tenue); }
  form.a-passi .passi { flex-wrap:nowrap; }
  form.a-passi .passi { margin:0 0 .5rem; }
  form.a-passi .passi li { flex:1 1 0; }
  form.a-passi .passi a { height:0; padding:0; overflow:hidden; font-size:0; line-height:0; }
  form.a-passi .passi a::before { content:none; }
  form.a-passi .passi-nav { position:sticky; bottom:0; z-index:2; background:var(--superficie);
    border-top:1px solid var(--riga); margin:1.2rem -1.25rem 0; padding:10px 1.25rem; }
}