/* Kit delle schermate finte: un unico linguaggio da gestionale sanitario, pulito e coerente per tutte le app.
   Le misure sono in pixel reali (scrivania 1240x800, telefono 390x844): il contenitore viene scalato da showcase.css. */
.scr{font-family:var(--f);color:#10333b;-webkit-font-smoothing:antialiased}
.scr *{box-sizing:border-box}
.scr .mono{font-family:var(--fm)}
/* ---------------- app da scrivania ---------------- */
.app{display:flex;height:756px;background:#f4f7f8}
.side{width:212px;flex:none;background:#fff;border-right:1px solid #e1eaec;display:flex;flex-direction:column;padding:18px 12px;gap:4px}
.side .lg{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;font-weight:700;font-size:15px;color:#0a252c}
.side .lg i{width:28px;height:28px;border-radius:8px;background:#0e96a0;display:grid;place-items:center}
.side .lg i svg{width:18px;height:18px}
.side .lg small{display:block;font-size:11px;color:#7d97a0;font-weight:500}
.side a{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;font-size:14px;color:#52707a;text-decoration:none;font-weight:500}
.side a b{margin-left:auto;font-size:11.5px;min-width:22px;height:20px;border-radius:999px;background:#e3f6f7;color:#0a747c;display:grid;place-items:center;padding:0 6px}
.side a.on{background:#e3f6f7;color:#0a747c;font-weight:600}
.side a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}
.side .who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid #e1eaec;font-size:13px}
.av{width:30px;height:30px;border-radius:50%;background:#c9eef0;color:#0a747c;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.av.b{background:#ece8fb;color:#6d55d8}.av.c{background:#fdf1dc;color:#a8690c}.av.d{background:#e3f5ed;color:#1f9d6b}.av.e{background:#fbe5e8;color:#c9384d}
.main{flex:1;min-width:0;display:flex;flex-direction:column;padding:20px 24px;gap:16px;overflow:hidden;zoom:1.12}
.main.nz{zoom:1}
.hd{display:flex;align-items:center;gap:14px}
.hd h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.hd .sub{font-size:13px;color:#7d97a0}
.hd .sp{flex:1}
.btn{height:34px;padding:0 14px;border-radius:9px;background:#fff;border:1px solid #d3e2e2;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:#10333b}
.btn.p{background:#0e96a0;border-color:#0e96a0;color:#fff}
.btn.wa{background:#e8faf0;border-color:#b6ecd0;color:#128c4a}
.seg{display:flex;background:#e9eff1;border-radius:10px;padding:3px;gap:2px}
.seg span{height:28px;padding:0 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:#52707a;display:flex;align-items:center;gap:6px}
.seg span.on{background:#fff;color:#10333b;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg span b{font-size:11px;color:#0a747c}
.card{background:#fff;border:1px solid #e1eaec;border-radius:14px;box-shadow:0 1px 2px rgba(13,42,49,.04)}
.card .ch{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #eef3f4;font-weight:600;font-size:14px}
.card .ch small{font-weight:500;color:#7d97a0;font-size:12.5px}
.card .ch .sp{flex:1}
.kpis4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kp{background:#fff;border:1px solid #e1eaec;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.kp span{font-size:12.5px;color:#7d97a0;font-weight:500}
.kp b{font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kp em{font-style:normal;font-size:12px;font-weight:600}
.up{color:#1f9d6b}.dn{color:#c9384d}.mut{color:#7d97a0}
.tb{width:100%;border-collapse:collapse;font-size:13px}
.tb th{text-align:left;font-weight:600;color:#7d97a0;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border-bottom:1px solid #eef3f4;background:#fafcfc}
.tb td{padding:10px 14px;border-bottom:1px solid #f0f4f5;vertical-align:middle}
.tb tr.nw td{animation:rowin .6s var(--enter)}
@keyframes rowin{from{background:#e3f6f7;transform:translateY(-6px);opacity:0}to{background:transparent}}
.tb .n{text-align:right;font-variant-numeric:tabular-nums}
.pl{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.pl.t{background:#e3f6f7;color:#0a747c}.pl.g{background:#e3f5ed;color:#1f9d6b}.pl.y{background:#fdf1dc;color:#a8690c}.pl.r{background:#fbe5e8;color:#c9384d}.pl.v{background:#ece8fb;color:#6d55d8}.pl.s{background:#eef3f4;color:#52707a}
.pl.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ai-b{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:#0a747c;background:#e3f6f7;border-radius:6px;padding:2px 6px}
.ai-b::before{content:"✦";font-size:10px}
.bar{height:8px;border-radius:999px;background:#eef3f4;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:#0e96a0;transition:width 1s var(--ease)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(14,150,160,.5)}100%{box-shadow:0 0 0 14px rgba(14,150,160,0)}}
.typing{display:inline-flex;gap:4px;align-items:center}
.typing i{width:7px;height:7px;border-radius:50%;background:#7d97a0;animation:tp 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.fadein{animation:fi .45s var(--enter)}
@keyframes fi{from{opacity:0;transform:translateY(8px)}}
.cursor{position:absolute;z-index:9;width:22px;height:22px;pointer-events:none;transition:left .7s var(--ease),top .7s var(--ease);filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.cursor.clk::after{content:"";position:absolute;left:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:2px solid #0e96a0;animation:clk .5s ease-out}
@keyframes clk{from{transform:scale(.3);opacity:1}to{transform:scale(1.6);opacity:0}}

/* ---------------- telefono: barra di stato ---------------- */
.sb{height:54px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 32px 8px 40px;font-weight:600;font-size:15px}
.sb svg{width:66px;height:13px}
/* WhatsApp */
.wa{height:100%;display:flex;flex-direction:column;background:#efeae2}
.wa .sb{background:#f6f6f6}
.wa-h{background:#f6f6f6;display:flex;align-items:center;gap:10px;padding:6px 14px 10px;border-bottom:1px solid #e2e2e2}
.wa-h .bk{color:#0a7cff;font-size:28px;line-height:1;width:16px}
.wa-h .av{width:38px;height:38px;background:#0e96a0;color:#fff}
.wa-h b{font-size:16px;display:block}
.wa-h small{font-size:12px;color:#667781}
.wa-b{flex:1;overflow:hidden;padding:12px 10px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end;background:#efeae2 radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px) 0 0/16px 16px}
.bub{max-width:80%;padding:7px 10px 18px;border-radius:10px;font-size:15px;line-height:1.35;position:relative;box-shadow:0 1px .5px rgba(0,0,0,.13);animation:fi .35s var(--enter)}
.bub.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.bub.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:2px}
.bub time{position:absolute;right:8px;bottom:3px;font-size:11px;color:#667781}
.bub.out time::after{content:" ✓✓";color:#53bdeb}
.bub.sys{align-self:center;background:#fff8c5;color:#54656f;font-size:12.5px;padding:5px 10px;border-radius:8px;box-shadow:none}
.bub .vn{display:flex;align-items:center;gap:8px;min-width:200px}
.bub .vn i{width:30px;height:30px;border-radius:50%;background:#0e96a0;flex:none}
.bub .vn span{flex:1;height:22px;background:repeating-linear-gradient(90deg,#9ab 0 2px,transparent 2px 5px);opacity:.6;border-radius:3px}
.bub .tr{display:block;margin-top:6px;font-size:13px;color:#52707a;font-style:italic;border-top:1px dashed #cfd8dc;padding-top:5px}
.bub .img{width:220px;height:150px;border-radius:7px;background:linear-gradient(135deg,#e9d8c8,#d9b9a0);margin-bottom:4px;display:grid;place-items:center;color:#7a5a45;font-size:12px}
.bub .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bub .chips span{font-size:13px;border:1px solid #b7e1d6;color:#0a747c;background:#f3fbf9;border-radius:999px;padding:3px 9px}
.wa-f{height:66px;background:#f6f6f6;display:flex;align-items:center;gap:10px;padding:0 12px 10px}
.wa-f div{flex:1;height:38px;border-radius:999px;background:#fff;border:1px solid #e2e2e2}
.wa-f i{width:38px;height:38px;border-radius:50%;background:#0e96a0}
.tool{align-self:center;font-size:12px;color:#0a747c;background:#e3f6f7;border:1px solid #c9eef0;border-radius:999px;padding:4px 10px;display:flex;gap:6px;align-items:center;animation:fi .35s var(--enter)}
.tool::before{content:"✦"}
/* Messenger */
.ms{height:100%;display:flex;flex-direction:column;background:#fff}
.ms .wa-h{background:#fff}
.ms .wa-b{background:#fff}
.ms .bub{box-shadow:none;border-radius:18px;padding:8px 12px}
.ms .bub.in{background:#f0f2f5}
.ms .bub.out{background:#0a7cff;color:#fff}
.ms .bub time{display:none}
.ms .bub{padding-bottom:8px}
/* Facebook */
.fbp{height:100%;background:#f0f2f5;display:flex;flex-direction:column}
.fbp .sb{background:#fff}
.fb-top{background:#fff;padding:4px 14px 10px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:24px;color:#0866ff}
.post{background:#fff;margin-top:8px;padding:12px 14px}
.post .ph{display:flex;gap:10px;align-items:center}
.post .ph .av{width:40px;height:40px;background:#0e96a0;color:#fff}
.post .ph b{font-size:15px;display:block}.post .ph small{font-size:12px;color:#65676b}
.post p{margin:10px 0;font-size:14.5px;line-height:1.4}
.post .media{height:210px;border-radius:8px;background:linear-gradient(160deg,#cfe9eb,#9fd3d7 60%,#7fbfc4);position:relative;overflow:hidden}
.post .media::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;color:#0e96a0;font-size:22px;padding-left:4px}
.cmts{background:#fff;flex:1;padding:6px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.cm{display:flex;gap:8px;align-items:flex-start;animation:fi .35s var(--enter);transition:opacity .4s,filter .4s}
.cm .av{width:32px;height:32px;font-size:11px}
.cm .bx{background:#f0f2f5;border-radius:16px;padding:7px 11px;font-size:14px;line-height:1.35;max-width:290px}
.cm .bx b{display:block;font-size:13px}
.cm.rep{margin-left:40px}
.cm.rep .bx{background:#e3f6f7}
.cm.hid{opacity:.35;filter:blur(1.5px)}
.cm .mk{font-size:11.5px;font-weight:700;margin-top:3px;display:inline-flex;gap:4px;align-items:center}
/* chiamata */
.call{height:100%;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,#e9f4f5,#fff 55%);padding:0 22px}
.call .sb{width:100%}
.call .who2{margin-top:18px;text-align:center}
.call .who2 .av{width:84px;height:84px;margin:0 auto 10px;font-size:26px;background:#0e96a0;color:#fff}
.call .who2 b{font-size:24px;display:block}
.call .who2 small{font-size:14px;color:#52707a}
.wave{display:flex;gap:4px;align-items:center;height:48px;margin:16px 0}
.wave i{width:5px;border-radius:3px;background:#0e96a0;height:8px;transition:height .15s}
.trs{width:100%;flex:1;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;overflow:hidden;padding-bottom:16px}
.trs div{font-size:14px;line-height:1.4;padding:9px 12px;border-radius:14px;max-width:88%;animation:fi .35s var(--enter)}
.trs .p{align-self:flex-start;background:#fff;border:1px solid #e1eaec}
.trs .n{align-self:flex-end;background:#0e96a0;color:#fff}
.trs .x{align-self:center;font-size:12px;color:#0a747c;background:#e3f6f7;border-radius:999px;padding:4px 10px}
.call .ctl{display:flex;gap:26px;padding-bottom:34px}
.call .ctl i{width:64px;height:64px;border-radius:50%;background:#e9eff1;display:block}
.call .ctl i.end{background:#e5484d}
/* gruppo WhatsApp report */
.rp{background:#fff;border-radius:10px;padding:10px 12px 20px;font-size:14px;line-height:1.45;align-self:flex-start;max-width:92%;box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative;animation:fi .4s var(--enter)}
.rp .fr{color:#0e96a0;font-weight:700;font-size:13px}
.rp b{font-weight:700}
.rp time{position:absolute;right:8px;bottom:3px;font-size:11px;color:#667781}