:root{ --kb9:#0B2A4A;--kb8:#133b6b;--kb7:#1a4f8a;--kb6:#2563a8;--kb5:#2f7bc8;--kb4:#5a9bdb;--kb1:#e6f0fa;--kb0:#f3f8fd; --kg9:#1f2937;--kg7:#374151;--kg6:#4b5563;--kg5:#6b7280;--kg4:#9ca3af;--kg3:#d1d5db;--kg2:#e5e7eb;--kg1:#f3f4f6;--kg0:#f9fafb; --ok:#10b981;--warn:#f59e0b;--err:#ef4444; --sh0:0 1px 2px rgba(15,42,74,.06);--sh:0 4px 14px rgba(15,42,74,.08);--shl:0 12px 32px rgba(15,42,74,.14); --r:10px;--rl:14px; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:'Inter',system-ui,sans-serif;background:var(--kg0);color:var(--kg7);font-size:14px;line-height:1.5;min-height:100vh} h1,h2,h3,h4{color:var(--kg9);margin:0 0 .5em;font-weight:600} h1{font-size:1.6rem}h2{font-size:1.25rem}h3{font-size:1.05rem}h4{font-size:.92rem} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit} .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r);font-weight:600;font-size:.875rem;transition:all .15s;border:1px solid transparent} .btn-primary{background:var(--kb7);color:#fff}.btn-primary:hover{background:var(--kb8)} .btn-secondary{background:#fff;color:var(--kb7);border-color:var(--kg3)}.btn-secondary:hover{border-color:var(--kb5)} .btn-ghost{background:transparent;color:var(--kg6)}.btn-ghost:hover{color:var(--kb7);background:var(--kb0)} .btn-success{background:var(--ok);color:#fff}.btn-success:hover{background:#059669} .btn-danger{background:var(--err);color:#fff}.btn-danger:hover{background:#dc2626} .btn-sm{padding:6px 12px;font-size:.78rem}.btn-lg{padding:12px 24px;font-size:.95rem} .btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none} /* LAYOUT */ .app-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh} .sidebar{background:var(--kb9);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto} .sidebar-brand{padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0} .sidebar-brand img{height:30px;width:auto;filter:brightness(0) invert(1)} .sidebar-brand .tag{font-size:.7rem;color:rgba(255,255,255,.5);margin-top:6px} .sidebar-nav{padding:16px 12px;flex:1} a.nav-item{text-decoration:none} .nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:8px;color:rgba(255,255,255,.75);cursor:pointer;font-size:.875rem;margin-bottom:2px;transition:all .15s} .nav-item svg{width:18px;height:18px;flex-shrink:0;opacity:.8} .nav-item:hover{background:rgba(255,255,255,.06);color:#fff} .nav-item.active{background:var(--kb7);color:#fff}.nav-item.active svg{opacity:1} .nav-badge{margin-left:auto;background:var(--err);color:#fff;font-size:.66rem;font-weight:700;border-radius:999px;padding:2px 7px;line-height:1.2} .nav-badge.blue{background:var(--kb5)} .sidebar-footer{padding:16px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0} .user-chip{display:flex;align-items:center;gap:10px;padding:8px} .user-avatar{width:32px;height:32px;border-radius:50%;background:var(--kb5);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.75rem;flex-shrink:0} .user-name{color:#fff;font-weight:500;font-size:.82rem;line-height:1} .user-role{color:rgba(255,255,255,.5);font-size:.7rem;margin-top:2px} .powered{margin-top:10px;text-align:center;font-size:.66rem;color:rgba(255,255,255,.4);letter-spacing:.4px} .powered b{color:rgba(255,255,255,.65);font-weight:600} .main{background:var(--kg0);overflow-x:auto;display:flex;flex-direction:column} .topbar{background:#fff;border-bottom:1px solid var(--kg2);padding:14px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50} .topbar-left .breadcrumb{font-size:.78rem;color:var(--kg5);margin-bottom:2px} .topbar-left .breadcrumb span{color:var(--kb7);font-weight:500} .topbar-left h1{margin:0;font-size:1.1rem;font-weight:600} .topbar-actions{display:flex;gap:8px;align-items:center} .content{padding:28px 32px;flex:1} .page-footer{text-align:center;padding:14px;font-size:.7rem;color:var(--kg4)} .page-footer b{color:var(--kg5)} /* CARDS */ .card{background:#fff;border-radius:var(--rl);padding:20px;box-shadow:var(--sh0);border:1px solid var(--kg2)} .card+.card{margin-top:16px} .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--kg1)} .card-header h3{margin:0} .card-subtitle{font-size:.78rem;color:var(--kg5);margin-top:2px} /* BADGES */ .badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.7rem;font-weight:600} .bg{background:var(--kg1);color:var(--kg6)} .bok{background:#d1fae5;color:#065f46} .bwarn{background:#fef3c7;color:#92400e} .berr{background:#fee2e2;color:#991b1b} .bblue{background:var(--kb1);color:var(--kb8)} .bteal{background:#ccfbf1;color:#0f766e} /* TABLES */ .tw{overflow-x:auto} table.kt{width:100%;border-collapse:collapse;font-size:.84rem} table.kt th{text-align:left;padding:10px 12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--kg5);border-bottom:1px solid var(--kg2);background:var(--kg0);font-weight:600;white-space:nowrap} table.kt td{padding:10px 12px;border-bottom:1px solid var(--kg1);color:var(--kg7);vertical-align:middle} table.kt tr:hover td{background:var(--kb0)} /* FORMS */ .form-group{margin-bottom:16px} .form-group label{display:block;font-size:.8rem;font-weight:500;color:var(--kg7);margin-bottom:6px} /* 16px em TODO campo, em toda tela, sem media query. O iOS amplia a tela ao focar um campo com fonte MENOR que 16px, e não desfaz ao sair — dali em diante a interface fica deslocada. Já tentei resolver isto dentro de `@media (max-width:820px)` em 25/09 e não pegou: media query não soma especificidade, então bastava uma regra de classe definir .9rem para o campo continuar pequeno no celular. Regra que depende de eu lembrar de listar cada seletor novo é regra que quebra no próximo campo que alguém criar. O custo é texto de formulário um pouco maior no computador. É o lado certo da troca: o corretor atende do celular. */ input,select,textarea{font-size:16px} .form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 14px;border:1px solid var(--kg3);border-radius:var(--r);background:#fff;color:var(--kg9);font-family:inherit;font-size:16px;transition:border-color .15s} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--kb5);box-shadow:0 0 0 3px rgba(47,123,200,.15)} .form-group .hint{font-size:.74rem;color:var(--kg5);margin-top:4px} .fg{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fg .full{grid-column:1/-1} /* KPIs */ .kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px} .kc{background:#fff;border-radius:var(--rl);padding:16px 18px;border:1px solid var(--kg2);box-shadow:var(--sh0)} .ki{float:right;width:34px;height:34px;border-radius:8px;background:var(--kb0);display:flex;align-items:center;justify-content:center;color:var(--kb7)} .ki.red{background:#fee2e2;color:var(--err)}.ki.green{background:#d1fae5;color:#059669}.ki.amber{background:#fef3c7;color:#b45309} .kl{font-size:.7rem;color:var(--kg5);text-transform:uppercase;letter-spacing:.5px;font-weight:500} .kv{font-size:1.65rem;font-weight:700;color:var(--kg9);margin-top:4px;line-height:1} .kd{font-size:.72rem;color:var(--kg5);margin-top:5px} /* STORY */ .story{background:linear-gradient(135deg,var(--kb0),#fff);border-left:3px solid var(--kb5);padding:12px 16px;border-radius:8px;margin-bottom:18px;font-size:.87rem;color:var(--kg7)} .story strong{color:var(--kb8)} /* ===== QUEUE CARDS ===== */ .qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px} .qcard{background:#fff;border-radius:var(--rl);border:1px solid var(--kg2);box-shadow:var(--sh0);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s;position:relative} /* O X que encerra o atendimento direto da fila. Canto superior direito, acima das tarjas de urgente/SLA (z-index) — é lá que a mão procura, e é a única ação do card que TIRA o lead da tela. 32px de alvo: dedo, não ponteiro. */ .qclose{position:absolute;top:6px;right:6px;z-index:3;width:32px;height:32px; border-radius:8px;display:flex;align-items:center;justify-content:center; font-size:15px;line-height:1;color:var(--kg5);background:rgba(255,255,255,.75); border:1px solid transparent;cursor:pointer;transition:all .15s} .qclose:hover{color:var(--err);border-color:var(--kg3);background:#fff} .qcard .enc{padding:0 14px 12px} .qcard:hover{box-shadow:var(--sh)} .qcard.warn{border-color:#fcd34d} .qcard.late{border-color:#fca5a5;background:#fffafa} /* O canto superior direito é do X que encerra o atendimento. Sem reservar espaço no padding, ele cai em cima do anel do cronômetro nos cards SEM tarja de urgente/SLA — medido em 375px: 17x13px de sobreposição, bem no arco. A reserva vai NO shorthand, e não numa regra depois: `padding` curto declarado adiante apagaria um `padding-right` isolado, que foi como a fileira de botões do encerramento já ficou sem efeito uma vez. */ .qtop{display:flex;align-items:center;gap:12px;padding:14px 34px 14px 16px;border-bottom:1px solid var(--kg1)} .qavatar{width:40px;height:40px;border-radius:50%;background:var(--kb1);color:var(--kb8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex-shrink:0} .qcard.late .qavatar{background:#fee2e2;color:#991b1b} .qname{font-weight:600;font-size:.92rem;color:var(--kg9);line-height:1.2} .qsub{font-size:.72rem;color:var(--kg5);margin-top:2px} .qphone{font-size:.78rem;color:var(--kb7);font-weight:600;margin-top:2px} .qtimer{margin-left:auto;text-align:center;flex-shrink:0} .tring{position:relative;width:64px;height:64px} .tring svg{transform:rotate(-90deg)} .tring .tbg{fill:none;stroke:var(--kg1);stroke-width:5} .tring .tfg{fill:none;stroke:var(--kb5);stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s} .tring.w .tfg{stroke:var(--warn)} .tring.l .tfg{stroke:var(--err)} .tval{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-variant-numeric:tabular-nums} .tval .tt{font-size:.86rem;font-weight:700;color:var(--kg9);line-height:1} .tring.l .tval .tt{color:var(--err)} .tval .tl{font-size:.55rem;color:var(--kg5);text-transform:uppercase;letter-spacing:.4px;margin-top:2px} .qbody{padding:12px 16px;flex:1} .qrow{display:flex;gap:8px;font-size:.8rem;margin-bottom:8px;align-items:flex-start} .qrow svg{width:14px;height:14px;flex-shrink:0;color:var(--kb5);margin-top:2px} .qrow .qk{color:var(--kg5);font-weight:500;white-space:nowrap} .qrow .qv{color:var(--kg8,#374151)} .qtags{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px} .qduv{background:var(--kb0);border:1px solid var(--kb1);border-radius:8px;padding:8px 10px;margin-top:8px} .qduv .qdt{font-size:.66rem;font-weight:700;color:var(--kb8);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:flex;align-items:center;gap:5px} .qduv ul{margin:0;padding-left:16px;font-size:.78rem;color:var(--kg7)} .qduv li{margin-bottom:2px} /* Grade, e nao flex: com flex os botoes tinham `flex:1` e mesmo assim saiam de tamanhos diferentes, porque item de flex nao encolhe abaixo da propria maior palavra (min-width:auto). "WhatsApp" e uma palavra so de oito letras, "completa" e menor — no celular a soma dos minimos passava da largura, o flex-grow deixava de valer e cada botao ficava do tamanho do seu texto. `minmax(0,1fr)` remove esse piso e as colunas ficam iguais de verdade. */ .qfoot{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; padding:12px 16px;border-top:1px solid var(--kg1);background:var(--kg0)} .qfoot .btn{justify-content:center;text-align:center;min-width:0;padding-left:8px;padding-right:8px} .qfoot .btn svg{flex-shrink:0} .qcard.late .qfoot{background:#fef2f2} /* No celular, quatro botoes lado a lado nao cabem sem quebrar o rotulo em tres linhas. Dois por linha fecha a grade exatamente — quatro acoes, 2x2, sem sobra. A principal continua inconfundivel pela cor, nao pelo tamanho. */ @media (max-width:820px){ .qfoot{grid-template-columns:repeat(2,minmax(0,1fr))} } .esc-banner{display:flex;align-items:center;gap:8px;background:#fee2e2;color:#991b1b;font-size:.74rem;font-weight:600;padding:7px 16px} .esc-banner svg{width:14px;height:14px;flex-shrink:0} .pulse{animation:pulse 1.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}} /* CHAT (triagem WhatsApp) */ .chatbox{background:#efeae2;border-radius:var(--r);padding:14px;max-height:340px;overflow-y:auto;overflow-x:hidden} /* `overflow-wrap:anywhere` porque o que vaza aqui não é frase, é URL e protocolo: link de PDF de cotação, hash, id de conversa — palavra única de 120 caracteres que o navegador não quebra sozinho. Sem isto a bolha mantém os 78% e o TEXTO escapa dela, empurrando a rolagem horizontal da página inteira; no celular o cliente lê metade de cada mensagem (visto em 18/09/2026, tela de Mensagens no iPhone). */ /* `pre-wrap` porque a mensagem PODE ter quebra de linha desde 14/10/2026, e HTML colapsa quebra por padrão. Sem isto o corretor mandaria uma lista, o cliente receberia a lista, e o histórico aqui mostraria um parágrafo corrido — a tela desmentindo o que de fato saiu. */ .msg{max-width:78%;padding:8px 12px;border-radius:10px;font-size:.8rem;margin-bottom:8px;box-shadow:0 1px 1px rgba(0,0,0,.06);line-height:1.45;overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap} /* Os filhos voltam ao normal: quem é bloco já quebra sozinho, e herdar pre-wrap aqui faz a indentação do HTML virar espaço em branco na tela. */ .msg .mwho,.msg .mtime{white-space:normal} .msg .mwho{font-size:.64rem;font-weight:700;margin-bottom:2px} .msg .mtime{font-size:.6rem;color:var(--kg5);text-align:right;margin-top:3px} .msg.in{background:#fff;border-top-left-radius:2px} .msg.in .mwho{color:#0f766e} .msg.out{background:#d9fdd3;margin-left:auto;border-top-right-radius:2px} .msg.out .mwho{color:var(--kb7)} /* CALL BAR */ .callbar{display:flex;align-items:center;gap:14px;background:var(--kb9);color:#fff;border-radius:var(--rl);padding:16px 20px;margin-bottom:16px} .callbar .cavatar{width:44px;height:44px;border-radius:50%;background:var(--kb5);display:flex;align-items:center;justify-content:center;font-weight:700} .callbar .cname{font-weight:600;font-size:.95rem} .callbar .cst{font-size:.74rem;color:rgba(255,255,255,.6)} .callbar .ctime{margin-left:auto;font-variant-numeric:tabular-nums;font-size:1.2rem;font-weight:700} .recdot{width:9px;height:9px;border-radius:50%;background:var(--err);display:inline-block;margin-right:5px;animation:pulse 1.2s infinite} /* AI TRANSCRIPT BLOCKS */ .ai-head{display:flex;align-items:center;gap:10px;margin-bottom:14px} .ai-chip{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--kb7),var(--kb5));color:#fff;font-size:.7rem;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.3px} .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .tblock{border:1px solid var(--kg2);border-radius:var(--r);padding:14px 16px;background:#fff} .tblock.full{grid-column:1/-1} .tblock .tbt{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--kb8);margin-bottom:8px} .tblock .tbt svg{width:15px;height:15px;color:var(--kb5)} .tblock p{margin:0;font-size:.84rem;color:var(--kg7)} .tblock ul{margin:0;padding-left:18px;font-size:.84rem;color:var(--kg7)} .tblock li{margin-bottom:4px} .tblock.pos{background:#f0fdf4;border-color:#bbf7d0}.tblock.pos .tbt{color:#065f46}.tblock.pos .tbt svg{color:var(--ok)} .tblock.neg{background:#fef2f2;border-color:#fecaca}.tblock.neg .tbt{color:#991b1b}.tblock.neg .tbt svg{color:var(--err)} /* AUDIO PLAYER MOCK */ .player{display:flex;align-items:center;gap:12px;background:var(--kb0);border:1px solid var(--kb1);border-radius:var(--r);padding:12px 16px} .pbtn{width:38px;height:38px;border-radius:50%;background:var(--kb7);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s} .pbtn:hover{background:var(--kb8)} .ptrack{flex:1;height:5px;background:var(--kg2);border-radius:3px;position:relative;cursor:pointer} .pfill{position:absolute;left:0;top:0;height:100%;background:var(--kb5);border-radius:3px;width:0%} .ptime{font-size:.74rem;color:var(--kg5);font-variant-numeric:tabular-nums;white-space:nowrap} /* CLASSIFICATION */ .class-chips{display:flex;gap:8px;flex-wrap:wrap} .cchip{padding:9px 16px;border:2px solid var(--kg2);border-radius:var(--r);cursor:pointer;font-size:.82rem;font-weight:600;color:var(--kg6);background:#fff;transition:all .15s;display:flex;align-items:center;gap:7px} .cchip:hover{border-color:var(--kb4)} .cchip.sel{border-color:var(--kb7);background:var(--kb0);color:var(--kb8)} .cchip .cdot{width:9px;height:9px;border-radius:50%} .stars{display:flex;gap:4px} .star{font-size:1.5rem;color:var(--kg3);cursor:pointer;transition:color .12s;background:none;border:none;padding:2px} .star.on{color:var(--warn)} /* UPLOADER */ .uploader{border:2px dashed var(--kg3);border-radius:var(--rl);padding:22px;text-align:center;background:var(--kb0);cursor:pointer;transition:border-color .15s} .uploader:hover{border-color:var(--kb5);background:var(--kb1)} .uploader p{margin:2px 0;color:var(--kg6);font-size:.84rem} .up-s{color:var(--kb7);font-weight:600} .fpill{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;background:#fff;border:1px solid var(--kg2);border-radius:8px;font-size:.8rem;margin:8px 6px 0 0} .fpill button{color:var(--kg4);font-weight:700}.fpill button:hover{color:var(--err)} /* SLA BAR (supervisor) */ .slab{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--kg1)} .slab:last-child{border-bottom:none} .slabn{width:130px;font-size:.8rem;font-weight:600;color:var(--kg9);flex-shrink:0;display:flex;align-items:center;gap:8px} .slava{width:26px;height:26px;border-radius:50%;background:var(--kb1);color:var(--kb8);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.62rem;flex-shrink:0} .slabbg{flex:1;background:var(--kg1);border-radius:4px;height:8px;overflow:hidden} .slabfill{height:100%;border-radius:4px;background:var(--ok);transition:width .4s} .slabv{width:44px;text-align:right;font-size:.78rem;font-weight:700;color:var(--kg7)} /* MODAL */ .mback{position:fixed;inset:0;background:rgba(11,42,74,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px} .mback.show{display:flex} .modal{background:#fff;border-radius:var(--rl);width:100%;max-width:760px;max-height:90vh;overflow-y:auto;box-shadow:var(--shl)} .mhead{padding:18px 22px;border-bottom:1px solid var(--kg2);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;z-index:5} .mhead h3{margin:0} .mbody{padding:22px} .mfoot{padding:14px 22px;border-top:1px solid var(--kg2);display:flex;gap:10px;justify-content:flex-end} /* LOADING / TOAST */ .loading{position:fixed;inset:0;background:rgba(11,42,74,.6);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:2000} .loading.show{display:flex} .spin{width:42px;height:42px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .lmsg{color:#fff;font-weight:500;font-size:.92rem} #toast{position:fixed;top:20px;right:20px;background:var(--kg9);color:#fff;padding:11px 16px;border-radius:var(--r);box-shadow:var(--shl);font-size:.84rem;z-index:9999;transform:translateY(-16px);opacity:0;transition:all .22s;pointer-events:none;max-width:320px} #toast.show{transform:translateY(0);opacity:1} #toast.ok{background:var(--ok)}#toast.err{background:var(--err)} .view{display:none}.view.active{display:flex;flex-direction:column;min-height:100vh} /* STATUS DO VENDEDOR */ .stsel{appearance:none;-webkit-appearance:none;padding:7px 28px 7px 12px;border-radius:999px;font-size:.76rem;font-weight:700;border:1px solid transparent;cursor:pointer;font-family:inherit;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 10px center} .stsel:focus{outline:none;box-shadow:0 0 0 3px rgba(47,123,200,.18)} .st-disp{background-color:#d1fae5;color:#065f46} .st-atend{background-color:#fef3c7;color:#92400e} .st-pausa{background-color:var(--kg1);color:var(--kg6)} .st-inv{background-color:#e5e7eb;color:#6b7280;border:1px dashed var(--kg4)} /* FILTER ROW */ .fr{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;background:#fff;border:1px solid var(--kg2);border-radius:var(--r);margin-bottom:14px;align-items:center} .fr label{font-size:.78rem;color:var(--kg6);font-weight:500;white-space:nowrap} .fr select,.fr input[type=date]{padding:6px 10px;border:1px solid var(--kg3);border-radius:7px;font-size:16px;background:#fff;font-family:inherit;color:var(--kg9)} .fr select:focus,.fr input[type=date]:focus{outline:none;border-color:var(--kb5)} .fsep{width:1px;background:var(--kg2);height:24px;flex-shrink:0} .qbtn{padding:6px 13px;border:1px solid var(--kg3);border-radius:999px;font-size:.76rem;font-weight:600;background:#fff;color:var(--kg6);cursor:pointer;transition:all .12s} .qbtn:hover{border-color:var(--kb5);color:var(--kb7)} .qbtn.act{background:var(--kb7);border-color:var(--kb7);color:#fff} /* PAGINATION */ .pgn{display:flex;align-items:center;justify-content:space-between;padding:12px 0 0;margin-top:6px;border-top:1px solid var(--kg1);flex-wrap:wrap;gap:8px} .pgi{font-size:.78rem;color:var(--kg5)} .pgb{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .pb{padding:5px 10px;border:1px solid var(--kg3);background:#fff;border-radius:6px;font-size:.78rem;cursor:pointer;font-family:inherit;color:var(--kg7);transition:all .12s} .pb:hover{border-color:var(--kb5);color:var(--kb7)} .pb.act{background:var(--kb7);border-color:var(--kb7);color:#fff} .pb:disabled{opacity:.4;cursor:not-allowed} /* MARCAÇÕES */ .nota-item{border-left:3px solid var(--kb4);background:var(--kb0);border-radius:0 8px 8px 0;padding:10px 12px;margin-bottom:8px;font-size:.82rem;color:var(--kg7)} .nota-meta{font-size:.68rem;color:var(--kg5);margin-bottom:3px;font-weight:600} /* CHART */ .cw{position:relative;height:230px} /* CRM (kanban) */ .crm-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;align-items:flex-start} .crm-col{flex:0 0 260px;background:var(--kg0);border:1px solid var(--kg2);border-radius:var(--rl);display:flex;flex-direction:column;max-height:calc(100vh - 260px)} .crm-col.dragover{border-color:var(--kb5);background:var(--kb0)} .crm-col-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:700;font-size:.86rem;color:var(--kg7);border-bottom:1px solid var(--kg2)} .crm-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto} .crm-card{background:#fff;border:1px solid var(--kg2);border-left:4px solid var(--kg3);border-radius:10px;padding:10px 12px;box-shadow:var(--sh0);cursor:grab} .crm-card[draggable="false"]{cursor:default;opacity:.85} .crm-card.dragging{opacity:.4} /* Mesma paleta de RES_MAP/.badge (bok/bwarn/berr/bblue) — acento de cor por etapa, igual ao padrão já usado em .qcard.late/.warn na fila. */ .crm-card.neg{border-left-color:var(--kb5);background:var(--kb0)} .crm-card.follow{border-left-color:#f59e0b;background:#fffbeb} .crm-card.ganha{border-left-color:#10b981;background:#f0fdf9} .crm-card.perdida{border-left-color:#ef4444;background:#fff5f5} .crm-card.rascunho{border-left-color:#8b5cf6;background:#faf5ff} .crm-card.entrevista{border-left-color:#0ea5e9;background:#f0f9ff} .crm-canal{font-size:.68rem;color:var(--kg5);white-space:nowrap} .crm-canal.voz{color:#7c3aed} .crm-card-name{font-weight:600;font-size:.86rem;color:var(--kg9)} .crm-card-sub{font-size:.74rem;color:var(--kg5)} .crm-card-proc{font-size:.78rem;color:var(--kg6);margin-top:4px} .crm-card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.72rem;color:var(--kg5)} .crm-empty{font-size:.78rem;color:var(--kg4);text-align:center;padding:16px 0} /* DASHBOARD */ .dash-row2{display:grid;grid-template-columns:1.1fr 1fr;gap:16px} .dash-chart-wrap{position:relative;height:220px} .dash-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:.72rem;color:var(--kg5)} .dash-legend span{display:flex;align-items:center;gap:5px} .dash-dot{width:8px;height:8px;border-radius:50%;display:inline-block} /* Barras do funil reaproveitam a mesma paleta de estágio do CRM (.crm-card.*) */ .funnel-fill{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;transition:width .3s} .funnel-fill span{font-size:.7rem;font-weight:700;color:#fff} .funnel-fill.novo{background:var(--kg4)} .funnel-fill.neg{background:var(--kb5)} .funnel-fill.follow{background:#f59e0b} .funnel-fill.ganha{background:#10b981} .funnel-fill.perdida{background:#ef4444} /* Códigos do catálogo `funnel_stages`, que é o que o funil usa desde 28/09/2026. Os cinco de cima são do modelo antigo (resultado de ligação) e ficam: a VINNK ainda cai neles. Etapa sem cor aqui herda o cinza do `.funnel-fill`, então uma coluna nova no catálogo aparece — apagada, mas aparece. Sumir seria pior que ficar sem cor. */ .funnel-fill{background:var(--kg4)} .funnel-fill.novo_lead{background:var(--kg4)} .funnel-fill.qualificacao{background:var(--kb4)} .funnel-fill.negociacao{background:var(--kb5)} .funnel-fill.backoffice{background:#f59e0b} .funnel-fill.fechamento{background:#10b981} .funnel-fill.perdido{background:#ef4444} /* Switch on/off — usado no toggle de IA em Configurações */ .switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0} .switch input{opacity:0;width:0;height:0} .switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--kg3);transition:.2s;border-radius:999px} .switch-slider::before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.2s;border-radius:50%} .switch input:checked+.switch-slider{background:var(--kb5)} .switch input:checked+.switch-slider::before{transform:translateX(20px)} /* HAMBURGER / MOBILE */ .hamburger{display:none;padding:8px;cursor:pointer;color:var(--kg7);background:none;border:none;align-items:center} .hamburger svg{width:22px;height:22px} .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:98} .sidebar-overlay.show{display:block} .dash-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .dash-row-grid .card{min-width:0} @media(max-width:900px){ body{overflow-x:hidden} .app-layout{display:block} .sidebar{position:fixed;left:-260px;top:0;height:100vh;width:240px;z-index:999;transition:left .3s ease;overflow-y:auto} .sidebar.mob-open{left:0;box-shadow:0 0 40px rgba(0,0,0,.45)} .hamburger{display:flex!important} .main{width:100%;min-height:100vh} .topbar{padding:10px 16px;gap:8px} .content{padding:14px 16px} .kgrid{grid-template-columns:1fr 1fr} .kv{font-size:1.3rem} .qgrid{grid-template-columns:1fr} .tgrid{grid-template-columns:1fr} .fg{grid-template-columns:1fr} .fg .full{grid-column:1} .dash-row-grid{grid-template-columns:1fr} .dash-row2{grid-template-columns:1fr} table.kt{font-size:.76rem} table.kt th,table.kt td{padding:7px 8px} } @media(max-width:480px){.kgrid{grid-template-columns:1fr}.topbar h1{font-size:.95rem}} /* ── Log de API ─────────────────────────────────────── */ .log-erro{background:#fff5f5} .log-erro td{color:#991b1b} .log-hora{font-size:.7rem;color:var(--kg5)} .log-rota{font-family:ui-monospace,Menlo,monospace;font-size:.75rem;word-break:break-all} .log-resumo{font-size:.78rem;color:var(--kg5);max-width:260px} .log-det td{background:var(--kg1);padding:0} .log-json{padding:8px 12px} .log-json b{font-size:.7rem;text-transform:uppercase;color:var(--kg5);letter-spacing:.04em} /* pre com rolagem própria: payload de lote é largo, e sem isso ele empurra a tabela inteira pra fora da tela */ .log-json pre{margin:4px 0 0;font-size:.72rem;max-height:220px;overflow:auto; background:#fff;border:1px solid var(--kg3);border-radius:6px;padding:8px} .filtros{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px} .chk{display:flex;align-items:center;gap:6px;font-size:.82rem} /* ── Arquivados ─────────────────────────────────────── */ .arq-resumo{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .arq-chip{background:#fff;border:1px solid var(--kg3);border-radius:999px; padding:5px 12px;font-size:.78rem;color:var(--kg5)} .arq-chip b{color:var(--kg7);font-size:.9rem} /* ── Linha do tempo do lead ─────────────────────────── */ .tl-lista{max-height:62vh;overflow:auto} .tl-item{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid var(--kg2)} .tl-icone{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--kg1); display:flex;align-items:center;justify-content:center;font-size:.8rem} .tl-conteudo{flex:1;min-width:0} .tl-cab{display:flex;justify-content:space-between;gap:10px;align-items:baseline} .tl-quando{font-size:.7rem;color:var(--kg5);white-space:nowrap} .tl-quem{font-size:.72rem;color:var(--kg5)} .tl-detalhe{font-size:.82rem;margin-top:3px;white-space:pre-wrap;word-break:break-word} .tl-nota{font-size:.72rem;color:var(--kb5);margin-top:3px} /* Mensagem do cliente destacada: numa thread longa, é o que o corretor procura primeiro. */ .tl-mensagem_recebida .tl-icone{background:#eff6ff;color:var(--kb5)} .tl-ligacao_ia .tl-icone,.tl-ligacao .tl-icone{background:#f0fdf9;color:#10b981} .tl-followup .tl-icone{background:#fffbeb;color:#f59e0b} .badge.warn{background:#fffbeb;color:#92400e;border-color:#fde68a} .btn.xs{padding:2px 8px;font-size:.7rem} /* ── Quadro: 7 etapas na tela ──────────────────────── Colunas mais estreitas para caber mais sem rolar, e cabeçalho fixo para não se perder de qual etapa é a coluna ao rolar dentro dela. */ .crm-col{flex:0 0 224px} .crm-col-head{position:sticky;top:0;background:var(--kg0);z-index:2} /* Barra de rolagem sempre visível: sem ela, quem não arrasta não descobre que existem etapas além da borda. */ .crm-board{scrollbar-width:thin;scroll-behavior:smooth} .crm-board::-webkit-scrollbar{height:10px} .crm-board::-webkit-scrollbar-thumb{background:var(--kg3);border-radius:6px} .crm-card-mover{margin-top:6px} .crm-mover{width:100%;font-size:.74rem;padding:3px 6px;border:1px solid var(--kg3); border-radius:6px;background:#fff;color:var(--kg7)} .crm-mover:focus{outline:2px solid var(--kb5);outline-offset:1px} @media (max-width:820px){ /* No celular a coluna ocupa quase a tela toda: arrastar não funciona em toque, então o que importa é ler o card e usar o seletor. */ .crm-col{flex:0 0 86vw;max-height:none} } .sup-rota{font-size:.7rem;color:#92400e;margin-top:2px} .tr-off{opacity:.5} .tr-off strong{text-decoration:line-through} .tr-dias{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%;margin-top:6px} .tr-nova{margin-top:14px;padding:14px} .tr-nova h3{margin:0 0 10px;font-size:.92rem} /* ── Mensagens: dois painéis que alternam no celular ───────────── A largura estava fixa no HTML (grid-template-columns:320px 1fr), então nenhuma regra responsiva alcançava: no celular as duas colunas ficavam espremidas e nenhuma das duas servia — a lista cortada e a conversa quebrando uma palavra por linha. */ .msg-layout{display:grid;grid-template-columns:320px 1fr;gap:14px;align-items:start} /* A coluna de Conversas rola SOZINHA. * * Ela não tinha altura: a lista crescia com o número de conversas e empurrava * a página inteira. Com a Simplex passando de sessenta leads por dia, para * chegar na última conversa o corretor rolava a tela toda — levando junto o * cabeçalho, a busca e a conversa aberta, que some do campo de visão no * caminho. * * O card vira coluna flex com teto de viewport; só a lista rola. A busca fica * presa no topo, que é o ponto: procurar e rolar são a mesma tarefa, e a * caixa de busca sumindo enquanto se procura é o pior momento para ela sumir. * * `min-height:0` não é enfeite. Um filho de flex tem `min-height:auto` por * padrão, que o faz crescer até o tamanho do conteúdo e ignorar o * `overflow` — sem esta linha a lista não rola e o teto não vale de nada. * * No celular não vale: lá só um painel aparece por vez (ver o @media de * 820px), a lista JÁ é a tela inteira, e um segundo trilho de rolagem dentro * de uma tela que rola é onde o polegar erra. */ .msg-lista{display:flex;flex-direction:column;max-height:calc(100vh - 190px)} #msg-threads{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain} .msg-voltar{display:none} /* ---------- arrastar arquivo para a conversa ---------- */ /* O card precisa de `position:relative` para o véu cobri-lo. */ .msg-conversa{position:relative} .msg-solta{display:none;position:absolute;inset:8px;z-index:20;border-radius:12px; border:2px dashed var(--kb5);background:rgba(255,255,255,.92); align-items:center;justify-content:center;text-align:center; font-weight:600;color:var(--kb7);pointer-events:none} .msg-conversa.arrastando .msg-solta{display:flex} .msg-compose-row{display:flex;gap:8px;margin-top:12px;align-items:center} .msg-compose-row input, .msg-compose-row textarea{flex:1;min-width:0} /* `resize:none` porque a altura é do JS (crescerCompositor): deixar a alça do navegador junto dá duas fontes de verdade para o mesmo número, e a do usuário é desfeita na próxima tecla. */ .msg-compose-row textarea{resize:none;font-family:inherit;font-size:inherit; line-height:1.4;max-height:140px;overflow-y:auto} /* Compositor no padrão do WhatsApp Web: clipe e microfone como ícones, não como botões com rótulo — a barra já é estreita no celular, e texto em três botões empurraria o campo de digitar para nada. */ /* O campo é uma PÍLULA e os ícones não têm moldura — é o que diferencia a barra do WhatsApp de um formulário. Caixinha em volta de cada ícone deixa três retângulos disputando a linha e, num celular de 375px, come a largura de digitar. */ .msg-compose-row input, .msg-compose-row textarea{border-radius:999px;padding:10px 16px} /* Com mais de uma linha, o raio de 999px deixa o texto encostando na curva. */ .msg-compose-row textarea.alto{border-radius:18px} .msg-icon{background:none;border:none;padding:6px;color:var(--kg5);cursor:pointer;display:flex;align-items:center;flex-shrink:0} .msg-icon:hover{color:var(--kg7)} .msg-icon:disabled{opacity:.35;cursor:not-allowed} .msg-icon svg{width:22px;height:22px} /* Microfone e enviar ocupam o MESMO lugar e têm a mesma forma: um círculo preenchido que troca de glifo conforme o campo tem texto ou não. É o gesto que o corretor já conhece, e o que faz a barra parecer o WhatsApp em vez de parecer um formulário com um emoji no fim. */ .msg-acao{width:42px;height:42px;border-radius:50%;border:none;background:var(--kb7);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0} .msg-acao:hover{background:var(--kb8)} .msg-acao:disabled{opacity:.35;cursor:not-allowed} .msg-acao svg{width:20px;height:20px} /* Gravando, o botão fica vermelho: o corretor precisa enxergar o estado sem ler a barra de cima, que no celular fica acima da dobra do teclado. */ .msg-acao.gravando{background:#d64545} /* `flex-wrap` e o nome sem largura fixa, porque esta barra tem quatro elementos e em 375px eles não cabem lado a lado. Sem quebrar, ela empurra a página para além da tela — e no iPhone página mais larga que o visor vira arrasto lateral que não volta, que é o que o corretor descreveu como "está dando zoom" em 25/09/2026. Não era a fonte do campo; era esta linha. */ .msg-anexo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding:10px;border:1px solid var(--kg3);border-radius:10px;background:var(--kg1)} .msg-anexo-nome{font-size:.82rem;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msg-anexo input{flex:1;min-width:0} .msg-gravando{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px;padding:10px;border:1px solid var(--kg3);border-radius:10px;background:var(--kg1);font-size:.85rem} .msg-rec-dot{width:10px;height:10px;border-radius:50%;background:#d64545;animation:msgRec 1s infinite} @keyframes msgRec{0%,100%{opacity:1}50%{opacity:.25}} .chatbox{max-height:480px;overflow-y:auto} @media (max-width:820px){ /* Uma coisa por vez: ou a lista, ou a conversa. Dois painéis lado a lado numa tela de celular não dão espaço pra nenhum dos dois. */ .msg-layout{grid-template-columns:1fr} /* A lista volta a acompanhar a página: no celular ela é a tela. */ .msg-lista{max-height:none;display:block} #msg-threads{overflow-y:visible;min-height:auto} .msg-layout .msg-conversa{display:none} .msg-layout.mostrando-conversa .msg-lista{display:none} .msg-layout.mostrando-conversa .msg-conversa{display:block} .msg-voltar{display:inline-flex} .card-header{flex-wrap:wrap;gap:8px} /* Altura pela viewport, não fixa: 480px sobra em tela grande e não cabe em tela pequena com teclado aberto. */ .chatbox{max-height:calc(100vh - 320px)} .msg-compose-row{position:sticky;bottom:0;background:#fff;padding-top:8px} } /* ── Campo de texto no celular: 16px, sempre ────────────────────── O Safari do iOS dá zoom automático ao focar qualquer campo com fonte menor que 16px, e não desfaz quando o campo perde o foco: o corretor tocava em "Digite uma mensagem", a tela crescia, e ele tinha que dar pinch pra enxergar a conversa de novo a cada resposta. 16px é o limiar do Safari, não uma escolha de design — abaixo dele o zoom acontece, no valor exato não acontece. A saída conhecida de travar o pinch-zoom (maximum-scale=1 no viewport) resolveria o sintoma tirando o zoom manual de quem precisa dele pra ler. */ /* Fileira de encerramento do atendimento por texto (tela de Mensagens). Some quando a conversa não está assumida — ver mensagens.js. */ /* Linha da lista de Conversas. A encerrada continua ali — é onde o histórico está — mas apagada e no fim, para o olho achar em um relance o que ainda pede resposta. Some seria mais limpo e pior: cliente que volta a falar faria a conversa reaparecer do nada, sem contexto de por que sumiu. */ .thr{padding:10px 8px;border-bottom:1px solid var(--kg2);cursor:pointer} .thr.encerrada{opacity:.55} .thr.encerrada:hover{opacity:1} .enc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 12px} .enc-t{font-size:.78rem;color:var(--kg5);font-weight:500;margin-right:2px} @media (max-width:820px){ /* A análise da ligação vinha em duas colunas também no celular: cada bloco ficava com ~170px e o texto virava uma palavra por linha. Um embaixo do outro é o formato que se lê com o polegar. */ .tgrid{grid-template-columns:1fr} /* Os quatro botões de encerramento não cabem lado a lado em 375px: viram duas linhas de dois, como o rodapé do card da fila já faz. */ .enc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .enc-t{grid-column:1/-1} .enc .btn{justify-content:center;min-width:0} /* A lista de motivos é frase, não rótulo: "Sumiu após tentativas de contato" não cabe em meia largura, e em duas colunas a fileira fica desalinhada com o cancelar encostado num botão comprido. */ .enc.motivos{grid-template-columns:1fr} } /* ── Sair ──────────────────────────────────────── A rota /logout existia desde sempre; só nunca teve como chegar nela pela interface — quem quisesse trocar de conta tinha que digitar a URL. */ .user-chip{align-items:center} .user-info{flex:1;min-width:0} .user-info .user-name,.user-info .user-role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .user-sair{display:flex;align-items:center;justify-content:center;flex:0 0 32px; width:32px;height:32px;border-radius:8px;color:inherit;opacity:.65; text-decoration:none;transition:opacity .15s,background .15s} .user-sair svg{width:17px;height:17px} .user-sair:hover{opacity:1;background:rgba(255,255,255,.12)} .user-sair:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1} /* ── Sair sempre alcançável ─────────────────────── O rodapé ficava no fim de uma barra rolável. Com onze itens de menu, no celular ele saía da tela — e no iOS pior ainda, porque 100vh inclui a barra do navegador e o pé da lateral fica atrás dela. Grudado embaixo, o botão está sempre visível, e o menu rola por baixo dele. */ .sidebar{height:100dvh} .sidebar-footer{position:sticky;bottom:0;background:var(--kb9);z-index:2} .user-sair .rotulo{display:none} @media (max-width:900px){ /* No celular o ícone sozinho é ambíguo — a palavra resolve, e há espaço. */ .user-sair{flex:0 0 auto;width:auto;gap:7px;padding:0 10px;font-size:.78rem;font-weight:600} .user-sair .rotulo{display:inline} } /* ── Corrigir o nome do cliente ─────────────────── Discreto até o hover: aparece onde o nome está, sem competir com ele. */ .nome-edit{background:none;border:0;cursor:pointer;padding:0 4px;margin-left:2px; font-size:.78em;line-height:1;color:var(--kg5);opacity:.45;transition:opacity .15s,color .15s} .nome-edit:hover{opacity:1;color:var(--kb5)} .nome-edit:focus-visible{outline:2px solid var(--kb5);outline-offset:2px;opacity:1} /* ── Lead quente: o cliente apertou "quero contratar" ────────────────── Verde e não vermelho de propósito. Vermelho já é o SLA estourado — a promessa que quebramos. Este é o oposto: o melhor que pode acontecer no funil, o cliente dizendo que quer fechar. Se os dois usassem a mesma cor, o corretor teria que ler para saber se era boa ou má notícia. */ .quente-banner{display:flex;align-items:center;gap:8px;background:#dcfce7;color:#166534; font-size:.74rem;font-weight:700;padding:7px 16px;letter-spacing:.01em} .qcard.quente{border-color:#86efac} /* SLA estourado vence a marca de quente na borda: um cliente que pediu para contratar E está esperando além do prazo é primeiro um problema. */ .qcard.quente.late{border-color:#fca5a5} .crm-quente{background:#dcfce7;color:#166534;font-size:.66rem;font-weight:700; padding:3px 8px;border-radius:999px;display:inline-block;margin-bottom:6px} /* Busca por nome — CRM e Mensagens. * * A lupa fica DENTRO do campo, e o padding da esquerda abre espaço para ela. * `font-size:16px` no input não é escolha estética: abaixo disso o Safari do * iPhone dá zoom sozinho ao focar, e a página não volta. Já custou uma noite * em 25/09/2026 — ver a regra global de `input`. * * `appearance:none` no type=search tira a lupa e o X nativos do WebKit, que * apareceriam sobrepostos aos nossos. */ .busca{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:12px} .busca-embutida{margin:0 12px 10px} .busca-lupa{position:absolute;left:12px;color:var(--kg5);pointer-events:none} .busca input{flex:1;min-width:0;padding:9px 14px 9px 36px;border:1px solid var(--kg3); border-radius:999px;background:#fff;color:var(--kg9);font-family:inherit;font-size:16px; -webkit-appearance:none;appearance:none;transition:border-color .15s} .busca input:focus{outline:none;border-color:var(--kb5);box-shadow:0 0 0 3px rgba(47,123,200,.15)} .busca input::-webkit-search-decoration, .busca input::-webkit-search-cancel-button{-webkit-appearance:none} .busca-conta{font-size:.76rem;color:var(--kg5);white-space:nowrap} /* COCKPIT DO SUPERVISOR * * `font-size:16px` nos campos de data pelo mesmo motivo de sempre: abaixo * disso o Safari do iPhone dá zoom ao focar e a página não volta. */ .ck-filtros{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px} .ck-espaco{flex:1} .ck-presets{display:flex;border:1px solid var(--kg3);border-radius:999px;overflow:hidden;background:var(--kg1)} .ck-preset{padding:8px 16px;border:none;background:transparent;color:var(--kg6);font-weight:500;font-size:.82rem} .ck-preset.ativo{background:var(--kb7);color:#fff;font-weight:600} .ck-datas{display:flex;align-items:center;gap:8px} .ck-datas label{font-size:.76rem;color:var(--kg6);font-weight:500} .ck-datas input{padding:8px 11px;border:1px solid var(--kg3);border-radius:8px;font-size:16px;font-family:inherit;color:var(--kg9)} .ck-alertas{margin-bottom:14px} .ck-alerta-titulo{display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;color:var(--kg9);margin-bottom:8px} .ck-alerta-titulo span{background:var(--err);color:#fff;border-radius:999px;padding:1px 8px;font-size:.68rem;font-weight:700} .ck-alerta{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r);margin-bottom:8px;border:1px solid} .ck-alerta.err{background:#fef2f2;border-color:#fca5a5} .ck-alerta.warn{background:#fffbeb;border-color:#fcd34d} .ck-alerta-txt{flex:1;display:flex;flex-direction:column} .ck-alerta.err strong{color:#7f1d1d;font-size:.9rem} .ck-alerta.err span{color:#991b1b;font-size:.78rem} .ck-alerta.warn strong{color:#78350f;font-size:.9rem} .ck-alerta.warn span{color:#92400e;font-size:.78rem} .ck-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px} .ck-kpi{padding:14px 16px} .ck-kpi-rot{font-size:.68rem;color:var(--kg5);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .ck-kpi-val{font-size:1.75rem;font-weight:600;color:var(--kg9);line-height:1.2;margin-top:5px;display:flex;align-items:baseline;gap:8px} .ck-kpi-pe{font-size:.75rem;color:var(--kg6);margin-top:2px;min-height:1.1em} .ck-delta{font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px} .ck-delta.ok{background:#d1fae5;color:#065f46} .ck-delta.ruim{background:#fee2e2;color:#991b1b} .ck-grade{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;margin-bottom:16px} @media (max-width:1100px){.ck-grade{grid-template-columns:1fr}.ck-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} .kt .dir{text-align:right} .ck-bom{color:#065f46;font-weight:600} .ck-atencao{color:#92400e;font-weight:600} .ck-ruim{color:#991b1b;font-weight:700} .ck-funil{padding:0 18px 14px;display:flex;flex-direction:column;gap:11px} .ck-etapa-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;font-size:.82rem} .ck-etapa-top em{color:#b45309;font-style:normal;font-weight:600;margin-left:5px;font-size:.76rem} .ck-etapa-top b{color:var(--kg9)} .ck-etapa-top b span{color:var(--kg5);font-weight:500} .ck-etapa-barra{height:9px;border-radius:999px;background:var(--kg1);overflow:hidden} .ck-etapa-barra i{display:block;height:100%;background:var(--kb1);border-radius:999px;position:relative} /* A parte escura, por cima da clara: quanto daquela etapa já falou com gente. Duas barras empilhadas e não duas linhas — a comparação é entre elas. */ .ck-etapa-barra u{display:block;height:100%;background:var(--kb6);border-radius:999px; position:absolute;left:0;top:0} .ck-etapa-pe{display:flex;justify-content:space-between;gap:8px;margin-top:4px; font-size:.7rem;color:var(--kg5)} .ck-etapa-alerta{color:#b45309;font-weight:600} .ck-perdas{border-top:1px solid var(--kg2);padding:14px 18px} .ck-perdas h4{margin:0 0 9px;font-size:.82rem} .ck-perda{display:flex;justify-content:space-between;font-size:.82rem;padding:3px 0} .ck-perda span{color:var(--kg6)} .ck-perda b{color:var(--kg9)} .ck-legenda{display:flex;gap:16px;font-size:.76rem;color:var(--kg6)} .ck-legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px} .ck-horas{padding:6px 20px 18px} .ck-grafico{display:flex;gap:12px} .ck-eixo{display:flex;flex-direction:column;justify-content:space-between;height:170px;font-size:.68rem;color:var(--kg4);text-align:right;width:22px;padding-bottom:20px} .ck-plot{flex:1;position:relative} .ck-linhas{position:absolute;left:0;right:0;top:0;height:150px;display:flex;flex-direction:column;justify-content:space-between} .ck-linhas div{height:1px;background:var(--kg1)} .ck-linhas div:last-child{background:var(--kg2)} .ck-barras{position:relative;display:flex;align-items:flex-end;height:150px;gap:6px} .ck-grupo{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:2px;height:100%} /* 4px só no topo: a ponta arredondada marca o fim do dado, e a base tem que encostar na linha do zero — canto redondo embaixo faz a barra parecer flutuar e mente sobre onde ela começa. */ .ck-grupo i{width:18px;border-radius:4px 4px 0 0;min-height:2px} .ck-rotulos{display:flex;gap:6px;margin-top:7px;font-size:.68rem;color:var(--kg5)} .ck-rotulos span{flex:1;text-align:center} .ck-cobertura{display:flex;align-items:center;gap:10px;margin-top:12px} .ck-cobertura-rot{font-size:.68rem;color:var(--kg5);width:110px;flex-shrink:0} .ck-cobertura>div{flex:1;display:flex;gap:6px} .ck-cobertura>div span{flex:1;text-align:center;padding:4px 0;background:var(--kb1);color:var(--kb8);border-radius:5px;font-size:.68rem;font-weight:600} .ck-cobertura>div span.vazio{background:var(--kg1);color:var(--kg4)} .ck-modal-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px} .ck-modal-kpis div{padding:10px 12px;background:var(--kg0);border-radius:var(--r)} .ck-modal-kpis span{display:block;font-size:.68rem;color:var(--kg5);font-weight:600;text-transform:uppercase;letter-spacing:.04em} .ck-modal-kpis b{font-size:1.2rem;color:var(--kg9)} /* COCKPIT NO CELULAR * * 820px é o corte que o resto do painel já usa; abaixo dele o supervisor * está no telefone, provavelmente andando, e o que ele precisa é diferente: * ver se tem fogo e agir, não estudar a tabela. * * O que muda, e por quê: * * A faixa de alertas vira coluna com o botão embaixo, em largura cheia — * botão de 40 px ao lado de duas linhas de texto é o alvo que mais falha no * polegar. * * Os indicadores viram duas colunas. Seis em coluna única empurram a mesa * para baixo da dobra, e a mesa é a tela. * * A tabela rola na horizontal (`.tw` já faz isso) com o nome do corretor * grudado na esquerda: rolar uma tabela e perder de vista de quem é a linha * torna a rolagem inútil. * * O gráfico afina as barras em vez de rolar. Rolar um gráfico destrói a * comparação, que é a única coisa que ele serve para fazer. */ @media (max-width:820px){ .ck-filtros{gap:10px;padding:10px 12px} /* Os presets rolam em vez de quebrar: quebrados, a pílula vira dois pedaços de pílula e some a leitura de "um grupo, uma escolha". */ .ck-presets{overflow-x:auto;max-width:100%;flex-shrink:0;-webkit-overflow-scrolling:touch} .ck-preset{padding:8px 13px;white-space:nowrap} .ck-datas{width:100%} .ck-datas input{flex:1;min-width:0} .ck-espaco{display:none} .ck-alerta{flex-direction:column;align-items:stretch;gap:10px} .ck-alerta .btn{width:100%;justify-content:center;padding:11px 18px} .ck-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .ck-kpi{padding:12px 13px} .ck-kpi-val{font-size:1.45rem} .ck-grade{grid-template-columns:1fr;gap:12px} /* Coluna do corretor fixa na rolagem lateral. O fundo opaco é obrigatório: sem ele, as células que passam por baixo aparecem através do nome. */ .ck-mesa-fixa th:first-child, .ck-mesa-fixa td:first-child{position:sticky;left:0;background:#fff;z-index:1; box-shadow:1px 0 0 var(--kg2)} .ck-mesa-fixa thead th:first-child{background:var(--kg0)} .ck-horas{padding:6px 12px 14px} .ck-grupo i{width:9px} .ck-barras{gap:3px} .ck-rotulos{gap:3px;font-size:.62rem} /* O rótulo sai de cima da faixa: 110px fixos ao lado de onze blocos não sobra nada para os blocos num telefone. */ .ck-cobertura{flex-direction:column;align-items:stretch;gap:5px} .ck-cobertura-rot{width:auto} .ck-cobertura>div{gap:3px} .ck-cobertura>div span{font-size:.62rem;padding:3px 0} .ck-modal-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Quem está atendendo — topo do histórico do lead. */ .tl-dono{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 14px;margin-bottom:14px; border-bottom:1px solid var(--kg2)} .tl-dono-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px; background:var(--kb0);border:1px solid var(--kb1);border-radius:999px;font-size:.8rem} .tl-dono-chip span{color:var(--kg5);font-size:.72rem} .tl-dono-chip b{color:var(--kb8)} .tl-dono-chip .tl-ia{font-style:normal;font-size:.62rem;font-weight:700;padding:1px 6px; border-radius:999px;background:#ede9fe;color:#5b21b6} .tl-dono-chip.tl-sem{background:#fffbeb;border-color:#fcd34d} .tl-dono-chip.tl-sem b{color:#92400e} /* Lupa e nome clicável no cockpit. */ .ck-busca{margin-bottom:0;min-width:260px;flex:1} .ck-achados{margin-bottom:14px} .ck-achados-vazio{padding:16px 20px;color:var(--kg5);font-size:.85rem} /* O nome do corretor é um