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

:root{
  --verde:#149A6E;
  --verde-chiaro:#45C99C;
  --verde-scuro:#0C6547;
  --verde-pallido:#DFF2EA;
  --bordo-verde:#AEDCC8;
  --inchiostro:#08281F;
  --inchiostro-2:#12513F;
  --ocra:#9E6C16;
  --ocra-pallido:#FBEFD6;
  --allarme:#A53622;
  --allarme-pallido:#FBE9E4;
  --sfondo:#E7E3D9;
  --testo:#0E1412;
  --testo-2:#44433E;
  --riga:#6B6A63;
  --bordo:#BDB6A5;
  --bordo-2:#D2CBBB;
  --testata: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,#166049 0%,#237F61 100%);
  color:#FFFFFF;padding:0 24px;display:flex;align-items:center;gap:16px;height:var(--testata);
}
.marchio{display:flex;align-items:center;font-size:28.4px;letter-spacing:-.015em;color:#fff;text-decoration:none}
.marchio svg{margin-right:10px;transform:scale(1.12);transform-origin:center}
.marchio .a{font-weight:300;color:#9FC4B7}
.marchio .b{font-weight:650}
.payoff{color:#A8C8BC;font-size:16.4px;border-left:1px solid rgba(255,255,255,.16);padding-left:16px}
header.sito .sep{flex:1}
header.sito nav{display:flex;gap:8px;align-items:center;height:100%}

/* 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:#D3E7DE;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:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.34);
}
header.sito nav a.attivo{
  color:#08281F;background:var(--verde-chiaro);border-color:var(--verde-chiaro);
}
header.sito nav a.attivo:hover{background:#5AD3A9;border-color:#5AD3A9}
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,154,110,.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: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:21.5px;margin:0 0 32px}

.zona{
  border:2px dashed var(--bordo-verde);border-radius:14px;background:#fff;
  padding:46px 28px;transition:.18s;cursor:pointer;
  box-shadow:0 1px 2px rgba(20,60,48,.05),0 10px 30px rgba(20,60,48,.06);
}
.zona:hover,.zona:focus{border-color:var(--verde);background:#FBFEFC;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}

.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:#fff;border:1px solid var(--bordo);border-radius:12px;
  padding:18px 19px;color:inherit;display:block;box-shadow:0 1px 2px rgba(23,32,29,.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}
.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}
.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,#166049 0%,#237F61 100%);
  color:#E8F1ED;font-size:16px;line-height:1.5;
  padding:26px 24px 30px;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;flex-wrap:wrap;
}
footer.sito .piede-testo{flex:1 1 480px;max-width:760px}
footer.sito p{margin:0 0 10px}
footer.sito .piede-link{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;min-width:200px}
footer.sito .piede-tit{
  font-size:14.4px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#A9C4B9;margin-bottom:3px;
}
footer.sito .piede-link a{border-bottom:none;width:max-content}
footer.sito .piede-link a:hover{border-bottom:1px solid #EAF3EF}
.piede-firma{text-align:center}
footer.sito b{color:#F2F7F5}
footer.sito a{color:#EAF3EF;text-decoration:none;border-bottom:1px solid rgba(234,243,239,.4)}
footer.sito a:hover{border-bottom-color:#EAF3EF}
footer.sito .piede-firma{
  max-width:var(--largo);margin:22px auto 0;padding-top:16px;text-align:center;
  border-top:1px solid rgba(214,229,222,.22);font-size:15.3px;color:#A9C4B9;
}
.piede-firma a{margin-left:14px}

/* ---------- stato di lavoro ---------- */
.riepilogo{
  background:#fff;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:318px;flex:none;background:#fff;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:#fff;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:#fff}
.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:#fff;
  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:#fff;box-shadow:0 1px 1px rgba(0,0,0,.03)}
.chip,.interruttore button{
  border:0;border-right:1px solid var(--bordo-2);background:#fff;
  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:#fff;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:#fff;font-weight:650;
  box-shadow:0 1px 2px rgba(20,121,90,.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:#fff;box-shadow:0 1px 2px rgba(23,32,29,.06),0 12px 34px rgba(23,32,29,.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,47,39,.5);display:flex;align-items:center;
  justify-content:center;z-index:20;backdrop-filter:blur(2px);padding:20px}
.dialogo{background:#fff;border-radius:14px;width:480px;max-width:100%;padding:24px 26px;
  box-shadow:0 24px 70px rgba(14,47,39,.35);max-height:86vh;overflow:auto}
.dialogo.largo{width:680px}
.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}
.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:#fff;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:#fff;
}

.gr{border-bottom:1px solid var(--bordo-2)}
.gr-tit{
  margin:0;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;
  position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(4px);z-index:1;
}
.gr-tit:hover{color:var(--verde-scuro);background:var(--verde-pallido)}
.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:#fff;
}
label.campo.ok input,label.campo.ok select,label.campo.ok textarea{
  border-color:var(--verde);background:#FBFEFC;
}
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,121,90,.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:#fff;
  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:#fff;
}
.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:#fff}
/* 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:#879994;padding-bottom:40px}

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

.compila .modulo{
  background:#fff;border:0;border-radius:14px;
  box-shadow:0 24px 70px rgba(14,47,39,.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,47,39,.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,47,39,.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,47,39,.18);
  background:#fff;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,47,39,.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}

/* ---------- 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);
}
.pagina-testo p{margin:0 0 14px}
.pagina-testo ul{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. */
footer.sito .piede-colonne{display:flex;gap:64px;flex:0 0 auto;margin-right:3cm}
@media (max-width:1100px){
  footer.sito .piede-colonne{margin-right:0;gap:44px}
}

/* ---------- 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;
}