/* Gestionale Hive — registro «ALVEARE OPERATIVO» (Tavola A, scelta da Boris il 21/8/26).
   Evoluzione del Cantiere Blu della demo Bernocchi, portato sull'identità Hive: grigio freddo
   di fondo, navy strutturale, giallo dell'alveare come segnale. Sostituisce la variante C
   "Operativo" del 15/7/26 — che resta leggibile nella storia di git, non serve conservarla qui.

   Il grosso del cambiamento vive nei TOKEN qui sotto: cambiandoli, tutte le viste si adeguano
   insieme e nessuna resta indietro. Gli aggiustamenti che richiedono struttura (sidebar scura,
   densità delle tabelle, numeri condensati) stanno in fondo al file, sotto «REGISTRO ALVEARE». */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* I due caratteri sono ospitati da noi: la PWA deve leggersi anche senza rete e senza
   chiamare Google a ogni apertura. Dettagli e licenza in app/fonts/LEGGIMI.md. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/barlow-condensed-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/schibsted-grotesk-var.woff2) format('woff2-variations')}

:root{
  --bg:#edf0f4;
  --surface:#ffffff;
  --surface-2:#f7f9fb;
  --border:#d7dee6;
  --border-strong:#cbd6e0;
  --text:#1a2733;
  --text-2:#46586a;
  --text-3:#5e7082;
  /* l'azione è blu (il navy è struttura, non un bottone) */
  --accent:#1b5fb8;
  --accent-hover:#164e99;
  --accent-text:#164e99;
  --accent-weak:#e3edfb;
  /* stati: fondo tenue + inchiostro scuro. Il bordo lo aggiunge .chip più sotto, così restano
     leggibili anche stampati in bianco e nero — la lezione dei badge della demo. */
  --red-bg:#fbe7e7;--red-tx:#a62b2b;--red-line:#efc4c4;
  --amber-bg:#fff4d6;--amber-tx:#8a5b00;--amber-line:#f2dca0;
  --green-bg:#e1f4e7;--green-tx:#14683a;--green-line:#b8e2c6;
  --sky-bg:#e3edfb;--sky-tx:#1655a8;--sky-line:#bbd4f3;
  --indigo-bg:#eee9fa;--indigo-tx:#5b3fa8;--indigo-line:#d8ccf0;
  --gray-bg:#e8edf2;--gray-tx:#46586a;--gray-line:#cbd6e0;
  /* struttura */
  --navy:#102c4c;--navy-2:#0b2239;--navy-3:#16395f;--navy-line:#1e4470;
  --giallo:#ffc400;--giallo-scuro:#8a5b00;
  /* i numeri hanno un carattere loro: condensato, così in una riga ci stanno più cifre e
     l'occhio trova subito l'importo. È la differenza più visibile rispetto alla variante C. */
  --ft:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --fs:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(11,34,57,.06),0 8px 24px rgba(11,34,57,.05);
  --r:6px;
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fs);
  background:var(--bg);color:var(--text);
  font-size:13.5px;line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-s{width:14px;height:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-weak)}

/* ============ SHELL ============ */
.app{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:100vh}
.sidebar{
  border-right:1px solid var(--border);background:var(--surface-2);
  padding:14px 10px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:8px;padding:4px 8px 14px}
.brand .hex{color:var(--accent)}
.brand b{font-size:13.5px;letter-spacing:.04em}
.brand span{font-size:13.5px;color:var(--text-3)}
.nav-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);padding:12px 8px 4px}
.nav-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:6px 8px;border-radius:var(--r);font-size:13px;color:var(--text-2);
  transition:background .12s,color .12s;text-align:left;
}
.nav-item:hover{background:#eef0f4;color:var(--text)}
.nav-item.active{background:var(--accent-weak);color:var(--accent-text);font-weight:600}
.nav-item .kbd{margin-left:auto}
.quick-item{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border-radius:var(--r);font-size:12.5px;color:var(--text-2)}
.quick-item:hover{background:#eef0f4}
.quick-item .dot{width:7px;height:7px;border-radius:2px;flex:none}
.quick-item .num{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.side-foot{margin-top:auto;border-top:1px solid var(--border);padding:10px 8px 2px;display:flex;gap:8px;align-items:center}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.side-foot .who{font-size:12px;line-height:1.25;flex:1}
.side-foot .who small{display:block;color:var(--text-3);font-size:11px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r);color:var(--text-3)}
.icon-btn:hover{background:#eef0f4;color:var(--text)}

.kbd{
  font-family:var(--mono);font-size:10.5px;color:var(--text-2);
  background:#fff;border:1px solid var(--border-strong);border-bottom-width:2px;
  border-radius:4px;padding:0 5px;line-height:16px;display:inline-block;
}

.main-col{display:flex;flex-direction:column;min-width:0}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:10px 24px;background:rgba(247,248,250,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.brand-mini{display:none;align-items:center;gap:7px;font-size:13px;font-weight:700;letter-spacing:.04em}
.brand-mini .hex{color:var(--accent)}
.cmdbar{
  flex:1;max-width:440px;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:6px 10px;color:var(--text-3);font-size:13px;text-align:left;
  box-shadow:var(--shadow);transition:border-color .12s;
}
.cmdbar:hover{border-color:var(--border-strong)}
.cmdbar .kbd{margin-left:auto}
.top-date{margin-left:auto;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.top-date b{color:var(--text);font-weight:600}

.view{display:none;padding:20px 24px 48px;max-width:1200px;width:100%;margin:0 auto}
.view.active{display:block}
.view-head{margin-bottom:16px;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.view-head .vh-txt{flex:1;min-width:200px}
.view-head h1{font-size:18px;font-weight:650;letter-spacing:-.01em}
.view-head p{font-size:13px;color:var(--text-2);margin-top:2px}
.crumb{font-size:12px;color:var(--text-3);margin-bottom:4px}
.crumb b{color:var(--text-2);font-weight:500}
.crumb a{color:var(--accent-text);cursor:pointer}

/* ============ COMPONENTI ============ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border)}
.card-h h2{font-size:13px;font-weight:650}
.card-h .count{font-size:11px;font-weight:700;font-family:var(--mono);background:var(--gray-bg);color:var(--gray-tx);border-radius:4px;padding:1px 6px}
.card-h .hint{margin-left:auto;font-size:11.5px;color:var(--text-3)}
.card-b{padding:12px 14px}

.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;letter-spacing:.015em;
  padding:2px 7px;border-radius:4px;white-space:nowrap;
}
.ch-gray{background:var(--gray-bg);color:var(--gray-tx)}
.ch-indigo{background:var(--indigo-bg);color:var(--indigo-tx)}
.ch-sky{background:var(--sky-bg);color:var(--sky-tx)}
.ch-green{background:var(--green-bg);color:var(--green-tx)}
.ch-amber{background:var(--amber-bg);color:var(--amber-tx)}
.ch-red{background:var(--red-bg);color:var(--red-tx)}
.ch-out{background:#fff;border:1px dashed var(--border-strong);color:var(--text-2)}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--r);
  border:1px solid transparent;transition:background .12s,border-color .12s;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:#fff;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:#fff;border-color:var(--border-strong);color:var(--red-tx)}
.btn-danger:hover{background:var(--red-bg)}
.btn-sm{font-size:12px;padding:4px 10px}
.btn.is-off{background:#f0f1f4;color:#9aa0ab;border-color:var(--border);cursor:not-allowed;box-shadow:none}
.btn.is-off:hover{background:#f0f1f4}

.tbl{background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow)}
.tbl.flat{border:0;box-shadow:none;border-radius:0}
.tr{
  display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;
  padding:8px 14px;border-top:1px solid var(--border);min-width:0;
}
.tr:first-child{border-top:0}
.tr.head{
  background:var(--surface-2);font-size:10.5px;font-weight:600;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.08em;padding:7px 14px;
}
.tr.row{cursor:pointer;transition:background .1s}
.tr.row:hover{background:#f3f4f8}
.tr.row.selected{background:var(--accent-weak);box-shadow:inset 2px 0 0 var(--accent)}
.td{min-width:0;font-size:13px}
.td .sub{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td.name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td.dim{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.td.right{text-align:right}
.tr.lrow{display:flex;align-items:center;gap:12px}
.tr.lrow .pri{flex:1;min-width:0}
.tr.lrow .cell-chip{margin-left:auto;flex:none}
.t-clienti{--cols:1.5fr 1.1fr .8fr .7fr}
.t-pratiche{--cols:1.8fr .8fr .7fr .7fr}
.t-docs{--cols:1.7fr 1.1fr .8fr .6fr}
.t-incassi{--cols:.7fr .7fr .8fr 1.4fr .4fr}
.file-cell{display:flex;align-items:center;gap:8px;min-width:0}
.file-cell .ic{color:var(--text-3)}
.file-cell span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.tr.row:hover .file-cell span{color:var(--accent-text)}
.vuoto{padding:22px 14px;font-size:12.5px;color:var(--text-3);text-align:center}

/* ============ CRUSCOTTO ============ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px;box-shadow:var(--shadow)}
.kpi .k-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.kpi .k-val{font-size:21px;font-weight:650;margin-top:6px}
.kpi .k-sub{font-size:12px;color:var(--text-2);margin-top:2px}
.kpi.warn .k-val{color:var(--red-tx)}
.kpi.good .k-val{color:var(--green-tx)}

.dash-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}

.wait{border-top:2px solid var(--accent)}
.wait-item{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 14px;border-top:1px solid var(--border);cursor:pointer;transition:background .1s;
}
.wait-item:hover{background:#f3f4f8}
.wait-item .wi-n{font-size:11px;font-weight:700;color:var(--accent-text);background:var(--accent-weak);border-radius:4px;padding:2px 6px;flex:none;font-family:var(--mono)}
.wait-item .wi-b{flex:1 1 220px;min-width:0}
.wait-item .wi-b b{display:block;font-size:13px;font-weight:600}
.wait-item .wi-b span{display:block;font-size:12.5px;color:var(--text-2);margin-top:1px}
.wait-item .chev{color:var(--text-3);flex:none}

/* ============ CLIENTI ============ */
.clienti-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;align-items:start}
.detail .card-h h2{font-size:14px}
.d-meta{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.d-meta b{color:var(--text);font-weight:600}
.d-sec{padding:10px 14px;border-bottom:1px solid var(--border)}
.d-sec:last-child{border-bottom:0}
.d-sec h3{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.d-sec h3 .num{font-size:10.5px;color:var(--text-3);font-weight:600}
.d-sec h3 .act{margin-left:auto;font-size:11px;color:var(--accent-text);text-transform:none;letter-spacing:0;cursor:pointer;font-weight:600}
.note-box{background:var(--surface-2);border:1px solid var(--border);border-left:3px solid var(--amber-tx);border-radius:var(--r);padding:8px 10px;font-size:12.5px;color:var(--text-2);white-space:pre-wrap}
.mini-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;border-top:1px solid var(--border)}
.mini-row:first-of-type{border-top:0}
.mini-row .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.mini-row .num{color:var(--text-2)}
.mini-row.link{cursor:pointer}
.mini-row.link:hover .grow{color:var(--accent-text)}
.doc-link{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12.5px;font-weight:550;border-top:1px solid var(--border);cursor:pointer}
.doc-link:first-of-type{border-top:0}
.doc-link .ic{color:var(--text-3)}
.doc-link:hover span{color:var(--accent-text)}
.doc-link .dl{margin-left:auto;color:var(--text-3)}
.doc-link:hover .dl{color:var(--accent-text)}
.doc-link .meta{margin-left:auto;font-size:11px;color:var(--text-3)}

.task{display:flex;align-items:flex-start;gap:8px;padding:5px 0;font-size:13px;cursor:pointer;border-radius:4px}
.task input{width:15px;height:15px;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex:none}
.task .txt{transition:color .12s;flex:1}
.task .txt small{color:var(--text-3);font-family:var(--mono);font-size:10.5px;margin-left:6px}
.task input:checked ~ .txt{text-decoration:line-through;color:var(--text-3)}
.task:hover .txt{color:var(--accent-text)}
.task input:checked:hover ~ .txt{color:var(--text-3)}

/* ============ PRATICA ============ */
.pratica-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.p-head{grid-column:1 / -1}
.p-dati{grid-column:2;grid-row:2}
.p-azioni{grid-column:1;grid-row:2}
.p-doc{grid-column:2;grid-row:3}
.p-note{grid-column:1;grid-row:3}
.p-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px 4px}
.p-title h2{font-size:16px;font-weight:650;letter-spacing:-.01em}

.timeline{position:relative;display:flex;padding:18px 8px 14px;counter-reset:step}
.timeline::before{
  content:"";position:absolute;top:27px;left:8.33%;right:8.33%;height:2px;background:var(--border-strong);
}
.timeline::after{
  content:"";position:absolute;top:27px;left:8.33%;width:0;height:2px;background:var(--accent);
}
.timeline.tl-1::after{width:16.67%}
.timeline.tl-2::after{width:33.34%}
.timeline.tl-3::after{width:50%}
.timeline.tl-4::after{width:66.67%}
.timeline.tl-5::after{width:83.34%}
.step{flex:1;position:relative;text-align:center;padding-top:30px;min-width:0;z-index:1}
.step .dot{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;background:#fff;
  border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;
}
.step.done .dot{background:var(--accent);border-color:var(--accent);color:#fff}
.step.current .dot{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.step.current .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.step .s-name{font-size:11.5px;font-weight:600;color:var(--text-3);display:block}
.step.done .s-name{color:var(--text-2)}
.step.current .s-name{color:var(--accent-text)}
.step .s-date{font-size:10.5px;color:var(--text-3);font-family:var(--mono);display:block;margin-top:1px}
.step .s-tag{margin-top:5px}

.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.dcell{background:var(--surface);padding:10px 14px}
.dcell .dl-l{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.dcell .dl-v{font-size:15px;font-weight:650;margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dcell .dl-s{font-size:11.5px;color:var(--text-2);margin-top:2px}
.dcell .dl-v a{color:var(--accent-text);cursor:pointer;font-size:13.5px}

.actions{display:flex;gap:8px;flex-wrap:wrap}
.seq-note{
  display:flex;gap:8px;align-items:flex-start;margin-top:12px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:8px 10px;font-size:12.5px;color:var(--text-2);
}
.seq-note .ic{color:var(--amber-tx);margin-top:1px}
.field-row{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.field-row label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);display:flex;align-items:center;gap:8px;margin-bottom:6px}
.field-empty{
  display:flex;align-items:center;gap:8px;
  border:1px dashed var(--border-strong);border-radius:var(--r);
  padding:8px 10px;font-size:12.5px;color:var(--text-3);background:var(--surface-2);
}

/* ============ DOCUMENTI ============ */
.doc-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.searchbox{
  flex:1 1 260px;max-width:420px;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:0 10px;box-shadow:var(--shadow);
}
.searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.searchbox .ic{color:var(--text-3)}
.searchbox input{border:0;outline:0;background:none;font:inherit;font-size:13px;padding:8px 0;flex:1;min-width:0;color:var(--text)}
.searchbox input::placeholder{color:var(--text-3)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.f-chip{font-size:12px;font-weight:550;color:var(--text-2);border:1px solid var(--border-strong);background:#fff;border-radius:99px;padding:4px 11px;transition:background .1s}
.f-chip:hover{background:var(--surface-2)}
.f-chip.on{background:var(--accent-weak);border-color:var(--accent);color:var(--accent-text);font-weight:600}

/* ============ FORM ============ */
.inp{
  display:block;width:100%;border:1px solid var(--border-strong);border-radius:var(--r);
  padding:7px 10px;font:inherit;font-size:13px;background:#fff;color:var(--text);
}
.inp:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
textarea.inp{resize:vertical;min-height:74px}
select.inp{appearance:auto}

/* ricerca-cliente: combobox con filtro, sostituisce il <select> lunghissimo nei form
   condivisi (task/abbonamento/sessione). 28/8/26, richiesta di Boris nel collaudo. */
.cerca-box{position:relative}
/* combobox cliente usato DENTRO una .dl-v (inline-edit nella scheda progetto, 28/8/26):
   senza questo prende solo la larghezza del contenuto e il menu a tendina si stringe */
.dl-v .cerca-inline{flex:1 1 200px;min-width:160px}
.cerca-lista{
  position:absolute;left:0;right:0;top:calc(100% + 2px);z-index:20;
  background:#fff;border:1px solid var(--border-strong);border-radius:var(--r);
  box-shadow:0 4px 14px rgba(0,0,0,.12);max-height:220px;overflow-y:auto;
}
.cerca-voce{padding:7px 10px;font-size:13px;cursor:pointer}
.cerca-voce:hover,.cerca-voce.attiva{background:var(--accent-weak)}
.cerca-vuota{padding:7px 10px;font-size:13px;color:var(--text-3)}
.fl{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);display:block;margin-bottom:4px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid .full{grid-column:1 / -1}
.form-foot{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.chk-row{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text-2);cursor:pointer;padding:4px 0}
.chk-row input{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto;margin:0}
.err-msg{color:var(--red-tx);font-size:12.5px;margin-top:8px;display:none}
.err-msg.on{display:block}

/* ============ ANDAMENTO ============ */
.and-note{font-size:12px;color:var(--text-3);margin:-8px 0 14px}
.chart-card .card-b{padding:6px 14px 12px}
.chart-wrap svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:2px 14px 10px;font-size:11.5px;color:var(--text-2)}
.legend .sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.and-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.target-row{display:flex;gap:8px;align-items:center}
.target-row .inp{max-width:140px}

/* ============ CONSULENZE ============ */
.cons-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.cons-wide{grid-column:1 / -1}
.t-abbonamenti{--cols:1.5fr 1fr 1fr .65fr 70px}
.cons-actions{display:flex;justify-content:flex-end;gap:2px}
.scadenze-list,.session-list{padding:0 14px}
.scad-row,.session-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--border);min-width:0}
.scad-row:first-child,.session-row:first-child{border-top:0}
.scad-row>div,.session-row>div{flex:1;min-width:0}
.scad-row b,.session-row b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scad-row span:not(.chip),.session-row div span{display:block;font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scad-row input{width:15px;height:15px;accent-color:var(--accent);flex:none}
.scad-row.done b{text-decoration:line-through;color:var(--text-3)}
.overdue{color:var(--red-tx)!important;font-weight:650}
.quick-session{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;border-bottom:1px solid var(--border)}
.quick-session .quick-theme{grid-column:span 2}.quick-session .btn{align-self:end;justify-self:start}
.monte-ore{border-top:1px solid var(--border);padding:12px 14px}.monte-ore h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.ore-item{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:6px 0}.ore-item>div:first-child{min-width:0}.ore-item b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ore-item>div span{display:block;font-size:11px;color:var(--text-3)}
.ore-num{text-align:right;font-size:12px}.ore-bar{grid-column:1 / -1;height:5px;background:var(--gray-bg);border-radius:4px;overflow:hidden}.ore-bar>span{display:block;height:100%;background:var(--accent);border-radius:inherit}.ore-bar>span.danger{background:var(--red-tx)}

/* ============ LOGIN ============ */
.login-overlay{
  position:fixed;inset:0;z-index:100;background:var(--bg);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.login-overlay.on{display:flex}
.login-card{
  width:100%;max-width:360px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:0 8px 32px rgba(23,24,28,.08);padding:26px 24px;
}
.login-card .brand{padding:0 0 16px;justify-content:center}
.login-card h1{font-size:15px;font-weight:650;text-align:center;margin-bottom:16px}

/* ============ PALETTE ⌘K ============ */
.palette{
  position:fixed;inset:0;z-index:90;background:rgba(23,24,28,.28);
  display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;
}
.palette.on{display:flex}
.palette-box{width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 40px rgba(23,24,28,.22);overflow:hidden}
.palette-box .searchbox{border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;max-width:none}
.palette-list{max-height:320px;overflow-y:auto}
.pal-item{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:13px;cursor:pointer;border-top:1px solid var(--border)}
.pal-item:first-child{border-top:0}
.pal-item:hover{background:var(--accent-weak)}
.pal-item .ic{color:var(--text-3)}
.pal-item .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.pal-item .sub{font-size:11.5px;color:var(--text-3)}

/* ============ BOTTOM BAR (mobile) ============ */
.bottombar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  padding:4px 6px calc(4px + env(safe-area-inset-bottom));
}
.bottombar button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 2px;font-size:10.5px;font-weight:600;color:var(--text-3);border-radius:8px;
}
.bottombar button.active{color:var(--accent-text)}
.bottombar button.active .ic{color:var(--accent)}
.bottombar .ic{width:20px;height:20px}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);z-index:110;
  background:#26272d;color:#f2f3f7;font-size:13px;font-weight:500;
  padding:9px 15px;border-radius:8px;box-shadow:0 6px 24px rgba(23,24,28,.25);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:88vw;text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.tip{
  position:fixed;z-index:120;background:#26272d;color:#f2f3f7;
  font-size:12px;font-weight:500;padding:6px 10px;border-radius:6px;
  box-shadow:0 4px 16px rgba(23,24,28,.25);max-width:260px;
  opacity:0;pointer-events:none;transition:opacity .12s;
}
.tip.on{opacity:1}

.page-foot{max-width:1200px;margin:0 auto;padding:0 24px 40px;font-size:11.5px;color:var(--text-3)}

/* ============ RESPONSIVE ============ */
@media (max-width:1020px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-grid,.clienti-grid,.pratica-grid,.and-grid{grid-template-columns:minmax(0,1fr)}
  .p-head,.p-dati,.p-azioni,.p-doc,.p-note{grid-column:auto;grid-row:auto}
}
@media (max-width:880px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sidebar{display:none}
  .bottombar{display:flex}
  .brand-mini{display:flex}
  .topbar{padding:10px 14px}
  .cmdbar{max-width:none}
  .cmdbar .label{display:none}
  .top-date{display:none}
  .view{padding:16px 14px 96px}
  .page-foot{padding:0 14px 110px}
}
@media (max-width:720px){
  .tr.head{display:none}
  .tr{display:flex;flex-wrap:wrap;gap:3px 10px;padding:11px 14px}
  .td{width:100%;font-size:12.5px;color:var(--text-2)}
  .td.pri{width:auto;flex:1 1 55%;order:0;color:var(--text);font-size:13.5px}
  .td.cell-chip{width:auto;order:1;margin-left:auto}
  .td.half{width:auto}
  .td.right{text-align:left}
  .td[data-l]::before{content:attr(data-l) ": ";color:var(--text-3);font-weight:400}
  .td .sub{white-space:normal}
  .timeline{flex-direction:column;padding:14px 14px 12px}
  .timeline::before{top:24px;bottom:24px;left:23px;right:auto;width:2px;height:auto}
  .timeline::after{top:24px;left:23px;width:2px;height:0}
  .timeline.tl-1::after{height:calc((100% - 48px)*.2)}
  .timeline.tl-2::after{height:calc((100% - 48px)*.4)}
  .timeline.tl-3::after{height:calc((100% - 48px)*.6)}
  .timeline.tl-4::after{height:calc((100% - 48px)*.8)}
  .timeline.tl-5::after{height:calc(100% - 48px)}
  .step{padding:7px 0 7px 40px;text-align:left;display:flex;flex-direction:column;justify-content:center;min-height:46px}
  .step .dot{left:14px;top:50%;transform:translateY(-50%)}
  .step .s-tag{margin-top:3px;align-self:flex-start}
  .kpi .k-val{font-size:18px}
  /* ⚠️ 16 px NON è una scelta di gusto: sotto i 16 px Safari iOS ingrandisce la pagina al
     focus del campo e ci RESTA dopo l'invio — barra in basso fuori schermo, pinch per
     tornare indietro, a ogni salvataggio fatto dal telefono. La regola qui sotto per
     .searchbox esisteva dal principio: valeva per UN campo su trenta, mentre gli altri
     ventotto (tutti .inp a 13 px) facevano zoomare. Il viewport resta senza maximum-scale:
     impedire lo zoom a mano toglierebbe accessibilità invece di aggiungere comodità. */
  .searchbox input{font-size:16px}
  .dgrid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:420px){
  .kpi{padding:10px 12px}
  .actions .btn{flex:1 1 100%;justify-content:center}
}

/* Strato di interazione */
.nuovo-top{margin-left:4px}.omnibar-wrap{max-width:1200px;width:100%;margin:0 auto;padding:16px 24px 0}.omnibar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;padding:10px 14px;box-shadow:var(--shadow)}.omnibar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}.omnibar .sparkle{color:var(--accent);font-size:18px}.omnibar input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:14px}.mic-btn{width:30px;height:30px;border-radius:50%;color:var(--text-3)}.mic-btn:hover{background:var(--accent-weak)}.inbox-badge{display:none;background:var(--amber-bg);color:var(--amber-tx);border-radius:99px;padding:2px 7px;font:700 11px var(--mono)}.inbox-badge.on{display:inline-block}.understood{margin-top:10px;background:var(--surface);border:1px solid var(--accent);border-radius:10px;box-shadow:0 4px 18px rgba(91,91,214,.12);overflow:hidden}.understood.miss{border-color:var(--border-strong);box-shadow:none}.understood-h{padding:9px 14px;background:var(--accent-weak);color:var(--accent-text);font-size:12.5px;font-weight:650}.miss .understood-h{background:var(--amber-bg);color:var(--amber-tx)}.understood-b{padding:12px 14px}.uf-grid{display:grid;grid-template-columns:auto 1fr;gap:5px 12px}.uf-grid dt{font-size:10.5px;text-transform:uppercase;color:var(--text-3)}.understood-foot{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.sheet-overlay{position:fixed;inset:0;z-index:80;background:rgba(23,24,28,.32);display:none;align-items:flex-end;justify-content:center}.sheet-overlay.on{display:flex}.sheet{width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--surface);border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(23,24,28,.18)}.sheet-h{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--border)}.sheet-h h3{font-size:15px}.sheet-close,.sheet-back{width:28px;height:28px;border-radius:7px;font-size:22px}.sheet-close{margin-left:auto}.sheet-back{visibility:hidden}.sheet-back.on{visibility:visible}.sheet-b{padding:16px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:14px;border:1px solid var(--border-strong);border-radius:10px;text-align:left}.choice-card:hover{border-color:var(--accent);background:var(--accent-weak)}.choice-card b{font-size:13px}.choice-card span{font-size:11.5px;color:var(--text-3)}.new-client-inline{display:none;padding:10px;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r)}.new-client-inline.on{display:block}.fab{display:none;position:fixed;right:18px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:50;width:54px;height:54px;border-radius:50%;background:var(--accent);color:#fff;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(91,91,214,.4)}.fab .ic{width:24px;height:24px}.field-sub{font-size:11.5px;color:var(--text-3);margin-bottom:10px}
.step-lab{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:16px 0 8px}.step-lab:first-child{margin-top:0}.svc{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;margin-bottom:6px}.svc.on{border-color:var(--accent);background:var(--accent-weak)}.svc>input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);flex:0 0 auto}.svc .nm{flex:1;min-width:0}.svc .nm b,.svc .nm small{display:block}.svc .nm b{font-size:13px}.svc .nm small{font-size:11px;color:var(--text-3)}.svc .price{width:96px;flex:0 0 auto}.svc .price .inp{text-align:right;padding:6px 8px;font-size:13px}.svc .rec{font-size:10px;color:var(--text-3);flex:0 0 auto;width:42px;text-align:right}.svc-libera .nm .inp{padding:6px 8px;font-size:13px}.tot{display:flex;justify-content:space-between;padding:10px 12px;background:var(--surface-2);border-radius:9px;font-size:13px;margin-top:6px}.tot b{font-variant-numeric:tabular-nums}.bigbtn{width:100%;justify-content:center;padding:13px;font-size:14px;margin-top:16px}.muted{font-size:11.5px;color:var(--text-3);margin-top:6px}.pronto{border:1px solid var(--green-tx);background:var(--green-bg);border-radius:12px;padding:16px 18px}.pronto h4{margin:0 0 4px;color:var(--green-tx);font-size:14px}.pronto-testo{font-size:12.5px;color:var(--text-2)}.linkrow{display:flex;gap:8px;margin:10px 0}.linkrow .inp{flex:1;min-width:0;font-size:12px;font-family:ui-monospace,monospace}.share{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:430px){.svc{align-items:flex-start;flex-wrap:wrap}.svc .nm{flex-basis:calc(100% - 30px)}.svc .price{width:calc(100% - 62px);margin-left:27px}.svc .rec{align-self:center}.linkrow{flex-direction:column}.linkrow .btn,.share .btn{width:100%;justify-content:center}}
.activity-section{margin-top:20px}.activity-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--border)}.activity-tools .inp{width:auto;min-width:150px}.activity-tools .search-act{flex:1;min-width:150px}.view-switch{display:flex;margin-left:auto;border:1px solid var(--border);border-radius:99px;padding:3px}.view-switch button{padding:4px 11px;border-radius:99px;font-size:12px}.view-switch button.active{background:var(--accent-weak);color:var(--accent-text)}.t-attivita{--cols:2fr .9fr .9fr .75fr .65fr}.th-sort{font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;text-align:left}.act-txt{display:flex;align-items:center;gap:9px;min-width:0}.act-txt .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.done .lbl{text-decoration:line-through;color:var(--text-3)}.due.overdue{color:var(--red-tx);font-weight:600}.pri-dot.alta{color:var(--red-tx);font-weight:650}.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px}.board-col{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;min-height:130px}.board-col h3{padding:9px 10px;font-size:12px;border-bottom:1px solid var(--border)}.board-drop{padding:8px;min-height:90px}.board-card{background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:9px;margin-bottom:7px;cursor:grab}.board-card b{display:block;font-size:12.5px}.board-card small{color:var(--text-3)}.bc-move{display:flex;gap:6px;margin-top:7px}.bc-btn{flex:1;border:1px solid var(--border-strong);border-radius:5px;padding:3px 0;font-size:11px;color:var(--text-2);background:var(--surface-2)}.bc-btn:hover{background:var(--accent-weak);color:var(--accent-text);border-color:var(--accent)}.act-check{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}.board-col.drag-over{background:var(--accent-weak)}.mobile-sort{display:none}.inline-edit-input{width:110px;padding:3px 6px}.edit-inline{color:var(--accent-text);font-size:13px}.pwa-install{display:none;margin-top:16px;padding:12px 14px}.pwa-install button{float:right}.chip-toggle{border:1px solid var(--border-strong);border-radius:99px;padding:5px 10px;font-size:12px}.chip-toggle.on{background:var(--accent-weak);border-color:var(--accent);color:var(--accent-text)}
@media(min-width:640px){.sheet-overlay{align-items:center;padding:20px}.sheet{border-radius:14px;max-height:82vh}}
@media(max-width:880px){.nuovo-top{display:none}.fab{display:flex}.omnibar-wrap{padding:12px 14px 0}.pwa-install{display:block}.toast{bottom:calc(76px + env(safe-area-inset-bottom))}}
@media(max-width:720px){body{overflow-x:hidden}.activity-tools .inp{width:100%}.view-switch{margin-left:0}.t-attivita .tr.head{display:none}.mobile-sort{display:block;width:100%}.board{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.board-col{flex:0 0 82vw;scroll-snap-align:start}.sheet{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
/* .choice-grid — foglio "Nuovo" a 3 colonne anche su desktop. Questa riga era stata tolta il
   28/7/26: senza, il desktop ricade sulla base a 1fr 1fr (:466) e passa a 2 colonne. È una
   modifica VISIBILE, e su Zeno la grafica passa dall'anteprima che approva Boris PRIMA del
   codice: rimessa com'era.
   PROPOSTA IN ATTESA DI ANTEPRIMA (non un dimenticato): con 11 card, 2 colonne larghe si
   leggono meglio di 3 strette. Per applicarla basta cancellare la riga qui sotto — ma solo
   dopo che Boris ha visto il mockup e ha detto sì.
   Resta invece tolta la regola gemella che stava nella media query dei 720px a :472: era morta
   davvero, perché a <=720px arriva dopo (e quindi vince, a parità di specificità) la media
   query a :478, che mette repeat(3) + gap 6px. Sul telefono non è cambiato niente. */
.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1020px){.cons-grid{grid-template-columns:minmax(0,1fr)}.cons-wide{grid-column:auto}}
@media(max-width:720px){.quick-session{grid-template-columns:1fr 1fr}.quick-session .quick-theme{grid-column:1 / -1}.scad-row,.session-row{flex-wrap:wrap}.scad-row>div,.session-row>div{flex-basis:60%}.bottombar{padding-left:2px;padding-right:2px}.bottombar button{font-size:9.5px;padding-left:0;padding-right:0;min-width:0}.bottombar .ic{width:18px;height:18px}.choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.choice-card{padding:10px 8px}.choice-card span{font-size:10px}}
@media(max-width:390px){.bottombar button{font-size:9px}}

/* --- 16 px su OGNI campo, dal telefono in giù (3/9/26) ---------------------------------
   ⚠️ Non è una scelta di gusto. Regola documentata di WebKit: al focus su un campo con
   font-size < 16px Safari iOS ingrandisce la pagina, e ci RESTA dopo l'invio — barra in
   basso fuori schermo, tasti da cercare, pinch per tornare indietro, a OGNI salvataggio
   fatto dal telefono. Il progetto la conosceva già e l'aveva applicata a un campo solo
   (.searchbox input, :497): gli altri ventotto su trenta stavano a 13 px.
   Il viewport resta senza maximum-scale: impedire lo zoom a mano toglierebbe accessibilità
   invece di aggiungere comodità — si alza il testo, non si toglie il gesto.
   STA QUI, e non nella media query dei 720 px più in alto, per una ragione di cascata:
   `.omnibar input{font-size:14px}` (:511) ha la stessa specificità e viene DOPO, quindi da
   lassù la regola perdeva proprio sul campo dell'omnibar — l'unico rimasto a 14 px. --- */
@media(max-width:720px){
  .inp,select.inp,textarea.inp,.omnibar input,#login-user,#login-pw{font-size:16px}
  /* i campi del preventivo (prezzo di ogni servizio, riga libera) hanno una regola più
     specifica a 13 px (:513): senza nominarli qui restavano gli unici a far zoomare, e sono
     proprio quelli su cui si scrivono i soldi */
  .svc .price .inp,.svc-libera .nm .inp{font-size:16px}
}

/* Proposta e preventivo */
.p-proposta{grid-column:1 / -1}.preventivo-section{padding:14px;border-bottom:1px solid var(--border)}.preventivo-title,.genera-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.preventivo-title h3,.genera-row h3{font-size:13px}.t-voci{margin-top:10px}.t-voci .tr{--cols:minmax(0,2fr) minmax(110px,.8fr) minmax(90px,.6fr) 34px}.voce-prezzo button{font:inherit;color:var(--accent-text)}.voce-del{text-align:right}.preventivo-totali{padding:10px 12px;background:var(--surface-2);border-top:1px solid var(--border);font-size:12px;font-weight:600}.preventivo-panel{margin-top:12px;padding:12px;background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:var(--r)}.catalogo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;max-height:300px;overflow-y:auto}.catalogo-item{display:flex;align-items:flex-start;gap:8px;padding:7px;border-radius:var(--r);cursor:pointer}.catalogo-item:hover{background:var(--accent-weak)}.catalogo-item input{margin-top:3px;accent-color:var(--accent)}.catalogo-item span{min-width:0}.catalogo-item b,.catalogo-item small{display:block}.catalogo-item b{font-size:12.5px}.catalogo-item small{font-size:11px;color:var(--text-3)}.public-link{padding:0 14px 14px}.public-link>div{display:flex;gap:8px}.public-link .inp{flex:1;min-width:0}.proposte-list{margin-top:10px}.proposta-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(260px,1.4fr) auto;align-items:center;gap:12px;padding:10px;border-top:1px solid var(--border)}.proposta-row:first-child{border-top:0}.proposta-row.accettata{background:var(--green-bg);box-shadow:inset 3px 0 0 var(--green-tx)}.proposta-main b{display:block;margin-top:5px;font-size:12.5px}.proposta-date{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--text-3)}.proposta-date b{color:var(--text-2)}.proposta-actions{display:flex;align-items:center;gap:6px}.preventivo-note{padding:11px 14px;background:var(--surface-2);font-size:11.5px;color:var(--text-3)}
@media(max-width:720px){.preventivo-title,.genera-row{align-items:flex-start;flex-direction:column}.preventivo-title .actions{width:100%}.preventivo-title .btn{flex:1;justify-content:center}.catalogo-grid{grid-template-columns:1fr}.t-voci .tr:not(.head){display:flex}.t-voci .tr.head{display:none}.t-voci .td.pri{flex:1 1 100%}.t-voci .cell-chip{margin-left:0}.t-voci .voce-prezzo{margin-left:auto}.t-voci .voce-del{width:34px}.proposta-row{grid-template-columns:1fr}.proposta-actions{flex-wrap:wrap}.public-link>div{align-items:stretch;flex-direction:column}.public-link .btn{justify-content:center}}

/* Avvisi sulle schede ricevute — "punti da sistemare" calcolati dal server (lib/moduli.php).
   Li vede solo Boris nella coda: il cliente, mentre compila, non li incontra mai.
   Due rese scelte il 25/7/26: blocco aperto se c'è almeno un GRAVE, riga a scomparsa se
   ci sono solo avvisi da valutare. */
.avvisi,.avvisi-box{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.avvisi-h{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:12.5px;font-weight:650;color:var(--text)}
.avvisi-h .spacer{margin-left:auto}
.avviso{display:flex;gap:10px;padding:11px 12px;border-top:1px solid var(--border)}
.avviso:first-child{border-top:0}
.avviso .pallino{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:0 0 8px}
.avviso.grave .pallino{background:var(--red-tx)}
.avviso.attenzione .pallino{background:var(--amber-tx)}
.avviso-txt{min-width:0}
.avviso-tit{font-size:14.5px;font-weight:650;color:var(--text);line-height:1.3}
.avviso-cosa{font-size:12.5px;color:var(--text-2);margin-top:4px;line-height:1.5}
.avviso-da{font-size:11px;color:var(--text-3);margin-top:5px;font-style:italic;word-break:break-word}
.tutto-ok{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:12.5px;color:var(--green-tx);background:var(--green-bg)}
.avvisi-box{border:0}
.avvisi-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;padding:9px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);font-size:12.5px;font-weight:650;color:var(--text);list-style:none}
.avvisi-toggle::-webkit-details-marker{display:none}
.avvisi-toggle .freccia{margin-left:auto;color:var(--text-3);font-size:11px}
.avvisi-box[open] .avvisi-toggle{border-radius:var(--r) var(--r) 0 0;border-bottom:0}
.avvisi-box[open] .avvisi-toggle .freccia::after{content:" ▲"}
.avvisi-box:not([open]) .avvisi-toggle .freccia::after{content:" ▼"}
.avvisi-box .corpo{border:1px solid var(--border);border-top:0;border-radius:0 0 var(--r) var(--r)}
/* pallino di segnalazione sulla voce di menu (sidebar e barra mobile) */
.nav-badge{display:none;min-width:18px;text-align:center;background:var(--amber-bg);color:var(--amber-tx);border-radius:99px;padding:1px 6px;font:700 11px var(--mono)}
.nav-badge.on{display:inline-block}
.nav-badge.grave{background:var(--red-bg);color:var(--red-tx)}

/* ---------- Diagnostica ---------- */
/* pallino di stato: sta in sidebar e nel piede, così il semaforo si vede da ogni vista */
.diag-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--border-strong);vertical-align:middle}
.diag-dot.ok{background:#2f9e5c}.diag-dot.warn{background:#d99a20}.diag-dot.bad{background:#c33}
.foot-diag{display:inline-flex;align-items:center;gap:5px;color:var(--text-2);border-bottom:1px dotted var(--border-strong)}
.foot-diag:hover{color:var(--accent-text)}
.diag-liv{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;background:var(--border-strong)}
.diag-liv.ok{background:#2f9e5c}.diag-liv.warn{background:#d99a20}.diag-liv.bad{background:#c33}
#view-diagnostica .kpi .k-val{display:flex;align-items:center;gap:8px}
.copie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.copia{padding:13px 14px;border-right:1px solid var(--border)}
.copia:last-child{border-right:0}
.copia .q{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.copia .v{font-size:15px;font-weight:600;margin:5px 0 2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.copia .dsc{font-size:12px;color:var(--text-2)}
.log-row{display:grid;grid-template-columns:9px 92px 1fr auto;gap:10px;align-items:baseline;
  padding:9px 14px;border-bottom:1px solid var(--border);font-size:12.5px}
.log-row:last-child{border-bottom:0}
.log-row .t{color:var(--text-3);font-family:var(--mono);font-size:11.5px}
.log-row .m{min-width:0;overflow-wrap:anywhere}
/* Una riga del giornale che porta SOLO testo (chi ha accesso, e da quando non entra) non ha
   pallino né orario né livello: senza questa regola la sua unica cella cadeva nella prima
   colonna da 9px e il testo si spezzava un carattere per riga. */
.log-row.solo-testo{grid-template-columns:1fr}
.log-row .dove{color:var(--text-3);font-size:11px}
.tbl-info>div{display:flex;gap:12px;padding:8px 14px;border-bottom:1px solid var(--border);font-size:12.5px}
.tbl-info>div:last-child{border-bottom:0}
.tbl-info span{color:var(--text-2);width:38%;flex:none}
.tbl-info b{font-weight:550;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.diag-nota{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;
  padding:13px 15px;margin-top:16px;font-size:13px;color:var(--text-2)}
.diag-nota b{color:var(--text)}
@media(max-width:880px){
  .copie{grid-template-columns:1fr}
  .copia{border-right:0;border-bottom:1px solid var(--border)}
  .copia:last-child{border-bottom:0}
  .log-row{grid-template-columns:9px 1fr auto;row-gap:2px}
  .log-row .t{grid-column:2/4;order:3;grid-row:2}
  .tbl-info>div{flex-direction:column;gap:2px}
  .tbl-info span{width:auto}
}

/* --- Controllo dati cliente: conferme verdi, confronto, bilanci ---------------------
   Il confronto vive nella colonna di dettaglio (~470px su desktop, tutta la pagina su
   telefono): niente colonne a larghezza fissa, o il testo va a capo lettera per lettera.
   Etichetta sopra, i due valori affiancati a metà: sta in piedi a qualsiasi larghezza. */
.avviso.ok .pallino{background:var(--green-tx)}
.dato-ko{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red-tx);margin-left:6px;vertical-align:middle}
.confronto{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-top:12px}
.cf-h{display:none}
.cf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px 10px;padding:10px 12px;border-top:1px solid var(--border);font-size:13.5px;color:var(--text-2)}
.cf-row:first-of-type{border-top:0}
.cf-row.diversa{background:var(--amber-bg)}
.cf-et{grid-column:1/-1;font-size:11px;font-weight:650;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em}
.cf-val{min-width:0;overflow-wrap:anywhere}
.cf-val::before{display:block;font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em}
.cf-nostro::before{content:"nella scheda"}
.cf-uff::before{content:"ufficiale"}
.cf-row.diversa .cf-uff{color:var(--text);font-weight:650}
.cf-val i{color:var(--text-3)}
.cf-val.neg{color:var(--red-tx)}
.cf-az{grid-column:1/-1;margin-top:6px}
.cf-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;background:var(--surface-2);border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2)}
.cf-note{padding:10px 12px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-2);line-height:1.6}
.cf-note .hint{margin-top:6px}
/* bilanci: l'anno fa da titolo di riga, i quattro numeri stanno in due colonne */
.confronto.bil .cf-et{grid-column:1/-1;font-family:ui-monospace,monospace;font-size:13px;color:var(--text);text-transform:none}
.confronto.bil .cf-val::before{content:none}
.confronto.bil .cf-ric::before{content:"ricavi"}
.confronto.bil .cf-uti::before{content:"utile"}
.confronto.bil .cf-pn::before{content:"patrimonio netto"}
.confronto.bil .cf-az{grid-column:auto;margin-top:0}
.confronto.bil .cf-az::before{content:"dipendenti";display:block;font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.03em}
.barra-tetto{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.barra-tetto span{display:block;height:100%;background:var(--accent);border-radius:3px}
.barra-tetto span.pieno{background:var(--red-tx)}

/* segmenti di filtro nella vista Clienti (attivi / clienti / fornitori / tutti) */
.seg{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:2px;flex-wrap:wrap}
.seg-b{border:0;background:transparent;padding:6px 10px;border-radius:calc(var(--r) - 3px);font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer}
.seg-b:hover{color:var(--text)}
.seg-b.on{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(16,24,40,.06)}
.seg-b .num{color:var(--text-3);font-size:11.5px;margin-left:3px}
.seg-b.on .num{color:var(--accent-text)}

/* ---------- Agenda (v9) — mockup approvato design/mockup-agenda.html ---------- */
.ag-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
#view-agenda .card-h{flex-wrap:wrap;row-gap:8px}
.ag-allarme{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;background:var(--amber-bg);border-bottom:1px solid #e8d5a8}
.ag-allarme .big{font-size:20px;line-height:1.1}
.ag-allarme .txt{font-size:12.5px;color:var(--amber-tx);line-height:1.5}
.ag-allarme .txt .capo{font-size:14px;font-weight:650;display:block;margin-bottom:3px;letter-spacing:-.01em}

.ag-settimana{display:grid;grid-template-columns:repeat(5,1fr) .8fr;gap:1px;background:var(--border)}
.ag-giorno{background:var(--surface);min-height:120px;padding:10px 9px}
.ag-giorno.oggi{background:#fcfcff;box-shadow:inset 0 2px 0 var(--accent)}
.ag-giorno.mezza{background:var(--surface-2)}
.ag-gtitolo{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.ag-gtitolo b{font-size:14px;font-weight:650;letter-spacing:-.01em}
.ag-gtitolo .gg{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.ag-carico{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.ag-carico.pieno{color:var(--red-tx);font-weight:650}
.ag-barra{height:3px;border-radius:2px;background:var(--gray-bg);margin:0 0 9px;overflow:hidden}
.ag-barra i{display:block;height:100%;background:var(--accent);border-radius:2px}
.ag-barra i.colmo{background:var(--red-tx)}
.ag-vuoto-giorno{font-size:11px;color:var(--text-3);padding:4px 2px}

.ag-voce{border:1px solid var(--border);border-radius:5px;padding:6px 8px;margin-bottom:6px;background:var(--surface)}
.ag-voce .t{font-size:12.5px;line-height:1.35;display:flex;gap:6px;align-items:baseline}
.ag-voce .t::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:var(--accent);transform:translateY(-1px)}
.ag-voce .m{font-size:11px;color:var(--text-3);margin-top:4px;padding-left:12px;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.ag-voce.ag-app{background:var(--sky-bg);border-color:#c5ddef}
.ag-voce.ag-app .t::before{background:var(--sky-tx)}
.ag-voce.scade{border-color:#eec9c9}
.ag-voce.scade .t::before{background:var(--red-tx)}
/* Segno di scadenza: il lavoro ha gia' la sua riga piena nel giorno in cui lo si fa.
   Qui basta ricordare che quel giorno e' il limite, senza sembrare un secondo lavoro. */
.ag-scad{display:flex;align-items:center;gap:6px;padding:3px 2px;margin-bottom:5px;
  font-size:11.5px;color:var(--red-tx);line-height:1.3;cursor:default}
.ag-scad-p{width:5px;height:5px;border-radius:50%;background:var(--red-tx);flex:0 0 auto}
.ag-scad-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-voce.proposta{background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 7px,var(--surface-2) 7px,var(--surface-2) 14px);border-style:dashed;border-color:#c9c9e8}
.ag-voce.proposta .t::before{background:transparent;border:1.5px dashed var(--accent);width:8px;height:8px}
.ag-voce.proposta .t{color:var(--text-2)}
.ag-voce.delegata{background:var(--surface-2);border-style:dotted}
.ag-voce.delegata .t::before{background:var(--gray-tx)}
.ag-voce.delegata .t{color:var(--text-2)}
.ag-propaz{display:flex;gap:5px;margin-top:6px;padding-left:12px}
.ag-propaz button{border:1px solid var(--border-strong);background:var(--surface);border-radius:4px;padding:2px 8px;font-size:11px;cursor:pointer}
.ag-propaz .si{border-color:#9fcfae;color:var(--green-tx)}
.ag-propaz .si:hover{background:var(--green-bg)}
.ag-propaz .no:hover{background:var(--gray-bg)}

.ag-domenica{border-top:1px solid var(--border);background:var(--surface-2);padding:9px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-2);flex-wrap:wrap}
.ag-domenica button{margin-left:auto}
.ag-dom-aperta{border-top:1px solid var(--border)}

.ag-legenda{margin:12px 2px 0;font-size:12px;color:var(--text-3);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.ag-legenda i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.ag-legenda i.tratteggio{background:transparent;border:1.5px dashed var(--accent)}

/* coda "Aspettano te" dentro Agenda: le 4 forme del mockup approvato */
.ag-conf{padding:13px 14px;border-bottom:1px solid var(--border);display:flex;gap:12px;align-items:flex-start}
.ag-conf:last-child{border-bottom:0}
.ag-conf .ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;flex:0 0 auto}
.ag-conf .corpo{flex:1;min-width:0}
.ag-conf .titolo{font-size:14px;font-weight:650;letter-spacing:-.01em;margin-bottom:3px}
.ag-conf .dett{font-size:12.5px;color:var(--text-2);line-height:1.5;overflow-wrap:anywhere}
.ag-conf .azioni{display:flex;gap:6px;flex:0 0 auto;align-items:center;flex-wrap:wrap}
.ag-diff{margin-top:7px;font-size:12px;border:1px solid var(--border);border-radius:5px;overflow:hidden}
.ag-diff div{padding:5px 9px;overflow-wrap:anywhere}
.ag-diff .a{background:#fdf0f0;color:#8a2222}
.ag-diff .b{background:#eef8f1;color:#1a6339}
.ag-altro-pick{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.ag-altro-pick select{max-width:220px}

@media(max-width:880px){
  .ag-settimana{grid-template-columns:1fr}
  .ag-giorno{min-height:0}
  .ag-conf{flex-wrap:wrap}
  .ag-conf .azioni{width:100%}
  .ag-conf .azioni .btn{flex:1;justify-content:center}
  .ag-altro-pick select{max-width:none;flex:1 1 100%}
}

/* ============ v2 · radar, proposte del motore, beni & rinnovi ============ */

/* Il pallino di categoria: il COLORE dice che danno fai se ignori la riga. È l'unica cosa
   che porta quel significato — l'urgenza la dice il bucket in cui la riga sta, e il badge
   dei giorni resta neutro apposta, per non competere. */
.rdot{width:9px;height:9px;border-radius:2px;flex:none;display:inline-block}

.rcats{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px}
.rcat{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:14px;padding:4px 11px;font-size:12px;font-weight:600;color:var(--text-2)}
.rcat:hover{background:#eef0f4}
.rcat.on{background:var(--text);color:#fff;border-color:var(--text)}
.rcat .n{font-family:var(--mono);font-size:11px;opacity:.75}

.rbk{margin-bottom:14px}
.rbk-h{display:flex;align-items:center;gap:9px;padding:0 2px 7px}
.rbk-h h3{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.rbk-h .n{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--text-3)}
.rbk-h.crit h3{color:var(--red-tx)}
.rrow{display:flex;align-items:center;gap:11px;padding:9px 14px;background:var(--surface);cursor:pointer;
  border:1px solid var(--border);border-top-width:0}
.rbk .rrow:first-of-type{border-top-width:1px;border-radius:8px 8px 0 0}
.rbk .rrow:last-of-type{border-radius:0 0 8px 8px}
.rbk .rrow:only-of-type{border-radius:8px}
.rrow:hover{background:var(--surface-2)}
.rtxt{min-width:0;flex:1}
.rtxt b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtxt span{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rimp{font-family:var(--mono);font-size:13px;font-weight:600;white-space:nowrap}
.rgg{flex:0 0 76px;text-align:right;font-family:var(--mono);font-size:12px;color:var(--text-2);white-space:nowrap}
.rrow.late .rgg{color:var(--red-tx);font-weight:700}
.rnota{font-size:12px;color:var(--text-3);font-style:italic;margin:10px 2px 0;max-width:70ch}

/* proposte del motore: il punteggio è sempre scomposto sotto, mai una scatola nera */
.prop-card{margin-top:20px}
.prop{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--border)}
.prop:last-child{border-bottom:0}
.psc{flex:0 0 44px;text-align:center;background:var(--gray-bg);border-radius:5px;padding:3px 0 4px}
.psc b{display:block;font-size:15px;font-weight:700;line-height:1.1}
.psc span{font-size:8.5px;font-weight:700;letter-spacing:.06em;color:var(--text-3)}
.psc.alta{background:var(--red-bg)} .psc.alta b{color:var(--red-tx)}
.psc.media{background:var(--amber-bg)} .psc.media b{color:var(--amber-tx)}
.pco{min-width:0;flex:1}
.pti{font-size:13.5px;font-weight:600}
.pmo{font-size:12px;color:var(--text-2);margin-top:2px}
.pcalc{font-size:11px;color:var(--text-3);margin-top:5px;font-family:var(--mono)}
.paz{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
/* «Altre N in coda»: la riga che dice cosa il tetto del mattino sta tenendo fuori. Deve
   sembrare un tasto, perché lo è, ma non competere con le card che ha sopra. */
.prop-altre{display:block;width:100%;margin-top:10px;padding:9px 12px;
  border:1px dashed var(--border-strong);border-radius:var(--r);background:var(--surface-2);
  color:var(--text-2);font-size:13px;text-align:center;cursor:pointer}
.prop-altre:hover{background:var(--accent-weak);color:var(--accent-text);border-color:var(--accent)}
/* Le istruzioni: sotto le proposte, più quiete di una card, ma il numero di quello che hanno
   zittito deve leggersi. `.allarme` è la riga che sta nascondendo qualcosa di grosso: non è
   colore di marchio, è semantica — sta zittendo una cosa che sarebbe stata fra le prime. */
.istr-blocco{margin-top:16px;border-top:1px solid var(--border);padding-top:12px}
.istr-h{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--text-3);margin-bottom:8px}
.istr{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
  background:var(--surface-2);border:1px solid var(--border);margin-bottom:6px}
.istr-t{font-size:13.5px;color:var(--text)}
.istr-s{font-size:12px;color:var(--text-3);flex:1}
.istr.scaduta{opacity:.6}
.istr.allarme{background:var(--amber-bg);border-color:var(--amber-line)}
.istr.allarme .istr-s{color:var(--amber-tx)}
/* L'igiene del sabato: chiusa è una riga sola con un numero. Deliberatamente più quieta delle
   proposte — sono le cose che possono aspettare, e devono sembrarlo. */
.igiene{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.igiene-h{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;background:none;
  color:var(--text-3);font-size:12.5px;font-family:var(--fs);cursor:pointer;border-radius:var(--r);text-align:left}
.igiene-h:hover{background:var(--surface-2);color:var(--text-2)}
.igiene-freccia{margin-left:auto;font-size:11px}
.igiene-g{margin:8px 0 4px}
.igiene-gt{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin:10px 0 4px}
.igiene-r{display:flex;gap:10px;align-items:baseline;padding:4px 8px;font-size:13px;border-radius:4px}
.igiene-r:nth-child(even){background:var(--surface-2)}
.igiene-r .grow{flex:1}
.igiene-r .hint{margin:0;font-size:11.5px;white-space:nowrap}
.btn-mini{font-size:12px;padding:4px 10px}

/* il saluto del mattino */
.pop-overlay{position:fixed;inset:0;background:rgba(23,24,28,.42);display:flex;align-items:flex-start;
  justify-content:center;padding:44px 18px;z-index:70;overflow-y:auto}
.pop-overlay[hidden]{display:none}
.pop{background:var(--surface);border-radius:12px;width:100%;max-width:660px;
  box-shadow:0 12px 40px rgba(23,24,28,.22);overflow:hidden}
.pop-h{padding:16px 20px 13px;border-bottom:1px solid var(--border)}
.pop-h .oggi{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.pop-h h2{font-size:19px;font-weight:650;margin-top:3px;letter-spacing:-.01em}
.pop-h p{font-size:13px;color:var(--text-2);margin-top:3px}
.pop-sez{padding:12px 20px;border-bottom:1px solid var(--border)}
.pop-sez h3{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px}
.pop-riga{display:flex;align-items:center;gap:10px;padding:6px 0}
.pop-riga .t{min-width:0;flex:1;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-riga .t small{display:block;font-weight:400;font-size:11.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-riga .v{font-size:12px;color:var(--text-2);white-space:nowrap}
.pop-riga .v.late{color:var(--red-tx);font-weight:700}
.barra{height:8px;border-radius:4px;background:var(--gray-bg);overflow:hidden;margin-top:7px}
.barra i{display:block;height:100%;background:var(--accent);border-radius:4px}
.pop-f{padding:13px 20px;display:flex;align-items:center;gap:10px;background:var(--surface-2);flex-wrap:wrap}
.pop-f .nota{font-size:11.5px;color:var(--text-3)}
.pop-f .sp{margin-left:auto;display:flex;gap:8px}

/* beni & rinnovi */
.vh-az{margin-left:auto;display:flex;gap:8px;align-items:center}
.k-un{font-size:14px;font-weight:500;color:var(--text-2)}
.form-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.form-griglia .largo{grid-column:1/-1}
.form-griglia .fl small{display:block;font-size:10px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--text-3)}
.form-griglia .fl.chk{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;
  font-size:13px;font-weight:500;color:var(--text-2);align-self:end;padding-bottom:8px}
.form-griglia .fl.chk input{width:16px;height:16px;accent-color:var(--accent)}

@media (max-width:880px){
  .form-griglia{grid-template-columns:1fr}
  .rgg{flex-basis:64px}
  .rimp{display:none}
  .pop-overlay{padding:16px 10px}
  .pop-f{flex-direction:column;align-items:stretch}
  .pop-f .sp{margin-left:0}
  .pop-f .sp .btn{flex:1;justify-content:center}
  .paz .btn{flex:1;justify-content:center}
}

/* ============================================================================
   REGISTRO ALVEARE — quello che i soli token non possono fare
   (sidebar scura, numeri condensati, densità da registro operativo, badge con
   bordo). Sta in fondo di proposito: sovrascrive per posizione, senza gonfiare
   la specificità e senza toccare le 700 righe scritte prima.
   ============================================================================ */

/* --- i numeri: condensati e allineati in colonna --- */
.num{font-family:var(--ft);font-weight:600;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.01em}
/* dentro i campi di testo no: lì un condensato stretto si legge peggio mentre si digita */
input.num,.inp .num{font-family:var(--fs);font-weight:500}

/* --- titoli: stessa famiglia dei numeri, così testate e cifre si parlano --- */
.view-head h1{font-family:var(--ft);font-size:22px;font-weight:700;letter-spacing:.01em;color:var(--navy-2)}
.kpi .k-val{font-family:var(--ft);font-size:29px;font-weight:700;letter-spacing:.01em;color:var(--navy-2);line-height:1.1}
.kpi .k-label{font-size:10.5px;letter-spacing:.10em}
.kpi{border-top:3px solid var(--navy);border-radius:8px}
.kpi:nth-child(2){border-top-color:var(--accent)}
.kpi:nth-child(3){border-top-color:var(--green-tx)}
.kpi:nth-child(4){border-top-color:var(--giallo)}
.kpi:nth-child(5){border-top-color:var(--navy-3)}
.kpi.warn{border-top-color:var(--red-tx)}
.card-h h2{font-family:var(--ft);font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--navy-2)}

/* --- la barra laterale diventa la struttura scura del registro --- */
.sidebar{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);border-right:0;color:#b9c7d6}
.sidebar .brand{color:#fff}
.sidebar .brand b{color:#fff}
.sidebar .brand span{color:#7e93a9}
.sidebar .brand .hex{color:var(--giallo)}
.nav-label{color:#6c8299;font-size:9.5px;letter-spacing:.16em}
.nav-item{color:#b9c7d6;border-left:3px solid transparent;border-radius:6px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--giallo);font-weight:600}
.nav-item .kbd{background:var(--navy-3);border-color:var(--navy-line);color:#8ea3b8}
.quick-item{color:#b9c7d6}
.quick-item:hover{background:rgba(255,255,255,.06);color:#fff}
.quick-item .num{color:#8ea3b8}
.side-foot{border-top-color:var(--navy-line)}
.side-foot .who{color:#dae4ee}
.side-foot .who small{color:#7e93a9}
.side-foot .avatar{background:var(--giallo);color:var(--navy-2);font-weight:700}
.side-foot .icon-btn{color:#7e93a9}
.side-foot .icon-btn:hover{background:rgba(255,255,255,.08);color:#fff}
/* il pallino dei conteggi in barra: giallo quando c'è qualcosa, rosso quando brucia */
.sidebar .nav-badge{background:var(--navy-3);color:#dae4ee}
.sidebar .nav-badge.on{background:var(--giallo);color:var(--navy-2)}
.sidebar .nav-badge.grave{background:var(--red-tx);color:#fff}

/* --- densità: più righe di dato per schermata, senza stringere il testo --- */
.tbl .tr{padding-top:7px;padding-bottom:7px}
/* L'intestazione delle tabelle è `.tr.head`, non `.th`: scritta col selettore sbagliato la
   regola non si applicava a niente e la densità del redesign si fermava alle righe. */
.tbl .tr.head{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;background:var(--surface-2)}
.wait-item{padding-top:8px;padding-bottom:8px}
.wi-n{font-family:var(--ft);font-weight:700}

/* --- badge di stato: fondo E bordo, come nella demo che Boris ha approvato --- */
.chip{border:1px solid transparent;border-radius:9px;padding:2px 8px;font-size:11px}
.ch-red{border-color:var(--red-line)}
.ch-amber{border-color:var(--amber-line)}
.ch-green{border-color:var(--green-line)}
.ch-sky{border-color:var(--sky-line)}
.ch-indigo{border-color:var(--indigo-line)}
.ch-gray{border-color:var(--gray-line)}

/* --- l'azione principale resta blu; il giallo è segnale, non un bottone --- */
.btn-primary{background:var(--accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

/* --- la barra del telefono e il piede seguono la stessa struttura --- */
.bottombar{background:var(--surface);border-top:1px solid var(--border)}
.bottombar button.active{color:var(--accent)}
.page-foot{color:var(--text-3)}
.foot-diag{color:var(--text-2)}
.foot-diag:hover{color:var(--accent-text)}

/* --- il saluto del mattino porta la testata navy: è il momento più «di regia» --- */
.pop-h{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);border-bottom:0}
.pop-h .oggi{color:var(--giallo)}
.pop-h h2{font-family:var(--ft);font-size:24px;font-weight:700;color:#fff}
.pop-h p{color:#b9c7d6}

/* ================================================================================
   BLOCCO 2 (27/8/26) — colori per tipo di lavoro, sezione Task, righe leggibili,
   cruscotto a porte, scheda cliente a linguette, «Chiedi a Zeno», vista collaboratrice.
   Struttura e proporzioni dal mockup approvato design/mockup-blocco2.html.
   ================================================================================ */

/* Canale 1 del colore: CHE LAVORO È. Sempre lo stesso colore per quel tipo di lavoro,
   ovunque compaia (barretta + etichetta). Il canale 2 (quanto scotta) resta il chip.
   Assunzione A2 del contratto: se Boris preferisce l'inverso, si scambiano QUI i due
   canali senza toccare il markup — la barretta legge solo la custom property --c. */
:root{
  /* ⚠️ I colori dei tipi di lavoro NON stanno più qui (31/8/26): li scrive app.js all'avvio,
     leggendoli dalla tassonomia che arriva dal server. Prima questa lista doveva restare
     allineata a mano con altre due (la validazione nel server, le etichette nel frontend), e
     aggiungere un tipo in due posti su tre lo faceva uscire GRIGIO senza nessun errore.
     Resta solo il ripiego: un tipo sconosciuto o non ancora caricato prende il grigio del
     bordo, che è esattamente quello che deve fare. */
}

/* --- riga leggibile (punto F): barretta = lavoro, cliente in grande, giorni a destra --- */
.riga-nuova{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px 8px 12px;border-left:4px solid var(--c,var(--border-strong));
  border-bottom:1px solid var(--border);background:var(--surface);cursor:pointer}
.riga-nuova:last-child{border-bottom:0}
.riga-nuova:hover{background:var(--surface-2)}
.tag-lav{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c,var(--text-3));margin-bottom:1px}
.rn-cl{font-family:var(--ft);font-weight:700;font-size:16.5px;line-height:1.15;color:var(--text)}
.rn-az{font-size:12px;color:var(--text-2)}
.rn-dx{text-align:right;flex:none}
.rn-gg{font-family:var(--ft);font-weight:700;font-size:17px;line-height:1.1}
.rn-data{font-size:10.5px;color:var(--text-3)}

/* nel Radar la stessa gerarchia tipografica (giorni grandi a destra), ma il colore resta
   il DANNO: i due canali non si mischiano nemmeno qui */
.rrow .rgg{font-family:var(--ft);font-weight:700;font-size:16px}

/* --- vista Task (punto D) --- */
.tk{display:flex;align-items:flex-start;gap:10px;padding:9px 10px 9px 12px;
  border-left:4px solid var(--c,var(--border-strong));border-bottom:1px solid var(--border);
  background:var(--surface)}
.tk:last-child{border-bottom:0}
.tk.done{opacity:.55}
.tk.done .tk-t{text-decoration:line-through}
.tk>input[type=checkbox]{margin-top:3px;width:15px;height:15px;flex:none;cursor:pointer}
.tk-t{font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer}
.tk-m{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:3px;font-size:12px;color:var(--text-2)}
.who{display:inline-block;background:var(--gray-bg);border:1px solid var(--gray-line);
  color:var(--gray-tx);border-radius:9px;padding:1px 7px;font-size:10.5px;font-weight:600}
.who.io{background:var(--sky-bg);border-color:var(--sky-line);color:var(--sky-tx)}
/* ⚠️ collisione di nome trovata dal collaudo visivo del 27/8: «.who» esisteva GIÀ nel piede
   della sidebar (il nome di Boris) prima che nascesse il badge io/Chiara qui sopra — e il
   badge gli regalava sfondo chiaro e bordo sopra il navy. Qui si ristabilisce il piede:
   la specificità vince, il badge resta com'è ovunque altro. */
.side-foot .who{display:block;background:none;border:0;border-radius:0;padding:0;
  font-size:12px;font-weight:400;color:#dae4ee}
.tk .drive{font-size:11.5px;color:var(--accent-text);text-decoration:underline}
.task-filtri{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}

/* il riquadro doppio del punto E: «Fai così» / «NON fare» — il non-fare col bordo rosso
   tenue perché è la metà che di solito manca ed è quella che fa i danni */
.fai-nonfare{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fai-nonfare .nonfare textarea{border-color:var(--red-line);background:#fffafa}
.fai-nonfare .fl b{font-size:11px}
@media(max-width:640px){.fai-nonfare{grid-template-columns:1fr}}

/* --- cruscotto a porte (punto C) --- */
.tessere{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
@media(max-width:880px){.tessere{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tess{position:relative;background:var(--surface);border:1px solid var(--border);
  border-top:3px solid var(--accent);border-radius:var(--r);padding:10px 12px;cursor:pointer;
  box-shadow:var(--shadow);text-align:left}
.tess:hover{border-color:var(--border-strong);background:var(--surface-2)}
.tess h4{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.tess .n{font-family:var(--ft);font-weight:700;font-size:24px;line-height:1.1;color:var(--text)}
.tess .sub{font-size:11px;color:var(--text-3)}
.tess .badge{position:absolute;top:8px;right:8px;background:var(--giallo);color:var(--navy-2);
  font-size:10.5px;font-weight:700;border-radius:9px;padding:1px 7px}
.porta-scelte{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 14px}
.porta-scelte .btn{flex:1;justify-content:center;min-width:120px}

/* --- scheda cliente a linguette (punti G+H) --- */
.cli-tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin:10px 0 12px;overflow-x:auto}
.cli-tabs button{padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--text-3);
  border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.cli-tabs button.on{color:var(--accent-text);border-bottom-color:var(--accent)}
.cli-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.mini{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:9px 11px}
.mini h5{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.mini ul{list-style:none;margin:0;padding:0}
.mini li{display:flex;align-items:center;gap:6px;padding:4px 0;font-size:12.5px;border-bottom:1px dashed var(--border)}
.mini li:last-child{border-bottom:0}
.mini.fermo{border-color:var(--amber-line);background:#fffdf3}
.soldi{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0;border-bottom:1px dashed var(--border)}
.soldi b{font-family:var(--ft);font-size:15px}
.soldi:last-of-type{border-bottom:0}
.upsell{background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:var(--r);
  padding:8px 11px;font-size:12px;color:var(--amber-tx);margin-top:8px}

/* --- «Chiedi a Zeno»: la risposta sotto la omnibar --- */
.zeno-risposta{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--giallo);
  border-radius:var(--r);box-shadow:var(--shadow);padding:10px 12px;margin-top:8px}
.zeno-risposta h3{font-family:var(--ft);font-size:16px;font-weight:700;margin-bottom:6px}
.zeno-riga{display:flex;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dashed var(--border);font-size:13px}
.zeno-riga:last-of-type{border-bottom:0}
.zeno-riga.va{cursor:pointer}
.zeno-riga.va:hover .zr-t{color:var(--accent-text)}
.zeno-riga .zr-t{font-weight:600}
.zeno-riga .zr-s{color:var(--text-3);font-size:11.5px}
.zeno-riga a{color:var(--accent-text)}
.zeno-fonte{font-size:11px;color:var(--text-3);margin-top:6px}
.zeno-azioni{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.zeno-sugg{display:inline-block;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:3px 10px;font-size:12px;color:var(--text-2);cursor:pointer;margin:2px 3px 0 0}
.zeno-sugg:hover{border-color:var(--accent);color:var(--accent-text)}

/* --- avvio caldo: il badge coi dati «di quando» --- */
.boot-stale{font-size:10.5px;color:var(--amber-tx);background:var(--amber-bg);
  border:1px solid var(--amber-line);border-radius:9px;padding:2px 8px;white-space:nowrap}

/* --- vista collaboratrice: nessuna sidebar, solo le sue task --- */
.collab-app{max-width:640px;margin:0 auto;padding:18px 14px 60px}
.collab-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.collab-h h1{font-family:var(--ft);font-size:24px;font-weight:700}
.collab-h .btn{flex:none}
.collab-note{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:8px 10px;margin:6px 0 2px;font-size:12.5px}
.collab-note.nonfare{border-color:var(--red-line);background:#fffafa}
.collab-note b{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:2px}
.collab-note.nonfare b{color:var(--red-tx)}

/* --- il tasto «Nuovo» rifatto (punto A): due rapide grandi + gruppi --- */
.rapide{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.rapida{display:flex;align-items:center;gap:10px;background:var(--accent-weak);
  border:1px solid var(--sky-line);border-radius:var(--r);padding:12px;cursor:pointer;text-align:left}
.rapida:hover{border-color:var(--accent)}
.rapida .ico{font-family:var(--ft);font-weight:700;font-size:20px;color:var(--accent-text);
  background:var(--surface);border:1px solid var(--sky-line);border-radius:50%;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.rapida b{display:block;font-size:14px}
.rapida span{font-size:11.5px;color:var(--text-2)}
.gruppo{margin-bottom:10px}
.gruppo .gl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
.gruppo .riga-vc{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.vc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:8px 10px;cursor:pointer;text-align:left}
.vc:hover{border-color:var(--accent);background:var(--surface)}
.vc b{display:block;font-size:12.5px}
.vc span{font-size:10.5px;color:var(--text-3)}
/* su schermi stretti i riquadri larghi della scheda cliente tornano a colonna singola:
   uno span forzato su una griglia a una colonna creerebbe tracce implicite fuori schermo */
@media(max-width:700px){.cli-mini-grid{grid-template-columns:1fr}.cli-mini-grid .mini{grid-column:auto!important}}

/* ── Modalità riservata (28/8/26) ──────────────────────────────────────────────────────────
   Le cifre di denaro le copre eur() (un punto solo, in app.js). Qui si copre ciò che le
   cifre le DISEGNA invece di scriverle: i grafici raccontano l'andamento a chiunque guardi
   lo schermo, anche senza un numero scritto. Sfocati, non nascosti: si deve capire che c'è
   qualcosa di coperto, non credere che non ci sia niente. */
body.cifre-coperte .chart-wrap svg { filter: blur(7px); opacity: .55; }
body.cifre-coperte .chart-wrap { position: relative; }
body.cifre-coperte .chart-wrap::after {
  content: 'cifre coperte'; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--ft); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
/* il bottone dell'occhio: acceso quando le cifre sono coperte, così si vede a colpo d'occhio
   in che stato è lo schermo che stai per girare verso qualcuno */
.cifre-btn[aria-pressed="true"] { background: var(--amber-bg); color: var(--amber-tx); }

/* ── Collaboratori in Diagnostica ────────────────────────────────────────────────────────
   L'interruttore è il gesto principale; i permessi si aprono sotto la persona per non
   trasformare la Diagnostica in una nuova sezione di navigazione. */
.collaboratori-card{margin-top:16px}
.utenti-tbl{border:0;border-radius:0;box-shadow:none}
.t-persone{--cols:1.7fr .8fr 1.25fr .95fr 118px}
.riga-azioni{display:flex;gap:2px;justify-content:flex-end}
.icon-btn.on{background:var(--accent-weak);color:var(--accent-text)}
.switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .pista{position:relative;width:36px;height:21px;border-radius:99px;background:var(--gray-bg);border:1px solid var(--border-strong);transition:background .15s,border-color .15s;flex:none}
.switch .pista::before{content:"";position:absolute;top:1px;left:1px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(11,34,57,.3);transition:transform .15s}
.switch input:checked + .pista{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .pista::before{transform:translateX(15px)}
.switch input:focus-visible + .pista{outline:2px solid var(--accent);outline-offset:2px}
.switch .txt{font-size:12px;font-weight:650;display:none}
.switch input:checked ~ .txt.on{display:inline;color:var(--green-tx)}
.switch input:not(:checked) ~ .txt.off{display:inline;color:var(--text-3)}
.utenti-pannello{padding:14px;border-top:1px solid var(--border);background:var(--surface-2)}
.permessi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 18px;max-width:780px}
.permessi-esclusi{font-size:11.5px;color:var(--text-3);margin-top:10px}
/* casella che il server rispetta ma che nella casa della collaboratrice non ha ancora una
   schermata: si vede, non si tocca, e dice perché (vedi PERMESSI_SENZA_VISTA in app.js) */
.chk-row.senza-vista{cursor:default;color:var(--text-3)}
.senza-vista-nota{font-size:11px;color:var(--text-3);font-style:italic}
.utenti-password{display:flex;align-items:end;gap:8px;max-width:560px}
.utenti-password>label{flex:1}.utenti-password>.inp{flex:1.2}
.utenti-nuova-toggle{padding:10px 14px}
.utenti-nuova{border-top:1px solid var(--border);background:var(--surface-2)}
.utenti-nuova .chk-row small{color:var(--text-3);font-weight:400}
@media(max-width:720px){.permessi-grid{grid-template-columns:1fr}.utenti-password{align-items:stretch;flex-direction:column}.t-persone.tr.head{display:none}}

/* la coda del «Lascialo a me», aperta dal pallino accanto alla barra */
.inbox-lista{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:10px}
.inbox-riga{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-bottom:1px solid var(--border);background:var(--surface)}
.inbox-riga:last-child{border-bottom:0}
.inbox-riga .sub{display:block;font-size:11.5px;color:var(--text-3);margin-top:1px}
.inbox-badge.on{cursor:pointer}

/* una tessera della Diagnostica che segnala un guasto, non un numero: l'avvio rapido spento */
.kpi.kpi-guasto{border-color:var(--amber-line);background:var(--amber-bg)}
.kpi.kpi-guasto .k-val,.kpi.kpi-guasto .k-label{color:var(--amber-tx)}

/* ============ DOCUMENTI v3 — le porte, il destinatario, il percorso (30/8/26) ============
   Mockup approvato da Boris: design/mockup-documenti-v2.html.
   Regola di lettura del colore, la stessa di tutto Zeno: il GIALLO è segnale e vuol dire
   sempre e solo «la palla è tua». Se un giorno il giallo comincia a significare anche
   «urgente» o «importante», smette di significare qualcosa. */
.porte{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:10px;margin-bottom:18px}
.porta{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px 11px;
  cursor:pointer;text-align:left;position:relative;overflow:hidden;transition:border-color .12s,box-shadow .12s}
.porta:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.porta.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-weak)}
.porta::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--gray-line)}
.porta.p-tua::before{background:var(--giallo)}
.porta.p-lui::before{background:var(--amber-line)}
.porta.p-muto::before{background:var(--red-line)}
.porta.p-fatto::before{background:var(--green-line)}
.porta .n{font-family:var(--ft);font-size:27px;font-weight:700;line-height:1;letter-spacing:.01em;display:block}
.porta .l{display:block;font-size:11.5px;font-weight:600;color:var(--text-2);margin-top:3px}
.porta .s{display:block;font-size:10.5px;color:var(--text-3);margin-top:1px}

/* A CHI VA: il pallino distingue a colpo d'occhio il cliente da una persona fisica */
.dest{display:flex;align-items:center;gap:8px;min-width:0}
.av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--ft);font-size:12px;font-weight:700;letter-spacing:.02em}
.av-c{background:var(--sky-bg);color:var(--sky-tx);border:1px solid var(--sky-line)}
.av-p{background:var(--indigo-bg);color:var(--indigo-tx);border:1px solid var(--indigo-line)}
.dest-t{min-width:0}
.dest-n,.dest-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dest-n{font-weight:600;font-size:12.5px}
.dest-s{font-size:10.5px;color:var(--text-3)}
.tag-minore{background:var(--red-bg);color:var(--red-tx);border:1px solid var(--red-line);font-size:9.5px;
  font-weight:700;padding:0 4px;border-radius:3px;text-transform:uppercase;letter-spacing:.03em;margin-left:5px;vertical-align:1px}

/* A CHE PUNTO È: quattro tacche — generato · mandato · aperto · firmato.
   Si legge da lontano senza aprire niente, che è tutto il punto della dashboard. */
.perc{display:flex;gap:2px;margin-bottom:4px}
.pg{height:5px;flex:1;border-radius:2px;background:var(--gray-bg);border:1px solid var(--gray-line)}
.pg.on{background:var(--sky-tx);border-color:var(--sky-tx)}
.pg.ok{background:var(--green-tx);border-color:var(--green-tx)}
.pg.wait{background:var(--giallo);border-color:var(--giallo-scuro)}
.perc-l{font-size:10.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.perc-l b{color:var(--text-2);font-weight:600}
.btn-giallo{background:var(--giallo);border-color:var(--giallo-scuro);color:#3a2600}
.btn-giallo:hover{background:#f0b800;color:#3a2600}

/* il riquadro «Manda»: le vie, e sotto il tasto che TIMBRA (scelta di Boris: mai in automatico) */
/* 2x2 fisso e non auto-fit: con quattro vie l'auto-fit ne metteva tre in fila e una
   spaiata sotto, a seconda della larghezza. Due colonne stanno bene sul telefono e sul Mac. */
.vie{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.via{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 8px;border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer}
.via:hover{border-color:var(--accent);background:var(--accent-weak);color:var(--accent-text)}
.via.usata{border-color:var(--green-line);background:var(--green-bg);color:var(--green-tx)}
.timbro{border-top:1px solid var(--border);padding-top:13px;margin-top:2px}

@media (max-width:720px){
  .porte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .porta .n{font-size:23px}
}

/* --- scelta del modello di proposta: le stesse tessere del mockup approvato --- */
.modelli{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.mod-t{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px;
  cursor:pointer;text-align:left;position:relative;transition:border-color .12s,box-shadow .12s}
.mod-t:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.mod-t.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-weak)}
/* un modello non ancora costruito si VEDE ma non si sceglie: sapere cosa manca è metà del
   valore della predisposizione. Il server lo rifiuterebbe comunque — qui si evita solo di
   far premere un tasto che poi dice di no. */
.mod-t.futuro{opacity:.7;cursor:not-allowed}
.mod-t.futuro .tela{filter:grayscale(.55)}
.tela{height:96px;border:1px solid var(--border);border-radius:4px;background:#fff;overflow:hidden;margin-bottom:8px;position:relative}
.tela .bd{position:absolute;z-index:2;top:5px;right:5px;background:rgba(16,44,76,.9);color:#fff;font-size:9px;
  font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:.03em;text-transform:uppercase}
.tela.futura .bd{background:rgba(138,91,0,.92)}
.tela .l{height:3.5px;background:var(--gray-line);border-radius:2px;margin-bottom:4px}
.tela .tp{height:22px;background:var(--navy)}
.tela .cv{height:42px;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 100%)}
.tela .bx{padding:7px 8px}
.tela .rw{display:flex;justify-content:space-between;gap:6px;margin-bottom:4px}
.tela .rw i{height:3.5px;background:var(--gray-line);border-radius:2px;flex:1;display:block}
.tela .rw u{height:3.5px;width:18px;background:var(--navy-3);border-radius:2px;display:block}
.tela .tot{height:8px;width:38%;background:var(--giallo);border-radius:2px;margin-left:auto;margin-top:6px}
.mod-t b{font-size:12.5px;display:block;margin-bottom:2px}
.mod-t p{font-size:11px;color:var(--text-3);line-height:1.4}

/* --- le tre famiglie in cima ai Progetti (v23, 31/8/26): la divisione principale, non un
   filtro fra i filtri. Più grandi e staccate dai filtri di stato che stanno sotto. --- */
.fam-tabs .f-chip{font-size:13px;padding:6px 14px}
.fam-tabs .f-chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.fam-n{display:inline-block;min-width:17px;padding:0 4px;margin-left:5px;border-radius:9px;
  background:var(--gray-bg);color:var(--text-3);font-size:11px;font-weight:700;text-align:center}
.fam-tabs .f-chip.on .fam-n{background:rgba(255,255,255,.22);color:#fff}

/* --- «fermo da N giorni» (31/8/26): il dato che Zeno registrava da sempre e non mostrava.
   Ambra = comincia a essere tanto · rosso = qui bisogna fare qualcosa. Sotto la soglia non
   compare affatto: un'etichetta su ogni riga non segnalerebbe più niente. --- */
.fermo{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:1px 6px;border-radius:9px;margin-left:6px;white-space:nowrap;border:1px solid}
.fermo.avviso{background:var(--amber-bg);color:var(--amber-tx);border-color:var(--amber-line)}
.fermo.grave{background:var(--red-bg);color:var(--red-tx);border-color:var(--red-line)}

/* --- le cinque manopole del motore (31/8/26): stanno in Diagnostica perché sono
   configurazione, non lavoro quotidiano. Due colonne per non farne una colonna sola lunga. --- */
.manopole{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px}
.manopola{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.manopola .fl{margin-bottom:6px}
.man-riga{display:flex;align-items:center;gap:9px}
.man-riga .inp{width:74px;text-align:right}
.man-riga .hint{margin:0;font-size:11.5px}

/* --- la riga del totale in fondo a un elenco (31/8/26): è un riepilogo, non una riga come le
   altre — sfondo pieno e nessun effetto al passaggio del mouse, così non sembra cliccabile. --- */
.tbl .tr.totale{background:var(--surface-2);border-top:1px solid var(--border-strong);
  border-bottom:0;font-size:12.5px;color:var(--text-2)}
.tbl .tr.totale:hover{background:var(--surface-2)}
.tbl .tr.totale b{font-family:var(--ft);font-size:16px;color:var(--text)}
.tbl .tr.totale .sub{display:block;font-size:10.5px;color:var(--text-3);font-weight:400}

/* --- BERSAGLI DA TOCCO, dal telefono in giù (3/9/26) -----------------------------------
   WCAG 2.5.8 pretende almeno 24×24 px per un comando che si tocca; Apple ne consiglia 44.
   Zeno stava sotto in mezza dozzina di posti, e non nei dettagli decorativi: la casella di
   spunta di una task 15×15 con il titolo (che apre il form) a 10 px di distanza, il cestino
   della stessa task stretto a 14 px, le caselle del Fisco 13×13, le matite ✎ della scheda
   progetto 10×19. Sul telefono la spunta si manca o si prende quello che sta accanto — e
   quello che sta accanto cancella, con un confirm() da rispedire indietro.

   Due modi, a seconda di cosa si tocca:
   · i comandi che hanno una loro forma (caselle, tasti a icona) si INGRANDISCONO;
   · i comandi scritti come testo (le matite ✎, il «modifica» e l'«elimina» della scheda
     cliente) prendono padding e un margine negativo uguale: l'area cresce, il testo resta
     dov'era. Ingrandirli davvero vorrebbe dire riscrivere l'impaginazione attorno.

   ⚠️ 24 e non 22. La riparazione proposta dall'audit diceva 22×22 per le caselle, che è
   sotto la soglia dello stesso criterio con cui si misura: sarebbe stato un lavoro fatto e
   ancora rosso.

   E sta in FONDO al foglio apposta: `.tk>input[type=checkbox]` (:1006) e `.omnibar input`
   (:511) hanno la stessa specificità e vengono dopo — da più in alto queste regole
   perdevano proprio sui due bersagli peggiori. --- */
@media(max-width:880px){
  /* le caselle: 15×15 (task, cruscotto), 13×13 (fisco, «è una stima»), 17×17 (preventivo).
     .tk>input[type=checkbox] va nominato per esteso: ha specificità più alta e vincerebbe. */
  input[type=checkbox],input[type=radio],.tk>input[type=checkbox],.act-check,.svc>input[type=checkbox]{width:24px;height:24px;flex:0 0 auto}
  /* i tasti a icona. flex:0 0 auto perché .tk è un flex: senza, il cestino si stringe a
     14 px accanto a un titolo lungo — che è la misura con cui è stato trovato. */
  .icon-btn,.tk-del,.sheet-close,.sheet-back,.pwa-install button{min-width:40px;min-height:40px;flex:0 0 auto}
  .foot-diag{min-height:40px}
  /* il campo dell'omnibar restava a 23 px di altezza: uno in meno della soglia */
  .omnibar input{min-height:24px}
  /* i comandi-testo: l'area cresce, la posizione no. Il ✎ è largo 10 px e ha bisogno di
     padding anche di lato; «modifica» ed «elimina» sono già larghi 38 e 44, e allargarli
     ancora spingeva il nome del cliente su tre righe: a loro serve solo l'altezza. */
  .edit-inline{display:inline-block;padding:8px 10px;margin:-8px 0}
  #cli-edit,.card-h .hint[data-cancella]{display:inline-block;padding:8px 2px;margin:-8px 0}
}

/* --- le linguette della scheda cliente, sul telefono (3/9/26) ---------------------------
   Le cinque linguette misurano 452 px in 360 disponibili: la barra scorreva di lato senza
   nessun segnale che scorresse, e «Dati & verifiche» — cioè VIES e Registro Imprese —
   restava fuori, mozzato a metà parola. Su iPhone SE usciva anche «Documenti».
   Vanno a capo: cinque etichette su due righe si vedono tutte, e non c'è niente da
   indovinare. L'alternativa (tenere lo scorrimento e aggiungere una sfumatura a destra)
   chiede di sapere che si scorre; questa no. --- */
@media(max-width:720px){
  .cli-tabs{flex-wrap:wrap}
}

/* «Metti in ordine» (v6): la pulizia dei dati importati compare nel cruscotto, non in un
   pulsante nascosto. Sparisce da sola quando non c'è più niente da mettere in ordine. */
.card.ordine{border-left:4px solid var(--giallo)}
.ordine-p{margin:0 0 10px;padding:0 14px;color:var(--text-2);font-size:13px;line-height:1.45}
.ordine-p b{color:var(--text)}
.ordine-az{display:flex;gap:8px;padding:0 14px 14px}

/* Nastro della demo (v6): giallo Hive a righe, mai usato altrove per dire «attenzione». */
.demo-pill{font:800 10.5px/1 var(--fs);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);
  background:repeating-linear-gradient(135deg,var(--giallo) 0 8px,#ffd84d 8px 16px);padding:6px 10px;border-radius:4px;border:1px solid #e0ac00;white-space:nowrap}
@media (max-width:760px){.demo-pill{font-size:9.5px;padding:5px 7px}}

/* ═══ v6 · pagina «Oggi» (8/9/26) — il cruscotto guida, non elenca. Mockup: design/mockup-v6-oggi.html ═══ */
.oggi-h{display:flex;align-items:flex-end;gap:16px;margin:2px 0 14px}
.oggi-h h1{font:700 26px/1 var(--ft);color:var(--navy);letter-spacing:.005em;margin:0}
.oggi-ctx{margin:6px 0 0;color:var(--text-2);font-size:13px}
.oggi-ctx b{color:var(--text)}
.oggi-sp{margin-left:auto;font-size:12px;color:var(--text-3);white-space:nowrap}
.oggi-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.okpi{text-align:left;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;font:inherit;color:var(--text);min-width:0}
.okpi:hover{border-color:var(--border-strong)}
.okpi:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.okpi.k2{border-top-color:var(--navy)}.okpi.k3{border-top-color:var(--green-tx,#14683a)}.okpi.k4{border-top-color:var(--giallo)}
.okpi .kl{font:700 10px/1 var(--fs);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.okpi .kv{font:700 30px/1 var(--ft);margin:8px 0 6px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.okpi .kv small{font-size:15px;color:var(--text-3);font-weight:600}
.okpi .ks{font-size:12px;color:var(--text-2);line-height:1.35}
.okpi .ks .giu{color:var(--red-tx,#a62b2b)}.okpi .ks .su{color:var(--green-tx,#14683a)}
.okpi .cbar{height:5px;background:var(--gray-bg);border-radius:3px;margin-top:9px;overflow:hidden}.okpi .cbar i{display:block;height:100%;background:var(--giallo)}
.oggi-radar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px 14px 12px;margin-bottom:14px;box-shadow:var(--shadow)}
.orh{display:flex;align-items:center;gap:14px;margin-bottom:9px;flex-wrap:wrap}
.orh h3{margin:0;font:800 12px/1 var(--fs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.orh .leg{display:flex;gap:12px;font-size:11px;color:var(--text-3);flex-wrap:wrap;align-items:center}
.oggi-radar .lnk,.oggi-card .lnk{margin-left:auto;font:600 12px var(--fs);color:var(--accent-text);background:none;border:0;cursor:pointer;padding:0}
.orband{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.ort{text-align:left;font:inherit;color:var(--text);cursor:pointer;border:1px solid var(--border);border-left:4px solid var(--text-3);border-radius:5px;padding:8px 10px;background:var(--surface);min-width:0}
.ort .ort-cat{font:700 9.5px/1 var(--fs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ort .ort-tt{font-weight:700;font-size:13px;margin:5px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ort .ort-tf{display:flex;align-items:baseline;gap:7px;min-width:0}
.ort .ort-gg{font:700 18px/1 var(--ft);flex:0 0 auto}
.ort .ort-qs{font-size:11px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ort-soldi{border-left-color:var(--red-tx,#a62b2b)}.ort-soldi .ort-gg{color:var(--red-tx,#a62b2b)}
.ort-multa{border-left-color:var(--indigo-tx,#5b3fa8)}.ort-multa .ort-gg{color:var(--indigo-tx,#5b3fa8)}
.ort-cliente{border-left-color:var(--giallo)}.ort-cliente .ort-gg{color:#7a5b00}
.ort-servizio{border-left-color:var(--accent)}.ort-servizio .ort-gg{color:var(--accent-text)}
.ort-fisco{border-left-color:var(--text-3);background:var(--surface-2)}.ort-fisco .ort-gg{color:var(--text-3)}
.ort.crit{background:var(--red-bg)}
.oggi-griglia{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:14px;align-items:start;margin-bottom:14px}
.oggi-col{display:grid;gap:14px;min-width:0}
.oggi-col .card,.oggi-col .prop-card{margin:0}
.oggi-card .card-h h2,.oggi-col .prop-card .card-h h2{font:800 12px/1 var(--fs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
/* il consigliere: punteggio grande e leggibile, la fascia è un'etichetta, non un blocco */
.prop-card .psc{background:none;flex-basis:52px;padding:2px 0 0}
.prop-card .psc b{display:block;font:700 26px/1 var(--ft)}
.prop-card .psc span{display:inline-block;font:700 9px/1 var(--fs);letter-spacing:.1em;margin-top:3px;padding:2px 5px;border-radius:3px;background:var(--gray-bg);color:var(--text-2)}
.prop-card .psc.alta b{color:var(--red-tx,#a62b2b)}.prop-card .psc.alta span{background:var(--red-bg);color:var(--red-tx,#a62b2b)}
.prop-card .psc.media b{color:var(--amber-tx,#8a5a00)}.prop-card .psc.media span{background:var(--amber-bg);color:var(--amber-tx,#8a5a00)}
.prop-card .psc.bassa b{color:var(--text-3)}
.rich{padding:10px 14px;border-bottom:1px solid var(--border)}
.rich:last-of-type{border-bottom:0}
.rich .r1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rich .nome{font-weight:700;font-size:13.5px}.rich .gg{font:700 15px/1 var(--ft);color:var(--text-2)}
.rich .mot{font-size:12px;color:var(--text-2);margin:3px 0 7px}
.rich .azioni{display:flex;gap:6px;flex-wrap:wrap}
.noch{padding:9px 14px;font-size:12px;color:var(--text-2);background:var(--surface-2);border-radius:0 0 var(--r) var(--r)}
.app-row{display:flex;gap:12px;padding:9px 14px;border:0;border-bottom:1px solid var(--border);width:100%;text-align:left;background:none;font:inherit;color:var(--text);cursor:pointer}
.app-row:last-child{border-bottom:0}
.app-row .day{display:grid;justify-items:center;min-width:34px}.app-row .dw{font:700 9px/1 var(--fs);letter-spacing:.1em;color:var(--text-3)}.app-row .dn{font:700 20px/1 var(--ft);margin-top:2px}
.app-row.today .dn{color:var(--accent)}
.app-row .an{font-weight:700;font-size:12.5px}.app-row .al{font-size:11.5px;color:var(--text-2)}
.stima{padding:9px 14px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:baseline;font-size:12.5px}
.stima:last-of-type{border-bottom:0}
.stima .q{font:700 15px/1 var(--ft);color:var(--text-3);min-width:56px}
.stima .t{flex:1;min-width:0}.stima .t small{display:block;color:var(--text-3);font-size:11px}
.oggi-stime .card-h{background:var(--surface-2)}
@media (max-width:1020px){.oggi-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.orband{grid-template-columns:repeat(3,minmax(0,1fr))}.oggi-griglia{grid-template-columns:1fr}}
@media (max-width:720px){.oggi-h{flex-wrap:wrap}.oggi-sp{display:none}.orband{grid-template-columns:repeat(2,minmax(0,1fr))}.okpi .kv{font-size:26px}}
@media (max-width:420px){.oggi-kpi{grid-template-columns:1fr 1fr;gap:8px}.okpi{padding:10px 12px}}
/* «Altro» sul telefono: il pannello che si apre sopra la barra */
.altro-menu{position:fixed;left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.altro-menu button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);font:600 11.5px var(--fs);color:var(--text)}
.altro-menu button .ic{width:18px;height:18px}
.altro-menu[hidden]{display:none}
@media (min-width:881px){.altro-menu{display:none}}