/* ============================================================
   Volta — foglio di stile unico.
   I colori non stanno qui: stanno in tokens.css.

   Criterio: bordo, riempimento, raggio e ombra si spendono per
   ruolo. Una scheda e' un oggetto (un'offerta, un pannello);
   una sezione di pagina e' solo un titolo con una riga sotto.
   ============================================================ */

* { box-sizing: border-box; }
/* lo spazio della barra di scorrimento resta sempre riservato: se la pagina si accorcia (es. «Da sempre» in Panoramica)
   la barra sparisce e tutto scivolerebbe di lato */
html { scrollbar-gutter: stable; }
/* "hidden" deve vincere anche sulle classi che impostano display */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--v-testo);
  background: var(--v-fondo);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;   /* percorsi ed email lunghe vanno a capo invece di allargare la pagina */
}

h1, h2, h3 { color: var(--v-notte); line-height: 1.25; margin: 0 0 8px; }
h1 { font-size: 26px; font-weight: 680; letter-spacing: -.018em; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.008em; }
h3 { font-size: 15px; font-weight: 650; }
p  { margin: 0 0 12px; }
a  { color: var(--v-blu); text-underline-offset: 2px; }
small, .piccolo { font-size: 13px; line-height: 1.5; }
.piccolo { color: var(--v-testo-tenue); }
.tenue { color: var(--v-testo-tenue); }
.num { font-variant-numeric: tabular-nums; }
/* codici (pratica, codice fiscale, IBAN, POD): monospazio, si leggono carattere per carattere */
.codice { font-family: var(--font-num); font-size: .92em; letter-spacing: .01em; white-space: nowrap; }
code { font-family: var(--font-num); font-size: .92em; background: var(--v-grigio-tenue); padding: 1px 5px; border-radius: 4px; }

:focus-visible { outline: 2px solid var(--v-blu); outline-offset: 2px; border-radius: 4px; }

/* ---------- barra superiore ---------- */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--v-bianco);
  border-bottom: 1px solid var(--v-linea);
}
.barra-in {
  max-width: var(--largh-max); margin: 0 auto; padding: 0 20px;
  height: var(--barra-h); display: flex; align-items: center; gap: 12px;
}
.marchio { display: flex; align-items: center; flex: 0 0 auto; }

/* navigazione a segmenti: dice dove sei senza bisogno di colore forte */
.barra-nav {
  display: flex; gap: 2px; flex: 0 1 auto; margin-right: auto; overflow-x: auto;
  background: var(--v-grigio-tenue); padding: 3px; border-radius: var(--r-btn);
  width: fit-content; scrollbar-width: none;
}
.barra-nav::-webkit-scrollbar { display: none; }
.barra-nav a {
  padding: 6px 13px; border-radius: 7px; text-decoration: none;
  color: var(--v-testo-tenue); font-size: 13.5px; font-weight: 560; white-space: nowrap;
  transition: color var(--t-breve) var(--dolce);
}
.barra-nav a:hover { color: var(--v-notte); }
.barra-nav a.attivo { background: var(--v-bianco); color: var(--v-notte); box-shadow: var(--ombra-1); }
/* con lo script, lo sfondo bianco e' una bolla sola che scivola sotto la voce indicata
   (barra in alto e interruttori a segmenti: bollaScorrevole() in ui.js) */
.con-bolla { position: relative; }
.con-bolla > a, .con-bolla > button { position: relative; z-index: 1; }
.bolla-scorre {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 7px; pointer-events: none;
  background: var(--v-bianco); box-shadow: 0 1px 3px rgba(34, 49, 75, .1);
  transition: transform var(--t-medio) var(--molla), width var(--t-medio) var(--molla), opacity var(--t-breve) var(--dolce);
}
.barra-nav.con-bolla a.attivo { background: none; box-shadow: none; color: var(--v-testo-tenue); }
.barra-nav.con-bolla a.su { color: var(--v-notte); }

.barra-dx { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.barra-nota { margin-left: auto; text-align: right; }
.barra-segnala .icona { width: 16px; height: 16px; stroke-width: 2.2; }
.barra-link .icona { width: 16px; height: 16px; stroke-width: 2; }
body:has(#pannello-link:popover-open) .barra-link { background: var(--v-blu-tenue); border-color: var(--v-blu); }

/* bolla con le iniziali: apre il menu dell'account */
.bolla {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-pill); border: 0; padding: 0; margin-left: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--v-blu); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  transition: box-shadow var(--t-breve) var(--dolce);
}
.bolla:hover { box-shadow: 0 0 0 4px var(--v-blu-bordo); }
.bolla:focus-visible { outline: none; box-shadow: var(--anello); }
.bolla--grande { width: 44px; height: 44px; margin: 0; font-size: 15px; cursor: default; }
.bolla--grande:hover { box-shadow: none; }

/* fogli: menu dell'account, pannello «Il mio link», «Come lo segnali?» (popover nativi).
   Portatile: tendina sotto la barra. Telefono: foglio dal basso (vedi il blocco responsive). */
.foglio {
  inset: auto; margin: 0; padding: 0; overflow: auto;
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity var(--t-breve) var(--dolce), transform var(--t-medio) var(--cassetto),
              overlay var(--t-medio) allow-discrete, display var(--t-medio) allow-discrete;
  top: calc(var(--barra-h) - 4px); right: max(20px, calc((100vw - var(--largh-max)) / 2 + 20px));
  width: 340px; max-height: calc(100vh - var(--barra-h) - 16px);
  background: var(--v-bianco); color: var(--v-testo); border: 1px solid var(--v-linea); border-radius: 14px;
  box-shadow: var(--ombra-3), 0 2px 6px rgba(34, 49, 75, .06);
}
.foglio:popover-open { opacity: 1; transform: none; }
@starting-style { .foglio:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
.foglio::backdrop {
  background: transparent;
  transition: background-color var(--t-lungo) var(--dolce), overlay var(--t-lungo) allow-discrete, display var(--t-lungo) allow-discrete;
}
.foglio--link { width: 380px; right: auto; padding: 12px 0 0; transform-origin: top left; }
.account-chi { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; line-height: 1.3; }
.account-chi > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-chi strong { color: var(--v-notte); font-size: 15px; }
.foglio-voci { border-top: 1px solid var(--v-linea); padding: 6px; }
.voce {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 9px;
  background: none; font: inherit; font-size: 14px; color: var(--v-notte); text-decoration: none; text-align: left; cursor: pointer;
  transition: background var(--t-breve) var(--dolce);
}
.voce:hover { background: var(--v-fondo); }
.voce .icona { width: 18px; height: 18px; stroke-width: 1.9; color: var(--v-testo-tenue); }
.voce--esci, .voce--esci .icona { color: var(--v-rosso-scuro); font-weight: 600; }
.foglio-nota { margin: 4px 12px 8px; }
.foglio--link .foglio-nota { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--v-linea); }

/* il riquadro azzurro del link personale */
.scatola-link {
  display: flex; flex-direction: column; gap: 10px; margin: 0 12px 12px; padding: 14px;
  background: var(--v-blu-tenue); border: 1px solid var(--v-blu-bordo); border-radius: 12px;
}
.scatola-link strong { color: var(--v-notte); font-size: 14px; margin-bottom: -7px; }
.scatola-link-testo { font-size: 12.5px; line-height: 1.45; color: var(--v-testo); }
.scatola-link-url {
  font-family: var(--font-num); font-size: 12px; background: var(--v-bianco); border: 1px solid var(--v-blu-bordo);
  border-radius: var(--r-input); padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.due-pulsanti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.due-pulsanti .btn { min-height: 40px; padding: 0 10px; font-size: 13.5px; gap: 6px; }
.due-pulsanti .btn .icona { width: 16px; height: 16px; stroke-width: 2; }

/* il link personale: WhatsApp, Email, Copia come la condivisione del telefono */
.tondi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.tondo {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; border: 0; border-radius: 10px; background: none;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--v-notte); text-decoration: none; text-align: center; cursor: pointer;
}
.tondo:focus-visible { outline: none; box-shadow: var(--anello); }
.tondo-ic {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--v-bianco); border: 1px solid var(--v-blu-bordo); color: var(--v-blu-scuro);
  transition: transform var(--t-medio) var(--molla), background var(--t-breve) var(--dolce), border-color var(--t-breve) var(--dolce), filter var(--t-breve) var(--dolce);
}
.tondo-ic .icona { width: 20px; height: 20px; stroke-width: 1.9; }
.tondo-ic--wa { background: var(--v-verde); border-color: var(--v-verde); color: #fff; }
.tondo:active .tondo-ic { transform: scale(.92); }
@media (hover: hover) {
  .tondo:hover .tondo-ic { border-color: var(--v-blu); }
  .tondo:hover .tondo-ic--wa { border-color: var(--v-verde); filter: brightness(.94); }
}

/* «Come lo segnali?» */
#scegli-segnala h2 { font-size: 19px; margin: 0; }
.scegli-riga { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--v-linea); border-radius: 14px; color: var(--v-notte); text-decoration: none; }
.scegli-riga > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.scegli-riga strong { font-size: 16px; }
.scegli-riga > .icona { color: var(--v-testo-tenue); width: 18px; height: 18px; }
.scegli-icona { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--v-blu-tenue); color: var(--v-blu-scuro); }
.scegli-icona .icona { width: 22px; height: 22px; stroke-width: 1.9; }
.scegli-link { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 2px solid var(--v-blu); border-radius: 14px; background: var(--v-blu-tenue); }
.scegli-link .scegli-riga { padding: 0; border: 0; }
.scegli-link .scegli-icona { background: var(--v-blu); color: #fff; }
/* sul telefono, per agente e titolare: Clienti · Segnala · Panoramica in basso, a portata di pollice */
.barra-basso { display: none; }

/* ---------- impaginazione ---------- */
.pagina { max-width: var(--largh-max); margin: 0 auto; padding-block: 26px 80px; padding-inline: 20px; }
.pagina--stretta { max-width: var(--largh-form); }
.testa-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.testa-pagina p { margin: 2px 0 0; max-width: 62ch; }
/* il titolo prende lo spazio che resta e il suo testo va a capo dentro di se': il filtro a destra non salta
   quando il sottotitolo cambia lunghezza (es. Panoramica: «Da sempre» lo accorcia) */
.testa-pagina > div:first-child { flex: 1 1 320px; min-width: 0; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.riga { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.riga--fine { justify-content: space-between; }
.spazio { flex: 1 1 auto; }

/* ---------- schede e sezioni ---------- */
.card {
  background: var(--v-bianco); border: 1px solid var(--v-linea);
  border-radius: var(--r-card); padding: 20px;
  margin-bottom: 14px;
}
.card--piatta { background: transparent; border: 0; padding: 0; }
.card-testa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: -2px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--v-linea);
  flex-wrap: wrap;
}
.card-testa h2, .card-testa h3 { margin: 0; }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 14.5px; min-height: 42px;
  padding: 10px 18px; border-radius: var(--r-btn); border: 1px solid transparent;
  background: var(--v-blu); color: #fff; cursor: pointer; text-decoration: none;
  transition: background var(--t-breve) var(--dolce), border-color var(--t-breve) var(--dolce), box-shadow var(--t-breve) var(--dolce), transform var(--t-breve) var(--dolce);
}
.btn:hover:not(:disabled) { background: var(--v-blu-scuro); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:focus-visible { outline: none; box-shadow: var(--anello); }
.btn:disabled { background: var(--v-grigio-tenue); color: var(--v-testo-tenue); cursor: not-allowed; }
.btn--secondario { background: var(--v-bianco); color: var(--v-blu); border-color: var(--v-blu-bordo); }
.btn--secondario:hover:not(:disabled) { background: var(--v-blu-tenue); border-color: var(--v-blu); }
.btn--secondario:disabled { background: var(--v-bianco); border-color: var(--v-linea); }
.btn--fantasma { background: transparent; color: var(--v-testo-tenue); border-color: var(--v-bordo-input); }
.btn--fantasma:hover:not(:disabled) { background: var(--v-grigio-tenue); color: var(--v-notte); }
.btn--pericolo { background: var(--v-rosso); }
.btn--sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.btn--lg { min-height: 50px; padding: 13px 26px; font-size: 16px; }
.btn--blocco { width: 100%; }
.link-testo { background: none; border: 0; padding: 0; font: inherit; color: var(--v-blu); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- campi ---------- */
.campo { margin-bottom: 16px; }
.campo:last-child { margin-bottom: 0; }
/* campi affiancati: lo spazio lo da' la griglia, non il campo — resta uguale anche quando vanno in colonna */
.griglia-2 > .campo { margin-bottom: 0; }
.griglia-2:has(> .campo) { margin-bottom: 16px; }
.griglia-2:has(> .campo):last-child { margin-bottom: 0; }
.campo > label, .etichetta { display: block; font-weight: 600; font-size: 13.5px; color: var(--v-notte); margin-bottom: 6px; }
.campo .aiuto { display: block; font-size: 12.5px; color: var(--v-testo-tenue); margin-top: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 15px; min-height: 44px; padding: 10px 13px;
  border: 1px solid var(--v-bordo-input); border-radius: var(--r-input);
  background: var(--v-bianco); color: var(--v-testo);
  transition: border-color var(--t-breve) var(--dolce), box-shadow var(--t-breve) var(--dolce);
}
input::placeholder { color: #A7B1C3; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--v-blu); box-shadow: var(--anello); }
input[aria-invalid=true] { border-color: var(--v-rosso); }
input[aria-invalid=true]:focus { box-shadow: 0 0 0 3px rgba(215, 92, 92, .2); }
.errore-campo { display: block; color: var(--v-rosso-scuro); font-size: 12.5px; margin-top: 5px; }
.obbl { color: var(--v-rosso); font-weight: 400; }

.spunta { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.spunta input { margin-top: 2px; accent-color: var(--v-blu); width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; }

/* ---------- schede di scelta ---------- */
.scelte { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 4px; }
.scelta {
  text-align: left; font: inherit; cursor: pointer; position: relative;
  background: var(--v-bianco); border: 1px solid var(--v-linea-forte);
  border-radius: var(--r-input); padding: 13px 15px; transition: border-color var(--t-breve) var(--dolce), background var(--t-breve) var(--dolce);
}
.scelta:hover { border-color: var(--v-blu-bordo); background: #FBFCFF; }
.scelta.selezionata { border-color: var(--v-blu); background: var(--v-blu-tenue); box-shadow: inset 0 0 0 1px var(--v-blu); }
.scelta strong { display: block; color: var(--v-notte); font-size: 14.5px; font-weight: 620; }
.scelta span { font-size: 12.5px; color: var(--v-testo-tenue); }

/* ---------- badge e chip ---------- */
/* Il pallino fa leggere lo stato anche di sfuggita, e a chi non distingue bene i colori */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.badge--blu    { background: var(--v-blu-tenue);    color: var(--v-blu); }
.badge--verde  { background: var(--v-verde-tenue);  color: var(--v-verde); }
.badge--ambra  { background: var(--v-ambra-tenue);  color: var(--v-ambra-scuro); }
.badge--rosso  { background: var(--v-rosso-tenue);  color: var(--v-rosso-scuro); }
.badge--grigio { background: var(--v-grigio-tenue); color: var(--v-grigio-stato); }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  background: var(--v-bianco); color: var(--v-testo); border: 1px solid var(--v-linea-forte);
  border-radius: var(--r-pill); font-size: 12.5px;
}

/* ---------- tabella ---------- */
.tabella-scorri { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--v-testo-tenue); font-weight: 650; padding: 0 12px 9px;
  border-bottom: 1px solid var(--v-linea-forte); white-space: nowrap;
}
.tabella td { padding: 13px 12px; border-bottom: 1px solid var(--v-linea); vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--v-blu-tenue); }
.tabella tbody tr.cliccabile { cursor: pointer; }
.tabella tr.allerta td:first-child { box-shadow: inset 3px 0 0 var(--v-rosso); }
.tabella td:first-child, .tabella th:first-child { padding-left: 4px; }

/* dati per il fornitore (back-office): l'etichetta porta con se' la fonte, il campo ha tutto lo spazio */
.tabella--dati td { padding: 9px 8px; }
.tabella--dati .dato-etichetta { width: 38%; color: var(--v-testo); font-size: 13.5px; }
.tabella--dati .dato-fonte { display: block; font-size: 12px; color: var(--v-testo-tenue); margin-top: 1px; }
.tabella--dati .dato-valore input, .tabella--dati .dato-valore select { min-height: 38px; padding: 7px 10px; font-size: 14px; }
.tabella--dati .dato-stato { width: 1%; white-space: nowrap; text-align: right; }
.tabella--dati tbody tr:hover { background: transparent; }

/* ---------- numeri in evidenza ---------- */
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.numero { background: var(--v-bianco); border: 1px solid var(--v-linea); border-radius: var(--r-card); padding: 15px 17px; }
.numero .etic { font-size: 12.5px; color: var(--v-testo-tenue); margin-bottom: 3px; }
.numero .val { font-size: 25px; font-weight: 680; color: var(--v-notte); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.numero .val--verde { color: var(--v-verde); }
.numero .sotto { font-size: 12px; color: var(--v-testo-tenue); margin-top: 2px; }

/* ---------- avanzamento ---------- */
.avanzamento { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.barre { display: flex; gap: 5px; flex: 1 1 auto; }
.barre i { height: 4px; flex: 1; background: var(--v-linea-forte); border-radius: 2px; transition: background .25s; }
.barre i.fatta { background: var(--v-blu); }
.passo-testo { font-size: 12.5px; color: var(--v-testo-tenue); white-space: nowrap; }

/* ---------- offerta: qui l'ombra e' giustificata, e' l'oggetto in vendita ---------- */
.offerta {
  display: flex; gap: 18px; align-items: flex-start;
  border: 1px solid var(--v-linea-forte); border-radius: var(--r-card);
  padding: 18px; background: var(--v-bianco); margin-bottom: 12px; width: 100%;
  text-align: left; font: inherit; cursor: pointer; transition: border-color var(--t-breve) var(--dolce), box-shadow var(--t-breve) var(--dolce);
}
.offerta:hover { border-color: var(--v-blu-bordo); box-shadow: var(--ombra-2); }
.offerta.selezionata { border-color: var(--v-blu); box-shadow: var(--ombra-2), inset 0 0 0 1px var(--v-blu); }
.offerta-logo { flex: 0 0 92px; }
.offerta-logo img { width: 92px; height: auto; display: block; }
.offerta-corpo { flex: 1 1 auto; min-width: 0; }
.offerta-nome { display: block; font-size: 17px; font-weight: 660; color: var(--v-notte); letter-spacing: -.01em; }
.offerta-prezzo { flex: 0 0 auto; text-align: right; }
.offerta-prezzo .p { font-size: 23px; font-weight: 700; color: var(--v-notte); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.offerta-prezzo .u { font-size: 12.5px; color: var(--v-testo-tenue); }
.badge-consigliata { background: var(--v-blu); color: #fff; }
.badge-consigliata i { display: none; }
.offerta .riga { gap: 6px; }
.offerta .chip { font-size: 12px; }

/* ---------- riquadri informativi ---------- */
.nota-box {
  border: 1px solid var(--v-blu-bordo); background: var(--v-blu-tenue);
  padding: 13px 15px; border-radius: var(--r-input);
  font-size: 14px; margin-bottom: 14px;
}
.nota-box--ambra { border-color: #F0DFC0; background: var(--v-ambra-tenue); color: var(--v-ambra-scuro); }
.nota-box--rosso { border-color: #F2D2D2; background: var(--v-rosso-tenue); color: var(--v-rosso-scuro); }
.nota-box--verde { border-color: #C6E7DC; background: var(--v-verde-tenue); }
.nota-box p:last-child, .nota-box ul:last-child, .nota-box ol:last-child { margin-bottom: 0; }

/* ---------- cronologia ---------- */
.cronologia { list-style: none; margin: 0; padding: 0; }
.cronologia li { position: relative; padding: 0 0 18px 20px; border-left: 1px solid var(--v-linea-forte); }
.cronologia li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cronologia li::before {
  content: ''; position: absolute; left: -4.5px; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--v-blu-chiaro); box-shadow: 0 0 0 3px var(--v-bianco);
}
.cronologia li:first-child::before { background: var(--v-blu); }
.cronologia .quando { font-size: 12.5px; color: var(--v-testo-tenue); }

/* ---------- avvisi ---------- */
.zona-avvisi { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.avviso {
  background: var(--v-notte); color: #fff; padding: 11px 16px; border-radius: var(--r-btn);
  box-shadow: var(--ombra-3); font-size: 14px; max-width: 340px;
  animation: entra var(--t-medio) var(--cassetto);
}
.avviso--errore { background: var(--v-rosso-scuro); }
.avviso--via { opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--dolce), transform 300ms var(--dolce); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::backdrop { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- accesso ---------- */
body.sfondo-accesso { background: linear-gradient(180deg, var(--v-blu-tenue), var(--v-fondo) 60%); min-height: 100vh; }
.accesso { max-width: 420px; margin: 0 auto; padding: 48px 16px 60px; }
.marchio--centro { justify-content: center; margin-bottom: 22px; }
.accesso h1 { font-size: 24px; }
.btn--google { background: var(--v-bianco); color: var(--v-notte); border-color: var(--v-bordo-input); }
.btn--google:hover:not(:disabled) { background: var(--v-grigio-tenue); }
.oppure { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-size: 12.5px; color: var(--v-testo-tenue); }
.oppure::before, .oppure::after { content: ''; flex: 1; height: 1px; background: var(--v-linea); }
.con-occhio { position: relative; }
.con-occhio input { padding-right: 84px; }
.occhio {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--v-blu); background: none; border: 0;
  padding: 6px 10px; border-radius: 6px; cursor: pointer;
}
.occhio:hover { background: var(--v-blu-tenue); }

/* ---------- home pubblica ---------- */
.passi-orizzontali { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: passo; }
.passi-orizzontali li {
  counter-increment: passo; background: var(--v-bianco); border: 1px solid var(--v-linea);
  border-radius: var(--r-card); padding: 18px 18px 18px 58px; position: relative;
}
.passi-orizzontali li::before {
  content: counter(passo); position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--v-blu); color: #fff; font-weight: 650; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.passi-orizzontali strong { display: block; color: var(--v-notte); margin-bottom: 4px; }
.passi-orizzontali span { font-size: 13.5px; color: var(--v-testo-tenue); }
.lista-spunte { list-style: none; margin: 0; padding: 0; }
.lista-spunte li { position: relative; padding: 0 0 8px 24px; font-size: 14px; }
.lista-spunte li::before {
  content: ''; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px;
  border-left: 2px solid var(--v-verde); border-bottom: 2px solid var(--v-verde); transform: rotate(-45deg);
}
.piede { max-width: var(--largh-max); margin: 0 auto; padding: 18px 20px 40px; font-size: 12.5px; color: var(--v-testo-tenue); }
.griglia-2--alto { align-items: start; }

/* ---------- cliente ---------- */
.offerta--statica { cursor: default; }
.offerta--statica:hover { border-color: var(--v-linea-forte); box-shadow: none; }
input.campo-codice {
  font-family: var(--font-num); font-size: 26px; letter-spacing: .4em; text-align: center;
  padding: 12px; min-height: 58px;
}

/* ---------- back-office ---------- */
.numeri--4 { grid-template-columns: repeat(4, 1fr); }
.numeri--5 { grid-template-columns: repeat(5, 1fr); }
button.numero--filtro { font: inherit; text-align: left; cursor: pointer; transition: border-color var(--t-breve) var(--dolce), box-shadow var(--t-breve) var(--dolce); }
button.numero--filtro:hover { border-color: var(--v-blu-bordo); box-shadow: var(--ombra-2); }
.numero .val--rosso { color: var(--v-rosso-scuro); }
textarea { resize: vertical; min-height: 64px; }
.azioni-riga { white-space: nowrap; text-align: right; }
.azioni-riga .btn { margin-left: 4px; }
.lista-semplice { list-style: none; margin: 0; padding: 0; }
.lista-semplice li { padding: 8px 0; border-top: 1px solid var(--v-linea); display: flex; flex-direction: column; }
.card--evidenza { border-color: var(--v-verde); box-shadow: 0 0 0 3px var(--v-verde-tenue); }
.elenco-modifiche { list-style: none; margin: 8px 0; padding: 0; font-size: 14px; }
.elenco-modifiche li { padding: 6px 0; border-top: 1px solid var(--v-blu-bordo); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.elenco-modifiche li:first-child { border-top: 0; }
.messaggio-pronto {
  white-space: pre-wrap; font-family: var(--font-num); font-size: 13px; background: var(--v-grigio-tenue);
  padding: 12px 14px; border-radius: var(--r-input); margin: 0 0 12px;
}

/* ---------- barra fissa mobile ---------- */
.cta-mobile { display: none; }

/* ---------- caricamento file ---------- */
.zona-file {
  border: 1.5px dashed var(--v-bordo-input); border-radius: var(--r-card);
  padding: 24px; text-align: center; background: #FBFCFE;
}
.zona-file.attiva { border-color: var(--v-blu); background: var(--v-blu-tenue); }

/* ---------- campo estratto dalla bolletta ---------- */
.estratto { display: flex; gap: 10px; align-items: center; }
.estratto input { flex: 1 1 auto; }
.fiducia { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); white-space: nowrap; }
.fiducia--alta  { background: var(--v-verde-tenue); color: var(--v-verde); }
.fiducia--media { background: var(--v-ambra-tenue); color: var(--v-ambra-scuro); }
.fiducia--bassa { background: var(--v-rosso-tenue); color: var(--v-rosso-scuro); }

/* ---------- OTP ---------- */
.otp { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }
.otp input {
  width: 48px; height: 58px; text-align: center; font-size: 22px; font-weight: 650;
  font-family: var(--font-num); padding: 0;
}

/* ---------- icone ---------- */
.icona { width: 20px; height: 20px; display: block; stroke: currentColor; fill: none;
         stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icona-cerchio {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--v-blu-tenue); color: var(--v-blu); margin-bottom: 12px;
}
.icona-successo {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--v-verde-tenue); color: var(--v-verde); margin: 0 auto 14px;
}
.icona-successo .icona { width: 26px; height: 26px; stroke-width: 2; }

/* ---------- schede ruolo (home) ---------- */
.ruoli { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ruolo {
  display: block; text-decoration: none; color: inherit;
  background: var(--v-bianco); border: 1px solid var(--v-linea); border-radius: var(--r-card);
  padding: 18px; transition: border-color var(--t-breve) var(--dolce), box-shadow var(--t-breve) var(--dolce);
}
.ruolo:hover { border-color: var(--v-blu-bordo); box-shadow: var(--ombra-2); }
.ruolo h3 { margin-bottom: 3px; }
.ruolo p { font-size: 13.5px; color: var(--v-testo-tenue); margin: 0; }

/* ---------- apertura della home ---------- */
.apertura {
  background: linear-gradient(180deg, var(--v-blu-tenue), var(--v-bianco));
  border: 1px solid var(--v-blu-bordo); border-radius: var(--r-card);
  padding: 30px; margin-bottom: 20px;
}
.apertura h1 { font-size: 30px; max-width: 18ch; }
.apertura p { max-width: 56ch; margin-bottom: 20px; }
.apertura-numeri { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v-blu-bordo); }
.apertura-numeri div { min-width: 120px; }
.apertura-numeri b { display: block; font-size: 21px; font-weight: 680; color: var(--v-notte); letter-spacing: -.02em; }
.apertura-numeri span { font-size: 12.5px; color: var(--v-testo-tenue); }

/* ---------- passi numerati ---------- */
.passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passi li { position: relative; padding: 0 0 16px 40px; counter-increment: passo; }
.passi li:last-child { padding-bottom: 0; }
.passi li::before {
  content: counter(passo); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--v-blu); color: #fff;
  font-size: 13px; font-weight: 650; display: flex; align-items: center; justify-content: center;
}

/* ---------- pannello laterale ---------- */
/* chiuso resta nella pagina ma invisibile (e non si raggiunge col Tab): cosi' puo' entrare e uscire scorrendo */
.pannello { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s linear var(--t-lungo); }
.pannello.aperto { visibility: visible; transition-delay: 0s; }
.pannello-velo { position: absolute; inset: 0; background: rgba(34, 49, 75, .3); opacity: 0; transition: opacity var(--t-lungo) var(--dolce); }
.pannello.aperto .pannello-velo { opacity: 1; }
.pannello-corpo {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 100%);
  background: var(--v-fondo); overflow-y: auto; box-shadow: var(--ombra-3); padding: 20px;
  transform: translateX(100%); transition: transform var(--t-lungo) var(--cassetto);
}
.pannello.aperto .pannello-corpo { transform: none; }
/* quando apri un cliente il contenuto arriva a cascata; quando si aggiorna da solo, no (vedi apri() in dashboard.js) */
.pannello-corpo.entra > * { animation: scheda-entra 420ms var(--cassetto) both; }
.pannello-corpo.entra > :nth-child(2) { animation-delay: 40ms; }
.pannello-corpo.entra > :nth-child(3) { animation-delay: 80ms; }
.pannello-corpo.entra > :nth-child(4) { animation-delay: 120ms; }
.pannello-corpo.entra > :nth-child(n+5) { animation-delay: 160ms; }
@keyframes scheda-entra { from { opacity: 0; transform: translateX(14px); } }

/* ---------- stato del sistema (back-office) ---------- */
.lista-stato { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lista-stato li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--v-linea); }
.lista-stato li:last-child { border-bottom: 0; }
.lista-stato .pallino { position: relative; top: -1px; }
.lista-stato li > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- pagine legali ---------- */
.testo-legale h2 { margin-top: 26px; font-size: 17px; }
.testo-legale ul { padding-left: 20px; margin: 0 0 12px; }
.testo-legale li { margin-bottom: 6px; }

/* ---------- «Scarica Volta come app»: una riga in cima, si apre solo se la tocchi ---------- */
/* si apre e si chiude scorrendo (altezza da 0 al contenuto), mai di colpo */
.si-apre { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--t-lungo) var(--cassetto), opacity var(--t-medio) var(--dolce); }
.si-apre.aperto { grid-template-rows: 1fr; opacity: 1; }
.si-apre > * { overflow: hidden; min-height: 0; }
.striscia-installa {
  display: grid; grid-template-rows: 0fr; background: var(--v-blu-tenue); box-shadow: inset 0 -1px var(--v-blu-bordo);
  transition: grid-template-rows var(--t-lungo) var(--cassetto);
}
.striscia-installa.su { grid-template-rows: 1fr; }
.striscia-installa > div { overflow: hidden; min-height: 0; }
.striscia-riga { max-width: var(--largh-max); margin: 0 auto; display: flex; align-items: center; padding: 0 8px 0 20px; }
.striscia-btn {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 8px 0 0;
  border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--v-notte); text-align: left; cursor: pointer;
}
.striscia-btn > .icona:first-child { width: 18px; height: 18px; stroke-width: 1.9; color: var(--v-blu); }
.striscia-btn > .icona:last-child:not(:first-child) { width: 16px; height: 16px; stroke-width: 2; color: var(--v-testo-tenue); transition: transform var(--t-medio) var(--molla); }
.striscia-btn[aria-expanded="true"] > .icona:last-child { transform: rotate(180deg); }
.striscia-testo { flex: 1 1 auto; }
.striscia-pill {
  font-size: 12.5px; font-weight: 650; color: #fff; background: var(--v-blu); border-radius: var(--r-pill); padding: 4px 13px;
  transition: background var(--t-breve) var(--dolce);
}
.striscia-x {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: var(--r-btn);
  color: var(--v-testo-tenue); cursor: pointer; transition: background var(--t-breve) var(--dolce), color var(--t-breve) var(--dolce);
}
.striscia-x .icona { width: 16px; height: 16px; stroke-width: 2; }
@media (hover: hover) {
  .striscia-btn:hover .striscia-pill { background: var(--v-blu-scuro); }
  .striscia-x:hover { background: var(--v-blu-bordo); color: var(--v-notte); }
}
.striscia-installa .si-apre p { max-width: var(--largh-max); margin: 0 auto; padding: 0 20px 12px 48px; font-size: 13.5px; color: var(--v-testo); }
.striscia-installa .si-apre b { color: var(--v-notte); }

/* ---------- piccole utilita' ---------- */
.centrato { text-align: center; }
.spazio-sopra { margin-top: 10px; }
.riga--centro { justify-content: center; }
.facoltativo {
  font-size: 11.5px; font-weight: 500; color: var(--v-testo-tenue);
  background: var(--v-grigio-tenue); padding: 1px 7px; border-radius: var(--r-pill); margin-left: 4px;
}
.conta {
  display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: var(--r-pill); background: var(--v-grigio-tenue); color: var(--v-testo-tenue);
  font-size: 12px; font-weight: 650; text-align: center; line-height: 20px; vertical-align: 1px;
}
.conta--rosso { background: var(--v-rosso-tenue); color: var(--v-rosso-scuro); }
.pallino { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--v-blu); display: inline-block; }
.pallino--verde  { background: var(--v-verde); }
.pallino--rosso  { background: var(--v-rosso); }
.pallino--ambra  { background: var(--v-ambra); }
.pallino--grigio { background: var(--v-grigio-stato); }

/* ---------- segnalazione in una schermata ---------- */
.testa-modulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.testa-modulo p { margin: 0; }
.con-azione { display: flex; gap: 8px; }
.con-azione input { flex: 1 1 auto; min-width: 0; }
.con-azione .btn { flex: 0 0 auto; }
.scelte--3 { grid-template-columns: repeat(3, 1fr); }
.scelte--3 .scelta { text-align: center; padding: 11px 10px; }
/* via | n.  /  citta' | CAP — come si scrive su una busta */
.griglia-indirizzo { display: grid; grid-template-columns: 1fr 96px; gap: 10px; }
.griglia-indirizzo #cap, .griglia-indirizzo [data-parte="cap"] { order: 2; }
#blocco-azienda { margin-bottom: 16px; }

/* ---------- scheda del cliente: dati con la loro fonte, file allegati ---------- */
.fonte-dato { display: block; font-size: 12px; color: var(--v-testo-tenue); margin-top: 4px; }
.fonte-dato--ok { color: var(--v-verde); font-weight: 600; }
.fonte-dato--manca { color: var(--v-ambra-scuro); }
.campo input:disabled { background: var(--v-grigio-tenue); color: var(--v-testo-tenue); cursor: not-allowed; }
.doc-gruppo { padding: 12px 0; border-top: 1px solid var(--v-linea); }
.doc-gruppo:first-of-type { border-top: 0; padding-top: 4px; }
.doc-testa { margin-bottom: 6px; }
.doc-riga { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; flex-wrap: wrap; }
.doc-info { min-width: 0; flex: 1 1 180px; }
.doc-nome { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.doc-info .piccolo { display: block; }
/* file scelti prima dell'invio (Segnala un cliente) */
.lista-file { list-style: none; margin: 10px 0 0; padding: 0; }
.lista-file li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; margin-bottom: 6px;
  border: 1px solid var(--v-linea); border-radius: var(--r-input); background: #FBFCFE; font-size: 14px; }
.lista-file .doc-nome { font-weight: 600; }
.lista-file button { flex: 0 0 auto; }

/* sezione facoltativa: chiusa, ma dice cosa contiene */
details.dettagli { padding: 0; }
details.dettagli > summary {
  list-style: none; cursor: pointer; padding: 16px 44px 16px 20px; position: relative;
  display: flex; flex-direction: column; gap: 2px;
}
details.dettagli > summary::-webkit-details-marker { display: none; }
details.dettagli > summary::after {
  content: ''; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--v-testo-tenue); border-bottom: 2px solid var(--v-testo-tenue);
  transform: rotate(45deg); transition: transform var(--t-breve) var(--dolce);
}
details.dettagli[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
details.dettagli > summary:hover strong { color: var(--v-blu); }
details.dettagli .dettagli-corpo { padding: 4px 20px 20px; border-top: 1px solid var(--v-linea); padding-top: 18px; }
details.card > summary { cursor: pointer; }

.card--invio { border-color: var(--v-blu-bordo); }
.offerta-mini { display: flex; align-items: center; gap: 14px; }
.offerta-mini img { width: 64px; height: auto; flex: 0 0 auto; }
.offerta-mini-corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.offerta-mini-corpo strong { color: var(--v-notte); font-size: 16px; }
#altre-offerte { margin: 14px 0; }
.mancano { font-size: 13px; color: var(--v-testo-tenue); margin: 10px 0 0; text-align: center; min-height: 1em; }
.mancano:empty { display: none; }
.cta-mobile .mancano { margin: 0 0 8px; }

/* ---------- i miei clienti ---------- */
input.cerca { width: 300px; }
select.filtro { width: auto; }
.btn .icona { width: 18px; height: 18px; stroke-width: 1.8; }
/* pulsante tondo con sola icona (cerca, chiama, WhatsApp, indietro): 44 px, si tocca col pollice */
.btn-icona {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto;
  min-width: 44px; height: 44px; padding: 0 11px; border-radius: 22px; border: 1px solid var(--v-blu-bordo);
  background: var(--v-bianco); color: var(--v-blu-scuro); font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-icona:hover { background: var(--v-blu-tenue); }
.btn-icona .icona { width: 20px; height: 20px; stroke-width: 1.8; }
.solo-largo { display: none; }

.testa-clienti { align-items: center; }
.testa-clienti > div:first-child { flex: 1 1 0; min-width: 0; }

.gruppo { margin-bottom: 18px; }
.gruppo-titolo {
  display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--v-testo); margin: 0 0 8px;
}
.gruppo-titolo--ambra { color: var(--v-ambra-scuro); }
.gruppo-titolo--verde { color: #0F7A5C; }
details.gruppo > summary { cursor: pointer; list-style-position: inside; }
.gruppo-elenco { background: var(--v-bianco); border: 1px solid var(--v-linea); border-radius: 14px; overflow: hidden; }
.cliente-riga {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 16px;
  font: inherit; color: var(--v-notte); text-align: left; background: var(--v-bianco); border: 0; border-top: 1px solid var(--v-linea); cursor: pointer;
  transition: background var(--t-breve) var(--dolce);
}
.cliente-riga:first-child { border-top: 0; }
.cliente-riga:hover, .cliente-riga.scelta-ora { background: var(--v-blu-tenue); }
.cliente-riga:focus-visible { outline-offset: -2px; }
.cr-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; transition: transform var(--t-medio) var(--molla); }
@media (hover: hover) { .cliente-riga:hover .cr-testo { transform: translateX(3px); } }
.cr-nome { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-frase { font-size: 13.5px; color: var(--v-testo); }
.novita-badge { font-size: 11px; font-weight: 700; color: #fff; background: var(--v-blu); border-radius: var(--r-pill); padding: 2px 7px; line-height: 1.4; }
/* le 4 tappe in piccolo */
.barretta { display: flex; gap: 3px; flex: 0 0 auto; }
.barretta i { width: 14px; height: 4px; border-radius: 2px; background: var(--v-linea-forte); }
.barretta i.fatta { background: var(--v-blu); }
.barretta i.problema { background: var(--v-rosso); }

.da-fare-card {
  background: var(--v-ambra-tenue); border: 1px solid #F1D5A8; border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px;
}
.da-fare-chi { display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; color: var(--v-notte); background: none; border: 0; padding: 0; cursor: pointer; }
.da-fare-chi strong { font-size: 17px; }
.da-fare-chi span { font-size: 14px; color: var(--v-testo); }
.due-bottoni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.due-bottoni .btn { min-height: 44px; padding-inline: 10px; }
.tutto-ok { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--v-testo); margin: 0 0 16px; }
.vuoto { text-align: center; padding: 28px 10px; color: var(--v-testo-tenue); background: var(--v-bianco); border: 1px solid var(--v-linea); border-radius: 14px; }

/* ---------- scheda del cliente ---------- */
.scheda-testa { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; }
.scheda-chiudi { border-color: transparent; color: var(--v-notte); margin-left: -8px; }
.scheda-nome { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.scheda-nome h2 { margin: 0; font-size: 19px; }
.scheda-contatti { display: flex; gap: 8px; flex: 0 0 auto; }
.banner { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--v-blu-bordo); background: var(--v-blu-tenue); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; font-size: 14px; }
.banner-titolo { font-size: 17px; color: var(--v-notte); }
.banner .nota-box, .banner .riga { margin: 8px 0 0; }
.banner .nota-box { background: var(--v-bianco); }
.banner--ambra { background: var(--v-ambra-tenue); border-color: #F1D5A8; }
.banner--verde { background: var(--v-verde-tenue); border-color: #BFE6D8; }
.banner--verde .banner-titolo { color: #0F7A5C; }
.banner--grigio { background: var(--v-grigio-tenue); border-color: var(--v-linea-forte); }
.dati-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dati-testa h3 { margin: 0; }
.dati-barra { height: 6px; border-radius: 3px; background: var(--v-linea); overflow: hidden; margin: 10px 0; }
.dati-barra i { display: block; height: 100%; background: var(--v-verde); }
.dati-riassunto { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dati-riassunto .piccolo { color: var(--v-testo); }
.evento-testo { font-size: 14px; }

.fasi { list-style: none; margin: 4px 0 0; padding: 0; }
.fasi li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 0 0 16px 26px; }
.fasi li:last-child { padding-bottom: 0; }
.fasi li::before {
  content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--v-linea-forte); background: var(--v-bianco); box-sizing: border-box;
}
.fasi li:not(:last-child)::after { content: ''; position: absolute; left: 6px; top: 19px; bottom: 1px; width: 2px; background: var(--v-linea); }
.fasi li.fatta::before { background: var(--v-blu); border-color: var(--v-blu); }
.fasi li.fatta::after { background: var(--v-blu); }
.fasi li.corrente::before { border-color: var(--v-blu); box-shadow: 0 0 0 3px var(--v-blu-tenue); }
.fasi li.problema::before { border-color: var(--v-rosso); background: var(--v-rosso); box-shadow: 0 0 0 3px var(--v-rosso-tenue); }
.fase-nome { font-weight: 600; color: var(--v-notte); font-size: 14px; }
.fasi li:not(.fatta):not(.corrente):not(.problema) .fase-nome { color: var(--v-testo-tenue); font-weight: 500; }
.fase-nota { font-size: 13px; color: var(--v-testo-tenue); text-align: right; }
.fasi li.problema .fase-nota { color: var(--v-rosso-scuro); }

/* ---------- segnala un cliente ---------- */
.segnala { max-width: 1180px; }
.testa-modulo { align-items: center; justify-content: flex-start; gap: 8px; }
.testa-modulo h1 { margin: 0; }
.testa-chiudi { display: none; border-color: transparent; color: var(--v-notte); margin-left: -8px; }
.segnala-griglia { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; }
#modulo { flex: 999 1 520px; min-width: 0; }
.segnala-lato { flex: 1 1 320px; min-width: 0; position: sticky; top: calc(var(--barra-h) + 16px); }
.segnala-lato > .card:last-child { margin-bottom: 0; }
.segnala-scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.segnala-scelte .campo { margin: 0; }
.btn-icona--quadro { border-radius: 9px; width: 46px; height: 46px; background: var(--v-blu-tenue); }
.segnala-extra { margin-bottom: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn {
  min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--v-blu-bordo); background: var(--v-bianco);
  color: var(--v-blu-scuro); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.chip-btn:hover, .chip-btn--aperto { background: var(--v-blu-tenue); }
.chip-btn:focus-visible { outline: none; box-shadow: var(--anello); }
.blocco-extra { margin: 10px 0 0; }
.segnala-extra .zona-file { margin-top: 10px; padding: 16px; font-size: 14px; color: var(--v-testo); }
.lista-file select { width: auto; min-height: 36px; padding: 4px 8px; font-size: 13.5px; flex: 0 0 auto; }
.lista-file li > span:first-child { flex: 1 1 auto; }
.card--invio .etichetta { margin-bottom: 10px; }
#quando-attivo { color: var(--v-testo); margin: 12px 0 14px; }
.cta-offerta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 8px; min-height: 32px; }
.cta-offerta strong { color: var(--v-notte); }
.mancano { color: var(--v-ambra-scuro); }
/* inviato */
.fatto-testa { text-align: center; margin: 8px 0 18px; }
.fatto-testa h1 { font-size: 22px; margin-bottom: 4px; }
.fatto-testa h1:focus { outline: none; }
.fatto-testa p { margin: 0 auto; max-width: 34ch; color: var(--v-testo); }
.manda-card { display: flex; flex-direction: column; gap: 10px; }
.bolla-wa {
  align-self: flex-end; max-width: 320px; margin: 0 0 4px; padding: 10px 12px; font-size: 14px; line-height: 1.45; color: var(--v-notte);
  background: var(--v-verde-tenue); border-radius: 14px 14px 4px 14px; overflow-wrap: anywhere;
}
.btn--whatsapp { background: #0F7A5C; }
.btn--whatsapp:hover:not(:disabled) { background: #0B6249; }
details.cosa-succede { margin: 4px 4px 18px; }
details.cosa-succede > summary {
  cursor: pointer; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--v-testo); min-height: 44px; display: flex; align-items: center;
}
details.cosa-succede .passi { margin-top: 8px; }
details.cosa-succede > summary::-webkit-details-marker { display: none; }
details.cosa-succede > summary::after { content: '▸'; margin-left: 8px; }
details.cosa-succede[open] > summary::after { content: '▾'; }
.fatto-azioni .btn { min-height: 48px; padding-inline: 10px; font-size: 15px; }

/* ---------- interruttore a segmenti (periodo, privato/azienda, trasloco) ---------- */
.segmenti { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--v-grigio-tenue); border-radius: 12px; }
.segmenti button {
  font: inherit; font-size: 14.5px; font-weight: 600; min-height: 40px; padding: 6px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--v-testo); cursor: pointer; white-space: nowrap;
  transition: color var(--t-breve) var(--dolce);
}
.segmenti button[aria-checked=true] { background: var(--v-bianco); color: var(--v-notte); box-shadow: 0 1px 2px rgba(34, 49, 75, .1); }
.segmenti > .bolla-scorre { top: 4px; bottom: 4px; border-radius: 9px; }
.segmenti.con-bolla button[aria-checked=true] { background: none; box-shadow: none; color: var(--v-testo); }
.segmenti.con-bolla button.su { color: var(--v-notte); }
.segmenti button:focus-visible { outline: none; box-shadow: var(--anello); }

/* ---------- panoramica ---------- */
.pano-griglia { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.pano-mesi { flex: 999 1 520px; min-width: 0; margin-bottom: 0; }
.pano-lato { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pano-lato .card { margin-bottom: 0; }
.pano-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pano-testa h2 { margin: 0; }
.legenda { display: flex; gap: 14px; font-size: 12.5px; color: var(--v-testo); }
.legenda span { display: flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; }
.leg-segnalati { background: #B9CCF6; }
.leg-attivi { background: var(--v-blu-scuro); }
.grafico-scorri { overflow-x: auto; }
.grafico { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(40px, 1fr); gap: 6px; align-items: end; min-height: 150px; }
.grafico-mese { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.grafico-barre { display: flex; align-items: flex-end; gap: 3px; height: 130px; border-bottom: 1px solid var(--v-linea-forte); width: 100%; justify-content: center; }
.barra-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.barra-col b { font-size: 11px; font-weight: 600; color: var(--v-testo); font-variant-numeric: tabular-nums; }
.barra-col i { display: block; width: 14px; border-radius: 3px 3px 0 0; }
.grafico-etic { font-size: 12px; color: var(--v-testo); }
.pano-mese-ora { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-top: 1px solid var(--v-linea); padding-top: 10px; margin: 12px 0 0; }
.pano-mese-ora strong { color: var(--v-notte); }
.tabella--mesi { margin-top: 18px; }
.tabella--mesi tbody tr:last-child th { border-bottom: 0; }
.tabella--mesi th[scope=row] { text-align: left; font-weight: 600; color: var(--v-notte); text-transform: capitalize; font-size: 14px; letter-spacing: 0; padding: 13px 12px 13px 4px; border-bottom: 1px solid var(--v-linea); }
/* mesi cliccabili: barra o riga apre i clienti del mese in un cassetto (sempre nella pagina, si apre con grid-template-rows) */
.grafico.con-bolla > .bolla-scorre { top: 0; bottom: 0; border-radius: 10px; background: var(--v-blu-tenue); box-shadow: none; }
.grafico-mese { font: inherit; color: inherit; background: none; border: 0; padding: 8px 0 6px; border-radius: 10px; cursor: pointer; }
.grafico-mese:focus-visible { outline: none; box-shadow: var(--anello); }
.grafico-etic { transition: color var(--t-breve) var(--dolce); }
.grafico-mese[aria-expanded=true] .grafico-etic { color: var(--v-blu-scuro); font-weight: 650; }
.pano-suggerimento { margin: 8px 0 0; transition: opacity var(--t-breve) var(--dolce); }
.pano-suggerimento.via { opacity: 0; }
.cassetto { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-lungo) var(--cassetto); }
.cassetto.aperto { grid-template-rows: 1fr; }
.cassetto > div { overflow: hidden; min-height: 0; }
.cassetto-dentro { padding: 12px 0 4px; opacity: 0; transform: translateY(-6px); transition: opacity var(--t-medio) var(--dolce), transform var(--t-lungo) var(--cassetto); }
.cassetto.aperto .cassetto-dentro { opacity: 1; transform: none; }
.tabella--mesi .riga-mese { cursor: pointer; transition: background var(--t-breve) var(--dolce); }
.tabella--mesi .riga-mese.scelta { background: var(--v-blu-tenue); }
.tabella--mesi .riga-mese.scelta > * { border-bottom-color: transparent; }
.tabella--mesi .riga-mese:nth-last-child(2):not(.scelta) > * { border-bottom: 0; }
.tabella--mesi tbody tr.riga-dettaglio:hover { background: none; }
.tabella--mesi .riga-dettaglio td { padding: 0; border-bottom-color: transparent; transition: border-color var(--t-breve) var(--dolce); }
.tabella--mesi .riga-dettaglio:has(.aperto):not(:last-child) td { border-bottom-color: var(--v-linea); }
.tabella--mesi .riga-dettaglio .cassetto-dentro { padding: 4px 4px 14px 26px; }
.cella-mese { display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; text-transform: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.cella-mese .icona { width: 16px; height: 16px; stroke-width: 2; color: var(--v-testo-tenue); transition: transform var(--t-medio) var(--molla), color var(--t-breve) var(--dolce); }
.riga-mese.scelta .cella-mese .icona { transform: rotate(90deg); color: var(--v-blu); }
.cella-num { font: inherit; color: inherit; background: none; border: 0; padding: 2px 8px; margin: -2px -8px; border-radius: var(--r-pill); cursor: pointer; transition: background var(--t-breve) var(--dolce), color var(--t-breve) var(--dolce), box-shadow var(--t-breve) var(--dolce); }
@media (hover: hover) { .cella-num:hover { background: var(--v-bianco); color: var(--v-blu-scuro); box-shadow: inset 0 0 0 1px var(--v-blu-bordo); } }
.segmenti--filtri { display: inline-grid; grid-auto-columns: auto; max-width: 100%; overflow-x: auto; margin-bottom: 6px; padding: 3px; gap: 2px; }
.segmenti--filtri button { font-size: 13px; min-height: 32px; padding: 4px 9px; }
.segmenti--filtri.con-bolla > .bolla-scorre { top: 3px; bottom: 3px; border-radius: 8px; }
.segmenti--filtri b { font-weight: 600; color: var(--v-testo-tenue); }
.mese-clienti { list-style: none; margin: 0; padding: 0; }
.mese-clienti li + li { border-top: 1px solid var(--v-linea); }
.mese-clienti.entra > li { animation: entra var(--t-medio) var(--cassetto) both; }
.mese-clienti.entra > li:nth-child(2) { animation-delay: 40ms; }
.mese-clienti.entra > li:nth-child(3) { animation-delay: 80ms; }
.mese-clienti.entra > li:nth-child(4) { animation-delay: 120ms; }
.mese-clienti.entra > li:nth-child(n+5) { animation-delay: 160ms; }
.mese-cliente { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; color: inherit; text-decoration: none; transition: background var(--t-breve) var(--dolce); }
.mese-cliente > .icona { width: 16px; height: 16px; stroke-width: 2; color: var(--v-testo-tenue); flex: 0 0 auto; transition: transform var(--t-medio) var(--molla), color var(--t-breve) var(--dolce); }
@media (hover: hover) {
  .mese-cliente:hover { background: var(--v-fondo); }
  .mese-cliente:hover > .icona { transform: translateX(3px); color: var(--v-blu); }
}
.mese-iniziali { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--v-blu-scuro); background: var(--v-blu-tenue); }
.mese-chi { flex: 1 1 auto; min-width: 0; }
.mese-chi strong { display: block; color: var(--v-notte); font-weight: 600; }
.mese-fatti { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 12.5px; color: var(--v-testo-tenue); }
.mese-euro { color: var(--v-verde); font-weight: 650; }
.mese-stato-testo { display: none; font-size: 12px; font-weight: 600; color: var(--v-testo); }
.mese-vuoto { margin: 6px 0 2px; }
@media (max-width: 860px) {
  .mese-cliente .badge { display: none; }
  .mese-stato-testo { display: block; }
}
.imbuto-riga { margin-top: 12px; font-size: 14px; }
.imbuto-barra { height: 8px; border-radius: 4px; background: var(--v-linea); overflow: hidden; margin-top: 5px; }
.imbuto-barra i { display: block; height: 100%; background: var(--v-blu); }
.link-riga { display: flex; gap: 8px; }
.link-testo-url {
  flex: 1 1 auto; min-width: 0; line-height: 42px; padding: 0 12px; font-size: 14px;
  background: var(--v-fondo); border: 1px solid var(--v-linea); border-radius: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .scelte--3 { grid-template-columns: repeat(3, 1fr); }
  .testa-pagina > .btn, .testa-pagina > .riga { width: 100%; }
  .testa-pagina > .riga .btn { flex: 1 1 auto; }
  input.cerca { width: 100%; }
  .offerta-mini { flex-wrap: wrap; }
  .griglia-2, .griglia-3, .scelte, .ruoli { grid-template-columns: 1fr; }
  .barra { position: static; }
  .barra-in { height: auto; flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .striscia-riga { padding: 0 4px 0 14px; }
  .striscia-installa .si-apre p { padding: 0 14px 12px 42px; }
  .marchio { flex: 1 1 100%; }
  .marchio:has(+ .spazio) { flex: 0 0 auto; }   /* pagine pubbliche: marchio e «Accedi» sulla stessa riga */
  /* sul telefono: prima la navigazione, poi nome e comandi su una riga sola */
  .barra-nav { order: 3; width: 100%; }
  .barra-in:has(.barra-dx) .marchio { flex: 0 0 auto; }
  .barra-dx { margin-left: auto; }
  .bolla { width: 44px; height: 44px; font-size: 15px; }
  .barra-nota { flex: 1 1 auto; text-align: left; margin-left: 0; }
  /* agente e titolare: in alto solo marchio e account, le sezioni vanno in basso */
  .barra--agente .barra-nav, .barra-segnala, .barra-link { display: none; }
  /* i fogli salgono dal basso */
  .foglio, .foglio--link {
    inset: auto 0 0 0; width: 100%; max-width: none; max-height: 90vh; border: 0; border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(34, 49, 75, .18);
    opacity: 1; transform: translateY(100%);
    transition: transform var(--t-lungo) var(--cassetto), overlay var(--t-lungo) allow-discrete, display var(--t-lungo) allow-discrete;
  }
  @starting-style { .foglio:popover-open { opacity: 1; transform: translateY(100%); } }
  .foglio:popover-open { display: flex; flex-direction: column; gap: 14px; }
  .foglio::before { content: ''; align-self: center; width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--v-linea-forte); }
  .foglio:popover-open::backdrop { background: rgba(34, 49, 75, .42); }
  @starting-style { .foglio:popover-open::backdrop { background: transparent; } }
  .account-chi { padding: 0; }
  .bolla--grande { width: 48px; height: 48px; font-size: 16px; }
  .account-chi strong { font-size: 16px; }
  .scatola-link { margin: 0; border-radius: 14px; }
  .scatola-link strong { font-size: 15px; }
  .scatola-link-testo { font-size: 13px; }
  .scatola-link-url { display: none; }   /* sul telefono non serve leggerlo: si copia o si manda */
  .due-pulsanti .btn { min-height: 48px; font-size: 15px; }
  .due-pulsanti .btn .icona { width: 18px; height: 18px; }
  .foglio-voci { padding: 4px 0 0; }
  .foglio-voci + .foglio-voci { margin-top: -14px; }
  .voce { min-height: 50px; padding: 0; font-size: 15px; border-radius: 0; }
  .voce:hover { background: none; }
  .voce .icona { width: 20px; height: 20px; }
  .foglio-nota { margin: 0 0 8px; }
  .barra-basso {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
    background: var(--v-bianco); border-top: 1px solid var(--v-linea);
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .barra-basso a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px;
    color: var(--v-testo); font-size: 12px; font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: color var(--t-breve) var(--dolce);
  }
  .barra-basso a .icona, .barra-basso-segnala { transition: transform var(--t-medio) var(--molla); }
  .barra-basso a:active .icona { transform: scale(.86); }
  .barra-basso-segnala:active { transform: scale(.95); }
  .barra-basso a.attivo { color: var(--v-blu-scuro); }
  .barra-basso .icona { width: 22px; height: 22px; stroke-width: 1.8; }
  .barra-basso-segnala {
    justify-self: center; display: flex; align-items: center; border: 0; font: inherit; cursor: pointer; flex-direction: row; gap: 6px; height: 52px; min-height: 0; padding: 0 20px; border-radius: 26px;
    background: var(--v-blu); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 6px 16px rgba(34, 49, 75, .18);
  }
  .barra-basso-segnala .icona { width: 20px; height: 20px; stroke-width: 2.2; }
  body.con-barra-basso .pagina { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.con-barra-basso .zona-avvisi { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .passi-orizzontali { grid-template-columns: 1fr; }
  /* i numeri restano a due per riga: sul telefono si vedono tutti senza scorrere */
  .numeri, .numeri--4, .numeri--5 { grid-template-columns: 1fr 1fr; gap: 8px; }
  .numero { padding: 12px 13px; }
  .numero .val { font-size: 22px; }
  .numero .etic { font-size: 12px; line-height: 1.3; }
  .card-testa > .riga, .card-testa input.cerca, .card-testa select.filtro { width: 100%; }
  .azioni-riga { white-space: normal; }
  .pagina { padding-block: 18px 96px; padding-inline: 14px; }
  .tabella-scorri { margin: 0 -14px; padding: 0 14px; }
  h1 { font-size: 22px; }
  .apertura { padding: 22px; }
  .apertura h1 { font-size: 25px; }

  .offerta { flex-wrap: wrap; gap: 12px; }
  .offerta-prezzo { text-align: left; }

  .cta-mobile {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--v-bianco); border-top: 1px solid var(--v-linea);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(34, 49, 75, .07);
  }
  .solo-desktop { display: none !important; }
}
@media (max-width: 860px) {
  /* la ricerca si apre dalla lente */
  .testa-clienti { flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
  .testa-clienti:not(.cerca-aperta) #cerca { display: none; }
  .testa-clienti #cerca { flex: 1 1 100%; }
  .scheda-testa .scheda-nome h2 { font-size: 18px; }
  /* segnala: la colonna di destra compare solo per cambiare offerta o dopo l'invio; il resto sta nel piede fisso */
  .testa-chiudi { display: inline-flex; }
  .segnala-scelte { grid-template-columns: 1fr; }
  .griglia-2--sempre { grid-template-columns: 1fr 1fr; gap: 10px; }
  .segnala-lato { display: none; position: static; }
  .segnala-lato.scegli-offerta, .segnala.inviato .segnala-lato { display: block; }
  .segnala.inviato #modulo, .segnala.inviato .testa-modulo { display: none; }
}
@media (min-width: 861px) { .solo-mobile { display: none !important; } }

/* portatile: elenco a sinistra, scheda del cliente a destra (non sopra la pagina) */
@media (min-width: 1100px) {
  .clienti-griglia.con-scheda { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .clienti-griglia .pannello { position: static; display: none; visibility: visible; transition: none; }
  .clienti-griglia.con-scheda .pannello { display: block; }
  .clienti-griglia .pannello-velo, .clienti-griglia .scheda-chiudi { display: none; }
  .clienti-griglia .pannello-corpo {
    position: sticky; top: calc(var(--barra-h) + 16px); max-height: calc(100vh - var(--barra-h) - 32px); overflow-y: auto;
    width: auto; box-shadow: none; border: 1px solid var(--v-linea); border-radius: 16px; padding: 22px;
    transform: none; transition: none; animation: scheda-entra var(--t-lungo) var(--cassetto) both;
  }
  .solo-largo { display: inline; }
  .scheda-contatti .btn-icona { padding: 0 14px; }
}

@media print {
  .barra, .barra-basso, .cta-mobile, .zona-avvisi, .no-stampa { display: none !important; }
  body { background: #fff; }
  .card { border-color: #ccc; }
}

/* ---------- diventa partner (modulo pubblico) e richieste partner (back-office) ---------- */
fieldset.card { min-width: 0; }
fieldset.card > legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-size: 16px; font-weight: 680; color: var(--v-notte); }
fieldset.card > legend + * { clear: both; }
.chip-btn[aria-pressed=true] { background: var(--v-blu-tenue); border-color: var(--v-blu); box-shadow: inset 0 0 0 1px var(--v-blu); }
.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#blocco-modulo > .nota-box { margin: 16px 0; }
.rp-griglia { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.rp-elenco { flex: 1 1 300px; min-width: 0; padding: 0; overflow: hidden; }
.rp-dettaglio { flex: 2 1 460px; min-width: 0; }
.rp-riga {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: 14px 16px; border: 0; border-bottom: 1px solid var(--v-linea); background: var(--v-bianco); color: var(--v-testo);
}
.rp-riga:last-child { border-bottom: 0; }
.rp-riga:hover { background: #FBFCFF; }
.rp-riga[aria-current=true] { background: var(--v-blu-tenue); box-shadow: inset 3px 0 0 var(--v-blu); }
.rp-riga-testa { display: flex; align-items: center; gap: 8px; width: 100%; }
.rp-riga-testa strong { flex: 1 1 auto; color: var(--v-notte); }
.rp-passi { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rp-passi li { font-size: 13px; font-weight: 600; text-align: center; padding: 8px 6px; border-radius: 8px; background: var(--v-grigio-tenue); color: var(--v-testo-tenue); }
.rp-passi li.fatto { background: var(--v-blu); color: #fff; }
.rp-contatti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 14px 16px; background: var(--v-fondo); border-radius: 10px; margin-bottom: 16px; }
.rp-contatti > div { min-width: 0; overflow-wrap: anywhere; }
.rp-persona { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 120px 40px; gap: 8px; align-items: start; margin-bottom: 8px; }
.rp-persona .errore-campo { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 640px) {
  .rp-contatti { grid-template-columns: 1fr; }
  .rp-persona { grid-template-columns: 1fr 1fr; padding-bottom: 10px; border-bottom: 1px solid var(--v-linea); }
  .rp-persona > :nth-child(3) { grid-column: 1 / -1; }
}

/* «Diventa partner»: i giorni della chiamata, giorno della settimana sopra il numero */
.segmenti--giorni button { white-space: pre-line; line-height: 1.25; padding-inline: 4px; }