:root {
  --bg: #f4f5f8; --surface: #ffffff; --surface-2: #f8f9fb; --border: #e3e6ee; --border-2: #d3d8e3;
  --text: #171c2b; --muted: #636b80; --faint: #8b92a5;
  --accent: #2346d1; --accent-2: #1a37a8; --accent-soft: #e9eeff; --on-accent: #fff;
  --ok: #0f8a5f; --ok-soft: #e3f6ee; --warn: #b46a00; --warn-soft: #fff3df; --err: #c4322b; --err-soft: #fdeceb;
  --info: #3b6fd6; --info-soft: #eaf1ff; --violet: #7a4fd0; --violet-soft: #f1ebfd;
  --shadow: 0 1px 2px rgba(20, 25, 45, .05), 0 4px 16px rgba(20, 25, 45, .06);
  --dot: #dde1e8;
  --page: #e6e9ef;
  --radius: 6px; --radius-sm: 4px; --radius-xs: 3px; --radius-pill: 4px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f121a; --surface: #171b26; --surface-2: #1d2230; --border: #2a3142; --border-2: #364057;
    --text: #e8ebf3; --muted: #a2a9bb; --faint: #7a8296;
    --accent: #6f8cff; --accent-2: #8aa1ff; --accent-soft: #1f2a4d; --on-accent: #0b1020;
    --ok: #3ccf91; --ok-soft: #12322a; --warn: #f0aa45; --warn-soft: #3a2a10; --err: #ff7b72; --err-soft: #3a1a1a;
    --info: #7aa2ff; --info-soft: #1a2747; --violet: #b394ff; --violet-soft: #2a2145;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
    --dot: #2c3343;
    --page: #090b11;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f121a; --surface: #171b26; --surface-2: #1d2230; --border: #2a3142; --border-2: #364057;
  --text: #e8ebf3; --muted: #a2a9bb; --faint: #7a8296;
  --accent: #6f8cff; --accent-2: #8aa1ff; --accent-soft: #1f2a4d; --on-accent: #0b1020;
  --ok: #3ccf91; --ok-soft: #12322a; --warn: #f0aa45; --warn-soft: #3a2a10; --err: #ff7b72; --err-soft: #3a1a1a;
  --info: #7aa2ff; --info-soft: #1a2747; --violet: #b394ff; --violet-soft: #2a2145;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --dot: #2c3343;
  --page: #090b11;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scrollbar-gutter: stable; } /* la pagina non si sposta quando compare/scompare la barra di scorrimento */
body { background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ── Layout gestionale ── */
/* barra laterale + colonna contenuti: un unico blocco centrato nella finestra */
.app { display: grid; grid-template-columns: 240px minmax(0, calc(600px + 64px)); justify-content: center; min-height: 100vh; background: var(--bg); }
.side { background: var(--bg); border-left: 1px solid var(--bg); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.brand .logo { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.brand b { display: block; font-size: 14px; }
.brand small { color: var(--muted); font-size: 12px; display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-weight: 500; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--accent); }
.nav a .cnt { margin-left: auto; font-size: 11px; background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-pill); padding: 1px 7px; font-weight: 600; }
.nav svg, .ico { width: 18px; height: 18px; flex: none; }
.side .spacer { flex: 1; }
.side .foot { display: flex; gap: 6px; padding: 8px 4px 0; border-top: 1px solid var(--border); }

main { min-width: 0; padding: 28px 32px 60px; width: 100%; }
.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-h h1 { font-size: 24px; font-weight: 700; }
.page-h p { margin: 4px 0 0; color: var(--muted); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Componenti ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-h { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-h h2 { font-size: 15px; font-weight: 600; }
.card-b { padding: 20px; }
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 20px; }
.kpi { padding: 18px 20px; }
.kpi .l { color: var(--muted); font-size: 13px; font-weight: 500; }
.kpi .v { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .s { font-size: 12px; color: var(--faint); }
.two { grid-template-columns: 1.4fr 1fr; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .12s, border-color .12s; }
.btn:hover { background: var(--surface-2); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.pri:hover { background: var(--accent-2); }
.btn.danger { color: var(--err); }
.btn.danger:hover { background: var(--err-soft); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn.lg { padding: 12px 20px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-da_inviare { background: var(--surface-2); color: var(--muted); }
.b-inviato { background: var(--info-soft); color: var(--info); }
.b-visualizzato { background: var(--violet-soft); color: var(--violet); }
.b-firmato { background: var(--ok-soft); color: var(--ok); }
.b-annullato { background: var(--err-soft); color: var(--err); }
.tag { display: inline-block; padding: 1px 8px; border-radius: var(--radius-sm); font-size: 12px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl td:first-child { min-width: 170px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .sub { color: var(--muted); font-size: 12px; }
.tbl-wrap { overflow-x: auto; }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty h3 { color: var(--text); font-size: 16px; margin-bottom: 6px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search { position: relative; flex: 1; min-width: 200px; } /* la ricerca sta in una card sua: larga quanto il contenitore */
.search input, .search input[type=text] { padding-left: 36px; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; color: var(--faint); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border); background: var(--surface); padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer; font-size: 13px; color: var(--muted); }
.chip.on { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }

/* ── Form ── */
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld > span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fld small { color: var(--faint); font-size: 12px; }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=password], input[type=tel], input[type=url], input:not([type]), select, textarea {
  width: 100%; border: 1px solid var(--border-2); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 11px; outline: none; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea { resize: none; overflow-y: hidden; min-height: 44px; line-height: 1.5; } /* altezza automatica (U.autoAltezza) */
textarea.code { font-family: var(--mono); font-size: 12.5px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.form-grid .w2 { grid-column: span 2; } .form-grid .w4 { grid-column: 1 / -1; }
.fs { border: 0; padding: 0; margin: 0 0 22px; }
.fs > legend, .fs-t { font-size: 13px; font-weight: 700; padding: 0; margin-bottom: 10px; color: var(--text); text-transform: uppercase; letter-spacing: .05em; }
.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.45; }
.check input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); flex: none; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── Modale ── */
/* Pannello sovrapposto alla colonna centrale (stesso componente dell'anteprima): sostituisce i pop-up */
.pannello { position: fixed; top: 0; bottom: 0; z-index: 80; display: flex; flex-direction: column; background: var(--bg); overflow-y: auto; scrollbar-gutter: stable; box-shadow: 0 0 0 1px var(--border), 0 18px 60px rgba(15, 20, 35, .28); animation: pv-in .18s ease-out; }
.pannello.compatto { bottom: auto; max-height: 100vh; }
.pannello-b { padding: 28px 32px 40px; flex: 1 0 auto; }
.pannello.compatto .pannello-b { flex: none; padding-bottom: 24px; }
.pannello.compatto .page-h { margin-bottom: 16px; }
.pannello.compatto .page-h h1 { font-size: 20px; }
@media (max-width: 760px) { .pannello-b { padding: 20px 16px 32px; } }
@keyframes fade { from { opacity: 0; } }

#toast-root { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 80; }
.toast { background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: var(--radius-sm); box-shadow: var(--shadow); max-width: 380px; font-weight: 500; transition: opacity .3s, transform .3s; }
.toast.err { background: var(--err); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }

.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13.5px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert.info { background: var(--info-soft); color: var(--info); }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.err { background: var(--err-soft); color: var(--err); }
.alert b { font-weight: 700; }

/* ── Composer invio ── */
.composer { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 20px; align-items: start; }
.composer .left { display: flex; flex-direction: column; gap: 16px; }
.step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; margin-right: 8px; }
.preview-wrap { position: sticky; top: 20px; }
.tabs { display: flex; gap: 2px; padding: 4px; background: var(--surface-2); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.tabs button { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; color: var(--muted); font-weight: 500; }
.tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.paper-scroll { max-height: calc(100vh - 170px); overflow: auto; background: var(--surface-2); padding: 24px; border-radius: 0 0 var(--radius) var(--radius); }
.chips-ph { display: flex; flex-wrap: wrap; gap: 5px; }
.chips-ph button { border: 1px solid var(--border); background: var(--surface-2); font-family: var(--mono); font-size: 11.5px; padding: 3px 7px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); }
.chips-ph button:hover { border-color: var(--accent); color: var(--accent); }

/* ── Documento (carta) ── */
.doc { background: #fff; color: #1b1b1b; font-family: var(--serif); font-variant-numeric: lining-nums; font-size: 15px; line-height: 1.62; max-width: 820px; margin: 0 auto; padding: 56px 64px; border-radius: var(--radius-xs); box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 30px rgba(0, 0, 0, .06); text-align: justify; hyphens: auto; }
.doc h1 { text-align: center; font-size: 19px; letter-spacing: .06em; margin: 0 0 20px; font-family: var(--serif); }
.doc h2 { font-size: 15.5px; margin: 22px 0 8px; font-family: var(--serif); }
.doc p { margin: 0 0 8px; }
.doc p.c { text-align: center; font-weight: 600; margin: 12px 0; }
.doc p.ind { padding-left: 42px; }
.doc p.cl { display: grid; grid-template-columns: 42px 1fr; }
.doc p.lt { display: grid; grid-template-columns: 26px 1fr; padding-left: 42px; }
.doc .n { font-weight: 600; }
.doc ul { margin: 2px 0 10px; padding-left: 64px; }
.doc li { margin-bottom: 3px; }
.doc mark.miss { background: #ffe1df; color: #b4231b; font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: var(--radius-xs); border: 1px dashed #e48a84; }
.doc .doc-close { margin-top: 26px; }
.doc .doc-cls { margin-top: 30px; padding-top: 18px; border-top: 1px solid #e6e6e6; }
.sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 18px 0 8px; break-inside: avoid; }
.sig { display: flex; flex-direction: column; }
.sig-lbl { font-size: 13px; color: #555; margin-bottom: 2px; }
.sig-box { height: 74px; display: flex; align-items: flex-end; justify-content: center; }
.sig-svg { height: 72px; width: 100%; }
.sig-line { border-top: 1px solid #333; }
.sig-name { font-size: 13.5px; text-align: center; margin-top: 4px; }
.audit { margin-top: 34px; border: 1px solid #cfd8ea; background: #f6f8fd; border-radius: var(--radius-sm); padding: 14px 18px; font-family: var(--font); font-size: 12px; text-align: left; color: #2a3350; break-inside: avoid; }
.audit-h { font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; color: #1a37a8; }
.audit p { margin: 0 0 8px; }
.audit dl { display: grid; grid-template-columns: 130px 1fr; gap: 3px 12px; margin: 0; }
.audit dt { font-weight: 600; color: #5a6380; }
.audit dd { margin: 0; overflow-wrap: anywhere; }
.audit .hash, .audit .ua { font-family: var(--mono); font-size: 11px; }

/* ── Scelta tipo documento (Nuovo invio) ── */
.tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; color: var(--text); font: inherit; transition: border-color .12s, background .12s; }
.tipo:hover { border-color: var(--border-2); background: var(--surface-2); }
.tipo .ico { width: 22px; height: 22px; color: var(--muted); margin-bottom: 4px; }
.tipo b { font-size: 14px; }
.tipo span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.tipo.on { border-color: var(--accent); background: var(--surface); }
.tipo.on .ico { color: var(--accent); }

/* ── Portale avviso: box pagamento ── */
.pay-box { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.pay-box.bonifico { align-items: flex-start; flex-wrap: nowrap; }
.pay-qr { flex: none; width: 132px; height: 132px; background: #fff; border-radius: var(--radius-sm); padding: 4px; border: 1px solid var(--border); }
.pay-qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 520px) { .pay-box.bonifico { flex-direction: column; } }

/* ── Anteprima email nella colonna ── */
.email-prev { padding-top: 6px; }
.email-head { margin: 0 0 14px; border-top: 0; padding-top: 0; }
.email-body { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.email-body > div { padding: 16px 8px !important; }

/* ── Impostazioni: elenco sezioni e moduli a una colonna ── */
.set-list { display: flex; flex-direction: column; gap: 10px; }
.set-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: border-color .12s; }
.set-item:hover { border-color: var(--accent); }
.set-ic { flex: none; width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.set-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.set-txt b { font-size: 15px; }
.set-txt > span { font-size: 13px; color: var(--muted); }
.set-st { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.set-st.ok { color: var(--ok); } .set-st.warn { color: var(--warn); } .set-st.info { color: var(--violet); }
.set-chev { flex: none; font-size: 22px; color: var(--faint); }
.set-form { display: flex; flex-direction: column; gap: 14px; }
.set-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.set-form .btn { align-self: flex-start; }
.color-in { width: 100%; height: 40px; padding: 3px !important; }
@media (max-width: 480px) { .set-pair { grid-template-columns: 1fr; } .set-form .btn { align-self: stretch; } }

/* sintassi del testo dei modelli */
.sintassi { display: flex; flex-wrap: wrap; gap: 6px; }
.sintassi span { font-size: 12px; color: var(--muted); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.sintassi code { font-family: var(--mono); font-weight: 700; color: var(--text); margin-right: 3px; }

/* ── Servizi del cliente, righe avviso calcolate, listino ── */
.riga-av { margin-bottom: 10px; }
.riga-calc { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.riga-calc input { width: 90px; text-align: right; }
input.calc { background: var(--surface-2); color: var(--muted); }
.ls-sez { margin-bottom: 22px; }

/* ── Elenchi a card ── */
.chip-n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--faint); font-size: 11px; font-weight: 600; text-align: center; }
.chip.on .chip-n { background: var(--surface); color: var(--accent); }
.it-off { opacity: .62; box-shadow: none; }
.it-off:hover { opacity: .85; }
.lst-out { margin-top: 14px; }
.lst { display: flex; flex-direction: column; gap: 10px; }
.card > .lst { padding: 14px; }
.it { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; box-shadow: var(--shadow); transition: border-color .12s, transform .12s; }
.card > .lst .it { box-shadow: none; }
.it:hover { border-color: var(--border-2); }
.it:focus { outline: none; }
.it:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.it-top { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.it-main { min-width: 0; flex: 1; }
.it-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 9px; margin: 12px -16px -14px; padding: 7px 12px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); cursor: default; }
/* comandi testuali in stile Notion, separati da un divisore verticale */
.it-bar .btn { position: relative; border: 0; background: transparent; box-shadow: none; padding: 4px 6px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 500; color: var(--muted); }
.it-bar .btn:hover { background: var(--surface-2); color: var(--text); }
.it-bar .btn.pri { color: var(--accent); font-weight: 600; }
.it-bar .btn.pri:hover { background: var(--accent-soft); color: var(--accent); }
.it-bar .btn.danger { color: var(--err); }
.it-bar .btn.danger:hover { background: var(--err-soft); color: var(--err); }
.it-bar .btn .ico, .it-bar .btn svg { display: none; }
.it-bar > * + *::before { content: ''; position: absolute; left: -5.5px; top: 22%; bottom: 22%; width: 1px; background: var(--border-2); pointer-events: none; }
.it-t { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.it-s { color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.it-m { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 0; margin: 10px 0 0; padding-top: 4px; border-top: 1px solid var(--border); font-size: 13px; }
.it-m dt { color: var(--muted); padding-right: 12px !important; }
.it-m dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
/* divisore orizzontale a puntini tra una voce e l'altra */
.it-m dt, .it-m dd { padding: 6px 0; border-bottom: 1px dotted var(--dot); }
.it-m dt:last-of-type, .it-m dd:last-of-type { border-bottom: 0; }
.it-m .tk { margin-left: 0; margin-right: 4px; }
@media (max-width: 480px) { .it-m { grid-template-columns: 1fr; gap: 0; } .it-m dt { border-bottom: 0; padding-bottom: 0; } .it-bar { justify-content: flex-start; } }
.it-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; text-align: right; }
.it-amt { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ── Contratto di riferimento (avviso da rata) ── */
.ctr-info { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }
.ctr-info .ico { color: var(--accent); margin-top: 2px; }

/* ── Campo di selezione (apre una pagina elenco) ── */
.pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); transition: border-color .12s, background .12s; }
.pick:hover { border-color: var(--accent); background: var(--surface-2); }
.pick:disabled { cursor: default; opacity: .7; }
.pick-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pick-main b { font-size: 14.5px; font-weight: 600; }
.pick-main span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.pick-act { flex: none; color: var(--accent); font-weight: 600; font-size: 13px; }

/* ── Card orizzontali di scelta (tipologia) ── */
.opt-list { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--border-2); background: var(--surface-2); }
.opt.on { border-color: var(--accent); background: var(--surface); }
.opt-dot { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--surface); }
.opt.on .opt-dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 4px, var(--surface) 5px); }
.opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opt-body b { font-size: 14px; font-weight: 600; }
.opt-desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.opt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.opt-tags .tag { font-size: 11px; padding: 0 6px; }
.opt-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--ok); background: var(--ok-soft); border-radius: var(--radius-pill); padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }

/* ── Selettore Email / PEC ── */
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); gap: 2px; flex-wrap: wrap; }
.seg label { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; color: var(--muted); }
.seg label input { display: none; }
.seg label.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg label.off { opacity: .6; }
.seg label small { font-weight: 400; font-size: 11px; }

/* ── Tracciamento avvisi ── */
.tk { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--info-soft); color: var(--info); margin-left: 4px; white-space: nowrap; }
.tk-ok { background: var(--ok-soft); color: var(--ok); }
.tk-pay { background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.tk-dim { background: var(--surface-2); color: var(--muted); }
.steps-v { list-style: none; margin: 0; padding: 0; }
.steps-v li { position: relative; padding: 0 0 12px 26px; display: flex; flex-direction: column; }
.steps-v li::before { content: ''; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--surface); box-sizing: border-box; }
.steps-v li.done::before { background: var(--ok); border-color: var(--ok); }
.steps-v li::after { content: ''; position: absolute; left: 6.5px; top: 19px; bottom: 2px; width: 1px; background: var(--border); }
.steps-v li:last-child::after { display: none; }
.steps-v b { font-weight: 600; font-size: 13.5px; } .steps-v li:not(.done) b { color: var(--muted); font-weight: 500; }
.steps-v span { font-size: 12px; color: var(--faint); }

/* ── Timeline ── */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { position: relative; padding: 0 0 14px 22px; }
.tl li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.tl li::after { content: ''; position: absolute; left: 7.5px; top: 16px; bottom: 0; width: 1px; background: var(--border); }
.tl li:last-child::after { display: none; }
.tl .t { font-size: 12px; color: var(--faint); }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.linkbox { display: flex; gap: 6px; }
.linkbox input { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.mt { margin-top: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pin { font-family: var(--mono); font-size: 22px; letter-spacing: .25em; font-weight: 700; color: var(--accent); }

/* ── Login ── */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .card { width: min(400px, 100%); padding: 32px; }
.login h1 { font-size: 22px; margin: 14px 0 4px; }

/* ── Portale clienti ── */
.portal { min-height: 100vh; display: flex; flex-direction: column; }
.p-top { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 20px; }
.p-top .in { max-width: 600px; margin: 0 auto; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.p-main { flex: 1; width: 100%; max-width: calc(600px + 32px); margin: 0 auto; padding: 24px 16px 120px; }
.p-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.p-access { max-width: 460px; margin: 6vh auto 0; }
.p-access h1 { font-size: 22px; margin-bottom: 6px; }
.lock { width: 48px; height: 48px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin-bottom: 16px; }
.steps { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.steps span { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--faint); font-weight: 500; }
.steps span b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; }
.steps span.on { color: var(--text); }
.steps span.on b { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.steps span.done b { background: var(--ok); color: #fff; border-color: var(--ok); }
.steps i { width: 22px; height: 1px; background: var(--border-2); align-self: center; }
.sign-panel { margin-top: 24px; }
.pad-wrap { border: 1.5px dashed var(--border-2); border-radius: var(--radius); background: #fff; position: relative; touch-action: none; }
.pad-wrap canvas { width: 100%; aspect-ratio: 5 / 2; display: block; cursor: crosshair; touch-action: none; border-radius: var(--radius); }
.pad-wrap .hint { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; color: #b8bdc9; pointer-events: none; font-size: 14px; }
.pad-wrap .baseline { position: absolute; left: 8%; right: 8%; bottom: 20%; border-top: 1px solid #e3e6ee; pointer-events: none; }
.pad-tools { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 8px; flex-wrap: wrap; }
.sign-block { padding: 20px 0; border-top: 1px solid var(--border); }
.sign-block:first-of-type { border-top: 0; }
.sign-block h3 { font-size: 15px; margin-bottom: 4px; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0, 0, 0, .06); z-index: 20; }
.sticky-cta .in { max-width: 600px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress { height: 4px; background: var(--border); border-radius: var(--radius-xs); overflow: hidden; flex: 1; max-width: 260px; }
.progress div { height: 100%; background: var(--accent); width: 0; transition: width .15s; }
.success-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin: 0 auto 16px; }
.spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

#print-root { display: none; }

/* ── Responsive ── */
@media (max-width: 1100px) { .two { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .composer, .detail { grid-template-columns: 1fr !important; }
  .preview-wrap { position: static; }
}
@media (max-width: 860px) {
  main { padding: 20px 16px 60px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc { padding: 28px 20px; font-size: 14.5px; }
  .doc ul { padding-left: 32px; } .doc p.ind, .doc p.lt { padding-left: 0; }
  .sigs { gap: 18px; }
  .paper-scroll { padding: 10px; }
  .kv { grid-template-columns: 1fr; gap: 0 0; } .kv dd { margin-bottom: 8px; }
  .audit dl { grid-template-columns: 1fr; }
  .p-card { padding: 22px 18px; }
  .tbl .hide-m { display: none; }
  .p-top .muted { display: none; }
}

/* ── Telefono: barra in alto (logo a sinistra; Dashboard, Nuovo invio e Menu a destra) e menu a card per settore ── */
.mtop, .mback, .side-x, .nav-t { display: none; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; background: var(--bg); }
  main { border-right: 0; }
  .mtop { display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 40; padding: 8px 8px 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border); }
  .mtop-brand { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; }
  .mtop-brand .logo { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 12.5px; flex: none; }
  .mtop-ics { display: flex; align-items: center; }
  .mtop-ic { position: relative; display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; }
  .mtop-ic:hover { background: var(--surface-2); }
  .mtop-ic .ico { width: 21px; height: 21px; }
  .mtop-ic.acc { color: var(--accent); }
  .mtop-ic + .mtop-ic::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--border-2); }
  .mtop-dot { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--bg); }
  /* menu a tutta larghezza */
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 100%; height: auto; border: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; background: var(--bg); transform: translateX(-100%); transition: transform .22s ease; }
  body.menu-aperto .side { transform: none; }
  .side .brand { position: relative; padding: 4px 48px 8px 4px; }
  .side-x { display: grid; place-items: center; position: absolute; right: 0; top: 0; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
  .side-x:hover { background: var(--surface-2); color: var(--text); }
  .side .spacer { flex: 0 0 8px; }
  /* voci come card orizzontali: icona, nome, contatore, freccia */
  .app .side .nav { display: flex; flex-direction: column; gap: 8px; }
  .app .side .nav-t { display: block; margin: 14px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .app .side .nav-t:first-child { margin-top: 4px; }
  .app .side .nav a { gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 600; }
  .app .side .nav a:hover { background: var(--surface-2); }
  .app .side .nav a > .ico { width: 20px; height: 20px; padding: 8px; box-sizing: content-box; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent); }
  .app .side .nav a .lbl { flex: 1; min-width: 0; }
  .app .side .nav a .cnt { margin-left: 0; }
  .app .side .nav a::after { content: '›'; color: var(--faint); font-size: 20px; line-height: 1; font-weight: 400; }
  .app .side .nav a.on { border-color: var(--accent); background: var(--accent-soft); }
  .app .side .nav a.on > .ico { background: var(--surface); }
  .mback { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 15, 15, .35); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  body.menu-aperto .mback { opacity: 1; pointer-events: auto; }
  body.menu-aperto { overflow: hidden; }
}

/* ── Stampa / PDF ── */
@media print {
  @page { size: A4; margin: 16mm 14mm; }
  body { background: #fff !important; }
  body.print-mode > :not(#print-root) { display: none !important; }
  body.print-mode #print-root { display: block !important; }
  .doc { box-shadow: none; padding: 0; max-width: none; font-size: 11.5pt; }
  .doc h2 { break-after: avoid; }
  .audit { background: #fff; }
}

/* ── Dettaglio contratto ── */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* ── Pagine operative su colonna unica (desktop e mobile) ── */
/* larghezza utile = foglio A4 (210 mm ≈ 794 px) + margini laterali della pagina */
/* colonna centrale fissa a 600 px su tutte le pagine (anteprima a schermo intero in formato A4) */
main { background: var(--bg); border-right: 1px solid var(--bg); }
main.single .doc { max-width: 100%; padding: 36px 32px; font-size: 14px; }
main.single .preview-wrap.open .doc { max-width: 100%; padding: 36px 32px; font-size: 14px; }
main.single .composer { display: block; }
main.single .composer > .left { display: flex; flex-direction: column; gap: 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
main.single .composer > .preview-wrap { display: none; position: static; }
main.single .composer > .preview-wrap.open { display: block; position: fixed; top: 0; bottom: 0; z-index: 70; background: var(--bg); overflow-y: auto; scrollbar-gutter: stable; padding-bottom: 40px; box-shadow: 0 0 0 1px var(--border), 0 18px 60px rgba(15, 20, 35, .28); animation: pv-in .18s ease-out; }
main.single .preview-wrap.open > .card { margin: 16px 16px 0; border: 0; box-shadow: none; background: transparent; }
main.single .preview-wrap.open > .card > .card-h { position: sticky; top: 58px; z-index: 4; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
main.single .preview-wrap.open .paper-scroll { padding: 14px 0 0; }
.pv-backdrop { position: fixed; inset: 0; z-index: 69; background: rgba(15, 20, 35, .28); animation: fade .18s; }
@keyframes pv-in { from { opacity: 0; transform: translateY(12px); } }
main.single .paper-scroll { max-height: none !important; overflow: visible; background: transparent; border-radius: 0; }
main.single .detail { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
main.single .detail > .grid { order: -1; }
main.single .detail > .paper-scroll { padding: 0; }
.pv-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
body.noscroll { overflow: hidden; }
details.card > summary { list-style: none; } details.card > summary::-webkit-details-marker { display: none; }
details.card:not([open]) > summary { border-bottom: 0; }
@media (max-width: 760px) {
  main.single .doc { padding: 28px 20px; }
  main.single .preview-wrap.open > .card > .card-h { top: 54px; }
}
.card > .toolbar:last-child { border-bottom: 0; }

/* ── Documento in versione «app» (lettura su smartphone) ── */
.doc-app { font-family: var(--font); font-size: 15.5px; line-height: 1.65; color: var(--text); text-align: left; hyphens: manual; }
.doc-app h1 { font-size: 19px; line-height: 1.3; margin: 4px 0 14px; letter-spacing: -.01em; }
.doc-app h2 { font-size: 16px; margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); scroll-margin-top: 16px; }
.doc-app p { margin: 0 0 10px; }
.doc-app p.c { display: inline-block; margin: 14px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 2px 10px; border-radius: var(--radius-pill); }
.doc-app p.ind { padding-left: 0; color: var(--muted); }
.doc-app p.cl, .doc-app p.lt { display: block; }
.doc-app p.cl .n, .doc-app p.lt .n { display: inline-block; min-width: 30px; margin-right: 6px; padding: 0 7px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.6; }
.doc-app ul { margin: 4px 0 12px; padding-left: 20px; }
.doc-app li { margin-bottom: 6px; }
.doc-app li::marker { color: var(--accent); }
.doc-app mark.miss { background: var(--err-soft); color: var(--err); font-size: 12px; padding: 1px 5px; border-radius: var(--radius-xs); }
.app-indice { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px; }
.app-indice-t { width: 100%; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.app-indice a { font-size: 13px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.app-chiusura, .app-clausole { margin-top: 22px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); font-size: 14.5px; }
.app-sigs { display: grid; gap: 10px; margin-top: 12px; }
.app-sig { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); }
.app-sig-l { font-size: 12px; color: var(--muted); }
.app-sig-img svg { height: 60px; width: 100%; }
.app-sig-n { font-weight: 600; font-size: 14px; }
.doc-app .audit { font-family: var(--font); margin-top: 18px; }
/* avviso in versione app */
.pa-head { display: grid; gap: 12px; margin-bottom: 18px; }
.pa-head > div { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); }
.pa-l { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pa-s { font-size: 13px; color: var(--muted); }
.pa-sez { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 0 4px; }
.pa-r { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dotted var(--dot); font-size: 15px; }
.pa-r b { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.pa-r small { color: var(--muted); font-size: 12px; }
.pa-r.pa-m { color: var(--muted); font-size: 14px; } .pa-r.pa-m b { font-weight: 500; }
.pa-r.pa-sub { font-weight: 600; }
.pa-netto { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.pa-netto b { font-size: 22px; font-variant-numeric: tabular-nums; }
.pa-note { margin-top: 12px; font-size: 13.5px; color: var(--muted); }

/* versione app dentro le anteprime del gestionale */
.paper-scroll .doc-app, .paper-scroll .doc-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 18px; }
.paper-scroll .doc-box > .doc-app { border: 0; padding: 0; }
main.single .detail > .doc-card { order: 0; }
.doc-card > summary { cursor: pointer; }
.doc-card > summary .doc-sum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-card > summary .doc-sum b { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.doc-card > summary .doc-sum b .ico { color: var(--accent); }
.doc-card > summary .doc-sum .muted { font-size: 12.5px; }
.doc-chev { font-size: 22px; color: var(--accent); transition: transform .15s; flex: none; }
.doc-card[open] .doc-chev { transform: rotate(90deg); }
.doc-card[open] > summary .doc-sum .muted { visibility: hidden; }
.doc-card[open] > summary { border-bottom: 1px solid var(--border); }

/* ── Portale firma: documento a fisarmonica e dichiarazione bloccata ── */
.doc-acc { margin-top: 16px; border: 1.5px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.doc-acc.letto { border-color: var(--ok); background: var(--ok-soft); }
.doc-acc > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.doc-acc > summary::-webkit-details-marker { display: none; }
.doc-acc > summary > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; font-size: 15px; }
.doc-acc > summary .muted { font-size: 12.5px; }
.doc-acc.letto > summary .muted { color: var(--ok); font-weight: 600; }
.doc-acc-ico { font-size: 22px; }
.doc-acc-chev { font-size: 22px; color: var(--accent); transition: transform .15s; }
.doc-acc[open] .doc-acc-chev { transform: rotate(90deg); }
.doc-acc-body { padding: 14px 14px 16px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.doc-acc-body .doc-app { padding: 6px 6px 0; }
.check.lock { opacity: .6; cursor: pointer; }
.lock-hint { display: none; color: var(--warn); font-size: 12.5px; margin-top: 4px; }
.check.lock .lock-hint { display: block; }
.check > span { display: flex; flex-direction: column; }

/* ── Portali clienti (firma e avviso): ottimizzati per smartphone ── */
.portal .doc { padding: 36px 28px; font-size: 14.5px; }
.portal .pay-box .btn.lg { flex: none; }
.portal .importo { text-align: right; }
.cta-m { display: none; }
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; } /* evita lo zoom automatico di iOS sui campi */
}
@media (max-width: 600px) {
  .p-top { padding: 12px 16px; }
  .p-main { padding: 14px 12px 110px; }
  .p-card { padding: 18px 16px; border-radius: var(--radius); }
  .p-access { margin-top: 2vh; }
  .portal .btn { min-height: 44px; }
  .portal .btn.sm { min-height: 36px; }
  .portal .row > .btn, .portal .pay-box > .btn { flex: 1 1 100%; }
  .portal .doc { padding: 22px 16px; font-size: 14px; border-radius: var(--radius-sm); }
  .portal .doc h1 { font-size: 16px; }
  .portal .doc ul { padding-left: 22px; }
  .portal .doc p.cl { grid-template-columns: 34px 1fr; }
  .portal .sigs { grid-template-columns: 1fr; gap: 26px; }
  .portal .audit dl { grid-template-columns: 1fr; } .portal .audit dd { margin-bottom: 6px; }
  .steps { gap: 4px 6px; } .steps span { font-size: 12px; } .steps i { width: 10px; }
  .steps { flex-wrap: nowrap; align-items: center; }
  .steps span:not(.on) { font-size: 0; gap: 0; } .steps span:not(.on) b { font-size: 12px; } /* solo il passo corrente con etichetta */
  .steps span.on { font-size: 13px; font-weight: 600; }
  .pay-box { padding: 14px; }
  .pay-qr, .qr-hint { display: none; } /* sul telefono il QR non serve: si usano i pulsanti Copia */
  .portal .importo { text-align: left; width: 100%; }
  .dup-m { display: none !important; } /* l'azione principale è nella barra in basso */
  .pay-box.bonifico .it-m { grid-template-columns: 1fr; }
  .pay-box.bonifico .it-m dt { border-bottom: 0; padding-bottom: 0; }
  .sign-block h3 { font-size: 15.5px; }
  .pad-tools { flex-wrap: nowrap; } .pad-tools .row { flex-wrap: nowrap; gap: 6px; }
  .pad-tools .row > .btn { flex: 0 1 auto; min-height: 40px; }
  .check { font-size: 14.5px; } .check input { width: 22px; height: 22px; }
  /* avviso nel portale: intestazione studio / cliente una sotto l'altra */
  .portal .parcella > table:first-child td { display: block; width: auto !important; padding: 0 0 14px !important; }
  .portal .parcella { font-size: 13.5px !important; }
  /* barra azione fissa in basso */
  .cta-m { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--border); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,.08); }
  .cta-m .btn { width: 100%; min-height: 48px; font-size: 16px; }
  .sticky-cta { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .sticky-cta .btn { min-height: 44px; }
}

/* ── Pagina cliente e modulo cliente (colonna unica) ── */
.cli-form .card { margin-bottom: 14px; }
.cli-form .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cli-form .form-grid .w2 { grid-column: 1 / -1; }

/* ════════════════════════════════════════════════════════════════
   Componenti master e utilità — usati da tutte le pagine al posto degli stili inline.
   (Le email restano con stili inline: i client di posta non leggono questo foglio.)
   ════════════════════════════════════════════════════════════════ */
/* Intestazione pagina: link «← indietro» sopra il titolo */
.back { display: inline-block; margin-bottom: 4px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back:hover { color: var(--text); }
.plain { color: inherit; text-decoration: none; }
/* Titoli di sezione fuori dalle card */
.fs-t.sec { margin: 22px 0 10px; }
.fs-sub { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
/* Barre di pulsanti */
.row.end { justify-content: flex-end; }
.row.between, .alert.between { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.bar-card { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.it:not([data-href]):not([data-id]) { cursor: default; }
/* Griglie dei moduli */
.form-grid.g1 { grid-template-columns: 1fr; }
.form-grid.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv.kv-s { grid-template-columns: 110px 1fr; }
fieldset.bare { border: 0; padding: 0; margin: 0; }
/* Testo */
.t-xxs { font-size: 11px; } .t-xs { font-size: 12px; } .t-s { font-size: 13px; }
.t-warn { color: var(--warn); } .t-err { color: var(--err); } .t-ok { color: var(--ok); } .t-text { color: var(--text); } .t-accent { color: var(--accent); }
.fw6 { font-weight: 600; } .center { text-align: center; } .num { font-variant-numeric: tabular-nums; }
.v.v-l { font-size: 24px; } .pin.pin-l { font-size: 18px; }
.h-s { font-size: 15px; font-weight: 600; margin: 4px 0 0; } .h-m { font-size: 19px; } .h-l { font-size: 24px; }
.amt-xl { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lead { margin: 0 auto 18px; max-width: 520px; }
.decl { margin: 6px 0 12px; font-family: var(--serif); font-size: 14px; }
.ol-steps { line-height: 1.8; padding-left: 20px; margin: 8px 0 0; font-size: 13.5px; }
/* Spaziature (in ordine: le più specifiche dopo) */
.m0 { margin: 0; } .p0 { padding: 0; } .p-s { padding: 14px 16px; }
.mt0 { margin-top: 0; } .mt { margin-top: 16px; } .mt-xxs { margin-top: 4px; } .mt-s { margin-top: 8px; } .mt-l { margin-top: 22px; }
.mb-xxs { margin-bottom: 4px; } .mb-xs { margin-bottom: 6px; } .mb-s { margin-bottom: 10px; } .mb { margin-bottom: 16px; } .mb-l { margin-bottom: 22px; }
.mr-auto { margin-right: auto; }
.gap-l { gap: 18px; } .ai-end { align-items: flex-end; } .ai-start { align-items: flex-start; } .ac-start { align-content: start; }
.grow { flex: 1; min-width: 0; }
/* Larghezze */
.w100 { width: 100%; } .w-auto { width: auto; } .w-s { width: 200px; max-width: 100%; }
input.amt-in { width: 110px; text-align: right; }
.empty-full { padding-top: 20vh; }
.paper-scroll.ps-h { max-height: calc(100vh - 360px); }
.it-m.flat { border-top: 0; margin-top: 0; padding-top: 0; }
.it-m.flat.mt-s { margin-top: 8px; }
.lock.lock-err { margin: 0 auto 16px; background: var(--err-soft); color: var(--err); }
/* Totali dell'avviso */
.tot-r { display: flex; justify-content: space-between; padding: 4px 0; }
.tot-r.tot-b { font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.btn.ghost.danger { color: var(--err); }

/* ── Allegati delle registrazioni ── */
.all-list { display: flex; flex-direction: column; }
.all-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--dot); font-size: 13.5px; min-width: 0; }
.all-row:last-child { border-bottom: 0; }
.all-row .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.all-link { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); text-decoration: none; margin-right: 10px; overflow-wrap: anywhere; }
.all-link:hover { text-decoration: underline; }
.all-link .ico, .all-row .ico { width: 14px; height: 14px; flex: none; }
.b-studio { background: var(--accent-soft); color: var(--accent); }

/* ── Comandi nelle card: sempre in colonna, a tutta larghezza (più comodi da toccare su mobile) ── */
.cmds { display: flex; flex-direction: column; gap: 8px; }
.cmds > .btn { width: 100%; justify-content: center; padding-top: 9px; padding-bottom: 9px; }

/* ── Area riservata del cliente ── */
.it.it-static { cursor: default; }
.btn.is-off { opacity: .45; cursor: not-allowed; pointer-events: none; }
.ro-bar { position: sticky; top: 8px; z-index: 5; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); border: 1px solid currentColor; font-size: 13.5px; }
.ro-bar svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.ro-bar b { display: block; }
.ro-bar span { color: var(--text); opacity: .8; }
/* anteprima: nulla è cliccabile */
.ro-mode .p-main a, .ro-mode .p-main button, .ro-mode .p-main input, .ro-mode .p-main form { pointer-events: none; }
.d-block { display: block; }
.sic-bar { align-items: center; flex-wrap: wrap; }
.side .utente { display: flex; align-items: center; gap: 6px; padding: 8px 10px 0; overflow: hidden; }
.side .utente .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .utente .ico { width: 14px; height: 14px; flex: none; }
/* segmento con pulsanti (scelta PIN / password nel portale) */
.seg.w100 { display: flex; }
.seg > button { flex: 1; border: 0; background: transparent; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-weight: 500; color: var(--muted); }
.seg > button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }

/* ── Profili dello studio: elementi riservati (il controllo vero è sul server) ── */
body.ass .solo-tit, body.no-inc .solo-inc, body.no-eco .solo-eco, body.no-invio .solo-invio { display: none !important; }

/* ── Avviso: «Cosa fatturare» (card di scelta a selezione multipla) ── */
.voci-gr { margin-bottom: 14px; }
.voci-t { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.opt-multi .opt-dot { border-radius: var(--radius-xs); }
.opt-multi.on .opt-dot { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; border-color: var(--accent); }
.opt-amt { flex: none; margin-left: auto; padding-left: 8px; font-size: 14px; white-space: nowrap; }
.opt-multi:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ── Avviso: riepilogo fiscale (ritenuta dall'anagrafica) ── */
.fisc-box { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.fisc-r { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.fisc-mod summary { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 500; }
.voci-cards { display: flex; flex-direction: column; gap: 16px; }
.pick.pick-lock { cursor: default; background: var(--surface-2); border-style: dashed; }
.pick.pick-lock:hover { border-color: var(--border-2); background: var(--surface-2); }
.pick-lock .pick-act { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.pick-lock .pick-act .ico { width: 13px; height: 13px; }

/* ── Controllo prima dell'invio ── */
.chk-esito { padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
.chk-esito.ok { background: var(--ok-soft); color: var(--ok); }
.chk-esito.warn { background: var(--warn-soft); color: var(--warn); }
.chk-esito.err { background: var(--err-soft); color: var(--err); }
.chk-list { display: flex; flex-direction: column; }
.chk { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px dotted var(--dot); font-size: 13.5px; }
.chk:last-child { border-bottom: 0; }
.chk-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; margin-top: 1px; }
.chk.ok .chk-ic { background: var(--ok); }
.chk.warn .chk-ic { background: var(--warn); }
.chk.err .chk-ic { background: var(--err); }
[data-pv-btns] .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Colore dello studio: tavolozza e anteprima ── */
.sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 520px) { .sw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sw { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; color: var(--text); text-align: left; }
.sw:hover { border-color: var(--border-2); }
.sw.on { border-color: var(--accent); background: var(--surface); font-weight: 600; }
.sw-c { display: block; height: 34px; border-radius: var(--radius-sm); background: var(--sw); }
.sw-in { width: 100%; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; }
.sw-in::-webkit-color-swatch-wrapper { padding: 0; } .sw-in::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
.pv-col { display: flex; flex-direction: column; gap: 8px; }
.pv-sez { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.pv-app { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.pv-app .brand { padding: 0; margin: 0; }
.pv-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pv-row .step-n { margin: 0; }
.pv-mail { border: 1px solid #e3e6ee; border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.pv-mail-b { padding: 2px 20px 6px; }
.pv-pdf { background: #fff; color: #1b1b1b; border: 1px solid #e3e6ee; border-radius: var(--radius-sm); padding: 0 16px 14px; font-family: var(--serif); font-size: 13px; }
.pv-pdf-top { height: 5px; background: var(--pc); margin: 0 -16px 12px; }
.pv-pdf-t { display: block; text-align: center; color: var(--pc); letter-spacing: .05em; margin-bottom: 10px; }
.pv-pdf-r { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid #ececec; }
.pv-pdf-r.h { background: var(--pc); color: var(--ps); font-family: var(--font); font-size: 10.5px; font-weight: 700; border: 0; }
.pv-pdf-r.tot { background: var(--pt); font-weight: 700; border: 0; }
.pv-pdf-r.fin { background: var(--pc); color: var(--ps); font-weight: 700; border: 0; }

/* ── Area riservata del cliente: cruscotto e pagine interne ── */
.ar-hero { margin-bottom: 14px; }
.ar-stato { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); }
.ar-stato b { font-size: 15px; } .ar-stato span { font-size: 13px; }
.ar-stato.ok { background: var(--ok-soft); color: var(--ok); }
.ar-stato.warn { background: var(--warn-soft); color: var(--warn); }
.ar-imp { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; padding: 14px 16px; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); text-decoration: none; box-shadow: var(--shadow); }
.ar-imp span { font-size: 13px; opacity: .85; }
.ar-box { margin-top: 14px; padding: 16px 18px; }
.ar-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ar-h h2 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 8px; }
.ar-h a { font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ar-n { font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); }
.ar-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0; }
.ar-box > .ar-row:last-child, .ar-box > .ar-nota:last-child { border-bottom: 0; }
a.ar-row:hover b { color: var(--accent); }
.ar-row-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ar-row-m b { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ar-row-m span { font-size: 12.5px; color: var(--muted); }
.ar-row-r { flex: none; }
.ar-chev { color: var(--faint); font-size: 18px; flex: none; }
.ar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.ar-nota { margin: -4px 0 0; padding: 0 0 10px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border); }
.ar-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-kpi > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.ar-kpi span { font-size: 12px; color: var(--muted); } .ar-kpi b { font-size: 19px; font-variant-numeric: tabular-nums; } .ar-kpi small { font-size: 12px; color: var(--muted); }
.ar-page-h { margin-bottom: 4px; }
.ar-scad { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); }
.com-testo { font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.com-testo p { margin: 0 0 12px; } .com-testo p:last-child { margin-bottom: 0; }
.it-s .com-testo { font-size: 14px; color: var(--text); margin-top: 6px; }
@media (min-width: 520px) { .opt-grid .opt-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ar-file { padding: 12px; }
.ar-file-v iframe { display: block; width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.ar-file-v img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-sm); }
.ar-file-na { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--surface-2); border-radius: var(--radius-sm); }
.ar-file-na span { font-size: 13px; color: var(--muted); }

/* ═════════ Tema «Notion» (Impostazioni → Aspetto): fondi caldi, card piatte, etichette pastello ═════════ */
:root[data-tema="notion"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f5; --border: #ebebe9; --border-2: #deddda;
  --text: #37352f; --muted: #787774; --faint: #a5a29c; --dot: #efeeec; --page: #f7f7f5;
  --hover: rgba(55, 53, 47, .06); --hover-2: rgba(55, 53, 47, .1);
  --ok: #448361; --ok-soft: #edf3ec; --warn: #c0681a; --warn-soft: #fbecdd; --err: #d44c47; --err-soft: #fdebec;
  --info: #337ea9; --info-soft: #e7f3f8; --violet: #9065b0; --violet-soft: #f6f3f9;
  --shadow: none;
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-tema="notion"]:not([data-theme="light"]) {
    --bg: #191919; --surface: #191919; --surface-2: #202020; --border: #2c2c2c; --border-2: #373737;
    --text: #d4d4d4; --muted: #9b9b9b; --faint: #737373; --dot: #282828; --page: #121212;
    --hover: rgba(255, 255, 255, .055); --hover-2: rgba(255, 255, 255, .09);
    --ok: #6ac18f; --ok-soft: #1f3329; --warn: #e3a14e; --warn-soft: #3b2a14; --err: #e5706b; --err-soft: #3e2121;
    --info: #5ea7d6; --info-soft: #1c2e3d; --violet: #a988d8; --violet-soft: #2d2438;
  }
}
:root[data-tema="notion"][data-theme="dark"] {
  --bg: #191919; --surface: #191919; --surface-2: #202020; --border: #2c2c2c; --border-2: #373737;
  --text: #d4d4d4; --muted: #9b9b9b; --faint: #737373; --dot: #282828; --page: #121212;
  --hover: rgba(255, 255, 255, .055); --hover-2: rgba(255, 255, 255, .09);
  --ok: #6ac18f; --ok-soft: #1f3329; --warn: #e3a14e; --warn-soft: #3b2a14; --err: #e5706b; --err-soft: #3e2121;
  --info: #5ea7d6; --info-soft: #1c2e3d; --violet: #a988d8; --violet-soft: #2d2438;
}
/* menu laterale: voci compatte, attiva in grigio (il colore dello studio solo sull'icona) */
[data-tema="notion"] .nav a { padding: 6px 10px; color: var(--muted); font-weight: 500; }
[data-tema="notion"] .nav a:hover { background: var(--hover); color: var(--text); }
[data-tema="notion"] .nav a.on { background: var(--hover-2); color: var(--text); font-weight: 600; }
[data-tema="notion"] .nav a.on .ico { color: var(--accent); }
/* titoli più grandi, sezioni discrete */
[data-tema="notion"] .page-h h1 { font-size: 30px; letter-spacing: -.02em; }
[data-tema="notion"] .fs-t { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
/* card e voci piatte */
[data-tema="notion"] .card, [data-tema="notion"] .it, [data-tema="notion"] .p-card { box-shadow: none; }
[data-tema="notion"] .it:hover { border-color: var(--border-2); background: var(--surface); }
[data-tema="notion"] .card-h { border-bottom-color: var(--border); }
[data-tema="notion"] .it-m dt, [data-tema="notion"] .it-m dd { border-bottom-style: solid; }
[data-tema="notion"] .it-bar { background: transparent; }
/* bottoni leggeri; pieno solo l'azione principale */
[data-tema="notion"] .btn { border-color: var(--border-2); background: var(--surface); font-weight: 500; }
[data-tema="notion"] .btn:hover { background: var(--hover); }
[data-tema="notion"] .btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-tema="notion"] .btn.pri:hover { background: var(--accent-2); }
[data-tema="notion"] .btn.ghost { border-color: transparent; background: transparent; }
[data-tema="notion"] .btn.ghost:hover { background: var(--hover); }
/* etichette pastello rettangolari, senza pallino */
[data-tema="notion"] .badge { border-radius: 3px; padding: 1px 7px; font-weight: 500; }
[data-tema="notion"] .badge::before { display: none; }
[data-tema="notion"] .b-da_inviare { background: var(--hover-2); color: var(--muted); }
[data-tema="notion"] .tag { border: 0; border-radius: 3px; background: var(--hover-2); color: var(--muted); }
[data-tema="notion"] .tk, [data-tema="notion"] .opt-badge, [data-tema="notion"] .chip-n { border-radius: 3px; }
/* filtri: chip grigi, selezionato in grigio scuro */
[data-tema="notion"] .chip { border-color: var(--border); border-radius: 3px; }
[data-tema="notion"] .chip:hover { background: var(--hover); }
[data-tema="notion"] .chip.on { background: var(--hover-2); color: var(--text); border-color: transparent; }
[data-tema="notion"] .chip.on .chip-n { background: var(--surface); color: var(--text); }
/* scelte a card: bordo sottile, selezionata con il colore dello studio */
[data-tema="notion"] .opt { border-width: 1px; }
[data-tema="notion"] .opt:hover { background: var(--hover); }
[data-tema="notion"] .opt.on { background: var(--surface); }
/* campi */
[data-tema="notion"] input[type=text], [data-tema="notion"] input[type=email], [data-tema="notion"] input[type=number], [data-tema="notion"] input[type=date],
[data-tema="notion"] input[type=password], [data-tema="notion"] input[type=tel], [data-tema="notion"] input:not([type]), [data-tema="notion"] select, [data-tema="notion"] textarea { background: var(--surface); border-color: var(--border-2); }
/* portale clienti */
[data-tema="notion"] .p-top { border-bottom-color: var(--border); }
[data-tema="notion"] .ar-kpi > div { background: var(--surface-2); border-color: transparent; }
/* barra azioni delle card: restano link leggeri anche nel tema Notion */
[data-tema="notion"] .it-bar .btn { border: 0; background: transparent; }
[data-tema="notion"] .it-bar .btn:hover { background: var(--hover); }
[data-tema="notion"] .it-bar .btn.pri { background: transparent; color: var(--accent); }
[data-tema="notion"] .it-bar .btn.pri:hover { background: var(--accent-soft); }
[data-tema="notion"] .it-bar .btn.danger:hover { background: var(--err-soft); }
/* Computer: barra laterale «silenziosa» — icone grigie senza riquadrino, testo normale, voce attiva in grigio
   con l'icona nel colore del tema, contatori neutri (arancioni solo se c'è un'azione urgente), settori leggeri */
@media (min-width: 761px) {
  .app .side { overflow-y: auto; }
  .app .side .nav { gap: 2px; }
  .app .side .nav-t { display: block; margin: 18px 10px 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
  .app .side .nav-t:first-child { margin-top: 4px; }
  .app .side .nav a { gap: 10px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-weight: 500; }
  .app .side .nav a:hover { background: var(--surface-2); color: var(--text); }
  .app .side .nav a > .ico { width: 18px; height: 18px; padding: 0; background: none; color: var(--faint); }
  .app .side .nav a:hover > .ico { color: var(--muted); }
  .app .side .nav a .lbl { flex: 1; min-width: 0; }
  .app .side .nav a.on { background: var(--hover-2, var(--surface-2)); color: var(--text); font-weight: 600; }
  .app .side .nav a.on > .ico { color: var(--accent); }
  .app .side .nav a .cnt { background: transparent; color: var(--faint); font-weight: 500; padding: 0 2px; }
  .app .side .nav a .cnt.urg { background: var(--warn-soft); color: var(--warn); font-weight: 600; padding: 1px 7px; }
}

/* ── Card di navigazione «Torna a …» (stesso modello delle card del menu) ── */
.back.navc { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 0 0 10px -6px; padding: 4px 10px 4px 4px; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.back.navc:hover { background: var(--surface-2); color: var(--text); }
.navc-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent); }
.back.navc:hover .navc-ic { background: var(--surface); }
.navc-ic svg { width: 16px; height: 16px; }
.navc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.navc-t small { font-size: 11px; color: var(--muted); }
.navc-t b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .page-h > div:first-child, .ar-page-h { flex: 1 1 100%; min-width: 0; }
  .back.navc { display: flex; width: 100%; margin: 0 0 14px; padding: 8px 12px 8px 8px; min-height: 52px; border: 1px solid var(--border); background: var(--surface); }
  .navc-ic { width: 36px; height: 36px; }
  .navc-ic svg { width: 18px; height: 18px; }
  .navc-t small { font-size: 12px; }
  .navc-t b { font-size: 15px; }
}
/* Computer: «Torna a …» come card con contorno, larga quanto la colonna del contenuto */
@media (min-width: 761px) {
  .page-h > div:first-child, .ar-page-h { flex: 1 1 auto; min-width: 0; }
  .back.navc { display: flex; width: 100%; margin: 0 0 14px; padding: 6px 12px 6px 6px; border: 1px solid var(--border); background: var(--surface); }
  .back.navc:hover { background: var(--surface-2); }
  .navc-ic { width: 32px; height: 32px; }
}

/* ── Intestazione delle pagine come card (titolo, descrizione, bottoni) ── */
.page-h, .ar-page-h { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 16px; align-items: center; }
.page-h p:last-child, .ar-page-h p:last-child { margin-bottom: 0; }
.back.navc + .page-h, .back.navc + .ar-page-h { margin-top: 0; }
@media (max-width: 760px) { .page-h, .ar-page-h { padding: 14px 16px; } }

/* Passo come card unica (Nuovo invio → Cliente): numero nel riquadrino, nome del passo, scelta, «Cambia ›» */
.passo-card { overflow: hidden; }
.passo-main { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.passo-main:hover { background: var(--surface-2); }
.passo-main .step-n { width: 32px; height: 32px; margin: 0; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 14px; flex: none; }
.passo-t { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; line-height: 1.3; }
.passo-t small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.passo-t b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.passo-t span { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.passo-card > .it-bar { margin: 0; padding: 7px 12px; }
.passo-main:disabled { cursor: default; } .passo-main:disabled:hover { background: transparent; } .passo-main:disabled .pick-act { display: none; }
/* passo con opzioni: testa non cliccabile, opzioni come righe della stessa card */
.passo-testa { cursor: default; }
.passo-testa:hover { background: transparent; }
.passo-opz .opt-list { gap: 0; }
.passo-opz .opt { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 16px 12px 60px; position: relative; }
.passo-opz .opt .opt-dot { position: absolute; left: 22px; top: 14px; }
.passo-opz .opt:hover { background: var(--surface-2); }
.passo-opz .opt.on { background: transparent; }

/* ═════ Passi come card unica (tutti i flussi): testa con numero tondo e nome del passo, contenuto sotto,
   opzioni come righe della stessa card. Ripristino del modello precedente: git tag «prima-dei-passi-card». ═════ */
.card:has(> .card-b > .fs-t > .step-n) { overflow: hidden; }
.card-b > .fs-t:has(> .step-n) { display: flex; align-items: center; gap: 10px; margin: -20px -20px 16px; padding: 14px 20px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); }
.card-b > .fs-t:has(> .step-n) .step-n { width: 26px; height: 26px; margin: 0; flex: none; }
/* opzioni a card dentro il passo → righe a tutta larghezza della stessa card */
.card-b:has(> .fs-t > .step-n) > .opt-list, .card-b:has(> .fs-t > .step-n) > .fld > .opt-list { gap: 0; margin: 0 -20px; }
.card-b > .fs-t:has(> .step-n) + .opt-list { margin-top: -16px; }
.card-b:has(> .fs-t > .step-n) .opt-list > .opt { border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 12px 20px 12px 56px; position: relative; }
.card-b:has(> .fs-t > .step-n) .opt-list > .opt:first-child { border-top: 0; }
.card-b:has(> .fs-t > .step-n) .opt-list > .opt .opt-dot { position: absolute; left: 24px; top: 14px; }
.card-b:has(> .fs-t > .step-n) .opt-list > .opt:hover { background: var(--surface-2); }
.card-b:has(> .fs-t > .step-n) .opt-list > .opt.on { background: transparent; }
.card-b:has(> .fs-t > .step-n) > .opt-list:last-child { margin-bottom: -20px; border-bottom: 0; }
/* passi 1 e 2 di Nuovo invio: stesso numero tondo */
.passo-main .step-n { width: 26px; height: 26px; margin: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; }
.passo-main { padding: 14px 20px; }
.passo-opz .opt { padding-left: 56px; }
.passo-opz .opt .opt-dot { left: 24px; }
/* campo di scelta (cliente, voce del listino…) dentro un passo → riga a tutta larghezza della stessa card */
.card-b:has(> .fs-t > .step-n) > .pick { width: calc(100% + 40px); margin: -16px -20px 0; padding: 14px 20px 14px 56px; border: 0; border-radius: 0; background: transparent; }
.card-b:has(> .fs-t > .step-n) > .pick:hover { background: var(--surface-2); }
.card-b:has(> .fs-t > .step-n) > .pick:last-child { margin-bottom: -20px; }
.card-b:has(> .fs-t > .step-n) > .pick:not(:last-child) { border-bottom: 1px solid var(--border); margin-bottom: 16px; }

/* passo Cliente: dati del cliente scelto sotto la riga «Cambia ›» */
/* nota accanto al nome del passo (es. «Dal contratto · Conferimento…»): va sotto il titolo, come sottotitolo */
.card-b > .fs-t:has(> .step-n) { flex-wrap: wrap; row-gap: 2px; }
.card-b > .fs-t:has(> .step-n) > :not(.step-n):not(.pick-act) { flex: 1 0 100%; padding-left: 36px; font-size: 12.5px; font-weight: 400; color: var(--muted); }
/* testa del passo cliccabile (es. Cliente → Cambia ›) */
.fs-t.fs-scelta { width: calc(100% + 40px); border-top: 0; border-left: 0; border-right: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.fs-t.fs-scelta:hover { background: var(--surface-2); }
.fs-t.fs-scelta .pick-act { margin-left: auto; }
.passo-scelto { padding-left: 36px; }
.passo-scelto > b { display: block; font-size: 15px; }
.passo-scelto > span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
/* selezione indicata da pallino/spunta (e bordo nelle card isolate), senza sfondo colorato */
.opt.on:hover, .card-b:has(> .fs-t > .step-n) .opt-list > .opt.on:hover { background: var(--surface-2); }
/* Elenco clienti: card snelle con sunto */
.cl-r { display: block; overflow-wrap: anywhere; }
.cl-r + .cl-r { margin-top: 2px; color: var(--text); }
.cl-r .t-warn { font-weight: 600; }
.cl-trovato { color: var(--muted) !important; font-style: italic; }
/* icona nel riquadrino a sinistra delle card (es. tipo di cliente) */
.it-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius); background: var(--surface-2); color: var(--muted); }
.it-ic .ico { width: 22px; height: 22px; }
.it-top:has(> .it-ic) { align-items: center; }
.cl-sunto { display: block; margin-top: 6px; }
.cl-sunto .cl-r { margin-top: 1px; color: var(--text); }
/* bottone «chiama» nelle card dei clienti */
.it-r:has(.it-call) { flex-direction: row; align-items: center; gap: 8px; }
.it-call { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); color: var(--accent); background: var(--surface); }
.it-call:hover { background: var(--surface-2); }
.it-call .ico { width: 16px; height: 16px; }
.it-call.wa { color: #25d366; }