:root{--nav:#51648c;--navy:#2f4372;--bg:#fbfcff;--line:#dfe3ec;--muted:#7a849c;--text:#1d2433;--blue:#3b82f6;--green:#22c55e;--red:#ef4444;--yellow:#eab308;--chip:#eef1f7}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);font-size:15px}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* login (layout inspirado no Digisac, marca MultiAtende) */
.login{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:max(40px,22vh) 16px 28px;background:#fbfcff}
.login .logo{display:flex;align-items:center;gap:10px;font-size:40px;color:#51648c;font-weight:400;letter-spacing:-.5px;margin-bottom:64px}
.login .logo svg.i{width:38px;height:38px;stroke-width:2.2}
.login form,.login .box{width:min(420px,92vw);display:flex;flex-direction:column;gap:16px}
.login .inp{height:42px;border:1px solid #8b97b8;border-radius:21px;padding:0 20px;font-size:15px}
.login .inp::placeholder{color:#7a849c}
.login .flink{align-self:flex-end;color:#55608b;font-weight:600;font-size:15px;margin-top:-4px;background:none;border:0;cursor:pointer;padding:4px 0}
.login .flink:hover{text-decoration:underline}
.login .go{width:288px;height:40px;border-radius:20px;border:0;font-weight:700;font-size:15px;color:#fff;cursor:pointer;background:#51648c;align-self:center;margin-top:28px;transition:background .15s}
.login .go:hover:not(:disabled){background:#425379}
.login .go:disabled{background:#a5a7ae;cursor:default}
.login .lang{position:relative;margin-top:28px}
.login .lang button{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font-size:15px;color:#1d2433}
.login .lang .pop{top:32px;left:50%;transform:translateX(-50%);min-width:170px;padding:8px}
.login .foot{margin-top:22px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;color:#1d2433}
.login .foot a{color:#55608b}.login .foot a:hover{text-decoration:underline}
.login .foot i{width:1px;height:16px;background:#3b6fc0;display:inline-block}
.login .ttl{text-align:center;font-weight:600;font-size:19px;color:#3b4a73}
.login .sub{text-align:center;color:#59627a;font-size:14px;line-height:1.5}
.login .badge-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto}
/* inputs */
.inp,.sel{width:100%;height:44px;border:1px solid #8b97b8;border-radius:22px;padding:0 18px;background:#fff;outline:none}
.inp:focus,.sel:focus,textarea.inp:focus{border-color:var(--navy);box-shadow:0 0 0 3px #51648c22}
textarea.inp{height:auto;padding:12px 18px;border-radius:18px;resize:vertical}
.sel{appearance:none;background:#fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%237a849c' fill='none' stroke-width='1.6'/></svg>") no-repeat right 16px center}
.btn{height:44px;border-radius:22px;border:1px solid transparent;padding:0 22px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:8px;justify-content:center;white-space:nowrap}
.btn.primary{background:var(--navy);color:#fff}.btn.primary:hover{background:#243560}
.btn.soft{background:var(--nav);color:#fff}
.btn.ghost{background:#fff;border-color:#9aa4bf;color:var(--text)}.btn.ghost:hover{background:#f3f5fa}
.btn.danger{background:var(--red);color:#fff}
.btn.sm{height:34px;padding:0 14px;font-size:14px}
.btn:disabled{opacity:.5;cursor:default}
.icon-btn{width:38px;height:38px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#59627a}
.icon-btn:hover{background:#e9edf6}
label.f{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:14px}
label.f small{font-weight:400;color:var(--muted)}
.row{display:flex;gap:12px;align-items:center}.row>*{min-width:0}.grow{flex:1}.gap{gap:20px}
.err{color:var(--red);font-size:14px}
/* layout */
.top{height:60px;background:var(--nav);display:flex;align-items:center;padding:0 22px;gap:6px;color:#fff;position:relative;z-index:30}
.top .brand{display:flex;align-items:center;gap:8px;font-size:26px;margin-right:34px;font-weight:500}
.top nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.top .nb{height:60px;min-width:44px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:2px;color:#e8ecf6;background:none;border:0;cursor:pointer;position:relative}
.top .nb:hover,.top .nb.on{background:#415179}
.top .nb .new{position:absolute;bottom:4px;font-size:9px;background:#ef4444;border-radius:8px;padding:1px 6px;font-weight:700}
.top .badge{position:absolute;top:8px;right:4px;background:#ef4444;border-radius:10px;font-size:11px;padding:1px 6px;font-weight:700}
.top .avatar{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--nav);display:inline-flex;align-items:center;justify-content:center;font-weight:700;position:relative}
.top .avatar::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;background:#22c55e;border:2px solid var(--nav);border-radius:50%}
.pop{position:absolute;top:56px;background:#fff;border-radius:16px;box-shadow:0 10px 40px #1d243333;color:var(--text);padding:12px;z-index:50;min-width:210px}
.pop h6{margin:2px 8px 8px;font-size:15px}
.pop a,.pop button.it{display:flex;gap:12px;align-items:center;padding:10px 10px;border-radius:10px;cursor:pointer;background:none;border:0;width:100%;text-align:left}
.pop a:hover,.pop button.it:hover{background:#f1f4fa}
.pop.cols{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;min-width:480px;right:70px}
main{height:calc(100vh - 60px);overflow:auto}
.page{max-width:1240px;margin:0 auto;padding:44px 28px}
.page h1{font-size:28px;margin:0}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:26px}.page-head .sp{flex:1}
.page-head .search{width:min(380px,36vw)}
.search{position:relative}.search svg{position:absolute;left:14px;top:12px;color:var(--muted)}.search .inp{padding-left:42px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow-x:auto}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;padding:14px 18px;font-weight:600;color:#303a52;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:14px 18px;border-bottom:1px solid #edf0f6;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}.tbl tr:hover td{background:#fafbfe}
.tbl td.act,.tbl th.act{text-align:right;width:60px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);border-radius:14px;padding:3px 12px;font-size:13px;border:1px solid var(--line)}
.chip.green{background:#e8f9ee;border-color:#c5ecd3}.chip.gray{background:#eef0f4}.chip.blue{background:#e3eeff;border-color:#c8dcff}.chip.red{background:#fee8e8;border-color:#f8cccc}.chip.yellow{background:#fdf5d8;border-color:#f3e4a2}
.dot{width:8px;height:8px;border-radius:50%;background:#22c55e;display:inline-block}
.dot.off{background:#9aa4bf}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .ic{width:52px;height:52px;border-radius:50%;background:#e1ecfb;color:#3b6fc0;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.empty b{display:block;color:var(--text);margin-bottom:4px}
.tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 4px;cursor:pointer;font-weight:600;color:#606b86;display:flex;gap:8px;align-items:center;margin-bottom:-1px}
.tabs button.on{color:var(--navy);border-color:var(--navy)}
.tabs .n{background:#e6e9f0;border-radius:12px;padding:1px 9px;font-size:13px;color:#303a52}
/* modal */
.ov{position:fixed;inset:0;background:#1d243380;display:flex;align-items:flex-start;justify-content:center;z-index:100;overflow:auto;padding:40px 12px}
.md{background:#fff;border-radius:24px;width:min(560px,100%);padding:30px 34px;position:relative;box-shadow:0 20px 60px #0004}
.md.wide{width:min(820px,100%)}
.md h3{text-align:center;margin:0 0 22px;font-size:19px;font-weight:600;color:#3b4a73}
.md .x{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;background:#8f9dc2;color:#fff;border:0;cursor:pointer;font-size:20px}
.md .body{display:flex;flex-direction:column;gap:16px}
.md .foot{display:flex;justify-content:center;gap:16px;margin-top:22px}
.toast{background:#1d2433;color:#fff;padding:12px 18px;border-radius:12px;margin-top:8px;box-shadow:0 6px 20px #0004;animation:in .2s}
.toast.err{background:#b91c1c}.toast.ok{background:#15803d}
#toast-root{position:fixed;right:18px;bottom:18px;z-index:200}
@keyframes in{from{transform:translateY(10px);opacity:0}}
/* connections */
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.cn{padding:0}.cn .hd{display:flex;gap:14px;align-items:center;padding:18px;border-bottom:1px solid var(--line)}
.cn .ico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.cn .bd{padding:14px 18px;display:flex;flex-direction:column;gap:12px;color:#38425b}
.cn .bd div{display:flex;gap:10px;align-items:center}
.ico.whatsapp_qr,.ico.whatsapp_official{background:#25d366}.ico.telegram{background:#2aa3de}.ico.sms{background:#f08a4b}.ico.instagram{background:linear-gradient(45deg,#f9a03f,#e1306c,#833ab4)}.ico.facebook{background:#1877f2}.ico.webchat{background:#51648c}.ico.email{background:#ea4335}.ico.google_business{background:#4285f4}.ico.reclame_aqui{background:#00b94a}
.menu{position:relative}
.menu .pop{right:0;top:38px;min-width:190px;padding:8px}
/* chat */
.chat{display:grid;grid-template-columns:320px 1fr 0;height:calc(100vh - 60px)}
.chat.info{grid-template-columns:320px 1fr 300px}
.cl{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:#fff}
.cl .hd{display:flex;align-items:center;gap:6px;padding:14px 16px 6px}.cl .hd b{flex:1;font-size:16px}
.cl .sr{padding:8px 16px}
.cl .pills{display:flex;gap:8px;padding:6px 16px 10px}
.pill{border:1px solid #aab3cb;background:#fff;border-radius:18px;padding:5px 14px;cursor:pointer;font-size:14px}
.pill.on{background:#e3ecff;border-color:#8fb0f0;color:#1d4ed8}
.cl .list{overflow:auto;flex:1}
.ci{display:flex;gap:12px;padding:12px 16px;cursor:pointer;align-items:center;border-left:3px solid transparent}
.ci:hover{background:#f5f7fb}.ci.on{background:#eaf0fb;border-color:var(--navy)}
.av{width:46px;height:46px;border-radius:50%;background:#cdd6ea;color:#40507c;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;position:relative;font-size:16px;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.av .chn{position:absolute;right:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:#25d366}
.av .chn.telegram{background:#2aa3de}.av .chn.sms{background:#f08a4b}.av .chn.instagram{background:linear-gradient(45deg,#f9a03f,#e1306c,#833ab4)}.av .chn.facebook{background:#1877f2}.av .chn.webchat{background:#51648c}.av .chn.email{background:#ea4335}.av .chn.google_business{background:#4285f4}.av .chn.reclame_aqui{background:#00b94a}
.ci .tx{flex:1;min-width:0}.ci .nm{display:flex;justify-content:space-between;gap:6px;font-weight:600}
.ci .nm span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ci .nm time{font-weight:400;color:var(--muted);font-size:13px;flex:none}
.ci .pv{color:#59627a;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:6px;align-items:center}
.ci .un{background:#22c55e;color:#fff;border-radius:10px;font-size:12px;padding:1px 7px;margin-left:auto;font-weight:700}
.ci .meta{font-size:12px;color:var(--muted);margin-top:2px}
.cv{display:flex;flex-direction:column;min-height:0;background:#eef1f7}
.cv .top2{background:#fff;border-bottom:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;gap:12px}
.cv .top2 .t{flex:1;min-width:0}.cv .top2 .t b{display:block}.cv .top2 .t small{color:var(--muted)}
.msgs{flex:1;overflow:auto;padding:18px 24px;display:flex;flex-direction:column;gap:6px}
.b{max-width:66%;padding:8px 12px;border-radius:12px;background:#fff;box-shadow:0 1px 1px #0001;white-space:pre-wrap;word-wrap:break-word;position:relative}
.b.out{align-self:flex-end;background:#dbe7ff}
.b.note{align-self:center;background:#fff6c9;max-width:80%}
.b .who{font-size:12px;font-weight:700;color:#3b6fc0;margin-bottom:2px}
.b .tm{font-size:11px;color:var(--muted);text-align:right;margin-top:3px;display:flex;gap:4px;justify-content:flex-end}
.b img,.b video{max-width:280px;border-radius:8px;display:block;margin-bottom:4px}
.b.failed{border:1px solid var(--red)}
.day{align-self:center;background:#dde3f0;border-radius:10px;padding:2px 12px;font-size:12px;color:#59627a;margin:8px 0}
.composer{background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;gap:8px;align-items:flex-end;position:relative}
.composer textarea{flex:1;border:1px solid #aab3cb;border-radius:20px;padding:10px 16px;resize:none;max-height:140px;outline:none;min-height:42px}
.composer.note textarea{background:#fff9d6}
.qr-pop{position:absolute;bottom:62px;left:16px;right:16px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 28px #0003;max-height:240px;overflow:auto}
.qr-pop div{padding:10px 14px;cursor:pointer}.qr-pop div:hover,.qr-pop div.on{background:#eef2fb}
.noconv{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#5a647e;gap:14px;background:#fbfcff}
.info-p{border-left:1px solid var(--line);background:#fff;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.info-p h4{margin:0}.kv{font-size:14px;display:flex;flex-direction:column;gap:2px}.kv small{color:var(--muted)}
/* kanban */
.kb{display:flex;gap:20px;overflow-x:auto;padding-bottom:20px;align-items:flex-start}
.col{width:380px;flex:none;border:1px solid var(--line);border-radius:18px;background:#fff;max-height:calc(100vh - 290px);display:flex;flex-direction:column}
.col .ch{padding:16px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);font-weight:700}.col .ch b{flex:1}
.col .nc{margin:0;border-bottom:1px solid var(--line);padding:14px;text-align:center;font-weight:600;cursor:pointer;color:#303a52}
.col .cs{overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;min-height:60px}
.col.over{outline:2px dashed var(--nav)}
.kc{border:1px solid var(--line);border-radius:14px;padding:14px;cursor:grab;background:#fff}
.kc:hover{box-shadow:0 3px 14px #0001}
.kc .nm{font-weight:700}.kc .pv{color:#59627a;font-size:14px;margin:8px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kc .ft{border-top:1px solid var(--line);padding-top:8px;color:var(--muted);font-size:13px;display:flex;gap:8px}
/* stats */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.kpi{padding:18px 20px}.kpi small{color:var(--muted)}.kpi b{display:block;font-size:30px;margin-top:4px}
.bars{display:flex;align-items:flex-end;gap:6px;height:210px;padding:10px 4px 30px;overflow-x:auto;overflow-y:hidden}
.bars .bar{flex:1;min-width:18px;background:#7e92c4;border-radius:6px 6px 0 0;position:relative}
.bars .bar span{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--muted);white-space:nowrap}
.pgn{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:#59627a}
.stars{color:#eab308;letter-spacing:2px}
.qrbox{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.qrbox img{width:280px;height:280px}
code.k{background:#eef1f7;padding:2px 8px;border-radius:8px;font-size:13px;word-break:break-all}
.pager{display:flex;gap:6px}
@media(max-width:900px){.chat,.chat.info{grid-template-columns:1fr}.chat .cv{display:none}.chat.open .cl{display:none}.chat.open .cv{display:flex}.top nav{overflow-x:auto;justify-content:flex-start}.page{padding:24px 14px}.pop.cols{min-width:300px;grid-template-columns:1fr;right:10px}}
@media(max-width:480px){.login .foot i{display:none}.login .foot{gap:6px 14px}}