/* app.css — l'interfaccia. Il foglio della fattura NON sta qui:
   quello è il PDF, disegnato da js/layout/. */

:root{
  --verde:#14529A;
  --verde-chiaro:#4583C9;
  --verde-scuro:#0C3565;
  --verde-pallido:#DFE8F2;
  --bordo-verde:#AEC5DC;
  --inchiostro:#081628;
  --inchiostro-2:#122E51;
  --ocra:#9E6C16;
  --ocra-pallido:#FBEFD6;
  --allarme:#A53622;
  --allarme-pallido:#FBE9E4;
  --sfondo:#E7E3D9;
  --testo:#0E1114;
  --testo-2:#44433E;
  --riga:#6B6A63;
  --bordo:#BDB6A5;
  --bordo-2:#D2CBBB;
  --testata:clamp(68px,7.4vw,96px);
  /* larghezza del foglio nel compilatore: su schermi grandi le fasce verdi ai
     lati devono restare margini, non colonne. */
  --largo:min(1560px, 95vw);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sfondo);color:var(--testo);
  font:19px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--verde-scuro)}
.nascosto{display:none !important}
.nascosto-vero{position:absolute;width:0;height:0;opacity:0;pointer-events:none}

/* ---------- testata ---------- */
header.sito{
  /* Verde piu' chiaro e meno cupo. E' il punto piu' chiaro della sfumatura a
     comandare: con il bianco pieno tiene 4,9 di contrasto, appena sopra il
     minimo richiesto per il testo normale. Schiarendo ancora la scritta
     comincia a perdersi sui monitor scadenti. */
  background:linear-gradient(100deg,#143356 0%,#1B406A 100%);
  color:#FFFFFF;padding:0 24px;display:flex;align-items:center;gap:16px;height:var(--testata);
}
/* Il marchio nell'angolo: un quinto piu' grande del resto della testata, che
   e' il posto dove il nome del programma deve farsi vedere. */
.marchio{display:flex;align-items:center;font-size:clamp(25px,2.6vw,34.1px);letter-spacing:-.015em;color:#FFFFFF;text-decoration:none}
.marchio svg{width:32px;height:35px;margin-right:12px;transform:scale(1.12);transform-origin:center}
.marchio .a{font-weight:300;color:#9FB0C4}
.marchio .b{font-weight:650}
.payoff{color:#A8B7C8;font-size:16.4px;border-left:1px solid rgba(255,255,255,.16);padding-left:16px}
header.sito .sep{flex:1}

/* Il pulsante con le tre righette, a destra di «Compila»: stessa forma degli
   altri tre ma largo la metà, perché non porta un'etichetta. Dentro ci stanno
   le pagine che non entrano nella barra — le tabelle dei codici e le
   informazioni. È un <details>, quindi si apre e si chiude da solo: niente
   JavaScript, e funziona anche se qualcosa non si carica. */
.menu-altro{position:relative}
/* `>` e non uno spazio, ed è il punto: da quando dentro il pannello ci sono
   altri <summary> — le quattro voci di gruppo — un selettore discendente
   calava su di loro il quadrato del pulsante a righette, 41,7 punti di lato.
   Le scritte ci sbattevano dentro e andavano a capo, e i blocchi restavano
   larghi un francobollo. La regola ha sempre parlato del pulsante: ora lo
   dice anche il selettore. */
.menu-altro>summary{
  list-style:none;cursor:pointer;
  color:#D3DDE7;font-size:16.4px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  /* quadrato e alto quanto gli altri pulsanti: l'altezza è quella di una riga
     di testo più i due bordi e le due fasce di riempimento, e la larghezza
     ripete la stessa misura */
  height:calc(16.4px * 1.2 + 16px + 2px + 4px);
  width:calc(16.4px * 1.2 + 16px + 2px + 4px);
  padding:0;box-sizing:border-box;border-radius:9px;
  border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.055);
  transition:background .15s,border-color .15s,color .15s;
}
.menu-altro>summary::-webkit-details-marker{display:none}
.menu-altro>summary:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#FFFFFF}

/* Il pulsante grande all'estremità destra della barra. Sta DOPO il <nav>, e
   questo basta a spostare a sinistra i tre pulsanti e le righette: lo spazio
   libero lo mangia `.sep{flex:1}`, quindi tutto quello che viene prima
   arretra esattamente della larghezza di questo più il suo distanziamento.

   La misura non è scritta a mano: è quella delle righette moltiplicata per
   1,25, cioè un quarto in più per lato come chiesto. Se un giorno cambia
   l'altezza dei pulsanti della barra, questo la segue da solo invece di
   restare indietro di mezzo punto. */
.azione-grande{
  --lato-righette:calc(16.4px * 1.2 + 16px + 2px + 4px);
  height:calc(var(--lato-righette) * 1.25);
  width:calc(var(--lato-righette) * 1.25);
  flex:none;padding:0;box-sizing:border-box;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:var(--verde-scuro);
  border:1px solid rgba(255,255,255,.28);
  color:#FFFFFF;font-size:16.4px;font-weight:600;
  transition:background .15s,border-color .15s;
}
.azione-grande:hover{background:#103865;border-color:rgba(255,255,255,.45)}
.azione-grande::-webkit-details-marker{display:none}
.azione-grande{list-style:none}
.menu-sosco{position:relative}
.menu-sosco[open] .azione-grande{background:#0E3058;border-color:rgba(255,255,255,.5)}

/* La tendina di SoScontrino: stesso meccanismo di quella delle righette — un
   <details>, quindi si apre e si chiude da sola senza una riga di JavaScript,
   e funziona anche se qualcosa non si carica. Scende dallo stesso filo e si
   allinea a destra, perché il pulsante sta nell'angolo. */
.sosco-pannello{
  position:absolute;top:calc(100% + 56px);right:0;z-index:30;
  width:288px;padding:10px;border-radius:12px;
  background:linear-gradient(160deg,#143356 0%,#1B406A 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 46px rgba(9,19,32,.42);
  display:flex;flex-direction:column;gap:8px;
}
/* il titolo è la stessa fascia piena dei titoli dell'altra tendina */
.sosco-tit{
  display:block;font-size:12.6px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#FFFFFF;
  background:#0E2744;border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;border-radius:7px;
}
/* il pulsante che scarica: pieno e chiaro, perché è la cosa che si deve
   premere — le voci dell'altra tendina sono collegamenti, questo è un'azione */
header.sito .sosco-scarica{
  display:block;text-align:center;text-decoration:none;
  font-size:16px;font-weight:650;
  color:var(--verde-scuro);background:var(--verde-pallido);
  border:1px solid var(--bordo-verde);border-radius:8px;padding:10px 12px;
}
header.sito .sosco-scarica:hover{background:#FFFFFF;color:var(--inchiostro);border-color:#FFFFFF}
.sosco-testo{margin:0;color:#CFD9E4;font-size:14.2px;line-height:1.45}
.menu-altro[open]>summary{background:var(--verde);border-color:var(--verde);color:#FFFFFF}
.menu-altro>summary svg{
  width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;
}
/* la tendina è verde come la fascia da cui scende: sembra la sua
   continuazione invece di un riquadro bianco appiccicato sopra la pagina */
.menu-voci{
  /* scende di tre righe sotto il pulsante, non attaccata */
  position:absolute;top:calc(100% + 56px);right:0;z-index:30;
  min-width:246px;padding:10px;border-radius:12px;
  background:linear-gradient(160deg,#143356 0%,#1B406A 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 46px rgba(9,19,32,.42);
  display:flex;flex-direction:column;gap:4px;
  /* i sottomenu escono di lato dal pannello: guai a tagliarli */
  overflow:visible;
}
/* Ogni gruppo è un <details> dentro il <details> del menu. La freccia dice
   che c'è dell'altro, e il sottomenu esce DI LATO — a sinistra, perché la
   tendina è ancorata al bordo destro della testata e verso destra finirebbe
   fuori dallo schermo. */
.menu-gruppo{position:relative}
header.sito nav .menu-gruppo>summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  cursor:pointer;list-style:none;margin:0;
  /* larga quanto il pannello, non quanto la scritta: sono righe di un menu,
     e righe di lunghezza diversa in colonna sembrano un errore */
  width:100%;height:auto;
  /* e su una riga sola: «Capire l'IVA» spezzato in due è illeggibile, e il
     pannello ha tutto lo spazio per tenerlo intero */
  white-space:nowrap;
  font-size:13.4px;padding:10px 12px;
}
header.sito nav .menu-gruppo>summary::-webkit-details-marker{display:none}
header.sito nav .menu-gruppo>summary::after{
  content:'\203A';font-size:20px;line-height:0;font-weight:700;
  /* la freccia gira quando il gruppo è aperto: dice dove si è */
  transition:transform .15s;
}
header.sito nav .menu-gruppo[open]>summary{background:var(--verde);border-color:var(--verde)}
header.sito nav .menu-gruppo[open]>summary::after{transform:rotate(90deg)}
header.sito nav .menu-gruppo>summary:hover{background:var(--verde)}
.menu-sotto{
  position:absolute;right:calc(100% + 8px);top:0;z-index:31;
  min-width:234px;padding:10px;border-radius:12px;
  background:linear-gradient(160deg,#143356 0%,#1B406A 100%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 46px rgba(9,19,32,.42);
  display:flex;flex-direction:column;gap:4px;
}
/* anche qui una riga sola: il pannello si allarga da sé fino alla voce più
   lunga, invece di spezzare «Codici specifici fatture» */
header.sito nav .menu-sotto a{white-space:nowrap}
/* Sul telefono non c'è spazio di lato: il sottomenu scende sotto la sua voce,
   rientrato, e la tendina scorre se serve. */
@media (max-width:700px){
  .menu-voci{max-height:76vh;overflow-y:auto}
  .menu-sotto{
    position:static;min-width:0;margin:4px 0 2px 10px;padding:0;
    background:none;border:none;box-shadow:none;
  }
}
/* ogni voce è un pulsantino con il fondo verde chiarissimo: sul verde della
   tendina si staccano uno per uno, e il testo scuro sopra si legge senza
   sforzo */
header.sito nav .menu-voci a{
  color:var(--verde-scuro);text-decoration:none;font-size:16px;font-weight:500;
  padding:7px 10px;border-radius:7px;border-bottom:none;
  /* verde chiaro, ma verde davvero: il tono di prima era quasi bianco */
  background:var(--verde-pallido);border:1px solid var(--bordo-verde);
}
header.sito nav .menu-voci a:hover{background:#FFFFFF;color:var(--inchiostro);border-color:#FFFFFF}
/* i titoli sono fasce verdi piene con la scritta bianca, come nel sommario
   delle domande frequenti: si vedono anche sul fondo verde della tendina */
header.sito nav .menu-tit{
  display:block;font-size:12.6px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#FFFFFF;
  background:#0E2744;border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;border-radius:7px;margin:8px 0 4px;
}
/* il titolo non è più solo un'etichetta: è la voce che si preme */
header.sito nav .menu-gruppo>.menu-tit{margin:0}

header.sito nav{display:flex;gap:8px;align-items:stretch;height:100%}
header.sito nav>*{align-self:center}

/* I tre strumenti sono la funzione principale del sito: da testo in fila sono
   diventati pulsanti veri, con icona, cosi' si vedono e si capisce che si
   possono premere. */
header.sito nav a{
  color:#D3DDE7;text-decoration:none;font-size:16.4px;font-weight:600;
  display:flex;align-items:center;gap:8px;padding:8px 15px;border-radius:9px;
  border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.055);
  transition:background .15s,border-color .15s,color .15s;
}
header.sito nav a svg{
  width:18px;height:18px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;
}
header.sito nav a:hover{color:#FFFFFF;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);}
/* la pagina in cui ti trovi resta in verde pieno: è l'unico modo per
   distinguerla ora che tutti gli altri sono chiari */
header.sito nav a.attivo{color:#081628;background:var(--verde-chiaro);border-color:var(--verde-chiaro);}
header.sito nav a.attivo:hover{background:#5A93D3;border-color:#5A93D3}
header.sito nav a.spenta{opacity:.45;cursor:default}

/* Sotto i 900 px restano i soli simboli: tre pulsanti quadrati invece di tre
   etichette che manderebbero la testata a capo. */
@media (max-width:900px){
  header.sito .payoff{display:none}
  header.sito nav a{padding:8px 10px}
  header.sito nav a span{display:none}
  header.sito nav a svg{width:19px;height:19px}
}

/* ---------- schermata d'ingresso ---------- */
.avvio{
  background:
    radial-gradient(1000px 400px at 50% -70px,rgba(20,82,154,.22),transparent 72%),
    linear-gradient(#FCFBF8,var(--sfondo) 62%);
  padding:60px 24px 0;
}
.avvio .dentro{max-width:720px;margin:0 auto;text-align:center}
.occhiello{
  display:inline-block;background:var(--verde-pallido);color:var(--verde-scuro);
  border:1px solid var(--bordo-verde);border-radius:100px;padding:4px 13px;
  font-size:15.8px;font-weight:600;margin-bottom:20px;
}
.avvio h1{font-size:clamp(31px,5.4vw,49.7px);line-height:1.13;margin:0 0 16px;font-weight:680;letter-spacing:-.03em}
.avvio h1 em{font-style:normal;color:var(--verde-scuro)}
.avvio .sotto{color:var(--testo-2);font-size:clamp(17px,2.2vw,21.5px);margin:0 0 32px}

.zona{
  border:2px dashed var(--bordo-verde);border-radius:14px;background:#FFFFFF;
  padding:46px 28px;transition:.18s;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,38,60,.05),0 10px 30px rgba(20,38,60,.06);
}
.zona:hover,.zona:focus{border-color:var(--verde);background:#FBFDFE;outline:none;transform:translateY(-1px)}
.zona.sopra{border-color:var(--verde);background:var(--verde-pallido);transform:scale(1.01)}
.zona .icona{margin-bottom:12px;line-height:0}
.zona .grande{font-size:23.7px;font-weight:600;margin-bottom:6px}
.zona .piccolo{color:var(--testo-2);font-size:17.5px}
.zona .oppure{margin-top:20px;font-size:17.5px;color:var(--testo-2)}
.zona .oppure a{color:var(--verde-scuro);font-weight:500}
/* I tre comandi in fondo alla zona sono bottoni, non link: non portano da
   nessuna parte, aprono il selettore dei file. Si vestono da link perche' li'
   dentro un bottone vero sarebbe di troppo. */
.zona .oppure button.come-link{
  font:inherit;color:var(--verde-scuro);font-weight:500;background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;
}
.zona .oppure button.come-link:hover{color:var(--verde)}
.zona .oppure button.come-link:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:3px}

.pregi{display:flex;justify-content:center;gap:26px;margin:26px 0 0;flex-wrap:wrap}
.pregio{display:flex;gap:8px;align-items:center;font-size:16.9px;color:var(--testo-2)}
.pregio b{color:var(--testo);font-weight:600}

.altro{max-width:860px;margin:52px auto 0;text-align:left}
.altro h2{font-size:15.3px;text-transform:uppercase;letter-spacing:.1em;color:var(--riga);
  font-weight:700;margin:0 0 14px;text-align:center}
.carte{display:flex;gap:14px;flex-wrap:wrap}
.carta{
  flex:1;min-width:250px;background:#FFFFFF;border:1px solid var(--bordo);border-radius:12px;
  padding:18px 19px;color:inherit;display:block;box-shadow:0 1px 2px rgba(23,27,32,.04);
}
.carta.spenta{opacity:.62}
.carta .cima{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.carta .bollo{width:32px;height:32px;border-radius:9px;background:var(--verde-pallido);
  display:flex;align-items:center;justify-content:center;flex:none}
.carta h3{margin:0;font-size:19.8px;font-weight:650}
.carta p{margin:0;color:var(--testo-2);font-size:16.9px;line-height:1.45;
  text-align:justify;hyphens:none}
.carta .dopo{display:inline-block;background:#F3F1EC;border:1px solid var(--bordo);color:var(--testo-2);
  border-radius:100px;padding:1px 9px;font-size:12.4px;font-weight:600;margin-left:8px}

.seo{max-width:700px;margin:56px auto 0;text-align:left;padding:30px 0 70px;
  color:var(--testo-2);font-size:18.6px;border-top:1px solid var(--bordo)}
.seo h2{font-size:21.5px;color:var(--testo);margin:0 0 10px;font-weight:600}
/* il testo lungo in fondo alla home segue la regola delle altre pagine */
.seo p{text-align:justify;hyphens:none}
.seo code{background:#EFECE5;border-radius:3px;padding:1px 5px;font-size:14.7px}

/* Footer come si usa: poche righe centrate in fondo alla pagina, fondo chiaro
   e testo scuro. Le scritte chiare su fondo scuro si leggono male e pesano
   visivamente piu' di quanto un footer debba pesare. */
/* Stesso verde della testata, cosi' la pagina si chiude come si e' aperta.
   Su fondo scuro il testo torna per forza chiaro: e' un avorio tenue, non
   bianco pieno, che a queste dimensioni si legge senza abbagliare. */
footer.sito{
  /* stesso verde della testata: le due fasce si chiudono a libro */
  background:linear-gradient(100deg,#143356 0%,#1B406A 100%);
  color:#E8ECF1;font-size:16px;line-height:1.5;
  /* era 26/30: il piede si era fatto alto quanto mezzo schermo */
  padding:18px 24px 20px;text-align:center;
}
/* Il piede: a sinistra le due cose che chi arriva qui vuole sapere subito —
   dove finiscono i suoi file e cosa il programma non fa — a destra i link.
   La firma sotto, in mezzo, staccata da una riga sottile. */
footer.sito .piede-dentro{
  max-width:var(--largo);margin:0 auto;display:flex;gap:48px;
  align-items:flex-start;justify-content:space-between;text-align:left;
  /* niente a capo finché c'è schermo: è il testo a stringersi, non le colonne
     a finire sotto — spostandole di qualche centimetro il blocco cresceva
     oltre lo spazio disponibile e il piede si sfasciava */
  flex-wrap:nowrap;
}
footer.sito .piede-testo{flex:1 1 auto;min-width:0;max-width:900px}
/* La riga sulle cose che il programma non fa. Prima era tenuta su una riga
   sola a forza sopra i 1280 punti, e sotto si spezzava dove capitava: con
   l'ultima riga corta e il testo giustificato sembrava rotta, non scritta.
   Ora la riga sola non si impone più — coi gruppi di collegamenti diventati
   cinque non ci starebbe comunque — e quando va a capo le due righe vengono
   della stessa lunghezza, che è la differenza fra «due righe» e «una riga
   traboccata». Niente giustificato qui: su due righe apre buchi fra le
   parole. */
footer.sito .piede-una-riga{font-size:15.2px;text-align:left;text-wrap:balance}
footer.sito p{margin:0 0 10px}
footer.sito .piede-testo p{text-align:justify;hyphens:none}
/* le colonne di collegamenti stavano larghe il doppio del necessario. Lo
   spazio fra una voce e l'altra e' stato stretto due volte: interlinea da 1,5
   a 1,1 (poco piu' di un pixel e mezzo di respiro invece di sedici) e
   distacco fra le righe da 7 pixel a 1. Sotto non si scende: le voci
   comincerebbero a toccarsi, e il piede diventerebbe un blocco unico. */
footer.sito .piede-link{
  flex:0 0 auto;display:flex;flex-direction:column;gap:1px;min-width:0;
  line-height:1.1;
}
footer.sito .piede-tit{
  font-size:14.4px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#CFD8E0;margin-bottom:3px;
}
footer.sito .piede-link a{border-bottom:none;width:max-content}
footer.sito .piede-link a:hover{border-bottom:1px solid #EAEEF3}
.piede-firma{text-align:center}
footer.sito b{color:#F2F4F7}
footer.sito a{color:#EAEEF3;text-decoration:none;border-bottom:1px solid rgba(234,238,243,.4)}
footer.sito a:hover{border-bottom-color:#EAEEF3}
footer.sito .piede-firma{
  max-width:var(--largo);margin:14px auto 0;padding-top:11px;text-align:center;
  border-top:1px solid rgba(214,222,229,.28);font-size:15.3px;color:#CFD8E0;
}
.piede-firma a{margin-left:14px}

/* ---------- stato di lavoro ---------- */
.riepilogo{
  background:#FFFFFF;border-bottom:1px solid var(--bordo);border-top:3px solid var(--verde);
  padding:11px 22px;font-size:17.5px;display:flex;gap:9px;align-items:center;flex-wrap:wrap;
}
.riepilogo .da{color:var(--testo-2);font-size:16.9px}
.gettone{display:inline-flex;align-items:center;border-radius:100px;padding:4px 12px;
  font-size:16.4px;font-weight:600;border:1px solid}
.gettone.g-verde{background:var(--verde-pallido);border-color:var(--bordo-verde);color:var(--verde-scuro)}
.gettone.g-grigio{background:#F3F1EC;border-color:var(--bordo);color:var(--testo-2)}
.gettone.g-ocra{background:var(--ocra-pallido);border-color:#EDDCB8;color:var(--ocra)}
.riepilogo .sep{flex:1}
.riepilogo a{color:var(--verde-scuro);text-decoration:none;font-size:16.9px;border-bottom:1px solid var(--bordo-verde)}

.colonne{display:flex;align-items:flex-start}

.elenco{width:clamp(238px,25vw,318px);flex:none;background:#FFFFFF;border-right:1px solid var(--bordo);
  height:calc(100vh - var(--testata) - 43px);overflow:auto}
.elenco .cerca{padding:11px 12px;border-bottom:1px solid var(--bordo-2);position:sticky;top:0;background:#FFFFFF;z-index:2}
.elenco .cerca input{width:100%;border:1px solid var(--bordo);border-radius:7px;background:#FBFAF8;
  padding:8px 11px;font:inherit;font-size:17.5px}
.elenco .cerca input:focus{outline:2px solid var(--bordo-verde);outline-offset:-1px;border-color:var(--verde);background:#FFFFFF}
.voce{padding:11px 14px 11px 15px;border-bottom:1px solid var(--bordo-2);cursor:pointer;border-left:3px solid transparent}
.voce:hover{background:#FAF9F6}
.voce.sel{background:var(--verde-pallido);border-left:4px solid var(--verde);font-weight:600}
.voce .r1{display:flex;justify-content:space-between;gap:8px;font-size:17.5px;align-items:baseline}
.voce .nome{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voce .imp{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.voce .r2{display:flex;justify-content:space-between;gap:8px;font-size:15.8px;color:var(--testo-2);margin-top:3px}
.voce .r2 .td{background:#F3F1EC;border-radius:4px;padding:2px 7px;font-size:14.7px;font-weight:600;white-space:nowrap}
.bollino{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--allarme);
  margin-right:6px;vertical-align:middle}
.vuoto-elenco{padding:20px 14px;color:var(--testo-2);font-size:17.5px}

.pannello{flex:1;min-width:0;height:calc(100vh - var(--testata) - 43px);overflow:auto;padding:0 0 30px;
  display:flex;flex-direction:column}
.barra{
  position:sticky;top:0;z-index:5;background:#FFFFFF;
  border-bottom:2px solid var(--bordo);
  padding:10px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.gruppo{display:flex;gap:7px;align-items:center}
.gruppo .et{font-size:14.1px;color:var(--verde-scuro);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.stili,.interruttore{display:flex;border:1px solid var(--bordo);border-radius:8px;overflow:hidden;
  background:#FFFFFF;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.chip,.interruttore button{
  border:0;border-right:1px solid var(--bordo-2);background:#FFFFFF;
  padding:7px 14px;font:inherit;font-size:16.4px;cursor:pointer;color:var(--testo-2);white-space:nowrap;
}
.chip:last-child,.interruttore button:last-child{border-right:0}
.chip:hover:not(:disabled),.interruttore button:hover{background:#FAF9F6;color:var(--testo)}
.chip.on,.interruttore button.on{background:var(--verde-pallido);color:var(--verde-scuro);
  font-weight:650;box-shadow:inset 0 -2px 0 var(--verde)}
.chip.spento{opacity:.4;cursor:default}
.spunta{display:flex;gap:6px;align-items:center;font-size:16.4px;color:var(--testo-2);cursor:pointer}
.barra .sep{flex:1}
.azione{border:1px solid var(--bordo);background:#FFFFFF;border-radius:8px;padding:8px 15px;
  font:inherit;font-size:16.9px;cursor:pointer;font-weight:500;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.azione:hover{border-color:var(--riga)}
.azione:disabled{opacity:.5;cursor:default}
.azione.primaria{background:var(--verde);border-color:var(--verde-scuro);color:#FFFFFF;font-weight:650;
  box-shadow:0 1px 2px rgba(20,66,121,.3)}
.azione.primaria:hover:not(:disabled){background:var(--verde-scuro)}

.avviso{margin:16px 20px 0;border:1px solid #EBD3CC;background:var(--allarme-pallido);
  border-left:4px solid var(--allarme);border-radius:8px;padding:12px 16px;font-size:17.5px;
  display:flex;gap:11px;align-items:baseline}
.avviso .tit{color:var(--allarme);font-weight:700;white-space:nowrap}
.avviso.nota{border-color:#EDDCB8;background:var(--ocra-pallido);border-left-color:var(--ocra)}
.avviso.nota .tit{color:var(--ocra)}
.contatore{margin:13px 20px 0;font-size:15.8px;color:var(--riga);line-height:1.5}
.contatore .anom{font-weight:650;color:var(--testo-2)}

.telaio{flex:1;padding:14px 20px 0;display:flex;justify-content:center;position:relative;min-height:60vh}
#foglio{width:100%;max-width:900px;height:100%;min-height:70vh;border:1px solid var(--bordo);
  border-radius:4px;background:#FFFFFF;box-shadow:0 1px 2px rgba(23,27,32,.06),0 12px 34px rgba(23,27,32,.09)}
.attesa{position:absolute;inset:14px 20px 0;display:flex;align-items:center;justify-content:center;
  background:rgba(244,242,238,.8);color:var(--testo-2);font-size:15.8px}

/* ---------- finestre ---------- */
.velo{position:fixed;inset:0;background:rgba(14,28,47,.5);display:flex;align-items:center;
  justify-content:center;z-index:20;backdrop-filter:blur(2px);padding:20px}
.dialogo{background:#FFFFFF;border-radius:14px;width:480px;max-width:100%;padding:24px 26px;
  box-shadow:0 24px 70px rgba(14,28,47,.35);max-height:86vh;overflow:auto}
.dialogo.largo{width:680px}
/* Il dialogo resta della sua misura: e' il titolo che si adatta. «Non posso
   leggere e stampare questo file» spezzato in due righe sembrava un discorso
   interrotto, e per tenerlo in riga basta un corpo un po' piu' contenuto —
   allargare la finestra era la cura sbagliata. Sugli schermi stretti il
   titolo torna ad andare a capo, che e' meglio di una riga tagliata. */
.dialogo.avviso h3{font-size:19.4px;line-height:1.25}
@media (min-width:560px){
  .dialogo.avviso h3{white-space:nowrap}
}
.dialogo h3{margin:0 0 4px;font-size:23.7px;font-weight:650}
.dialogo .sub{color:var(--testo-2);font-size:16.9px;margin:0 0 16px;text-align:justify;hyphens:none}
.dialogo textarea{width:100%;border:1px solid var(--bordo);border-radius:8px;padding:10px;
  font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;resize:vertical}
label.scelta{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;font-size:15.8px;
  cursor:pointer;border:1px solid var(--bordo-2);border-radius:8px;margin-bottom:7px;font-size:17.5px}
label.scelta:hover{background:#FAF9F6}
label.scelta small{display:block;color:var(--testo-2);font-size:15.8px;margin-top:2px}
.dialogo code{background:#F3F1EC;border-radius:3px;padding:1px 4px;font-size:13px}
.barretta{height:8px;background:#EAE7E0;border-radius:5px;overflow:hidden;margin:18px 0 8px}
.barretta i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--verde),var(--verde-chiaro));transition:width .2s}
.dialogo .stato{font-size:16.4px;color:var(--testo-2);min-height:18px}
.dialogo .fondo{display:flex;gap:9px;justify-content:flex-end;margin-top:18px}
.scartati{max-height:50vh;overflow:auto;border:1px solid var(--bordo-2);border-radius:8px}
.scarto{display:flex;gap:12px;padding:8px 12px;border-bottom:1px solid var(--bordo-2);font-size:16.9px}
.scarto:last-child{border-bottom:0}
.scarto .f{font-weight:600;flex:0 0 45%;word-break:break-all}
.scarto .m{color:var(--testo-2)}

/* ---------- schermo piccolo ---------- */
@media (max-width:860px){
  .payoff{display:none}
  .avvio h1{font-size:33.9px}
  .colonne{flex-direction:column}
  .elenco{width:100%;height:auto;max-height:40vh;border-right:0;border-bottom:1px solid var(--bordo)}
  .pannello{height:auto;width:100%}
  #foglio{min-height:80vh}
}

/* ================= correttore (progetto 2) ================= */

.modulo{
  width:400px;flex:none;background:#FFFFFF;border-right:1px solid var(--bordo);
  height:calc(100vh - var(--testata) - 43px);overflow:auto;padding-bottom:40px;
}
.scelta-corpo{
  border:1px solid var(--bordo);border-radius:7px;padding:5px 9px;font:inherit;font-size:16.4px;background:#FFFFFF;
}

.gr{border-bottom:1px solid var(--bordo-2)}
.gr-tit{
  margin:0;position:sticky;top:0;background:rgba(255,255,255,.96);
  backdrop-filter:blur(4px);z-index:1;
}
/* Il titolo del gruppo è un bottone, perché apre e chiude: da tastiera ci si
   arriva, e dice se il gruppo è aperto. Vestito come il titolo di prima. */
.gr-tit .gr-bottone{
  width:100%;font:inherit;padding:12px 16px;font-size:15.3px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--verde-scuro);font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:8px;background:none;border:0;text-align:left;
}
.gr-tit .gr-bottone:hover{color:var(--verde-scuro);background:var(--verde-pallido)}
.gr-tit .gr-bottone:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
.gr-tit .freccia{margin-left:auto;width:8px;height:8px;border-right:1.6px solid var(--riga);
  border-bottom:1.6px solid var(--riga);transform:rotate(45deg);transition:transform .15s;flex:none}
.gr.ripiegato .gr-tit .freccia{transform:rotate(-45deg)}
.gr.ripiegato .gr-corpo{display:none}
.gr-corpo{padding:2px 16px 14px}

label.campo{display:block;margin-bottom:11px;position:relative}
.et-campo{display:block;font-size:15.3px;color:var(--testo-2);margin-bottom:3px}
label.campo input,label.campo select,label.campo textarea{
  width:100%;border:1px solid var(--bordo);border-radius:7px;background:#FDFDFC;
  padding:8px 11px;font:inherit;font-size:18.1px;color:var(--testo);transition:.12s;
}
label.campo textarea{resize:vertical;line-height:1.4}
label.campo input:focus,label.campo select:focus,label.campo textarea:focus{
  outline:2px solid var(--bordo-verde);outline-offset:-1px;border-color:var(--verde);background:#FFFFFF;
}
label.campo.ok input,label.campo.ok select,label.campo.ok textarea{
  border-color:var(--verde);background:#FBFDFE;
}
label.campo.errore input,label.campo.errore select,label.campo.errore textarea{
  border-color:var(--allarme);background:var(--allarme-pallido);
}
.esito{display:block;font-size:14.7px;margin-top:3px;line-height:1.35;min-height:0}
label.campo.ok .esito{color:var(--verde-scuro)}
label.campo.ok .esito::before{content:"✓ ";font-weight:700}
label.campo.errore .esito{color:var(--allarme)}
label.campo.errore .esito::before{content:"✕ ";font-weight:700}
.aiuto{display:block;font-size:14.7px;color:var(--riga);margin-top:3px;line-height:1.35}

.avviso.ok{border-color:var(--bordo-verde);background:var(--verde-pallido);border-left-color:var(--verde)}
.avviso.ok .tit{color:var(--verde-scuro)}

@media (max-width:860px){
  .modulo{width:100%;height:auto;max-height:50vh;border-right:0;border-bottom:1px solid var(--bordo)}
}

/* ================= compilatore (progetto 3) ================= */

.gr-azioni{margin:2px 0 6px}
.azione.piccola{padding:5px 11px;font-size:15.8px;border-radius:6px}
.azione.urgente{
  border-color:var(--allarme);color:var(--allarme);background:var(--allarme-pallido);font-weight:650;
}
.azione.urgente:hover{border-color:var(--allarme);background:#F9E7E2}
.carta .vai{display:inline-block;margin-top:10px;color:var(--verde-scuro);font-size:16.9px;font-weight:600}
a.carta{text-decoration:none;transition:.15s}
a.carta:hover{border-color:var(--verde);box-shadow:0 3px 14px rgba(20,66,121,.13);transform:translateY(-2px)}

/* ================= compilatore: impaginazione a modulo ==================
   Il compilatore non e' un visualizzatore con un pannello di modifica a lato:
   e' un modulo da riempire, e si compila come un 730. Descrizione a sinistra,
   campo a destra, una riga sotto l'altra, tutta la larghezza della pagina.
   L'anteprima della fattura sta sotto, dove si guarda quando serve.
   Le regole valgono solo qui: la pagina "correggi" usa ancora la colonna. */

.impilato{display:block}

.compila .modulo{
  width:auto;flex:none;height:auto;max-height:none;overflow:visible;
  border-right:0;border-bottom:1px solid var(--bordo);
  max-width:var(--largo);margin:0 auto;padding:0 24px 28px;
}

.compila .gr{border-bottom:0;margin-top:26px}
.compila .gr-tit{
  position:static;background:none;backdrop-filter:none;
  padding:0 0 8px;border-bottom:2px solid var(--verde);font-size:16.4px;
}
.compila .gr-corpo{padding:0}

/* la riga del modulo: etichetta a sinistra, campo a destra */
.compila label.campo{
  display:grid;grid-template-columns:290px minmax(0,1fr);
  align-items:baseline;gap:4px 20px;margin:0;
  padding:9px 6px;border-bottom:1px solid var(--bordo-2);
}
.compila label.campo:hover{background:#FBFAF7}
.compila .et-campo{
  margin:0;font-size:16.9px;color:var(--testo);text-align:right;
  padding-top:8px;line-height:1.3;
}
.compila label.campo input,
.compila label.campo select,
.compila label.campo textarea{max-width:520px}
/* esito e aiuto stanno sotto il campo, non sotto l'etichetta */
.compila .esito,
.compila .aiuto{grid-column:2;margin-top:2px;max-width:520px}

/* l'anteprima, sotto il modulo */
.compila .pannello{max-width:var(--largo);margin:0 auto;padding:0 24px 40px}
.compila .barra{position:sticky;top:0;z-index:3}
.compila .telaio{display:flex;justify-content:center}
.compila #foglio{min-height:78vh}

@media (max-width:820px){
  .compila label.campo{grid-template-columns:1fr;gap:2px}
  .compila .et-campo{text-align:left;padding-top:0}
  .compila .esito,.compila .aiuto{grid-column:1}
  .compila label.campo input,
  .compila label.campo select,
  .compila label.campo textarea{max-width:none}
}

/* --- i flag in cima al compilatore --- */
.flag-barra{max-width:var(--largo);margin:0 auto;padding:16px 24px 0}
.flag-riga{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* quattro punti piu' grande degli altri testi della barra: e' la domanda
   che comanda tutto il modulo, non un'etichetta di servizio */
.flag-et{font-size:24px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--testo-2);margin-right:8px}
.flag-riga .flag{
  font:inherit;font-size:16.4px;font-weight:600;cursor:pointer;
  border:1px solid var(--bordo);border-radius:100px;background:#FFFFFF;
  color:var(--testo-2);padding:7px 15px;transition:.14s;
}
.flag-riga .flag:hover{border-color:var(--verde);color:var(--verde-scuro)}
.flag-riga .flag.acceso{
  background:var(--verde);border-color:var(--verde);color:#FFFFFF;
}
.flag-sep{flex:1;min-width:12px}
.flag-spunta{display:flex;align-items:center;gap:7px;font-size:16.4px;color:var(--testo-2);cursor:pointer}
.flag-spunta input{width:17px;height:17px;accent-color:var(--verde)}
.flag-aiuto{
  font-size:15.3px;color:var(--riga);line-height:1.4;margin-top:8px;
  padding-bottom:14px;border-bottom:1px solid var(--bordo-2);
}

/* --- fondo dei campi da compilare ---
   Un campo vuoto deve dire "qui si scrive". Il bianco su carta bianca non lo
   dice: il grigetto s'i, e sparisce appena il campo e' a posto o in errore,
   dove parlano gli altri colori. */
.compila label.campo input,
.compila label.campo select,
.compila label.campo textarea{background:#E8E4DA;border-color:#B9B0A0;border-width:1px}
.compila label.campo input:focus,
.compila label.campo select:focus,
.compila label.campo textarea:focus{background:#FFFFFF}
/* Il campo valido NON torna bianco: la casella da compilare resta grigia
   sempre, cosi' il modulo si legge a colpo d'occhio come un foglio di caselle.
   Che il valore sia buono lo dicono il bordo verde e il segno di spunta. */
.compila label.campo.ok input,
.compila label.campo.ok select,
.compila label.campo.ok textarea{background:#E8E4DA;border-color:var(--verde)}
.compila label.campo.errore input,
.compila label.campo.errore select,
.compila label.campo.errore textarea{background:var(--allarme-pallido)}

/* --- la trasmissione sta su una riga sola ---
   Progressivo, codice destinatario e PEC sono tre dati brevi e legati fra loro:
   incolonnati occupavano tre righe per dire una cosa sola. Qui vanno affiancati,
   con l'etichetta sopra il campo perche' di fianco non ci starebbe. */
.compila .gr[data-g="trasmissione"] .gr-corpo{
  /* la colonna del codice destinatario e' larga quanto il suo messaggio piu'
     lungo ("con 0000000 serve la PEC, altrimenti la fattura non ha recapito"):
     stretta, quel testo andava a capo tre volte e si accavallava all'aiuto. */
  display:grid;grid-template-columns:170px 460px minmax(280px,1fr);
  gap:0 22px;align-items:start;
}
.compila .gr[data-g="trasmissione"] .esito,
.compila .gr[data-g="trasmissione"] .aiuto{white-space:nowrap}
.compila .gr[data-g="trasmissione"] label.campo{
  display:block;border-bottom:0;padding:9px 0;
}
.compila .gr[data-g="trasmissione"] label.campo:hover{background:none}
.compila .gr[data-g="trasmissione"] .et-campo{
  text-align:left;padding-top:0;margin-bottom:4px;font-size:16.4px;
}
.compila .gr[data-g="trasmissione"] label.campo input{max-width:none}
.compila .gr[data-g="trasmissione"] .esito,
.compila .gr[data-g="trasmissione"] .aiuto{max-width:none}

@media (max-width:820px){
  .compila .gr[data-g="trasmissione"] .gr-corpo{grid-template-columns:1fr;gap:0}
}

/* --- anagrafiche compatte ---
   Denominazione, partita IVA, indirizzo e recapiti sono dodici campi che
   incolonnati fanno dodici righe e mandano il resto del modulo sotto la piega.
   Su una griglia a 12 colonne stanno in cinque righe, raggruppati come li
   pensa chi compila: i codici fiscali insieme, la via col civico, il CAP col
   comune. Etichetta sopra il campo, perche' di fianco non ci starebbe. */
.compila .gr[data-g="cedente"] .gr-corpo,
.compila .gr[data-g="cessionario"] .gr-corpo{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 18px;align-items:start;
}
.compila .gr[data-g="cedente"] label.campo,
.compila .gr[data-g="cessionario"] label.campo{
  display:block;border-bottom:0;padding:8px 0;grid-column:span 12;
}
.compila .gr[data-g="cedente"] label.campo:hover,
.compila .gr[data-g="cessionario"] label.campo:hover{background:none}
.compila .gr[data-g="cedente"] .et-campo,
.compila .gr[data-g="cessionario"] .et-campo{
  text-align:left;padding-top:0;margin-bottom:4px;font-size:16.4px;
}
.compila .gr[data-g="cedente"] label.campo input,
.compila .gr[data-g="cedente"] label.campo select,
.compila .gr[data-g="cessionario"] label.campo input,
.compila .gr[data-g="cessionario"] label.campo select{max-width:none}
.compila .gr[data-g="cedente"] .esito,
.compila .gr[data-g="cedente"] .aiuto,
.compila .gr[data-g="cessionario"] .esito,
.compila .gr[data-g="cessionario"] .aiuto{max-width:none;grid-column:auto}

/* Dove sta ogni campo, in colonne di dodici.
   Il prefisso .gr[data-g] non e' decorativo: senza, la regola di gruppo che
   assegna "span 12" a ogni etichetta ha specificita' piu' alta e vince su
   queste, e i campi tornano tutti incolonnati. */
.compila .gr[data-g] label.campo[data-campo$="-denom"]{grid-column:span 12}
.compila .gr[data-g] label.campo[data-campo$="-piva"],
.compila .gr[data-g] label.campo[data-campo$="-cf"]{grid-column:span 6}
/* nel cedente sono tre su una riga: partita IVA, codice fiscale, regime */
.compila .gr[data-g="cedente"] label.campo[data-campo$="-piva"],
.compila .gr[data-g="cedente"] label.campo[data-campo$="-cf"]{grid-column:span 3}
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-regime"]{grid-column:span 6}
.compila .gr[data-g] label.campo[data-campo$="-via"]{grid-column:span 9}
.compila .gr[data-g] label.campo[data-campo$="-civico"]{grid-column:span 3}
.compila .gr[data-g] label.campo[data-campo$="-cap"]{grid-column:span 2}
.compila .gr[data-g] label.campo[data-campo$="-comune"]{grid-column:span 6}
.compila .gr[data-g] label.campo[data-campo$="-prov"]{grid-column:span 2}
.compila .gr[data-g] label.campo[data-campo$="-naz"]{grid-column:span 2}
.compila .gr[data-g] label.campo[data-campo$="-tel"]{grid-column:span 5}
.compila .gr[data-g] label.campo[data-campo$="-email"]{grid-column:span 7}

/* partita IVA, codice fiscale e regime: un terzo di riga ciascuno */
.compila .gr[data-g] label.campo[data-campo="ced-regime"]{grid-column:span 6}

@media (max-width:820px){
  .compila .gr[data-g="cedente"] .gr-corpo,
  .compila .gr[data-g="cessionario"] .gr-corpo{grid-template-columns:1fr}
  .compila .gr[data-g="cedente"] label.campo,
  .compila .gr[data-g="cessionario"] label.campo{grid-column:span 1}
}

/* --- il modulo come foglio appoggiato ---
   Il contrasto che funziona non e' dentro il modulo: e' fra il modulo e cio'
   che ha intorno. La finestra del profilo lo dimostra — un foglio bianco su
   fondo verde si legge subito. Qui si fa lo stesso col modulo e con
   l'anteprima: due fogli su un piano verde, che e' anche il senso del sito. */
.compila{background:#878F99;padding-bottom:40px}

.compila .flag-barra{
  background:transparent;padding:20px 24px 4px;
}
.compila .flag-et{color:#EAEDF1}
.compila .flag-riga .flag{background:#FFFFFF;border-color:transparent}
.compila .flag-riga .flag:hover{border-color:#FFFFFF;color:var(--verde-scuro)}
.compila .flag-riga .flag.acceso{background:var(--verde-scuro);border-color:var(--verde-scuro);color:#FFFFFF}
.compila .flag-spunta{color:#EAEDF1}
.compila .flag-aiuto{color:#DDE2E8;border-bottom:0;padding-bottom:4px}

.compila .modulo{
  background:#FFFFFF;border:0;border-radius:14px;
  box-shadow:0 24px 70px rgba(14,28,47,.35);
  padding:6px 30px 26px;margin:14px auto 22px;
}

.compila .pannello{padding:0 24px 8px}
.compila .barra{
  background:rgba(255,255,255,.94);border-radius:12px;padding:10px 14px;
  box-shadow:0 2px 10px rgba(14,28,47,.18);top:8px;
}
/* Nessuna cornice attorno all'anteprima: la fattura e' gia' un foglio bianco,
   e incorniciare un foglio con un altro foglio aggiunge un bordo che non
   significa niente. L'ombra passa direttamente sulla fattura, che cosi' si
   stacca dal piano verde da sola. */
.compila .telaio{background:none;border-radius:0;padding:0;margin-top:14px;box-shadow:none}
/* L'anteprima torna ad altezza fissa e scorre per conto suo: e' l'unico
   scorrimento interno rimasto, e riguarda la fattura, non il modulo. */
.compila #foglio{border:0;box-shadow:0 24px 70px rgba(14,28,47,.35);
  height:82vh;min-height:520px;display:block}

/* il riepilogo in cima resta leggibile sul verde */
.compila .riepilogo{background:rgba(255,255,255,.9);border-bottom:0}

/* nota in cima al compilatore, al posto della vecchia rubrica */
.nota-riepilogo{color:var(--testo-2);font-size:15.8px}

/* --- righe e pagamenti: anche loro raggruppati ---
   Una riga di fattura sono sette campi che, incolonnati, occupano mezzo schermo
   per dire "una consulenza, 1 pezzo, 1000 euro, 22%". Qui stanno in tre righe,
   con aliquota e natura affiancate perche' si leggono sempre insieme: la natura
   e' l'esenzione che spiega perche' l'aliquota e' zero. */
.compila .gr[data-g^="riga-"] .gr-corpo,
.compila .gr[data-g^="pag-"] .gr-corpo{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 18px;align-items:start;
}
.compila .gr[data-g^="riga-"] label.campo,
.compila .gr[data-g^="pag-"] label.campo{
  display:block;border-bottom:0;padding:8px 0;grid-column:span 12;
}
.compila .gr[data-g^="riga-"] label.campo:hover,
.compila .gr[data-g^="pag-"] label.campo:hover{background:none}
.compila .gr[data-g^="riga-"] .et-campo,
.compila .gr[data-g^="pag-"] .et-campo{
  text-align:left;padding-top:0;margin-bottom:4px;font-size:16.4px;
}
.compila .gr[data-g^="riga-"] label.campo input,
.compila .gr[data-g^="riga-"] label.campo select,
.compila .gr[data-g^="riga-"] label.campo textarea,
.compila .gr[data-g^="pag-"] label.campo input,
.compila .gr[data-g^="pag-"] label.campo select{max-width:none}

/* la riga di fattura */
.compila .gr[data-g] label.campo[data-campo$="-descr"]{grid-column:span 12}
.compila .gr[data-g] label.campo[data-campo$="-qta"]{grid-column:span 2}
.compila .gr[data-g] label.campo[data-campo$="-um"]{grid-column:span 2}
.compila .gr[data-g] label.campo[data-campo$="-pu"]{grid-column:span 4}
.compila .gr[data-g] label.campo[data-campo$="-pt"]{grid-column:span 4}
/* aliquota e natura vanno lette insieme: stessa riga, meta' per uno */
.compila .gr[data-g] label.campo[data-campo$="-al"]{grid-column:span 6}
.compila .gr[data-g] label.campo[data-campo$="-nat"]{grid-column:span 6}

/* la tranche di pagamento */
.compila .gr[data-g] label.campo[data-campo$="-mod"]{grid-column:span 5}
.compila .gr[data-g] label.campo[data-campo$="-imp"]{grid-column:span 3}
.compila .gr[data-g] label.campo[data-campo$="-scad"]{grid-column:span 4}
.compila .gr[data-g] label.campo[data-campo$="-iban"]{grid-column:span 5}
.compila .gr[data-g] label.campo[data-campo$="-ist"]{grid-column:span 3}
.compila .gr[data-g] label.campo[data-campo$="-ben"]{grid-column:span 4}

@media (max-width:820px){
  .compila .gr[data-g^="riga-"] .gr-corpo,
  .compila .gr[data-g^="pag-"] .gr-corpo{grid-template-columns:1fr}
  .compila .gr[data-g^="riga-"] label.campo,
  .compila .gr[data-g^="pag-"] label.campo{grid-column:span 1}
}

/* il riepilogo IVA: aliquota, natura, imponibile e imposta si leggono insieme */
.compila .gr[data-g^="riep-"] .gr-corpo{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 18px;align-items:start;
}
.compila .gr[data-g^="riep-"] label.campo{
  display:block;border-bottom:0;padding:8px 0;grid-column:span 12;
}
.compila .gr[data-g^="riep-"] label.campo:hover{background:none}
.compila .gr[data-g^="riep-"] .et-campo{text-align:left;padding-top:0;margin-bottom:4px;font-size:16.4px}
.compila .gr[data-g^="riep-"] label.campo input,
.compila .gr[data-g^="riep-"] label.campo select,
.compila .gr[data-g^="riep-"] label.campo textarea{max-width:none}
.compila .gr[data-g] label.campo[data-campo$="-imp"]{grid-column:span 3}
.compila .gr[data-g] label.campo[data-campo$="-ta"]{grid-column:span 3}
.compila .gr[data-g] label.campo[data-campo$="-es"]{grid-column:span 5}
.compila .gr[data-g] label.campo[data-campo$="-rn"]{grid-column:span 7}
/* nel riepilogo aliquota e natura stanno strette, per far posto agli importi */
.compila .gr[data-g^="riep-"] label.campo[data-campo$="-al"]{grid-column:span 2}
.compila .gr[data-g^="riep-"] label.campo[data-campo$="-nat"]{grid-column:span 4}

@media (max-width:820px){
  .compila .gr[data-g^="riep-"] .gr-corpo{grid-template-columns:1fr}
  .compila .gr[data-g^="riep-"] label.campo{grid-column:span 1}
}

/* --- il valore calcolato ---
   Si distingue dai campi veri: niente casella grigia da riempire, ma un numero
   appoggiato su fondo verde chiaro. Chi guarda deve capire in un colpo d'occhio
   che quello non si scrive, si legge. */
.compila label.campo.calcolato .valore-calcolato{
  display:block;padding:8px 11px;font-size:18.1px;
  background:var(--verde-pallido);border:1px dashed var(--bordo-verde);border-radius:7px;
  color:var(--verde-scuro);font-variant-numeric:tabular-nums;
}
.compila .gr[data-g] label.campo[data-campo$="-iva"]{grid-column:span 12}

/* --- la sezione del documento ---
   Tipo, numero e data sono l'intestazione della fattura e si leggono insieme:
   "fattura numero 12 del 3 settembre". Incolonnati erano tre righe per dire
   una frase sola. */
.compila .gr[data-g="documento"] .gr-corpo{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 18px;align-items:start;
}
.compila .gr[data-g="documento"] label.campo{
  display:block;border-bottom:0;padding:8px 0;grid-column:span 12;
}
.compila .gr[data-g="documento"] label.campo:hover{background:none}
.compila .gr[data-g="documento"] .et-campo{
  text-align:left;padding-top:0;margin-bottom:4px;font-size:16.4px;
}
.compila .gr[data-g="documento"] label.campo input,
.compila .gr[data-g="documento"] label.campo select,
.compila .gr[data-g="documento"] label.campo textarea{max-width:none}

.compila .gr[data-g] label.campo[data-campo="tipo"]{grid-column:span 5}
.compila .gr[data-g] label.campo[data-campo="numero"]{grid-column:span 3}
.compila .gr[data-g] label.campo[data-campo="data"]{grid-column:span 4}
.compila .gr[data-g] label.campo[data-campo="totale"]{grid-column:span 6}
.compila .gr[data-g] label.campo[data-campo="arrotondamento"]{grid-column:span 6}
.compila .gr[data-g] label.campo[data-campo="causale"]{grid-column:span 12}

@media (max-width:820px){
  .compila .gr[data-g="documento"] .gr-corpo{grid-template-columns:1fr}
  .compila .gr[data-g="documento"] label.campo{grid-column:span 1}
}

/* --- la sezione Pagamento ---
   Condizioni si allinea a sinistra come Causale e Tipo documento: etichetta
   sopra, tendina subito sotto. I pulsanti per aggiungere e togliere una
   modalita' stanno sulla stessa riga della tendina, non sotto: sono l'azione
   che la riguarda. */
.compila .gr[data-g="pagamento"] .gr-corpo{
  display:grid;grid-template-columns:repeat(12,1fr);gap:0 18px;align-items:end;
}
.compila .gr[data-g="pagamento"] label.campo{
  display:block;border-bottom:0;padding:8px 0;grid-column:span 5;
}
.compila .gr[data-g="pagamento"] label.campo:hover{background:none}
.compila .gr[data-g="pagamento"] .et-campo{
  text-align:left;padding-top:0;margin-bottom:4px;font-size:16.4px;
}
.compila .gr[data-g="pagamento"] label.campo select{max-width:none}
.compila .gr[data-g="pagamento"] .gr-azioni{
  /* allineati in alto, alla riga dell'etichetta "Condizioni", non al fondo
     della tendina: cosi' stanno una riga piu' su */
  grid-column:span 7;margin:0;align-self:start;padding:4px 0 0;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;
}
.compila .gr[data-g="pagamento"] .gr-azioni button[disabled]{
  opacity:.45;cursor:default;
}

/* nei gruppi a griglia la fila dei pulsanti prende tutta la riga, altrimenti
   finirebbe schiacciata in una colonna sola */
.compila .gr[data-g^="riga-"] .gr-azioni,
.compila .gr[data-g^="pag-"] .gr-azioni,
.compila .gr[data-g^="riep-"] .gr-azioni{
  grid-column:1 / -1;display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;
}

@media (max-width:820px){
  .compila .gr[data-g="pagamento"] .gr-corpo{grid-template-columns:1fr}
  .compila .gr[data-g="pagamento"] label.campo,
  .compila .gr[data-g="pagamento"] .gr-azioni{grid-column:span 1}
}

/* --- respiro delle due barre in cima al compilatore ---
   La striscia bianca con la nota e il reset, e la riga dei flag sotto: una
   riga di testo piu' alte ciascuna, per staccarle dal foglio del modulo. */
.compila .riepilogo{padding-top:9px;padding-bottom:9px}
.compila .flag-barra{padding:30px 24px 14px}

/* i due pulsanti della propria anagrafica, sotto il reset */
.anagrafica-mia{flex-basis:100%;display:flex;gap:8px;margin-top:10px;justify-content:flex-end}

/* un campo calcolato che pero' finisce nell'XML: stesso aspetto del valore
   calcolato, ma resta un input (il compilatore ci scrive dentro il totale) */
.compila label.campo.calcolato input{
  background:var(--verde-pallido);border:1px dashed var(--bordo-verde);
  color:var(--verde-scuro);font-variant-numeric:tabular-nums;cursor:default;
}
.compila label.campo.calcolato input:focus{background:var(--verde-pallido);outline:none}

/* --- ritocchi di ultima mano ---
   I campi lunghi (causale, riferimento normativo) partono da una riga sola:
   due righe vuote su un modulo gia' fitto sembrano un errore. Restano
   allungabili trascinando l'angolo. */
.compila label.campo textarea{height:44px;min-height:44px}

/* il suggerimento sui caratteri sta su una riga sola: e' una regola, non un
   paragrafo, e spezzata su tre righe sembrava un avviso di errore */
.compila .gr[data-g="documento"] label.campo[data-campo="causale"] .aiuto{white-space:nowrap}

/* la barra bianca ora contiene solo i due pulsanti */
.compila .riepilogo{justify-content:flex-end}
.anagrafica-mia{margin-top:0}

/* pulsante che prende tutta la larghezza della sezione */
.compila .gr-azioni button.larga{flex-basis:100%;justify-content:center;padding:10px 14px}

/* ultima riga del cedente: IBAN, telefono ed email, un terzo per uno */
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-iban"],
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-tel"],
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-email"]{grid-column:span 4}

/* --- cedente: denominazione e regime sulla stessa riga ---
   Il regime fiscale e' un menu a tendina con codici corti: non gli serve mezza
   riga. Quello che avanza va alla denominazione, che invece e' il campo piu'
   lungo del modulo. Partita IVA e codice fiscale scendono sulla riga sotto,
   meta' per uno. */
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-denom"]{grid-column:span 7}
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-regime"]{grid-column:span 5}
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-piva"],
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-cf"]{grid-column:span 6}

/* --- l'indirizzo su una riga sola ---
   Ridotti tutti, i sei campi dell'indirizzo entrano in una riga sola e si
   leggono come si scrive un indirizzo: via, civico, CAP, comune, provincia,
   nazione. CAP, provincia e nazione hanno la stessa larghezza perche'
   contengono la stessa quantita' di caratteri: cinque cifre e due sigle. */
.compila .gr[data-g="cedente"] label.campo[data-campo$="-via"],
.compila .gr[data-g="cessionario"] label.campo[data-campo$="-via"]{grid-column:span 5}
.compila .gr[data-g="cedente"] label.campo[data-campo$="-civico"],
.compila .gr[data-g="cessionario"] label.campo[data-campo$="-civico"]{grid-column:span 1}
.compila .gr[data-g="cedente"] label.campo[data-campo$="-cap"],
.compila .gr[data-g="cedente"] label.campo[data-campo$="-prov"],
.compila .gr[data-g="cedente"] label.campo[data-campo$="-naz"],
.compila .gr[data-g="cessionario"] label.campo[data-campo$="-cap"],
.compila .gr[data-g="cessionario"] label.campo[data-campo$="-prov"],
.compila .gr[data-g="cessionario"] label.campo[data-campo$="-naz"]{grid-column:span 1}
.compila .gr[data-g="cedente"] label.campo[data-campo$="-comune"],
.compila .gr[data-g="cessionario"] label.campo[data-campo$="-comune"]{grid-column:span 3}

/* telefono ed email dimezzati: due su dodici l'uno. L'IBAN resta largo,
   sono ventisette caratteri e nasconderli meta' non aiuta a rileggerli. */
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-tel"],
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-email"]{grid-column:span 2}

/* --- cedente, righe definitive ---
   La nazione sale accanto a partita IVA e codice fiscale: e' un dato
   dell'identita' fiscale, non della via. Il comune si allarga di quanto lascia
   libero, cosi' la riga dell'indirizzo torna piena. */
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-piva"],
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-cf"]{grid-column:span 5}
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-naz"]{grid-column:span 2}
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-comune"]{grid-column:span 4}

/* i tre campi della trasmissione, ora ultima riga del cedente */
.compila .gr[data-g="cedente"] label.campo[data-campo="progressivo"]{grid-column:span 2}
.compila .gr[data-g="cedente"] label.campo[data-campo="codDest"]{grid-column:span 5}
.compila .gr[data-g="cedente"] label.campo[data-campo="pecDest"]{grid-column:span 5}
.compila .gr[data-g="cedente"] label.campo[data-campo="codDest"] .esito,
.compila .gr[data-g="cedente"] label.campo[data-campo="codDest"] .aiuto{white-space:nowrap}

/* --- i dati di trasmissione, ultima riga del cedente ---
   "1 / span 2" invece di "span 2": il progressivo deve COMINCIARE una riga
   nuova, altrimenti si infila nelle colonne rimaste libere dopo l'email e il
   codice destinatario finisce da solo sulla riga sotto. */
.compila .gr[data-g="cedente"] label.campo[data-campo="progressivo"]{grid-column:1 / span 2}
.compila .gr[data-g="cedente"] label.campo[data-campo="codDest"]{grid-column:span 3}
.compila .gr[data-g="cedente"] label.campo[data-campo="pecDest"]{grid-column:span 7}

/* --- la riga della quadratura resta in vista ---
   Dice se i conti tornano: e' l'informazione che si controlla mentre si
   modificano gli importi, e scorreva via appena il modulo si allungava.
   Ora sta appiccicata sotto la barra dei comandi. */
.compila #avviso{position:sticky;top:64px;z-index:2}
.compila #avviso .avviso{
  margin:0 0 10px;box-shadow:0 2px 10px rgba(14,28,47,.18);
  background:#FFFFFF;border-radius:10px;
}

/* i cinque stili di stampa: quelli non ancora scritti restano spenti */
.compila #stili button[disabled]{opacity:.4;cursor:default}

/* --- niente scorrimenti interni ---
   Una pagina sola che scorre. Il modulo non ha piu' altezza fissa, l'anteprima
   e' alta quanto le sue pagine, e la barra dei comandi con la riga della
   quadratura restano insieme appiccicate in cima: prima l'avviso scivolava
   sotto i pulsanti perche' erano due elementi appiccicati a quote diverse. */
/* La barra non e' piu' appiccicata: restando ferma in cima, la fattura le
   scorreva sotto e spariva dietro di lei mano a mano che si scendeva. Meglio
   che scorra via anche lei: cosi' niente si sovrappone a niente. */
.compila .testa-anteprima{position:static;padding-top:8px}
.compila .barra{position:static;box-shadow:0 2px 10px rgba(14,28,47,.18)}
.compila #avviso{position:static}
.compila #avviso .avviso{margin:8px 0 0}

/* Il foglio di stile di base da' al pannello un'altezza fissa pari allo
   schermo (height:calc(100vh - ...)) perche' li' dentro scorreva da solo.
   Qui il pannello deve essere alto quanto il suo contenuto: senza "height:auto"
   la fattura esce dal contenitore e si stampa sopra la barra e sopra il footer. */
.compila .modulo,
.compila .pannello,
.compila .telaio{overflow:visible;max-height:none;height:auto}
.compila .telaio{min-height:0;flex:none}
.compila #foglio{overflow:auto}

/* ID documento, CIG e CUP: sotto la causale, un terzo di riga ciascuno */
.compila .gr[data-g] label.campo[data-campo="ord-id"]{grid-column:1 / span 4}
.compila .gr[data-g] label.campo[data-campo="ord-cig"]{grid-column:span 4}
.compila .gr[data-g] label.campo[data-campo="ord-cup"]{grid-column:span 4}

/* campo spento: si vede che c'e' e che ora non serve */
.compila label.campo.spento .et-campo{color:var(--riga)}
.compila label.campo.spento input{background:#F4F3EF;border-style:dashed;color:var(--riga)}

/* --- stacco fra l'anteprima e il footer ---
   La fattura ha un'ombra profonda e finiva a filo del footer: le scritte
   sembravano appoggiate sul foglio. Serve aria fra le due cose. */
/* Fra la fattura e il footer basta il respiro della pagina: la fascia vuota
   che c'era prima, essendo verde come il piano ma diversa dal footer, sembrava
   un secondo banner. */
.compila .pannello{padding-bottom:40px}
.compila .telaio{margin-bottom:16px}
footer.sito{margin-top:0;padding-top:30px}

/* ---------- il sommario a fianco ----------
   Una pagina lunga si consulta meglio se si vede subito tutto quello che c'e'
   dentro. Tre colonne: a sinistra il sommario, che si tiene fermo mentre si
   scorre; al centro il testo, che riempie tutta la sua colonna; a destra il
   vuoto, che serve a tenere il testo in mezzo alla pagina invece che spostato
   di lato. Le misure sono le stesse per tutte e tre le pagine degli
   approfondimenti, cosi' passando dall'una all'altra non si muove niente.
   Il sommario elenca solo le sezioni della pagina in cui sta: le pagine
   sorelle stanno nel menu e nel piede. Su schermo stretto le colonne
   diventano una sola e il sommario va sopra al testo. */
.con-sommario{
  display:grid;grid-template-columns:236px minmax(0,980px) 236px;
  gap:38px;align-items:start;justify-content:center;
  max-width:1576px;margin:0 auto;padding:0 24px;
}
.con-sommario .pagina-testo{margin:0;padding-left:0;padding-right:0;max-width:none}
.sommario{
  position:sticky;top:22px;margin-top:40px;
  font-size:15.6px;line-height:1.35;
}
.som-blocco{margin-bottom:20px}
/* il titolo del sommario è una fascia verde, come la testata e il piede:
   si vede subito dov'è l'indice e da dove comincia l'elenco */
.som-tit{
  display:block;font-size:13.6px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#FFFFFF;margin-bottom:10px;
  background:linear-gradient(100deg,#143356 0%,#1B406A 100%);
  padding:7px 11px;border-radius:7px;
}
.sommario{text-align:left}
/* le voci del sommario sono verdi come il resto dell'indice: i titoli, che
   stanno su una fascia verde piena, restano bianchi */
.sommario a{
  display:block;color:var(--verde-scuro);text-decoration:none;padding:3px 2px;
  border-bottom:none;text-align:left;
}
.sommario a:hover{color:var(--verde);text-decoration:underline}
@media (max-width:1000px){
  .con-sommario{grid-template-columns:1fr;gap:0;padding:0}
  .sommario{position:static;margin:26px auto 0;max-width:760px;
    padding:0 24px;width:100%}
  .som-blocco{margin-bottom:14px}
}

/* ---------- pagine di testo (domande frequenti, note legali) ---------- */
/* Una colonna stretta: il testo lungo si legge se le righe non sono larghe
   mezzo schermo. */
.pagina-testo{
  max-width:760px;margin:0 auto;padding:38px 24px 56px;
  font-size:18.5px;line-height:1.62;color:var(--testo);
}
.pagina-testo h1{
  font-size:33px;line-height:1.2;margin:0 0 26px;color:var(--verde-scuro);
  letter-spacing:-.01em;
}
.pagina-testo h2{
  font-size:21.5px;line-height:1.3;margin:30px 0 8px;color:var(--verde-scuro);
}
/* Il testo corrente e' giustificato, ma le parole non si spezzano mai: una
   parola tagliata da un trattino a fine riga si legge peggio di una riga con
   qualche spazio in piu'. */
.pagina-testo p,.pagina-testo li{text-align:justify;hyphens:none}
.pagina-testo p{margin:0 0 14px}
.pagina-testo ul,.pagina-testo ol{margin:0 0 14px;padding-left:22px}
.pagina-testo li{margin-bottom:5px}
.pagina-testo code{
  background:#F1EFE9;border:1px solid var(--bordo-2);border-radius:4px;
  padding:1px 5px;font-size:16.5px;
}
.pagina-testo a{color:var(--verde-scuro);text-decoration:none;border-bottom:1px solid var(--bordo-verde)}
.pagina-testo a:hover{border-bottom-color:var(--verde)}

/* L'email si prende quello che avanza in fondo alla riga del cedente.
   IBAN 4 + telefono 2 + email 6 = dodici: la riga finisce dove finisce il
   modulo, e un indirizzo di posta lungo si legge tutto senza scorrere. */
.compila .gr[data-g="cedente"] label.campo[data-campo="ced-email"]{grid-column:span 6}

/* Le due cose che il titolare deve ancora scrivere di suo pugno: si vedono,
   cosi' non si pubblica per sbaglio una pagina con i buchi dentro. */
.pagina-testo .da-completare{
  background:var(--ocra-pallido);border-left:3px solid var(--ocra);
  padding:10px 14px;font-size:17px;color:#6B4E12;border-radius:0 6px 6px 0;
}
.pagina-testo .aggiornata{margin-top:32px;font-size:16.5px;color:var(--testo-2)}

/* Queste due regole esistono per una ragione di sicurezza, non di gusto: se
   nessuna pagina contiene stili scritti dentro l'HTML, il sito puo' vietarli
   del tutto nelle intestazioni, e un'iniezione di codice non ha piu' dove
   attaccarsi. */
.fondo.a-sinistra{justify-content:flex-start;flex-wrap:wrap}
.stato.staccato{margin-top:12px}

/* ---------- la pagina dei numeri ---------- */
table.numeri{width:100%;border-collapse:collapse;margin:26px 0 10px}
table.numeri th[scope="col"]{
  font-size:14.6px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--testo-2);text-align:right;padding:0 0 8px 14px;border-bottom:1px solid var(--bordo);
}
table.numeri th[scope="col"]:first-child{text-align:left}
table.numeri th[scope="row"]{
  text-align:left;font-weight:600;padding:13px 0;border-bottom:1px solid var(--bordo-2);
  display:table-cell;
}
table.numeri .che-cosa{display:block;font-weight:400;font-size:15.6px;color:var(--testo-2)}
table.numeri td{
  text-align:right;padding:13px 0 13px 14px;border-bottom:1px solid var(--bordo-2);
  font-variant-numeric:tabular-nums;font-size:19px;color:var(--testo-2);
}
table.numeri td.grande{font-size:25px;font-weight:700;color:var(--verde-scuro)}
.pagina-testo .attesa,.pagina-testo .guasto{color:var(--testo-2)}

/* Le due colonne di collegamenti nel piede, staccate dal bordo destro: cosi'
   stanno vicine al testo invece di scappare in fondo alla pagina. */
/* le due colonne sono ancorate al bordo destro: allargando lo spazio fra
   loro è «Informazioni» a scorrere verso sinistra, mentre «Utility» resta
   dov'è */
/* Cinque gruppi non stanno in fila su nessuno schermo normale: su due righe
   sì, e il blocco resta compatto invece di rubare tutta la larghezza al
   testo qui a sinistra. */
footer.sito .piede-colonne{
  display:grid;grid-auto-flow:column;grid-template-rows:auto auto;
  gap:20px 38px;align-items:start;flex:0 0 auto;margin-right:90px;
}
@media (max-width:1320px){
  footer.sito .piede-colonne{margin-right:0;gap:20px 30px}
}
@media (max-width:1100px){
  footer.sito .piede-dentro{flex-wrap:wrap}
  footer.sito .piede-colonne{margin-right:0;gap:44px}
}

@media (max-width:620px){
  /* Sul telefono i cinque gruppi di collegamenti non ci stanno affiancati.
     L'ordine di andare a capo c'era gia', ma era scritto nella lingua
     sbagliata: `flex-wrap` su un contenitore che e' una GRIGLIA non fa
     niente, e `grid-auto-flow:column` continuava a incolonnare i gruppi
     fuori dallo schermo. Si vedeva «APPROFONDIMENTI» stampato sopra «FILE» e
     «Domande frequenti» sopra «Aprire un XML»: non erano tagliati, erano
     sovrapposti. Qui la griglia diventa a due colonne vere che si
     restringono, e i collegamenti smettono di pretendere la larghezza del
     loro testo. */
  footer.sito .piede-colonne{
    grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 22px;margin-right:0;
  }
  footer.sito .piede-link{min-width:0}
  footer.sito .piede-link a{width:auto;overflow-wrap:break-word}
  /* Il giustificato ha bisogno di righe lunghe: su 390 punti il browser per
     pareggiare i margini spalanca gli spazi fra le parole, e «Legge e scrive
     il tracciato FatturaPA» esce come tre parole spalmate da un bordo
     all'altro. Su schermo stretto il testo va a sinistra. */
  footer.sito .piede-testo p{text-align:left}
}

/* ---------- la domanda a lavoro finito ----------
   Sta dentro il riquadro dell'esportazione, sopra i pulsanti, staccata da una
   riga: si legge come un poscritto, non come un'altra cosa da fare. Niente
   colori d'accento e niente grassetti — chi ha appena finito di scaricare sta
   gia' guardando altrove, e una richiesta che grida si chiude senza leggerla. */
.chiedi{
  margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--bordo);
}
.chiedi-tit{margin:0 0 3px;font-weight:600;font-size:16px}
.chiedi-eti{display:block;margin:0 0 7px;font-size:14.6px;color:var(--testo-2)}
.chiedi textarea{
  width:100%;resize:vertical;padding:8px 10px;font:inherit;font-size:15.4px;
  border:1px solid var(--bordo);border-radius:6px;background:#FFFFFF;color:var(--testo);
}
.chiedi textarea:focus{outline:2px solid var(--verde);outline-offset:1px}
.chiedi-nota{margin:6px 0 0;font-size:13.6px;color:var(--ocra)}
.chiedi-fondo{display:flex;gap:9px;justify-content:flex-end;margin-top:11px}

/* ---------- i voti degli scanner, in note legali ---------- */
/* Quattro medaglie in fila. La colonna del testo e' stretta apposta — si legge
   meglio — ma quattro quadrati in 760 punti sarebbero francobolli: qui la fila
   esce dalla colonna e si prende la larghezza della finestra. */
/* Sette medaglie in due file: tre sopra e quattro sotto, tutte della stessa
   misura. Le due file sono scritte cosi' nella pagina — niente calcoli di
   griglia che possano cadere diversamente da un browser all'altro — e ognuna
   si centra da sola. La colonna del testo e' stretta apposta, quindi le file
   escono dalla colonna e si prendono la larghezza della finestra. */
.voti{
  width:min(1180px,94vw);margin:22px 0 26px;margin-left:50%;transform:translateX(-50%);
}
.riga-voti{display:flex;gap:14px;justify-content:center;margin-bottom:14px}
.riga-voti:last-child{margin-bottom:0}

.voto{
  flex:0 1 264px;min-width:216px;max-width:264px;
  display:flex;flex-direction:column;position:relative;
  padding:14px 15px 15px;border:1px solid var(--bordo-verde);
  border-radius:12px;background:linear-gradient(180deg,#FFFFFF 0%,var(--verde-pallido) 100%);
  text-decoration:none;color:var(--testo);
}
a.voto:hover{border-color:var(--verde);box-shadow:0 6px 18px rgba(20,66,121,.13)}
.voto.senza-link{cursor:default}

/* Il marchio di chi ha dato il voto, in alto a destra come il timbro su un
   certificato: chi li conosce li riconosce a colpo d'occhio. Sono citazioni —
   dicono chi ha fatto la prova — e il riquadro porta al servizio stesso. */
.voto .marchio-voto{
  position:absolute;top:11px;right:12px;display:flex;align-items:center;gap:6px;
  line-height:1.1;font-size:10.2px;letter-spacing:.02em;color:var(--riga);
  text-transform:uppercase;text-align:right;
}
.voto .nome-marchio{display:block}
.voto .marchio-voto b{display:block;font-size:11.2px;font-weight:700;color:var(--verde-scuro)}
.voto .logo{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:6px;font-weight:700;text-transform:none;letter-spacing:0;
}
.voto .logo-qualys{width:22px;height:22px;border-radius:50%;background:#ED2E26;color:#FFFFFF;
  font-size:14px;font-family:Arial,Helvetica,sans-serif}
.voto .logo-moz{padding:2px 5px;background:#000000;color:#FFFFFF;font-size:10.5px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.voto .logo-w3c{padding:2px 5px;background:#005A9C;color:#FFFFFF;font-size:11.5px;
  font-family:Arial,Helvetica,sans-serif}
.voto .logo-sh{width:22px;height:22px;background:#3E8CBB;color:#FFFFFF;font-size:12px}
.voto .logo-lh{width:22px;height:22px;background:#F5A623;color:#FFFFFF;font-size:13px}
.voto .logo-inl{width:22px;height:22px;background:#1FB2D4;color:#FFFFFF;font-size:11px}
.voto .logo-cf{color:var(--verde-scuro)}

.voto .segno{display:block;color:var(--verde-scuro);height:24px}
/* il titolo tiene sempre due righe: senza, il voto ballava da un riquadro
   all'altro e sette medaglie uguali sembravano sette cose diverse */
.voto .chi{display:block;margin-top:26px;font-size:15.2px;font-weight:650;
  color:var(--testo);min-height:2.5em;line-height:1.25}
.voto .riga-voto{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.voto .etichetta-voto{
  font-size:11.6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--riga);
}
.voto .bollino{font-size:31px;font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--verde-scuro)}
.voto .che{display:block;margin-top:7px;font-size:14.6px;line-height:1.4;
  color:var(--testo-2);min-height:4.2em}

@media (max-width:1000px){
  .voti{width:min(760px,94vw)}
  .riga-voti{flex-wrap:wrap}
}
@media (max-width:600px){
  .voto{flex:1 1 100%;max-width:none}
}

/* ---------- pagina degli errori dell'Agenzia ---------- */
.pagina-testo.larga{max-width:1180px}
table.errori{width:100%;border-collapse:collapse;margin:14px 0 30px;font-size:17px}
table.errori th[scope="col"]{
  text-align:left;font-size:14.4px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--testo-2);padding:0 12px 8px 0;
  border-bottom:1px solid var(--bordo);
}
table.errori th[scope="row"]{
  text-align:left;vertical-align:top;padding:12px 12px 12px 0;width:82px;
  border-bottom:1px solid var(--bordo-2);font-variant-numeric:tabular-nums;
}
table.errori th[scope="row"] a{
  color:var(--verde-scuro);text-decoration:none;font-weight:700;border-bottom:none;
}
table.errori td{
  vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--bordo-2);
  line-height:1.5;
}
table.errori td.ufficiale{width:33%;color:var(--testo-2);font-size:16.2px}
table.errori code{
  background:#F1EFE9;border:1px solid var(--bordo-2);border-radius:4px;
  padding:0 4px;font-size:15px;
}
table.errori tr:target{background:var(--verde-pallido)}
/* una tabella larga non deve far scorrere la pagina: scorre lei, dentro il suo
   riquadro, e solo se lo schermo e' stretto */
.tabella-larga{overflow-x:auto;max-width:100%}
.pagina-testo .scorciatoia{font-size:16.6px;color:var(--testo-2)}
.pagina-testo kbd{
  background:#F1EFE9;border:1px solid var(--bordo);border-bottom-width:2px;
  border-radius:5px;padding:1px 6px;font-size:15px;font-family:inherit;
}

/* la nota che avverte su una regola che sta cambiando */
.pagina-testo .avvertenza{
  background:var(--ocra-pallido);border-left:3px solid var(--ocra);
  padding:12px 16px;border-radius:0 6px 6px 0;
}
/* la spiegazione sotto un codice, quando serve */
.nota-codice{display:block;margin-top:3px;font-size:16px;color:var(--testo-2)}

/* il riquadro che indica dove cercare una cosa fuori da qui */
.pagina-testo .riquadro-cerca{
  background:var(--verde-pallido);border:1px solid var(--bordo-verde);
  border-radius:9px;padding:16px 20px;margin:20px 0;
}
.pagina-testo .riquadro-cerca p{margin:0 0 9px}
.pagina-testo .riquadro-cerca p:last-child{margin-bottom:0}
.pagina-testo .titolo-cerca{
  font-size:14.6px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--verde-scuro);
}

/* ---------- elenco dei codici destinatario, tre colonne ---------- */
table.destinatari{width:100%;border-collapse:collapse;margin:20px 0 30px;font-size:16.6px}
table.destinatari th[scope="col"]{
  text-align:left;font-size:13.8px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--testo-2);padding:0 10px 7px 0;
  border-bottom:1px solid var(--bordo);
}
table.destinatari td{
  padding:7px 10px 7px 0;border-bottom:1px solid var(--bordo-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px;
}
/* il codice in cifre monospaziate: cosi' lo zero e la O si distinguono */
table.destinatari td.codice{
  font-family:"DejaVu Sans Mono","Liberation Mono",monospace;font-size:15.4px;
  letter-spacing:.04em;color:var(--verde-scuro);font-weight:600;
  padding-right:26px;
}
table.destinatari tr:hover td{background:#FAF9F6}
@media (max-width:900px){
  table.destinatari{display:block}
  table.destinatari thead{display:none}
  table.destinatari tbody{display:block}
  table.destinatari tr{
    display:grid;grid-template-columns:1fr auto 1fr auto;
    column-gap:16px;border-bottom:1px solid var(--bordo);
  }
  table.destinatari td{border-bottom:none;max-width:none}
  table.destinatari td.codice{padding-right:0;text-align:right}
}
@media (max-width:620px){
  table.destinatari tr{grid-template-columns:1fr auto}
}

/* ---------- i codici Natura: quattro informazioni per riga ---------- */
table.natura{width:100%;border-collapse:collapse;margin:18px 0 30px}
table.natura th[scope="row"]{
  text-align:left;vertical-align:top;padding:16px 16px 16px 0;width:76px;
  border-bottom:1px solid var(--bordo);font-variant-numeric:tabular-nums;
  font-size:18px;font-weight:700;
}
table.natura th[scope="row"] a{color:var(--verde-scuro);text-decoration:none;border-bottom:none}
table.natura td{padding:16px 0;border-bottom:1px solid var(--bordo)}
/* prima riga: il nome della categoria e, di seguito, la descrizione ufficiale */
table.natura .categoria{
  display:block;font-weight:700;font-size:17.6px;color:var(--testo);
}
table.natura .ufficiale-nat{
  display:block;margin-top:2px;font-style:italic;color:var(--testo-2);font-size:17px;
}
/* sotto: la spiegazione e la norma */
table.natura .spiega{display:block;margin-top:7px;font-size:17px;line-height:1.55}
table.natura .norma{
  display:inline-block;margin-top:8px;font-size:15.4px;color:var(--verde-scuro);
  background:var(--verde-pallido);border:1px solid var(--bordo-verde);
  border-radius:5px;padding:2px 9px;
}
/* accanto, la stessa norma come si citerà dal 2027: più sommessa, perché oggi
   vale ancora quella di sinistra */
table.natura .norma-2027{
  display:inline-block;margin-top:8px;font-size:15.4px;color:var(--testo-2);
  border:1px dashed var(--bordo-verde);border-radius:5px;padding:2px 9px;
  text-align:left;
}
table.natura .norma-2027 a{color:var(--verde-scuro)}
table.natura .norma{margin-right:8px}

/* il riquadro «Dal 1° gennaio 2027» in fondo alle pagine scritte a mano: le
   stesse due etichette delle tabelle, una norma per riga */
.dal2027{
  margin:34px 0 22px;padding:16px 20px 12px;border:1px solid var(--bordo-verde);
  border-radius:8px;background:#FFFFFF;
}
.dal2027 p{margin:0 0 10px;font-size:16.5px}
.dal2027 ul{list-style:none;margin:0;padding:0}
.dal2027 li{margin:0 0 6px}
.dal2027 .norma{
  display:inline-block;margin:0 8px 4px 0;font-size:15.4px;color:var(--verde-scuro);
  background:var(--verde-pallido);border:1px solid var(--bordo-verde);
  border-radius:5px;padding:2px 9px;
}
.dal2027 .norma-2027{
  display:inline-block;font-size:15.4px;color:var(--testo-2);
  border:1px dashed var(--bordo-verde);border-radius:5px;padding:2px 9px;
}
.dal2027 .norma-2027 a{color:var(--verde-scuro)}
table.natura tr:target td,table.natura tr:target th{background:var(--verde-pallido)}

/* Le schede dei codici: le descrizioni sono testo corrente come quello delle
   altre pagine, e si giustificano allo stesso modo — parole intere, mai
   spezzate. I codici no: quelli sono etichette, non prosa. */
table.natura .spiega,table.natura .ufficiale-nat,table.natura .esempi,
table.natura .norma,table.errori td,table.errori td.ufficiale,
.pagina-testo .avvertenza,.nota-codice,.pagina-testo .riquadro-cerca p{
  text-align:justify;hyphens:none;
}

/* ---------- la riga di ricerca delle pagine di consultazione ---------- */
.riga-cerca{
  position:sticky;top:0;z-index:5;background:var(--sfondo);position:sticky;
  padding:14px 0 12px;margin:6px 0 4px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid var(--bordo-2);
}
.riga-cerca{position:relative}
.riga-cerca input{
  flex:1 1 340px;font:inherit;font-size:18px;padding:11px 15px;
  border:1px solid var(--bordo);border-radius:8px;background:#FFFFFF;color:var(--testo);
}
.riga-cerca input:focus{
  outline:2px solid var(--bordo-verde);outline-offset:-1px;border-color:var(--verde);
}
.riga-cerca input::placeholder{color:#9AA39F}
.esito-cerca{font-size:16.4px;color:var(--testo-2);white-space:nowrap}

/* --- il pannello dei risultati della ricerca --- */
.riga-cerca{position:sticky;top:0;z-index:20}

/* 4.3 — Le ancore profonde finivano sotto la barra di ricerca, che sta
   appiccicata in cima: si arrivava su /errori-ade#E00311 e la riga cercata era
   coperta proprio da quella barra. Basta dire al browser di lasciare lo spazio
   della barra sopra il bersaglio. */
/* Un titolo che serve a chi non vede lo schermo: la pagina «Compila» è tutta
   modulo e anteprima, e un <h1> a schermo non avrebbe un posto dove stare, ma
   senza nessun <h1> un lettore non sa nemmeno che pagina ha aperto. */
.solo-lettori{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

.pagina-testo [id]{scroll-margin-top:92px}
.pagina-testo table [id]{scroll-margin-top:96px}
.risultati-cerca{
  position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:30;
  background:#FFFFFF;border:1px solid var(--bordo);border-radius:9px;
  box-shadow:0 10px 28px rgba(20,30,40,.16);max-height:52vh;overflow:auto;
}
.risultato{
  display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--bordo-2);
  padding:10px 14px;font:inherit;font-size:16.8px;cursor:pointer;color:var(--testo);
}
.risultato:last-child{border-bottom:0}
.risultato:hover,.risultato.scelto{background:var(--verde-pallido)}
.risultato .r-cod{
  flex:0 0 92px;font-weight:700;color:var(--verde-scuro);
  font-variant-numeric:tabular-nums;
}
.risultato .r-testo{flex:1;color:var(--testo-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-altro{padding:9px 14px;font-size:15.6px;color:var(--testo-2)}

/* la riga a cui la ricerca ti ha portato: si accende e si spegne da sola */
tr.trovata > *,td.trovata{
  background:#FFF3CD !important;
  transition:background .4s;
}
/* la ricerca ora trova anche fuori dalle tabelle: un paragrafo, un titolo,
   una voce di elenco. Si accende allo stesso modo. */
p.trovata,li.trovata,h1.trovata,h2.trovata,h3.trovata{
  background:#FFF3CD !important;
  transition:background .4s;
}

/* ---------- barre di scorrimento invisibili ----------
   Lo scorrimento resta identico — rotellina, dito, tasti, trascinamento —
   sparisce solo la barra grigia. Vale ovunque: pagina, anteprima della
   fattura, tabelle larghe, pannello dei risultati.
   Il prezzo da pagare, ed e' giusto saperlo: senza barra non si vede a colpo
   d'occhio quanto manca alla fine della pagina. */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;background:transparent}

/* e la pagina non scorre mai di lato: se qualcosa e' troppo largo, a scorrere
   e' quel qualcosa dentro il suo riquadro, non tutto il foglio */
html,body{overflow-x:hidden;max-width:100%}

/* la data dell'ultima modifica, sotto la firma nel piede */
.piede-data{display:block;margin-top:5px;font-size:14.6px;color:#C7D1DC}

/* gli esempi pratici sotto ogni codice Natura */
table.natura .esempi{
  display:block;margin-top:8px;font-size:16.4px;line-height:1.5;
  color:var(--testo-2);padding-left:12px;border-left:2px solid var(--bordo-verde);
}
table.natura .esempi b{color:var(--verde-scuro);font-weight:600}

/* il simbolo di marchio, piccolo e in alto come vuole la tipografia */
.piede-firma .tm{font-size:.62em;vertical-align:super;margin-left:1px;letter-spacing:0}

/* il campo che è stato rifiutato: il bordo resta acceso finché non lo si
   sistema, perché quello che si legge lì dentro non è nel file */
label.campo.non-scritto input,label.campo.non-scritto select,
label.campo.non-scritto textarea{
  border-color:var(--allarme);background:#FDF5F3;
}

/* il campo che si fa notare senza bloccare: il valore è stato scritto, ma
   vale la pena guardarlo — un nome di due lettere di solito è un errore di
   battitura, qualche volta è la 3M */
label.campo.avviso input,label.campo.avviso select,label.campo.avviso textarea{
  border-color:var(--ocra);background:#FDFAF3;
}
label.campo.avviso .esito{color:var(--ocra)}

/* ---------- i riferimenti normativi ----------
   Stessa tabella dei codici Natura, con due differenze: nella colonna di
   sinistra c'e' una data invece di un codice, e in fondo a ogni voce c'e' il
   pulsante che porta al testo ufficiale. Il pulsante e' l'unica ragione per
   cui la pagina esiste: un elenco di norme senza il testo e' un elenco di
   nomi. */
table.norme th[scope="row"]{width:96px;font-size:19px}
/* l'anno in grande, sotto la data per esteso in piccolo: si scorre per anno
   ma quando si cita una norma serve il giorno */
.anno-lungo{
  display:block;font-size:14px;font-weight:400;color:var(--testo-2);
  margin-top:2px;line-height:1.3;letter-spacing:0;
}
/* l'arco di anni accanto al titolo del periodo, in tono minore */
.pagina-testo h2 .arco{color:var(--testo-2);font-weight:400}
.som-arco{color:var(--testo-2);font-size:.86em}
/* il pulsante: verde tenue come quelli del menu a tendina, non urla ma si
   vede che si preme */
a.scarica{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:15.6px;font-weight:600;text-decoration:none;border-bottom:none;
  color:var(--verde-scuro);background:var(--verde-pallido);
  border:1px solid var(--bordo-verde);border-radius:7px;padding:6px 13px;
}
a.scarica:hover{background:#DCE5EF;border-color:var(--verde);color:var(--verde-scuro)}
a.scarica svg{
  width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* la tavola di corrispondenza fra i vecchi articoli e il testo unico */
table.concordanza th[scope="row"]{width:auto;font-weight:400;color:var(--testo)}
table.concordanza .art-tu{
  width:120px;font-weight:700;color:var(--verde-scuro);
  font-variant-numeric:tabular-nums;
}

/* ---------- le sanzioni ----------
   Stessa tabella dei codici Natura, ma nella colonna di sinistra non c'e' un
   codice: c'e' l'importo, che e' la cosa che si cerca. Serve piu' spazio,
   perche' «250 - 2.000 EUR» non sta in 76 pixel, e va tenuto su una riga sola:
   un importo spezzato a meta' si legge come due importi. */
table.sanzioni th[scope="row"]{width:158px;font-size:19px}
table.sanzioni th[scope="row"] a{white-space:nowrap}
/* sotto l'importo, la condizione in cui vale: piccola, per non rubare peso
   alla cifra */
table.sanzioni .anno-lungo{max-width:150px}
@media (max-width:620px){
  table.sanzioni th[scope="row"]{width:112px;font-size:17px}
  table.sanzioni .anno-lungo{max-width:104px}
}