/* área de trabalho do crm: menu por módulos, barra do topo, busca ctrl+k, criar, notificações e funil pro */

/* ---------- menu lateral por módulos ---------- */
.nav { gap: 2px; }
.nav > button[data-tab] { min-height: 40px; }
.nav-grupo { display: flex; flex-direction: column; margin-top: 10px; }
.nav-g { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 6px 12px; border-radius: 8px; color: var(--mt2); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.nav-g > i:first-child { display: none; font-size: 19px; }
.nav-g:hover { color: var(--tx); }
.nav-g .seta-g { margin-left: auto; font-size: 14px; transition: transform var(--ease); }
.nav-grupo.fechado .seta-g { transform: rotate(-90deg); }
.nav-itens { display: flex; flex-direction: column; gap: 2px; max-height: 560px; transition: max-height 240ms cubic-bezier(.22, 1, .36, 1); }
.nav-itens > button { min-height: 40px; }
.nav-grupo.fechado .nav-itens { max-height: 0; }
.nav-itens { overflow: hidden; }
.nav-grupo.fechado .nav-itens > * { visibility: hidden; }
.nav-grupo:has(.nav-itens .on) > .nav-g { color: var(--ac2); }
.nav button .badge { margin-left: auto; }
/* trilho (menu recolhido) */
body.rail { --side-w: 72px; }
body.rail .side { padding-inline: 10px; }
body.rail .nome-marca, body.rail .nav span, body.rail .nav .seta-g, body.rail .side-user .u, body.rail .side-user .icon-btn:not(#sair) { display: none; }
body.rail .side-brand { justify-content: center; padding-inline: 0; }
body.rail .nav button { justify-content: center; padding-inline: 0; }
body.rail .nav-g { justify-content: center; min-height: 40px; padding: 0; }
body.rail .nav-g > i:first-child { display: block; }
body.rail .nav-grupo .nav-itens { max-height: 0; }
body.rail .nav-grupo { margin-top: 2px; }
body.rail .nav-grupo .nav-itens > * { visibility: hidden; }
body.rail .nav-grupo:has(.nav-itens .on) > .nav-g { background: var(--acb); color: var(--ac2); border-radius: 9px; }
body.rail .nav button .badge { position: absolute; top: 4px; right: 6px; min-width: 8px; height: 8px; padding: 0; font-size: 0; }
body.rail .side-user { justify-content: center; padding-inline: 0; }
body.rail .nav button.on::after { left: -11px; }
.side, main { transition: width 220ms cubic-bezier(.22, 1, .36, 1), margin 220ms cubic-bezier(.22, 1, .36, 1); }

/* ---------- barra do topo ---------- */
main { padding-top: 0 !important; }
.topbar { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 14px; min-height: 64px; margin: 0 -32px 26px; padding: 12px 32px; border-bottom: 1px solid var(--bd); background: rgba(12, 14, 18, .82); backdrop-filter: blur(16px) saturate(140%); }
.tb-trilha { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--mt2); font-size: 13px; white-space: nowrap; }
.tb-trilha b { overflow: hidden; color: var(--tx); font-weight: 600; text-overflow: ellipsis; }
.tb-trilha i { font-size: 14px; }
.tb-busca { display: flex; align-items: center; gap: 10px; flex: 1; max-width: 520px; min-height: 40px; margin-inline: auto; padding: 0 8px 0 14px; border: 1px solid var(--bd); border-radius: 11px; background: var(--sf); color: var(--mt2); font-size: 13px; }
.tb-busca span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-busca:hover { border-color: var(--bd2); color: var(--mt); background: var(--sf2); }
.tb-busca i { font-size: 17px; }
kbd { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid var(--bd2); border-bottom-width: 2px; border-radius: 6px; background: var(--sf2); color: var(--mt); font: 600 10.5px 'Inter', sans-serif; white-space: nowrap; }
.tb-acts { display: flex; align-items: center; gap: 8px; }
.tb-criar { min-height: 40px; }
.tb-sino { position: relative; width: 40px; height: 40px; border: 1px solid var(--bd); border-radius: 11px; }
.tb-sino i { font-size: 19px; }
.tb-sino.tem i { color: var(--tx); animation: sino 2.4s ease 1; transform-origin: 50% 10%; }
@keyframes sino { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } }
.tb-n { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid var(--bg); border-radius: 10px; background: var(--ac); color: #1a0800; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
.tb-rail { width: 36px; height: 36px; margin-left: -8px; }
.tb-menu { position: absolute; top: calc(100% - 4px); right: 80px; z-index: 30; display: flex; flex-direction: column; width: 320px; padding: 6px; border: 1px solid var(--bd2); border-radius: 14px; background: var(--sf); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.tb-menu button { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.tb-menu button:hover, .tb-menu button:focus-visible { background: var(--sf2); outline: none; }
.tb-menu button > i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--acbd); border-radius: 9px; background: var(--acb); color: var(--ac2); font-size: 18px; }
.tb-menu span { display: flex; flex-direction: column; min-width: 0; }
.tb-menu b { font-size: 13px; font-weight: 600; }
.tb-menu small { color: var(--mt2); font-size: 11.5px; }
.tb-timer { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--okbd); border-radius: 11px; background: var(--okb); color: var(--ok2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- busca (paleta de comandos) ---------- */
.paleta { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(5, 6, 9, .62); backdrop-filter: blur(4px); }
.paleta-card { display: flex; flex-direction: column; width: min(640px, 100%); max-height: 70vh; overflow: hidden; border: 1px solid var(--bd2); border-radius: 16px; background: var(--sf); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.paleta-in { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bd); }
.paleta-in i { color: var(--mt2); font-size: 20px; }
.paleta .paleta-in input { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 16px; outline: none; }
.paleta-in input::-webkit-search-cancel-button { display: none; }
.paleta-lista { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
.pl-sec { padding: 12px 10px 6px; color: var(--mt2); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.pl-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 10px; }
.pl-item.on { background: var(--sf2); box-shadow: inset 0 0 0 1px var(--bd2); }
.pl-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--sf3); color: var(--mt); font-size: 17px; }
.pl-ic.t-criar { background: var(--acb); color: var(--ac2); }
.pl-ic.t-lead { background: rgba(57, 135, 229, .14); color: #8ab5f8; }
.pl-ic.t-empresa, .pl-ic.t-pessoa { background: var(--pub); color: var(--pu); }
.pl-ic.t-cliente { background: var(--okb); color: var(--ok2); }
.pl-ic.t-tarefa, .pl-ic.t-entrega { background: var(--alb); color: var(--al); }
.pl-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pl-txt b { overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pl-txt small { overflow: hidden; color: var(--mt2); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.pl-enter { color: var(--mt2); font-size: 15px; opacity: 0; }
.pl-item.on .pl-enter { opacity: 1; }
.pl-vazio { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 34px 10px; color: var(--mt2); }
.pl-spin { width: 16px; height: 16px; border: 2px solid var(--bd2); border-top-color: var(--ac2); border-radius: 50%; animation: giro .7s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.paleta-pe { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--bd); color: var(--mt2); font-size: 11.5px; }
.paleta-pe span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- notificações ---------- */
.notif { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; width: min(420px, 100%); border-left: 1px solid var(--bd2); background: var(--sf); box-shadow: -24px 0 60px rgba(0, 0, 0, .4); transform: translateX(105%); transition: transform 260ms cubic-bezier(.22, 1, .36, 1); }
.notif.aberto { transform: none; }
.notif > header { display: flex; align-items: center; gap: 8px; padding: 20px 18px 14px; }
.notif > header > div { flex: 1; }
.notif h2 { font-size: 17px; }
.notif-abas { margin: 0 18px 8px; }
.notif-lista { flex: 1; overflow-y: auto; padding: 4px 10px 24px; }
.nf-sec { padding: 14px 8px 6px; color: var(--mt2); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.nf-item { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 11px 10px; border-radius: 11px; }
.nf-item:hover { background: var(--sf2); }
.nf-ic { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--sf3); color: var(--mt); font-size: 17px; }
.nv-err .nf-ic { background: var(--erb); color: var(--er); }
.nv-warn .nf-ic { background: var(--alb); color: var(--al); }
.nv-info .nf-ic { background: var(--infob); color: var(--info); }
.nv-ok .nf-ic { background: var(--okb); color: var(--ok2); }
.nf-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nf-txt b { font-size: 13px; font-weight: 600; }
.nf-txt span { display: -webkit-box; overflow: hidden; color: var(--mt); font-size: 12.5px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nf-txt small { color: var(--mt2); font-size: 11px; }
.nf-ponto { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 4px var(--acb); }

/* ---------- funil pro ---------- */
.fun-resumo { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fr > span { display: inline-flex; align-items: center; gap: 6px; }
.fr > span i { font-size: 15px; color: var(--mt2); }
.fr > small { font-size: 11.5px; }
.fr.destaque { border-color: var(--acbd); background: linear-gradient(135deg, rgba(255, 106, 0, .1), transparent 70%), var(--sf); }
.fr.destaque b { color: var(--ac2); }
.fun-barra-filtros { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fun-filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.fun-filtros .chip b { margin-left: 6px; padding: 0 6px; border-radius: 6px; background: var(--sf3); color: var(--mt); font-size: 10.5px; font-weight: 600; }
.fun-filtros .chip.on b { background: rgba(255, 255, 255, .12); color: inherit; }
.fun-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fun-ctrl .campo { min-height: 36px; padding-block: 0; }
.fun-quadro { grid-auto-columns: minmax(262px, 1fr); }
.fun-col > header { flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 14px 10px; }
.fun-h1 { display: flex; align-items: center; gap: 8px; }
.fun-prob { margin-left: auto; padding: 1px 7px; border: 1px solid var(--bd2); border-radius: 6px; color: var(--mt); font-size: 10.5px; font-weight: 600; }
.fun-h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fun-h2 small { color: var(--mt2); font-size: 11px; font-weight: 500; }
.fun-h2 em { color: var(--mt); font-size: 11.5px; font-style: normal; font-weight: 500; }
.fun-barra { height: 3px; overflow: hidden; border-radius: 3px; background: var(--sf3); }
.fun-barra i { display: block; height: 100%; border-radius: inherit; background: var(--mt2); transition: width 500ms cubic-bezier(.22, 1, .36, 1); }
.etapa-contato .fun-barra i { background: var(--info); }
.etapa-reuniao .fun-barra i { background: var(--pu); }
.etapa-proposta .fun-barra i { background: var(--al); }
.etapa-negociacao .fun-barra i { background: #f59e7b; }
.fun-col.etapa-ganho { background: linear-gradient(180deg, rgba(16, 185, 129, .05), transparent 50%); }
.fun-col.etapa-perdido { opacity: .85; }
.fun-vazio { flex-direction: column; gap: 6px; }
.fun-vazio i { font-size: 22px; opacity: .6; }
body.arrastando-lead .fun-itens { outline: 1px dashed var(--bd2); outline-offset: -6px; }

.lead { position: relative; gap: 9px; padding: 12px 12px 10px 14px; overflow: hidden; }
.lead::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ok); opacity: .75; }
.lead.idade-morno::before { background: var(--al); }
.lead.idade-parado::before { background: var(--er); }
.lead.idade-fechado::before { background: var(--bd2); }
.lead-top { align-items: flex-start; }
.lead-nome { flex: 1; }
.lead-valor { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lead-valor small { color: var(--mt2); font-size: 11px; font-weight: 500; }
.lead-prox { align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--sf3); }
.lead-prox span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-prox em { flex: none; font-size: 11px; font-style: normal; font-weight: 600; }
.lead-prox.atrasado { background: var(--alb); }
.lead-prox.hoje { background: var(--infob); }
.lead-prox.vazio-prox { background: none; padding-inline: 0; }
.lead-dias { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--mt2); }
.lead-dias i { font-size: 13px; }
.lead.idade-parado .lead-dias { color: var(--er); }
.lead.idade-morno .lead-dias { color: var(--al); }
.lead-acts { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; padding: 3px; border: 1px solid var(--bd2); border-radius: 9px; background: var(--sf); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); opacity: 0; transform: translateY(4px); transition: opacity var(--ease), transform var(--ease); pointer-events: none; }
.lead:hover .lead-acts, .lead:focus-within .lead-acts { opacity: 1; transform: none; pointer-events: auto; }
.lead-acts a, .lead-acts button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--mt); font-size: 16px; }
.lead-acts a:hover, .lead-acts button:hover { background: var(--sf3); color: var(--ac2); }
.lead-acts [data-lacao="zap"]:hover { color: #25d366; }
@media (hover: none) { .lead-acts { position: static; align-self: flex-end; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; } }

.score-anel { position: relative; display: grid; place-items: center; flex: none; width: 32px; height: 32px; }
.score-anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.score-anel circle { fill: none; stroke-width: 3; }
.score-anel .trilho { stroke: var(--sf3); }
.score-anel .valor { stroke: var(--mt2); stroke-linecap: round; transition: stroke-dashoffset 600ms ease; }
.score-anel b { font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score-anel.quente .valor { stroke: var(--ac); }
.score-anel.quente b { color: var(--ac2); }
.score-anel.morno .valor { stroke: var(--al); }
.score-anel.frio .valor { stroke: var(--info); }
.score-pill { display: inline-block; min-width: 30px; padding: 1px 7px; border-radius: 6px; background: var(--sf3); font-size: 11.5px; font-weight: 700; text-align: center; }
.score-pill.quente { background: var(--acb); color: var(--ac2); }
.score-pill.morno { background: var(--alb); color: var(--al); }
.score-pill.frio { background: var(--infob); color: var(--info); }

.fun-tabela-wrap { overflow-x: auto; border: 1px solid var(--bd); border-radius: 14px; background: var(--surface); }
.fun-tabela { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 13px; }
.fun-tabela th { position: sticky; top: 0; padding: 0; border-bottom: 1px solid var(--bd); background: var(--sf); text-align: left; }
.fun-tabela th button { display: inline-flex; align-items: center; gap: 4px; width: 100%; padding: 12px 14px; color: var(--mt2); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.fun-tabela th button.on { color: var(--tx); }
.fun-tabela th.num button { justify-content: flex-end; }
.fun-tabela td { padding: 10px 14px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.fun-tabela tr:last-child td { border-bottom: 0; }
.fun-tabela tbody tr { cursor: pointer; transition: background var(--ease); }
.fun-tabela tbody tr:hover { background: rgba(255, 255, 255, .025); }
.fun-tabela tr.atrasado td:first-child { box-shadow: inset 3px 0 0 var(--al); }
.fun-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fun-tabela td.num small { display: block; color: var(--mt2); font-size: 11px; }
.lt-nome { display: flex; align-items: center; gap: 10px; }
.lt-nome .avatar.sm { width: 30px; height: 30px; font-size: 11px; flex: none; }
.lt-nome > span { display: flex; flex-direction: column; min-width: 0; }
.lt-nome small { color: var(--mt2); font-size: 11.5px; }
.et-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--bd2); border-radius: 20px; font-size: 12px; white-space: nowrap; }
.lt-prox { display: flex; flex-direction: column; }
.lt-prox small { color: var(--mt2); font-size: 11px; }
.lt-prox.atrasado small { color: var(--al); }

@media (max-width: 1599px) { .topbar { margin-inline: -28px; padding-inline: 28px; } }
/* ---------- celular ---------- */
@media (max-width: 1100px) { .tb-busca span { display: none; } .tb-busca { flex: 0 0 auto; margin-left: auto; margin-right: 0; } .tb-busca kbd { display: none; } }
@media (max-width: 900px) {
  .topbar { margin: 0 calc(-1 * max(20px, env(safe-area-inset-right))) 18px calc(-1 * max(20px, env(safe-area-inset-left))); padding: calc(10px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); min-height: 58px; }
  .tb-rail { display: none; }
  .tb-criar span { display: none; }
  .tb-criar { width: 40px; padding: 0; justify-content: center; }
  .tb-menu { right: 12px; left: 12px; width: auto; }
  .paleta { padding-top: calc(10px + env(safe-area-inset-top)); }
  .paleta-pe { display: none; }
  .fun-barra-filtros { flex-direction: column; align-items: stretch; }
  #tab-funil .head-acts .busca { flex: 1 1 100%; }
  .fun-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .fun-filtros .chip { flex: none; }
  .fun-ctrl .campo { flex: 1 1 40%; }
}
@media (max-width: 560px) { .topbar { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left))); padding-inline: max(16px, env(safe-area-inset-left)); } }
@media (prefers-reduced-motion: reduce) { .notif, .nav-itens, .side, main, .fun-barra i { transition: none; } .tb-sino.tem i { animation: none; } }
.fun-ctrl .campo { width: auto; min-width: 160px; }
@media (max-width: 900px) { .fun-ctrl .campo { width: 0; min-width: 0; } }