@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap'); /* ───────────────────────────────────────────────────────────────────────────── crm-acabamento.css · 14/09/2026 Camada de ACABAMENTO sobre crm-ui.css. A organização, as tags e os estados vêm do crm-ui (Codex) e não mudam aqui: o que esta folha faz é dar fluidez, profundidade e ritmo ao cartão, à coluna e aos números. Carregar sempre DEPOIS do crm-ui.css. Remover este arquivo devolve o visual anterior sem tocar em nada mais. ───────────────────────────────────────────────────────────────────────────── */ :root{ /* superfícies em camadas: quadro < coluna < cartão */ --crm-quadro:#0b0e14; --crm-col:#101520; --crm-cartao:#161d2a; --crm-cartao-alto:#1a2230; --crm-linha:rgba(255,255,255,.07); --crm-linha-viva:rgba(255,255,255,.16); --crm-brilho:inset 0 1px 0 rgba(255,255,255,.055); --crm-elev:0 6px 18px rgba(0,0,0,.34); --crm-elev-alta:0 14px 34px rgba(0,0,0,.46); --crm-acao:#2f6bff; --crm-acao-suave:rgba(47,107,255,.16); --crm-marca:#ffc101; --crm-num:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace; --crm-fonte:'Geist','Inter','Segoe UI',system-ui,sans-serif; } body,body *{font-family:var(--crm-fonte)} .crm-ui{letter-spacing:-.003em} /* ── quadro e colunas: profundidade em três camadas ───────────────────────── */ .crm-pipeline .board{background:var(--crm-quadro)} .crm-pipeline .col{ background:var(--crm-col); border:1px solid var(--crm-linha)!important; border-radius:14px; box-shadow:var(--crm-brilho); } .crm-pipeline .col-head{ border-bottom:1px solid var(--crm-linha)!important; padding:11px 13px; background:transparent; } .crm-pipeline .col-head .t{font-size:12.5px;font-weight:600;letter-spacing:.005em} .crm-pipeline .col-head .n{ font-family:var(--crm-num);font-size:11px;font-weight:600; background:rgba(255,255,255,.06);border:1px solid var(--crm-linha);color:#c3cbd9; border-radius:999px;padding:1px 8px; } .crm-pipeline .cards{padding:10px;gap:9px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent} .crm-pipeline .cards::-webkit-scrollbar{width:8px} .crm-pipeline .cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:padding-box} .crm-pipeline .cards.drag-over{background:var(--crm-acao-suave);outline:1px dashed rgba(47,107,255,.55);outline-offset:-5px;border-radius:12px} /* ── cartão: um ritmo só, sem gradiente diagonal, com brilho de topo ─────── */ .crm-pipeline .card{ display:flex;flex-direction:column;gap:7px; background:var(--crm-cartao)!important; border:1px solid var(--crm-linha)!important; border-radius:12px; padding:12px 13px; box-shadow:var(--crm-elev),var(--crm-brilho); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease; } .crm-pipeline .card:hover{ background:var(--crm-cartao-alto)!important; border-color:var(--crm-linha-viva)!important; transform:translateY(-2px); box-shadow:var(--crm-elev-alta),var(--crm-brilho); } .crm-pipeline .card.crm-selected{ background:var(--crm-cartao-alto)!important; border-color:rgba(255,193,1,.55)!important; box-shadow:0 0 0 1px rgba(255,193,1,.35) inset,var(--crm-elev); } .crm-pipeline .card:focus-visible{outline:2px solid #8fb4ff;outline-offset:2px} /* zera as margens antigas: o espaçamento agora é o gap do cartão */ .crm-pipeline .card>*{margin:0!important} .crm-pipeline .card .crm-card-top{display:flex;align-items:center;gap:9px} .crm-pipeline .card .crm-lead-avatar{ width:27px;height:27px;border-radius:50%;flex:none; background:var(--crm-acao-suave);color:#a8c4ff; border:1px solid rgba(47,107,255,.3); font-family:var(--crm-num);font-size:10.5px;font-weight:600;letter-spacing:-.02em; display:grid;place-items:center; } .crm-pipeline .card .nome,.crm-pipeline .card .crm-card-open{ font-size:13.5px;font-weight:600;color:#f4f7fc;line-height:1.25;letter-spacing:-.008em;text-align:left; } .crm-pipeline .card .crm-card-description{font-size:11.5px;color:#93a0b5;line-height:1.35} .crm-pipeline .card .badges{display:flex;flex-wrap:wrap;gap:5px} .crm-pipeline .card .tagbadge,.crm-pipeline .card .tag{ font-size:10.5px!important;font-weight:600!important; padding:2px 7px!important;border-radius:6px!important; border-width:1px!important;line-height:1.45!important;letter-spacing:.005em; } .crm-pipeline .card .venda{ font-family:var(--crm-num);font-size:12px!important;font-weight:600!important; color:#9fe3c4!important;letter-spacing:-.02em; background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.18); border-radius:7px;padding:5px 8px; } .crm-pipeline .card .crm-card-footer{ display:flex;align-items:center;gap:8px; padding-top:8px;border-top:1px solid var(--crm-linha); font-size:11px;color:#8e9aad; } .crm-pipeline .card .crm-card-owner{display:flex;align-items:center;gap:5px;min-width:0} .crm-pipeline .card .crm-card-owner svg{width:12px;height:12px;opacity:.75;flex:none} .crm-pipeline .card .crm-card-time{margin-left:auto;font-family:var(--crm-num);font-size:10.5px;color:#7b8699;letter-spacing:-.01em} .crm-pipeline .card .crm-card-more{ flex:none;background:rgba(255,255,255,.05);border:1px solid var(--crm-linha);color:#98a4b8; border-radius:7px;width:24px;height:22px;line-height:1;font-size:12px;cursor:pointer; } .crm-pipeline .card .crm-card-more:hover{color:#fff;border-color:var(--crm-linha-viva);background:rgba(255,255,255,.09)} .crm-pipeline .card.crm-card-expanded .info{ border-top:1px solid var(--crm-linha);padding-top:9px;font-size:11px;color:#98a4b8;line-height:1.65; } /* ── números e controles: mesma família tabular em toda tela ─────────────── */ .crm-ui .crm-quick b,.crm-ui .crm-status,.crm-ui .crm-date,.crm-ui .resumo b, .crm-ui [class*=valor],.crm-ui [class*=total]{font-family:var(--crm-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .crm-ui .crm-btn{border-radius:9px;font-weight:600;transition:transform .14s ease,filter .14s ease,border-color .14s ease} .crm-ui .crm-btn:hover{transform:translateY(-1px)} .crm-ui .crm-btn-primary{background:var(--crm-marca);color:#1a1200;border-color:var(--crm-marca)} .crm-ui .crm-search,.crm-ui .crm-filter select,.crm-ui .crm-search input{border-radius:9px} .crm-ui .crm-search{box-shadow:var(--crm-brilho)} .crm-ui .crm-quick{border-radius:10px;box-shadow:var(--crm-brilho)} .crm-ui .crm-nav-link{border-radius:9px} .crm-ui .crm-nav-link[aria-current=page],.crm-ui .crm-nav-link.active{box-shadow:var(--crm-brilho)} /* ── conversa: bolhas com o mesmo acabamento ─────────────────────────────── */ .crm-ui .msg{border-radius:13px;box-shadow:var(--crm-brilho)} .crm-ui .msg.assistant{background:linear-gradient(135deg,#2f6bff,#1f4fd0)} .crm-ui .msg.lead{background:var(--crm-cartao-alto)} .crm-ui .msg small{font-family:var(--crm-num);font-size:10px;letter-spacing:-.01em} .crm-ui .crm-chat-day{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;font-weight:600} @media (prefers-reduced-motion:reduce){ .crm-pipeline .card,.crm-ui .crm-btn{transition:none} .crm-pipeline .card:hover,.crm-ui .crm-btn:hover{transform:none} } /* ── nicho com cor própria, faturamento e equipe no cartão (14/09) ───────── */ .crm-x-nicho, .crm-pipeline .card .crm-x-nicho{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;font-size:11px;font-weight:600;line-height:1.5;padding:3px 9px 3px 7px;border-radius:999px;background:hsl(var(--h) 72% 58% / .16);color:hsl(var(--h) 85% 78%);border:1px solid hsl(var(--h) 70% 60% / .38)} .crm-pipeline .card .crm-x-nicho svg{width:12px;height:12px;flex:none;opacity:.9} .crm-pipeline .card .crm-x-nicho span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .crm-pipeline .card .crm-x-perfil{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:#9aa6ba;line-height:1.45} .crm-pipeline .card .crm-x-dado{display:inline-flex;align-items:center;gap:5px;min-width:0} .crm-pipeline .card .crm-x-dado svg{width:12px;height:12px;flex:none;opacity:.7} .crm-pipeline .card .crm-x-dado span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .crm-pipeline .card .crm-x-falta{color:#6f7787} .crm-pipeline .card .crm-x-falta svg{opacity:.45} /* tags com mais vida: fundo e borda mais presentes, texto mais claro ─────── */ .crm-pipeline .card .tagbadge,.crm-pipeline .card .tag{filter:saturate(1.35) brightness(1.1)} .crm-pipeline .card .tagbadge[data-tone=qualified],.crm-pipeline .card .tag{background:rgba(255,193,1,.17)!important;color:#ffd970!important;border-color:rgba(255,193,1,.45)!important} .crm-pipeline .card .tagbadge[data-tone=attention]{background:rgba(248,113,113,.18)!important;color:#ffb3b3!important;border-color:rgba(248,113,113,.45)!important} .crm-pipeline .card .tagbadge[data-tone=confirmed]{background:rgba(74,222,128,.16)!important;color:#93e9b6!important;border-color:rgba(74,222,128,.42)!important} .crm-pipeline .card .tagbadge[data-tone=opportunity]{background:rgba(47,107,255,.2)!important;color:#a8c4ff!important;border-color:rgba(47,107,255,.45)!important} .crm-pipeline .card .tagbadge[data-tone=customer]{background:rgba(52,211,153,.16)!important;color:#8fe3c4!important;border-color:rgba(52,211,153,.4)!important} .crm-pipeline .card .tagbadge[data-tone=waiting]{background:rgba(148,163,184,.16)!important;color:#cbd5e1!important;border-color:rgba(148,163,184,.36)!important} .crm-pipeline .card .tagbadge[data-tone=negative]{background:rgba(120,113,108,.18)!important;color:#c3bcb6!important;border-color:rgba(120,113,108,.4)!important} /* sidebar: o título do grupo não pode cortar acento ──────────────────────── */ .crm-ui .crm-nav-group{line-height:1.75;overflow:visible;padding:16px 12px 8px} .crm-ui .crm-sidebar{padding-top:20px} .crm-ui .crm-brand small{line-height:1.6} /* ── ícone no lugar do emoji: mesmo significado, traço consistente ────────── */ .crm-ui .crm-x-rot{display:inline-flex;align-items:center;vertical-align:-.16em} .crm-ui .crm-x-ico{width:15px;height:15px;flex:none;opacity:.85} .crm-ui h2 .crm-x-ico,.crm-ui .sec .crm-x-ico{width:16px;height:16px;opacity:.7} .crm-ui .cards .k .crm-x-ico,.crm-ui .card .k .crm-x-ico{width:13px;height:13px} .crm-ui th .crm-x-rot{gap:5px} .crm-ui th .crm-x-ico{width:13px;height:13px;opacity:.6} /* ── métricas: indicador menor e denso, tabela tabular, gráfico com respiro ── */ .crm-ui .sec{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8e99ad;font-weight:700;margin:22px 0 10px} .crm-ui .painel{background:var(--crm-cartao);border:1px solid var(--crm-linha);border-radius:14px;box-shadow:var(--crm-brilho);padding:16px 18px} .crm-ui .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px} .crm-ui .cards>*{background:var(--crm-cartao);border:1px solid var(--crm-linha);border-radius:12px;padding:13px 15px;box-shadow:var(--crm-brilho);transition:border-color .15s,transform .15s} .crm-ui .cards>*:hover{border-color:var(--crm-linha-viva);transform:translateY(-1px)} .crm-ui .cards .v,.crm-ui .cards .n{font-family:var(--crm-num);font-size:26px!important;font-weight:600!important;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.1} .crm-ui .cards .k{font-size:11px!important;color:#8e99ad!important;font-weight:600!important;margin-top:6px;letter-spacing:.02em} .crm-ui table{width:100%;border-collapse:collapse;font-size:12.5px} .crm-ui table th{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:#7f8a9c;font-weight:700;padding:0 10px 9px;border-bottom:1px solid var(--crm-linha);white-space:nowrap} .crm-ui table td{padding:9px 10px;border-bottom:1px solid var(--crm-linha);color:#ccd4e2} .crm-ui table td.n,.crm-ui table th.n,.crm-ui table td[class*=n]{font-family:var(--crm-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .crm-ui table tr:hover td{background:rgba(255,255,255,.028)} .crm-ui .bar .col{border-radius:5px 5px 0 0;background:linear-gradient(180deg,#5b8cff,#2f6bff)} .crm-ui .bar .v{font-family:var(--crm-num);font-size:10.5px;color:#9aa6ba} .crm-ui .bar .d{font-family:var(--crm-num);font-size:10px;color:#77839a} .crm-ui .aba,.crm-ui [id^=aba-]{border-radius:10px 10px 0 0} /* ---- Métricas: o resumo e o leitor de gargalo em uma composição só ---- */ .crm-x-comp{margin-top:12px;display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;align-items:start} .crm-x-comp>h2.sec{grid-column:1;grid-row:1} .crm-x-comp>.cards{grid-column:1;grid-row:2} .crm-x-comp>.crm-x-gargalo{grid-column:2;grid-row:1 / span 2} @media (max-width:1080px){ .crm-x-comp{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto} .crm-x-comp>h2.sec,.crm-x-comp>.cards,.crm-x-comp>.crm-x-gargalo{grid-column:1} .crm-x-comp>.crm-x-gargalo{grid-row:3;margin-top:12px} } .crm-x-gargalo{background:var(--crm-cartao);border:1px solid var(--crm-linha);border-radius:12px;padding:14px 16px 13px;display:flex;flex-direction:column;gap:11px;position:relative;overflow:hidden;box-shadow:var(--crm-elev)} .crm-x-gargalo::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)} .crm-x-gargalo-tit{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8b9199} .crm-x-taxa{display:flex;flex-direction:column;gap:5px} .crm-x-taxa-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .crm-x-taxa-nome{font-size:13px;color:#c9cdd3} .crm-x-taxa-num{font-family:var(--crm-num)!important;font-variant-numeric:tabular-nums;font-size:19px;font-weight:700;color:#e7eaee;letter-spacing:-.01em} .crm-x-taxa-trilho{height:5px;border-radius:99px;background:#1c1e23;overflow:hidden} .crm-x-taxa-trilho>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#3f6ee0,#5b8bff)} .crm-x-taxa-de{font-size:11.5px;color:#7d838b;line-height:1.35} .crm-x-taxa.ruim .crm-x-taxa-num{color:var(--amarelo,#ffc101)} .crm-x-taxa.ruim .crm-x-taxa-trilho>i{background:linear-gradient(90deg,#b8891a,var(--amarelo,#ffc101))} .crm-x-gargalo-pe{border-top:1px solid var(--crm-linha);padding-top:10px;font-size:12px;color:#a4aab2;line-height:1.45} .crm-x-gargalo-pe b{color:#e7eaee} .crm-x-gargalo-vazio{font-size:12.5px;color:#7d838b;line-height:1.5} .crm-x-comp>.cards{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:760px){.crm-x-comp>.cards{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ---- Consulta de um dia: gaveta fechada, não seção fixa ---- */ .crm-ui details.dia{margin-top:16px;border:1px solid var(--crm-linha);border-radius:12px;background:var(--crm-quadro,#12161f);overflow:hidden} .crm-ui details.dia>summary{cursor:pointer;list-style:none;padding:11px 16px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#8b9199;display:flex;align-items:center;gap:9px;user-select:none} .crm-ui details.dia>summary::-webkit-details-marker{display:none} .crm-ui details.dia>summary::before{content:"";width:6px;height:6px;flex:none;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(-45deg);transition:transform .16s ease} .crm-ui details.dia[open]>summary{color:#c9cdd3;border-bottom:1px solid var(--crm-linha)} .crm-ui details.dia[open]>summary::before{transform:rotate(45deg)} .crm-ui details.dia>summary:hover{color:#dfe3e8} .crm-ui details.dia>div{padding:4px 16px 16px} .crm-ui details.dia h2.sec:first-child{margin-top:12px} @media (prefers-reduced-motion:reduce){.crm-ui details.dia>summary::before{transition:none}} /* ---- Funil de conversão: a largura é o volume, a perda é número ---- */ .crm-ui .crm-funil{display:flex;flex-direction:column;padding:2px 0} .crm-ui .ffx{position:relative;min-height:74px;display:flex;align-items:center;cursor:pointer} .crm-ui .ffx-forma{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--cor) 32%,transparent),color-mix(in srgb,var(--cor) 15%,transparent));clip-path:polygon(calc(50% - var(--a)*0.5%) 0,calc(50% + var(--a)*0.5%) 0,calc(50% + var(--b)*0.5%) 100%,calc(50% - var(--b)*0.5%) 100%);transform-origin:50% 50%;animation:crmFunil .5s cubic-bezier(.22,.8,.3,1) both;animation-delay:calc(var(--i)*.08s)} .crm-ui .ffx+.ffx .ffx-forma{border-top:1px solid rgba(255,255,255,.07)} @keyframes crmFunil{from{transform:scaleX(.05);opacity:0}to{transform:scaleX(1);opacity:1}} .crm-ui .ffx-texto{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:0 20px} .crm-ui .ffx-rot{font-size:13.5px;color:#e7eaee;font-weight:500} .crm-ui .ffx-val{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right} .crm-ui .ffx-num{font-family:var(--crm-num)!important;font-variant-numeric:tabular-nums;font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.05} .crm-ui .ffx-perda{font-style:normal;font-size:11px;color:#8b9199;white-space:nowrap} /* 04/10: quantos avançaram da etapa anterior (a taxa que o Daniel lê) fica acima da perda */ .crm-ui .ffx-avanco{font-style:normal;font-size:12px;font-weight:600;white-space:nowrap;opacity:.95} .crm-ui .ffx:hover .ffx-forma{filter:brightness(1.25)} .crm-ui .ffx:hover .ffx-rot{color:#fff} .crm-ui .ffx-perda b{font-family:var(--crm-num)!important;font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){.crm-ui .ffx-forma{animation:none}} @media (max-width:620px){.crm-ui .ffx-num{font-size:20px}.crm-ui .ffx-rot{font-size:12.5px}.crm-ui .ffx-perda,.crm-ui .ffx-avanco{white-space:normal}} /* ---- Fio cruzado: o nav antigo da página também pegava o da lateral ---- */ /* Cada página tem nav{display:flex;flex-wrap:wrap} do menu horizontal antigo. A camada monta um