/* facciamoiconti · Componenti v2 «il registro».
   Un foglio solo: il modulo e il conto sono la stessa tabella, tenuta insieme da una griglia di
   filetti. Niente card che galleggiano, niente ombre, angoli quasi retti. La colonna degli importi
   ha la stessa larghezza ovunque, cosi le virgole restano incolonnate fra sezioni diverse. */

/* ---- barra: la testata del sito, opaca ---------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-linea);
}

.barra__in {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--h-barra);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-ink);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: var(--ls-title);
  text-decoration: none;
  white-space: nowrap;
}
.marchio svg { flex: none; color: var(--c-brand); }
.marchio:hover { color: var(--c-ink); }

.barra__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

.barra__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--h-control);
  padding-inline: var(--sp-3);
  color: var(--c-muted);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.barra__link:hover { color: var(--c-ink); border-color: var(--c-linea); }
.barra__link[aria-current='page'] { color: var(--c-ink); border-color: var(--c-linea); }

/* ---- testata della pagina ---------------------------------------------- */

.testata { padding-block: var(--sp-8) var(--sp-6); }
.testata h1 { max-width: 20ch; }
.testata__intro {
  margin-top: var(--sp-3);
  max-width: 62ch;
  color: var(--c-dim);
}

/* ---- il foglio ---------------------------------------------------------- */

.foglio {
  background: var(--c-foglio);
  border: 1px solid var(--c-linea-forte);
  border-radius: var(--r-lg);
  overflow: clip;
}

/* Testata di sezione: una fascia piu chiara con il nome della sezione a sinistra e
   l intestazione della colonna importi a destra. E qui che vive l unico maiuscoletto. */
.sez__testa {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-riga);
  border-bottom: 1px solid var(--c-linea-forte);
}
.sez + .sez .sez__testa { border-top: 1px solid var(--c-linea-forte); }
.sez__t { font-size: var(--fs-micro); font-weight: 600; letter-spacing: var(--ls-micro);
          text-transform: uppercase; color: var(--c-dim); }
.sez__col { margin-left: auto; text-align: right; }
.sez__nota { padding: var(--sp-3) var(--sp-4) 0; color: var(--c-muted); font-size: var(--fs-note); }

/* ---- riga del modulo: etichetta a sinistra, campo incolonnato a destra --- */

.dato {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-linea);
}
.dato:last-child { border-bottom: none; }
.dato:focus-within { background: color-mix(in oklab, var(--c-brand) 5%, transparent); }

.dato__l { color: var(--c-dim); font-size: var(--fs-voce); }
.dato__l small { display: block; color: var(--c-muted); font-size: var(--fs-note); line-height: 1.35; }

/* Il campo e il contenitore, non l input: cosi il simbolo di valuta sta dentro il bordo e tutti
   i campi della colonna chiudono sulla stessa verticale, date comprese. */
.dato__campo {
  display: flex;
  align-items: center;
  width: 19ch;
  min-height: var(--h-control);
  min-width: 0;
  padding-inline: var(--sp-3);
  background: var(--c-campo);
  border: 1px solid var(--c-linea-ctrl);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dato__campo:hover { border-color: var(--c-dim); }
.dato__campo:focus-within { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-ring); }
.dato__campo:has(.dato__c[aria-invalid='true']) { border-color: var(--c-alert); background: var(--c-alert-dim); }

.dato__c {
  flex: 1;
  min-width: 0;
  min-height: var(--h-control);
  padding: 0;
  background: transparent;
  color: var(--c-ink);
  border: none;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-valore);
  letter-spacing: var(--ls-num);
  text-align: right;
}
.dato__c:focus { outline: none; }
.dato__c:disabled { opacity: .5; cursor: not-allowed; }
.dato__c::placeholder { color: var(--c-muted); }

.dato__u { flex: none; margin-left: var(--sp-2); color: var(--c-muted);
           font-family: var(--font-num); font-size: var(--fs-valore); }

/* select: stesso contenitore, ma testo di interfaccia allineato a sinistra */
select.dato__c {
  font-family: var(--font-ui);
  font-size: var(--fs-voce);
  letter-spacing: normal;
  text-align: left;
  cursor: pointer;
}

/* Il calendario nativo su fondo scuro: senza questo l icona resta nera su nero. */
input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  margin-left: var(--sp-2);
  cursor: pointer;
}
input[type='date']:hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* ---- errore ------------------------------------------------------------- */

.errore {
  display: flex;
  gap: var(--sp-2);
  margin: var(--sp-3) var(--sp-4) var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-alert-dim);
  border: 1px solid var(--c-alert);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: var(--fs-note);
  line-height: var(--lh-normal);
}
.errore::before { content: '!'; flex: none; width: 16px; height: 16px; margin-top: 1px;
  background: var(--c-alert); color: #180404; border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }

/* ---- il conto: voce a sinistra, importo incolonnato a destra ------------- */

.riga {
  display: grid;
  grid-template-columns: 1fr var(--col-valore);
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-linea);
}
.riga__k { min-width: 0; color: var(--c-dim); font-size: var(--fs-voce); }
.riga__k small { display: block; color: var(--c-muted); font-size: var(--fs-note); line-height: 1.35; }
.riga__v {
  color: var(--c-ink);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-valore);
  letter-spacing: var(--ls-num);
  text-align: right;
  white-space: nowrap;
}

/* La riga che chiude il conto: doppio filetto sopra, come su un registro.
   La cifra del totale non sta nella colonna delle voci: e piu grande, e si prende cio che serve. */
.riga--totale {
  grid-template-columns: auto 1fr;
  align-items: center;
  padding-block: var(--sp-4);
  border-top: 3px double var(--c-linea-forte);
  border-bottom: none;
  background: var(--c-riga);
}
.riga--totale .riga__k {
  color: var(--c-dim);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.riga--totale .riga__v {
  color: var(--c-brand);
  font-size: var(--fs-totale);
  font-weight: 600;
  line-height: var(--lh-tight);
}
.riga--totale .riga__v.is-cambiato { animation: lampo var(--t-slow) var(--ease); }

/* ---- riga di stato sotto il totale: ritardo e fascia --------------------- */

.stato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-riga);
  border-top: 1px solid var(--c-linea);
  color: var(--c-muted);
  font-size: var(--fs-note);
}
.pillola { color: var(--c-dim); }
.pillola--fascia { color: var(--c-owe); font-weight: 600; }

/* ---- stato vuoto: il registro non ancora compilato ---------------------- */

.vuoto { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
.vuoto__p { color: var(--c-muted); font-size: var(--fs-note); }
.vuoto__lista { margin-top: var(--sp-4); display: grid; }
.vuoto__voce {
  display: grid;
  grid-template-columns: 1fr var(--col-valore);
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px dashed var(--c-linea);
  color: var(--c-muted);
  font-size: var(--fs-voce);
}
.vuoto__voce::after {
  content: '—';
  font-family: var(--font-num);
  text-align: right;
  color: var(--c-linea-forte);
}

/* ---- la scala delle fasce ----------------------------------------------- */

.scala__i {
  display: grid;
  grid-template-columns: 1fr var(--col-valore);
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-linea);
}
.scala__i:last-child { border-bottom: none; }
.scala__i--qui { background: var(--c-owe-dim); }
.scala__i--passata .scala__k b,
.scala__i--passata .scala__v { color: var(--c-muted); font-weight: 400; }
.scala__k { min-width: 0; font-size: var(--fs-voce); }
.scala__k b { color: var(--c-ink); font-weight: 600; }
.scala__k small { display: block; color: var(--c-muted); font-size: var(--fs-note); line-height: 1.35; }
.scala__tag { color: var(--c-owe); font-weight: 600; }
.scala__v {
  color: var(--c-dim);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-valore);
  letter-spacing: var(--ls-num);
  text-align: right;
  white-space: nowrap;
}
.scala__i--qui .scala__v { color: var(--c-owe); font-weight: 600; }

/* ---- bottoni ------------------------------------------------------------ */

.azioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-linea);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--h-control);
  padding-inline: var(--sp-4);
  border: 1px solid var(--c-linea-ctrl);
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--c-dim); background: var(--c-riga); }
.btn:active:not(:disabled) { background: var(--c-campo); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--testo { margin-left: auto; border-color: transparent; color: var(--c-muted); }
.btn--testo:hover:not(:disabled) { color: var(--c-ink); background: transparent; border-color: var(--c-linea); }
.btn.is-fatto { border-color: var(--c-brand-linea); background: var(--c-brand-dim); color: var(--c-brand); }

/* Il conto si rifa a ogni tasto, ma un modulo senza un bottone sembra rotto: questo forza il
   calcolo e, soprattutto, dice cosa manca invece di lasciare la pagina muta. */
.modulo__vai {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-4);
  border-top: 1px solid var(--c-linea);
}
.btn--primario {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: var(--c-on-brand);
  font-weight: 600;
}
.btn--primario:hover:not(:disabled) {
  background: color-mix(in oklab, var(--c-brand) 88%, white);
  border-color: color-mix(in oklab, var(--c-brand) 88%, white);
}

/* ---- voce dell elenco strumenti: una riga del registro che si apre ------ */

.voce {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-linea);
  color: var(--c-ink);
  text-decoration: none;
}
.voce:last-child { border-bottom: none; }
.voce:hover { background: var(--c-riga); }
.voce:hover .voce__f { color: var(--c-brand); transform: translateX(3px); }
.voce__k { min-width: 0; font-size: var(--fs-body); font-weight: 600; }
.voce__k small {
  display: block;
  margin-top: var(--sp-1);
  max-width: 62ch;
  color: var(--c-muted);
  font-size: var(--fs-note);
  font-weight: 400;
  line-height: var(--lh-normal);
}
.voce__f { flex: none; margin-left: auto; color: var(--c-dim); transition: transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
/* Uno strumento non ancora fatto si dichiara, non si linka a una pagina che non c e. */
.voce--attesa .voce__k { color: var(--c-muted); }
.voce__stato {
  flex: none;
  margin-left: auto;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-linea);
  border-radius: var(--r-sm);
  color: var(--c-muted);
  font-size: var(--fs-note);
  white-space: nowrap;
}

/* ---- grado di verifica di una fonte ------------------------------------ */

.grado {
  display: inline-block;
  padding: 2px var(--sp-2);
  border: 1px solid currentColor;
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: var(--fs-note);
  letter-spacing: normal;
  white-space: nowrap;
}
.grado--p { color: var(--c-brand); }
.grado--s { color: var(--c-dim); }
.grado--x { color: var(--c-owe); }
.fonte__atto { display: block; margin-top: var(--sp-1); color: var(--c-muted); font-size: var(--fs-note); }

/* ---- cautela: sotto il foglio, dove serve ------------------------------- */

.cautela { margin-top: var(--sp-5); border-top: 1px solid var(--c-linea); }
.cautela > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--h-control);
  color: var(--c-muted);
  font-size: var(--fs-note);
  cursor: pointer;
  list-style: none;
}
.cautela > summary::-webkit-details-marker { display: none; }
.cautela > summary::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-base) var(--ease);
}
.cautela[open] > summary::before { transform: rotate(45deg); }
.cautela > summary:hover { color: var(--c-dim); }
.cautela__corpo { padding-bottom: var(--sp-4); max-width: var(--w-prosa); }
.cautela__corpo p { color: var(--c-muted); font-size: var(--fs-note); line-height: var(--lh-relaxed); }
.cautela__corpo p + p { margin-top: var(--sp-3); }
.cautela__corpo strong { color: var(--c-dim); }

/* ---- fonti e piede ------------------------------------------------------ */

.fonti {
  margin-top: var(--sp-6);
  max-width: var(--w-prosa);
  color: var(--c-muted);
  font-size: var(--fs-note);
  line-height: var(--lh-relaxed);
}
.fonti strong { color: var(--c-dim); }

.piede {
  margin-top: var(--sp-16);
  padding-block: var(--sp-10) var(--sp-6);
  border-top: 1px solid var(--c-linea-forte);
  background: color-mix(in oklab, var(--c-foglio) 45%, transparent);
  color: var(--c-muted);
  font-size: var(--fs-note);
}
.piede__in {
  display: grid;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
}
.piede__col { display: grid; align-content: start; gap: var(--sp-2); }
.piede__col--marchio { gap: var(--sp-3); }
.marchio--piede { color: var(--c-ink); }
.piede__che { max-width: 40ch; line-height: var(--lh-normal); }
.piede__t {
  color: var(--c-dim);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}
.piede__l {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--c-muted);
  text-decoration: none;
}
a.piede__l:hover { color: var(--c-brand); }
.piede__l--attesa { color: color-mix(in oklab, var(--c-muted) 70%, transparent); }
/* La riga legale chiude il piede, separata da un filetto: e l ultima cosa, non una nota persa. */
.piede__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-linea);
}
.piede__nota { max-width: 62ch; }
.firma {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
  color: var(--c-muted);
  text-decoration: none;
}
@media (min-width: 720px) {
  .piede__in { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-10); }
}

.firma:hover { color: var(--c-dim); }

/* Le pillole di stato vivono nella riga di stato: niente contenitore in mezzo. */
#pillole { display: contents; }

/* Il campo del codice tributo e piu largo degli altri, ma chiude sulla stessa verticale. */
.dato__campo--lungo { width: 30ch; max-width: 100%; }
.dato__c--testo { font-family: var(--font-num); text-align: left; }

/* Eco sotto il campo: dice se il codice e stato riconosciuto, senza aspettare il conto. */
.dato__eco { padding: 0 var(--sp-4) var(--sp-3); font-size: var(--fs-note); }
.dato__eco:empty { display: none; }
.dato__eco--ok { color: var(--c-dim); font-family: var(--font-num); }
.dato__eco--muto { color: var(--c-muted); }

/* Schermo largo: il foglio si allarga e lavora su due colonne, come un registro aperto.
   A sinistra i dati del versamento, a destra il conto; la scala delle fasce corre sotto,
   a piena larghezza, perche e una tabella lunga. Sotto i 1200px resta colonna unica. */
@media (min-width: 1200px) {
  .foglio:has(#modulo) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .foglio:has(#modulo) > .sez:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid var(--c-linea-forte);
  }
  .foglio:has(#modulo) > .sez:nth-of-type(2) { grid-column: 2; grid-row: 1; }
  /* Prospetto F24 e scala delle fasce: tabelle larghe, corrono sotto a piena pagina. */
  .foglio:has(#modulo) > .sez:nth-of-type(n + 3) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--c-linea-forte);
  }
  /* Una sezione marcata `--sotto` resta nella colonna del conto invece di correre a piena
     pagina: senza, la colonna destra finisce a meta foglio e lascia mezza pagina vuota. */
  .foglio:has(#modulo) > .sez.sez--sotto { grid-column: 2; grid-row: 2; border-top: 1px solid var(--c-linea-forte); }
  .foglio:has(#modulo):has(> .sez--sotto) > .sez:nth-of-type(1) { grid-row: 1 / span 2; }
  .foglio:has(#modulo) > .azioni { grid-column: 1 / -1; }
  /* La testata della seconda sezione e gia in cima alla sua colonna: niente doppio filetto. */
  .sez + .sez .sez__testa { border-top: none; }
}

/* ---- tabelle del prospetto F24 ------------------------------------------ */

/* Una tabella stretta non deve far scorrere la pagina: scorre dentro il suo contenitore. */
.tab-scorre { overflow-x: auto; }

.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-voce);
}
.tab th, .tab td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: baseline; }
.tab thead th {
  color: var(--c-muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--c-linea);
}
.tab tbody tr + tr th, .tab tbody tr + tr td { border-top: 1px solid var(--c-linea); }
.tab td { color: var(--c-dim); font-family: var(--font-num); letter-spacing: var(--ls-num); }
.tab__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab thead th.tab__n { text-align: right; }

/* Il codice tributo e il dato che si copia sull F24: e lui l ancora della riga, la voce lo spiega. */
.tab__cod {
  color: var(--c-ink);
  font-family: var(--font-num);
  font-weight: 600;
  letter-spacing: var(--ls-num);
  white-space: nowrap;
}
.tab__cod small {
  display: block;
  color: var(--c-muted);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--fs-note);
  letter-spacing: normal;
}

.tab__tot th, .tab__tot td {
  border-top: 1px solid var(--c-linea-forte);
  color: var(--c-ink);
  font-weight: 600;
}
.tab__tot td { color: var(--c-brand); font-family: var(--font-num); font-size: var(--fs-valore); }

/* Sotto-testata dentro una sezione: stessa fascia, filetto sopra per staccare il blocco. */
.sez__testa--sub { border-top: 1px solid var(--c-linea); margin-top: var(--sp-4); }

/* ---- anteprima F24: facsimile della sezione Erario ---------------------- */

/* Il modulo dentro il registro: incassato come un campo, con la sua griglia di caselle.
   Non e una copia del modello ministeriale, e la stessa struttura letta col nostro alfabeto. */
.f24 {
  margin: var(--sp-4);
  background: var(--c-campo);
  border: 1px solid var(--c-linea-ctrl);
  border-radius: var(--r-sm);
  overflow: clip;
}
.f24__testa {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-riga);
  border-bottom: 1px solid var(--c-linea-ctrl);
  color: var(--c-ink);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
}

/* Nel facsimile ogni valore sta dentro la sua casella: griglia piena, non righe. */
.tab--modulo th, .tab--modulo td { border: 1px solid var(--c-linea); }
.tab--modulo { border-collapse: collapse; }
.tab--modulo thead th {
  border-bottom-color: var(--c-linea-ctrl);
  font-size: var(--fs-note);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.2;
  white-space: normal;
}
.tab--modulo tbody th, .tab--modulo tbody td { height: 44px; }
.tab--modulo tbody tr + tr th, .tab--modulo tbody tr + tr td { border-top: 1px solid var(--c-linea); }

/* Le caselle libere del modulo: si vedono, non si leggono. */
.f24__vuota th, .f24__vuota td { background: color-mix(in oklab, var(--c-foglio) 45%, transparent); }
/* La colonna dei crediti esiste sul modello e in un ravvedimento resta vuota: si mostra spenta. */
.f24__credito { color: var(--c-muted); background: color-mix(in oklab, var(--c-foglio) 45%, transparent); }
.tab--modulo thead th.f24__credito { color: var(--c-muted); }

.tab--modulo .tab__tot th {
  border-top: 1px solid var(--c-linea-ctrl);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-align: right;
}
.tab--modulo .tab__tot td { border-top: 1px solid var(--c-linea-ctrl); }

/* La colonna degli importi si allinea a destra anche dentro il facsimile: senza specificare
   l elemento, `.tab th, .tab td { text-align: left }` vinceva sulla sola classe. */
.tab th.tab__n, .tab td.tab__n { text-align: right; }

/* Caselle piu basse: un modulo e fitto, non arioso come il resto del foglio. */
.tab--modulo th, .tab--modulo td { padding: var(--sp-2) var(--sp-3); }
.tab--modulo tbody th, .tab--modulo tbody td { height: 38px; }

/* Telefono: una tabella a quattro colonne non ci sta, e scorrendo sparisce proprio la colonna
   degli importi. Sotto i 640px le righe si aprono a blocchi e ogni valore porta il suo nome. */
/* ---- scelte: radio che sembrano voci di un registro, non pallini ------- */

/* La riga a scelte non ha un valore in colonna: l'etichetta sta sopra e le voci sotto,
   larghe quanto serve. Cosi il bersaglio resta 44px anche sul telefono. */
.dato--scelta { grid-template-columns: 1fr; align-items: start; }

.scelte { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Il radio nativo resta li, invisibile ma cliccabile e raggiungibile da tastiera:
   copre tutta la voce, quindi il bersaglio e la voce intera. */
.scelta { position: relative; }
.scelta input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.scelta span {
  display: flex;
  align-items: center;
  min-height: var(--h-control);
  padding-inline: var(--sp-4);
  background: var(--c-campo);
  border: 1px solid var(--c-linea-ctrl);
  border-radius: var(--r-sm);
  color: var(--c-dim);
  font-size: var(--fs-voce);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.scelta input:hover + span { border-color: var(--c-dim); }
.scelta input:focus-visible + span { border-color: var(--c-brand); box-shadow: 0 0 0 3px var(--c-ring); }
.scelta input:checked + span {
  background: var(--c-brand-dim);
  border-color: var(--c-brand-linea);
  color: var(--c-brand);
  font-weight: 600;
}

/* La voce del calendario e prosa, non un importo: carattere di interfaccia.
   Serve la stessa specificita di `.tab td`, altrimenti resta in monospazio. */
.tab td.tab__voce { font-family: var(--font-ui); letter-spacing: normal; }

/* ---- avvisi: cio che e vero per QUESTO conto, sotto il conto ------------ */

.avvisi { display: grid; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-5); }
.avvisi:empty { display: none; }
.avviso {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-linea-forte);
  color: var(--c-muted);
  font-size: var(--fs-note);
  line-height: var(--lh-normal);
}
.avviso--ok { border-color: var(--c-brand-linea); color: var(--c-dim); }
.avviso--attenzione { border-color: var(--c-owe-linea); color: var(--c-owe); }
/* Rosso mai da solo: il testo dice sempre cosa succede, non solo che c'e un problema. */
.avviso--alert { border-color: var(--c-alert); color: var(--c-alert); }

@media (max-width: 639px) {
  .tab, .tab tbody, .tab tfoot, .tab tr, .tab th, .tab td { display: block; }
  .tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tab tr { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-linea); }
  .tab tbody tr:first-child { border-top: none; }
  .tab th, .tab td { padding: 0; }
  .tab tbody tr + tr th, .tab tbody tr + tr td { border-top: none; }
  .tab td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-2);
  }
  .tab td::before {
    content: attr(data-l);
    color: var(--c-muted);
    font-family: var(--font-ui);
    font-size: var(--fs-note);
    letter-spacing: normal;
  }
  .tab__n { text-align: right; }
  .tab__tot tr, .tab tfoot tr { border-top: 1px solid var(--c-linea-forte); }
  /* Il facsimile a blocchi resta il modulo, ma senza le caselle libere e senza la colonna dei
     crediti: su telefono sarebbero due righe vuote per ogni voce. */
  .f24 { margin: 0; border: none; border-radius: 0; background: transparent; }
  /* `.tab td` batte la sola classe: per spegnere caselle libere e colonna crediti serve
     la stessa specificita, altrimenti restano righe vuote in mezzo ai valori. */
  .tab tr.f24__vuota, .tab td.f24__credito { display: none; }
  .tab--modulo th, .tab--modulo td { border: none; }
  .tab--modulo tbody th, .tab--modulo tbody td { height: auto; }
  .tab--modulo .tab__tot th { text-align: left; }
  /* Totale su una riga sola: etichetta a sinistra, cifra a destra. */
  .tab tfoot tr { display: flex; justify-content: space-between; align-items: baseline; }
  .tab tfoot td { margin-top: 0; }
  .tab--modulo .tab__tot th, .tab--modulo .tab__tot td { border: none; }
  .tab__tot th { margin-bottom: 0; }
  .tab__tot th { margin-bottom: var(--sp-2); }
  .tab__tot td { margin-top: 0; }

  /* Un campo largo (select, codice) non sta accanto alla sua etichetta su 390px:
     l'etichetta va sopra e il campo si prende la riga. */
  .dato:has(.dato__campo--lungo) { grid-template-columns: minmax(0, 1fr); }
  .dato__campo--lungo { width: 100%; }

  /* Calendario: data, voce e importo si riconoscono da soli, l'etichetta di colonna
     sarebbe una riga in piu per ognuna delle dieci voci. Data sopra, importo a destra. */
  .tab--cal tr { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--sp-4); }
  .tab--cal td::before { content: none; }
  .tab--cal td { display: block; margin-top: 0; text-align: left; }
  .tab--cal td[data-l='Data'] { color: var(--c-muted); font-size: var(--fs-note); }
  .tab--cal td[data-l='Importo'] {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    text-align: right;
  }
}

/* Verdetto a semaforo: la riga in evidenza porta un giudizio, non un importo, e i suoi tre stati
   hanno tre colori. Il verde resta quello di default della riga totale. */
.riga--totale.is-alert .riga__v { color: var(--c-alert); }
.riga--totale.is-attesa .riga__v { color: var(--c-owe); }
.riga--totale .riga__v { text-align: right; }