@import url(/fonts/fonts.css);
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;color:#0B0C10;font-size:14px;background:#F4F5F7}
:root{--g:#DC2626;--g2:#b91c1c;--gd:#14171D;--gl:#fdecec;--bd:#e4e6ea;--mut:#6B7380;--ink:#0B0C10;--red2:#FF4632}
.shell{display:flex;height:100vh}
.rail{width:76px;background:linear-gradient(180deg,#14171D,#08090C);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:8px}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#19c37d,#0a8f5b);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:18px;margin-bottom:14px;box-shadow:0 4px 12px #0005}
.ri{width:56px;padding:8px 0;border-radius:12px;color:#9AA2AF;text-align:center;font-size:10.5px;display:flex;flex-direction:column;gap:3px;align-items:center}
.ri .ic{font-size:19px}.ri.on{background:#DC2626;color:#fff;box-shadow:0 8px 22px rgba(220,38,38,.45)}
.rail .sp{flex:1}.meav{width:38px;height:38px;border-radius:50%;background:#DC2626;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.top{height:60px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 22px;gap:14px}
.top h1{font-size:17px;margin:0;font-weight:700}.top .sub{color:var(--mut);font-size:13px}.top .sp{flex:1}
.user{display:flex;align-items:center;gap:10px;font-size:13px}.user .av{width:34px;height:34px}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex:none}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;border-radius:6px;padding:2px 7px;color:#fff;white-space:nowrap}
.b-srls{background:#DC2626}.b-bonea{background:#d97706}.b-bologna{background:#2563eb}.b-asti{background:#7c3aed}.b-milano{background:#0d9488}
.pill{font-size:11.5px;font-weight:600;border-radius:20px;padding:3px 10px;display:inline-flex;align-items:center;gap:5px}
.pill.ok{background:#dcfce7;color:#166534}.pill.wait{background:#fef3c7;color:#92400e}.pill.ko{background:#fee2e2;color:#991b1b}.pill.gr{background:#eef2f0;color:#4b5a54}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.btn{border:0;border-radius:9px;padding:9px 14px;font-weight:600;font-size:13px;background:var(--g);color:#fff;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.btn.sec{background:#fff;color:#0f1f1a;border:1px solid var(--bd)}.btn.sm{padding:6px 10px;font-size:12px}
.card{background:#fff;border:1px solid var(--bd);border-radius:14px}
.mut{color:var(--mut)}
/* chat list */
.list{width:390px;background:#fff;border-right:1px solid var(--bd);display:flex;flex-direction:column}
.lh{padding:14px 16px 10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--bd)}
.srch{background:#f2f5f4;border-radius:10px;padding:9px 12px;color:#8a9893;font-size:13px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{border:1px solid var(--bd);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;color:#33433d;display:inline-flex;gap:6px;align-items:center;background:#fff}
.chip.on{background:var(--gd);color:#fff;border-color:var(--gd)}.chip i{width:8px;height:8px;border-radius:50%;display:inline-block}
.tabs{display:flex;gap:16px;font-size:13px;font-weight:600;color:var(--mut)}.tabs .on{color:var(--g);border-bottom:2px solid var(--g);padding-bottom:6px}
.cl{list-style:none;margin:0;padding:0;overflow:hidden;flex:1}
.cl li{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f4f3;align-items:center}
.cl li.sel{background:var(--gl)}
.cl .av{width:44px;height:44px;font-size:15px}
.ci{flex:1;min-width:0}.r{display:flex;justify-content:space-between;align-items:center;gap:6px}
.cn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ct{font-size:11.5px;color:var(--mut)}.ct.u{color:var(--g);font-weight:700}
.pv{font-size:12.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;gap:6px;align-items:center;margin-top:3px}
.unr{background:#DC2626;color:#fff;border-radius:10px;font-size:11px;font-weight:700;min-width:20px;padding:1px 6px;text-align:center}
.asg{font-size:11px;color:#4b5a54;background:#eef2f0;border-radius:5px;padding:1px 6px;white-space:nowrap}
/* chat */
.chat{flex:1;display:flex;flex-direction:column;min-width:0;background:#efeae2}
.chh{height:64px;background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:12px;padding:0 18px}
.chh .av{width:40px;height:40px}
.msgs{flex:1;padding:18px 7%;display:flex;flex-direction:column;gap:6px;overflow:hidden;background:#efeae2 radial-gradient(#e3dccf 1px,transparent 1px) 0 0/18px 18px}
.m{max-width:70%;background:#fff;border-radius:10px;padding:7px 10px 5px;box-shadow:0 1px .5px #0002;align-self:flex-start;font-size:13.5px;line-height:1.4}
.m.me{align-self:flex-end;background:#d9fdd3}.m .t{font-size:10.5px;color:#667781;text-align:right;margin-top:2px}.m .op{font-size:10.5px;font-weight:700;color:var(--g2);margin-bottom:2px}
.tk{color:#34b7f1;font-weight:700;letter-spacing:-3px;margin-left:3px}
.day{align-self:center;background:#fff;border-radius:7px;padding:3px 10px;font-size:11.5px;color:#54656f;margin:6px 0;box-shadow:0 1px .5px #0002}
.note{align-self:center;background:#fff8e1;border:1px dashed #e7c66b;color:#7a5600;border-radius:8px;padding:5px 12px;font-size:12px}
.comp{background:#f0f2f5;padding:10px 14px;display:flex;gap:10px;align-items:center}
.comp .in{flex:1;background:#fff;border-radius:10px;padding:11px 14px;color:#8a9893}
.comp .from{font-size:12px;display:flex;gap:6px;align-items:center;color:var(--mut)}
.side{width:360px;background:#f7f9f8;border-left:1px solid var(--bd);padding:14px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.sec{padding:13px 14px}.sec h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#4b5a54;display:flex;justify-content:space-between;align-items:center}
.sec p{margin:0;font-size:13px;line-height:1.5}
.ops{display:flex;flex-direction:column;gap:8px}.op1{display:flex;gap:9px;align-items:center;font-size:13px}.op1 .av{width:28px;height:28px;font-size:11px}
.kv{display:grid;grid-template-columns:96px 1fr;gap:5px 8px;font-size:12.5px}.kv b{font-weight:600}
.ord{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 0;border-top:1px solid #eef2f0}
/* admin */
.page{flex:1;display:flex;flex-direction:column;min-width:0}
.content{padding:22px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#5b6b65;padding:11px 12px;background:#f7f9f8;border-bottom:1px solid var(--bd);font-weight:700}
td{padding:11px 12px;border-bottom:1px solid #eef2f0;vertical-align:middle}
th.c,td.c{text-align:center}
.perm{display:inline-flex;gap:4px}.pp{font-size:11px;font-weight:700;border-radius:5px;padding:2px 6px}
.pp.r{background:#dbeafe;color:#1e40af}.pp.w{background:#dcfce7;color:#166534}.pp.n{background:#f1f5f4;color:#a3b1ab}
.uc{display:flex;gap:10px;align-items:center}.uc .av{width:34px;height:34px;font-size:12px}
.role{font-size:11.5px;font-weight:700;border-radius:6px;padding:3px 8px}.role.a{background:#08392a;color:#fff}.role.s{background:#e0e7ff;color:#3730a3}.role.v{background:#f3e8ff;color:#6b21a8}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ses{padding:18px;display:flex;flex-direction:column;gap:12px}
.ses .hd{display:flex;justify-content:space-between;align-items:center}
.ses .num{font-size:18px;font-weight:700;letter-spacing:.02em}
.stats{display:flex;gap:18px;font-size:12px;color:var(--mut)}.stats b{display:block;color:#0f1f1a;font-size:16px}
.code{font-family:ui-monospace,Consolas,monospace;font-size:28px;font-weight:800;letter-spacing:5px;background:var(--gl);color:var(--gd);border-radius:10px;padding:10px;text-align:center;border:1px dashed #8fd3b3}
.qr{width:120px;height:120px;border-radius:8px;background:
 conic-gradient(from 90deg at 20% 20%,#000 25%,#fff 0) 0 0/20px 20px;opacity:.85;border:6px solid #fff;outline:1px solid var(--bd)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{padding:14px 16px}.kpi b{font-size:24px;display:block}.kpi span{font-size:12px;color:var(--mut)}
.toggle{width:34px;height:19px;border-radius:10px;background:#cfd8d4;position:relative;display:inline-block;vertical-align:middle}.toggle.on{background:var(--g)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s}.toggle.on::after{left:17px}

/* brand Gommaffare (da gommaffare.com: Inter / Inter Tight / Barlow Condensed, #DC2626, #08090C) */
h1,h2,h3,.cn,.top h1,.ses .num{font-family:"Inter Tight","Inter",sans-serif}
.kpi b,.stats b,.code,.num{font-family:"Barlow Condensed","Inter Tight",sans-serif;letter-spacing:.02em}
.kpi b{font-size:30px}.ses .num{font-family:"Barlow Condensed",sans-serif;font-size:24px}
.plate{background:#fff;border-radius:12px;padding:5px 12px;display:inline-flex;align-items:center}
.plate img{height:30px;width:auto;display:block}
.top .brand{display:flex;align-items:center;gap:12px;padding-right:18px;margin-right:4px;border-right:1px solid var(--bd)}
.top .brand img{height:28px;width:auto}
.top .brand span{font-family:"Inter Tight",sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#DC2626}
.code{background:#fdecec;color:#0B0C10;border-color:#f3a3a3}
.chip.on{background:#0B0C10;border-color:#0B0C10}
.cl li.sel{background:#fdecec;box-shadow:inset 3px 0 0 #DC2626}
.tabs .on{color:#DC2626;border-color:#DC2626}
.role.a{background:#0B0C10}
.toggle.on{background:#DC2626}
.m .op{color:#b91c1c}
.pill{white-space:nowrap}.ord b{white-space:nowrap;margin-left:8px}
.sec h3{gap:8px}

/* ===== app reale ===== */
.hidden{display:none!important}
.ri{cursor:pointer;text-decoration:none}.ri:hover{color:#fff}
.page{min-height:0}.content{overflow:auto;flex:1}
.chips .chip{cursor:pointer}.tabs span{cursor:pointer}
.cl{overflow-y:auto}.cl li{cursor:pointer}.cl li:hover{background:#faf6f6}
.srch{display:flex;align-items:center;gap:6px}.srch input{border:0;background:transparent;outline:0;font:inherit;color:#0B0C10;flex:1}
.newchat{display:flex;gap:6px}.newchat select,.newchat input{border:1px solid var(--bd);border-radius:9px;padding:7px 9px;font:inherit;font-size:12.5px;background:#fff}.newchat input{flex:1;min-width:0}
.msgs{overflow-y:auto}.m{white-space:pre-wrap;overflow-wrap:anywhere}
.m img.thumb,.m video{max-width:100%;max-height:300px;border-radius:7px;display:block;margin-bottom:4px}
.m audio{max-width:260px;display:block}.m .ph{font-style:italic;color:#54656f}.m .cap{display:block;margin-top:2px}
.m .who{font-size:11px;font-weight:700;color:#027eb5;margin-bottom:2px}
.m.pending{opacity:.7}.m.failed{background:#fde2e2}
.mbtn{background:#fff;border:1px solid var(--bd);border-radius:6px;font-size:12px;padding:2px 8px;cursor:pointer;margin-left:6px}
.load-more{align-self:center;background:#fff;color:#b91c1c;border:0;border-radius:7px;padding:6px 12px;margin:6px 0;font-size:12.5px;cursor:pointer;box-shadow:0 1px .5px #0002}
.tk.grey{color:#8696a0}.tk.err{color:#e53935;letter-spacing:0}
.comp textarea{flex:1;border:0;border-radius:10px;padding:11px 14px;font:inherit;resize:none;max-height:140px;outline:0}
.comp .attach{background:none;border:0;font-size:20px;cursor:pointer;padding:4px}
.comp.ro{justify-content:center;color:var(--mut);font-size:13px}
.preview-bar{display:flex;gap:10px;padding:8px 14px;background:#f0f2f5;border-top:1px solid var(--bd);flex-wrap:wrap}
.preview-item{position:relative;width:70px}.preview-item img,.preview-item .fileicon{width:70px;height:70px;object-fit:cover;border-radius:7px;background:#e9edef;display:flex;align-items:center;justify-content:center;font-size:10px;text-align:center;padding:3px;overflow:hidden}
.preview-item .fn{font-size:10.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-item .rm{position:absolute;top:-6px;right:-6px;background:#0B0C10;color:#fff;border:0;border-radius:50%;width:18px;height:18px;cursor:pointer;font-size:12px;line-height:18px;padding:0}
.send-info{font-size:11.5px;color:var(--mut);padding:0 14px 6px;background:#f0f2f5;min-height:4px}
.side{overflow-y:auto}
.empty{margin:auto;color:var(--mut);text-align:center;padding:20px}
.modal{position:fixed;inset:0;background:#0B0C1080;display:flex;align-items:flex-start;justify-content:center;z-index:20;overflow:auto;padding:50px 10px}
.modal .box{background:#fff;border-radius:16px;width:min(620px,96vw);padding:20px 22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 50px #0006}
.modal h2{margin:0;font-size:19px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600}
.fld input,.fld select,.fld textarea{border:1px solid #d5ddd9;border-radius:10px;padding:10px 12px;font:inherit;font-weight:400;font-size:14px}
.row2{display:flex;gap:10px}.row2>*{flex:1}
.actions{display:flex;gap:8px;justify-content:flex-end}
.permgrid{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:center;font-size:13px}
.err{color:#b91c1c;font-size:13px;min-height:16px}
.okmsg{color:#166534;font-size:13px}
.btn.danger{background:#fff;color:#b91c1c;border:1px solid #f3a3a3}
.btn:disabled{opacity:.5;cursor:default}
.logtabs{display:flex;gap:6px}.logtabs span{cursor:pointer}
.qrimg{width:220px;height:220px;image-rendering:pixelated;border:1px solid var(--bd);border-radius:8px;align-self:center}
.toggle{cursor:pointer}
table td .mut{font-size:11.5px}
.searchcard{max-width:760px}
.sumtxt{white-space:pre-wrap}

/* ---- mobile (15/11/2026) ---- */
.mback{display:none}
@media (max-width:820px){
 .shell{flex-direction:column;height:100vh;height:100dvh}
 .rail{order:2;width:100%;height:60px;flex:none;flex-direction:row;justify-content:space-around;align-items:center;padding:4px 4px calc(4px + env(safe-area-inset-bottom));gap:0}
 .rail>div[style],.rail .sp,.rail .meav{display:none}
 .ri{width:auto;flex:1;padding:4px 0;font-size:10px}.ri .ic{font-size:18px}
 .page{order:1;flex:1;min-height:0}
 .top{height:auto;min-height:52px;padding:8px 12px;gap:8px}
 .top .brand span,.top .sub,#topRight,.user>div{display:none}
 .top .brand img{height:24px}.top h1{font-size:16px}
 .list{width:100%;border-right:0}
 .cl{overflow-y:auto}
 .chat{display:none}.side{display:none!important}
 body.inchat .list{display:none}body.inchat .chat{display:flex}body.inchat .rail{display:none}
 .chh{height:auto;min-height:56px;padding:6px 10px;gap:8px;flex-wrap:wrap}
 .mback{display:inline-flex;font-size:18px;padding:4px 10px}
 .msgs{padding:10px 8px;overflow-y:auto}.m{max-width:88%}
 .comp{padding:8px;gap:6px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
 .content{padding:12px;overflow:auto}.grid,.kpis{grid-template-columns:1fr}
 table{display:block;overflow-x:auto;white-space:nowrap}
 .modal .box{width:94vw!important;max-width:94vw!important}
 input,textarea,select{font-size:16px}
}