/* =============================================================================
   businessplan-facile.it — risultati.css
   Foglio aggiuntivo: la schermata dei risultati del configuratore.
   Presuppone base.css (token) e configuratore.css già caricati.

   Tono: referto, non verdetto. L'utente ha appena messo i propri risparmi in
   un modulo; qui legge se il progetto sta in piedi. Un rosso è un'informazione
   arrivata in tempo — quindi niente grandi campiture d'allarme, niente icone
   drammatiche, niente maiuscolo urlato. Serietà, numeri, e cosa fare adesso.
   ============================================================================= */

.cfg__risultati {
  display: grid;
  gap: var(--sp-10);
  max-width: 880px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-20);
}
.cfg__risultati > h2 { font-size: var(--fs-6); margin: 0; }
.cfg__risultati > h3 { font-size: var(--fs-4); margin: 0 0 calc(var(--sp-6) * -1) 0; }

/* -----------------------------------------------------------------------------
   1. SEMAFORO — il DSCR
   L'unico numero che si legge dall'altra parte della stanza: 68px, cifre
   tabulari, allineato a sinistra come tutto il resto della pagina.

   Lo stato NON è affidato al colore. Tre portatori indipendenti:
     a) una forma nel bollo di stato (cerchio / triangolo / quadrato);
     b) una parola ("Sostenibile", "Al limite", "Non finanziabile");
     c) la posizione del cursore sulla scala sotto il numero, con la soglia 1,0
        marcata: si vede a colpo d'occhio da che parte si sta.
   In bianco e nero e in stampa restano tutti e tre.
   -------------------------------------------------------------------------- */

.cfg__semaforo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "valore etichetta"
    "valore giudizio";
  column-gap: var(--sp-6);
  row-gap: var(--sp-1);
  align-items: baseline;
  padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-left: 6px solid var(--ink-400);   /* la barra di stato, ricolorata sotto */
  border-radius: var(--r-3);
}

.cfg__semaforo-valore {
  grid-area: valore;
  align-self: center;
  font-size: 68px;
  font-weight: var(--fw-titolo);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);   /* il numero resta inchiostro: è un dato, non un giudizio */
}

.cfg__semaforo-etichetta {
  grid-area: etichetta;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  text-transform: uppercase;
  letter-spacing: var(--ls-maiuscoletto);
  color: var(--ink-500);
}
/* Bollo di stato: forma + parola, generati dallo stato del contenitore. */
.cfg__semaforo-etichetta::after {
  content: attr(data-parola);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid;
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  letter-spacing: 0;
  text-transform: none;
}

.cfg__semaforo-giudizio {
  grid-area: giudizio;
  max-width: 46ch;
  margin: 0;
  font-size: var(--fs-3);
  line-height: var(--lh-corpo);
  color: var(--ink-700);
  text-wrap: pretty;
}

/* --- Scala con soglia -------------------------------------------------------
   Riga sottile sotto il blocco: a sinistra "non regge", a destra "regge", con
   la tacca dell'1,00 (la soglia che le banche guardano) sempre marcata.
   Il segnaposto si posiziona con --cfg-dscr-pos (0-100%), impostato inline dal
   markup; senza variabile la scala semplicemente non compare. */
.cfg__semaforo[style*="--cfg-dscr-pos"] { padding-bottom: var(--sp-12); }
.cfg__semaforo[style*="--cfg-dscr-pos"]::before {
  content: "";
  position: absolute;
  left: var(--sp-8);
  right: var(--sp-6);
  bottom: var(--sp-6);
  height: 6px;
  border-radius: var(--r-pill);
  background:
    /* la tacca della soglia 1,00 */
    linear-gradient(to right, transparent calc(50% - 1px), var(--ink-700) calc(50% - 1px),
                    var(--ink-700) calc(50% + 1px), transparent calc(50% + 1px)),
    var(--ink-100);
}
/* Segnaposto: dove cade questo piano rispetto alla soglia. */
.cfg__semaforo[style*="--cfg-dscr-pos"]::after {
  content: "";
  position: absolute;
  bottom: calc(var(--sp-6) - 4px);
  left: calc(var(--sp-8) + (100% - var(--sp-8) - var(--sp-6) - 14px) * var(--cfg-dscr-pos, 0.5));
  width: 14px; height: 14px;
  border-radius: var(--r-pill);
  background: var(--ink-700);
  border: 3px solid var(--surface);
  box-sizing: content-box;
}

/* --- Stati -------------------------------------------------------------------
   Il colore arriva per ultimo, come rinforzo: barra a sinistra, bollo tinto.
   Nessun fondo pieno colorato: una campitura rossa a tutta larghezza sarebbe
   punitiva, e in stampa mangerebbe il toner. */
.cfg__semaforo[data-stato="verde"] { border-left-color: var(--ok-base); }
.cfg__semaforo[data-stato="verde"]::after { background: var(--ok-base); }
.cfg__semaforo[data-stato="verde"] .cfg__semaforo-etichetta::after {
  background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text);
}
.cfg__semaforo[data-stato="verde"] .cfg__semaforo-etichetta::before {
  content: ""; width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--ok-base);
}

.cfg__semaforo[data-stato="giallo"] { border-left-color: var(--warn-base); }
.cfg__semaforo[data-stato="giallo"]::after { background: var(--warn-base); }
.cfg__semaforo[data-stato="giallo"] .cfg__semaforo-etichetta::after {
  background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text);
}
.cfg__semaforo[data-stato="giallo"] .cfg__semaforo-etichetta::before {
  content: ""; width: 14px; height: 14px; background: var(--warn-base);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.cfg__semaforo[data-stato="rosso"] { border-left-color: var(--err-base); }
.cfg__semaforo[data-stato="rosso"]::after { background: var(--err-base); }
.cfg__semaforo[data-stato="rosso"] .cfg__semaforo-etichetta::after {
  background: var(--err-bg); border-color: var(--err-border); color: var(--err-text);
}
.cfg__semaforo[data-stato="rosso"] .cfg__semaforo-etichetta::before {
  content: ""; width: 14px; height: 14px; border-radius: var(--r-1); background: var(--err-base);
}

/* Dato non disponibile: grigio, tratteggiato, nessuna forma piena — si vede che
   manca un'informazione, non che c'è un problema. */
.cfg__semaforo[data-stato="nd"] { border-left-style: dashed; border-left-color: var(--ink-300); }
.cfg__semaforo[data-stato="nd"] .cfg__semaforo-valore { color: var(--ink-400); }
.cfg__semaforo[data-stato="nd"] .cfg__semaforo-etichetta::after {
  background: var(--ink-050); border-color: var(--ink-200); color: var(--ink-700);
}
.cfg__semaforo[data-stato="nd"] .cfg__semaforo-etichetta::before {
  content: ""; width: 14px; height: 14px; border-radius: var(--r-pill); border: 2px dashed var(--ink-300);
}

/* -----------------------------------------------------------------------------
   2. SINTESI — sette voci
   Griglia di dati, non schede: bordi condivisi, niente ombre. Ogni voce è
   etichetta piccola sopra, numero grande sotto, perché l'occhio scorre i numeri.
   -------------------------------------------------------------------------- */

.cfg__sintesi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 1px;
  background: var(--surface);   /* le celle disegnano da sé il proprio filo:
                                   con 7 voci l'ultima riga resta bianca invece
                                   di mostrare una casella grigia vuota */
  border: 1px solid var(--ink-200);
  border-radius: var(--r-3);
  overflow: hidden;
}
.cfg__sintesi-voce {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--ink-200);
}
.cfg__sintesi-voce dt {
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  text-transform: uppercase;
  letter-spacing: var(--ls-maiuscoletto);
  color: var(--ink-500);
}
.cfg__sintesi-voce dd {
  margin: 0;
  font-size: var(--fs-5);
  font-weight: var(--fw-titolo);
  line-height: var(--lh-titolo);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

/* -----------------------------------------------------------------------------
   3. TABELLA — 6 colonne × 13 righe
   Desktop: prospetto classico, anni a destra, cifre tabulari.
   Mobile: NON si stringe la tabella e NON si impila. Le colonne degli anni
   scorrono lateralmente mentre la prima colonna resta agganciata a sinistra
   (position: sticky), così l'etichetta della riga è sempre leggibile e il
   confronto fra anni rimane un confronto in orizzontale — l'unico modo di
   leggere un prospetto. Lo scroll-snap ferma le colonne intere, mai a metà.
   -------------------------------------------------------------------------- */

.cfg__tabella-involucro {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border: var(--bd);
  border-radius: var(--r-3);
  background: var(--surface);
}

.cfg__tabella {
  width: 100%;
  border-collapse: separate;   /* separate: necessario perché sticky regga i bordi */
  border-spacing: 0;
  font-size: var(--fs-2);
}
.cfg__tabella caption {
  text-align: left;
  padding: var(--sp-4) var(--sp-5) var(--sp-3);
  font-size: var(--fs-1);
  color: var(--ink-500);
}
.cfg__tabella th, .cfg__tabella td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--ink-100);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cfg__tabella thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--ink-050);
  border-bottom: 1px solid var(--ink-300);
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  text-transform: uppercase;
  letter-spacing: var(--ls-maiuscoletto);
  color: var(--ink-700);
  scroll-snap-align: end;
}

/* Prima colonna: etichette, allineate a sinistra e agganciate. */
.cfg__tabella tbody th,
.cfg__tabella thead th:first-child,
.cfg__tabella tfoot th {
  position: sticky;
  left: 0;
  z-index: 3;
  min-width: 190px;
  text-align: left;
  white-space: normal;
  font-weight: var(--fw-normale);
  background: var(--surface);
  /* filo verticale che segna il distacco dalla parte scorrevole */
  box-shadow: 1px 0 0 var(--ink-200);
}
.cfg__tabella thead th:first-child { z-index: 4; background: var(--ink-050); }
.cfg__tabella tbody tr:last-child > * { border-bottom: 0; }
.cfg__tabella tbody tr:hover td { background: var(--ink-050); }

/* Colonne degli anni: larghezza minima leggibile, agganciate allo snap. */
.cfg__tabella td { min-width: 104px; scroll-snap-align: end; }

/* --- Righe forti: EBITDA, Utile netto ---------------------------------------
   Staccano per peso e per un filo sopra, non per colore o per fondo pieno:
   sono totali di sezione, non allarmi. */
.cfg__riga--forte > * {
  background: var(--ink-050);
  border-top: 1px solid var(--ink-300);
  font-weight: var(--fw-titolo);
  color: var(--ink-900);
}
.cfg__riga--forte th { background: var(--ink-050); font-weight: var(--fw-titolo); }

/* --- Riga cassa: il saldo che l'utente ricontrolla ------------------------- */
.cfg__riga--cassa > * { font-weight: var(--fw-forte); }
.cfg__riga--cassa th::after {
  content: "saldo";
  display: block;
  font-size: var(--fs-1);
  font-weight: var(--fw-normale);
  color: var(--ink-500);
}

/* --- Riga DSCR: si colora la CELLA, non la riga ------------------------------
   Ogni anno ha il suo stato. Il colore è un fondo tenue; il portatore primario
   è il puntino di forma diversa davanti al numero, che sopravvive alla stampa. */
.cfg__riga--dscr > * { border-top: 1px solid var(--ink-200); }
.cfg__riga--dscr th { font-weight: var(--fw-forte); }
.cfg__riga--dscr td[data-stato] { position: relative; font-weight: var(--fw-forte); }
.cfg__riga--dscr td[data-stato]::before {
  content: "";
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 9px; height: 9px;
}
.cfg__riga--dscr td[data-stato="verde"] { background: var(--ok-bg); color: var(--ok-text); }
.cfg__riga--dscr td[data-stato="verde"]::before { background: var(--ok-base); border-radius: var(--r-pill); }
.cfg__riga--dscr td[data-stato="giallo"] { background: var(--warn-bg); color: var(--warn-text); }
.cfg__riga--dscr td[data-stato="giallo"]::before { background: var(--warn-base); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.cfg__riga--dscr td[data-stato="rosso"] { background: var(--err-bg); color: var(--err-text); }
.cfg__riga--dscr td[data-stato="rosso"]::before { background: var(--err-base); }
.cfg__riga--dscr td[data-stato="nd"] { color: var(--ink-400); }

/* --- 4. Importi negativi ------------------------------------------------------
   Tre portatori: il segno meno nel testo, il triangolo rivolto in basso e il
   colore. Tolti i colori resta comunque distinguibile a colpo d'occhio in una
   colonna di numeri. */
.cfg__tabella .negativo, .cfg__tabella td.negativo {
  color: var(--err-text);
  font-weight: var(--fw-forte);
}
.cfg__tabella .negativo::after {
  content: "▾";
  margin-left: var(--sp-2);
  font-size: 11px;
  vertical-align: 1px;
}

/* Indizio di scorrimento: sfumatura sul bordo destro, solo dove serve. */
.cfg__tabella-nota {
  display: none;
  font-size: var(--fs-1);
  color: var(--ink-500);
  margin-top: var(--sp-2);
}

/* -----------------------------------------------------------------------------
   5. ALLARMI — il valore del prodotto
   Non sono errori di sistema: sono i rilievi che farebbe l'analista di filiale.
   Quindi impaginati come un elenco di osservazioni firmate, con un titolo in
   grassetto e la spiegazione di seguito. Due gravità distinte da forma
   (quadrato pieno / triangolo) e da parola, non solo da tinta.
   -------------------------------------------------------------------------- */

.cfg__allarmi { display: grid; gap: var(--sp-4); }
.cfg__allarmi > h3 { font-size: var(--fs-4); }
.cfg__allarmi > p { font-size: var(--fs-2); color: var(--ink-700); }
.cfg__allarmi ul {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  max-width: none;
}

.cfg__allarme {
  /* NON è una griglia: il testo del rilievo è un nodo di testo anonimo fra
     </strong> e </li>, e in un contesto grid diventerebbe una cella per conto
     suo. Flusso normale con il bollo in posizione assoluta e un rientro
     sinistro: il testo scorre sempre in una colonna sola. */
  position: relative;
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 22px + var(--sp-3));
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-left-width: 4px;
  border-radius: var(--r-3);
  font-size: var(--fs-2);
  line-height: var(--lh-corpo);
  color: var(--ink-700);
}
.cfg__allarme strong {
  display: block;
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  line-height: var(--lh-interfaccia);
  margin-bottom: var(--sp-1);
  color: var(--ink-900);
}
.cfg__allarme::before {
  content: "";
  position: absolute;
  left: var(--sp-5);
  top: calc(var(--sp-4) + 5px);
  width: 18px; height: 18px;
}
/* Etichetta testuale della gravità, in coda al rilievo. */
.cfg__allarme::after {
  content: attr(data-gravita-testo);
  display: table;          /* si dimensiona sul proprio testo, mai sulla riga */
  height: auto;
  margin-top: var(--sp-3);
  padding: 2px var(--sp-3);
  border: 1px solid;
  border-radius: var(--r-pill);
  font-size: var(--fs-1);
  font-weight: var(--fw-forte);
  line-height: var(--lh-interfaccia);
}

.cfg__allarme[data-gravita="alta"] { border-left-color: var(--err-base); }
.cfg__allarme[data-gravita="alta"]::before { background: var(--err-base); border-radius: var(--r-1); }
.cfg__allarme[data-gravita="alta"]::after {
  background: var(--err-bg); border-color: var(--err-border); color: var(--err-text);
}

.cfg__allarme[data-gravita="media"] { border-left-color: var(--warn-base); }
.cfg__allarme[data-gravita="media"]::before {
  background: var(--warn-base); clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.cfg__allarme[data-gravita="media"]::after {
  background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text);
}
/* Senza attributo di testo il bollo sparisce invece di lasciare uno spazio vuoto. */
.cfg__allarme:not([data-gravita-testo])::after { display: none; }

/* Nessun rilievo: stessa forma dell'elenco, tono asciutto. */
.cfg__ok {
  position: relative;
  margin: 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 18px + var(--sp-3));
  max-width: none;
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  border-left: 4px solid var(--ok-base);
  border-radius: var(--r-3);
  font-size: var(--fs-2);
  line-height: var(--lh-corpo);
  color: var(--ok-text);
}
.cfg__ok::before {
  content: "✓";
  position: absolute;
  left: var(--sp-5);
  top: calc(var(--sp-4) + 4px);
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: var(--ok-base);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: var(--fw-titolo); line-height: 1;
}

/* -----------------------------------------------------------------------------
   6. PAYWALL — il passo successivo, non un muro
   Regole che si è dato questo blocco:
   - nessun conto alla rovescia, nessun "posti limitati", nessuna scadenza;
   - il prezzo compare PRIMA del bottone, in chiaro, con l'IVA dichiarata;
   - l'elenco dice cosa si riceve, non cosa si perde;
   - tono di continuità: quello che si è visto sopra è già suo, questo è il
     documento da portare in banca.
   Visivamente è una scheda con un bordo brand più marcato, non un fondo scuro
   che stacca dal resto: deve sembrare l'ultima sezione della pagina.
   -------------------------------------------------------------------------- */

.cfg__paywall {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background: var(--surface);
  border: 2px solid var(--brand-600);
  border-radius: var(--r-3);
}
.cfg__paywall > h3 { font-size: var(--fs-5); margin: 0; max-width: 30ch; }
.cfg__paywall > p { font-size: var(--fs-3); color: var(--ink-700); margin: 0; }

.cfg__paywall-elenco {
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  max-width: none;
}
.cfg__paywall-elenco li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
  margin: 0;
  font-size: var(--fs-3);
  line-height: var(--lh-corpo);
}
.cfg__paywall-elenco li::before {
  content: "✓";
  width: 20px; height: 20px;
  margin-top: 3px;
  display: grid; place-items: center;
  background: var(--brand-100);
  color: var(--brand-700);
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: var(--fw-titolo); line-height: 1;
}

/* --- Prezzo: prima del bottone, grande, senza asterischi -------------------- */
.cfg__paywall-prezzo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--ink-200);
  font-size: var(--fs-6);
  font-weight: var(--fw-titolo);
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.cfg__paywall-prezzo small,
.cfg__paywall-prezzo .cfg__paywall-prezzo-nota {
  font-size: var(--fs-2);
  font-weight: var(--fw-normale);
  color: var(--ink-700);
}

.cfg__paywall-form { display: grid; gap: var(--sp-3); max-width: 460px; }
.cfg__paywall-form label {
  font-size: var(--fs-2);
  font-weight: var(--fw-forte);
}
.cfg__paywall-form input {
  width: 100%;
  min-height: var(--altezza-tocco);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
  border-radius: var(--r-2);
  font-size: var(--fs-3);
}
.cfg__paywall-form input:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand-600); }

.cfg__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-8);
  background: var(--brand-600);
  border: 1px solid var(--brand-600);
  border-radius: var(--r-2);
  color: #fff;
  font-size: var(--fs-3);
  font-weight: var(--fw-forte);
  cursor: pointer;
  transition: background-color var(--t-veloce) var(--e-standard);
}
.cfg__cta:hover { background: var(--brand-500); border-color: var(--brand-500); }
.cfg__cta:active { background: var(--brand-800); border-color: var(--brand-800); }

/* Nota di chiusura: rassicurazioni concrete (fattura, rimborso, nessun
   abbonamento). Piccola e grigia: è una postilla, non una leva. */
.cfg__paywall-nota {
  margin: 0;
  font-size: var(--fs-1);
  line-height: var(--lh-interfaccia);
  color: var(--ink-500);
  max-width: 60ch;
}

/* -----------------------------------------------------------------------------
   7. MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .cfg__risultati { gap: var(--sp-8); padding: var(--sp-5) var(--sp-4) var(--sp-16); }
  .cfg__risultati > h2 { font-size: var(--fs-5); }

  /* Semaforo: il numero passa sopra al testo, resta enorme. */
  .cfg__semaforo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "etichetta" "valore" "giudizio";
    row-gap: var(--sp-2);
    padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
    border-left-width: 6px;
  }
  .cfg__semaforo-valore { font-size: 56px; }
  .cfg__semaforo-etichetta { flex-wrap: wrap; }

  .cfg__sintesi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfg__sintesi-voce { padding: var(--sp-3) var(--sp-4); }
  .cfg__sintesi-voce dd { font-size: var(--fs-4); }

  /* Tabella: la prima colonna si stringe ma resta ancorata; gli anni scorrono
     due alla volta. Il confronto resta orizzontale — impilare 13 righe × 5 anni
     produrrebbe 65 righe illeggibili. */
  .cfg__tabella th, .cfg__tabella td { padding: var(--sp-2) var(--sp-3); }
  .cfg__tabella tbody th, .cfg__tabella thead th:first-child, .cfg__tabella tfoot th {
    min-width: 128px;
    font-size: var(--fs-1);
    box-shadow: 2px 0 4px rgba(13, 31, 49, 0.10);
  }
  .cfg__tabella td { min-width: 92px; }
  .cfg__tabella-nota { display: block; }

  .cfg__allarme { padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 22px + var(--sp-3)); }
  .cfg__allarme::before, .cfg__ok::before { left: var(--sp-4); }
  .cfg__ok { padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 18px + var(--sp-3)); }
  .cfg__paywall { padding: var(--sp-5); }
  .cfg__paywall > h3 { font-size: var(--fs-4); }
  .cfg__paywall-prezzo { font-size: var(--fs-5); }
  .cfg__cta { width: 100%; }
}

/* -----------------------------------------------------------------------------
   8. STAMPA
   Il referto si stampa e finisce sul tavolo del direttore: il paywall no.
   -------------------------------------------------------------------------- */

@media print {
  .cfg__risultati { display: block; padding: 0; max-width: none; }
  .cfg__paywall { display: none; }
  .cfg__semaforo, .cfg__allarme, .cfg__ok, .cfg__tabella-involucro { break-inside: avoid; }
  .cfg__tabella-involucro { overflow: visible; border-color: #999; }
  .cfg__tabella tbody th, .cfg__tabella thead th { position: static; box-shadow: none; }
  .cfg__semaforo-valore { font-size: 48pt; }
}