/* WhatsApp SMB - identidade do CRM SMB (paleta oficial Talkline, copiada de painel_smb/templates/crm.html) TEMA: as regras usam so as cores POR FUNCAO (--bg, --surface, --text, --heading ...). O tema escuro troca essas cores em :root[data-theme="dark"]; a escolha fica no navegador (localStorage 'wsmb_tema', ver comum.js). */ :root{ /* paleta da marca (fixa) */ --teal1:#0A3C47; --teal2:#134E5B; --teal3:#1B606E; --teal4:#247780; --teal5:#1E8C99; --aqua1:#98C2CC; --aqua2:#B8D6DC; --aqua3:#CFE3E7; --aqua4:#E6F0F2; --ok:#1E9E6A; --warn:#D9A441; --danger:#E0564B; --brand:'Fredoka','Segoe UI',system-ui,sans-serif; --body:'Segoe UI',Calibri,system-ui,sans-serif; --sidebar-w:248px; --topbar-h:62px; /* cores por funcao - TEMA CLARO (padrao) */ --bg:#F1F2EA; --bg-g1:rgba(36,119,128,.10); --bg-g2:rgba(152,194,204,.16); --surface:#FFFFFF; --surface-2:#E6F0F2; --surface-3:#F6FAFA; --text:#0B2A30; --muted:#73828a; --heading:#0A3C47; --accent-text:#134E5B; --link:#1E8C99; --accent:#247780; --line:#CFE3E7; --line-soft:#E6F0F2; --btn-bg:#134E5B; --btn-bg-hover:#0A3C47; --btn-border:#1B606E; --btn-sec-bg:#FFFFFF; --btn-sec-text:#134E5B; --btn-sec-border:#B8D6DC; --btn-sec-hover:#E6F0F2; --input-bg:#FFFFFF; --input-border:#B8D6DC; --focus:rgba(36,119,128,.12); --topbar-bg:rgba(255,255,255,.96); --chat-bg:#EEF4F2; --bolha-in:#FFFFFF; --bolha-out:#DCF0F3; --bolha-aparelho:#E9EEF0; --doc-bg:rgba(10,60,71,.05); --ok-bg:#d1fae5; --ok-text:#11663f; --warn-bg:#FEF3C7; --warn-text:#7a5a12; --warn-line:#f1dca2; --bad-bg:#FBE4E1; --bad-text:#8a2a22; --bad-line:#f3c5bf; --info-bg:#DDEEF1; --info-text:#134E5B; --tag-prop-bg:#E8E4FA; --tag-prop:#4b3a9c; --tag-cad-bg:#E2F0FF; --tag-cad:#1b5594; --vazio-cel:#F4F7F7; --shadow-sm:0 1px 2px rgba(11,42,48,.06),0 1px 3px rgba(11,42,48,.08); --shadow-md:0 4px 16px rgba(11,42,48,.08),0 2px 6px rgba(11,42,48,.05); --shadow-lg:0 18px 50px rgba(11,42,48,.16); color-scheme:light; } /* TEMA ESCURO - mesmas funcoes, tons da propria marca (teal bem escuro de fundo, aqua no texto) */ :root[data-theme="dark"]{ --bg:#0D1A1D; --bg-g1:rgba(36,119,128,.16); --bg-g2:rgba(152,194,204,.05); --surface:#132528; --surface-2:#1A3035; --surface-3:#172B2F; --text:#DCE9EC; --muted:#8FA4A9; --heading:#E8F3F5; --accent-text:#A9D6DD; --link:#6FC9D4; --accent:#4FB3BF; --line:#25393E; --line-soft:#1D3236; --btn-bg:#1E6F7C; --btn-bg-hover:#24818F; --btn-border:#2A8593; --btn-sec-bg:#132528; --btn-sec-text:#A9D6DD; --btn-sec-border:#2C4A50; --btn-sec-hover:#1A3035; --input-bg:#0F2023; --input-border:#2C4A50; --focus:rgba(79,179,191,.22); --topbar-bg:rgba(15,31,34,.96); --chat-bg:#0B1719; --bolha-in:#1A2E32; --bolha-out:#1D4A52; --bolha-aparelho:#253A3F; --doc-bg:rgba(169,214,221,.08); --ok-bg:#123B2B; --ok-text:#83DDB3; --warn-bg:#3A3017; --warn-text:#F0CD7A; --warn-line:#5A4A20; --bad-bg:#43211E; --bad-text:#F4A69E; --bad-line:#6A322C; --info-bg:#16343A; --info-text:#A9D6DD; --tag-prop-bg:#2B2650; --tag-prop:#C3B8F7; --tag-cad-bg:#17304A; --tag-cad:#9FC8F2; --vazio-cel:#122326; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 18px 50px rgba(0,0,0,.55); color-scheme:dark; } *{margin:0;padding:0;box-sizing:border-box;font-family:var(--body)} [hidden]{display:none!important} /* atributo hidden vence classe com display (.btn, .opcoes...) */ html,body{height:100%} body{display:flex;color:var(--text);overflow-x:hidden; background:radial-gradient(1100px 520px at 100% -8%,var(--bg-g1),transparent 60%), radial-gradient(900px 480px at -8% 8%,var(--bg-g2),transparent 55%),var(--bg)} h1,h2,h3,h4{font-family:var(--brand);font-weight:600} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} a{color:var(--link)} ::selection{background:var(--aqua1);color:var(--teal1)} /* ---------- sidebar (escura nos dois temas) ---------- */ .sidebar{width:var(--sidebar-w);height:100vh;position:fixed;left:0;top:0;z-index:1001; background:linear-gradient(185deg,#0C424E 0%,#093540 55%,#07303A 100%);display:flex;flex-direction:column; padding:18px 14px;overflow-y:auto;box-shadow:6px 0 30px rgba(7,40,46,.18);transition:transform .28s} :root[data-theme="dark"] .sidebar{background:linear-gradient(185deg,#0A2E36 0%,#082429 55%,#061D22 100%)} .sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal3),var(--teal4),var(--aqua1))} .brand{display:flex;align-items:center;gap:11px;padding:8px 8px 16px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:14px} .brand .ic{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#25D366,#1E9E6A);display:grid;place-items:center;color:#fff;font-size:19px} .brand b{font-family:var(--brand);font-size:18px;font-weight:600;color:#fff;line-height:1.1} .brand b span{color:var(--aqua1);display:block;font-size:12px;font-weight:500;letter-spacing:.6px} .nav-section{font-size:10px;color:var(--teal4);letter-spacing:1.6px;text-transform:uppercase;font-weight:700;padding:6px 12px 8px} .menu{display:flex;flex-direction:column;gap:4px} .menu a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;text-decoration:none;color:var(--aqua2); font-size:13.5px;font-weight:500;position:relative;min-height:44px;transition:background .18s,color .18s} .menu a i{width:22px;text-align:center;font-size:15px} .menu a span.l{flex:1} .menu a:hover{background:rgba(255,255,255,.08);color:#fff} .menu a.active{background:linear-gradient(90deg,rgba(152,194,204,.22),rgba(152,194,204,.08));color:#fff} .menu a.active::before{content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--aqua1)} .badge{background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;border-radius:20px;padding:1px 7px;min-width:20px;text-align:center} .badge.amarelo{background:var(--warn);color:var(--teal1)} .side-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.10);font-size:11.5px;color:var(--aqua2)} .side-foot .nums{display:flex;flex-direction:column;gap:5px;margin-top:6px} .side-foot .nums div{display:grid;grid-template-columns:8px minmax(0,1fr);column-gap:7px;align-items:center} .side-foot .nums .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff} .side-foot .nums .muted{grid-column:2;font-size:10.5px;line-height:1.2} .side-foot .muted{color:var(--aqua1);opacity:.8} .dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted);flex-shrink:0} .dot.ok{background:#3ddc84}.dot.warn{background:var(--warn)}.dot.bad{background:var(--danger)} /* ---------- topbar e conteudo ---------- */ .main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh} .topbar{height:var(--topbar-h);background:var(--topbar-bg);border-bottom:1px solid var(--line);display:flex;align-items:center; gap:14px;padding:0 22px;position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)} .topbar h1{font-size:20px;color:var(--heading);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar h1 small{font:500 12px var(--body);color:var(--muted);margin-left:8px} .hamb{display:none;border:0;background:none;font-size:20px;color:var(--heading);cursor:pointer} .user-chip{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:30px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--accent-text)} .user-chip .dot{background:var(--ok)} .tema{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--accent-text);cursor:pointer;display:grid;place-items:center;font-size:15px} .tema:hover{border-color:var(--accent)} .sair{border:0;border-radius:10px;padding:8px 12px;background:linear-gradient(135deg,#E0564B,#c74238);color:#fff;font-weight:600;font-size:12.5px;cursor:pointer;text-decoration:none} .content{padding:20px 22px;flex:1;min-height:0} .aviso-topo{margin:12px 22px 0;padding:10px 14px;border-radius:12px;font-size:13px;display:flex;gap:10px;align-items:center} .aviso-topo.bad{background:var(--bad-bg);color:var(--bad-text);border:1px solid var(--bad-line)} .aviso-topo.warn{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-line)} .aviso-topo.info{background:var(--info-bg);color:var(--info-text);border:1px solid var(--line)} /* ---------- blocos comuns ---------- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:18px} .card h2{font-size:16px;color:var(--heading);margin-bottom:10px;display:flex;align-items:center;gap:8px} .card h2 .sub{font:500 12px var(--body);color:var(--muted)} .grid{display:grid;gap:14px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--shadow-sm)} .kpi .r{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.6px} .kpi .v{font:600 26px var(--brand);color:var(--heading);margin-top:2px} .kpi .s{font-size:12px;color:var(--muted)} .btn{border:1px solid var(--btn-border);background:var(--btn-bg);color:#fff;border-radius:10px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none} .btn:hover{background:var(--btn-bg-hover)} .btn.sec{background:var(--btn-sec-bg);color:var(--btn-sec-text);border-color:var(--btn-sec-border)} .btn.sec:hover{background:var(--btn-sec-hover)} .btn.ok{background:var(--ok);border-color:var(--ok)} .btn.perigo{background:var(--danger);border-color:var(--danger)} .btn.peq{padding:5px 10px;font-size:12px} .btn:disabled{opacity:.5;cursor:not-allowed} input.f,select.f,textarea.f{border:1px solid var(--input-border);border-radius:10px;padding:8px 10px;background:var(--input-bg);outline:none;min-width:0} input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--focus)} label.lb{font-size:12px;font-weight:600;color:var(--accent-text);display:block;margin:8px 0 4px} table.t{width:100%;border-collapse:collapse;font-size:13px} table.t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap} table.t td{padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top} table.t tr:hover td{background:var(--surface-3)} table.t tr.total td{font-weight:700;background:var(--surface-2)} table.t td.n,table.t th.n{text-align:right;font-variant-numeric:tabular-nums} .tag{display:inline-block;border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--accent-text);white-space:nowrap} .tag.proposta{background:var(--tag-prop-bg);color:var(--tag-prop)}.tag.aceite{background:var(--warn-bg);color:var(--warn-text)} .tag.documentos{background:var(--info-bg);color:var(--info-text)}.tag.cadastrado{background:var(--tag-cad-bg);color:var(--tag-cad)} .tag.ativado,.tag.pos_venda{background:var(--ok-bg);color:var(--ok-text)}.tag.perdida{background:var(--bad-bg);color:var(--bad-text)} .vazio{color:var(--muted);font-size:13px;padding:18px;text-align:center} .muted{color:var(--muted)} .txt-warn{color:var(--warn-text)} .tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .tabs button{border:1px solid var(--btn-sec-border);background:var(--btn-sec-bg);color:var(--btn-sec-text);border-radius:30px;padding:7px 14px;font-weight:600;font-size:13px;cursor:pointer} .tabs button.on{background:var(--btn-bg);color:#fff;border-color:var(--btn-bg)} .barra{height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden} .barra i{display:block;height:100%;background:linear-gradient(90deg,var(--teal4),var(--aqua1))} .barra.alto i{background:linear-gradient(90deg,var(--warn),#e9be62)} .barra.estouro i{background:var(--danger)} .coluna{flex:1;background:var(--accent);border-radius:4px 4px 0 0} .toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--teal1);color:#fff;padding:11px 18px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow-lg);z-index:3000;max-width:90vw} :root[data-theme="dark"] .toast{background:#1E6F7C} .toast.erro{background:#8a2a22} .modal-fundo{position:fixed;inset:0;background:rgba(7,40,46,.55);z-index:2000;display:grid;place-items:center;padding:16px} :root[data-theme="dark"] .modal-fundo{background:rgba(0,0,0,.6)} .modal{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);width:min(520px,100%);max-height:90vh;overflow:auto;padding:20px} .modal h3{color:var(--heading);margin-bottom:10px} .modal .acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:16px} /* ---------- atendimento (cara de WhatsApp Web) ---------- */ .atd{display:grid;grid-template-columns:340px minmax(0,1fr) 300px;height:calc(100vh - var(--topbar-h));min-height:0} .atd.sem-ficha{grid-template-columns:340px minmax(0,1fr)} .atd>*{min-width:0} .lista{border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0} .lista .busca{padding:10px;border-bottom:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px} .lista .busca input{width:100%} .filtros{display:flex;gap:5px;flex-wrap:wrap} .filtros button{border:1px solid var(--line);background:var(--surface);border-radius:20px;padding:4px 10px;font-size:11.5px;font-weight:600;color:var(--accent-text);cursor:pointer} .filtros button.on{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff} .convs{overflow-y:auto;flex:1} .cv{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer;position:relative} .cv:hover{background:var(--surface-3)}.cv.on{background:var(--surface-2)} .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--teal4),var(--teal2));color:#fff;display:grid;place-items:center;font:600 16px var(--brand);flex-shrink:0} .cv .m{flex:1;min-width:0} .cv .l1{display:flex;gap:6px;align-items:baseline} .cv .nm{font-weight:700;font-size:13.5px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cv .hr{font-size:11px;color:var(--muted);white-space:nowrap} .cv .l2{display:flex;gap:6px;align-items:center;margin-top:2px} .cv .pv{font-size:12.5px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cv .pv mark{background:var(--warn-bg);color:var(--text);font-weight:700;border-radius:3px;padding:0 2px} .cv .l3{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap} .cv.esperando .hr{color:var(--danger);font-weight:700} .chat{display:flex;flex-direction:column;min-height:0;background:var(--chat-bg)} .chat-top{background:var(--surface);border-bottom:1px solid var(--line);padding:9px 14px;display:flex;align-items:center;gap:10px;min-height:60px} .chat-top .m{flex:1;min-width:0} .chat-top .nm{font-weight:700} .chat-top .sb{font-size:12px;color:var(--muted)} .msgs{flex:1;overflow-y:auto;padding:16px 6%;display:flex;flex-direction:column;gap:4px} .dia-sep{align-self:center;background:var(--surface);border-radius:8px;padding:3px 10px;font-size:11.5px;color:var(--muted);margin:10px 0;box-shadow:var(--shadow-sm)} .bolha{max-width:min(72%,560px);padding:7px 10px 5px;border-radius:10px;font-size:13.8px;line-height:1.38;box-shadow:0 1px 1px rgba(11,42,48,.08);position:relative;word-wrap:break-word;white-space:pre-wrap} .bolha.in{background:var(--bolha-in);align-self:flex-start;border-top-left-radius:2px} .bolha.out{background:var(--bolha-out);align-self:flex-end;border-top-right-radius:2px} .bolha .meta{font-size:10.5px;color:var(--muted);text-align:right;margin-top:3px;display:flex;gap:6px;justify-content:flex-end;align-items:center} .bolha .autor{font-size:11px;font-weight:700;color:var(--accent);margin-bottom:2px} .bolha.out.aparelho{background:var(--bolha-aparelho)} .bolha img{max-width:100%;max-height:320px;border-radius:8px;display:block;cursor:zoom-in} .bolha audio,.bolha video{max-width:100%} .bolha .doc{display:flex;align-items:center;gap:10px;background:var(--doc-bg);border-radius:8px;padding:9px 10px;text-decoration:none;color:var(--text)} .bolha .doc i{font-size:22px;color:var(--danger)} .bolha.erro{border:1px solid var(--danger)} .ck-lida{color:#34B7F1} .compor{background:var(--surface);border-top:1px solid var(--line);padding:10px 12px;display:flex;gap:8px;align-items:flex-end} .compor textarea{flex:1;resize:none;max-height:140px;min-height:40px;border:1px solid var(--input-border);border-radius:12px;padding:9px 12px;outline:none;background:var(--input-bg)} .compor .ib{width:40px;height:40px;border-radius:50%;border:0;background:var(--surface-2);color:var(--accent-text);cursor:pointer;font-size:16px;flex-shrink:0} .compor .ib:hover{filter:brightness(.95)} .compor .ib.env{background:var(--btn-bg);color:#fff} .compor .ib.grav{background:var(--danger);color:#fff;animation:pulsa 1s infinite} @keyframes pulsa{50%{opacity:.6}} .bloqueio{background:var(--warn-bg);color:var(--warn-text);font-size:12.5px;padding:8px 14px;border-top:1px solid var(--warn-line)} .chat-vazio{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center;padding:30px} .chat-vazio h3{color:var(--heading)} .chat-vazio i{font-size:46px;color:var(--aqua1);margin-bottom:10px} .ficha{border-left:1px solid var(--line);background:var(--surface);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px} .ficha h3{font-size:14px;color:var(--heading)} .ficha .linha{font-size:12.5px;display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--line-soft)} .ficha .linha span:first-child{color:var(--muted)} .etapas{display:flex;flex-direction:column;gap:4px} .etapas button{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:7px 10px;font-size:12.5px;cursor:pointer;display:flex;gap:8px;align-items:center} .etapas button.on{background:var(--btn-bg);color:#fff;border-color:var(--btn-bg)} .etapas button.feita{background:var(--surface-2)} /* tabulacao e agenda */ .tag.st{background:var(--info-bg);color:var(--info-text);max-width:190px;overflow:hidden;text-overflow:ellipsis} .tag.falta{background:var(--bad-bg);color:var(--bad-text)} .tag.ret{background:var(--warn-bg);color:var(--warn-text)}.tag.ret.atrasado{background:var(--bad-bg);color:var(--bad-text)} .tag.enc{background:var(--surface-2);color:var(--muted);max-width:190px;overflow:hidden;text-overflow:ellipsis} .st-btn{max-width:230px}.st-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .st-btn.ok{background:var(--ok);border-color:var(--ok)} .st-btn.falta{background:var(--danger);border-color:var(--danger)} .st-btn.sec{background:var(--btn-sec-bg);color:var(--btn-sec-text);border-color:var(--btn-sec-border)} .faixa-ag{background:var(--warn-bg);color:var(--warn-text);border-bottom:1px solid var(--warn-line);font-size:12.5px;padding:7px 14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap} .faixa-ag.atrasado,.faixa-ag.erro{background:var(--bad-bg);color:var(--bad-text);border-color:var(--bad-line)} .faixa-ag.enc{background:var(--surface-2);color:var(--accent-text);border-color:var(--line)} .faixa-ag .lk{margin-left:auto;display:flex;gap:10px}.faixa-ag .lk a{color:inherit;font-weight:700} .opcoes{display:flex;flex-direction:column;gap:4px;max-height:46vh;overflow:auto;margin-top:6px} .opcoes button{text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:10px;padding:8px 11px;font-size:13px;cursor:pointer} .opcoes button:hover{background:var(--surface-3)} .opcoes button.on{background:var(--btn-bg);color:#fff;border-color:var(--btn-bg)} .opcoes .grp{font:600 11px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:8px 0 2px} .modal details summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent-text)} .mod-tabs{margin:6px 0 4px}.mod-tabs button{padding:6px 18px} /* Numeros e proxy - cartoes "futuristas" (10-10-2026): conectado = verde, desconectado = vermelho, aguardando QR = ambar */ .nums-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:20px} .ncard{--st:#16a34a;--st-bg:rgba(22,163,74,.10);--st-glow:rgba(22,163,74,.30);position:relative;overflow:hidden;border-radius:22px; padding:16px 18px 18px;background:linear-gradient(165deg,var(--surface) 0%,var(--surface-3) 100%); border:1px solid color-mix(in srgb,var(--st) 38%,var(--line)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 4px color-mix(in srgb,var(--st) 7%,transparent),0 14px 34px -14px var(--st-glow),0 0 26px -8px var(--st-glow)} .ncard.bad{--st:#dc2626;--st-bg:rgba(220,38,38,.10);--st-glow:rgba(220,38,38,.32)} /* fonte reta nos cartoes (a Fredoka arredondada ficava "estranha" com sublinhado e numeros) */ .ncard,.ncard *{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-variant-numeric:tabular-nums} .ncard .fa-solid,.ncard .fa-regular{font-family:"Font Awesome 6 Free"} .ncard.warn{--st:#d97706;--st-bg:rgba(217,119,6,.11);--st-glow:rgba(217,119,6,.30)} .ncard::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 140px at 100% 0,var(--st-bg),transparent 65%)} .ncard>*{position:relative} .nc-top{display:flex;align-items:center;gap:10px;min-height:40px;padding-right:172px} .nc-titulo{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0} .nc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--st);box-shadow:0 0 0 4px var(--st-bg),0 0 12px var(--st)} .nc-escudo{width:34px;height:34px;flex-shrink:0;border-radius:11px;display:grid;place-items:center;color:var(--heading); background:linear-gradient(160deg,var(--surface),var(--surface-2));border:1px solid var(--line);box-shadow:var(--shadow-sm)} .nc-nome{font-size:15px;font-weight:700;color:var(--heading);letter-spacing:.1px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nc-inst{flex-shrink:0;font-size:10.5px;font-weight:700;padding:1px 9px;border-radius:20px;color:var(--st);background:var(--st-bg); border:1px solid color-mix(in srgb,var(--st) 30%,transparent)} .nc-tab{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px;padding:11px 18px 11px 30px;font-size:11.5px;font-weight:700; letter-spacing:.9px;text-transform:uppercase;color:var(--st);clip-path:polygon(20px 0,100% 0,100% 100%,0 100%); background:linear-gradient(90deg,color-mix(in srgb,var(--st) 6%,var(--surface)) 0%,color-mix(in srgb,var(--st) 16%,var(--surface)) 100%); border-bottom-left-radius:8px;text-shadow:0 0 12px var(--st-glow)} .nc-corpo{margin-top:12px;padding:2px 14px;border-radius:16px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .nc-linha{display:grid;grid-template-columns:20px 150px minmax(0,1fr);align-items:center;gap:10px;padding:9px 0;font-size:12.5px; line-height:1.3;letter-spacing:-.1px;border-bottom:1px solid var(--line-soft)} .nc-linha:last-child{border-bottom:0} .nc-linha .ic{color:var(--muted);text-align:center;font-size:13px} .nc-linha .rot{color:var(--muted)} .nc-linha .val{text-align:right;color:var(--text);font-weight:600;overflow-wrap:anywhere} .nc-sub{font-size:11px;color:var(--muted);font-weight:500;margin-top:2px} .nc-ok{color:var(--ok)}.nc-erro{color:var(--danger)} .nc-copiar{border:0;background:none;color:var(--muted);cursor:pointer;margin-left:4px;padding:0 2px;vertical-align:baseline} .nc-copiar:hover{color:var(--accent)} .nc-barra{display:flex;align-items:center;gap:12px;justify-content:flex-end} .nc-barra .trilho{flex:1;max-width:170px;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden} .nc-barra .trilho i{display:block;height:100%;min-width:4px;border-radius:6px;background:linear-gradient(90deg,#14b8a6,#22c55e)} .nc-barra .trilho i.alto{background:linear-gradient(90deg,#f59e0b,#d97706)}.nc-barra .trilho i.cheio{background:linear-gradient(90deg,#ef4444,#b91c1c)} .nc-acoes{display:flex;gap:5px;flex-wrap:wrap;margin-top:14px} .nc-acoes button{display:inline-flex;align-items:center;gap:5px;border-radius:12px;padding:7px 9px;font-weight:600;font-size:11.5px;cursor:pointer;white-space:nowrap; border:1px solid var(--btn-sec-border);color:var(--btn-sec-text);background:linear-gradient(180deg,var(--surface),var(--surface-3));box-shadow:var(--shadow-sm)} .nc-acoes button:hover{border-color:var(--accent)} .nc-acoes .conectar{color:#fff;border-color:#15803d;background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 6px 16px -8px rgba(22,163,74,.7)} .nc-acoes .desligar{color:#fff;border-color:#b91c1c;background:linear-gradient(180deg,#ef4444,#dc2626);box-shadow:0 6px 16px -8px rgba(220,38,38,.7);padding:7px 10px} .nc-acoes button:disabled{opacity:.45;cursor:not-allowed} :root[data-theme="dark"] .ncard{box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 4px color-mix(in srgb,var(--st) 9%,transparent),0 14px 34px -14px var(--st-glow),0 0 26px -8px var(--st-glow)} :root[data-theme="dark"] .nc-corpo{box-shadow:none} @media (max-width:560px){.nums-grid{grid-template-columns:1fr}.nc-top{padding-right:0;flex-wrap:wrap} .nc-tab{position:static;clip-path:none;border-radius:10px;margin:0 0 8px;width:max-content} .nc-linha{grid-template-columns:22px minmax(0,1fr)}.nc-linha .val{grid-column:2;text-align:left}} .tipo-cli{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:2px 0 8px;padding:8px 10px;border:1px dashed var(--line);border-radius:12px;font-size:12.5px} .tipo-cli span{font-weight:700;color:var(--heading);margin-right:4px} .tipo-cli button{border:1px solid var(--btn-sec-border);background:var(--btn-sec-bg);color:var(--btn-sec-text);border-radius:20px;padding:5px 12px;font-weight:600;font-size:12.5px;cursor:pointer} .tipo-cli button.on{background:var(--ok);border-color:var(--ok);color:#fff} @media (max-width:700px){.some-m{display:none}.st-btn{max-width:130px}} .voltar-m{display:none} /* grade de horarios */ .grade{display:grid;grid-template-columns:44px repeat(24,minmax(14px,1fr));gap:2px;font-size:10px} .grade div{height:20px;border-radius:3px;display:grid;place-items:center} .grade .h{color:var(--muted)} /* tela de entrada */ .ucards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-top:12px} .ucards button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;text-align:left;cursor:pointer;font-size:13px} .ucards button:hover{background:var(--surface-2)} .ucards small{display:block;color:var(--muted)} /* ---------- celular ---------- */ @media (max-width:1100px){.atd{grid-template-columns:300px minmax(0,1fr)}.ficha{display:none}.atd.ficha-aberta .ficha{display:flex;position:fixed;right:0;top:var(--topbar-h);bottom:0;width:320px;z-index:60;box-shadow:var(--shadow-lg)}} @media (max-width:900px){ .sidebar{transform:translateX(-100%)}.sidebar.aberta{transform:none} .main{margin-left:0}.hamb{display:block} .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} .content{padding:14px} .atd{grid-template-columns:1fr}.atd .chat{display:none}.atd.chat-aberto .lista{display:none}.atd.chat-aberto .chat{display:flex} .voltar-m{display:inline-block} .user-chip .nm{display:none} } @media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}.msgs{padding:12px 10px}.bolha{max-width:86%}} /* ===================== PACOTE DE LAYOUT DO CRM SMB (24-10-2026) — SÓ MASTER ===================== Pedido: "O nosso whatsapp_smb pode ter essas melhorias também? é importantíssimo melhorar" → os 4 grupos: menu e tabelas, Excel + atalhos de período, alta definição, Modo TV. Tudo aqui depende de body.pacotes, que o base.html só põe para o MASTER (o static/pacotes.js também só vai para ele). Para os outros perfis a tela fica como antes. */ /* 1. MENU RECOLHÍVEL — só de 901 px para cima (no celular o menu é a gaveta de sempre). 27-10-2026 ("esse recolher deve ser aplicado em todos os perfis de usuários"): saiu do body.pacotes, vale para TODOS */ .recolher{display:none} @media (min-width:901px){ body .recolher{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;cursor:pointer; border:1px solid var(--line);background:var(--surface-2);color:var(--accent-text)} body .recolher:hover{border-color:var(--accent)} body .recolher i{transition:transform .2s} body .sidebar{transition:width .2s,transform .28s} body .main{transition:margin-left .2s} body.nav-recolhido{--sidebar-w:74px} body.nav-recolhido .recolher i{transform:rotate(180deg)} body.nav-recolhido .sidebar{padding:18px 10px;overflow-x:hidden} body.nav-recolhido .brand{justify-content:center;padding:8px 0 16px} body.nav-recolhido .brand b{display:none} body.nav-recolhido .nav-section{font-size:0;padding:0;margin:10px 8px 8px!important;border-top:1px solid rgba(255,255,255,.12)} body.nav-recolhido .menu a{justify-content:center;padding:11px 0} body.nav-recolhido .menu a span.l{display:none} body.nav-recolhido .menu a .badge{position:absolute;top:3px;right:5px;min-width:17px;padding:0 4px;font-size:9.5px;line-height:15px} body.nav-recolhido .menu a.active::before{left:-10px} body.nav-recolhido .side-foot{padding:10px 0 0;font-size:0} body.nav-recolhido .side-foot .nums{align-items:center} body.nav-recolhido .side-foot .nums div{grid-template-columns:8px} body.nav-recolhido .side-foot .nums .nm,body.nav-recolhido .side-foot .nums .muted{display:none} } /* 1b. MÓDULOS EM ACORDEÃO (24-10-2026, "coloque para esses módulos recolherem igual o CRM SMB"): o título do módulo abre e fecha, um aberto por vez; o da tela aberta já vem aberto (base.html). Os itens ficam recuados, com a linha guia à esquerda. Com o menu recolhido o título vira a linha que separa os módulos e todos os ícones aparecem. */ body.pacotes .mod-h{display:flex;align-items:center;gap:12px;width:100%;padding:10px 13px;border:0;border-radius:12px;background:transparent; color:#e7f1f3;font:600 13.5px var(--body);text-align:left;cursor:pointer;min-height:44px;transition:background .18s} body.pacotes .mod-h i{width:22px;text-align:center;font-size:15px;color:var(--aqua1)} body.pacotes .mod-h .l{flex:1;line-height:1.2} body.pacotes .mod-h .mod-seta{width:auto;font-size:11px;color:var(--teal4);transition:transform .2s} body.pacotes .mod-h:hover{background:rgba(255,255,255,.07);color:#fff} body.pacotes .mod-h.open .mod-seta{transform:rotate(180deg);color:var(--aqua2)} body.pacotes .mod-h:has(+ .menu a.active),body.pacotes .mod-h:has(+ .menu a.active) i:first-child{color:#fff} body.pacotes .mod-h + .menu{display:none;gap:2px;margin:0 0 6px 25px;padding-left:8px;border-left:1px solid rgba(152,194,204,.22)} body.pacotes .mod-h.open + .menu{display:flex} body.pacotes .mod-h + .menu a{min-height:36px;padding:8px 11px;font-size:13px;gap:9px} body.pacotes .mod-h + .menu a i{font-size:13px;width:18px} body.pacotes .mod-h + .menu a.active::before{left:-9px;height:20px} @media (min-width:901px){ body.pacotes.nav-recolhido .mod-h{width:auto;font-size:0;padding:0;min-height:0;margin:10px 8px 8px;border-top:1px solid rgba(255,255,255,.12);border-radius:0;pointer-events:none} body.pacotes.nav-recolhido .mod-h i{display:none} body.pacotes.nav-recolhido .mod-h + .menu{display:flex;gap:4px;margin:0;padding:0;border-left:0} body.pacotes.nav-recolhido .mod-h + .menu a{min-height:44px;padding:11px 0;font-size:13.5px;gap:12px} body.pacotes.nav-recolhido .mod-h + .menu a i{font-size:15px;width:22px} body.pacotes.nav-recolhido .mod-h + .menu a.active::before{left:-10px;height:22px} } /* 2. CABEÇALHO FIXO nas tabelas dos Relatórios: o nome das colunas fica parado no topo ao rolar (embaixo da barra do topo; nas tabelas largas, que rolam dentro do quadro, no topo do quadro) */ body.pacotes #painel table.t th{position:sticky;top:var(--topbar-h);z-index:2;background:var(--surface)} body.pacotes #painel div[style*="overflow-x:auto"]{max-height:calc(100vh - 150px);overflow:auto} body.pacotes #painel div[style*="overflow-x:auto"] table.t th{top:0} /* 3. EXCEL em cada quadro com tabela dos Relatórios (o botão entra no título) */ body.pacotes .card h2 .xl-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:9px;cursor:pointer; border:1px solid #b9dccb;background:#eaf7f0;color:#1d6b43;font:600 12px var(--body);white-space:nowrap} body.pacotes .card h2 .xl-btn:hover{border-color:var(--ok);background:#fff} body.pacotes .card h2 .xl-btn:disabled{opacity:.6;cursor:wait} :root[data-theme="dark"] body.pacotes .card h2 .xl-btn{background:#123B2B;border-color:#1E6B4A;color:#83DDB3} /* 4. ATALHOS DE PERÍODO no De/Até dos Relatórios */ .per-atalhos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;width:100%;margin-top:2px} .per-atalhos span{font-size:12px;color:var(--muted);margin-right:2px} .per-atalhos button{border:1px solid var(--btn-sec-border);background:var(--btn-sec-bg);color:var(--btn-sec-text);border-radius:30px; padding:4px 12px;font-weight:600;font-size:12px;cursor:pointer} .per-atalhos button:hover{border-color:var(--accent)} .per-atalhos button.on{background:var(--btn-bg);border-color:var(--btn-bg);color:#fff} /* NOVIDADES (janela que aparece uma vez por versão) */ .nov-lista{display:flex;flex-direction:column;gap:10px;margin-top:6px} .nov-it{display:flex;gap:12px;align-items:flex-start} .nov-it .ic{width:34px;height:34px;flex-shrink:0;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)} .nov-it b{display:block;color:var(--heading);font-size:13.5px} .nov-it small{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;margin-top:2px} /* 5. ALTA DEFINIÇÃO (receita V6_NITIDEZ do Rany, a mesma do CRM SMB) — C4: peso 800/900 vira Segoe UI BOLD (no Windows caía na "Segoe UI Black", que borra a 10–12 px: selos do menu, rótulos); fora do Windows o local() falha e vale o resto da pilha. C6: o topo fixo fica opaco e sem desfoque (translúcido em cima de texto tira o ClearType). */ @font-face{font-family:"TL UI";font-style:normal;font-weight:100 349;src:local("Segoe UI Light"),local("SegoeUI-Light")} @font-face{font-family:"TL UI";font-style:normal;font-weight:350 549;src:local("Segoe UI"),local("SegoeUI")} @font-face{font-family:"TL UI";font-style:normal;font-weight:550 649;src:local("Segoe UI Semibold"),local("SegoeUI-Semibold")} @font-face{font-family:"TL UI";font-style:normal;font-weight:650 1000;src:local("Segoe UI Bold"),local("SegoeUI-Bold")} @font-face{font-family:"TL UI";font-style:italic;font-weight:100 549;src:local("Segoe UI Italic"),local("SegoeUI-Italic")} @font-face{font-family:"TL UI";font-style:italic;font-weight:550 1000;src:local("Segoe UI Bold Italic"),local("SegoeUI-BoldItalic")} body.pacotes{--body:"TL UI","Segoe UI",Calibri,system-ui,sans-serif;--topbar-bg:#FFFFFF} :root[data-theme="dark"] body.pacotes{--topbar-bg:#0F1F22} body.pacotes .topbar{backdrop-filter:none} body.pacotes table.t td{font-variant-numeric:tabular-nums} /* C10: monitor Full HD a 100% (1600 px ou mais) — as letras menores sobem um pouco */ @media (min-width:1600px){ body.pacotes .nav-section{font-size:10.5px} body.pacotes .tag{font-size:11.5px} body.pacotes .cv .hr{font-size:11.5px} body.pacotes .bolha .meta{font-size:11px} body.pacotes .filtros button{font-size:12px} body.pacotes table.t th{font-size:11.5px} } /* 6. MODO TV — tela cheia escura, letras grandes (clamp pela largura da TV), "Agora" e "Números" se revezando */ .tv-ovl{position:fixed;inset:0;z-index:2500;display:none;flex-direction:column;color:#fff;overflow:hidden; background:radial-gradient(1200px 620px at 88% -12%,rgba(30,140,153,.38),transparent 60%),linear-gradient(160deg,#062A31 0%,#0A3C47 52%,#0C424E 100%)} .tv-ovl.on{display:flex} .tv-ovl *{font-family:"TL UI","Segoe UI",system-ui,sans-serif} .tv-ovl .fa-solid,.tv-ovl .fa-brands{font-family:"Font Awesome 6 Free"} .tv-ovl .fa-brands{font-family:"Font Awesome 6 Brands"} .tv-ovl .br{font-family:var(--brand)} .tv-top{display:flex;align-items:center;gap:18px;padding:22px 36px 12px} .tv-top .ic{width:clamp(34px,2.4vw,46px);height:clamp(34px,2.4vw,46px);border-radius:12px;background:linear-gradient(135deg,#25D366,#1E9E6A);display:grid;place-items:center;font-size:clamp(18px,1.4vw,26px)} .tv-marca{font-size:clamp(18px,1.6vw,30px);font-weight:600;letter-spacing:.4px} .tv-marca span{color:var(--aqua1)} .tv-titulo{font-size:clamp(20px,2vw,38px);font-weight:600;margin-left:8px;color:#e7f1f3} .tv-vivo{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:rgba(224,86,75,.18); border:1px solid rgba(224,86,75,.5);color:#ffc2bb;font-weight:700;font-size:clamp(11px,.85vw,16px);letter-spacing:1.6px} .tv-vivo i{width:9px;height:9px;border-radius:50%;background:#E0564B;animation:tvPulso 1.6s ease-in-out infinite} @keyframes tvPulso{50%{opacity:.25}} .tv-relogio{margin-left:auto;font-size:clamp(26px,2.6vw,54px);font-weight:600;font-variant-numeric:tabular-nums} .tv-acoes{display:flex;gap:8px} .tv-acoes button{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:16px;cursor:pointer} .tv-acoes button:hover{background:rgba(255,255,255,.18)} .tv-acoes button:focus-visible{outline:2px solid #F2C46D;outline-offset:2px} .tv-palco{flex:1;min-height:0;position:relative} .tv-slide{position:absolute;inset:4px 36px 0;display:none;flex-direction:column;gap:18px;min-height:0} .tv-slide.on{display:flex} .tv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .tv-kpi{background:rgba(255,255,255,.07);border:1px solid rgba(152,194,204,.22);border-radius:18px;padding:14px 20px} .tv-kpi.alerta{border-color:rgba(224,86,75,.6);background:rgba(224,86,75,.14)} .tv-kpi.festa{border-color:rgba(242,196,109,.45);background:rgba(242,196,109,.10)} .tv-kpi .l{font-size:clamp(11px,.85vw,16px);letter-spacing:1.4px;text-transform:uppercase;color:var(--aqua1);font-weight:700} .tv-kpi .v{font-family:var(--brand);font-size:clamp(28px,3.2vw,64px);font-weight:600;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums} .tv-kpi.alerta .v{color:#ffb4ab}.tv-kpi.festa .v{color:#F2C46D} .tv-kpi .s{font-size:clamp(11px,.85vw,16px);color:var(--aqua2);margin-top:2px} .tv-rank{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;flex:1;min-height:0;align-content:start;overflow:hidden} .tv-lin{display:grid;grid-template-columns:clamp(44px,3.4vw,64px) minmax(0,1fr) auto auto;align-items:center;gap:14px; background:rgba(255,255,255,.06);border-radius:14px;padding:9px 16px} .tv-lin.espera{background:rgba(224,86,75,.12);border:1px solid rgba(224,86,75,.35)} .tv-ava{width:clamp(44px,3.4vw,64px);height:clamp(44px,3.4vw,64px);border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center; font-family:var(--brand);font-size:clamp(17px,1.4vw,26px);color:#fff} .tv-lin .nm{font-size:clamp(15px,1.25vw,24px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tv-lin .sb{font-size:clamp(11px,.85vw,16px);color:var(--aqua2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tv-lin .vv{font-family:var(--brand);font-size:clamp(22px,2vw,40px);font-weight:600;font-variant-numeric:tabular-nums;text-align:right;line-height:1;min-width:2.2em} .tv-lin .vv small{display:block;font-family:inherit;font-size:clamp(10px,.7vw,13px);font-weight:600;color:var(--aqua2);letter-spacing:.6px;text-transform:uppercase} .tv-lin .vv{color:rgba(184,214,220,.55)}.tv-lin .vv.esp{color:#ffb4ab}.tv-lin .vv.ace{color:#F2C46D} .tv-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-content:start} .tv-num{background:rgba(255,255,255,.07);border:1px solid rgba(152,194,204,.22);border-radius:18px;padding:16px 20px} .tv-num.ok{border-color:rgba(61,220,132,.45)}.tv-num.bad{border-color:rgba(224,86,75,.6);background:rgba(224,86,75,.12)}.tv-num.warn{border-color:rgba(217,164,65,.6)} .tv-num .r{font-size:clamp(14px,1.1vw,22px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tv-num .st{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:clamp(13px,1vw,19px);color:var(--aqua2)} .tv-num .st i{width:12px;height:12px;border-radius:50%;background:var(--muted)} .tv-num.ok .st i{background:#3ddc84}.tv-num.bad .st i{background:#E0564B}.tv-num.warn .st i{background:#D9A441} .tv-num .trilho{height:10px;border-radius:999px;background:rgba(255,255,255,.12);margin-top:12px;overflow:hidden} .tv-num .trilho i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#1E8C99,#98C2CC)} .tv-num .q{font-size:clamp(11px,.85vw,16px);color:var(--aqua2);margin-top:6px} .tv-vazio{font-size:clamp(14px,1.2vw,22px);color:var(--aqua2);padding:20px 0} .tv-rodape{display:flex;align-items:center;gap:16px;padding:12px 36px 18px} .tv-dots{display:flex;gap:8px;flex-shrink:0} .tv-dots button{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#d6e8ec; border-radius:999px;padding:6px 14px;font-weight:700;font-size:clamp(11px,.8vw,15px);cursor:pointer} .tv-dots button.on{background:rgba(152,194,204,.22);color:#fff} .tv-dots button.on::after{content:'';position:absolute;left:0;bottom:0;height:3px;background:#F2C46D;animation:tvTempo var(--tvseg,30s) linear forwards} @keyframes tvTempo{from{width:0}to{width:100%}} .tv-ticker{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:clamp(13px,1vw,19px);color:#e7f1f3; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)} .tv-ticker span{display:inline-block;padding-left:100%;animation:tvLetreiro var(--tdur,45s) linear infinite} .tv-ticker b{color:#F2C46D} @keyframes tvLetreiro{to{transform:translateX(-100%)}} .tv-festa{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.92);z-index:6;opacity:0;pointer-events:none; background:linear-gradient(135deg,#F2C46D,#D9A441);color:#0A3C47;border-radius:26px;padding:26px 48px;text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.45);transition:opacity .35s,transform .35s} .tv-festa.on{opacity:1;transform:translate(-50%,-50%) scale(1)} .tv-festa .k{font-size:clamp(13px,1vw,20px);font-weight:800;letter-spacing:2px;text-transform:uppercase} .tv-festa .t{font-family:var(--brand);font-size:clamp(34px,3.6vw,72px);font-weight:600;line-height:1.1;margin-top:6px} .tv-conf{position:absolute;top:-4vh;width:10px;height:16px;border-radius:2px;z-index:5; animation:tvCai var(--dur,5s) linear var(--atraso,0s) forwards} @keyframes tvCai{from{transform:translateY(0) rotate(0)}to{transform:translateY(112vh) rotate(var(--giro,540deg))}} @media (prefers-reduced-motion:reduce){.tv-ticker span{animation:none;padding-left:0}.tv-vivo i{animation:none}.tv-conf{animation:none;top:var(--y,10vh)}} @media (max-width:900px){.tv-kpis,.tv-nums{grid-template-columns:repeat(2,minmax(0,1fr))}.tv-rank{grid-template-columns:minmax(0,1fr)} .tv-top,.tv-rodape{padding-left:16px;padding-right:16px}.tv-slide{inset:4px 16px 0}.tv-titulo{display:none}} /* ============ MEDIDORES nos cartoes de Numeros e proxy (24-10-2026, so MASTER) ============ Layout copiado do Monitor de Servidores do CRM Talkline (D:\SERVIDOR\templates\monitor.html, so lido): palco petroleo, anel com o % e o status no vao, marcas de 70/85% (amarelo/vermelho), analise embaixo e placas escuras. Semaforo = so para status; o resto e a paleta oficial. Tudo sob .mcard. */ .mcard{--tk-t1:#0A3C47;--tk-t2:#134E5B;--tk-t3:#1B606E;--tk-t4:#247780;--tk-a3:#1E8C99; --tk-l1:#98C2CC;--tk-l2:#B8D6DC;--tk-l3:#CFE3E7;--tk-l4:#E6F0F2; --m-ok:#22C55E;--m-warn:#FACC15;--m-crit:#EF4444;--m-ok-s:#4ADE80;--m-warn-s:#FDE047;--m-crit-s:#FCA5A5; --f-disp:"Space Grotesk","Plus Jakarta Sans","Inter",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; color:#fff;border-color:color-mix(in srgb,var(--st) 55%,rgba(152,194,204,.25)); background:radial-gradient(620px 300px at 100% -18%,rgba(36,119,128,.55),transparent 68%), radial-gradient(560px 320px at -12% 118%,rgba(10,60,71,.9),transparent 62%), linear-gradient(135deg,#0A3C47 0%,#134E5B 52%,#1B606E 100%); box-shadow:0 0 0 1px rgba(152,194,204,.14),0 0 0 4px color-mix(in srgb,var(--st) 12%,transparent), 0 22px 48px -24px rgba(10,60,71,.8),0 0 26px -8px var(--st-glow)} :root[data-theme="dark"] .mcard{box-shadow:0 0 0 1px rgba(152,194,204,.14),0 0 0 4px color-mix(in srgb,var(--st) 12%,transparent), 0 22px 48px -24px rgba(0,0,0,.7),0 0 26px -8px var(--st-glow)} .mcard::before{background:radial-gradient(520px 140px at 100% 0,var(--st-bg),transparent 65%)} .mcard::after{content:'';position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(152,194,204,.6),transparent)} .mcard.ok{--st:#22C55E;--st-bg:rgba(34,197,94,.16);--st-glow:rgba(34,197,94,.35)} .mcard.bad{--st:#EF4444;--st-bg:rgba(239,68,68,.16);--st-glow:rgba(239,68,68,.38)} .mcard.warn{--st:#FACC15;--st-bg:rgba(250,204,21,.14);--st-glow:rgba(250,204,21,.32)} .mcard .nc-nome{color:#fff;font-family:var(--f-disp);font-size:16px;letter-spacing:-.01em} .mcard .nc-escudo{color:#fff;border:0;background:linear-gradient(135deg,var(--tk-a3),var(--tk-t4)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px rgba(30,140,153,.5)} .mcard.bad .nc-escudo{background:linear-gradient(135deg,#303435,#3E3E3E);box-shadow:none} .mcard .nc-inst{font-family:var(--f-mono);font-weight:600;color:var(--tk-l4);background:rgba(255,255,255,.08);border-color:rgba(152,194,204,.3)} .mcard .nc-tab{font-family:var(--f-mono);letter-spacing:.1em;color:color-mix(in srgb,var(--st) 55%,#fff);text-shadow:0 0 12px var(--st-glow); background:linear-gradient(90deg,rgba(255,255,255,.03),color-mix(in srgb,var(--st) 22%,transparent))} /* medidores (cartao de instrumento, igual ao do Monitor) */ .mc-gg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;transition:opacity .3s,filter .3s} .mcard.bad .mc-gg{opacity:.62;filter:saturate(.4)} .mcard .gg{display:flex;flex-direction:column;align-items:center;min-width:0;margin:0;padding:12px 13px 11px;text-align:center;border-radius:16px; border:1px solid rgba(152,194,204,.16);background:linear-gradient(180deg,rgba(10,60,71,.78),rgba(10,60,71,.56));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .mcard .gg-h{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0} .mcard .gg-l{min-width:0;font:600 10.5px/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tk-l1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard .gg-tag{flex:none;padding:2px 7px;border-radius:999px;background:var(--tk-l1);color:var(--tk-t1);font:700 9px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase} .mcard .gg-ring{position:relative;container-type:inline-size;width:100%;max-width:170px;margin:6px auto 0} .mcard .gg-ring svg{display:block;width:100%;height:auto;overflow:visible} .mcard .g-zone{fill:none;stroke:var(--m-warn);stroke-width:2.6;opacity:.95} .mcard .g-zone-c{stroke:var(--m-crit)} .mcard .g-track{fill:none;stroke:rgba(255,255,255,.1);stroke-width:9;stroke-linecap:round} .mcard .g-arc{fill:none;stroke:var(--m-ok);stroke-width:9;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(34,197,94,.55)); transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1),stroke .4s} .mcard .gg.warn .g-arc{stroke:var(--m-warn);filter:drop-shadow(0 0 6px rgba(250,204,21,.55))} .mcard .gg.crit .g-arc{stroke:var(--m-crit);filter:drop-shadow(0 0 7px rgba(239,68,68,.65))} .mcard .g-center{position:absolute;left:12%;right:12%;top:56.6%;transform:translateY(-50%);text-align:center;line-height:1} .mcard .g-num{display:flex;justify-content:center;align-items:flex-start;gap:2px;color:#fff} .mcard .g-v{font:700 30px/1 var(--f-disp);font-size:clamp(19px,23cqi,46px);letter-spacing:-.045em} .mcard .g-u{font:600 13px/1 var(--f-disp);font-size:clamp(9px,9.5cqi,20px);color:var(--tk-l1);margin-top:.18em} .mcard .g-cap{margin-top:6px;font-size:clamp(9px,7.6cqi,13px);font-weight:500;color:var(--tk-l3)} .mcard .g-st{position:absolute;left:18%;right:18%;bottom:0;text-align:center;font:700 11px/1.2 var(--f-mono);font-size:clamp(9px,7.8cqi,13px); letter-spacing:.1em;text-transform:uppercase;color:var(--m-ok-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard .gg.warn .g-st{color:var(--m-warn-s)}.mcard .gg.crit .g-st{color:var(--m-crit-s)} .mcard .gg-abs{margin:8px 0 0;font:500 12.5px/1.35 'Inter',system-ui,sans-serif;color:var(--tk-l3)} .mcard .gg-a1{font:700 16px/1.2 var(--f-disp);letter-spacing:-.02em;color:#fff} .mcard .gg-ctx{align-self:stretch;margin:auto 0 0;padding-top:9px;font:500 11px/1.5 var(--f-mono);color:var(--tk-l2)} .mcard .gg-ctx::before{content:"";display:block;height:1px;margin-bottom:8px;background:linear-gradient(90deg,transparent,rgba(152,194,204,.3),transparent)} .mcard .gg-ctx span{display:block;font-family:var(--f-mono)} /* .ncard * poe Inter direto em cada span */ .mcard .gg-ctx .c3{color:#fff} /* placas (como "nucleo mais carregado / rede agora" do Monitor) */ .mc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0 0} .mcard .sf{min-width:0;margin:0;padding:11px 14px 10px;border-radius:14px;border:1px solid rgba(152,194,204,.16); background:linear-gradient(180deg,rgba(10,60,71,.7),rgba(10,60,71,.5));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .mcard .sf dt{font:500 10px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tk-l1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard .sf dd{min-width:0;margin:6px 0 0} .mcard .sf-v{display:block;font:600 18px/1.2 var(--f-disp);letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard .sf-v.warn{color:var(--m-warn-s)}.mcard .sf-v.crit{color:var(--m-crit-s)} .mcard .sf-v small{font:500 11.5px 'Inter',system-ui,sans-serif;color:var(--tk-l3);margin:0 2px} .mcard .sf-s{display:block;margin-top:3px;font-size:11.5px;color:var(--tk-l3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mcard .sf-s.org{color:var(--tk-l1);font-size:10.5px} .mcard .sf-cores{display:flex;align-items:flex-end;gap:2px;height:20px;margin-top:8px} .mcard .sf-cores i{flex:1 1 0;min-width:1px;height:6%;border-radius:2px 2px 0 0;background:var(--m-ok);transition:height .6s cubic-bezier(.2,.8,.2,1)} .mcard .sf-cores i.fut{background:rgba(255,255,255,.12)} .mcard .sf-cores i.agora{background:#86EFAC;box-shadow:0 0 6px rgba(34,197,94,.8)} /* lista de dados e botoes sobre o palco escuro */ .mcard .nc-corpo{margin-top:10px;border-color:rgba(152,194,204,.16);background:rgba(10,60,71,.42);box-shadow:none} .mcard .nc-linha{border-bottom-color:rgba(152,194,204,.12)} .mcard .nc-linha .ic,.mcard .nc-linha .rot{color:var(--tk-l1)} .mcard .nc-linha .val{color:#fff} .mcard .nc-sub{color:var(--tk-l2)} .mcard .nc-copiar{color:var(--tk-l1)}.mcard .nc-copiar:hover{color:#fff} .mcard .nc-acoes button{color:var(--tk-l4);border-color:rgba(152,194,204,.28);background:rgba(255,255,255,.08);box-shadow:none} .mcard .nc-acoes button:hover{background:rgba(255,255,255,.16);border-color:rgba(152,194,204,.5)} .mcard .nc-acoes .conectar{color:#fff;border-color:#15803d;background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 6px 16px -8px rgba(22,163,74,.8)} .mcard .nc-acoes .desligar{color:#fff;border-color:#b91c1c;background:linear-gradient(180deg,#ef4444,#dc2626);box-shadow:0 6px 16px -8px rgba(220,38,38,.8)} .mcard button:focus-visible{outline:2px solid var(--tk-l1);outline-offset:2px} /* legenda do semaforo (uma vez, embaixo dos cartoes) */ .mc-legenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 2px 0;font-size:12px;color:var(--muted)} .mc-legenda span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .mc-legenda span:last-child{white-space:normal} .mc-legenda i{width:10px;height:10px;border-radius:50%;background:#22C55E} .mc-legenda i.w{background:#FACC15}.mc-legenda i.c{background:#EF4444} @media (max-width:560px){.mc-gg{gap:8px}.mcard .gg{padding:10px 8px 9px}.mcard .gg-tag{display:none}.mc-facts{grid-template-columns:minmax(0,1fr)}} @media (prefers-reduced-motion:reduce){.mcard .g-arc,.mcard .sf-cores i{transition:none}} /* ============ ASSUMIR / PASSAR EM MASSA (24-10-2026) - so no filtro "Sem dono" ============ */ .massa{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:12.5px} .massa .mz-n{margin-right:auto;color:var(--accent-text)} .massa select.f{padding:4px 8px;font-size:12px;max-width:190px} .cv-sel{display:flex;align-items:center;padding:0 2px;cursor:pointer} .cv-sel input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer} /* ============ QUEM ESTA ONLINE (24-10-2026) - MASTER ve todos; supervisao/gerencia, consultores e BKO ============ */ .badge.verde{background:var(--ok);color:#fff} .on-barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px} .on-barra select.f{padding:5px 10px;font-size:12.5px;border-radius:20px} .grid.on-kpis{grid-template-columns:repeat(3,minmax(0,1fr))} .on-sit b{white-space:nowrap} @media (max-width:560px){.on-kpis .kpi{padding:10px 12px}.on-kpis .kpi .r{font-size:10px;letter-spacing:.3px} .on-tab th:nth-child(2),.on-tab td:nth-child(2){display:none}.on-tab td,.on-tab th{padding:8px 6px}} .on-sit{display:inline-flex;align-items:center;gap:6px} .on-sit .dot{width:10px;height:10px} .on-online .on-sit .dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)} .on-offline td{color:var(--muted)} .on-offline td b{font-weight:600} .on-tab td .tag{margin-left:4px;font-size:10.5px} .on-legenda{font-size:12px;margin-top:10px;line-height:1.8} .on-legenda .dot{vertical-align:middle;margin-left:4px} /* ============ DIVISA ARRASTAVEL LISTA | CONVERSA (24-10-2026) - todos os perfis (o JS esta no fim do atendimento.js) ============ --lista-w vem do arraste; o clamp segura a conversa com pelo menos 360 px se a janela diminuir depois. Fica DEPOIS das regras de .atd do celular la em cima, por isso repete as duas larguras (<=1100 e <=900) no fim. */ .atd{grid-template-columns:clamp(280px,var(--lista-w,340px),calc(100% - 660px)) minmax(0,1fr) 300px} .atd.sem-ficha{grid-template-columns:clamp(280px,var(--lista-w,340px),calc(100% - 360px)) minmax(0,1fr)} .lista{position:relative} .atd-div{position:absolute;top:0;bottom:0;right:-7px;width:12px;cursor:col-resize;z-index:6;touch-action:none;outline:none} .atd-div::before{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;background:transparent;transition:background .15s} .atd-div::after{content:"";position:absolute;top:50%;left:3px;width:6px;height:38px;margin-top:-19px;border-radius:6px; background:var(--aqua2);box-shadow:0 0 0 2px var(--surface);transition:background .15s,height .15s,margin .15s} .atd-div:hover::before,.atd-div:focus-visible::before,body.arrastando-div .atd-div::before{background:var(--accent)} .atd-div:hover::after,.atd-div:focus-visible::after,body.arrastando-div .atd-div::after{background:var(--accent);height:54px;margin-top:-27px} :root[data-theme="dark"] .atd-div::after{background:#2B5560} body.arrastando-div,body.arrastando-div *{cursor:col-resize!important;user-select:none!important} @media (max-width:1100px){.atd,.atd.sem-ficha{grid-template-columns:clamp(280px,var(--lista-w,300px),calc(100% - 360px)) minmax(0,1fr)}} @media (max-width:900px){.atd,.atd.sem-ficha{grid-template-columns:1fr}.atd-div{display:none}} /* ============ BOLINHA DE PRESENCA NO SELETOR DE CONSULTORES (24-10-2026) - supervisao/gerencia e MASTER ============ botao + lista no lugar do