/* Studio AI - interfaccia da leggere come un foglio di carta.
   Fondo chiaro, testo grande, una sola azione per riga. */
:root{--barra-bassa:64px;
  --carta:#faf9f7; --bianco:#ffffff; --inchiostro:#1c1c1a; --grigio:#585751;
  --linea:#e4e2dd; --rosso:#c8281c; --rosso-chiaro:#fdeceb; --rosso-scuro:#a81f15;
  --verde:#2f6b3c; --verde-chiaro:#eef4ee; --giallo:#8a6300; --giallo-chiaro:#fdf3e0;
}
@font-face{
  font-family:'Source Serif 4';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('/static/font/source-serif.woff2') format('woff2');
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  color-scheme:light;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  background:var(--carta);color:var(--inchiostro);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- struttura ---------- */
.app{max-width:900px;margin:0 auto;padding:0 20px 80px}
.testata{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 0;border-bottom:1px solid var(--linea);margin-bottom:34px;flex-wrap:wrap}
.logo{font-family:'Source Serif 4',Georgia,serif;font-size:20px;font-weight:700;letter-spacing:-.2px;text-decoration:none}
.logo span{color:var(--rosso)}
.menu{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.menu a{padding:8px 14px;border-radius:8px;text-decoration:none;color:var(--grigio);font-size:16px}
.menu a:hover{background:#efede8;color:var(--inchiostro)}
.menu a.on{background:var(--inchiostro);color:#fff;font-weight:600}
.menu select{font:inherit;font-size:15px;padding:8px 12px;border:1px solid var(--linea);
  border-radius:8px;background:var(--bianco);color:var(--inchiostro);max-width:230px}

h1{font-family:'Source Serif 4',Georgia,serif;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
h2{font-family:'Source Serif 4',Georgia,serif;font-size:21px;font-weight:700;margin-bottom:14px}
h3{font-size:17px;font-weight:700;margin:20px 0 8px}
.sottotitolo{color:var(--grigio);font-size:17px;margin-bottom:30px}
.piccolo{font-size:15px;color:var(--grigio)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:14px}

/* ---------- la lista delle cose da fare ---------- */
.cosa{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;
  padding:22px 24px;margin-bottom:12px;display:flex;gap:20px;align-items:center;justify-content:space-between}
.cosa .testo{flex:1;min-width:0}
.cosa .chi{font-size:15px;color:var(--grigio);margin-bottom:2px}
.cosa .titolo{font-size:19px;font-weight:700;line-height:1.35;margin-bottom:4px}
.cosa .dettaglio{font-size:15.5px;color:var(--grigio)}
.cosa.urgente{border-left:4px solid var(--rosso)}
.cosa.totale-ritenute{border-left:4px solid var(--inchiostro);background:#f7f6f2}
.cosa.totale-ritenute .titolo{font-size:18px}
@media(max-width:640px){.cosa{flex-direction:column;align-items:stretch;gap:14px}
  .cosa .btn-pieno{width:100%;text-align:center}}

.finito{background:var(--verde-chiaro);border:1px solid #cfe0d2;border-radius:12px;
  padding:30px;text-align:center;font-size:19px;color:var(--verde);font-weight:600}

/* ---------- bottoni ---------- */
.btn-pieno,.btn-linea{font:inherit;font-size:16px;font-weight:600;padding:12px 22px;border-radius:8px;
  cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-block;white-space:nowrap}
.btn-pieno{background:var(--inchiostro);color:#fff}
.btn-pieno:hover{background:#3a3a36}
.btn-linea{background:var(--bianco);border-color:var(--linea);color:var(--inchiostro)}
.btn-linea:hover{background:#f1efea}
.btn-piccolo{font-size:14.5px;padding:8px 14px}
.link{color:var(--rosso);text-decoration:none;font-weight:600}

/* ---------- riquadri e tabelle ---------- */
.pannello{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:24px;margin-bottom:18px}
table{width:100%;border-collapse:collapse}
table.righe th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--grigio);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--linea)}
table td{padding:14px 10px;border-bottom:1px solid var(--linea);vertical-align:middle;font-size:16px}
tr:last-child td{border-bottom:none}
.numero{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.data{font-variant-numeric:tabular-nums;color:var(--grigio);white-space:nowrap}
.azioni-cella{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.tag{display:inline-block;padding:4px 11px;border-radius:999px;font-size:13.5px;font-weight:600;
  background:#f0eee9;color:var(--grigio);white-space:nowrap;max-width:100%}
@media(max-width:640px){.tag{white-space:normal}}
.tag.da_inviare,.tag.mancante,.tag.da_verificare,.tag.fattura_mancante,.tag.da_rispondere,.tag.nuova,
.tag.aperta,.tag.foto,.tag.scansione,.tag.foglio_rifatto{background:var(--rosso-chiaro);color:var(--rosso)}
.tag.inviato,.tag.originale_richiesto,.tag.fattura_richiesta,.tag.standby,.tag.attesa_cliente,
.tag.email_pronta,.tag.avvisato{background:var(--giallo-chiaro);color:var(--giallo)}
.tag.confermato,.tag.ricevuto,.tag.originale_ok,.tag.originale,.tag.inviata_sdi,.tag.risposto,
.tag.inviata,.tag.chiusa{background:var(--verde-chiaro);color:var(--verde)}
.tag.scaduto{background:var(--rosso-chiaro);color:var(--rosso)}

/* ---------- posta e normativa ---------- */
.posta,.norma{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:22px;margin-bottom:14px}
.posta.risposto,.norma.inviata,.norma.archiviata{background:var(--carta)}
.posta-testa{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:8px}
@media(max-width:640px){.posta-testa{flex-wrap:wrap;gap:6px}}
.posta-testa .piccolo{display:block}
.sintesi{color:var(--grigio);font-size:16px}
.bozza{background:var(--carta);border:1px solid var(--linea);border-left:3px solid var(--inchiostro);
  border-radius:0 10px 10px 0;padding:16px 18px;margin:14px 0}
.bozza .etichetta{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio);font-weight:700}
.bozza p{margin-top:8px;font-size:16px;white-space:pre-line;line-height:1.65}
.grande-bozza{max-width:68ch}
.azioni{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.barra-stato{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:13px 16px;
  font-size:15px;color:var(--grigio);margin:0 0 20px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;line-height:1.5}
.grande-numero{font-size:34px;font-weight:800;margin:6px 0 8px}
.elenco{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15.5px;color:var(--grigio)}
.elenco b{color:var(--inchiostro);text-transform:capitalize;margin-right:6px}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-bottom:22px}
.scheda{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:18px;text-decoration:none;display:block}
.scheda b{display:block;font-size:19px;font-weight:700;line-height:1.25;hyphens:auto;margin-bottom:2px}
.scheda span{font-size:14.5px;color:var(--grigio)}
.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.due-colonne{grid-template-columns:1fr}}

/* ---------- moduli ---------- */
.form{display:flex;flex-direction:column;gap:16px;max-width:520px}
.form.griglia{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:100%}
.form.griglia > *{min-width:0}
@media(max-width:640px){.form.griglia{grid-template-columns:minmax(0,1fr)}}
.form.griglia button{grid-column:1/-1;justify-self:start}
label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--grigio)}
input,select,textarea{font:inherit;font-size:17px;padding:13px 15px;border-radius:8px;max-width:100%;
  border:1px solid var(--linea);background:var(--bianco);color:var(--inchiostro)}
input:focus,select:focus{outline:2px solid var(--inchiostro);outline-offset:-2px;border-color:transparent}

.messaggio{background:var(--verde-chiaro);border:1px solid #cfe0d2;color:var(--verde);
  padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:16px}
.messaggio.errore{background:var(--rosso-chiaro);border-color:#f3c9c6;color:var(--rosso)}

/* ---------- accesso ---------- */
.accesso{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.riquadro{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:38px;
  width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px}
.claim{color:var(--grigio);font-size:17px;margin-bottom:4px}
.separatore{text-align:center;color:var(--grigio);font-size:14px;position:relative;margin:8px 0}
.separatore::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--linea)}
.separatore span{background:var(--bianco);padding:0 12px;position:relative}
.registrazione summary{cursor:pointer;font-size:15px;color:var(--grigio);padding:8px 0}
.grande{padding:16px 26px;font-size:18px;width:100%;text-align:center}

/* ---------- aiuto ---------- */
.bolla-aiuto{position:fixed;right:20px;bottom:20px;z-index:40;background:var(--inchiostro);color:#fff;
  border:none;border-radius:999px;padding:14px 24px;font:inherit;font-size:16px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 14px rgba(0,0,0,.12)}
.pannello-aiuto{position:fixed;right:20px;bottom:82px;width:min(400px,calc(100vw - 40px));background:var(--bianco);
  border:1px solid var(--linea);border-radius:16px;padding:18px;display:none;flex-direction:column;gap:12px;z-index:41;
  box-shadow:0 8px 40px rgba(0,0,0,.10)}
.pannello-aiuto.aperto{display:flex}
.aiuto-testa{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chiudi{background:none;border:none;color:var(--grigio);font-size:24px;cursor:pointer;line-height:1;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.aiuto-conversazione{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow:auto}
.messaggio-aiuto{padding:12px 14px;border-radius:12px;font-size:15.5px;line-height:1.55;white-space:pre-line}
.messaggio-aiuto.tool{background:var(--carta);border:1px solid var(--linea)}
.messaggio-aiuto.mio{background:var(--inchiostro);color:#fff;align-self:flex-end;max-width:85%}
.giudizio{display:flex;gap:8px;align-items:center;margin-top:10px;font-size:14px;color:var(--grigio)}
.giudizio button{font:inherit;font-size:14px;background:var(--bianco);border:1px solid var(--linea);
  color:var(--inchiostro);border-radius:8px;padding:9px 14px;min-height:40px;cursor:pointer}
.aiuto-form{display:flex;gap:8px}
.aiuto-form input{flex:1;min-width:0;font-size:16px;padding:11px 13px}
.aiuto-form button{flex:0 0 auto;white-space:nowrap;padding:11px 12px}
.recap{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:18px;
  font-family:ui-monospace,Menlo,monospace;font-size:14px;line-height:1.7;white-space:pre-wrap;overflow-x:auto;margin-bottom:14px}

/* ---------- primo avvio ---------- */
.avvio{max-width:640px;margin:20px auto}
.avvio h1{font-size:30px}
.passi{font-size:14px;color:var(--grigio);font-weight:600;margin-bottom:12px}
.grande-testo{font-size:17.5px}
.avvio-form{max-width:100%;gap:18px;margin-top:26px}
.avvio-form input,.avvio-form select{font-size:18px;padding:15px 16px}
.scelta{flex-direction:row;align-items:flex-start;gap:14px;background:var(--bianco);border:1px solid var(--linea);
  border-radius:12px;padding:18px 20px;cursor:pointer}
.scelta:hover{border-color:var(--inchiostro)}
.scelta input{width:22px;height:22px;margin-top:2px;accent-color:var(--inchiostro);flex:none}
.scelta span{display:flex;flex-direction:column;gap:5px;color:var(--inchiostro);font-size:17px}
.scelta .piccolo{font-size:15px}

/* ---- gruppi della schermata Oggi ---- */
.gruppo{margin-bottom:38px}
.gruppo-testa{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--inchiostro);flex-wrap:wrap}
.gruppo-testa h2{margin-bottom:2px}
.gruppo .cosa{margin-bottom:8px;padding:18px 22px}
.gruppo .cosa .titolo{font-size:18px}

@media(max-width:640px){
  .bolla-aiuto{padding:12px 18px;min-height:44px;font-size:15px;right:14px;bottom:14px}
  .pannello-aiuto{right:14px;bottom:70px}
  .app{padding-bottom:110px}
  h1{font-size:27px}
  .testata{padding:16px 0;margin-bottom:24px}
  .gruppo-testa{flex-direction:column;gap:10px}
  .gruppo-testa form,.gruppo-testa .btn-pieno{width:100%}
  .gruppo-testa button{width:100%}
}

.riga-cliente{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linea)}
.riga-cliente:last-child{border-bottom:none}
.riga-cliente b{font-weight:600}
@media(max-width:640px){.riga-cliente{flex-direction:column;align-items:stretch;gap:10px}
  .riga-cliente form,.riga-cliente .btn-pieno,.riga-cliente .btn-linea{width:100%;text-align:center}}
.cosa.fatta{background:var(--carta)}

/* ---- collegamento casella ---- */
.provider-scelta{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.provider{font:inherit;font-size:16px;font-weight:600;padding:16px 18px;border:1px solid var(--linea);
  background:var(--bianco);border-radius:12px;cursor:pointer;text-align:left;color:var(--inchiostro)}
.provider:hover{border-color:var(--inchiostro)}
.provider.scelto{border-color:var(--inchiostro);border-width:2px;background:#f4f2ed}
.stato-collegato{display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:var(--verde-chiaro);border:1px solid #cfe0d2;border-radius:12px;padding:18px 20px;flex-wrap:wrap}
.griglia-due{display:grid;grid-template-columns:2fr 1fr;gap:14px}

/* ---- regole ---- */
.regola-testa{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.regola-testa h2{margin-bottom:0}
.interruttore{flex-direction:row;align-items:center;gap:10px;font-size:16px;color:var(--inchiostro);cursor:pointer}
.interruttore input{width:22px;height:22px;accent-color:var(--inchiostro)}
.regola-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px}
@media(max-width:640px){.griglia-due{grid-template-columns:1fr}}

/* ================= pagina pubblica (la prima che si vede) ================= */
.pagina-pubblica{max-width:820px;margin:0 auto;padding:0 20px 70px}
.testata-pubblica{display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--linea);margin-bottom:52px}

.apertura{text-align:center;margin-bottom:56px}
.apertura h1{font-size:clamp(28px,4.4vw,40px);line-height:1.22;letter-spacing:-.7px;margin-bottom:20px}
.apertura-testo{font-size:18px;color:var(--grigio);max-width:640px;margin:0 auto 30px;line-height:1.65}
.apertura-lead{font-size:18px;color:var(--grigio);max-width:640px;margin:0 auto 22px;line-height:1.55}
.apertura-testo b{color:var(--inchiostro)}
.apertura .grande,.chiusura .grande{max-width:420px;margin:0 auto}
.sotto-bottone{font-size:15px;color:var(--grigio);margin-top:14px}

.etichetta-sezione{text-align:center;font-size:14px;color:var(--grigio);margin-bottom:14px}
.anteprima{margin-bottom:58px}
.finestra{border:1px solid var(--linea);border-radius:16px;overflow:hidden;background:var(--bianco);
  box-shadow:0 18px 50px rgba(0,0,0,.07)}
.finestra-barra{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid var(--linea);background:#f3f1ec}
.finestra-barra span{width:11px;height:11px;border-radius:50%;background:#d9d5cd}
.finestra-dentro{padding:22px}
.finta-titolo{font-size:22px;font-weight:800;margin-bottom:16px}
.finta-cosa{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border:1px solid var(--linea);border-radius:12px;padding:14px 16px;margin-bottom:9px}
.finta-chi{font-size:14.5px;color:var(--grigio)}
.finta-cosa-titolo{font-size:16.5px;font-weight:700;margin:2px 0}
.finto-bottone{font-size:13.5px;font-weight:600;border:1px solid var(--linea);border-radius:8px;
  padding:8px 14px;white-space:nowrap}
.finto-bottone.scuro{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}

.cosa-fa,.tre-passi,.rassicurazioni,.chiusura{margin-bottom:58px}
.cosa-fa h2,.tre-passi h2,.chiusura h2{text-align:center;font-size:24px;margin-bottom:26px}
.elenco-cose{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.elenco-cose>div{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:20px}
.elenco-cose b{display:block;font-size:17px;margin-bottom:6px}
.elenco-cose span{font-size:15.5px;color:var(--grigio);line-height:1.6}

.tre-passi ol{list-style:none;counter-reset:passo;display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
.tre-passi li{counter-increment:passo;display:flex;gap:16px;align-items:flex-start;
  background:var(--bianco);border:1px solid var(--linea);border-radius:12px;padding:18px 20px}
.tre-passi li>div{flex:1;min-width:0}
.tre-passi li::before{content:counter(passo);flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  background:var(--inchiostro);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.tre-passi b{display:block;font-size:17px;margin-bottom:4px}
.tre-passi span{font-size:15.5px;color:var(--grigio)}

.rassicurazioni{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 28px}
@media(max-width:640px){.rassicurazioni{grid-template-columns:1fr}}
.rassicurazioni>div{border-left:3px solid var(--inchiostro);padding-left:16px}
.rassicurazioni b{display:block;font-size:16px;margin-bottom:4px}
.rassicurazioni span{font-size:15px;color:var(--grigio)}

.chiusura{text-align:center}
.entra{max-width:460px;margin:34px auto 0;text-align:left}
.entra details{border-top:1px solid var(--linea);padding:14px 0}
.entra summary{cursor:pointer;font-size:16px;color:var(--grigio)}
.entra details[open] summary{color:var(--inchiostro);font-weight:600;margin-bottom:14px}
.piede{text-align:center;font-size:15px;color:var(--grigio);padding-top:24px;border-top:1px solid var(--linea)}
@media(max-width:640px){
  .finta-cosa{flex-direction:column;align-items:flex-start;gap:10px}
  .apertura{margin-bottom:44px}
}
.sotto-titolo-sezione{text-align:center;font-size:16px;color:var(--grigio);margin:-16px 0 24px}
.cosa-non-fa{margin-bottom:58px}
.cosa-non-fa h2{text-align:center;font-size:24px;margin-bottom:26px}
.cosa-non-fa .elenco-cose>div{background:transparent;border-style:dashed}


/* ---- accessibilità: si vede sempre dove sei con la tastiera ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,.provider:focus-visible{
  outline:3px solid var(--inchiostro);outline-offset:2px;border-radius:8px}
.salta-al-contenuto{position:absolute;left:-9999px;top:0;background:var(--inchiostro);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;z-index:100;font-weight:600}
.salta-al-contenuto:focus{left:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.aiuto-campo{font-size:14px;color:var(--grigio);margin-top:2px}
.prossimi-passi{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.prossimi-passi p{width:100%;margin-bottom:2px}

/* ---- messaggio con annulla ---- */
.messaggio{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.annulla-form{margin:0}
.btn-annulla{font:inherit;font-size:14.5px;font-weight:600;background:transparent;border:1px solid currentColor;
  color:inherit;border-radius:8px;padding:10px 16px;min-height:40px;cursor:pointer;opacity:.85}
.btn-annulla:hover{opacity:1}

.cerca{width:100%;max-width:min(420px,100%);margin-bottom:18px;font-size:17px;padding:13px 16px}

/* ---- anteprime: si legge tutto prima di mandare ---- */
.riga-intestazione { display:flex; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--linea); }
.riga-intestazione .etichetta { color:var(--grigio); font-size:13px; min-width:64px; }
.riga-intestazione b { min-width:0; overflow-wrap:anywhere; }   /* un indirizzo lungo non sborda dal telefono (10/09/2026) */
.riga-intestazione .chi { color:var(--grigio); font-size:13px; margin-left:auto; }
.etichetta-campo { display:block; margin:16px 0 6px; color:var(--grigio); font-size:13px; }
.campo-testo { width:100%; padding:14px; border:1px solid var(--linea); border-radius:12px;
  font:inherit; line-height:1.6; background:var(--bianco); resize:vertical; }
.campo-testo:focus { outline:2px solid var(--inchiostro); outline-offset:1px; }
.titolo-sezione { margin:28px 0 10px; font-size:18px; }
.documento-testa { display:flex; flex-direction:column; gap:2px; margin-bottom:10px; min-width:0; overflow-wrap:anywhere; }
.foglio h1,.foglio-testa,.tabella-documento td { overflow-wrap:anywhere; }
.documento-testa span { color:var(--grigio); font-size:13px; }
.tabella-documento { width:100%; border-collapse:collapse; }
.tabella-documento td { padding:8px 0; border-bottom:1px solid var(--linea); vertical-align:top; }
.tabella-documento td:first-child { color:var(--grigio); width:45%; }
.nota-documento { color:var(--grigio); font-size:14px; margin-top:10px; }
.controllo summary { cursor:pointer; }
.controllo[open] summary { margin-bottom:12px; }
.dettaglio-email summary { cursor:pointer; color:var(--grigio); font-size:14px; margin-top:10px; }
.azioni-anteprima { margin-top:24px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.azioni-anteprima-cima { margin: 12px 0 20px; }
.azioni-anteprima:not(.azioni-anteprima-cima) {
  position: sticky;
  bottom: 12px;
  z-index: 6;
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* ---- collegamento della casella: due bottoni e basta ---- */
.scelta-casella { display:flex; gap:12px; flex-wrap:wrap; }
.scelta-casella .btn-pieno { text-decoration:none; text-align:center; }
.altra-strada { margin-top:20px; }
.altra-strada summary { cursor:pointer; color:var(--grigio); font-size:15px; }

/* ---- barra laterale con icone, come i gestionali che gli studi già usano ---- */
.app { display:flex; align-items:stretch; gap:0; max-width:none; padding:0; }
.barra { width:104px; flex:0 0 104px; border-right:1px solid var(--linea); background:var(--bianco);
  display:flex; flex-direction:column; align-items:stretch; padding:18px 8px 14px; position:sticky; top:0;
  height:100vh; }
.barra .logo { text-align:center; font-weight:800; font-size:20px; text-decoration:none; margin-bottom:22px; }
.barra .menu { display:flex; flex-direction:column; gap:4px; }
.barra .voce { display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px;
  border-radius:12px; text-decoration:none; color:var(--grigio); font-size:13px; line-height:1.2;
  text-align:center; position:relative; }
.barra .voce svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.barra .voce:hover { background:var(--carta); color:var(--inchiostro); }
.barra .voce.on { background:var(--inchiostro); color:var(--bianco); }
.barra .esci { margin-top:auto; }
.pallino { position:absolute; top:8px; right:14px; width:10px; height:10px; border-radius:50%;
  background:var(--linea); }
.pallino.acceso { background:var(--verde); }
.app > main { flex:1; min-width:0; max-width:920px; padding:28px 24px 80px; margin:0 auto; }
/* ---- console admin: stesso guscio, contenuto piu' largo perche' sono tabelle, non un testo da leggere ---- */
.app-admin > main { max-width:1240px; }
.barra-admin .logo { display:flex; flex-direction:column; align-items:center; gap:3px; }
.etichetta-admin { font-family:-apple-system,'Segoe UI',system-ui,sans-serif; font-size:12px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rosso);
  background:var(--rosso-chiaro); border-radius:6px; padding:1px 6px; }
.menu-separatore { height:1px; background:var(--linea); margin:8px 6px; }
.voce-secondaria { color:var(--grigio); }
.voce-secondaria:hover { opacity:1; }
@media (max-width:760px){ .menu-separatore{ display:none } }

@media (max-width:760px){
  .app { flex-direction:column; width:100%; max-width:100%; min-width:0; }
  .barra { width:auto; flex:none; height:var(--barra-bassa); position:fixed; bottom:0; left:0; right:0; top:auto;
    flex-direction:row; justify-content:space-around; border-right:0; border-top:1px solid var(--linea);
    padding:6px 4px; z-index:40; }
  .barra .logo { display:none; }
  .barra .menu { flex-direction:row; flex-wrap:nowrap; gap:2px; flex:1; min-width:0;
    justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; }
  .barra .menu .voce { flex:0 0 66px; min-height:48px; }
  .barra .esci { margin-top:0; }
  .barra .voce { font-size:12px; padding:6px 8px; }
  .app > main { padding:20px 16px 96px; width:100%; max-width:100%; min-width:0; }
}

@media (max-width:760px){
  /* La barra in basso e' alta --barra-bassa: la bolla dell'aiuto parte da li', cosi' non puo'
     coprire le voci del menu nemmeno se domani si aggiunge una voce. */
  .bolla-aiuto { bottom:calc(var(--barra-bassa) + 14px); right:14px; padding:10px 16px; font-size:14px; }
  .pannello-aiuto { bottom:calc(var(--barra-bassa) + 14px); }
  /* su schermo stretto l'uscita sta nelle impostazioni, non nella barra */
  .barra .esci { display:none; }
  .app > main { padding-bottom:calc(var(--barra-bassa) + 32px); }
  /* Nei pagamenti e nella verifica delle scadenze l'aiuto non copre campi e conferme. */
  .app-pagamento > main, .app-verifica > main { padding-bottom:16px; }
  .app ~ .bolla-aiuto { position:static; display:block;
    width:calc(100% - 32px); margin:0 16px calc(var(--barra-bassa) + 16px); }
}

/* Sotto i 430px le sei voci non ci stanno in una riga con l'etichetta intera: si stringe il passo
   e "Registro invii" diventa "Registro". Meglio una parola in meno che una riga in piu'. */
@media (max-width:430px){
  .barra .voce { font-size:11px; padding:6px 3px; gap:3px; }
  .barra .voce svg { width:20px; height:20px; }
  .parola-lunga { display:none; }
}

/* ---- prezzo in chiaro sulla landing ---- */
.firma-apertura { margin-top:14px; color:var(--grigio); font-size:15px; max-width:640px; }
.prezzo-sezione { padding:56px 0; text-align:center; }
.cartellino { display:inline-block; text-align:left; border:1px solid var(--linea); border-radius:16px;
  background:var(--bianco); padding:28px 32px; }
.prezzo-grande { font-family:'Source Serif 4',Georgia,serif;font-size:clamp(38px,4.6vw,50px); font-weight:700; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.prezzo-nota { color:var(--grigio); margin-top:4px; text-align:center; }
.prezzo-elenco { margin:18px 0 0; padding-left:20px; color:var(--inchiostro); }
.prezzo-elenco li { margin:6px 0; }

/* ---- pastiglie di rassicurazione, tempi di avvio, domande frequenti ---- */
.pastiglie { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding:0; }
.pastiglie li { border:1px solid var(--linea); border-radius:999px; padding:6px 14px; font-size:14px;
  color:var(--grigio); background:var(--bianco); }
.tempi { list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; }
.tempi li { display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:baseline;
  border-top:1px solid var(--linea); padding-top:14px; }
.tempi b { font-size:19px; }
.tempi span { color:var(--grigio); }
.domande { padding:56px 0; }
.domande details { border-top:1px solid var(--linea); padding:16px 0; }
.domande summary { cursor:pointer; font-weight:600; }
.domande p { color:var(--grigio); margin-top:10px; max-width:70ch; }
@media (max-width:700px){ .tempi li { grid-template-columns:1fr; gap:4px; } }
.rete-sicurezza { margin-top:22px; color:var(--grigio); font-size:15px; max-width:70ch; }

/* ---- accessibilità: bordi visibili, messa a fuoco chiara, etichette per i lettori di schermo ---- */
.solo-lettori { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* i bottoni si toccano bene anche col dito */
.btn-pieno, .btn-linea { min-height:44px; display:inline-flex; align-items:center;
  justify-content:center; }
/* le voci della barra prendono solo l'altezza minima: il loro display resta quello di .barra .voce
   (riga 342). Prima questa regola diceva anche display:inline-flex e, arrivando DOPO la media query
   del telefono, rimetteva in piedi l'"Esci" che li' deve sparire: la barra andava a due righe
   (120px invece di 64) e la bolla di SofIA finiva sopra "Scadenze" e "Registro invii".
   Trovato il 09/09/2026 misurando i rettangoli a 375px, non a occhio. */
.barra .voce { min-height:44px; align-items:center; justify-content:center; flex-direction:column; }

/* ---- il foglio dell'allegato, come lo riceve il cliente ---- */
.foglio { background:var(--bianco); border:1px solid var(--linea); border-radius:16px; padding:34px 36px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
.foglio-testa { display:flex; flex-direction:column; gap:2px; padding-bottom:18px; margin-bottom:18px;
  border-bottom:2px solid var(--inchiostro); }
.foglio-testa span { color:var(--grigio); font-size:14px; }
.foglio-piede { margin-top:24px; padding-top:14px; border-top:1px solid var(--linea);
  color:var(--grigio); font-size:13px; }
.torna { margin-bottom:10px; }
@media print { .barra, .azioni, .avviso-demo, .bolla-aiuto, .torna { display:none !important; }
  .foglio { border:0; box-shadow:none; padding:0; } }

/* ---- accessibilità: pensata per chi ha 60 anni e non vede benissimo ---- */
:root{--bordo-campo:#8e887e}          /* contrasto 3.5:1, a norma WCAG per i controlli */
input,select,textarea{border-color:var(--bordo-campo)}
.btn-linea{border-color:var(--bordo-campo)}
.btn-piccolo{padding:11px 16px;font-size:15px}     /* area cliccabile piena, non microscopica */
.menu a{padding:10px 14px}
.altri-dati{grid-column:1/-1;border-top:1px solid var(--linea);padding-top:14px}
.altri-dati summary{cursor:pointer;font-size:15px;color:var(--grigio);padding:6px 0}
.altri-dati[open] summary{color:var(--inchiostro);font-weight:600}
.mostra-pw{flex-direction:row;align-items:center;gap:9px;font-size:15px;color:var(--grigio);cursor:pointer}
.mostra-pw input{width:20px;height:20px;accent-color:var(--inchiostro)}

/* Aree da toccare piu' grandi: dita e schermi piccoli non perdonano (WCAG 2.5.5) */
.link, .menu a, .piccolo a, .riga-cliente a:not(.btn-pieno):not(.btn-linea){
  display:inline-block; padding:8px 2px; min-height:24px;
}
@media(pointer:coarse){
  .link, .menu a, .piccolo a{ padding:12px 4px; min-height:44px; line-height:20px }
}

.codice-recupero{font-family:ui-monospace,Menlo,monospace;font-size:30px;font-weight:700;
  letter-spacing:2px;margin:10px 0;word-break:break-all}

/* ---------- il modello F24 disegnato ---------- */
.f24{border:1px solid #c9d3e0;border-radius:8px;background:#fff;overflow:hidden;margin:4px 0 14px;
  font-size:15px}
.f24-testa{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 16px;
  background:#eef3f9;border-bottom:1px solid #c9d3e0}
.f24-sigla{font-weight:800;letter-spacing:.06em;font-size:15px}
.f24-nome{color:#4a5566;font-size:14px;flex:1}
.f24-scadenza{font-size:14px;font-weight:700;color:var(--inchiostro)}
.f24-blocco{border-bottom:1px solid #e4e8ee}
.f24-blocco-titolo{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#6b7686;
  padding:9px 16px 0}
.f24-contribuente{display:flex;flex-direction:column;gap:2px;padding:4px 16px 14px}
.f24-contribuente b{font-size:16px}
.f24-contribuente span{font-size:14px;color:var(--grigio)}
.f24-tabella{width:100%;border-collapse:collapse;margin:6px 0 12px}
.f24-tabella th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:#6b7686;
  font-weight:600;text-align:left;padding:6px 16px;border-bottom:1px solid #e4e8ee;line-height:1.3}
.f24-tabella td{padding:10px 16px;border-bottom:1px solid #f0f2f5;font-size:15px}
.f24-tabella tr:last-child td{border-bottom:none}
.f24-codice{font-weight:700}
.f24-tabella .col-stretta{width:82px;text-align:center}
.f24-tabella .col-importo{width:150px;text-align:right}
.f24-saldo{display:flex;justify-content:space-between;align-items:baseline;padding:13px 16px;
  background:#eef3f9;font-size:15px}
.f24-saldo span{text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:#4a5566;font-weight:600}
.f24-saldo b{font-size:20px}
.f24-nota{font-size:13.5px;color:var(--grigio);padding:0 16px 12px}
.f24-nota.attenzione{color:var(--rosso);font-weight:600}

/* ---------- il file che ha mandato il cliente ---------- */
.file-cliente{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:4px 0 14px}
.finto-file{flex:0 0 auto}
.scatto{width:190px;height:135px;background:#f1efe9;border:1px solid var(--linea);border-radius:4px;
  padding:16px 14px;transform:rotate(-3.5deg);box-shadow:0 4px 14px rgba(0,0,0,.10);position:relative;overflow:hidden}
.scatto.dritto{transform:none}
.scatto-riga{height:7px;background:#cfcbc2;border-radius:4px;margin-bottom:9px;width:70%;filter:blur(1.1px)}
.scatto-riga.lunga{width:92%}
.scatto-riga.corta{width:45%}
.scatto-ombra{position:absolute;inset:0;background:linear-gradient(115deg,rgba(0,0,0,.16),transparent 45%)}
.finto-foglio{width:210px;border:1px solid var(--linea);border-radius:4px;background:#fff;overflow:hidden}
.finto-foglio-riga{display:grid;grid-template-columns:1fr 1.4fr 1fr;font-size:11px;color:var(--grigio)}
.finto-foglio-riga span{padding:6px 7px;border-bottom:1px solid #eee;border-right:1px solid #eee}
.finto-foglio-riga.vuota span{height:26px}
.file-didascalia{font-size:13.5px;color:var(--grigio);margin-top:10px;max-width:230px;line-height:1.5}
.file-dati{flex:1;min-width:180px}
.dati-allegato{margin-top:10px}
.dati-allegato summary{cursor:pointer;font-size:14.5px;color:var(--grigio);padding:6px 0}
@media(max-width:640px){.f24-tabella th,.f24-tabella td{padding:8px 10px;font-size:14px}
  .f24-tabella .col-stretta{width:58px}.f24-tabella .col-importo{width:110px}}

/* ---------- autofattura e circolare disegnate ---------- */
.documento-carta{border:1px solid var(--linea);border-radius:8px;background:#fff;overflow:hidden;margin:4px 0 14px}
.carta-testa{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;
  background:#f4f2ee;border-bottom:1px solid var(--linea)}
.carta-tipo{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:13px}
.carta-stato{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--giallo);
  background:var(--giallo-chiaro);border-radius:999px;padding:3px 10px;font-weight:700}
.carta-corpo{padding:12px 16px}
.carta-riga{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px}
.carta-riga span{color:var(--grigio)}
.carta-importi{width:100%;border-collapse:collapse;border-top:1px solid var(--linea)}
.carta-importi td{padding:10px 16px;font-size:15px;border-bottom:1px solid #f0eee9}
.carta-importi td:last-child{text-align:right}
.carta-importi .carta-totale td{font-weight:800;font-size:17px;background:#f4f2ee;border-bottom:none}
.carta-piede{font-size:13px;color:var(--grigio);padding:11px 16px;line-height:1.5}
.lettera{padding:26px 28px}
.lettera-intestazione{font-weight:800;font-size:15px;border-bottom:2px solid var(--inchiostro);
  padding-bottom:8px;margin-bottom:18px}
.lettera-titolo{font-size:18px;font-weight:700;line-height:1.35;margin-bottom:3px}
.lettera-fonte{font-size:13.5px;color:var(--grigio);margin-bottom:14px}
.lettera-corpo{font-size:15.5px;line-height:1.7;white-space:pre-line}
.lettera-chiusura{font-size:15.5px;margin-top:14px;color:var(--grigio)}
.promemoria-dati{border-top:none;margin-top:12px}
.promemoria-dati td{padding:9px 0;border-bottom:1px solid #f0eee9}
.promemoria-dati td:first-child{color:var(--grigio);width:45%}
.promemoria-dati td:last-child{text-align:left}
.f24-scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}
.f24-scorri .f24-tabella{min-width:520px}
@media(max-width:640px){
  .f24-scorri .f24-tabella{min-width:460px}
  .file-cliente{gap:14px}
  .documento-carta .carta-riga{flex-direction:column;gap:2px}
  .documento-carta .carta-riga b{font-size:15px}
}


/* ===== passo 1: critica progettuale (gerarchia) ===== */
/* Il banner della prova non deve essere la prima cosa che si vede.
   Unica definizione (10/09/2026): prima ce n'erano tre e le prime due non si applicavano mai. */
.avviso-demo{display:flex;min-width:0;max-width:100%;
  background:transparent;border:none;border-bottom:1px solid var(--linea);border-radius:0;
  color:var(--grigio);font-size:14px;padding:10px 0;margin-bottom:22px;
  flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.avviso-demo .scorciatoie{display:flex;flex-wrap:wrap;align-items:center;gap:14px;min-width:0;max-width:100%}
.avviso-demo .scorciatoie a,.avviso-demo .scorciatoie button{font:inherit;font-size:13.5px;color:var(--grigio);
  text-decoration:underline;text-underline-offset:3px;background:none;border:none;padding:0;cursor:pointer}
.avviso-demo .scorciatoie a:hover,.avviso-demo .scorciatoie button:hover{color:var(--inchiostro)}
@media(max-width:640px){.avviso-demo{flex-direction:column;align-items:flex-start;gap:8px}
  /* sul telefono il banner occupava 300 px di schermo: il bottone rosso resta, ma compatto e in riga */
  .avviso-demo .scorciatoie{width:100%;gap:12px}
  .avviso-demo .scorciatoie a.btn-demo-attiva{padding:8px 12px;font-size:14px;min-height:40px;white-space:normal}}

/* Da dove si comincia si vede, non si spiega. */
.cosa.da-qui{border-color:var(--inchiostro);box-shadow:0 1px 0 var(--inchiostro)}

/* Il titolo della pagina resta il piu' forte: il filetto dei gruppi si alleggerisce. */
.gruppo-testa{border-bottom:1px solid var(--linea)}
.gruppo-testa h2{font-size:19px}

/* Il cliente e' l'ancora della riga: si legge prima dell'oggetto. */
.cosa .chi{font-size:15.5px;color:var(--inchiostro);font-weight:600;margin-bottom:1px}
.cosa .titolo{font-weight:600}

/* Barra laterale: etichette leggibili e bersagli veri (44px). */
.barra a,.barra .voce{min-height:44px}


/* ===== passo 2: UX (una sola azione primaria, feedback all'invio) ===== */
.attesa-invio{opacity:.6;pointer-events:none}

/* ===== passo 3: qualita' visiva =====
   Preso dalla scuola "premium" solo cio' che serve a chi legge:
   scala tipografica coerente, profondita' misurata, movimenti brevi e naturali.
   Scartati vetro, fondo nero e animazioni scenografiche: qui si lavora, non si guarda. */

:root{
  --curva:cubic-bezier(.32,.72,0,1);
  --ombra-appoggio:0 1px 2px rgba(28,28,26,.04), 0 8px 24px -12px rgba(28,28,26,.10);
  --ombra-rilievo:0 1px 2px rgba(28,28,26,.05), 0 14px 34px -14px rgba(28,28,26,.16);
}

/* Scala tipografica: 15 / 17 / 19 / 22 / 28 / 34, tracciatura stretta solo sui titoli. */
h1{font-size:34px;letter-spacing:-.022em;line-height:1.18}
h2{font-size:22px;letter-spacing:-.012em}
.cosa .titolo{font-size:19px;letter-spacing:-.006em}
.sottotitolo{font-size:17px;max-width:64ch}

/* Le schede si appoggiano al foglio, non ci sono incollate. */
.cosa,.pannello,.posta,.norma{box-shadow:var(--ombra-appoggio);transition:box-shadow .22s var(--curva),transform .22s var(--curva),border-color .22s var(--curva)}
.cosa:hover{box-shadow:var(--ombra-rilievo)}
.cosa.da-qui{box-shadow:var(--ombra-rilievo);border-color:var(--inchiostro)}

/* Il bottone risponde al dito: si abbassa appena, senza spostare nulla intorno. */
.btn-pieno,.btn-linea{transition:background-color .18s var(--curva),color .18s var(--curva),
  border-color .18s var(--curva),transform .12s var(--curva),box-shadow .18s var(--curva)}
.btn-pieno:active,.btn-linea:active{transform:scale(.985)}

/* Respiro tra i gruppi: si capisce dove finisce una cosa e inizia l'altra. */
.gruppo{margin-bottom:46px}
.gruppo-testa{padding-bottom:14px;margin-bottom:16px}
main{padding-top:4px}

/* Chi non vuole movimento non lo subisce. */
@media (prefers-reduced-motion: reduce){
  .cosa,.pannello,.posta,.norma,.btn-pieno,.btn-linea{transition:none}
  .btn-pieno:active,.btn-linea:active{transform:none}
}

/* ===== passo 4: leggibilita' prima dello stile =====
   Le intestazioni in maiuscoletto stretto sono un vezzo grafico: per chi legge
   con gli occhiali sono le righe piu' faticose della pagina. Testo normale. */
table.righe th{text-transform:none;letter-spacing:0;font-size:14px;color:var(--grigio);font-weight:600}

/* ===== passo 7: accessibilita' =====
   Contrasto, etichette e nomi erano gia' a posto. Restavano collegamenti
   troppo bassi da centrare col dito: nessuno sotto i 44px. */
.avviso-demo .scorciatoie a,.avviso-demo .scorciatoie button{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
a.link{display:inline-flex;align-items:center;min-height:44px}
p a.link,.dettaglio a.link,.piccolo a.link{min-height:0;display:inline}  /* dentro una frase resta testo */
/* Dentro una frase il link non ha margini ai lati: prima lasciava uno spazio prima della
   punteggiatura («Email .», «OneDrive .»). L'area verticale da toccare resta (25/09/2026). */
:is(p, li, .dettaglio, .piccolo, .sottotitolo, .messaggio, .barra-stato) a.link:not(.btn-pieno):not(.btn-linea),
:is(p, li) > .piccolo a { padding-left: 0; padding-right: 0; }
/* Negli avvisi il link sta dentro una frase: niente altezza minima, altrimenti la riga si allarga. */
:is(.messaggio, .barra-stato) a.link:not(.btn-pieno):not(.btn-linea) { display: inline; min-height: 0; }

/* ===== passo 8: conversione ===== */
.seconda-strada{margin-top:14px;font-size:15.5px;color:var(--grigio)}

/* ===== come scrive lo studio ===== */
.logo-riga{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;margin-top:16px}
.logo-riga > *{min-width:0;max-width:100%}
.logo-attuale{border:1px solid var(--linea);border-radius:12px;padding:12px;background:var(--carta)}
.logo-attuale img{max-height:70px;max-width:220px;display:block}
.logo-bozza{max-height:46px;margin-bottom:12px}
textarea{width:100%;font:inherit;font-size:16px;line-height:1.6;resize:vertical}

/* ===== revisione landing: header, prezzo, footer ===== */
.testata-pubblica{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--carta) 92%, transparent);
  backdrop-filter:blur(8px);display:flex;align-items:center;gap:26px;
  padding:14px 6vw;border-bottom:1px solid var(--linea)}
.testata-pubblica .logo{margin-right:auto}
.menu-pubblico{display:flex;gap:22px;align-items:center}
.menu-pubblico a{color:var(--inchiostro);text-decoration:none;font-size:15px;font-weight:600;white-space:nowrap;
  padding:10px 2px;border-bottom:2px solid transparent}
.menu-pubblico a:hover{border-bottom-color:var(--rosso)}
.btn-testata{padding:11px 22px;font-size:15px;white-space:nowrap}
.apri-menu{display:none;background:none;border:1px solid var(--linea);border-radius:8px;
  font-size:20px;padding:6px 12px;cursor:pointer;color:var(--inchiostro)}
@media(max-width:900px){
  .menu-pubblico{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carta);
    border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;padding:8px 6vw 16px;gap:0}
  .menu-pubblico.aperto{display:flex}
  .menu-pubblico a{padding:13px 2px;border-bottom:1px solid var(--linea);font-size:16px}
  .apri-menu{display:block}
}

/* Il cartellino del prezzo diventa il punto dove si compra. */
.prezzo-sezione .cartellino{max-width:560px;margin:0 auto;background:var(--bianco);
  border:1px solid var(--linea);border-radius:16px;padding:34px 36px;box-shadow:var(--ombra-rilievo)}
.prezzo-piccolo{font-size:15px;color:var(--grigio);text-align:center;margin-bottom:2px}
.prezzo-grande{text-align:center}
.prezzo-elenco.spunte{list-style:none;padding:0;margin:22px 0}
.prezzo-elenco.spunte li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--linea);font-size:15.5px}
.prezzo-elenco.spunte li:last-child{border-bottom:none}
.prezzo-elenco.spunte li::before{content:"";position:absolute;left:2px;top:14px;width:14px;height:8px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.btn-cartellino{display:block;text-align:center;margin-top:6px}
.prezzo-garanzia{font-size:13.5px;color:var(--grigio);text-align:center;margin-top:12px}

/* Footer da azienda, non da esperimento. */
.piede{border-top:1px solid var(--linea);padding:40px 6vw 30px;font-size:14.5px}
.piede-colonne{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1000px;margin:0 auto 26px}
.piede-colonne p{color:var(--grigio);margin-top:8px;max-width:36ch}
.piede-titolo{font-weight:700;color:var(--inchiostro) !important;margin-bottom:4px}
.piede-colonne a{display:block;color:var(--grigio);text-decoration:none;padding:5px 0}
@media(pointer:coarse){.piede-colonne a{padding:11px 0;min-height:44px}}   /* bersaglio da 44 px sul telefono (10/09/2026) */
.piede-colonne a:hover{color:var(--rosso)}
.piede-riga{max-width:1000px;margin:0 auto;color:var(--grigio);font-size:13px;
  border-top:1px solid var(--linea);padding-top:18px}
@media(max-width:700px){.piede-colonne{grid-template-columns:1fr}}

/* Le ancore atterrano sotto l'header fisso, non nascoste dietro. */
.pagina-pubblica [id]{scroll-margin-top:86px}

/* ===== revisione landing, secondo giro: pagina larga da software company ===== */
.pagina-pubblica{max-width:1180px}
.pagina-pubblica.pagina-stretta{max-width:760px}
.testo-lungo h2{font-size:20px;margin:28px 0 8px}
.testo-lungo p{margin-bottom:10px;color:var(--inchiostro)}

/* Hero a due colonne: promessa a sinistra, prodotto a destra. */
.apertura-larga{text-align:left;margin-bottom:64px}
.apertura-colonne{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,9fr);gap:56px;align-items:center}
.apertura-larga h1{font-size:clamp(30px,3.4vw,46px)}
.apertura-larga .apertura-testo{margin:0 0 28px}
.apertura-larga .apertura-lead{margin:0 0 20px;max-width:none}
.apertura-larga .grande{margin:0;max-width:none;display:inline-block;padding-left:34px;padding-right:34px}
.apertura-larga .sotto-bottone,.apertura-larga .argomenti{text-align:left;justify-content:flex-start}
.apertura-dx .etichetta-sezione{margin-bottom:10px}
.apertura-dx .finestra{box-shadow:var(--ombra-rilievo)}
@media(max-width:960px){
  .apertura-colonne{grid-template-columns:1fr;gap:30px}
  .apertura-larga{text-align:center}
  .apertura-larga .apertura-testo{margin:0 auto 26px}
  .apertura-larga .apertura-lead{margin:0 auto 18px}
  .apertura-larga .sotto-bottone,.apertura-larga .argomenti{text-align:center;justify-content:center}
}

/* Le sezioni interne respirano sulla larghezza nuova. */
.cosa-fa .griglia,.griglia-cose{max-width:1100px}
.piede-legale{font-size:12.5px}
.piede-legale a{color:var(--grigio)}

/* ===== pagine di ingresso: la card di registrazione, non la tendina ===== */
.pagina-ingresso{max-width:1040px}
.ingresso-colonne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;
  align-items:start;padding:44px 0 70px}
.ingresso-valore h1{font-size:clamp(26px,3vw,36px);margin-bottom:22px}
.ingresso-punti{list-style:none;padding:0;margin:0 0 22px}
.ingresso-punti li{padding:9px 0 9px 30px;position:relative;font-size:16.5px}
.ingresso-punti li::before{content:"";position:absolute;left:2px;top:16px;width:14px;height:8px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.ingresso-card{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;
  padding:34px 36px;box-shadow:var(--ombra-rilievo)}
.ingresso-card h2{margin-bottom:4px}
.ingresso-card .form{margin-top:18px}
.ingresso-card .btn-pieno{width:100%;text-align:center;margin-top:6px}
.ingresso-cambio{font-size:14.5px;color:var(--grigio);margin-top:14px;text-align:center}
@media(max-width:860px){
  .ingresso-colonne{grid-template-columns:1fr;gap:26px;padding-top:20px}
  .ingresso-valore{order:2}
  .ingresso-card{padding:26px 20px}
}

/* ===== card di registrazione: campi affiancati, robustezza, consenso ===== */
.campi-affiancati{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.campi-affiancati{grid-template-columns:1fr}}
.facoltativo{font-size:12.5px;color:var(--grigio);font-weight:400}
.robustezza{display:block;height:4px;background:var(--linea);border-radius:99px;margin-top:8px;overflow:hidden}
.robustezza span{display:block;height:100%;width:0;border-radius:99px;transition:width .25s ease}
.consenso{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:14px 0 4px}
.consenso input{margin-top:3px;width:18px;height:18px;flex-shrink:0}
.riga-fiducia{font-size:13px;color:var(--grigio);text-align:center;margin-top:12px}

/* ===== flusso registrazione: riepilogo e codice con la stessa card ===== */
.riepilogo-dati{margin:18px 0}
.riepilogo-dati div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--linea)}
.riepilogo-dati div:last-child{border-bottom:none}
.riepilogo-dati dt{color:var(--grigio);font-size:14.5px;white-space:nowrap}
.riepilogo-dati dd{font-weight:600;text-align:right;font-size:14.5px}
.cosa-succede{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.cosa-succede .elenco-passi{margin:8px 0 0;padding-left:20px}
.cosa-succede li{margin-top:6px;font-size:14.5px}
.scatola-codice{background:var(--carta);border:1px dashed var(--grigio);border-radius:12px;
  padding:18px;text-align:center;margin:18px 0}
.codice-recupero{font-family:ui-monospace,monospace;font-size:26px;font-weight:700;letter-spacing:2px;margin:6px 0}

.tabella-scorri{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabella-scorri table{min-width:520px}

/* ===== primi passi: la checklist di avvio con le spunte vere ===== */
.primi-passi{margin-bottom:26px}
.primi-passi h2{display:flex;justify-content:space-between;align-items:baseline;font-size:18px;margin-bottom:12px}
.passi-avvio{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:640px){.passi-avvio{grid-template-columns:1fr}}
.passo-avvio{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--linea);
  border-radius:12px;text-decoration:none;color:var(--inchiostro);font-size:15px;font-weight:600;background:var(--carta)}
.passo-avvio:hover{border-color:var(--inchiostro)}
.passo-avvio .spunta{width:18px;height:18px;border:2px solid var(--grigio);border-radius:50%;flex-shrink:0;position:relative}
.passo-avvio.fatto{color:var(--grigio);font-weight:500;text-decoration:line-through}
.passo-avvio.fatto .spunta{border-color:var(--verde);background:var(--verde-chiaro)}
.passo-avvio.fatto .spunta::after{content:"";position:absolute;left:4px;top:3px;width:7px;height:4px;
  border-left:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:rotate(-45deg)}

/* ===== ritmo della landing: un respiro solo per tutte le sezioni ===== */
.pagina-pubblica main > section{margin:0 0 84px}
.pagina-pubblica main > section:last-child{margin-bottom:56px}
.pagina-pubblica .prezzo-sezione{padding:0}

/* Le domande: colonna leggibile, righe con il piu', risposte rientrate */
.domande{max-width:820px;margin-left:auto !important;margin-right:auto !important}
.domande h2{text-align:center;margin-bottom:22px}
.domande details{border-top:1px solid var(--linea);padding:0}
.domande details:last-of-type{border-bottom:1px solid var(--linea)}
.domande summary{list-style:none;cursor:pointer;font-weight:600;font-size:17px;
  padding:18px 34px 18px 0;position:relative}
.domande summary::-webkit-details-marker{display:none}
.domande summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400;color:var(--grigio);transition:transform .18s var(--curva)}
.domande details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.domande details p{padding:0 34px 18px 0;color:var(--grigio);max-width:64ch}

/* Il finale: una banda scura che chiude la pagina, non un titolo sperso */
.chiusura{background:var(--inchiostro);color:var(--carta);border-radius:20px;
  padding:56px 24px;text-align:center}
.chiusura h2{color:var(--carta)}
.chiusura .sotto-titolo-sezione{color:color-mix(in srgb, var(--carta) 75%, transparent)}
.chiusura .btn-pieno{background:var(--carta);color:var(--inchiostro)}
.chiusura .btn-pieno:hover{background:#fff}
.chiusura .seconda-strada{color:color-mix(in srgb, var(--carta) 70%, transparent)}
.chiusura .seconda-strada .link{color:var(--carta)}

/* Titoli di sezione uniformi */
.cosa-fa h2,.tre-passi h2,.rassicurazioni h2,.cosa-non-fa h2,.prezzo-sezione h2{text-align:center;margin-bottom:22px}

/* ===== le anteprime del tool si dichiarano: sono immagini, non bottoni ===== */
.finestra{cursor:default;user-select:none}
.finestra *{pointer-events:none}
.finestra-barra{position:relative}
.finestra-tag{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:11.5px;letter-spacing:.02em;color:var(--grigio);
  background:var(--carta);border:1px solid var(--linea);border-radius:999px;padding:3px 10px}
.finto-bottone{cursor:default}

/* ===== ritmo unico anche dentro il tool e nelle pagine di testo ===== */
.pannello{margin-bottom:24px}
.pannello:last-child{margin-bottom:0}
.testo-lungo h2{margin:34px 0 10px}
.testo-lungo h1{margin-bottom:6px}
.testo-lungo .sottotitolo{margin-bottom:26px}
.kpi{gap:12px;margin-bottom:26px}


.cta-di-mezzo{text-align:center;margin-top:26px}
.cta-di-mezzo .btn-pieno{display:inline-block;padding-left:30px;padding-right:30px}
.prima-dopo h2,.per-chi h2{text-align:center;margin-bottom:22px}

/* ===== per chi e', per chi no ===== */
.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:0 auto}
@media(max-width:720px){.due-colonne{grid-template-columns:1fr}}
.colonna-si,.colonna-no{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:24px 26px}
.colonna-si{border-top:3px solid var(--verde)}
.colonna-no{border-top:3px solid var(--grigio)}
.colonna-si h3,.colonna-no h3{font-size:17px;margin-bottom:10px}
.due-colonne ul{list-style:none;padding:0;margin:0}
.due-colonne li{padding:8px 0 8px 26px;position:relative;font-size:15.5px;border-bottom:1px solid var(--linea)}
.due-colonne li:last-child{border-bottom:none}
.colonna-si li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
.colonna-no li::before{content:"\00d7";position:absolute;left:2px;top:6px;color:var(--grigio);font-size:18px}

/* ===== pagina degli errori: dentro il brand, con una via d'uscita utile ===== */
.errore-pubblico{text-align:center;padding:70px 0 90px}
.codice-errore{font-size:15px;font-weight:700;letter-spacing:.12em;color:var(--rosso);margin-bottom:8px}
.errore-azioni{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== card registrazione: i tre difetti visti da Davide ===== */
.consenso{flex-direction:row !important;align-items:flex-start}
.campi-affiancati label{min-width:0;justify-content:flex-end}
.sotto-campo{margin-top:6px;display:block;line-height:1.45}
.campi-affiancati .sotto-campo{min-height:0}
.campi-affiancati input{width:100%;min-width:0}
.facoltativo{font-style:normal}
.robustezza{display:none;height:3px}

/* ===== giro avvocato del diavolo (council 01/09 sera): tipografia e rosso misurato ===== */
.pagina-pubblica .cosa-fa h2,.pagina-pubblica .tre-passi h2,.pagina-pubblica .cosa-non-fa h2,
.pagina-pubblica .prima-dopo h2,.pagina-pubblica .per-chi h2,.pagina-pubblica .prezzo-sezione h2,
.pagina-pubblica .domande h2,.pagina-pubblica .chiusura h2,.pagina-pubblica .rassicurazioni h2{font-size:clamp(24px,2.6vw,32px)}
.apertura-larga h1{font-size:clamp(34px,3.4vw,52px);font-weight:560;line-height:1.08;text-wrap:balance;margin-bottom:16px}
.pagina-pubblica .apertura-larga .btn-pieno.grande,.btn-cartellino.btn-pieno{background:var(--rosso)}
.pagina-pubblica .apertura-larga .btn-pieno.grande:hover,.btn-cartellino.btn-pieno:hover{background:var(--rosso-scuro)}
.fascia-numeri b{font-variant-numeric:tabular-nums}
::selection{background:var(--rosso-chiaro)}

/* ===== giro di mercato (01/09 notte): pattern dai migliori, adattati al brand ===== */
/* Cornice del prodotto: screenshot vero con l'ombra alla Stripe scaldata sull'inchiostro */
.cornice-prodotto{margin:0;background:var(--bianco);border:1px solid #e7e4dd;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 60px -12px rgba(28,28,26,.18),0 18px 36px -18px rgba(28,28,26,.22)}
.cornice-prodotto .finestra-barra{display:flex;gap:6px;align-items:center;background:#f3f1ec;
  border-bottom:1px solid #e7e4dd;padding:11px 14px}
.cornice-prodotto .finestra-barra span{width:10px;height:10px;border-radius:50%;background:#dcd8d0;display:block}
.cornice-prodotto img,.cornice-prodotto video{display:block;width:100%;height:auto;background:#f3f0ea}
.cornice-prodotto figcaption{font-size:13px;color:var(--grigio);padding:10px 14px;border-top:1px solid var(--linea);background:var(--carta)}
.apertura-dx{background:linear-gradient(160deg,#f1efe9,#e8e5dd);border-radius:20px;padding:26px 22px;position:relative}
.apertura-dx::before{content:"";position:absolute;inset:-24px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,40,28,.05),transparent)}

/* Etichetta di sezione: filo rosso editoriale, usata con parsimonia */
.etichetta-sezione{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rosso);margin-bottom:12px}
.etichetta-sezione.centro{text-align:center}

/* Fascia dei numeri: cifre in serif, fonte dichiarata sotto */
.fascia-numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 84px;
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:34px 0}
.fascia-numeri div{padding:0 22px;border-left:1px solid var(--linea)}
.fascia-numeri div:first-child{border-left:none}
.fascia-numeri b{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:clamp(30px,2.6vw,40px);
  font-weight:600;color:var(--rosso);font-variant-numeric:tabular-nums lining-nums;margin-bottom:6px;line-height:1}
.fascia-numeri span{display:block;font-size:14.5px;line-height:1.5;margin-bottom:8px}
.fascia-numeri em{display:block;font-style:normal;font-size:12.5px;color:var(--grigio)}
@media(max-width:820px){.fascia-numeri{grid-template-columns:1fr}.fascia-numeri div{border-left:none;padding:14px 0;border-top:1px solid var(--linea)}.fascia-numeri div:first-child{border-top:none}}

/* Il motto a tre tempi: una riga sola, grande, in serif */
.motto{text-align:center;margin:0 0 84px}
.motto p{font-family:'Source Serif 4',Georgia,serif;font-size:clamp(26px,3vw,38px);font-weight:600;
  line-height:1.25;letter-spacing:-.01em;max-width:18ch;margin:0 auto}

/* Prima/dopo a due colonne: il prima spento, il dopo col filo rosso */
.confronto-split{display:grid;grid-template-columns:1fr 1fr;max-width:1000px;margin:0 auto;
  border:1px solid #e7e4dd;border-radius:12px;overflow:hidden;background:var(--bianco);box-shadow:var(--ombra-appoggio)}
.lato-prima{background:#f3f1ec;padding:28px 30px}
.lato-dopo{background:var(--bianco);padding:28px 30px;box-shadow:inset 4px 0 0 var(--rosso)}
.confronto-split h3{font-size:16px;margin-bottom:14px}
.lato-prima h3{color:var(--grigio)}
.confronto-split ul{list-style:none;margin:0;padding:0}
.confronto-split li{padding:12px 0 12px 30px;position:relative;font-size:15.5px;border-top:1px solid var(--linea);line-height:1.5}
.lato-prima li{color:var(--grigio)}
.lato-prima li::before{content:"\00d7";position:absolute;left:4px;top:10px;font-size:18px;color:var(--grigio)}
.lato-dopo li{font-weight:500}
.lato-dopo li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:7px;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);transform:rotate(-45deg)}
@media(max-width:720px){.confronto-split{grid-template-columns:1fr}.lato-dopo{box-shadow:inset 0 4px 0 var(--rosso)}}

/* La sezione sulla legge: colonne editoriali su fondo bianco */
.legge{background:var(--bianco);border:1px solid var(--linea);border-radius:20px;padding:56px clamp(24px,5vw,72px)}
.legge h2{margin-bottom:22px;max-width:26ch}
.legge-colonne{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.legge-colonne p{font-size:16.5px;line-height:1.65;color:var(--inchiostro)}
@media(max-width:820px){.legge-colonne{grid-template-columns:1fr;gap:16px}}

/* Card quiete: bordo protagonista, ombra sussurrata, alzata di 2px al passaggio */
.elenco-cose>div{transition:transform .3s ease-out,box-shadow .3s ease-out}
.elenco-cose>div:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(28,28,26,.08)}

/* CTA: alzata e ombra rossa al passaggio, focus alla Stripe */
.btn-pieno{transition:background .2s ease-out,transform .2s ease-out,box-shadow .2s ease-out}
.btn-pieno:hover{transform:translateY(-1px)}
.pagina-pubblica .apertura-larga .btn-pieno.grande:hover,.btn-cartellino.btn-pieno:hover{box-shadow:0 6px 16px rgba(200,40,28,.25)}

/* Ritmo verticale piu' arioso sui grandi schermi */
.pagina-pubblica main > section{margin-bottom:clamp(72px,9vw,110px)}
.fascia-numeri,.motto{margin-bottom:clamp(72px,9vw,110px)}

@media(prefers-reduced-motion:reduce){.elenco-cose>div,.btn-pieno{transition:none}}

/* ===== ritocchi dopo la QA visiva del giro di mercato ===== */
/* Sei mestieri, sei card: tre per riga, senza buchi */
.cosa-fa .elenco-cose{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cosa-fa .elenco-cose{grid-template-columns:1fr}}
/* Il motto respira su una colonna piu' larga */
.motto p{max-width:none}
/* I tre passi: card affiancate, numero sopra, testo a tutta larghezza */
.pagina-pubblica .tempi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1000px;margin-left:auto;margin-right:auto}
.pagina-pubblica .tempi li{display:block;background:var(--bianco);border:1px solid var(--linea);border-radius:12px;
  padding:24px 26px;border-top:1px solid var(--linea);counter-increment:passo}
.pagina-pubblica .tempi li::before{content:counter(passo);position:static;display:inline-flex;width:30px;height:30px;
  border-radius:50%;background:var(--inchiostro);color:var(--carta);align-items:center;justify-content:center;
  font-weight:700;font-size:14.5px;margin-bottom:12px}
.pagina-pubblica .tempi{counter-reset:passo}
.pagina-pubblica .tempi b{display:block;margin-bottom:6px}
.pagina-pubblica .tempi span{display:block;line-height:1.55}
@media(max-width:820px){.pagina-pubblica .tempi{grid-template-columns:1fr}}

/* Niente scorrimento orizzontale, mai */
html,body{overflow-x:clip}

/* Testata su telefono: tutto dentro lo schermo */
@media(max-width:520px){
  .testata-pubblica{gap:8px;padding:12px 12px}
  .btn-testata{padding:10px 10px;font-size:13.5px}
  .testata-pubblica .logo{font-size:16px}
  .apri-menu{padding:6px 9px;font-size:18px}
}

/* Card d'ingresso: la CTA primaria e' rossa come nel resto del sito, i link del consenso scorrono nel testo */
.ingresso-card .btn-pieno{background:var(--rosso)}
.ingresso-card .btn-pieno:hover{background:var(--rosso-scuro);box-shadow:0 6px 16px rgba(200,40,28,.25)}
.consenso .link{display:inline;padding:0}

/* ===== secondo giro di critica: coerenza finale ===== */
/* Una sola CTA piena, un solo colore: rossa su tutta la parte pubblica */
.pagina-pubblica .btn-pieno{background:var(--rosso)}
.pagina-pubblica .btn-pieno:hover{background:var(--rosso-scuro)}
.pagina-pubblica .chiusura .btn-pieno{background:var(--carta);color:var(--inchiostro)}
.pagina-pubblica .chiusura .btn-pieno:hover{background:#fff}
/* Una sola scala per i titoli di sezione */
.pagina-pubblica main h2{font-size:clamp(24px,2.6vw,32px)}
.apertura-larga h1{font-weight:600}
/* La riga sulla carta, sotto le CTA di registrazione */
.nota-carta{text-align:center;font-size:13px;color:var(--grigio);margin-top:10px}

/* ===== campo password: occhietto dentro il campo + requisiti rosso/verde ===== */
.campo-password{position:relative;display:block}
.campo-password input{width:100%;padding-right:52px}
.occhio{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;
  cursor:pointer;color:var(--grigio);padding:10px;border-radius:8px;line-height:0;min-height:44px;min-width:44px;
  display:flex;align-items:center;justify-content:center}
.occhio:hover{color:var(--inchiostro);background:#f1efea}
.occhio:focus-visible{outline:2px solid var(--inchiostro);outline-offset:2px}
.requisiti{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.requisiti li{font-size:14px;color:var(--grigio);display:flex;align-items:center;gap:8px;transition:color .2s}
.requisiti li.ok{color:#2f6b3c}
.requisiti li.manca{color:#c8281c}
.req-segno{display:inline-flex;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:#f0eee9;flex:none;transition:background .2s}
.requisiti li.ok .req-segno{background:var(--verde-chiaro,#eef4ee)}
.requisiti li.manca .req-segno{background:var(--rosso-chiaro,#fdeceb)}

/* ===== accesso con Google / Microsoft ===== */
.accessi-social{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.btn-social{display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;font-weight:600;
  color:var(--inchiostro);background:var(--bianco);border:1px solid var(--linea);border-radius:10px;
  padding:13px 18px;text-decoration:none;min-height:48px}
.btn-social:hover{background:#f6f4ef;border-color:#c9c6bf}
.btn-social svg{flex:none}

/* ===== primo avvio: barra a tappe + pillole di scelta ===== */
.avvio-progresso{display:flex;align-items:center;gap:10px;margin-bottom:30px}
.tappa{display:flex;align-items:center;gap:9px}
.tappa-pallino{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#f0eee9;color:var(--grigio);font-size:14px;font-weight:700;flex:none;transition:all .2s}
.tappa.attiva .tappa-pallino{background:var(--inchiostro);color:#fff}
.tappa.fatta .tappa-pallino{background:var(--verde-chiaro,#eef4ee);color:#2f6b3c}
.tappa-nome{font-size:14.5px;color:var(--grigio);white-space:nowrap}
.tappa.attiva .tappa-nome{color:var(--inchiostro);font-weight:700}
.tappa-linea{flex:1;height:2px;background:var(--linea);border-radius:2px;min-width:18px}
.tappa-linea.fatta{background:#2f6b3c}
@media(max-width:560px){.tappa-nome{display:none}.tappa.attiva .tappa-nome{display:inline}}

.gruppo-scelte{border:none;padding:0;margin:0}
.gruppo-scelte legend{font-size:15px;color:var(--grigio);margin-bottom:9px;padding:0}
.scelte-riga{display:flex;gap:9px;flex-wrap:wrap}
.scelte-riga.colonna{flex-direction:column}
.scelta-pillola{position:relative;cursor:pointer;display:inline-flex}
.scelta-pillola input{position:absolute;opacity:0;pointer-events:none}
.scelta-pillola span{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--linea);
  border-radius:99px;background:var(--bianco);font-size:15.5px;color:var(--inchiostro);transition:all .15s;min-height:44px}
.scelta-pillola:hover span{border-color:#c9c6bf}
.scelta-pillola input:checked + span{background:var(--inchiostro);color:#fff;border-color:var(--inchiostro)}
.scelta-pillola input:focus-visible + span{outline:2px solid var(--inchiostro);outline-offset:2px}
.scelte-riga.colonna .scelta-pillola span{border-radius:12px;width:100%}
/* Il numero d'ordine e' un elemento a se' dentro un contenitore flex: lo spazio scritto nel
   testo verrebbe buttato via dal browser, quindi lo stacco si fa col margine. */
.ordine-scelta:not(:empty){margin-right:.42em;font-style:italic;opacity:.85}

/* ===== importazione: le tre strade ===== */
.tre-strade{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.tre-strade{grid-template-columns:1fr}}
.strada{position:relative;display:flex;flex-direction:column;gap:8px}
.strada form{margin-top:auto}
.strada-numero{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--inchiostro);
  color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-bottom:4px}
.zona-file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  border:2px dashed var(--linea);border-radius:12px;padding:22px 14px;cursor:pointer;transition:border-color .15s;
  background:var(--carta,#faf9f7)}
.zona-file:hover{border-color:var(--inchiostro)}
.zona-file input{position:absolute;opacity:0;width:1px;height:1px}
.zona-file-testo{font-size:15.5px;font-weight:600}

/* Sulle pagine di ingresso la bolla di aiuto copriva il bottone su telefono: via. */
body:has(.pagina-ingresso) .bolla-aiuto,
body:has(.pagina-ingresso) .pannello-aiuto{display:none}

/* ===== percorso di avvio: un solo percorso a tappe, una sola azione alla volta ===== */
.percorso-avvio{margin-bottom:26px}
.percorso-testa{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.percorso-testa h2{font-size:18px;margin:0}
.percorso-grande .percorso-testa h2{font-size:22px}
.percorso{list-style:none;margin:0;padding:0}
.percorso-tappa{display:flex;gap:14px;position:relative;padding-bottom:18px}
.percorso-tappa:last-child{padding-bottom:0}
.percorso-tappa::before{content:"";position:absolute;left:14px;top:32px;bottom:2px;width:2px;background:var(--linea)}
.percorso-tappa:last-child::before{display:none}
.percorso-tappa.fatta::before{background:var(--verde,#2f6b3c)}
.percorso-pallino{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:#f0eee9;color:var(--grigio);font-weight:700;font-size:14px;flex:none;z-index:1}
.percorso-tappa.attiva .percorso-pallino{background:var(--inchiostro);color:#fff}
.percorso-tappa.fatta .percorso-pallino{background:var(--verde-chiaro,#eef4ee);color:var(--verde,#2f6b3c)}
.percorso-corpo{display:flex;flex-direction:column;gap:6px;padding-top:4px;min-width:0}
.percorso-titolo{font-weight:700;font-size:16px}
.percorso-tappa.fatta .percorso-titolo{color:var(--grigio);font-weight:500;text-decoration:line-through}
.percorso-tappa:not(.attiva):not(.fatta) .percorso-titolo{color:var(--grigio);font-weight:500}
.percorso-dopo{color:#6e6960}
.percorso-bottone{align-self:flex-start;margin-top:4px}
.percorso-alternative{margin-top:16px}
.btn-testo{background:none;border:none;padding:6px 0;font:inherit;font-size:inherit;color:var(--rosso,#c8281c);
  text-decoration:underline;cursor:pointer}

/* ===== icone leggere nelle card dei moduli ===== */
.elenco-cose.con-icone > div{position:relative}
.icona-cosa{display:flex;width:40px;height:40px;border-radius:10px;background:#f0eee9;color:var(--inchiostro);
  align-items:center;justify-content:center;margin-bottom:12px}
.icona-cosa svg{width:22px;height:22px}

/* sezione "non e' un chatbot" */
.non-chatbot{padding:56px 0 8px}
.non-chatbot h2{text-align:center}

/* CTA dentro la barra della prova */
.btn-demo-attiva{padding:10px 16px;font-size:14.5px;border-radius:8px;min-height:44px;white-space:nowrap;
  min-width:0;max-width:100%;overflow-wrap:anywhere}
@media(max-width:700px){.btn-demo-attiva{white-space:normal}}

/* il grassetto DENTRO il testo delle card resta in linea (block e' solo il titolo) */
.elenco-cose span b{display:inline;font-size:inherit;margin:0;color:var(--inchiostro)}

/* il bottone di attivazione nella barra della prova: rosso pieno come in home, sempre leggibile.
   Le regole dei link della barra lo spogliavano (background:none, padding 0): qui si ridefinisce
   tutto con specificita' che vince su .avviso-demo .scorciatoie a. */
.avviso-demo .scorciatoie a.btn-demo-attiva{background:var(--rosso);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:9px;font-weight:600;font-size:14.5px;min-height:40px}
.avviso-demo .scorciatoie a.btn-demo-attiva:hover{color:#fff;background:var(--rosso-scuro)}

/* la circolare si legge come un foglio: a capo veri, tipografia da lettera */
.testo-circolare{white-space:pre-line;line-height:1.65;font-size:15.5px}


/* ===== impostazioni: schede larghe, titoli interi, icona leggera ===== */
.schede-impostazioni{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.schede-impostazioni .scheda b{font-size:18px;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.schede-impostazioni .scheda{display:flex;flex-direction:column;gap:6px;padding:20px}
.schede-impostazioni .icona-cosa{margin-bottom:4px}

/* Ogni bottone non ovvio spiega sotto, tra parentesi, cosa succede premendo:
   chi lo vede per la prima volta non deve indovinare. */
.azione-spiegata{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.nota-bottone{display:block;font-size:13.5px;color:var(--grigio);text-align:center;line-height:1.35;max-width:200px}

/* ===== pagina confronto: tabella leggibile, colonna nostra evidenziata ===== */
.confronto-tabella,.confronto-schede{padding:44px 0 8px}
.confronto-tabella h2,.confronto-schede h2{text-align:center}
.scorri-tabella{overflow-x:auto;margin-top:22px;-webkit-overflow-scrolling:touch}
.tavola-confronto{border-collapse:collapse;width:100%;min-width:860px;background:var(--bianco);
  border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.tavola-confronto th,.tavola-confronto td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--linea);font-size:14.5px;line-height:1.5}
.tavola-confronto tr:first-child th{font-size:15.5px;background:#f6f4ef}
.tavola-confronto tr:last-child th,.tavola-confronto tr:last-child td{border-bottom:none}
.tavola-confronto th:first-child{width:15%;color:var(--grigio);font-weight:600}
.tavola-confronto .col-nostra{background:var(--rosso-chiaro,#fdeceb)}
.tavola-confronto tr:first-child .col-nostra{color:var(--rosso);font-weight:800}
.fonti-confronto{max-width:820px;margin:30px auto 40px;line-height:1.7}

/* tre strade per la casella, note comprese */
.tre-caselle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:760px){.tre-caselle{grid-template-columns:1fr}}
.tre-caselle .btn-pieno,.tre-caselle .btn-linea{display:flex;flex-direction:column;gap:3px;align-items:center;padding:14px 10px;white-space:normal;min-width:0}
.nota-bottone-chiara{display:block;font-size:13.5px;font-weight:400;color:rgba(255,255,255,.95);text-align:center}
.tre-caselle .btn-linea .nota-bottone{max-width:none}
.collegamenti-casella{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.collegamenti-casella.uno{grid-template-columns:1fr}
.collegamenti-casella .btn-pieno{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;white-space:normal;text-align:center;line-height:1.4;padding:20px 16px}
.casella-connessione{overflow-wrap:anywhere}
.messaggio.avviso{background:var(--giallo-chiaro);border-color:var(--giallo);color:var(--inchiostro)}
.avviso-posta-cliente{color:var(--giallo);font-weight:600}
.avviso-posta-cliente-scheda{background:var(--giallo-chiaro);border:1px solid #e8d5a8;border-radius:10px;padding:12px 14px;margin:0 0 14px;color:#674508}
.avviso-posta-cliente-scheda b{display:block;font-size:15px}
.avviso-posta-cliente-scheda p{margin:4px 0 0;font-size:14px}
.casella-connessione .altra-strada{border-top:1px solid var(--linea);padding-top:20px;margin-top:24px}
.casella-connessione summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:600}
.form-casella{max-width:640px}
.periodo-ricerca-clienti{margin:16px 0;max-width:640px}
.periodo-ricerca-clienti label{display:block;font-weight:600;margin-bottom:12px}
.periodo-ricerca-clienti select,.periodo-ricerca-clienti input{width:100%;min-width:0}
#date-clienti:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#date-clienti[hidden]{display:none}
.form-casella input,.form-casella select{min-width:0;max-width:100%}
.server-casella{border:1px solid var(--linea);border-radius:10px;padding:0 16px}
.server-casella label{margin:12px 0;display:block}
.prova-invio{margin-top:20px}
.riepilogo-confronto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 16px}
.riepilogo-confronto>div{padding:16px;border:1px solid var(--linea);border-radius:12px;background:var(--bianco)}
.riepilogo-confronto strong{display:block;font-size:32px;line-height:1.2;margin-bottom:4px}
.riepilogo-confronto span{font-size:14px}
.filtri-confronto{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}
.filtri-confronto .btn-linea{white-space:normal;font-size:15px;padding:10px 14px}
.filtri-confronto .filtro-selezionato{background:var(--inchiostro);color:var(--bianco);border-color:var(--inchiostro)}
.scheda-confronto{padding:22px;margin-bottom:20px;border:1px solid var(--linea);border-left:5px solid var(--giallo);border-radius:12px;background:var(--bianco);overflow-wrap:anywhere}
.scheda-confronto.coerenti{border-left-color:var(--verde)}
.scheda-confronto.altre{border-left-color:var(--grigio)}
.scheda-confronto h2{font:600 21px/1.4 system-ui,sans-serif;margin:0 0 8px}
.motivo-confronto{margin:0 0 18px;max-width:75ch}
.fonti-confronto-riga{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fonte-confronto{background:var(--carta);border-radius:8px;padding:16px;min-width:0}
.fonte-confronto h3{font:600 15px/1.4 system-ui,sans-serif;color:var(--grigio);margin:0 0 10px}
.fornitore-confronto{font-weight:600;margin:0 0 12px}
.fonte-confronto dl{margin:0}.fonte-confronto dl>div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--linea);padding:7px 0;font-size:15px}
.fonte-confronto dt{color:var(--grigio)}.fonte-confronto dd{margin:0;text-align:right;max-width:65%}
.fonte-confronto .valore-diverso{color:var(--rosso);font-weight:700}
@media(max-width:600px){.riepilogo-confronto{gap:6px}.riepilogo-confronto>div{padding:10px}.riepilogo-confronto strong{font-size:26px}.riepilogo-confronto span{font-size:12px}.fonti-confronto-riga{grid-template-columns:minmax(0,1fr)}.scheda-confronto{padding:16px}}
.avviso-casella{display:flex;align-items:center;justify-content:space-between;gap:22px;background:var(--giallo-chiaro);border:2px solid var(--giallo);border-radius:12px;padding:22px;margin-bottom:28px}
.avviso-casella b{font-size:19px;color:var(--inchiostro)}
.avviso-casella p{margin:6px 0 0;color:var(--inchiostro)}
.avviso-casella .btn-pieno,.avviso-casella .btn-linea{flex-shrink:0;white-space:normal}
@media(max-width:760px){.collegamenti-casella{grid-template-columns:minmax(0,1fr)}.avviso-casella{flex-direction:column;align-items:stretch;padding:18px;gap:14px}.avviso-casella .btn-pieno{text-align:center}}

/* ===== Oggi: barra dei filtri per tipo di attivita' ===== */
.filtri-oggi{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 20px;position:sticky;top:0;z-index:5;
  background:var(--carta,#faf9f7);padding:10px 0;border-bottom:1px solid var(--linea)}
.filtri-oggi .filtro{font:inherit;font-size:14px;font-weight:500;border:1px solid transparent;background:transparent;
  border-radius:6px;padding:8px 12px;min-height:40px;cursor:pointer;color:var(--grigio)}
.filtri-oggi .filtro span{color:var(--grigio);font-size:13px;margin-left:2px;font-variant-numeric:tabular-nums}
.filtri-oggi .filtro:hover{color:var(--inchiostro);background:var(--bianco);border-color:var(--linea)}
.filtri-oggi .filtro.attivo{background:var(--bianco);color:var(--inchiostro);border-color:var(--inchiostro);font-weight:600}
.filtri-oggi .filtro.attivo span{color:var(--grigio)}
@media(max-width:760px){
  .filtri-oggi{flex-wrap:nowrap;overflow-x:auto;position:static;padding-bottom:6px;gap:6px}
  .filtri-oggi .filtro{flex:0 0 auto;min-height:44px}
  .btn-pieno,.btn-linea{white-space:normal;overflow-wrap:anywhere}
  .tabella-documenti{overflow-x:auto}
}

/* automazioni: doppio interruttore e cartellino delle azioni mai delegate */
.interruttori-regola{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.tag-clic{font-size:13.5px;font-weight:600;color:var(--grigio);border:1px solid var(--linea);
  border-radius:99px;padding:7px 13px;white-space:nowrap;background:#f6f4ef}
@media(max-width:640px){.interruttori-regola{align-items:flex-start}}

/* il prezzo si legge intero: 149 grande, +IVA piccolo ma visibile accanto */
.prezzo-iva{font-size:.45em;font-weight:600;color:var(--grigio);vertical-align:middle}

/* ===== calcolatore del tempo: tre campi, conto dichiarato ===== */
.calcolo-sezione{padding:64px 0 20px}
.calcolo-sezione h2{text-align:center}
.calcolo-sezione .sotto-titolo-sezione{text-align:center;max-width:560px;margin:10px auto 30px}
.calcolo-scatola{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:stretch;
  background:var(--bianco);border:1px solid var(--linea);border-radius:16px;padding:28px;max-width:860px;margin:0 auto}
.calcolo-campi{display:flex;flex-direction:column;gap:16px}
.calcolo-campi label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--inchiostro);font-weight:600}
.calcolo-campi input{font:inherit;font-size:18px;padding:10px 14px;border:1.5px solid var(--linea-scura,#c9c6bf);
  border-radius:8px;max-width:140px;background:var(--carta)}
.calcolo-campi input:focus{outline:2.5px solid var(--inchiostro);outline-offset:1px}
.calcolo-esito{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:22px}
.calcolo-ore{font-size:19px;margin:0}
.calcolo-ore b{display:block;font-size:56px;font-weight:800;line-height:1.05;color:var(--rosso)}
.calcolo-dettaglio{font-size:14.5px;color:var(--grigio);margin:8px 0 0;max-width:200px}
.calcolo-formula{max-width:860px;margin:14px auto 0}
.calcolo-formula summary{cursor:pointer;font-weight:600;padding:12px 0;color:var(--grigio)}
.calcolo-formula p{color:var(--grigio);line-height:1.7;max-width:720px}
@media(max-width:760px){.calcolo-scatola{grid-template-columns:1fr;padding:20px}
  .calcolo-campi input{max-width:100%}}

/* ===== revisione 02/09 sera (terzo giro): menu, chi c'e' dietro, footer, rifiniture ===== */
/* Il menu della testata a 1024px usciva dallo schermo: sotto i 1120px si passa al menu a tendina. */
@media(max-width:1120px){
  .menu-pubblico{display:none;position:absolute;top:100%;left:0;right:0;background:var(--carta);
    border-bottom:1px solid var(--linea);flex-direction:column;align-items:stretch;padding:8px 6vw 16px;gap:0;
    box-shadow:0 18px 30px -18px rgba(28,28,26,.25)}
  .menu-pubblico.aperto{display:flex}
  .menu-pubblico a{padding:13px 2px;border-bottom:1px solid var(--linea);font-size:16px}
  .menu-pubblico a:last-child{border-bottom:none}
  .apri-menu{display:block;min-width:44px;min-height:44px}
}
@media(min-width:1121px){.menu-pubblico{gap:18px}.menu-pubblico a{font-size:14.5px}}

/* La riga sul confronto vive dentro la sua sezione, non sospesa tra due */
.riga-confronto{text-align:center;font-size:15px;color:var(--grigio);margin-top:22px}

/* Le quattro regole hanno un titolo: prima erano quattro righe senza padre */
.rassicurazioni h2{grid-column:1/-1;text-align:center;margin-bottom:6px}

/* Chi c'e' dietro: due persone vere, foto quadrata, testo che si legge */
.chi-dietro h2{text-align:center}
.persone{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1040px;margin:0 auto}
.persona{display:grid;grid-template-columns:132px 1fr;gap:22px;align-items:start;background:var(--bianco);
  border:1px solid var(--linea);border-radius:16px;padding:26px;box-shadow:var(--ombra-appoggio)}
.persona img{width:132px;height:132px;border-radius:14px;object-fit:cover;display:block;background:#f0eee9}
.persona h3{font-family:'Source Serif 4',Georgia,serif;font-size:21px;font-weight:700;margin:0 0 2px}
.persona-ruolo{font-size:14.5px;color:var(--grigio);margin-bottom:10px}
.persona p{font-size:15.5px;line-height:1.6}
.persona-stampa{margin-top:10px;font-size:14.5px;color:var(--grigio)}
.persona-stampa a{color:var(--inchiostro);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c9c6bf}
.persona-stampa a:hover{text-decoration-color:var(--rosso)}
.persona-stampa a.link{text-decoration:none;color:var(--rosso)}
.chi-dietro-nota{text-align:center;font-size:14.5px;color:var(--grigio);max-width:70ch;margin:22px auto 0}
@media(max-width:900px){.persone{grid-template-columns:1fr}}
@media(max-width:520px){.persona{grid-template-columns:1fr;padding:22px}.persona img{width:96px;height:96px}}

/* Footer: indirizzo, e sulle pagine strette le colonne non si schiacciano */
.piede-indirizzo{display:block;color:var(--grigio);font-size:13.5px;line-height:1.5;padding:6px 0 0}
.pagina-stretta .piede-colonne{grid-template-columns:1fr 1fr;gap:26px 32px}
.pagina-stretta .piede-colonne>div:first-child{grid-column:1/-1}
@media(max-width:700px){.pagina-stretta .piede-colonne{grid-template-columns:1fr}}
.piede-colonne{text-align:left}
.piede-colonne>div:first-child p{margin-left:0;margin-right:0}
.piede-riga{text-align:center}

/* Campo del codice di recupero: si legge come un codice */
.mono-campo{font-family:ui-monospace,Menlo,monospace;letter-spacing:1px;text-transform:uppercase}

/* Sulle pagine pubbliche, da telefono, la bolla dell'aiuto compare dopo la prima schermata:
   prima copriva i bottoni dell'apertura. */
@media(max-width:700px){body:has(.pagina-pubblica) .bolla-aiuto.in-attesa{opacity:0;pointer-events:none;transform:translateY(12px)}
  .bolla-aiuto{transition:opacity .25s var(--curva),transform .25s var(--curva)}}
/* La nota sotto il bottone della card d'ingresso respira; il footer delle pagine strette sta su tre colonne */
.ingresso-card .nota{margin-top:16px;font-size:15px;color:var(--grigio)}
.pagina-stretta .piede-colonne{grid-template-columns:1fr 1fr 1fr;gap:24px 28px}
@media(max-width:700px){.pagina-stretta .piede-colonne{grid-template-columns:1fr}}

/* il conto del tempo si chiude col prezzo: il paragone deve saltare all'occhio */
.calcolo-soldi{margin-top:12px;padding-top:12px;border-top:1px solid var(--linea);
  font-size:15.5px;line-height:1.6;color:var(--grigio)}
.calcolo-soldi b{color:var(--inchiostro);font-size:18px}

/* prossimi 7 giorni nella schermata Oggi */
.giorno-settimana{margin-top:10px}
.giorno-etichetta{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--grigio);margin:8px 0 2px}
.settimana .regola-testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.mono-campo{font-family:ui-monospace,Menlo,monospace;font-size:13px}

/* scelta mensile / annuale all'attivazione */
.scelta-piano{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 14px}
@media(max-width:560px){.scelta-piano{grid-template-columns:1fr}}
.piano-card{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1.5px solid var(--linea);border-radius:12px;cursor:pointer;text-align:left}
.piano-card:has(input:checked){border-color:var(--inchiostro);background:var(--bianco)}
.piano-card input{margin-top:4px;accent-color:var(--inchiostro)}
.piano-corpo{display:flex;flex-direction:column;gap:4px}
.piano-prezzo{font-size:22px;font-weight:600}
.piano-prezzo small{font-size:13px;font-weight:400;color:var(--grigio)}
.piano-tag{font-style:normal;font-size:12px;font-weight:600;background:var(--inchiostro);color:var(--bianco);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle}

/* cartellino del prezzo: selettore mensile / annuale come i migliori SaaS */
.selettore-piano{display:flex;justify-content:center;gap:4px;background:var(--carta);border:1px solid var(--linea);border-radius:999px;padding:4px;width:max-content;margin:0 auto 18px}
.piano-scelta{border:0;background:transparent;border-radius:999px;padding:9px 18px;font:inherit;font-size:15px;font-weight:600;color:var(--grigio);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s,color .15s}
.piano-scelta.attivo{background:var(--inchiostro);color:var(--bianco);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.piano-scelta:focus{outline:none}
.piano-scelta:focus-visible{outline:2px solid var(--inchiostro);outline-offset:3px}
.piano-badge{font-size:13px;font-weight:700;background:var(--verde-chiaro);color:var(--verde);border-radius:999px;padding:2px 8px;white-space:nowrap}
.piano-scelta.attivo .piano-badge{background:var(--verde);color:var(--bianco)}
.prezzo-blocco{text-align:center}
.prezzo-sotto{font-size:15px;color:var(--grigio);text-align:center;margin-top:4px}
@media(max-width:480px){.piano-scelta{padding:8px 12px;font-size:14px}.piano-badge{font-size:12.5px;padding:2px 7px}}

/* la squadra di agenti AI di DC Academy, sotto le due persone */
.squadra-ai{max-width:1040px;margin:34px auto 0}
.squadra-ai h3{font-family:'Source Serif 4',Georgia,serif;font-size:24px;font-weight:700;text-align:center;margin:0 0 6px}
.agenti{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.agente{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;background:var(--bianco);border:1px solid var(--linea);border-radius:14px;padding:16px}
.agente-sigla{width:44px;height:44px;border-radius:12px;background:var(--inchiostro);color:var(--bianco);font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center}
.agente b{display:block;font-size:16px}
.agente-ruolo{display:block;font-size:13px;color:var(--grigio);margin-bottom:6px}
.agente p{font-size:14px;line-height:1.5;color:var(--grigio)}
@media(max-width:900px){.agenti{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.agenti{grid-template-columns:1fr}}

.squadra-ai .sotto-titolo-sezione{max-width:62ch;margin:6px auto 0}
.prezzo-blocco+.prezzo-nota,.prezzo-blocco+[hidden]+.prezzo-nota{margin-top:14px}

/* I tre scaglioni: si legge chi sei nella colonna di sinistra e quanto paghi in quella di destra.
   Quello di mezzo e' segnato perche' e' il caso piu' comune, non perche' vogliamo spingerlo. */
.scaglioni{list-style:none;padding:0;margin:14px 0 0}
.scaglione{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid var(--linea);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.scaglione-comune{border-color:var(--inchiostro);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.scaglione-chi b{display:block;font-size:16.5px}
.scaglione-chi .piccolo{color:var(--grigio)}
.scaglione-cifra{font-family:'Source Serif 4',Georgia,serif;font-size:27px;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.scaglione-cifra .prezzo-iva{font-family:inherit;font-size:14px;font-weight:400;color:var(--grigio);margin-left:6px}
.scaglione-nota{flex-basis:100%;font-size:13.5px;color:var(--grigio)}
@media(max-width:520px){.scaglione{flex-direction:column;align-items:flex-start;gap:6px}}

/* ---- scadenze: il conto alla rovescia ----
   Il numero e le parole portano l'informazione; il colore la rinforza e basta.
   Il rosso e' razionato di proposito: se fosse su tutte le righe non direbbe piu' niente. */
.conto-riepilogo{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 26px}
.conto-cifra{flex:1 1 160px;display:flex;align-items:center;gap:12px;background:var(--bianco);
  border:1px solid var(--linea);border-radius:14px;padding:14px 16px}
.conto-cifra-numero{font-size:34px;font-weight:700;line-height:1.05;white-space:nowrap;
  font-variant-numeric:proportional-nums}
.conto-cifra-testo{font-size:14px;line-height:1.35;color:var(--inchiostro)}
.conto-cifra-nota{color:var(--grigio);font-size:13px}
.conto-cifra-rossa{border-color:#f0c8c4;background:var(--rosso-chiaro)}
.conto-cifra-rossa .conto-cifra-numero{color:var(--rosso-scuro)}

.conto-fascia{font-size:15px;font-weight:600;color:var(--grigio);margin:26px 0 10px;
  display:flex;align-items:center;gap:8px;text-transform:none}
.conto-fascia-quante{font-size:13px;font-weight:600;color:var(--grigio);background:var(--carta);
  border:1px solid var(--linea);border-radius:20px;padding:1px 9px}

.conto-riga{align-items:flex-start}
.conto{flex:0 0 74px;display:flex;flex-direction:column;align-items:center;gap:2px;padding-top:2px}
.conto-numero{font-size:26px;font-weight:700;line-height:1;color:var(--grigio);
  font-variant-numeric:proportional-nums}
.conto-unita{font-size:11px;color:var(--grigio);letter-spacing:.02em}
.conto-traccia{display:flex;width:58px;height:4px;margin-top:6px;border-radius:99px;
  background:var(--linea);overflow:hidden}
.conto-avanti{background:var(--grigio);opacity:.45;border-radius:99px}
.conto-oltre{background:var(--rosso);border-radius:99px;margin-left:2px}
.conto-fatto{font-size:20px;color:var(--verde);line-height:1.6}

/* solo le due fasce che contano davvero prendono colore */
.conto-vicina .conto-numero{color:var(--giallo)}
.conto-vicina .conto-avanti{background:var(--giallo);opacity:.85}
.conto-oggi .conto-numero,.conto-ritardo .conto-numero{color:var(--rosso-scuro)}
.conto-oggi .conto-avanti,.conto-ritardo .conto-avanti{background:var(--rosso);opacity:.9}
.conto-ritardo{border-color:#f0c8c4}
.conto-oggi .conto-parole,.conto-ritardo .conto-parole{color:var(--rosso-scuro)}
.conto-vicina .conto-parole{color:var(--giallo)}
.conto-parole{font-weight:600}
.conto-origine{display:inline-block;margin-left:8px;font-size:12px;color:var(--grigio);
  background:var(--carta);border:1px solid var(--linea);border-radius:20px;padding:0 8px;vertical-align:1px}

@media (max-width:640px){
  .conto{flex-basis:56px}
  .conto-numero{font-size:22px}
  .conto-traccia{width:46px}
  .conto-cifra{flex-basis:100%}
}

/* ---- a chi chiedere un documento ricorrente: non tutti i clienti hanno le stesse fonti ---- */
.scelta-clienti{border:1px solid var(--linea);border-radius:12px;padding:12px 14px;margin:12px 0}
.scelta-clienti legend{font-size:14px;font-weight:600;padding:0 6px}
.scelta-tutti{display:block;font-weight:600;margin-bottom:8px}
.scelta-elenco{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px 14px;
  max-height:200px;overflow:auto;padding-top:6px;border-top:1px solid var(--linea)}
.scelta-uno{display:flex;align-items:center;gap:8px;font-size:14px;min-height:32px}


/* ---- il documento vero, preso dalle cartelle dello studio e attaccato alla risposta ---- */
.allegato-pronto{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin:10px 0 0;padding:10px 12px;
  background:var(--verde-chiaro);border:1px solid #cfe0d1;border-radius:10px;font-size:14px}
.allegato-pronto .piccolo{flex-basis:100%;color:var(--grigio)}
.allegato-segno{font-size:15px}
.allegato-vuoto{background:var(--carta);border-color:var(--linea);color:var(--grigio)}

/* ---- landing: la sezione delle scadenze col conto alla rovescia ---- */
.scadenze-sezione{padding:56px 0}
.scadenze-sezione h2{text-align:center}
.scadenze-colonne{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;margin-top:28px}
.scadenze-spiega p{margin:0 0 14px;line-height:1.62}
.scadenze-onesta{padding:12px 14px;background:var(--carta);border:1px solid var(--linea);
  border-radius:12px;color:var(--grigio);font-size:15px}
.scadenze-esempio{background:var(--bianco);border:1px solid var(--linea);border-radius:16px;
  padding:16px 18px;box-shadow:var(--ombra-appoggio)}
.scadenze-esempio-testa{font-weight:700;font-size:15px;padding-bottom:10px;margin-bottom:4px;
  border-bottom:1px solid var(--linea)}
.riga-esempio{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--linea);
  font-size:14px;line-height:1.45}
.riga-esempio:last-of-type{border-bottom:0}
.numero-esempio{flex:0 0 44px;text-align:center;font-size:23px;font-weight:700;color:var(--grigio)}
.in-ritardo .numero-esempio{color:var(--rosso-scuro)}
.in-arrivo .numero-esempio{color:var(--giallo)}
.scadenze-esempio-nota{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--linea);
  font-size:13px;color:var(--grigio)}
@media (max-width:820px){
  .scadenze-colonne{grid-template-columns:1fr;gap:24px}
  .scadenze-sezione{padding:40px 0}
}

/* ---- la prova su un cliente solo, e le cose che non hanno passato il secondo controllo ---- */
.riga-spunta{display:flex;align-items:center;gap:10px;font-weight:600;min-height:40px}
.riga-spunta input{width:18px;height:18px}
.da-guardare{border:1px solid #e8d5a8;background:var(--giallo-chiaro);border-radius:14px;
  padding:14px 16px;margin:0 0 18px}
.da-guardare h2{font-size:16px;margin:0 0 4px}
.da-guardare p{margin:0 0 8px;font-size:14px;color:var(--inchiostro)}
.da-guardare ul{margin:0;padding-left:18px;font-size:14px;line-height:1.6}
.da-guardare li{margin-bottom:2px}

/* ---- SofIA: la chat si apre su tre strade, si sceglie prima di scrivere ---- */
.aiuto-faccia{flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--inchiostro);
  color:var(--bianco);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px}
.aiuto-nome{flex:1;display:flex;flex-direction:column;line-height:1.3}
.aiuto-nome b{font-size:16px}
.aiuto-ruolo{font-size:13px;color:var(--grigio)}
.aiuto-scelte{display:flex;flex-direction:column;gap:8px}
/* display:flex batte il nascosto del browser: va detto esplicitamente */
.aiuto-scelte[hidden],.aiuto-form[hidden]{display:none}
.aiuto-scelta{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;
  background:var(--bianco);border:1px solid var(--bordo-campo);border-radius:12px;
  padding:11px 14px;font:inherit;text-align:left;cursor:pointer;min-height:56px}
.aiuto-scelta b{font-size:15.5px}
.aiuto-scelta span{font-size:13.5px;color:var(--grigio)}
.aiuto-scelta:hover{border-color:var(--inchiostro);background:var(--carta)}
.aiuto-esempi{display:block;margin-top:6px;font-size:13.5px;color:var(--grigio);line-height:1.5}
.aiuto-cambia{align-self:flex-start;background:none;border:none;padding:4px 0;font:inherit;
  font-size:13.5px;color:var(--grigio);text-decoration:underline;cursor:pointer;min-height:32px}
.aiuto-cambia:hover{color:var(--inchiostro)}

/* ---- il cruscotto: righe di conteggio veloce e le due colonne sotto ---- */
.cruscotto-righe{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 24px;font-size:14px;color:var(--grigio)}
.cruscotto-rosso{color:var(--rosso-scuro);font-weight:600}
.cruscotto-colonne{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;align-items:start}
.cruscotto-link{display:flex;flex-direction:column;gap:8px}
@media (max-width:820px){.cruscotto-colonne{grid-template-columns:1fr}}

/* ---- la tabella degli studi (rifatta il 10/09/2026) ----
   Prima le sei colonne si dividevano lo spazio a caso: "0 email lette" andava a capo tre volte
   e le tre righe di un solo studio erano alte quanto mezzo schermo. Ora ogni colonna ha una
   larghezza sua, i numeri non vanno mai a capo e la tabella, se non ci sta, scorre di lato. */
/* Larghezze fisse per colonna: senza, "0 email lette" andava a capo su tre righe e le due
   tabelle (studi e attivita') non erano allineate fra loro (Davide, 10/09/2026: "sistema grafica"). */
.tabella-studi{table-layout:fixed;min-width:1120px}
/* .tabella-scorri table vale di piu' e schiacciava le sei colonne a 520px:
   da telefono «Entra come questo studio» diventava una striscia di una lettera. */
.tabella-scorri table.tabella-studi{min-width:1120px}
.entra-studio{margin:0}
.entra-studio .btn-piccolo{white-space:normal}
.tabella-studi .col-studio{width:26%}
.tabella-studi .col-piano{width:19%}
.tabella-studi .col-pronto{width:12%}
.tabella-studi .col-uso{width:16%}
.tabella-studi .col-consumo{width:15%}
.tabella-studi .col-azioni{width:12%}
.tabella-studi thead th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--grigio);font-weight:600;border-bottom:1px solid var(--linea)}
.tabella-studi tbody tr + tr td{border-top:1px solid var(--linea)}
.tabella-studi .col-uso,.tabella-studi .col-consumo{font-variant-numeric:tabular-nums}
.tabella-studi th{padding:10px 14px;white-space:nowrap}
.tabella-studi td{padding:16px 14px;vertical-align:top;font-size:15.5px;line-height:1.45}
.tabella-studi tbody tr:hover{background:#faf8f5}
/* le larghezze vere stanno nel <colgroup> del modello: con table-layout:fixed comanda
   la prima riga, e le regole scritte qui sulle celle del corpo non venivano guardate */
.tabella-studi .piccolo{font-size:13.5px;line-height:1.4;margin-top:3px}
.tabella-studi .grigio{color:var(--grigio)}
.tabella-studi .rosso{color:var(--rosso-scuro);font-weight:600}
.tabella-studi b{font-size:16px}
.tabella-studi .col-studio .piccolo{overflow-wrap:anywhere}
.tabella-studi .tag{margin-bottom:2px}
/* il numero che conta si legge per primo, la parola gli sta accanto piu' piccola */
.dato-forte{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.dato-forte span{font-size:13.5px;font-weight:500;color:var(--grigio)}
.dato-forte.sopra-tetto{color:var(--rosso-scuro)}
.col-pronto{display:table-cell}
.col-pronto .segno-fatto,.col-pronto .segno-manca{display:block;margin-bottom:3px}
.cella-impostato{display:flex;flex-direction:column;gap:3px}
.segno-fatto{font-size:13.5px;color:var(--verde);font-weight:600;white-space:nowrap}
.segno-manca{font-size:13.5px;color:var(--grigio);white-space:nowrap}
/* dalla riga di uno studio si salta al suo registro: quali email sono partite davvero */
.link-riga{display:inline-block;margin-top:5px;color:var(--grigio);font-weight:600;
  text-decoration:none;white-space:nowrap}
.link-riga:hover{color:var(--rosso)}

/* numeri incolonnati a destra: si confrontano con l'occhio, senza rileggere */
.incolonna{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tabella-percorso td,.tabella-visite td{padding:11px 10px;font-size:15.5px}
.tabella-percorso{max-width:640px}
.tabella-visite{min-width:520px}
.tabella-visite td:first-child{white-space:nowrap;color:var(--grigio)}

/* ---- le azioni sulla riga di uno studio: incolonnate, cosi' non spingono fuori la tabella ---- */
.azioni-studio{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.azioni-studio form{display:block}
.azioni-studio .btn-piccolo{width:100%;padding:7px 10px;font-size:13.5px;min-height:34px}
.btn-pericolo{color:var(--rosso);border-color:#f0c8c4}
.btn-pericolo:hover{background:var(--rosso-chiaro)}

/* La voce del menu della pagina che stai guardando: sottolineata, cosi' sai dove sei. */
.menu-pubblico a.voce-attuale{border-bottom-color:var(--rosso);color:var(--rosso)}

/* Riepilogo "chi fa cosa" nella colonna destra dell'apertura del confronto: prende il
   posto che sulla home ha la schermata del prodotto, cosi' l'apertura non resta mezza vuota. */
.apertura-dx .etichetta-sezione{text-align:left}
.riepilogo-confronto{list-style:none;margin:14px 0 12px;padding:0;display:grid;gap:10px}
.riepilogo-confronto li{background:var(--bianco);border:1px solid var(--linea);border-radius:12px;
  padding:13px 15px;line-height:1.5}
.riepilogo-confronto b{display:block;font-size:15px;margin-bottom:2px}
.riepilogo-confronto li:first-child b{color:var(--rosso)}
.riepilogo-confronto span{display:block;font-size:14px;color:var(--grigio)}

/* Sul telefono la testata usciva dallo schermo a destra: logo + bottone + ☰ non ci
   stavano nei 335px lasciati dal margine della pagina, e il ☰ finiva mezzo fuori.
   Qui la testata si riprende tutta la larghezza e il bottone si stringe un po'. */
@media(max-width:430px){
  .pagina-pubblica > .testata-pubblica{margin-left:-20px;margin-right:-20px;padding-left:14px;padding-right:14px}
  .testata-pubblica{gap:6px}
  .testata-pubblica .logo{font-size:15px}
  .btn-testata{padding:9px 11px;font-size:12.5px}
}

/* ---- pagine vuote: cosa fare il primo giorno, senza dati ---- */
.vuoto{background:var(--bianco);border:1px dashed var(--bordo-campo);border-radius:12px;padding:16px 18px;
  color:var(--grigio);font-size:15.5px;line-height:1.55;margin-top:8px}
/* ---- i link della riga legale nel piede: area di tocco piena anche da telefono ---- */
.piede-legale a,.piede-riga a{display:inline-block;padding:6px 2px;margin:-6px 0}

/* ===== Impostazioni a sezioni richiudibili (10/09/2026): una riga per impostazione, si apre solo quella che serve ===== */
.intro-impostazioni{margin:-6px 0 14px}
.impostazione>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:2px 0;min-height:44px}
.impostazione>summary::-webkit-details-marker{display:none}
.impostazione>summary h2{margin:0;font-size:18px;line-height:1.3}
.impostazione>summary .stato{display:block;color:var(--grigio);font-size:14.5px;margin-top:3px;overflow-wrap:anywhere}
.impostazione>summary::after{content:"+";flex:none;width:32px;height:32px;border:1px solid var(--linea);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--grigio)}
.impostazione[open]>summary::after{content:"−"}
.impostazione[open]>summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.impostazione>summary:hover h2{color:var(--rosso)}
.impostazione h3{font-size:16.5px;margin-bottom:6px}

/* ---- collegamento della casella: le istruzioni del fornitore prima della password ---- */
.istruzioni-fornitore{background:var(--carta);border:1px solid var(--linea);border-radius:12px;padding:14px 16px}
.istruzioni-fornitore b{display:block;margin-bottom:6px;font-size:15px}
.istruzioni-fornitore p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--inchiostro)}
.istruzioni-fornitore p:last-child{margin-bottom:0}
.nota-sicurezza{color:var(--grigio)}
.titolo-manuale{font-size:18px;margin:26px 0 14px}

/* ---- studi da richiamare: la lista di lavoro di Alessia ---- */
.richiamo{flex-direction:column;align-items:stretch;gap:12px}
.richiamo-urgente{border-color:#f0c8c4;background:var(--rosso-chiaro)}
.contatti-richiamo{margin-top:6px;font-size:14.5px}
.ultimo-richiamo{margin-top:8px;padding-top:8px;border-top:1px solid var(--linea);
  font-size:14px;color:var(--grigio);line-height:1.5}
.form-richiamo{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.form-richiamo select,.form-richiamo input{font-size:15px;padding:9px 11px}
.form-richiamo input[name=nota]{flex:1;min-width:200px}
@media(max-width:640px){.form-richiamo{flex-direction:column;align-items:stretch}}

/* Nell'area admin la bolla di SofIA non serve e copriva l'ultima riga della tabella
   degli studi (10/09/2026): qui dentro Davide guarda i numeri, non chiede aiuto al tool. */
.app-admin ~ #apri-aiuto,.app-admin ~ .pannello-aiuto{display:none}
.togli-richiamo{margin-top:4px}
.togli-richiamo .btn-testo{font-size:13.5px;padding:2px 0}

/* ---- chi entra nell'amministrazione ---- */
/* Scheda di un amministratore. NON si chiama .persona: quel nome e' gia' preso dalle schede
   delle persone sulla landing, che sono una griglia "foto 132px + testo", e la scheda qui
   dentro ereditava quella colonna da 132px con il bottone sparato a tutta riga sopra l'email
   (Davide, 10/09/2026, screenshot). */
.scheda-admin{gap:16px;align-items:flex-start}
.scheda-admin .chi{font-size:16px;color:var(--inchiostro);line-height:1.35}
.scheda-admin .dettaglio{margin-top:4px}
.azioni-persona{flex:0 0 auto;margin-left:auto}
.azioni-persona .btn-piccolo{white-space:nowrap}
.poteri-admin{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.poteri-admin form{margin:0}
.poteri-admin .btn-piccolo{white-space:nowrap}
@media(max-width:640px){.scheda-admin{flex-direction:column}.azioni-persona{margin-left:0}}
.scheda-admin-capo{background:var(--sfondo-tenue,#f6f5f2)}
.modulo-persona{max-width:560px;display:flex;flex-direction:column;gap:14px;margin:8px 0 18px}
.modulo-persona input[type=text],.modulo-persona input[type=email],.modulo-persona input:not([type]){width:100%}
.scelte-accesso{border:1px solid var(--linea);border-radius:12px;padding:12px 14px;margin:0}
.scelte-accesso legend{padding:0 6px;font-size:14px;color:var(--grigio)}
/* riga con la spunta dei moduli nuovi: .riga-spunta esisteva gia' (Impostazioni) e la mia
   regola le cambiava peso del testo e allineamento. */
.spunta-scelta{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-weight:400}
.spunta-scelta input{margin-top:3px}
.scorciatoia{margin:0 6px 6px 0}

/* ---- modulo "aggiungi una scadenza": prima si sceglie di chi e', poi il resto ---- */
.form-scadenza{display:flex;flex-direction:column;gap:16px;max-width:760px}
.form-scadenza label{display:block;font-weight:600;font-size:14.5px}
.form-scadenza input,.form-scadenza select,.form-scadenza textarea{width:100%;margin-top:5px;font-weight:400}
.form-scadenza .spunta-scelta input{width:auto;margin-top:3px}
/* due colonne per i moduli nuovi. Nome proprio: .griglia-due esisteva gia' con 2fr 1fr e
   la mia regola, essendo piu' in basso, la stava cambiando sotto ai piedi. */
.campi-due{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campi-due label:first-child{grid-column:1 / -1}
@media(max-width:640px){.campi-due{grid-template-columns:1fr}}

/* ---- "cerca le scadenze nelle mie email": lo scadenzario si riempie da solo la prima volta ---- */
.cerca-scadenze{border:1px solid var(--linea);border-radius:16px;padding:16px 18px;margin:18px 0;
  background:var(--sfondo-tenue,#f6f5f2)}
.cerca-scadenze p{margin:10px 0 0;max-width:70ch}

/* ---- "cosa stai accettando, in breve": si legge in trenta secondi ---- */
.in-breve h2{margin:0 0 14px;font-size:22px}
.in-breve ul{list-style:none;margin:0;padding:0}
.in-breve li{padding:12px 0 12px 16px;border-left:3px solid var(--linea);margin-bottom:2px;
  line-height:1.55;max-width:72ch}
.in-breve li b{display:block;margin-bottom:2px}
.in-breve li + li{border-top:0}
.testi-completi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0;
  font-size:14.5px;color:var(--grigio)}
.testi-completi .btn-linea{text-decoration:none}
.regalo-gratis{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
.regalo-gratis label{display:flex;flex-direction:column;gap:2px;color:var(--grigio)}
.regalo-gratis input[type=date]{padding:6px 8px;font-size:14px}
.scaglione-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:var(--inchiostro);color:#fff;font-size:12px;font-weight:600;vertical-align:2px}

/* ---- clienti trovati nelle email: si spunta chi e' davvero cliente ---- */
.trovato{flex-direction:column;align-items:stretch;gap:10px}
.trovato .spunta-scelta b{display:block}
.campi-trovato{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.campi-trovato label{display:flex;flex-direction:column;gap:3px;color:var(--grigio)}
.campi-trovato input{font-size:15px;padding:8px 10px}
.azioni-trovati{display:flex;gap:10px;align-items:center;margin:18px 0 6px;flex-wrap:wrap}
@media(max-width:640px){.campi-trovato{grid-template-columns:1fr}}

/* ---- i tre numeri in cima a "Da richiamare" sono bottoni: si clicca e la lista si filtra ---- */
.conto-scelta{text-decoration:none;color:inherit;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.conto-scelta:hover{border-color:var(--inchiostro)}
.conto-scelta-on{border-color:var(--inchiostro);box-shadow:inset 0 0 0 1px var(--inchiostro)}

/* ---- scheda "cosa ha preparato": il testo vero, non solo il conteggio ---- */
.scheda-lavoro{align-items:flex-start}
.testo-email{margin-top:10px}
.testo-email summary{cursor:pointer;font-size:14.5px;color:var(--rosso);font-weight:600}
.testo-email pre{white-space:pre-wrap;font-family:inherit;font-size:15px;line-height:1.55;
  background:var(--sfondo-tenue,#f6f5f2);border:1px solid var(--linea);border-radius:12px;
  padding:14px 16px;margin:10px 0 0;max-width:70ch}
/* Le azioni rare stanno sotto "Altro": una primaria in vista, il resto a richiesta. */
.altre-azioni{margin:0;min-width:0}
.altre-azioni>summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  min-height:44px;padding:0 2px;font-size:14px;font-weight:500;color:var(--grigio);
  border:0;background:transparent}
.altre-azioni>summary::-webkit-details-marker{display:none}
.altre-azioni[open]>summary{color:var(--inchiostro);font-weight:600}
.altre-azioni>:is(form,a){display:block;margin-top:8px}
.altre-azioni .btn-linea{width:100%;justify-content:center}
.altre-azioni .regalo-gratis{flex-direction:column;align-items:stretch;gap:4px}
.altre-azioni .regalo-gratis input[type=date]{width:100%}

/* Accessi amministratori: riepilogo compatto, storico su richiesta. */
.admin-utilizzo{display:flex;flex-wrap:wrap;gap:18px 40px;margin:20px 0}
.admin-utilizzo div{min-width:130px}.admin-utilizzo dt{font-size:13px;color:var(--grigio,#53637c)}
.admin-utilizzo dd{margin:5px 0 0;font-size:18px;font-weight:650;color:var(--inchiostro,#18273d)}
.admin-registro-scroll{overflow-x:auto;border:1px solid #dce4ef;border-radius:14px;background:#fff}
.admin-registro{width:100%;border-collapse:collapse;text-align:left}
.admin-registro th,.admin-registro td{padding:14px 18px;border-bottom:1px solid #e8edf5}
.admin-registro th{font-size:13px;background:#f4f7fc}.admin-registro tr:last-child td{border-bottom:0}
.admin-eventi{list-style:none;padding:0;border:1px solid #dce4ef;border-radius:14px;background:#fff}
.admin-eventi li{padding:16px 20px;border-bottom:1px solid #e8edf5}.admin-eventi li:last-child{border-bottom:0}
.admin-eventi li>div{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.admin-eventi p{margin:5px 0 0;color:#53637c}.admin-registro-pagine{display:flex;gap:12px;margin:20px 0}
@media(max-width:640px){.admin-utilizzo{gap:15px 24px}.admin-utilizzo dd{font-size:16px}.admin-registro th,.admin-registro td{padding:10px}}