/* ==========================================================================
   Blocco condiviso — TABELLA DI CONFRONTO (prima / dopo)
   Compliance `Before After` 63:2073 · 1512 x 1154

   ⚠️ Su Maintenance esiste una sezione con lo stesso nome che pero e tutt'altro:
   cinque card a scaletta. Questa e una tabella vera, ed e giusto che sia una
   <table>: due colonne intestate che si confrontano riga per riga sono dati
   tabulari, non un elenco travestito. Con una <table> uno screen reader
   annuncia "colonna Before Vidim" a ogni cella, cosa che dei <div> non fanno.

   ⚠️ Come Use Cases, questa sezione rientra dai bordi di 160: contenuto 1192.

   Verifica altezza: 160 + 116 (titolo) + 40 + 595 (tabella) + 40 + 43 + 160 = 1154 ✔
     tabella = 77 (intestazione) + 72+86+72+72+72+72+72 (7 righe) = 595 ✔
     ⚠️ la riga 2 e alta 86 perche la cella destra va a capo: l'altezza NON
     va fissata, la decide il contenuto.
   ========================================================================== */

.confronto > .container {
  width: 1192px;                       /* 1512 − 2 x 160 */
  max-width: 100%;
  align-items: center;
}

.confronto__titolo {
  color: var(--text-on-light);
  text-align: center;
  width: 100%;
}

.confronto__tabella {
  width: 100%;
  margin-top: var(--space-5);          /* 40 */
  border-collapse: separate;           /* separate, non collapse: serve a far
                                          vivere i radius sugli angoli */
  border-spacing: 0;
  table-layout: fixed;                 /* due colonne esatte da 596 */
  text-align: left;
}

/* --- Intestazione ---------------------------------------------------------
   I due fondi sono la sostanza: scuro il "prima", blu VIDIM il "dopo". */
.confronto__tabella thead th {
  padding: 24px;
  color: var(--text-on-dark);
  font-weight: 400;
  vertical-align: middle;
}

.confronto__tabella thead th:first-child {
  background: var(--color-tertiary);
  border-radius: var(--radius-lg) 0 0 0;
}

.confronto__tabella thead th:last-child {
  background: var(--color-primary);
  border-radius: 0 var(--radius-lg) 0 0;
}

/* --- Celle dati ---------------------------------------------------------- */
/* ⚠️ Bordo INTERNO, non `border`. In Figma lo stroke delle celle e "inside":
   la riga e alta 72 CON il filetto compreso. Con un `border` vero ogni riga
   crescerebbe di 2px e la tabella verrebbe piu alta del mockup. */
.confronto__tabella td {
  padding: 24px;
  box-shadow: inset 0 0 0 1px var(--color-tertiary-200);
  vertical-align: top;
  color: var(--color-tertiary-300);
}

.confronto__tabella tbody tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-lg); }
.confronto__tabella tbody tr:last-child td:last-child  { border-radius: 0 0 var(--radius-lg) 0; }

/* --- Il contenuto della cella: icona + testo ----------------------------- */
.confronto__cella {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);                 /* 8 */
}

.confronto__icona {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
}

.confronto__icona > img {
  width: 24px;
  height: 24px;
}

.confronto .btn-group { margin-top: var(--space-5); }