/* guscio.css — la pelle condivisa: chassis del gestionale.
 *
 * FONTE UNICA. Lo usano due cose che vivono in posti diversi:
 *   - le pagine PHP, che lo linkano come file;
 *   - il mockup del gestionale, che lo INCORPORA a build (`gen_mockup.py`),
 *     perche' deve restare un file solo che si apre offline con un doppio clic.
 *
 * Quindi si modifica QUI e in nessun altro posto. Se cambi un colore, cambia in
 * tutte e due senza doverlo ricordare.
 *
 * Estratto da build/gen_mockup.py il 25/08/2026, byte per byte: il mockup prima
 * e dopo l'estrazione deve risultare identico a vista.
 */

:root{
  --prugna:#401D34; --prugna-l:#5A2C4A;
  --rosa:#D35A95; --rosa-d:#B8437C; --rosa-bg:#FBEEF5;
  --ink:#2B1F27; --muted:#6B6069; --soft:#9A8E96;
  --line:#EDE4EA; --bg:#FAF7F9; --surf:#ffffff;
  --verde:#1F8F56; --verde-bg:#E7F6EE; --giallo:#E8A700; --giallo-bg:#FDF4DF;
  --rosso:#DC4B3E; --rosso-bg:#FDECEB; --blu:#2F6FED; --blu-bg:#E9F0FE;
  --r:10px; --r-s:7px;
  --sh:0 1px 2px rgba(40,20,35,.06),0 1px 3px rgba(40,20,35,.05);
  --sh-m:0 4px 16px rgba(40,20,35,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--ink);background:var(--bg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hidden{display:none!important}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2A1222,#401D34 55%,#5A2C4A)}
.login-card{background:#fff;width:360px;max-width:92vw;border-radius:16px;padding:34px 30px;box-shadow:0 20px 60px rgba(0,0,0,.35);text-align:center}
/* Sulla card bianca dell'accesso il logo porta con se' il suo fondo prugna:
   gli angoli arrotondati evitano il rettangolo secco. */
.login-card img{width:100%;max-width:210px;height:auto;margin:0 auto 12px;display:block;border-radius:10px}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:22px}
.login-card label{display:block;text-align:left;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px}
.login-card input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:14px;margin-bottom:14px;font-family:inherit}
.login-card input:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-bg)}
.login-card .err{color:var(--rosso);font-size:12px;height:14px;margin:-8px 0 8px;text-align:left}
.login-foot{margin-top:18px;font-size:11px;color:var(--soft)}

/* ---------- SHELL ---------- */
#app{display:grid;grid-template-columns:236px 1fr;grid-template-rows:60px 1fr;
  grid-template-areas:"side top" "side main";height:100vh}
.topbar{grid-area:top;background:var(--surf);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:30}
.burger{display:none;font-size:20px;color:var(--muted)}
.search{flex:1;max-width:440px;position:relative}
.search input{width:100%;padding:9px 12px 9px 38px;border:1px solid var(--line);border-radius:9px;background:#FCFAFB;font-size:13px;font-family:inherit}
.search input:focus{outline:none;border-color:var(--rosa);background:#fff;box-shadow:0 0 0 3px var(--rosa-bg)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--soft)}
.icon-btn svg{width:19px;height:19px}
.kpi svg,.card-b svg.inl{width:16px;height:16px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.icon-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative}
.icon-btn:hover{background:var(--bg)}
.icon-btn .bdg{position:absolute;top:4px;right:4px;background:var(--rosa);color:#fff;font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--rosa);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.who{font-size:12px;line-height:1.2}.who b{display:block;font-size:13px}.who span{color:var(--muted)}
.role-sw{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:5px 9px 5px 11px;background:#FCFAFB}
.role-sw select{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;outline:none}

.side{grid-area:side;background:var(--prugna);color:#D9C9D3;display:flex;flex-direction:column;padding:16px 12px}
.side .brand{display:flex;justify-content:center;padding:10px 8px 20px}
/* Niente riquadro bianco dietro: il logo ha GIA' lo sfondo prugna dentro
   (#401D35, lo stesso della barra), quindi appoggiandolo direttamente si fonde.
   Il fondo bianco serviva al vecchio logo, che era trasparente su testo scuro
   e senza un riquadro chiaro sarebbe risultato invisibile. */
.side .brand img{width:100%;max-width:190px;height:auto;display:block}
.side nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow:auto}
.side a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:#C3AFBC;font-weight:500;font-size:13.5px}
.side a:hover{background:rgba(255,255,255,.07);color:#fff}
.side a.on{background:var(--rosa);color:#fff}
.side a svg{width:18px;height:18px;flex:0 0 18px}
.side a .n{margin-left:auto;background:var(--rosa);color:#fff;font-size:10.5px;font-weight:700;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.side a.on .n{background:rgba(255,255,255,.25)}
.side .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#8D7484;padding:14px 12px 6px}
.side .foot{font-size:11px;color:#8D7484;padding:12px 10px;border-top:1px solid rgba(255,255,255,.09);line-height:1.5}
.side .foot b{color:#C3AFBC}

main{grid-area:main;overflow:auto;padding:26px 30px 60px}
.view{display:none;animation:fade .25s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- BITS ---------- */
.page-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-h h1{font-size:21px;font-weight:800;letter-spacing:-.2px}
.page-h .crumb{font-size:12.5px;color:var(--muted);margin-bottom:3px}
.page-h .sp{flex:1}
.sp{flex:1}
.demo-tag{font-size:10.5px;color:var(--soft);border:1px solid var(--line);border-radius:20px;padding:3px 10px;background:#fff}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;font-weight:600;font-size:13px;border:1px solid transparent;transition:.12s}
.btn svg{width:16px;height:16px}
.btn-p{background:var(--rosa);color:#fff}.btn-p:hover{background:var(--rosa-d)}
.btn-s{background:#fff;border-color:var(--line);color:var(--ink)}.btn-s:hover{border-color:#DDCBD6;background:#FCFAFB}
.btn-g{color:var(--muted)}.btn-g:hover{background:var(--bg);color:var(--ink)}
.btn-d{background:var(--rosso);color:#fff}.btn-d:hover{background:#c23c30}
.btn-sm{padding:6px 11px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.card-h h3{font-size:14.5px;font-weight:700}
.card-b{padding:18px}
.grid{display:grid;gap:18px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}

.kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh)}
.kpi .lab{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.kpi .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.kpi .num{font-size:26px;font-weight:800;letter-spacing:-.5px}
.kpi .sub{font-size:11.5px;color:var(--soft);margin-top:2px}

/* chip = stato · badge = categoria */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap}
.chip .d{width:7px;height:7px;border-radius:50%;flex:0 0 7px}
.s1{background:#F1EEF0;color:#6B6069}.s1 .d{background:#9A8E96}
.s2{background:#EDEAEE;color:#5B5260}.s2 .d{background:#7C7285}
.s3{background:#E9E6F2;color:#4B4386}.s3 .d{background:#6C61C0}
.s4{background:var(--giallo-bg);color:#9A6B00}.s4 .d{background:var(--giallo)}
.s5{background:#FDF0E2;color:#A25E12}.s5 .d{background:#E08A2B}
.s6{background:#FBEEDC;color:#8F5A0B}.s6 .d{background:#D2871A}
.s7{background:var(--verde-bg);color:var(--verde)}.s7 .d{background:var(--verde)}
.s8{background:var(--blu-bg);color:#2256c9}.s8 .d{background:var(--blu)}
.s9{background:#EEF1F5;color:#5B6471}.s9 .d{background:#8A93A0}
.s10{background:var(--rosso-bg);color:#C23C30}.s10 .d{background:var(--rosso)}
.s11{background:#F3E9F0;color:#8B3A6B}.s11 .d{background:#A9548A}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 8px;border-radius:5px;white-space:nowrap}
.b-ce{background:var(--verde-bg);color:var(--verde)}
.b-cp{background:var(--blu-bg);color:#2256c9}
.b-cs{background:var(--rosa-bg);color:var(--rosa-d)}
.b-cr{background:var(--giallo-bg);color:#9A6B00}
.b-ch{background:#EFECF0;color:#5B5260}
.b-gr{background:#F3E9F0;color:#8B3A6B}

table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--soft);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tb td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tb tr:last-child td{border-bottom:none}
table.tb tbody tr.clk{cursor:pointer}
table.tb tbody tr.clk:hover{background:#FCFAFB}
.mono{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}.small{font-size:12px}.strong{font-weight:700}
.right{text-align:right}.tr-tot td{font-weight:700;background:#FCFAFB}
.trunc{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}

/* DTE semaforo */
.dte{font-weight:700;font-variant-numeric:tabular-nums}
.dte.ok{color:var(--verde)}.dte.warn{color:#9A6B00}.dte.late{color:var(--rosso)}
.dte.none{color:var(--soft);font-weight:500}

/* 5 pallini delle fasi */
.fasi{display:inline-flex;gap:4px}
.fasi i{width:9px;height:9px;border-radius:50%;background:#E4DAE0;display:block}
.fasi i.ok{background:var(--verde)}
.fasi i.ass{background:var(--giallo)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.tabs button{padding:10px 14px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--rosa-d);border-bottom-color:var(--rosa)}
.tab-pane{display:none}.tab-pane.on{display:block}

/* stepper stati */
.tl{display:flex;margin:2px 0 6px;overflow-x:auto;padding-bottom:6px}
.tl .st{display:flex;flex-direction:column;align-items:center;flex:1;min-width:64px;position:relative}
.tl .st::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.tl .st:first-child::before{display:none}
.tl .st .pt{width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--line);z-index:1;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--soft)}
.tl .st.done .pt{background:var(--rosa);border-color:var(--rosa);color:#fff}
.tl .st.now .pt{border-color:var(--rosa);color:var(--rosa-d);box-shadow:0 0 0 4px var(--rosa-bg)}
.tl .st .lb{font-size:10px;margin-top:7px;color:var(--muted);text-align:center;line-height:1.3}
.tl .st.done .lb,.tl .st.now .lb{color:var(--ink);font-weight:700}

/* striscia prossimo passo */
.next-step{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:var(--r);margin:16px 0 20px;flex-wrap:wrap;
  background:var(--rosa-bg);border:1px solid #F2D9E7}
.next-step .ttl{font-weight:700;font-size:13.5px;color:var(--rosa-d)}
.next-step .sub{font-size:12.5px;color:var(--muted)}
.next-step input,.next-step select{padding:8px 11px;border:1px solid #E7CADB;border-radius:8px;font-family:inherit;font-size:13px;background:#fff}
.next-step input:focus,.next-step select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px #F7DDEB}
.next-step.done{background:var(--verde-bg);border-color:#CDE9DA}
.next-step.done .ttl{color:var(--verde)}

/* liste e form */
.dl{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13px}
.dl dt{color:var(--muted)}.dl dd{font-weight:600;text-align:right}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px;font-size:13px}
.info-grid .l{color:var(--muted);font-size:12px;margin-bottom:2px}
.info-grid .v{font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.fld label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:5px}
.fld input,.fld textarea,.fld select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-bg)}
.fld.full{grid-column:1/-1}
.inl-edit{border:1px solid transparent;border-radius:7px;padding:4px 7px;margin:-4px -7px;cursor:text}
.inl-edit:hover{border-color:var(--line);background:#FCFAFB}

/* pill scelta (chip cliccabili nei form) */
.pick{display:flex;gap:7px;flex-wrap:wrap}
.pick button{border:1px solid var(--line);border-radius:20px;padding:6px 13px;font-size:12.5px;font-weight:600;color:var(--muted);background:#fff}
.pick button.on{background:var(--rosa);border-color:var(--rosa);color:#fff}

/* switch e set-row */
.sw{width:40px;height:22px;border-radius:12px;background:#DFD3DA;position:relative;flex:0 0 40px;cursor:pointer;transition:.15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}
.sw.on{background:var(--rosa)}.sw.on::after{left:21px}
.set-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-row .t{font-weight:600;font-size:13.5px}
.set-row .d{font-size:12px;color:var(--muted);margin-top:2px}

/* checklist */
.ck{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.ck:last-child{border-bottom:none}
.ck .bx{width:18px;height:18px;border-radius:5px;border:1.5px solid #DDCBD6;flex:0 0 18px;margin-top:1px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ck .bx svg{width:12px;height:12px;color:#fff;display:none}
.ck.on .bx{background:var(--verde);border-color:var(--verde)}
.ck.on .bx svg{display:block}
.ck .who{font-size:11.5px;color:var(--soft);margin-top:2px}

/* messaggi */
.msg{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;display:flex;gap:14px;align-items:flex-start;cursor:pointer;transition:.12s}
.msg:hover{border-color:#DDCBD6;box-shadow:var(--sh)}
.msg .ord{width:30px;height:30px;border-radius:8px;background:var(--prugna);color:#fff;font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.msg .body{flex:1;min-width:0}
.msg .prev{font-size:12.5px;color:var(--muted);margin:5px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg .meta{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.msg.sub{margin-left:34px;border-left:3px solid var(--rosa-bg)}
.pill-btn{font-size:11px;font-weight:600;background:#F4EFF2;color:#5B5260;border-radius:6px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px}
.pill-btn .lk{color:var(--soft);font-size:10px}

/* editor copy */
.editor-wrap{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.cnt{font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.cnt.warn{color:#9A6B00}.cnt.over{color:var(--rosso)}
.vld{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#FCFAFB;margin-top:12px}
.vld .row{display:flex;align-items:center;gap:9px;font-size:12.5px;padding:3px 0}
.vld .row .ic{width:16px;height:16px;flex:0 0 16px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:10px;font-weight:700;color:#fff}
.vld .row.ok .ic{background:var(--verde)}
.vld .row.ko .ic{background:var(--rosso)}
textarea.copy{width:100%;min-height:190px;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r);font-family:inherit;font-size:13.5px;line-height:1.6;resize:vertical}
textarea.copy:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-bg)}

/* anteprima telefono */
.phone{border:9px solid #241019;border-radius:32px;overflow:hidden;box-shadow:var(--sh-m);background:#241019}
.phone .hd{background:#075E54;color:#fff;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:13px}
.phone .hd .av{width:28px;height:28px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.phone .scr{background:#ECE5DD;min-height:330px;padding:14px 12px;background-image:radial-gradient(rgba(0,0,0,.03) 1px,transparent 1px);background-size:14px 14px}
.bubble{background:#fff;border-radius:9px;padding:9px 11px;font-size:12.5px;line-height:1.5;box-shadow:0 1px 1px rgba(0,0,0,.12);max-width:96%}
.bubble .img{height:74px;border-radius:6px;background:linear-gradient(135deg,#D9C4D0,#EFE3EA);margin:-2px -3px 8px;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#8B6F80}
.bubble .tm{font-size:9.5px;color:#98918B;text-align:right;margin-top:3px}
.bubble-btn{background:#fff;border-radius:8px;margin-top:3px;padding:9px;text-align:center;color:#0A7CFF;font-size:12.5px;font-weight:600;box-shadow:0 1px 1px rgba(0,0,0,.12)}

/* diff */
.diff{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.diff .col{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.diff .col .h{padding:9px 13px;font-size:12px;font-weight:700;border-bottom:1px solid var(--line);background:#FCFAFB;display:flex;align-items:center;gap:8px}
.diff .col .b{padding:13px;font-size:12.5px;line-height:1.6;white-space:pre-wrap}
ins{background:#DCF3E6;text-decoration:none;border-radius:3px;padding:0 2px}
del{background:#FBDDDA;border-radius:3px;padding:0 2px}
.dstruct{margin-top:14px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dstruct .r{display:flex;gap:11px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12.5px;align-items:flex-start}
.dstruct .r:last-child{border-bottom:none}
.dstruct .r .tg{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--soft);min-width:74px;padding-top:1px}
.dstruct .r.warn{background:#FFFBF0}.dstruct .r.bad{background:var(--rosso-bg)}

/* banner */
.bnr{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--r);font-size:13px;margin-bottom:14px}
.bnr .tt{font-weight:700;margin-bottom:2px}
.bnr.red{background:var(--rosso-bg);border:1px solid #F6CFCB;color:#8E2A20}
.bnr.yel{background:var(--giallo-bg);border:1px solid #F2E0B4;color:#7A5400}
.bnr.grn{background:var(--verde-bg);border:1px solid #CDE9DA;color:#12613A}
.bnr .sp{flex:1}

/* timeline note */
.tlx{display:flex;flex-direction:column;gap:0}
.tlx .it{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.tlx .it:last-child{border-bottom:none}
.tlx .av{width:30px;height:30px;border-radius:50%;background:var(--rosa-bg);color:var(--rosa-d);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.tlx .tx{font-size:13px;flex:1}
.tlx .mt{font-size:11.5px;color:var(--soft);margin-top:3px}
.tlx .it.dec{background:#FCFAFB;border-radius:8px;padding:13px 12px;margin:4px 0}

/* modal */
.ov{position:fixed;inset:0;background:rgba(40,20,35,.45);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.ov.on{display:flex}
.modal{background:#fff;border-radius:14px;width:480px;max-width:96vw;max-height:92vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.3);animation:pop .18s ease}
.modal.wide{width:860px}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal-h{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:sticky;top:0;background:#fff;z-index:2}
.modal-h h3{font-size:15px;font-weight:700}.modal-h .x{margin-left:auto;color:var(--soft);font-size:20px;line-height:1}
.modal-b{padding:20px}
.modal-b label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin:0 0 5px}
.modal-b input,.modal-b textarea,.modal-b select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;margin-bottom:13px;font-family:inherit}
.modal-b input:focus,.modal-b textarea:focus,.modal-b select:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-bg)}
.modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:#FCFAFB;position:sticky;bottom:0}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:90;
  background:var(--prugna);color:#fff;padding:12px 18px;border-radius:10px;font-size:13px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--sh-m);opacity:0;pointer-events:none;transition:.25s;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast svg{width:16px;height:16px;color:#7EE2AC;flex:0 0 16px}

.side-bd{position:fixed;inset:0;background:rgba(40,20,35,.45);z-index:40;display:none}
.side-bd.on{display:block}
@media(min-width:901px){.side-bd{display:none!important}}

/* calendario */
.cal-tl{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.cal-tl .wk{display:grid;grid-template-columns:150px 1fr;border-bottom:1px solid var(--line)}
.cal-tl .wk:last-child{border-bottom:none}
.cal-tl .wl{padding:11px 14px;font-size:12px;font-weight:700;color:var(--muted);border-right:1px solid var(--line);background:#FCFAFB}
.cal-tl .wc{padding:9px 14px;display:flex;flex-direction:column;gap:5px}
.cal-bar{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;color:#fff;width:fit-content;cursor:pointer}

/* ruoli: cosa si nasconde a chi */
.d-sara{display:none}
body[data-role="sara"] .d-sara{display:block}
body[data-role="sara"] .d-tech{display:none}
body[data-role="diego"] .d-tech{display:none}
body[data-role="diego"] .d-sara{display:block}
body[data-role="sara"] .only-tech{display:none!important}
body[data-role="diego"] .only-tech,body[data-role="diego"] .only-owner{display:none!important}
body[data-role="angelo"] .only-owner{display:none!important}

.mobile-only{display:none}
@media(max-width:900px){
  #app{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .side{position:fixed;left:0;top:0;bottom:0;width:236px;z-index:50;transform:translateX(-100%);transition:.22s}
  .side.open{transform:none}
  .burger{display:block}
  .g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}
  .info-grid,.form-grid{grid-template-columns:1fr}
  .editor-wrap{grid-template-columns:1fr}
  .diff{grid-template-columns:1fr}
  main{padding:18px 16px 50px}
  .who,.role-sw,.search{display:none}
  .cal-tl .wk{grid-template-columns:1fr}
  .mobile-only{display:block}
}

/* Una pagina che si dimensiona da sola sull'altezza dello schermo - come la
   vista a due colonne delle conversazioni - non deve far scorrere ANCHE il
   main: si otterrebbero due barre di scorrimento verticali, una dentro
   l'altra. Con `piena` il main non scorre e passa l'altezza al figlio.  */
main.piena { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 26px; }
main.piena > *:last-child { min-height: 0; }

/* L'avviso di ricevitore fermo. Rosso pieno e in cima al contenuto: e' l'unica
   cosa nell'applicazione che segnala una perdita di dati IRREVERSIBILE, e deve
   interrompere quello che stai facendo invece di aspettare che tu la noti. */
.allarme-riga { background: var(--rosso); color: #fff; border-radius: 10px;
                padding: 12px 16px; margin-bottom: 18px; font-size: 13.5px; line-height: 1.5; }
.allarme-riga a { color: #fff; text-decoration: underline; margin-left: 6px; white-space: nowrap; }

/* La «i» che spiega un numero. `<details>` nativo: nessun JavaScript, si chiude
   da solo, funziona da tastiera. Il pannello e' in posizione assoluta cosi' non
   sposta niente quando si apre - un riquadro che allarga la pagina fa perdere il
   punto in cui si stava guardando. */
.info { display: inline-block; position: relative; vertical-align: middle; margin-left: 5px; }
.info > summary { list-style: none; cursor: pointer; width: 16px; height: 16px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--soft); font-size: 10.5px; font-weight: 800; font-style: italic;
  display: flex; align-items: center; justify-content: center; user-select: none; }
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover { border-color: var(--rosa); color: var(--rosa); }
.info[open] > summary { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.info-box { position: absolute; z-index: 40; top: 22px; left: -8px; width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surf); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 40px rgba(20,30,35,.18); padding: 12px 14px;
  font-size: 12.5px; font-weight: 400; line-height: 1.55; color: var(--muted);
  text-transform: none; letter-spacing: 0; }
.info-box strong { display: block; color: var(--ink); margin-bottom: 4px; font-size: 13px; }
.info-box p { margin: 0; }
/* vicino al bordo destro si apre verso sinistra, o uscirebbe dallo schermo */
.info.dx .info-box { left: auto; right: -8px; }

/* Dentro un contenitore che scorre - il corpo di un modale, per esempio - un
   pannello in posizione assoluta viene TAGLIATO dal bordo: si vede la prima
   riga e il resto sparisce. Li' la spiegazione entra nel flusso e spinge in giu'
   il contenuto: occupa spazio, ma si legge tutta. */
.modale .info { display: block; margin: 6px 0 0; }
.modale .info-box { position: static; width: auto; box-shadow: none;
                    background: var(--bg); margin-top: 6px; }
.modale .info > summary { display: inline-flex; }

/* Il divisore fra elenco e conversazione. La larghezza giusta dipende da cosa
   si sta guardando - nomi lunghi, anteprime, schermi diversi - quindi la decide
   chi legge, e resta com'e' l'ha lasciata. */
.tira { width: 6px; margin: 0 -7px 0 -1px; cursor: col-resize; position: relative; z-index: 5;
        border-radius: 3px; }
.tira:hover, .tira.attiva { background: var(--rosa); opacity: .5; }
body.tirando { cursor: col-resize; user-select: none; }

/* ===========================================================================
   Campi di un form dentro una card. Aggiunti il 26/08/2026 con le pagine di
   Gestione, che sono le prime del tool a chiedere qualcosa a chi guarda: prima
   c'erano solo la casella di ricerca e i filtri, che hanno i loro stili.

   PERCHE' UNA CLASSE ESPLICITA e non `.card-b input`: dentro le card ci sono
   gia' i filtri di Analisi e Conversazioni, con stili loro. Una regola generica
   li avrebbe rivestiti tutti, e un ritocco al pannello utenti si sarebbe visto
   in tre pagine che nessuno stava guardando.
   ========================================================================== */
.campo{font-family:inherit;font-size:13px;color:var(--ink);background:#fff;
       border:1px solid var(--line);border-radius:var(--r-s);padding:8px 10px;
       transition:.12s}
.campo:focus{outline:none;border-color:var(--rosa);box-shadow:0 0 0 3px var(--rosa-bg)}
.campo:disabled{background:var(--bg);color:var(--soft)}
.campo::placeholder{color:var(--soft)}
select.campo{cursor:pointer;padding-right:8px}
input.campo[type=checkbox]{width:17px;height:17px;padding:0;accent-color:var(--rosa);cursor:pointer}

/* Una riga di campi che va a capo da sola sugli schermi stretti. */
.riga-campi{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* Il contenitore di una tabella larga.
   SERVE, non e' cosmetica: senza, una tabella con dei campi dentro spinge la
   pagina piu' larga della finestra, e a scorrere non va la tabella ma TUTTO -
   la barra in alto esce dallo schermo e il menu si taglia. Visto il 26/08/2026
   sulla pagina Campagne. */
.scorre{overflow-x:auto;-webkit-overflow-scrolling:touch}
.scorre>table{min-width:max-content}

/* Lo spazio sopra il pulsante che chiude un form. */
.azioni-form{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ===========================================================================
   L'utente in basso nella sidebar, la testata in alto per la sezione.
   Rifatto il 26/08/2026. Prima il nome stava in alto a destra e non serviva a
   niente: era un'etichetta, non un comando - non ci si poteva cliccare, e
   occupava la parte piu' pregiata della pagina.

   Adesso: l'identita' sta in fondo al menu (dov'e' in tutti gli strumenti che
   la gente usa ogni giorno, quindi la si cerca la'), ed e' un pulsante che porta
   al proprio profilo. La testata in alto la usa la SEZIONE, per dire dove sei e
   cosa ci si fa.
   ========================================================================== */
.side .io{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
          margin-top:8px;color:#C3AFBC}
.side .io:hover{background:rgba(255,255,255,.07)}
.side .io.on{background:rgba(255,255,255,.10)}
.side .io .avatar{width:32px;height:32px;flex:0 0 32px;font-size:12px}
.side .io .io-t{min-width:0;line-height:1.25}
.side .io .io-t b{display:block;font-size:13px;color:#fff;font-weight:600;
                  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .io .io-t span{font-size:11px;color:#8D7484}
.side .io .chev{margin-left:auto;flex:0 0 16px;opacity:.5}
.side .esci{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:9px;
            font-size:12px;color:#8D7484}
.side .esci:hover{background:rgba(255,255,255,.07);color:#C3AFBC}
.side .esci svg{width:15px;height:15px;flex:0 0 15px}

/* La testata: titolo e descrizione a sinistra, i comandi generali a destra.
   Altezza automatica, perche' una descrizione su due righe non deve tagliarsi. */
#app{grid-template-rows:auto 1fr}
.topbar{align-items:center;padding:11px 22px;min-height:62px}
.topbar .tit{min-width:0;flex:1}
.topbar .tit h1{font-size:17px;font-weight:800;letter-spacing:-.2px;line-height:1.25}
.topbar .tit p{font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px;
               max-width:78ch}

/* La barra dei filtri di una pagina non sta piu' nella testata: e' contenuto,
   non identita' della sezione. Stava la' quando la testata non aveva un titolo,
   e con due cose dentro si sovrapponevano - visto sulla pagina Registro. */
main > .fbar:first-child{margin-bottom:18px}

/* Tabelle di modifica: le colonne stanno larghe quanto serve, non spalmate.
   Con `width:100%` e cinque colonne il browser distribuisce lo spazio in parti
   uguali, e vengono fuori i vuoti di trenta centimetri fra un campo e l'altro. */
table.tb.compatta{width:auto}
table.tb.compatta th,table.tb.compatta td{padding:8px 12px}
table.tb.compatta td:first-child,table.tb.compatta th:first-child{padding-left:0}

/* Un blocco di campi con l'etichetta sopra, per i form corti. */
.campi{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.campi label{display:flex;flex-direction:column;gap:5px;font-size:11px;
             text-transform:uppercase;letter-spacing:.5px;color:var(--soft);font-weight:700}
.campi label .campo{text-transform:none;letter-spacing:0}

/* Un gruppo di filtri con la sua etichetta, uno per riga, che va a capo da solo. */
.filtro{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.filtro:last-child{border-bottom:none}
.filtro > b{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--soft);
            flex:0 0 5.5rem;padding-top:2px}
.filtro .voci{display:flex;flex-wrap:wrap;gap:5px}
.filtro .voci a{font-size:12.5px;font-weight:600;color:var(--muted);padding:4px 10px;
                border-radius:20px;border:1px solid transparent}
.filtro .voci a:hover{background:var(--bg);color:var(--ink)}
.filtro .voci a.on{background:var(--rosa);color:#fff}

/* Il testo di servizio sotto un blocco: una spiegazione, non un contenuto. */
.micro{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:12px}
.micro b{color:var(--ink)}

/* I comandi della sezione, in testata a destra. La ricerca non cresce fino a
   riempire: accanto a quattro pulsanti diventerebbe una striscia lunghissima e
   il periodo finirebbe fuori dallo schermo. */
.top-right .search.cerca-testa{flex:0 0 auto;width:clamp(180px,26vw,320px);max-width:none}
.top-right .periodo{display:flex;gap:5px;flex-wrap:nowrap}
@media (max-width:1100px){
  .top-right .search.cerca-testa{width:180px}
  .top-right .periodo .btn{padding:5px 8px}
}

/* ===========================================================================
   MOBILE — rifatto il 26/08/2026, dopo aver provato su telefono.
   ========================================================================== */

/* IL MENU NON SI APRIVA, e non era un dettaglio di stile: il pulsante mette la
   classe `open` sul BODY (`document.body.classList.toggle('open')`), mentre la
   regola qui sopra la cercava su `.side`. Non ha mai potuto funzionare, e da
   fuori sembrava un pulsante morto. Le due righe che seguono guardano dove la
   classe finisce davvero; quella vecchia resta perche' non fa danno. */
@media(max-width:900px){
  body.open .side{transform:none}
  body.open .side-bd{display:block}
  body.open{overflow:hidden}          /* niente scorrimento sotto al menu aperto */

  /* LA TESTATA PRENDEVA META' SCHERMO. Su un telefono la descrizione della
     sezione va su tre righe, e sotto ci stanno ricerca e periodo: centottanta
     pixel prima di vedere un dato. Qui la testata torna a due file:
       1. menu, titolo, la «i»
       2. i comandi della sezione, che scorrono in orizzontale se non stanno
     La descrizione sparisce: e' una spiegazione, e la spiegazione lunga sta
     dietro la «i», che su mobile e' l'unico posto sensato. */
  .topbar{flex-wrap:wrap;padding:8px 14px;gap:10px;min-height:0;row-gap:8px}
  .topbar .tit h1{font-size:16px}
  .topbar .tit p{display:none}
  .top-right{width:100%;margin-left:0;overflow-x:auto;padding-bottom:2px;
             gap:8px;justify-content:flex-start}
  .top-right:empty{display:none}
  .topbar .icon-btn{margin-left:auto}

  /* La ricerca su mobile c'era ma era nascosta: su Analisi e' il comando
     principale della pagina, quindi si vede - larga quanto la riga. */
  .search{display:block}
  .top-right .search.cerca-testa{width:100%;min-width:180px}
  .top-right .periodo{flex:0 0 auto}

  /* La nota della «i» a tutta larghezza: incollata a destra su 375px diventa
     una colonna di parole spezzate. */
  #nota-box{left:10px;right:10px;max-width:none}

  /* Le tabelle di modifica non si comprimono: scorrono nel loro contenitore. */
  .campi{gap:10px}
  .campi label{flex:1 1 100%}
  .campi label .campo{width:100%!important}
  .filtro{flex-direction:column;gap:6px}
  .filtro > b{flex:0 0 auto}
}

/* Sotto i 560px anche il menu si restringe: 236px su uno schermo da 360 lascia
   una fessura, e si chiude per sbaglio invece di scegliere una voce. */
@media(max-width:560px){
  .side{width:min(86vw,290px)}
  main{padding:14px 12px 44px}
  .kpi .num{font-size:22px}
}

/* L'ordine in testata su mobile: menu, titolo, «i» sulla prima riga; i comandi
   della sezione su una riga tutta loro. Senza gli `order` la «i» finirebbe in
   fondo, dopo i comandi, dove non la cerca nessuno. */
@media(max-width:900px){
  .topbar .burger{order:0}
  .topbar .tit{order:1;flex:1}
  .topbar .icon-btn{order:2;margin-left:0}
  .topbar .top-right{order:3}
}