/* ==========================================================================
   Xatumia · area riservata (/app) e pannello di amministrazione (/admin).
   Prima si carica comune.min.css: token del kit (docs/IDENTITA.md) e componenti comuni con il sito (pulsanti,
   moduli, schede, riquadri, tabelle, avvisi, etichette, stato vuoto, testata delle pagine, pagine di accesso, piè
   di pagina, copyright). Qui solo quello che è dell'area (decisione del titolare del 27/10/2026: «tutta l'area nello
   stile del sito»):
   - impianto con la barra laterale (menu con le icone, azienda, utente) e il piè di pagina nella colonna;
   - titoli e testi dell'area, schede dei contenuti, cifre della Panoramica;
   - varianti dell'area dei componenti comuni: pulsanti piccoli e di pericolo, avviso di attenzione, campi compatti,
     tabelle dati (righe divise, da telefono schede con l'etichetta di ogni dato);
   - Per iniziare, presentazione guidata, codice di attivazione, download, guida, prezzi, testi legali.
   Nessuno stile in linea nei template (CSP): le barre di avanzamento sono SVG con attributi.
   ========================================================================== */

/* --- Base dell'area ------------------------------------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  --area-spazio-modulo: 20px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--sito-testo);
  background: var(--colore-sfondo-pagina);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titoli come il sito: il titolo della pagina grande e leggero (testata-pagina), le sezioni medie. Selettori di
   elemento: le regole dei componenti comuni (.testata-pagina h1, .riquadro h2, .accesso__scheda h1) vincono. */
h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 300;
}

h2 {
  margin-top: 40px;
  font-size: 1.3rem;
  font-weight: 500;
}

h3 {
  margin-top: 24px;
  font-size: 1.08rem;
  font-weight: 600;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
}

h1 b,
h2 b {
  font-weight: 600;
  color: var(--sito-primario);
}

p {
  margin: 0 0 12px;
}

strong,
b {
  font-weight: 600;
}

/* Sprite delle icone (area/parti/icone.php): fuori dal flusso e senza dimensioni, ma i <use> funzionano (con
   display:none alcuni browser non disegnano i simboli). */
.sprite-icone {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Icone dell'area: tratti in currentColor (le misure vengono dal CSS comune). */
.icona {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cifre,
.num {
  font-variant-numeric: var(--cifre-tabella);
}

/* Codici (articoli, nomi utente, IBAN): carattere a spaziatura fissa, zero barrato. */
.codice-testo {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-variant-numeric: var(--cifre-codici);
}

.impronta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

[id] {
  scroll-margin-top: 24px;
}

/* --- Impianto: barra laterale a sinistra, contenuto e piè di pagina a destra ----------------------------------- */
.impianto {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  min-height: 100vh;
  /* Il fondo della colonna del menu, con il suo bordo nello stesso pixel di quello della barra, continua sotto la barra
     (che resta ferma mentre la pagina scorre). */
  background-image: linear-gradient(to right, var(--colore-superficie) 0, var(--colore-superficie) calc(16rem - 1px), var(--colore-bordo) calc(16rem - 1px), var(--colore-bordo) 16rem, transparent 16rem);
}

.admin .impianto {
  background-image: linear-gradient(to right, var(--marchio-inchiostro) 0, var(--marchio-inchiostro) 16rem, transparent 16rem);
}

.barra {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 14px 18px;
  overflow-y: auto;
  border-right: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
  color: var(--colore-testo);
}

.barra__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.marchio {
  display: inline-flex;
  align-items: center;
  padding: 6px 8px;
  border-radius: var(--raggio-sm);
  color: inherit;
  text-decoration: none;
}

.marchio__logo {
  display: block;
  width: 8.25rem;
  height: auto;
}

.marchio__gambe {
  fill: var(--colore-logo-gambe);
}

.marchio__spunta {
  fill: var(--colore-logo-spunta);
}

.marchio__scritta {
  fill: var(--colore-logo-scritta);
}

/* «Area riservata» / «Amministrazione» sotto il logo, come gli occhielli del sito. */
.barra__sezione {
  margin: 4px 8px 0;
  color: var(--colore-testo-secondario);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.barra__azienda {
  margin: 18px 0 12px;
  padding: 10px 12px;
  border-radius: var(--raggio-tessera);
  background: var(--colore-superficie-tenue);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.barra__azienda span {
  display: block;
  margin-top: 2px;
  color: var(--colore-testo-secondario);
  font-size: 0.8rem;
  font-weight: 400;
}

.apri-menu {
  display: none;
}

.menu {
  margin-top: 6px;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu li + li {
  margin-top: 2px;
}

.menu a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border-radius: var(--raggio-md);
  color: var(--colore-testo-secondario);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover {
  background: var(--colore-superficie-tenue);
  color: var(--colore-testo);
}

/* Voce attiva: fondo tenue, testo e barretta a sinistra nel colore primario (mai solo il colore: anche il peso). */
.menu a[aria-current="page"] {
  background: var(--colore-primario-tenue);
  color: var(--colore-primario);
  font-weight: 600;
}

.menu a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}

.menu .icona {
  width: 20px;
  height: 20px;
  vertical-align: 0;
}

.menu__conteggio {
  min-width: 1.5rem;
  margin-left: auto;
  padding: 0 6px;
  border-radius: var(--raggio-pillola);
  background: var(--colore-avviso-fondo);
  color: var(--colore-avviso);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.barra__piede {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--colore-bordo);
}

.utente {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.utente__iniziali {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--colore-primario-tenue);
  color: var(--colore-primario);
  font-size: 0.8rem;
  font-weight: 600;
}

.utente__testo {
  flex: 1;
  min-width: 0;
}

.utente__nome {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* L'email si legge tutta, anche con il tocco e con la tastiera: se è lunga va a capo, di preferenza prima della @
   (<wbr> nel layout), altrimenti dove serve. Prima era tagliata con i puntini e intera solo nel title. */
.utente__email {
  margin: 0;
  color: var(--colore-testo-secondario);
  font-size: 0.8rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.utente form {
  margin: 0 0 0 auto;
}

/* «Esci» con la parola, non solo l'icona (giro 5, B6). */
.esci {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: var(--raggio-md);
  background: transparent;
  color: var(--colore-testo-secondario);
  cursor: pointer;
}

.esci:hover {
  background: var(--colore-superficie-tenue);
  color: var(--colore-testo);
}

/* Pannello di amministrazione: barra scura (data-tema="scuro" ridefinisce i token), stessi componenti. */
.admin .barra {
  border-right-color: var(--colore-bordo);
  background: var(--marchio-inchiostro);
}

.impianto__corpo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.contenuto {
  flex: 1 0 auto;
  width: 100%;
  max-width: 80rem;
  padding: 36px clamp(16px, 4vw, 56px) 64px;
}

.contenuto:focus {
  outline: none;
}

/* Il piè di pagina dell'area sta nella colonna del contenuto, sotto. */
.impianto__corpo .piede-area {
  margin-top: auto;
}

.piede-area__link a {
  text-underline-offset: 0.16em;
}

/* Al fondo della pagina i collegamenti devono restare raggiungibili sopra il pulsante fisso della chat. */
@media (max-width: 600px) {
  .area:has([data-chatbot-apri]:not([hidden])) .piede-area {
    padding-bottom: 72px;
  }
}

/* --- Pagine di accesso (CSS comune .accesso): aiuto sotto il modulo --------------------------------------------- */
.accesso__scheda > .occhiello {
  color: var(--sito-primario);
}

.accesso__scheda .avviso {
  margin-bottom: 20px;
}

.accesso__scheda .modulo {
  gap: 20px;
  margin-top: 22px;
}

.accesso__scheda .turnstile {
  margin: 0;
}

/* Con una colonna sola (fino a 760 px) la riga del copyright arriva in fondo, dove sta fisso il pulsante rotondo della
   chat (chatbot.css: 52 px a 16 px dal bordo e dal fondo): lo spazio in fondo lascia leggibile e cliccabile «Note legali».
   Serve ancora con il pulsante piccolo: a 320 px lo copriva (prova del sito del 31/10/2026). */
@media (max-width: 760px) {
  .accesso__corpo {
    padding-bottom: 84px;
  }
}

.accesso__altro {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--sito-bordo);
  color: var(--sito-testo-tenue);
  font-size: 0.94rem;
}

.accesso__altro ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.accesso__altro p {
  margin: 0 0 8px;
}

.accesso__altro p:last-child {
  margin-bottom: 0;
}

/* --- Testata della pagina (CSS comune .testata-pagina): ritorno e testo --------------------------------------- */
.indietro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}

.indietro:hover {
  text-decoration: underline;
}

.testata-pagina .occhiello {
  margin-bottom: 10px;
}

.testata-pagina__testo strong {
  color: var(--sito-testo);
}

.testata-pagina__nota {
  max-width: 62ch;
  margin: 8px 0 0;
  color: var(--sito-testo-tenue);
  font-size: 0.92rem;
}

/* Titolo di sezione fuori dalle schede, con le azioni a destra. */
.sezione-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 40px 0 14px;
}

.sezione-testata h2 {
  margin: 0;
}

.sezione-testata p {
  margin: 0;
  color: var(--sito-testo-tenue);
  font-size: 0.94rem;
}

.lead {
  max-width: 68ch;
  color: var(--sito-testo-tenue);
}

.nota {
  color: var(--sito-testo-tenue);
  font-size: 0.9rem;
}

/* Un'azione nel testo può inviare le scelte del modulo senza JavaScript. La semantica resta
   quella di un pulsante; sottolineatura e focus la rendono riconoscibile come gli altri link. */
.azione-nel-testo {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colore-link);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.azione-nel-testo:hover { color: var(--colore-link-hover); }

/* Dotazione inclusa separata dagli extra a pagamento: le icone rappresentano dispositivi e accessi,
   mai un limite agli operatori che possono lavorare sui computer attivati. */
.uso-incluso {
  margin: 0 0 20px;
  padding: 18px;
  border: 1px solid #adc8e8;
  border-left: 4px solid var(--colore-link);
  border-radius: 8px;
  background: #eef6ff;
}
.uso-incluso__titolo { margin: 0 0 14px; font-size: 1rem; font-weight: 700; }
.uso-incluso__valori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.uso-incluso__valori li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.uso-incluso__valori .icona { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 2px; color: var(--colore-link); }
.uso-incluso__valori strong { display: block; font-size: 1.15rem; line-height: 1.35; }
.uso-incluso__valori span { display: block; margin-top: 2px; font-size: .9rem; }
.uso-incluso__operatori { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #c5d9ee; font-size: .9rem; }
@media (max-width: 600px) {
  .uso-incluso { padding: 16px 12px; }
  .uso-incluso__valori { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* --- Schede dei contenuti (CSS comune .scheda): nell'area sono blocchi con il testo in colonna ------------------ */
.contenuto .scheda {
  display: block;
  margin: 0 0 24px;
  padding: 26px clamp(18px, 3vw, 30px);
}

.contenuto .scheda.modulo {
  display: grid;
}

/* Il riquadro non deve togliere il flusso e gli spazi dei moduli in linea. */
.contenuto .scheda.modulo-in-linea {
  display: flex;
  flex-direction: row;
}

.contenuto .scheda > :first-child {
  margin-top: 0;
}

.contenuto .scheda > :last-child {
  margin-bottom: 0;
}

.scheda :is(h2, h3):first-child {
  margin-top: 0;
}

/* Più moduli uno sotto l'altro nella stessa scheda (pannello: proroga, piano, posti, sospensione). */
.contenuto .scheda > form + form,
.contenuto .scheda > form + .nota {
  margin-top: 14px;
}

.admin .scheda > form + section,
.admin .scheda > section + form {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--colore-divisore);
}

.scheda > h2,
.scheda__testata h2 {
  font-size: 1.22rem;
}

.scheda__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 0 0 14px;
}

.scheda__testata h2,
.scheda__testata h3 {
  margin: 0;
}

/* In evidenza (codice appena creato, password da comunicare, cambio programmato): barra cobalto in alto. */
.scheda--evidenza {
  border-color: var(--colore-informazione-bordo);
}

.scheda--evidenza::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 5px;
  border-radius: var(--raggio-tessera) var(--raggio-tessera) 0 0;
  background: var(--sito-primario);
}

/* Zona delle azioni che non si annullano (disdetta, cancellazione dell'account). */
.scheda--pericolo {
  border-color: var(--colore-errore-bordo);
}

.scheda--pericolo > h2:first-child,
.scheda--pericolo > h3:first-child {
  color: var(--colore-errore);
}

/* Riquadro (grigio carta, CSS comune) dentro l'area: margini fra un blocco e l'altro. */
.contenuto > .riquadro,
.contenuto > section > .riquadro {
  margin: 0 0 24px;
}

.riquadro .tenue,
.riquadro p.nota {
  color: var(--sito-testo-tenue);
}

.schede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 20px;
  margin: 0 0 24px;
}

.schede--due {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.schede--tre {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

/* La scheda azienda contiene dati e moduli, non tre semplici contatori.
   Gli ordini hanno una riga propria per lasciare spazio a quote e campi. */
.admin .schede:has(> #ordini) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.admin .schede > #ordini {
  grid-column: 1 / -1;
}

@media (max-width: 700px) {
  .admin .schede:has(> #ordini) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Quattro schede di cifre (Panoramica): quattro in fila o due per due, mai tre e una da sola sotto, come succedeva a
   1280 e 1366 px con «Tempo risparmiato» (giro 5, B10). */
.schede--cifre:has(> .scheda:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1440px) {
  .schede--cifre:has(> .scheda:nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 599.98px) {
  .schede--cifre:has(> .scheda:nth-child(4):last-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contenuto .schede > .scheda {
  margin: 0;
}

/* Etichetta in maiuscoletto con l'icona, sopra le cifre (Panoramica, ordini in più). Il doppio selettore vince sulla
   regola dei titoli delle schede (.scheda > h2). */
.contenuto .scheda__etichetta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--sito-testo-tenue);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.contenuto .scheda__etichetta .icona {
  width: 18px;
  height: 18px;
  color: var(--sito-primario);
}

.cifra {
  margin: 0 0 4px;
  color: var(--sito-testo);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: var(--cifre-tabella);
}

.cifra span {
  color: var(--sito-testo-tenue);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
}

.cifra--testo {
  font-size: 1.45rem;
}

.cifra-nota {
  margin: 0 0 6px;
  color: var(--sito-testo-tenue);
  font-size: 0.9rem;
}

.scheda__seguito {
  margin: 14px 0 0;
  font-size: 0.94rem;
  font-weight: 500;
}

/* File di schede con le cifre (Panoramica, Testi legali): titolo, cifra, testo e collegamento in quattro righe
   condivise fra le schede della stessa fila (subgrid). Le cifre stanno alla stessa altezza anche se un titolo va a
   capo, i collegamenti in fondo alla scheda. Fra le file lo spazio è un margine. */
@supports (grid-template-rows: subgrid) {
  .schede--cifre {
    row-gap: 0;
  }

  .contenuto .schede--cifre > .scheda {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 0;
    margin-bottom: 20px;
  }

  .schede--cifre > .scheda > .scheda__etichetta {
    grid-row: 1;
    align-self: start;
  }

  .schede--cifre > .scheda > .scheda__valore {
    grid-row: 2;
    align-self: start;
  }

  .schede--cifre > .scheda > .scheda__corpo {
    grid-row: 3;
    align-self: start;
  }

  .schede--cifre > .scheda > .scheda__seguito {
    grid-row: 4;
    align-self: end;
  }
}

.scheda__valore > :last-child,
.scheda__corpo > :last-child {
  margin-bottom: 0;
}

.scheda__corpo {
  margin-top: 6px;
}

.scheda--cifra {
  padding: 18px 20px;
}

/* Cifre affiancate dentro una scheda (Abbonamento › Ordini in più). */
.cifre-riga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.cifre-riga > div {
  padding: 14px 16px;
  border-radius: var(--raggio-tessera);
  background: var(--sito-carta);
}

.cifre-riga .cifra {
  font-size: 1.6rem;
}

.cifra-etichetta {
  margin: 0 0 4px;
  color: var(--sito-testo-tenue);
  font-size: 0.86rem;
  font-weight: 500;
}

/* Barra di avanzamento (SVG): fondo cobalto chiaro, valore cobalto; oltre il limite in ambra. */
.uso {
  margin: 12px 0 8px;
}

.uso svg {
  display: block;
  width: 100%;
  height: 8px;
}

.uso__fondo {
  fill: var(--colore-primario-tenue-2);
}

.uso__valore {
  fill: var(--sito-primario);
}

.uso--oltre .uso__valore {
  fill: var(--colore-avviso-pieno);
}

/* --- Dati in coppie (dl): righe divise, come i dati dell'impresa del sito ------------------------------------- */
.dati {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  margin: 0 0 16px;
}

.dati dt,
.dati dd {
  padding: 9px 0;
  border-bottom: 1px solid var(--colore-divisore);
}

.dati dt {
  padding-right: 24px;
  color: var(--sito-testo-tenue);
  font-size: 0.92rem;
}

.dati dd {
  margin: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.dati > :nth-last-child(-n + 2) {
  border-bottom: 0;
}

@media (min-width: 601px) {
  /* Un'etichetta lunga non deve sottrarre tutto lo spazio a date e importi. */
  .admin .dati {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* --- Etichette (CSS comune .etichetta): neutra per «annullata», «spento», «già inclusa» ------------------------- */
.etichetta + .etichetta {
  margin-left: 4px;
}

/* --- Avvisi (CSS comune .avviso, compreso --attenzione): link blu, testo in più paragrafi, pulsante a destra ---- */
.avviso--informazione a,
.avviso--attenzione a {
  color: var(--colore-link);
}

.avviso > div,
.avviso > p {
  flex: 1;
  min-width: 0;
}

.avviso p {
  margin: 0;
}

.avviso p + p {
  margin-top: 6px;
}

.avviso form {
  flex: none;
  align-self: center;
  margin: 0;
}

.avviso .pulsante {
  flex: none;
  align-self: center;
}

.contenuto > .avviso,
.scheda > .avviso {
  max-width: 76rem;
}

/* --- Moduli (CSS comune .modulo, .campi, .campo, .opzione, .consenso) ----------------------------------------- */
.contenuto form {
  margin: 0;
}

.modulo--compatto {
  gap: var(--area-spazio-modulo);
}

.contenuto .scheda.modulo { grid-template-columns: minmax(0, 1fr); }

/* Nella griglia del modulo lo spazio lo dà il gap: niente margini propri; i pulsanti non si allargano. */
.modulo .riepilogo-errori,
.modulo > p,
.modulo > .avviso,
.modulo > :is(h2, h3) {
  margin: 0;
}

.modulo > .pulsante,
.modulo > button {
  justify-self: start;
}

.modulo fieldset + fieldset {
  padding-top: 26px;
  border-top: 1px solid var(--sito-bordo);
}

.campo--stretto {
  max-width: 26rem;
}

.campo__password {
  position: relative;
  min-width: 0;
}

.campo__password input {
  padding-right: 6.5rem;
}

.campo__visibilita {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  min-width: 5.5rem;
  padding: 4px 10px;
  border: 0;
  border-radius: calc(var(--raggio-campo) - 3px);
  background: transparent;
  color: var(--sito-primario);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.campo__visibilita:hover {
  background: var(--cobalto-50);
}

/* Campi affiancati con le caselle alla stessa altezza. Ogni campo occupa cinque righe della griglia di .campi,
   condivise con i campi accanto (subgrid): etichetta, aiuto, errore, casella, quello che viene dopo. Così le caselle
   si allineano anche quando l'aiuto o l'errore c'è solo da una parte. Gli spazi sono margini e non gap: una riga
   vuota (nessun aiuto nella fila) non lascia spazio. */
@supports (grid-template-rows: subgrid) {
  .contenuto .campi {
    row-gap: 0;
    margin-bottom: -18px;
  }

  .contenuto .campi > .campo {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    gap: 0;
    padding-bottom: 18px;
  }

  .contenuto .campi > .campo > * {
    align-self: start;
  }

  .contenuto .campi > .campo > label {
    grid-row: 1;
    margin-bottom: 6px;
  }

  .contenuto .campi > .campo > .campo__aiuto {
    grid-row: 2;
    margin-bottom: 6px;
  }

  .contenuto .campi > .campo > .campo__errore {
    grid-row: 3;
    margin-bottom: 6px;
  }

  .contenuto .campi > .campo > :is(input, select, textarea, .campo__password) {
    grid-row: 4;
  }

  .contenuto .campi > .campo > :not(label, .campo__aiuto, .campo__errore, input, select, textarea, .campo__password) {
    grid-row: 5;
    margin-top: 6px;
  }
}

/* Titoli dei gruppi di campi: lo stesso spazio sotto ogni titolo. Il legend non sta più sul bordo del fieldset
   (dove il bordo e lo spazio sopra il gruppo seguente lo spingevano in basso): è un blocco come gli altri. */
.contenuto .modulo legend {
  float: left;
  width: 100%;
}

.contenuto .modulo legend + * {
  clear: both;
}

/* Sede all'italiana: indirizzo su tutta la riga, poi CAP stretto, comune largo e provincia stretta. */
.contenuto .campi--indirizzo {
  grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) minmax(10rem, 15rem);
}

/* Campi più bassi nelle file di filtri e nelle tabelle. */
.campo--compatto input,
.campo--compatto select {
  min-height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.campo :is(input, select, textarea):disabled,
.campo input[readonly],
.campo textarea[readonly] {
  border-color: var(--colore-bordo-forte);
  background: var(--colore-superficie-incavata);
  color: var(--colore-testo-tenue);
}

.campo--codice input {
  font-family: var(--font-mono);
  font-variant-numeric: var(--cifre-codici);
  letter-spacing: 0.06em;
}

/* Riga con il campo e il pulsante accanto (posti in più, email del codice, filtri). */
.modulo-in-linea {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--area-spazio-modulo);
}

.modulo-in-linea .campo {
  flex: 1 1 14rem;
}

.modulo-in-linea .campo--stretto {
  flex: 0 1 10rem;
}

.modulo-in-linea .pulsante {
  min-height: 48px;
}

.modulo-in-linea__testo {
  flex: 1 1 100%;
  margin: 0;
}

.modulo-in-linea .campo--compatto ~ .pulsante {
  min-height: 42px;
}

.contenuto form.filtri-ricerca {
  margin: 0 0 var(--area-spazio-modulo);
}

.contenuto :is(form, .vuoto) + .dettagli {
  margin-top: var(--area-spazio-modulo);
}

@media (max-width: 600px) {
  .contenuto .vuoto--compatto { padding: 20px; text-align: left; }
  .contenuto .vuoto--compatto::before { display: none; }
  .contenuto .vuoto--compatto p { font-size: 0.94rem; }
}

/* Opzioni grandi (piani, periodicità, metodo): titolo, prezzo e righe di dettaglio nell'etichetta. */
.opzione label strong {
  display: block;
  font-weight: 600;
}

.opzione label span {
  display: block;
  color: var(--sito-testo-tenue);
  font-size: 0.92rem;
  font-weight: 400;
}

.opzione label .piano__prezzo {
  margin: 4px 0 2px;
  color: var(--sito-testo);
  font-size: 1.2rem;
  font-weight: 500;
  font-variant-numeric: var(--cifre-tabella);
}

.opzioni--colonna {
  grid-template-columns: minmax(0, 1fr);
}

/* Dentro .opzioni la griglia gestisce lo spazio: un margine sul secondo riquadro ne sposta i due bordi. */
:not(.opzioni) > .consenso + .consenso,
:not(.opzioni) > .consenso + .opzione,
:not(.opzioni) > .opzione + .opzione {
  margin-top: 10px;
}

.opzione:has(input[aria-invalid="true"]) {
  border-color: var(--colore-errore);
  box-shadow: 0 0 0 1px var(--colore-errore);
}

/* Errore di una casella (spunte dei documenti): va a capo sotto il testo, allineato al testo. */
.opzione:has(> .campo__errore) {
  flex-wrap: wrap;
}

.opzione > .campo__errore {
  flex-basis: 100%;
  margin: 0 0 0 32px;
}

.consenso input[aria-invalid="true"] {
  outline: 2px solid var(--colore-errore);
  outline-offset: 2px;
}

.campo__aiuto--consenso {
  margin: 4px 0 0 32px;
}

.contatore {
  color: var(--sito-testo-tenue);
  font-size: 0.8rem;
  text-align: right;
}

/* --- Pulsanti (CSS comune .pulsante, compresi --piccolo e --pericolo): download, disattivati ------------------ */
.pulsante:disabled {
  border-color: var(--sito-bordo);
  background: var(--colore-superficie-incavata);
  color: var(--colore-testo-tenue);
  cursor: not-allowed;
}

.pulsante--grande .icona {
  width: 22px;
  height: 22px;
}

.pulsante--scarica {
  justify-content: flex-start;
  gap: 14px;
  text-align: left;
}

.pulsante__dettaglio {
  display: block;
  margin-top: 2px;
  font-size: 0.86rem;
  font-weight: 400;
}

.azioni--destra {
  justify-content: flex-end;
}

.modulo .azioni,
.scheda .azioni {
  align-items: center;
}

/* Azioni di una riga di tabella: pulsanti piccoli affiancati. */
.azioni-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.azioni-riga form {
  margin: 0;
}

/* Nelle celle delle tabelle i pulsanti stanno uno sotto l'altro, tutti larghi come il più largo. */
td .azioni-riga {
  display: inline-grid;
  grid-auto-flow: row;
  justify-items: stretch;
}

td .azioni-riga .pulsante {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

/* Casella e testo nelle celle strette: il testo resta accanto alla casella (il CSS comune lo manda sotto quando non
   ci sono 12rem). */
td .consenso {
  flex-wrap: nowrap;
}

td .consenso label {
  min-width: 0;
}

/* Più etichette nella stessa cella: quando vanno a capo restano allineate a sinistra. */
td .etichetta + .etichetta {
  margin-left: 0;
}

td .etichetta {
  margin: 0 6px 4px 0;
}

/* --- Schede di navigazione (Regole) e filtri a pillole (pannello) ------------------------------------------- */
.schede-nav {
  margin: 0 0 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--sito-bordo);
}

.schede-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schede-nav a {
  display: block;
  margin-bottom: -1px;
  padding: 12px 16px;
  border-bottom: 3px solid transparent;
  color: var(--sito-testo-tenue);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.schede-nav a:hover {
  color: var(--sito-testo);
}

.schede-nav a[aria-current="page"] {
  border-bottom-color: var(--sito-primario);
  color: var(--sito-primario);
  font-weight: 600;
}

.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.filtri a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border: 1.5px solid var(--sito-bordo-forte);
  border-radius: var(--raggio-pillola);
  background: #fff;
  color: var(--sito-testo);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.filtri a:hover {
  border-color: var(--sito-primario);
  color: var(--sito-primario);
}

.filtri a[aria-current="page"] {
  border-color: var(--sito-primario);
  background: var(--sito-primario);
  color: #fff;
}

.paginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
}

/* --- Tabelle dati (in più alla tabella comune): righe divise, testo pieno, numeri a destra -------------------- */
/* position: relative contiene anche i testi per i soli lettori di schermo (.sr, in posizione assoluta): senza, da
   telefono uscivano dal riquadro che scorre e allargavano la pagina. */
.contenuto .tabella-scorre {
  position: relative;
  margin: 0 0 24px;
  border: 1px solid var(--sito-bordo);
  border-radius: var(--raggio-tessera);
  background: #fff;
}

.scheda .tabella-scorre,
.dettagli .tabella-scorre {
  margin-bottom: 16px;
}

.tabella--dati {
  font-size: 0.94rem;
}

.contenuto .tabella > caption:not(.sr) {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--sito-bordo);
}

.tabella--dati th,
.tabella--dati td {
  padding: 12px 16px;
  border-width: 0 0 1px;
  border-color: var(--colore-divisore);
}

.tabella--dati td {
  color: var(--sito-testo);
}

.tabella--dati thead th {
  border-bottom-color: var(--sito-bordo);
  background: var(--colore-superficie-tenue);
  color: var(--colore-testo-secondario);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tabella--dati tbody th {
  color: var(--sito-testo);
  font-weight: 600;
}

.tabella--dati tbody tr:last-child > * {
  border-bottom: 0;
}

.tabella--dati tbody tr:hover {
  background: var(--colore-riga-hover);
}

.tabella--dati .num {
  text-align: right;
  white-space: nowrap;
}

.tabella--dati .nota {
  font-size: 0.85rem;
}

.tabella--dati .nota,
.tabella--dati .etichetta {
  display: inline-block;
}

.tabella--dati td > .nota,
.tabella--dati th > .nota {
  display: block;
  margin-top: 2px;
}

.tabella--dati form {
  margin: 0;
}

/* Da telefono le righe diventano schede: ogni dato con la sua etichetta (data-etichetta sulla cella). */
@media (max-width: 599.98px) {
  .tabella--schede thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabella--schede,
  .tabella--schede tbody,
  .tabella--schede tr,
  .tabella--schede tbody th,
  .tabella--schede td {
    display: block;
    width: 100%;
  }

  .tabella--schede tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sito-bordo);
  }

  .tabella--schede tbody tr:last-child {
    border-bottom: 0;
  }

  .tabella--schede tbody th,
  .tabella--schede td,
  .tabella--schede tbody tr:last-child > * {
    padding: 4px 0;
    border: 0;
  }

  .tabella--schede tbody th {
    padding-bottom: 6px;
    font-size: 1rem;
  }

  .tabella--schede td[data-etichetta]::before {
    content: attr(data-etichetta);
    display: block;
    color: var(--colore-testo-secondario);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .tabella--schede td:empty {
    display: none;
  }

  .tabella--schede .num {
    text-align: left;
  }

  .tabella--schede td .azioni-riga {
    padding-top: 6px;
  }

  .tabella--schede tbody tr:hover {
    background: none;
  }

  .contenuto .tabella-scorre:has(.tabella--schede) {
    overflow: visible;
  }
}

/* I comandi degli operatori devono restare visibili anche sui portatili. */
@media (max-width: 1399.98px) {
  .tabella--modificabile thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabella--modificabile,
  .tabella--modificabile tbody,
  .tabella--modificabile tr,
  .tabella--modificabile tbody th,
  .tabella--modificabile td {
    display: block;
    width: 100%;
  }

  .tabella--modificabile tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sito-bordo);
  }

  .tabella--modificabile tbody tr:last-child {
    border-bottom: 0;
  }

  .tabella--modificabile tbody th,
  .tabella--modificabile td,
  .tabella--modificabile tbody tr:last-child > * {
    padding: 4px 0;
    border: 0;
  }

  .tabella--modificabile tbody th {
    padding-bottom: 6px;
    font-size: 1rem;
  }

  .tabella--modificabile td[data-etichetta]::before {
    content: attr(data-etichetta);
    display: block;
    color: var(--colore-testo-secondario);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
  }

  .tabella--modificabile td:empty {
    display: none;
  }

  .tabella--modificabile .num {
    text-align: left;
  }

  .tabella--modificabile td .azioni-riga {
    padding-top: 6px;
  }

  .tabella--modificabile tbody tr:hover {
    background: none;
  }

  .contenuto .tabella-scorre:has(.tabella--modificabile) {
    overflow: visible;
  }
}

/* --- Codice di attivazione e password provvisoria, da leggere o dettare ---------------------------------------- */
.codice-attivazione {
  display: inline-block;
  margin: 6px 0 12px;
  padding: 10px 18px;
  border: 1.5px dashed var(--sito-primario);
  border-radius: var(--raggio-tessera);
  background: var(--sito-primario-tenue);
  color: var(--sito-testo);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: var(--cifre-codici);
  overflow-wrap: anywhere;
}

.codice-attivazione--grande {
  padding: 14px 28px;
  font-size: 2.2rem;
  letter-spacing: 0.16em;
}

.dati .codice-attivazione {
  margin: 0;
  padding: 4px 12px;
  font-size: 1.1rem;
}

/* --- Dettagli richiudibili ------------------------------------------------------------------------------------ */
.dettagli {
  margin: 0 0 20px;
  border: 1px solid var(--sito-bordo);
  border-radius: var(--raggio-tessera);
  background: #fff;
}

.dettagli > summary {
  padding: 14px 18px;
  font-weight: 600;
  cursor: pointer;
}

.dettagli[open] > summary {
  border-bottom: 1px solid var(--colore-divisore);
}

.dettagli > :not(summary) {
  margin-right: 18px;
  margin-left: 18px;
}

.dettagli > :not(summary):first-of-type {
  margin-top: 16px;
}

.dettagli > :last-child {
  margin-bottom: 18px;
}

.dettagli .tabella-scorre {
  border-radius: var(--raggio-sm);
}

/* --- Prezzi e piani (Abbonamento, conferma) -------------------------------------------------------------------- */
.prezzi {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

.prezzi th,
.prezzi td {
  padding: 9px 0;
  border-bottom: 1px solid var(--colore-divisore);
  text-align: left;
  vertical-align: top;
}

.prezzi th {
  font-weight: 400;
}

.prezzi td {
  padding-left: 16px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: var(--cifre-tabella);
}

.prezzi tfoot th,
.prezzi tfoot td {
  padding-top: 12px;
  border-bottom: 0;
  font-weight: 600;
}

/* I tre piani: tre in fila quando c'è spazio, altrimenti uno sotto l'altro; mai due e «Azienda» da solo sotto, come
   succedeva a 1024 px (giro 5, B10). */
.piani {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1280px) {
  .piani {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- Testi legali ----------------------------------------------------------------------------------------------- */
.testo-legale {
  min-width: 0;
  margin: 0 0 12px;
  border: 1px solid var(--sito-bordo);
  border-radius: var(--raggio-tessera);
  background: #fff;
}

.testo-legale summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 14px 18px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.testo-legale summary::-webkit-details-marker {
  display: none;
}

.testo-legale summary::before {
  content: "▸";
  content: "▸" / "";
  color: var(--sito-primario);
}

.testo-legale[open] summary::before {
  content: "▾";
  content: "▾" / "";
}

.testo-legale summary .nota {
  margin-left: auto;
  font-weight: 400;
}

.testo-legale__corpo {
  max-height: 26rem;
  overflow: auto;
  padding: 8px 22px 18px;
  border-top: 1px solid var(--colore-divisore);
  background: #fafaf8;
  scrollbar-gutter: stable;
  font-size: 0.94rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.testo-legale__corpo h2,
.testo-legale__corpo h3 {
  margin: 20px 0 6px;
  font-size: 1rem;
  font-weight: 600;
}

.testo-legale__corpo p,
.testo-legale__corpo li {
  max-width: 72ch;
}

.testo-legale__corpo ul,
.testo-legale__corpo ol {
  padding-left: 1.4em;
}

.testo-strutturato__parti li + li {
  margin-top: 8px;
}

.lettura {
  max-width: 72ch;
  line-height: 1.65;
}

.lettura h2,
.lettura h3 {
  margin-top: 28px;
}

.dettaglio-errore {
  padding: 12px;
  border-radius: var(--raggio-sm);
  background: var(--colore-superficie-incavata);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- Regole: confronto prima e dopo ---------------------------------------------------------------------------- */
.confronto td {
  min-width: 12rem;
}

.riga-cambiata,
.tabella--dati tbody tr.riga-cambiata:hover {
  background: var(--riga-da-confermare-fondo);
  box-shadow: inset 3px 0 0 var(--riga-da-confermare-pieno);
}

.istruzione + .istruzione {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--colore-divisore);
}

.istruzione h3 {
  margin-top: 0;
}

/* --- Panoramica: Per iniziare ---------------------------------------------------------------------------------- */
.per-iniziare__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
}

.per-iniziare__testata h2 {
  margin: 0 0 4px;
}

.per-iniziare__testata p {
  margin: 0;
  color: var(--sito-testo-tenue);
}

.per-iniziare__conto {
  margin: 0;
  color: var(--sito-testo-tenue);
  font-size: 0.95rem;
  white-space: nowrap;
}

.per-iniziare__conto strong {
  color: var(--sito-primario);
  font-size: 1.6rem;
  font-weight: 500;
}

.per-iniziare .uso {
  margin: 16px 0 6px;
}

/* La lista si allarga nel margine della scheda (14 px per parte), così il passo evidenziato ha il suo fondo senza
   uscire dalla lista; le righe fra i passi restano larghe come il testo. */
.per-iniziare__passi {
  display: grid;
  gap: 0;
  margin: 10px -14px 0;
  padding: 0;
  list-style: none;
}

.per-iniziare__passo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 14px;
  border-radius: var(--raggio-tessera);
}

.per-iniziare__passo + .per-iniziare__passo {
  background-image: linear-gradient(var(--colore-divisore), var(--colore-divisore));
  background-position: 14px 0;
  background-size: calc(100% - 28px) 1px;
  background-repeat: no-repeat;
}

/* Numero in un parallelogramma come i passi del sito; spunta verde quando il passo è fatto. */
.per-iniziare__segno {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 32px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: var(--sito-primario-tenue);
  color: var(--sito-primario);
  font-weight: 600;
}

.per-iniziare__segno .icona {
  width: 18px;
  height: 18px;
  stroke-width: 2.25;
}

.per-iniziare__passo--fatto .per-iniziare__segno {
  background: var(--colore-ok-fondo);
  color: var(--colore-ok);
}

.per-iniziare__passo--prossimo .per-iniziare__segno {
  background: var(--sito-primario);
  color: #fff;
}

.per-iniziare__corpo {
  flex: 1;
  min-width: 0;
}

.per-iniziare__titolo {
  margin: 4px 0 0;
  font-weight: 600;
}

.per-iniziare__passo--fatto .per-iniziare__titolo {
  margin-top: 5px;
  color: var(--sito-testo-tenue);
  font-weight: 500;
}

.per-iniziare__fatto {
  margin-left: 8px;
}

.per-iniziare__istruzione {
  max-width: 68ch;
  margin: 4px 0 0;
  color: var(--sito-testo-tenue);
  font-size: 0.95rem;
}

.per-iniziare__azione {
  margin: 10px 0 0;
}

.per-iniziare__passo--prossimo {
  background: var(--sito-primario-tenue);
}

.per-iniziare__passo--prossimo + .per-iniziare__passo {
  background-image: none;
}

/* Panoramica: prima le cifre dell'azienda, poi il percorso di avvio. Le stesse informazioni
   restano nell'ordine di lettura; sul desktop introduzione e passaggi si affiancano. */
.panoramica-cifre > .scheda {
  border-top: 3px solid var(--colore-bordo);
}
.panoramica-cifre > .scheda--risparmio {
  border-color: var(--colore-informazione-bordo);
  border-top-color: var(--sito-primario);
  background: var(--colore-primario-tenue);
}
.panoramica-cifre .cifra {
  font-size: clamp(2rem, 1.7rem + 0.6vw, 2.45rem);
  font-weight: 500;
}
.panoramica-cifre .cifra span {
  display: block;
  margin-top: 7px;
  font-size: 0.85rem;
}
.panoramica-cifre .cifra--testo { font-size: 1.35rem; }
.panoramica-cifre .scheda__etichetta {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.9rem;
  color: var(--sito-testo);
}
.panoramica-cifre .scheda__etichetta .icona {
  box-sizing: content-box;
  flex: none;
  padding: 8px;
  border-radius: var(--raggio-md);
  background: var(--colore-superficie-tenue);
}
.panoramica-cifre .scheda--risparmio .scheda__etichetta .icona {
  background: var(--colore-superficie);
}
.contenuto .scheda.per-iniziare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 0;
  overflow: hidden;
}
.per-iniziare__introduzione {
  padding: 26px clamp(18px, 3vw, 30px);
  border-bottom: 1px solid var(--colore-divisore);
  background: var(--colore-superficie-tenue);
}
.per-iniziare__testata { display: block; }
.per-iniziare__testata h2 { margin-bottom: 12px; font-size: 1.5rem; }
.per-iniziare__testata p + p { margin-top: 12px; }
.per-iniziare__testata .per-iniziare__conto { margin-top: 22px; }
.per-iniziare__conto strong { font-size: 2.25rem; line-height: 1; }
.per-iniziare .uso { margin-top: 12px; }
.per-iniziare__passi {
  align-content: start;
  gap: 4px;
  margin: 0;
  padding: 0 18px 20px;
}
.per-iniziare__passo { gap: 12px; padding: 12px; }
.per-iniziare__passo + .per-iniziare__passo { background-image: none; }
.per-iniziare__passo--fatto { align-items: center; }
.per-iniziare__passo--fatto .per-iniziare__titolo { margin-top: 0; }
.per-iniziare__passo--fatto .per-iniziare__segno { width: 28px; height: 26px; }
.per-iniziare__passo--prossimo {
  border: 1px solid var(--colore-informazione-bordo);
  box-shadow: var(--ombra-1);
}
@media (min-width: 1180px) {
  .contenuto .scheda.per-iniziare { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 0; }
  .per-iniziare__introduzione { border-bottom: 0; border-right: 1px solid var(--colore-divisore); }
  .per-iniziare__passi { padding: 20px; }
}

.ultime-modifiche {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.ultime-modifiche li {
  padding: 10px 0;
  border-bottom: 1px solid var(--colore-divisore);
}

.ultime-modifiche li:last-child {
  border-bottom: 0;
}

.ultime-modifiche .nota {
  display: block;
}

/* --- Presentazione guidata (primo accesso) --------------------------------------------------------------------- */
.presentazione {
  position: relative;
  width: 100%;
  max-width: 40rem;
  margin: 0 0 24px;
  padding: 28px clamp(20px, 4vw, 34px);
  border: 1px solid var(--sito-bordo);
  border-radius: var(--raggio);
  background: #fff;
  color: var(--sito-testo);
  box-shadow: var(--ombra-3);
}

.presentazione:modal {
  position: fixed;
  inset: 0;
  width: calc(100% - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow-y: auto;
}

.presentazione::backdrop {
  background: rgb(9 34 78 / 0.55);
}

.presentazione__testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.presentazione__testata h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 300;
}

.presentazione__testata form {
  margin: -8px -10px 0 0;
}

.presentazione__chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--raggio-md);
  background: transparent;
  color: var(--sito-testo-tenue);
  cursor: pointer;
}

.presentazione__chiudi:hover {
  background: var(--colore-superficie-tenue);
  color: var(--sito-testo);
}

.presentazione__intro {
  margin: 8px 0 0;
  color: var(--sito-testo-tenue);
}

.presentazione__passi {
  display: grid;
  gap: 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.presentazione__passo h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 500;
}

.presentazione__passo h3:focus {
  outline: none;
}

.presentazione__passo p {
  margin: 0 0 8px;
}

.presentazione__numero {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 32px;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
  background: var(--sito-primario);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

.presentazione__comandi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.presentazione__conto {
  text-align: center;
  color: var(--sito-testo-tenue);
  font-size: 0.9rem;
  font-variant-numeric: var(--cifre-tabella);
}

.presentazione > .presentazione__fine {
  margin-top: 20px;
}

.presentazione__comandi .presentazione__fine {
  margin: 0;
}

/* --- Download ---------------------------------------------------------------------------------------------------- */
.scarica > .pulsante--scarica {
  margin: 0 0 10px;
}

/* Sul Mac i due programmi alla pari, affiancati (uno sotto l'altro sul telefono). */
.scarica-mac {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 12px;
  margin: 0 0 10px;
}

.scarica-mac .pulsante--scarica {
  height: 100%;
}

.versioni-scarica {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.versioni-scarica li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 14px 18px;
  border: 1px solid var(--sito-bordo);
  border-radius: var(--raggio-tessera);
  background: #fff;
}

.versioni-scarica__nome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.passi-illustrati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.passi-illustrati figure {
  margin: 0;
}

.passi-illustrati figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-weight: 500;
}

.illustrazione {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raggio-md);
}

.illustrazione text {
  font-family: var(--font-sans);
}

/* Numero dei passi in un parallelogramma, come i passi del sito. */
.passo-numero {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 27px;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: var(--sito-primario);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
}

/* --- Assistenza: indice, guida passo per passo, gestionali ------------------------------------------------------ */
.indice ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.indice a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 6px 14px;
  border: 1.5px solid var(--sito-bordo-forte);
  border-radius: var(--raggio-pillola);
  background: #fff;
  color: var(--sito-testo);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}

.indice a:hover {
  border-color: var(--sito-primario);
  color: var(--sito-primario);
}

.guida.passi {
  margin: 0 0 28px;
}

/* Il passo aperto da un collegamento (Panoramica › «Come si fa») si vede subito. */
.guida > li:target {
  margin-left: -14px;
  padding: 12px 14px 12px 80px;
  border-radius: var(--raggio-tessera);
  background: var(--sito-primario-tenue);
}

.guida > li:target::before {
  top: 10px;
  left: 14px;
}

.gestionali {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 16px;
  margin: 0 0 28px;
}

.contenuto .gestionali > .scheda {
  margin: 0;
}

.gestionale h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

/* Istruzioni lunghe (Odoo, Business Central): la scheda prende tutta la riga, il testo resta leggibile. */
.gestionale--lungo {
  grid-column: 1 / -1;
}

.gestionale--lungo p {
  max-width: 78ch;
}

.gestionale--tuo {
  border-color: var(--sito-primario);
  box-shadow: 0 0 0 1px var(--sito-primario);
}

.elenco-semplice {
  margin: 0 0 16px;
  padding-left: 1.3em;
}

.elenco-semplice li + li {
  margin-top: 8px;
}

.passi-semplici {
  max-width: 68ch;
  margin: 0 0 14px;
  padding-left: 1.4em;
}

.passi-semplici li + li {
  margin-top: 8px;
}

/* --- Pannello: registro e dettagli tecnici -------------------------------------------------------------------- */
.tabella--registro {
  min-width: 50rem;
  table-layout: fixed;
}

.tabella--registro .registro-quando {
  width: 8rem;
}

.tabella--registro .registro-chi,
.tabella--registro .registro-azione {
  width: 12rem;
}

/* Al dettaglio restano almeno 18rem, anche quando la tabella scorre su uno schermo piccolo. */
.tabella--registro .dettaglio-registro {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* Modulo dentro una cella di tabella (Operatori: permesso e data di fine accesso). */
.modulo-cella {
  display: grid;
  gap: 10px;
}

/* Collegamento che serve solo sul telefono (Panoramica: «Vai alle ultime modifiche», che lì stanno in fondo). */
.solo-telefono {
  display: none;
}

@media (max-width: 599.98px) {
  .solo-telefono {
    display: block;
    margin: 0 0 16px;
  }
}

/* «Annulla» accanto a una voce delle Ultime modifiche della Panoramica. */
.ultime-modifiche__annulla {
  margin: 6px 0 0;
}

/* Esito del «Salva» di una riga, accanto al pulsante dove la persona ha agito (collaudo Windows del 31/10): con la
   parola e l'icona, mai solo il colore; prende il fuoco dopo il ricaricamento della pagina. */
.esito-riga {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid;
  border-radius: var(--raggio-xs);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.35;
}

.esito-riga .icona {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.esito-riga--ok {
  border-color: var(--colore-ok-bordo);
  background: var(--colore-ok-fondo);
  color: var(--colore-ok);
}

.esito-riga--errore {
  border-color: var(--colore-errore-bordo);
  background: var(--colore-errore-fondo);
  color: var(--colore-errore);
}

.esito-riga:focus {
  outline: 3px solid var(--sito-primario);
  outline-offset: 2px;
}

/* Fila di campi bassi (pannello: numero e data della fattura, esportazione). */
.modulo-compatto {
  gap: 8px;
}

.modulo-compatto .campo {
  flex: 0 1 9rem;
}

.modulo-compatto .campo label {
  font-size: 0.86rem;
}

.modulo-compatto .campo :is(input, select) {
  min-height: 40px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.modulo-in-linea.modulo-compatto .pulsante {
  min-height: 40px;
}

/* --- Tablet e telefono: la barra diventa una testata con il menu da aprire -------------------------------------- */
@media (max-width: 62rem) {
  .impianto,
  .admin .impianto {
    grid-template-columns: minmax(0, 1fr);
    background-image: none;
  }

  .barra {
    position: static;
    height: auto;
    padding: 10px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--colore-bordo);
  }

  .barra__sezione {
    display: none;
  }

  .js .apri-menu {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--colore-bordo-campo);
    border-radius: var(--raggio-md);
    background: transparent;
    color: var(--colore-testo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .js .barra__navigazione {
    display: none;
  }

  .js .barra--aperta .barra__navigazione {
    display: block;
    padding-bottom: 8px;
  }

  .barra__azienda {
    margin: 10px 0 8px;
  }

  .barra__piede {
    margin-top: 12px;
  }

  .impianto__corpo {
    min-height: 0;
  }

  .contenuto {
    padding: 24px 16px 48px;
  }
}

@media (max-width: 600px) {
  /* Sede al telefono: CAP e comune sulla stessa riga, la provincia sotto. */
  .contenuto .campi--indirizzo {
    grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
  }

  .contenuto .campi--indirizzo > .campo:last-child {
    grid-column: 1 / -1;
  }

  h2 {
    margin-top: 32px;
  }

  .contenuto .scheda {
    padding: 22px 18px;
  }

  .dati {
    grid-template-columns: minmax(0, 1fr);
  }

  .dati dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .dati dd {
    padding-top: 2px;
  }

  .dati > :nth-last-child(2) {
    border-bottom: 0;
  }

  .cifra {
    font-size: 1.75rem;
  }

  .codice-attivazione--grande {
    padding: 10px 16px;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }

  .pulsante--grande {
    width: 100%;
  }

  .avviso {
    flex-wrap: wrap;
  }

  .avviso form,
  .avviso .pulsante {
    margin-left: 32px;
  }

  .per-iniziare__passi {
    margin: 0;
    padding: 0 10px 16px;
  }

  .per-iniziare__passo {
    padding-right: 8px;
    padding-left: 8px;
  }

  .per-iniziare__passo + .per-iniziare__passo {
    background-position: 8px 0;
    background-size: calc(100% - 16px) 1px;
  }

  .guida > li:target {
    padding-left: 72px;
  }

  .presentazione__comandi {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .presentazione__conto {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .presentazione__comandi > .pulsante,
  .presentazione__comandi > .presentazione__fine {
    grid-row: 2;
  }

  .presentazione__comandi .pulsante {
    width: 100%;
    height: 100%;
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .barra,
  .piede-area,
  .salta,
  form,
  .pulsante {
    display: none !important;
  }

  .impianto {
    display: block;
  }

  .contenuto {
    padding: 0;
  }
}

/* Fattura manuale e reinvio: stessa larghezza per azioni che appartengono allo stesso pagamento. */
.azioni-fattura { min-width: 19rem; }
.azioni-fattura form { margin-bottom: 12px; }
.azioni-fattura .modulo-in-linea { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; }
.azioni-fattura .pulsante { width: 100%; grid-column: 1 / -1; }
.codice-attivazione { user-select: all; }
.codice-attivazione + .pulsante { margin-inline-start: 8px; margin-block: 8px; }
.ricerca-codici-controlli > .campo__aiuto { margin: 6px 0 8px; }
.ricerca-codici-controlli > [role="status"]:empty { display: none; }
.ricerca-codici { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ricerca-codici[hidden] { display: none; }
.ricerca-codici ul { flex-basis: 100%; margin: 0; padding: 0; list-style: none; }
.ricerca-codici__voce { display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: left; border: 1px solid var(--sito-bordo); border-radius: 4px; background: #fff; color: inherit; font: inherit; cursor: pointer; overflow-wrap: anywhere; }
.ricerca-codici__voce:focus-visible { outline: 3px solid var(--sito-primario); outline-offset: 2px; }
.ricerca-codici li + li { margin-top: 4px; }
.ricerca-codici__voce:hover { text-decoration: underline; }

@media (max-width: 1399.98px) {
  .tabella--modificabile .azioni-fattura { min-width: 0; }
}