/* ============================================================================
   iBooster CRM - estilos especificos de cada vista
   ========================================================================== */

/* ---------------- meu dia ---------------- */
.saudacao{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.saudacao h2{font-size:27px;font-weight:800;letter-spacing:-.03em}
.saudacao > .avatar{box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px var(--line)}
.saudacao .sub{color:var(--ink-3);font-size:13.5px;margin-top:3px}
.saudacao .dir{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.faixa-hoje{display:grid;gap:8px}
.linha-agenda{display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:center;
  padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  border-left:3px solid var(--cor,var(--ink-4));cursor:pointer;transition:border-color var(--transicao),box-shadow var(--transicao)}
.linha-agenda:hover{box-shadow:var(--sombra-2)}
.linha-agenda .h{font-weight:750;font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.linha-agenda .h small{display:block;font-size:10.5px;color:var(--ink-4);font-weight:600}
.linha-agenda .t{font-weight:650;font-size:13.5px}
.linha-agenda .m{font-size:11.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.linha-agenda.feito .t{text-decoration:line-through;color:var(--ink-3)}

/* ---------------- tarefas ---------------- */
.item-tarefa{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);transition:box-shadow var(--transicao),border-color var(--transicao)}
.item-tarefa:hover{box-shadow:var(--sombra-2)}
.item-tarefa.atrasada{border-color:var(--brand-line);background:var(--brand-soft)}
.item-tarefa.feita{opacity:.55}
.item-tarefa.feita .tt{text-decoration:line-through}
.caixa{width:19px;height:19px;border-radius:6px;border:1.8px solid var(--ink-4);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:all var(--transicao);background:var(--surface)}
.caixa:hover{border-color:var(--brand)}
.caixa.marcada{background:var(--ok);border-color:var(--ok)}
.caixa svg{width:12px;height:12px;color:#fff;stroke-width:3;opacity:0}
.caixa.marcada svg{opacity:1}
.item-tarefa .corpo{min-width:0;flex:1;cursor:pointer}
.item-tarefa .tt{font-weight:650;font-size:13.5px;line-height:1.4}
.item-tarefa .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:5px;font-size:11.5px;color:var(--ink-3)}
.prio{width:3px;align-self:stretch;border-radius:20px;flex:none}

.quadro-tarefas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media(max-width:900px){.quadro-tarefas{grid-template-columns:1fr}}
.coluna-tarefas{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:11px;min-height:130px}
.coluna-tarefas.destino{border-color:var(--brand);background:var(--brand-soft)}
.coluna-tarefas .cab{display:flex;align-items:center;gap:7px;margin-bottom:10px;padding:0 2px}
.coluna-tarefas .cab .n{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:750;color:var(--ink-2)}
.coluna-tarefas .cab .q{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);background:var(--surface-3);padding:1px 7px;border-radius:20px}
.coluna-tarefas .item-tarefa{margin-bottom:8px;cursor:grab}
.coluna-tarefas .item-tarefa.arrastando{opacity:.4}

/* ---------------- funil / kanban ---------------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:11px;overflow-x:auto;padding-bottom:12px;align-items:start}
.coluna{background:var(--surface-2);border:1px solid var(--line);border-top:2.5px solid var(--cor,var(--line));border-radius:var(--r);padding:11px;min-height:150px;transition:background var(--transicao),border-color var(--transicao)}
.coluna.destino{border-color:var(--brand);background:var(--brand-soft)}
.col-cab{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.col-nome{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:750}
.col-qtd{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);background:var(--surface-3);padding:1px 7px;border-radius:20px}
.col-val{font-size:11.5px;color:var(--ink-3);margin-bottom:11px;font-variant-numeric:tabular-nums;padding-left:2px}
.cartao-conta{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-4);
  border-radius:var(--r-sm);padding:11px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--sombra-1);
  transition:box-shadow var(--transicao),transform var(--transicao),border-color var(--transicao)}
.cartao-conta:hover{box-shadow:var(--sombra-2);transform:translateY(-1px)}
.cartao-conta.arrastando{opacity:.35}
.cartao-conta .nome{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.cartao-conta .linha{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.cartao-conta .val{font-size:13px;font-weight:750;font-variant-numeric:tabular-nums;margin-top:8px}
.cartao-conta .val small{font-weight:600;color:var(--ink-3);font-size:11px}
.cartao-conta .acao{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;color:var(--ink-2);display:flex;gap:6px;align-items:flex-start}
.cartao-conta .acao svg{width:12px;height:12px;flex:none;margin-top:2px;color:var(--ink-4)}

/* ---------------- graficos ---------------- */
/* funil e barras lado a lado no desktop, empilhados quando o cartao aperta.
   Em CSS e nao inline no JS: assim vale tambem ao girar o celular. */
.funil-duplo{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media(max-width:820px){.funil-duplo{grid-template-columns:1fr;gap:18px;justify-items:center}}
.agenda-layout{display:grid;grid-template-columns:1fr 340px;gap:14px}
@media(max-width:1000px){.agenda-layout{grid-template-columns:1fr}}

/* O funil e uma forma ALTA (proporcao ~1:2). Dimensionar pela largura, como
   qualquer outro grafico, faz a altura explodir junto com a coluna: numa tela
   larga virava ~1900px e engolia a pagina. Aqui a ALTURA manda e a largura
   segue a proporcao, entao o cartao tem tamanho previsivel em qualquer tela. */
.funil-svg{height:300px;width:auto;max-width:100%;display:block;margin:0 auto}
@media(max-width:820px){.funil-svg{height:260px}}
.barra-linha{display:grid;grid-template-columns:132px 1fr 92px;gap:11px;align-items:center;margin-bottom:9px;font-size:12.5px}
@media(max-width:520px){.barra-linha{grid-template-columns:96px 1fr 76px;font-size:12px}}
.barra-linha .rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-linha .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rosca{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rosca-legenda{display:grid;gap:7px;flex:1;min-width:150px}
.rosca-legenda div{display:flex;align-items:center;gap:8px;font-size:12.5px}
.rosca-legenda i{width:9px;height:9px;border-radius:3px;flex:none}
.rosca-legenda .v{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-2)}

.placar{display:grid;gap:9px}
.placar-linha{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;transition:border-color var(--transicao)}
.placar-linha:hover{border-color:var(--ink-4)}
.placar-linha .n{font-weight:700;font-size:13px}
.placar-linha .s{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.placar-linha .v{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;font-size:14px}
.placar-linha .vs{font-size:10.5px;color:var(--ink-3);font-weight:600;text-align:right}

.alerta-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:13px}
.alerta-item .ic{width:14px;height:14px;color:var(--ink-4)}
.linha-agenda .m .ic{width:11px;height:11px}
.alerta-item:last-child{border-bottom:none}
.alerta-item:hover .nm{color:var(--brand)}
.alerta-item .nm{font-weight:650}
.alerta-item .ds{font-size:11.5px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:34ch}
.alerta-item .mt{margin-left:auto;font-size:11.5px;font-weight:700;white-space:nowrap}

/* ---------------- calendario ---------------- */
.cal-topo{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-topo .mes{font-size:19px;font-weight:780;letter-spacing:-.02em;min-width:200px}
.cal-nav{display:flex;gap:4px;align-items:center}
.cal-grade{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra-1)}
.cal-cab{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface-2);border-bottom:1px solid var(--line)}
.cal-cab div{padding:9px 10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:750;color:var(--ink-3);text-align:left}
.cal-corpo{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dia{min-height:118px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  padding:7px 8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:background var(--transicao);position:relative}
.cal-dia:nth-child(7n){border-right:none}
.cal-dia:hover{background:var(--surface-2)}
.cal-dia.fora{background:var(--surface-2);opacity:.5}
.cal-dia.fds .num-dia{color:var(--ink-4)}
.cal-dia.hoje{background:var(--brand-soft)}
.cal-dia.hoje .num-dia{background:var(--brand);color:#fff}
.cal-dia.selecionado{box-shadow:inset 0 0 0 2px var(--brand)}
.num-dia{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--ink-2);flex:none}
.cal-evt{font-size:11px;font-weight:650;padding:2.5px 6px;border-radius:5px;background:var(--cor-suave);color:var(--cor);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:2.5px solid var(--cor);transition:filter var(--transicao)}
.cal-evt:hover{filter:brightness(.95)}
.cal-evt.feito{opacity:.5;text-decoration:line-through}
.cal-mais{font-size:10.5px;font-weight:700;color:var(--ink-3);padding-left:3px}
@media(max-width:760px){
  .cal-dia{min-height:76px;padding:5px}
  .cal-evt{font-size:0;padding:0;height:5px;border-radius:20px;background:var(--cor);border:none;margin-bottom:2px}
  .cal-mais{display:none}
}
.cal-lado{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sombra-1);align-self:start;position:sticky;top:calc(var(--topo) + 22px)}
.cal-lado h3{font-size:15px;font-weight:750}
.cal-lado .dsub{font-size:12px;color:var(--ink-3);margin-top:2px;margin-bottom:14px}

/* ---------------- ficha da conta ---------------- */
.ficha-topo{display:flex;align-items:flex-start;gap:13px}
.ficha-logo{width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff;flex:none}
/* logo da empresa por cima das iniciais: some a imagem, voltam as iniciais.
   Fundo claro fixo porque logo de empresa e desenhado para fundo claro - no tema
   escuro, sem isso, marca preta sobre preto desaparece. */
.marca-logo{position:relative;overflow:hidden;background:#fff !important}
.marca-logo::before{content:attr(data-ini);color:var(--ink-3);position:absolute;inset:0;display:grid;place-items:center}
.marca-logo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;background:#fff}
.ficha-nome{font-size:19px;font-weight:780;letter-spacing:-.02em;line-height:1.25}
.ficha-sub{color:var(--ink-3);font-size:12.5px;margin-top:3px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.abas-ficha{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 16px}
.abas-ficha button{padding:8px 13px;font-size:13px;font-weight:650;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all var(--transicao)}
.abas-ficha button:hover{color:var(--ink)}
.abas-ficha button.ativo{color:var(--brand);border-bottom-color:var(--brand)}
.abas-ficha .q{font-size:10px;font-weight:800;background:var(--surface-3);padding:1px 6px;border-radius:20px;margin-left:5px;color:var(--ink-3)}
.sec-tit{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:750;margin:20px 0 10px}
.sec-tit:first-child{margin-top:0}

/* O feed cresce sem limite e vira uma parede no fim do painel: rola dentro do
   proprio cartao para o painel terminar num tamanho previsivel. */
.feed-rolagem{max-height:420px;overflow-y:auto;padding-right:4px}
.linha-tempo{display:grid;gap:0;position:relative;padding-left:26px}
.linha-tempo::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:1.5px;background:var(--line)}
.evento-tl{position:relative;padding:0 0 16px}
.evento-tl::before{content:'';position:absolute;left:-22px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:2px solid var(--cor,var(--ink-4));z-index:1}
.evento-tl .cab{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3);margin-bottom:4px;flex-wrap:wrap}
.evento-tl .cab b{color:var(--ink-2);font-weight:700}
.evento-tl .txt{font-size:13px;white-space:pre-wrap;line-height:1.55;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px}
.evento-tl.sistema .txt{background:transparent;border-style:dashed;color:var(--ink-2);font-size:12.5px;padding:7px 11px}

/* ---------------- equipe e perfil ---------------- */
.grade-equipe{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.cartao-pessoa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;
  box-shadow:var(--sombra-1);cursor:pointer;transition:box-shadow var(--transicao),transform var(--transicao)}
.cartao-pessoa:hover{box-shadow:var(--sombra-2);transform:translateY(-2px)}
.cartao-pessoa .top{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.cartao-pessoa .nome{font-weight:750;font-size:15px;letter-spacing:-.015em}
.cartao-pessoa .cargo{font-size:12px;color:var(--ink-3);margin-top:1px}
.cartao-pessoa .metricas{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-top:14px;border-top:1px solid var(--line-soft)}
.cartao-pessoa .metricas .v{font-size:17px;font-weight:780;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cartao-pessoa .metricas .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);font-weight:700;margin-top:2px}

/* ---------------- visibilidade (admin) ---------------- */
.lista-vis{display:grid;gap:8px}
.op-vis{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r);cursor:pointer;background:var(--surface);transition:border-color var(--transicao),background var(--transicao)}
.op-vis:hover{border-color:var(--ink-4)}
.op-vis.ativa{border-color:var(--brand);background:var(--brand-soft)}
.op-vis input{width:auto;height:auto;margin:3px 0 0;flex:none;accent-color:var(--brand)}
.op-vis b{font-size:13.5px;font-weight:700}
.caixa-contas{max-height:260px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.linha-conta{display:flex;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:13px}
.linha-conta:last-child{border-bottom:none}
.linha-conta:hover{background:var(--surface-2)}
.linha-conta input{width:auto;height:auto;margin:0;flex:none;accent-color:var(--brand)}
.linha-conta .silencio{font-size:11.5px;display:block}

.perfil-cab{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.perfil-cab .nome{font-size:24px;font-weight:800;letter-spacing:-.025em}
.perfil-cab .meta{color:var(--ink-3);font-size:13px;margin-top:3px}
.cores{display:flex;gap:9px;flex-wrap:wrap}
.cores button{width:32px;height:32px;border-radius:50%;border:2px solid transparent;transition:transform var(--transicao),border-color var(--transicao)}
.cores button:hover{transform:scale(1.1)}
.cores button.ativo{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}

/* ============================================================================
   Sales: placar da campanha. O objetivo da tela e COMPETITIVO - quem abre tem
   que ver na hora quanto falta para virar. Por isso a distancia para o lider
   aparece em numero, e nao so a posicao.
   ========================================================================== */
.sales-topo{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:16px}
@media (max-width:860px){.sales-topo{grid-template-columns:1fr}}

.sales-premio{position:relative;overflow:hidden;border-radius:var(--r-sm);padding:20px 22px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2,#9c1414) 100%);color:#fff;
  box-shadow:var(--sombra-brand,var(--sombra-2))}
.sales-premio .rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;
  color:#fff !important;opacity:.92}
.sales-premio .sub{color:#fff}
/* raio da marca como marca d'agua do cartao: reforca de quem e o premio sem
   competir com o numero */
.sales-raio{position:absolute;right:18px;bottom:-14px;width:96px;height:96px;color:#fff;opacity:.16;pointer-events:none}
.sales-raio svg{width:100%;height:100%;stroke:none;fill:currentColor}
.sales-premio .rotulo-linha{display:flex;align-items:center;gap:8px}
.sales-premio .rotulo-linha .ic{width:15px;height:15px;fill:#fff;stroke:none;opacity:.95}
.sales-premio .valor{font-size:38px;font-weight:850;letter-spacing:-.03em;line-height:1;margin:6px 0 4px}
.sales-premio .sub{font-size:13px;opacity:.9}
.sales-premio .selo-alvo{position:absolute;right:-18px;top:-18px;width:110px;height:110px;border-radius:50%;
  background:rgba(255,255,255,.13)}

.sales-relogio{border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;background:var(--surface)}
.sales-relogio .n{font-size:38px;font-weight:850;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.sales-relogio .n small{font-size:15px;font-weight:700;color:var(--ink-3);margin-left:6px}
.sales-barra{height:6px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:12px}
.sales-barra i{display:block;height:100%;border-radius:99px;background:var(--brand)}

/* linha do placar */
.sales-linha{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;
  padding:13px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  margin-bottom:8px;transition:transform var(--transicao),box-shadow var(--transicao)}
.sales-linha:hover{transform:translateX(2px);box-shadow:var(--sombra-1)}
.sales-linha.lider{border-color:var(--brand);box-shadow:var(--sombra-brand,var(--sombra-2));background:var(--brand-soft)}
.sales-linha .pos{font-size:20px;font-weight:850;text-align:center;color:var(--ink-3)}
.sales-linha.lider .pos{color:var(--brand)}
.sales-linha .nome{font-weight:750;font-size:14.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sales-linha .num{font-size:26px;font-weight:850;letter-spacing:-.02em;line-height:1;text-align:right}
.sales-linha .num small{display:block;font-size:10.5px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.07em;margin-top:3px}

/* a badge do lider: e o alvo que os outros querem tirar */
.badge-lider{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.badge-lider .pulso{width:6px;height:6px;border-radius:50%;background:#fff;animation:sales-pulso 1.8s ease-in-out infinite}
@keyframes sales-pulso{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.badge-lider .pulso{animation:none}}

/* distancia para o topo: o gatilho de virada */
.sales-falta{font-size:11.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);
  padding:2px 9px;border-radius:99px;white-space:nowrap}
.sales-empatado{font-size:11.5px;font-weight:700;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);
  padding:2px 9px;border-radius:99px}
.sales-progresso{height:4px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:7px;max-width:260px}
.sales-progresso i{display:block;height:100%;border-radius:99px;background:var(--brand);opacity:.55}

/* marca do numero lancado a mao pelo admin - transparencia importa quando ha
   bonus em jogo: quem olha precisa saber o que veio da agenda e o que veio da mao */
.sales-ajustado{font-size:10.5px;font-weight:750;color:var(--ink-3);background:var(--surface-3);
  padding:2px 8px;border-radius:99px;white-space:nowrap}
.sales-editar{opacity:0;transition:opacity var(--transicao)}
.sales-linha:hover .sales-editar,.sales-linha:focus-within .sales-editar{opacity:1}
@media (hover:none){.sales-editar{opacity:1}}

/* bloco "como conta" - a regra do jogo fica na propria tela, nao numa mensagem */
.sales-regra{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;background:var(--surface-2);margin-top:18px}
.sales-regra h4{font-size:13px;font-weight:800;margin:0 0 10px;display:flex;align-items:center;gap:7px}
.sales-regra ol{margin:0;padding-left:19px;display:grid;gap:7px}
.sales-regra li{font-size:12.8px;color:var(--ink-2);line-height:1.5}
.sales-regra .obs{font-size:12px;color:var(--ink-3);margin:11px 0 0;line-height:1.5}

/* meta coletiva: a barra que dobra (ou nao) o premio de todo mundo */
.sales-meta{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;background:var(--surface)}
.sales-meta.batida{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,var(--surface))}
.sales-meta .cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sales-meta .n{font-size:26px;font-weight:850;letter-spacing:-.02em;line-height:1}
.sales-meta .de{font-size:13px;color:var(--ink-3);font-weight:700}
.sales-meta .falta{margin-left:auto;font-size:12.5px;font-weight:750;color:var(--brand)}
.sales-meta.batida .falta{color:var(--ok)}
.sales-meta .trilho{height:10px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.sales-meta .trilho i{display:block;height:100%;border-radius:99px;background:var(--brand);transition:width var(--transicao)}
.sales-meta.batida .trilho i{background:var(--ok)}

/* premio ao lado do nome: o que a pessoa leva se acabar assim */
.sales-premio-chip{font-size:11.5px;font-weight:850;padding:3px 10px;border-radius:99px;
  background:var(--ok);color:#fff;white-space:nowrap}
.sales-premio-chip.dobrado::after{content:' 2x';opacity:.85;font-weight:750}
.sales-linha.lider .sales-premio-chip{background:#fff;color:var(--brand)}

/* faixa de premios no cartao vermelho */
.sales-podio{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.sales-podio div{font-size:12px;color:#fff;opacity:.9}
.sales-podio b{display:block;font-size:15px;font-weight:850;opacity:1}

/* ============================================================================
   Meta coletiva, versao com peso visual: o time precisa OLHAR e entender em um
   segundo que existe o dobro em jogo. Por isso os dois cenarios aparecem lado a
   lado (o que vale hoje x o que vale batendo), e nao so uma barra com texto.
   ========================================================================== */
.sales-meta-v2{grid-column:1/-1;border:2px dashed var(--line);border-radius:var(--r-sm);
  padding:18px 20px;background:var(--surface);position:relative;overflow:hidden}
.sales-meta-v2.batida{border-style:solid;border-color:var(--ok);
  background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 12%,var(--surface)) 0%,var(--surface) 60%)}

.sales-meta-v2 .topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.sales-meta-v2 .titulo{font-size:13px;font-weight:850;text-transform:uppercase;letter-spacing:.07em;
  display:flex;align-items:center;gap:8px}
.sales-meta-v2 .titulo .ic{width:16px;height:16px}
.sales-meta-v2.batida .titulo{color:var(--ok)}

/* numeros grandes: 3 / 30 */
.sales-meta-v2 .contagem{display:flex;align-items:baseline;gap:6px;margin-left:auto}
.sales-meta-v2 .contagem b{font-size:34px;font-weight:850;letter-spacing:-.03em;line-height:1}
.sales-meta-v2 .contagem span{font-size:16px;font-weight:750;color:var(--ink-3)}

/* trilho grosso com o quanto falta escrito por cima */
.sales-trilho{position:relative;height:26px;border-radius:99px;background:var(--surface-3);overflow:hidden}
.sales-trilho i{position:absolute;inset:0 auto 0 0;border-radius:99px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2,#b91c1c) 100%);transition:width .5s ease}
.sales-meta-v2.batida .sales-trilho i{background:linear-gradient(90deg,var(--ok) 0%,color-mix(in srgb,var(--ok) 70%,#000) 100%)}
.sales-trilho em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;
  font-size:12px;font-weight:800;color:var(--ink);letter-spacing:.02em;mix-blend-mode:luminosity}

/* os dois cenarios: hoje x dobrado */
.sales-cenarios{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin-top:16px}
@media (max-width:720px){.sales-cenarios{grid-template-columns:1fr;gap:10px}}
.sales-cenario{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface-2)}
.sales-cenario .rot{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.sales-cenario .val{font-size:24px;font-weight:850;letter-spacing:-.02em;line-height:1.1;margin-top:3px}
.sales-cenario .det{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.sales-cenario.alvo{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--surface))}
.sales-cenario.alvo .val{color:var(--ok)}
.sales-cenarios .seta{font-size:20px;font-weight:850;color:var(--ink-4)}
@media (max-width:720px){.sales-cenarios .seta{display:none}}

/* premio ainda nao liberado: valor visivel, mas claramente "nao e seu ainda" */
.sales-premio-chip.travado{background:var(--surface-3);color:var(--ink-3);
  border:1px dashed var(--line);font-weight:750}

/* ============================================================================
   Prospects: lista de ataque por setor. Densa de proposito - o time precisa
   varrer muita empresa rapido, entao cada linha e baixa e o tier fica na
   esquerda, onde o olho bate primeiro.
   ========================================================================== */
.prosp-legenda{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 16px;
  font-size:12px;color:var(--ink-2)}
.prosp-legenda span{display:flex;align-items:center;gap:6px}
.prosp-legenda .ic{width:13px;height:13px}

.tier{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;flex:none;
  font-size:11px;font-weight:850;color:#fff}
.tier1{background:var(--brand)}
.tier2{background:var(--warn,#D98324)}
.tier3{background:var(--ink-4)}

.prosp-setor{margin-bottom:26px}
.prosp-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.prosp-cab h3{font-size:15.5px;font-weight:800;margin:0}
.prosp-porque{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:0 0 12px;max-width:74ch}

.prosp-lista{display:grid;gap:6px}
.prosp-item{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;
  padding:9px 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  transition:border-color var(--transicao)}
.prosp-item:hover{border-color:var(--ink-4)}
.prosp-item.ja-conta{opacity:.6;background:var(--surface-2)}
.prosp-item .nm{font-size:13.5px;font-weight:700}
.prosp-item .ds{font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.4}