/* ============================================================================
   iBooster CRM - estilos especificos de cada vista
   Sales, Prospects, Precos, postura e guia moram em sales.css e vistas-guias.css.
   Dentro de cartao, item de lista e LINHA (fundo so no hover, fio entre uma e
   outra), nao cartao dentro de cartao.
   ========================================================================== */

/* lista de linhas dentro de um cartao: fio entre as linhas, nada de caixa */
.lista-linhas{display:grid;gap:0}
.lista-linhas > * + *,.faixa-hoje > * + *{box-shadow:0 -1px 0 var(--line-soft)}

/* ---------------- meu dia ---------------- */
.saudacao{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.saudacao h2{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);line-height:var(--lh-tight)}
.saudacao > .avatar{box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line-strong)}
.saudacao .sub{color:var(--ink-3);font-size:var(--fs-md);margin-top:4px}
.saudacao .dir{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:600px){
  .saudacao{gap:12px;margin-bottom:18px}
  .saudacao > .avatar{display:none}
  .saudacao h2{font-size:var(--fs-xl)}
  .saudacao .sub{font-size:var(--fs-sm)}
  .saudacao .dir{margin-left:0}
}

.faixa-hoje{display:grid;gap:0}
/* evento do dia: o tipo vira um ponto de 6px antes do titulo (o filete lateral
   saiu; filete so no topo da coluna do funil e no evento do calendario) */
.linha-agenda{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;
  padding:10px 8px;background:transparent;border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--dur-1) var(--ease)}
.linha-agenda:hover{background:var(--hover)}
.linha-agenda .h{font-weight:var(--fw-semibold);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--ink)}
.linha-agenda .h small{display:block;font-size:var(--fs-2xs);color:var(--ink-3);font-weight:var(--fw-regular)}
.linha-agenda .t{font-weight:var(--fw-medium);font-size:var(--fs-md);line-height:1.35}
.linha-agenda .t::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cor,var(--ink-4));margin-right:8px;vertical-align:2px}
.linha-agenda .m{font-size:var(--fs-xs);color:var(--ink-3);margin-top:3px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.linha-agenda.feito .t{text-decoration:line-through;color:var(--ink-3)}
/* celular: sem a pilha de avatares na direita, o titulo ganha a largura */
@media(max-width:600px){.linha-agenda{grid-template-columns:48px 1fr}.linha-agenda > .pilha{display:none}}

/* ---------------- tarefas ----------------
   Linha por padrao (Meu dia, ficha); no quadro de tarefas vira cartao. */
.item-tarefa{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;background:transparent;
  border-radius:var(--r-sm);transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.item-tarefa:hover{background:var(--hover)}
.item-tarefa.feita{opacity:.55}
.item-tarefa.feita .tt{text-decoration:line-through}
.caixa{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-strong);flex:none;margin-top:1px;
  display:grid;place-items:center;transition:all var(--dur-1) var(--ease);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:var(--fw-medium);font-size:var(--fs-md);line-height:1.4}
.item-tarefa .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3)}
/* prioridade: ponto de 6px na altura do titulo, e nao filete na lateral */
.prio{width:6px;height:6px;border-radius:50%;flex:none;align-self:flex-start;margin-top:7px}
/* atrasada: o prazo ja vem em .tag.perigo; o check ganha a borda vermelha */
.item-tarefa.atrasada .caixa{border-color:color-mix(in srgb,var(--danger) 55%,var(--line-strong))}

.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(--bg-2);border:0;box-shadow:var(--e1);border-radius:var(--r);padding:10px;min-height:130px}
.coluna-tarefas.destino{box-shadow:0 0 0 2px 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:var(--fs-sm);text-transform:none;letter-spacing:0;font-weight:var(--fw-semibold);color:var(--ink)}
.coluna-tarefas .cab .q{margin-left:auto;font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--ink-3);padding:1px 7px;border-radius:var(--r-full)}
.coluna-tarefas .item-tarefa{margin-bottom:8px;cursor:grab;background:var(--surface);box-shadow:var(--e1),var(--sombra-1);padding:11px}
.coluna-tarefas .item-tarefa:hover{box-shadow:var(--e2)}
.coluna-tarefas .item-tarefa.arrastando{opacity:.4}

/* ---------------- funil / kanban ----------------
   Unico lugar que mantem o filete: o topo da coluna na cor do estagio. */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start}
.coluna{background:var(--bg-2);border:0;box-shadow:var(--e1);border-top:3px solid var(--cor,var(--line-strong));border-radius:var(--r);padding:10px;min-height:150px;transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.coluna.destino{box-shadow:0 0 0 2px var(--brand);background:var(--brand-soft)}
.col-cab{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.col-nome{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;font-weight:var(--fw-semibold)}
.col-qtd{margin-left:auto;font-size:var(--fs-2xs);font-weight:var(--fw-medium);color:var(--ink-3);padding:1px 7px;border-radius:var(--r-full)}
.col-val{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:10px;font-variant-numeric:tabular-nums;padding-left:2px}
.cartao-conta{background:var(--surface);border:0;border-radius:var(--r-sm);padding:12px;margin-bottom:8px;cursor:grab;
  box-shadow:var(--e1),var(--sombra-1);transition:box-shadow var(--dur-1) var(--ease)}
.cartao-conta:hover{box-shadow:var(--e2)}
.cartao-conta.arrastando{opacity:.35}
.cartao-conta .nome{font-weight:var(--fw-semibold);font-size:var(--fs-sm);letter-spacing:-.005em}
.cartao-conta .linha{display:flex;align-items:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.cartao-conta .val{font-size:var(--fs-sm);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;margin-top:8px}
.cartao-conta .val small{font-weight:var(--fw-regular);color:var(--ink-3);font-size:var(--fs-2xs)}
.cartao-conta .acao{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:var(--fs-xs);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:12px;align-items:center;margin-bottom:10px;font-size:var(--fs-sm)}
@media(max-width:520px){.barra-linha{grid-template-columns:96px 1fr 76px;font-size:var(--fs-xs)}}
.barra-linha .rot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.barra-linha .val{text-align:right;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.rosca{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rosca-legenda{display:grid;gap:8px;flex:1;min-width:150px}
.rosca-legenda div{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.rosca-legenda i{width:8px;height:8px;border-radius:50%;flex:none}
.rosca-legenda .v{margin-left:auto;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;color:var(--ink)}

.placar{display:grid;gap:0}
.placar-linha{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 8px;
  border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;transition:background var(--dur-1) var(--ease)}
.placar-linha + .placar-linha{box-shadow:0 -1px 0 var(--line-soft)}
.placar-linha:hover{background:var(--hover)}
.placar-linha .n{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}
.placar-linha .s{font-size:var(--fs-xs);color:var(--ink-3);margin-top:2px}
.placar-linha .v{text-align:right;font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;font-size:var(--fs-md)}
.placar-linha .vs{font-size:var(--fs-2xs);color:var(--ink-3);text-align:right}

.alerta-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;font-size:var(--fs-sm)}
.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:var(--fw-semibold);font-size:var(--fs-sm)}
.alerta-item .ds{font-size:var(--fs-xs);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:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ink-3);white-space:nowrap}
/* card do Bolt no celular: os botoes descem para baixo do texto em vez de vazar */
@media(max-width:600px){
  .alerta-item:has(> .mt .btn){flex-wrap:wrap}
  .alerta-item:has(> .mt .btn) > span:nth-child(2){flex:1 1 calc(100% - 48px)}
  .alerta-item > .mt:has(.btn){margin-left:auto}
}

/* ---------------- calendario ---------------- */
.cal-topo{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.cal-topo .mes{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);min-width:200px}
.cal-nav{display:flex;gap:4px;align-items:center}
.cal-grade{background:var(--surface);border:0;box-shadow:var(--e1);border-radius:var(--r);overflow:hidden}
.cal-cab{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface);border-bottom:1px solid var(--line)}
.cal-cab div{padding:9px 10px;font-size:var(--fs-xs);text-transform:none;letter-spacing:0;font-weight:var(--fw-medium);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(--dur-1) var(--ease);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:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.cal-dia.hoje .num-dia{background:var(--brand-fill);color:var(--on-brand)}
.cal-dia.selecionado{box-shadow:inset 0 0 0 2px var(--brand)}
.num-dia{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-2);flex:none;font-variant-numeric:tabular-nums}
.cal-evt{font-size:var(--fs-2xs);font-weight:var(--fw-medium);padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--cor) 10%,var(--surface));color:var(--cor);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:2px solid var(--cor);transition:filter var(--dur-1) var(--ease)}
.cal-evt:hover{filter:brightness(.97)}
.cal-evt.feito{opacity:.5;text-decoration:line-through}
.cal-mais{font-size:var(--fs-2xs);font-weight:var(--fw-medium);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:var(--r-full);background:var(--cor);border:none;margin-bottom:2px}
  .cal-mais{display:none}
}
.cal-lado{background:var(--surface);border:0;box-shadow:var(--e1);border-radius:var(--r);padding:16px 18px;align-self:start;position:sticky;top:calc(var(--topo) + 22px)}
.cal-lado h3{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.cal-lado .dsub{font-size:var(--fs-xs);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:var(--fw-semibold);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;box-shadow:inset 0 0 0 1px rgba(17,19,24,.08)}
.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:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight);line-height:1.25}
.ficha-sub{color:var(--ink-3);font-size:var(--fs-sm);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 12px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.abas-ficha button:hover{color:var(--ink)}
.abas-ficha button.ativo{color:var(--ink);border-bottom-color:var(--brand)}
.abas-ficha .q{font-size:var(--fs-2xs);font-weight:var(--fw-medium);background:var(--surface-3);padding:1px 6px;border-radius:var(--r-full);margin-left:5px;color:var(--ink-3)}
@media(max-width:760px){
  .abas-ficha{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .abas-ficha button{flex:none;white-space:nowrap}
}
.sec-tit{font-size:var(--fs-sm);text-transform:none;letter-spacing:0;color:var(--ink-2);font-weight:var(--fw-semibold);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:1px;background:var(--line-strong)}
.evento-tl{position:relative;padding:0 0 16px}
.evento-tl::before{content:'';position:absolute;left:-21px;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:var(--fs-xs);color:var(--ink-3);margin-bottom:4px;flex-wrap:wrap}
.evento-tl .cab b{color:var(--ink-2);font-weight:var(--fw-semibold)}
.evento-tl .txt{font-size:var(--fs-sm);white-space:pre-wrap;line-height:1.55;background:var(--surface);
  box-shadow:var(--e1);border-radius:var(--r-sm);padding:10px 12px}
.evento-tl.sistema .txt{background:transparent;box-shadow:none;border:1px dashed var(--line-strong);color:var(--ink-2);font-size:var(--fs-sm);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:0;box-shadow:var(--e1);border-radius:var(--r);padding:18px;
  cursor:pointer;transition:box-shadow var(--dur-1) var(--ease)}
.cartao-pessoa:hover{box-shadow:var(--e2)}
.cartao-pessoa .top{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.cartao-pessoa .nome{font-weight:var(--fw-semibold);font-size:15px;letter-spacing:-.01em}
.cartao-pessoa .cargo{font-size:var(--fs-xs);color:var(--ink-3);margin-top:1px}
.cartao-pessoa .metricas{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px;border-top:1px solid var(--line-soft)}
.cartao-pessoa .metricas .v{font-size:var(--fs-lg);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cartao-pessoa .metricas .k{font-size:var(--fs-xs);text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:var(--fw-medium);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:0;box-shadow:var(--e1);
  border-radius:var(--r);cursor:pointer;background:var(--surface);transition:box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.op-vis:hover{box-shadow:0 0 0 1px var(--line-strong)}
.op-vis.ativa{box-shadow:0 0 0 1.5px var(--brand);background:var(--brand-soft)}
.op-vis input{margin:2px 0 0;flex:none}
.op-vis b{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.caixa-contas{max-height:260px;overflow-y:auto;border:0;box-shadow:var(--e1);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:var(--fs-sm)}
.linha-conta:last-child{border-bottom:none}
.linha-conta:hover{background:var(--surface-2)}
.linha-conta input{margin:0;flex:none}
.linha-conta .silencio{font-size:var(--fs-xs);display:block}

.perfil-cab{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.perfil-cab .nome{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight)}
.perfil-cab .meta{color:var(--ink-3);font-size:var(--fs-sm);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(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.cores button:hover{transform:scale(1.08)}
.cores button.ativo{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface) inset}

/* celular: o funil anda de lado, coluna por coluna, com o dedo */
@media (max-width:760px){
  .kanban{grid-auto-columns:minmax(240px,86vw);scroll-snap-type:x mandatory;gap:10px}
  .kanban > *{scroll-snap-align:start}
}