/*=====================================================
  FUNIL DE VENDAS — v1 (2026-08-04)

  Reaproveita ao máximo o que já existe: cartão base (.card,
  css/cards.css), botões (.btn-primary/.btn-secondary, css/style.css),
  grade de formulário (.form-group, css/comissoes.css), modal
  (.modal-overlay/.modal, css/comissoes.css — só ganha uma variante
  ".modal-pequeno" aqui, pro formulário simples de Novo Funil/Novo
  Lead). Só o que é genuinamente novo desta tela (board Kanban,
  colunas, cards arrastáveis) ganha CSS aqui.
=====================================================*/

/* v34.2.5 — pedido do usuário: o dropdown do seletor de Funil/equipe
   (GCA Select) deve flutuar por cima do board (como o "Mais filtros"
   já faz), sem empurrar/redimensionar os cards embaixo. A versão
   anterior fazia isso empurrando o board pra baixo (padding-bottom
   dinâmico via MutationObserver, funilObservarAberturaDeSelects, js/
   funil-vendas.js) — removida a pedido do usuário. A causa raiz do
   problema original (dropdown "cortado" pelo card) nunca foi o
   posicionamento do menu, e sim overflow:hidden herdado de .card
   (css/cards.css) — mesmo achado/correção já aplicada em
   .funil-filtros (abaixo) e no popover "Mais filtros". Reabre overflow
   aqui e dá o arredondamento ao ::before diretamente, em vez de
   depender do corte do pai.

   overflow:visible sozinho não bastava, achado pelo usuário em
   produção: .card (css/cards.css) tem backdrop-filter (efeito vidro),
   e QUALQUER elemento com backdrop-filter cria seu próprio "contexto
   de empilhamento" — o dropdown, mesmo com z-index alto, fica preso
   DENTRO do contexto do .funil-topo, e o card seguinte no HTML
   (.funil-resumo, também com backdrop-filter/contexto próprio) sempre
   pinta por cima do .funil-topo inteiro, dropdown incluso. z-index
   explícito aqui, maior que os cards seguintes (.funil-resumo/
   .funil-filtros, abaixo), resolve isso de vez — sem precisar de JS
   nenhum pra saber quando algo está aberto. */
.funil-topo{
    margin-bottom:22px;
    overflow:visible;
    position:relative;
    z-index:3;
}

.funil-topo::before{
    border-radius:18px 18px 0 0;
}

.funil-topo-linha{

    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:16px;

}

.funil-form-group{
    min-width:220px;
}

.funil-topo-acoes{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

/* v34.2.x — mesmo motivo do gotcha já documentado em
   .funil-aviso-leitura[hidden] (mais abaixo) e .asn-btn-ja-paguei[hidden]
   (css/assinaturas.css): .btn-secondary (css/style.css) define
   display:flex sem guarda de :not([hidden]), e essa regra carrega
   DEPOIS do [hidden] padrão do navegador — sem isto, "#btnNovaEtapa"
   ficaria visível mesmo com o atributo hidden presente. */
#btnNovaEtapa[hidden]{
    display:none;
}

.funil-btn-excluir{
    width:38px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#c62828;
}

.funil-btn-novo-lead{
    margin-left:auto;
}

.funil-seletor-equipe{
    padding-left:16px;
    border-left:1px solid #ececec;
}

.funil-aviso-leitura{

    display:flex;
    align-items:center;
    gap:8px;

    margin-top:14px;

    font-size:12.5px;
    color:#8B0000;

}

/* [hidden] e a classe acima empatam em especificidade — sem esta
   regra, quem carregasse depois (esta folha) sempre vencia e o
   elemento ficava visível pra sempre, não importa o que o JS fizesse
   com .hidden (achado em produção: o aviso "somente leitura"
   aparecia até pra Consultor, que nem tem o seletor de equipe). */
.funil-aviso-leitura[hidden]{
    display:none;
}

.funil-aviso-leitura i{
    width:14px;
    height:14px;
}


/* ===========================
   RESUMO DO FUNIL — métricas + desempenho (v34.2.2, Funil Premium)
   Propositalmente compacto: faixa de UMA linha, sem virar 6 cards
   grandes tipo .dash-card (Dashboard) — o Kanban é que precisa do
   espaço, não isto.
=========================== */

/* z-index abaixo de .funil-topo (3) — mesmo motivo do comentário lá:
   .card tem backdrop-filter, cria contexto de empilhamento próprio, e
   sem uma ordem explícita o card seguinte no HTML sempre pintaria por
   cima do anterior, dropdown aberto ou não. */
.funil-resumo{
    margin-bottom:16px;
    transition:none; /* mesmo motivo de .funil-topo acima */
    position:relative;
    z-index:2;
}

.funil-metricas-faixa{

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:0;

}

.funil-metrica{

    display:flex;
    align-items:center;
    gap:10px;

    padding:0 20px;
    border-left:1px solid #ececec;

}

.funil-metrica:first-child{
    padding-left:0;
    border-left:none;
}

/* Badge colorido, mesmo desenho de .card-icon já usado em Comissões
   (.card-resumo) e Dashboard (.dash-card) — ícone branco sobre fundo
   colorido, cantos arredondados. Cores por métrica via modificadores
   abaixo, mesma paleta já estabelecida (verde/azul/roxo/laranja/
   vermelho GCA), pra não introduzir tom novo nenhum. */
.funil-metrica-icone{
    width:38px;
    height:38px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    color:#fff;
}

.funil-metrica-icone i{
    width:18px;
    height:18px;
}

.funil-metrica-icone--azul{ background:#2563eb; }
.funil-metrica-icone--verde{ background:#16a34a; }
.funil-metrica-icone--laranja{ background:#ea580c; }
.funil-metrica-icone--roxo{ background:#7c3aed; }
.funil-metrica-icone--vermelho{ background:#8B0000; }

.funil-metrica-texto{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.funil-metrica-rotulo{
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#999;
}

.funil-metrica-valor{
    font-size:19px;
    font-weight:700;
    color:#222;
    white-space:nowrap;
}

/* v34.2.3 — desempenho deixou de ser uma seção própria embaixo da
   faixa e virou o último item dela (pedido do usuário: "colocar essas
   informações na mesma linha de cima"), com margin-left:auto pra
   ficar visualmente separado do grupo de métricas numéricas, sem
   precisar de um divisor mais forte que os outros. Isso, mais o fim
   da seção própria com borda/padding abaixo da faixa, é o que reduz a
   altura do card — não um encolhimento dos ícones/valores. */
.funil-metrica--desempenho{
    margin-left:auto;
    padding-left:20px;
    border-left:1px solid #ececec;
}

.funil-metrica--desempenho .funil-metrica-texto{
    align-items:flex-end;
    text-align:right;
}

.funil-desempenho-fluxo{
    font-size:13px;
    font-weight:600;
    color:#333;
    white-space:nowrap;
}

.funil-desempenho-taxas{
    font-size:11.5px;
    color:#888;
    white-space:nowrap;
}


/* ===========================
   FILTROS
=========================== */

/* .card (css/cards.css) tem overflow:hidden — pensado pra recortar a
   barra colorida do ::before nos cantos arredondados. Isso cortava o
   popover "Mais filtros" (e o dropdown do Estágio dentro dele) sempre
   que ultrapassasse a borda do card — mesmo achado/correção já feita
   em .card-resumo (css/comissoes.css) e .cvc-card
   (css/calculadora-venda-carta.css), replicada aqui (v34.2.3 tinha
   ficado de fora, causando o bug "não consigo selecionar" reportado
   pelo usuário — o clique funcionava, o menu é que ficava cortado/
   invisível). Reabre overflow e dá o arredondamento ao ::before
   diretamente, em vez de depender do corte do pai. */
/* z-index abaixo de .funil-topo/.funil-resumo, mesmo motivo — aqui
   importa principalmente pro popover "Mais filtros" não ficar preso
   atrás de nada que venha depois dele no HTML (hoje só o board, que
   não tem backdrop-filter/contexto próprio — mas deixa explícito por
   consistência com os dois cards acima). */
.funil-filtros{
    margin-bottom:16px;
    transition:none;
    overflow:visible;
    position:relative;
    z-index:1;
}

.funil-filtros::before{
    border-radius:18px 18px 0 0;
}

/* Hierarquia visual (2026-09-11, referência aprovada pelo usuário) —
   .funil-topo e .funil-filtros são controles (ações/filtros), não dado
   de KPI, mas herdavam de .card (css/cards.css) o mesmo tratamento de
   "superfície-assinatura" dos cards de KPI: glass, sombra pesada e
   elevação no hover. Achata as duas pra ficarem mais leves que o
   Kanban abaixo — só a borda de .card permanece. .funil-resumo (faixa
   de métricas) fica de fora de propósito: é dado, não controle, e
   continua com o mesmo tratamento visual dos demais KPI cards do
   sistema. */
.funil-topo,
.funil-filtros{
    background:var(--gca-fundo-card-solido);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
}

.funil-topo:hover,
.funil-filtros:hover{
    transform:none;
}

.funil-filtros-linha{

    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:12px;

}

.funil-busca{
    width:240px;
    flex-shrink:0;
}

.funil-filtro-compacto{
    min-width:140px;
}

/* Pills de Modalidade/Intenção (.status-buttons/.status-btn
   reaproveitados de css/comissoes.css) — versão compacta pra caber
   numa barra de filtros mais apertada que a de Comissões, sem alterar
   o componente compartilhado em si. */
.funil-pills{
    gap:6px;
}

.funil-pills .status-btn{
    padding:8px 14px;
    font-size:12.5px;
}

/* v34.2.3 — Estágio saiu da linha e virou o conteúdo deste popover,
   pra barra de filtros caber numa linha só (pedido do usuário). Mesmo
   padrão de "fechar clicando fora" do painel de notificações
   (js/notificacoes.js) — só que aqui, ao contrário de lá, o conteúdo
   nunca é reconstruído por dentro, então não precisa da cautela extra
   de composedPath() (usada mesmo assim, por consistência). */
.funil-mais-filtros-wrapper{
    position:relative;
    flex-shrink:0;
}

.funil-btn-limpar-filtros{
    height:46px;
    flex-shrink:0;
}

.funil-btn-mais-filtros{
    position:relative;
    height:46px;
}

.funil-mais-filtros-badge{
    position:absolute;
    top:6px;
    right:6px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8B0000;
}

.funil-mais-filtros-painel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:60;

    min-width:220px;
    padding:14px;

    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.funil-mais-filtros-painel[hidden]{
    display:none;
}

.funil-mais-filtros-painel .funil-form-group{
    margin:0;
}

.funil-alternancia-view{

    display:flex;
    gap:2px;

    margin-left:auto;

    padding:3px;
    background:#f5f5f5;
    border-radius:10px;

}

.funil-view-btn{

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;
    border-radius:8px;
    background:none;
    color:#888;

    cursor:pointer;
    transition:.15s;

}

.funil-view-btn i{
    width:16px;
    height:16px;
}

.funil-view-btn:hover{
    color:#333;
}

.funil-view-btn.ativo{
    background:#fff;
    color:#8B0000;
    box-shadow:0 1px 4px rgba(0,0,0,.1);
}


/* ===========================
   LISTA (alternativa ao Kanban)
=========================== */

.funil-lista-container[hidden]{
    display:none;
}

.funil-lista-telefone{
    font-size:12px;
    color:#888;
}


/* ===========================
   ATENÇÃO
=========================== */

.funil-atencao{
    margin-top:16px;
    transition:none;
}

.funil-atencao[hidden]{
    display:none;
}

.funil-atencao-titulo{

    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:10px;

    font-size:13px;
    font-weight:700;
    color:#333;

}

.funil-atencao-titulo i{
    width:15px;
    height:15px;
    color:#c8860d;
}

.funil-atencao-itens{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.funil-atencao-item{

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    background:#fff8e8;
    border:1px solid #f5e1b0;
    border-radius:10px;

    font-size:12.5px;
    color:#7a5c1e;

}

.funil-atencao-item i{
    width:14px;
    height:14px;
    flex-shrink:0;
}


/* ===========================
   PILLS (Intenção)
=========================== */

.funil-pill{

    display:inline-block;
    flex-shrink:0;

    padding:2px 9px;

    border-radius:20px;

    font-size:11px;
    font-weight:600;
    white-space:nowrap;

}

.funil-pill--intencao-alta{
    background:#fde3e3;
    color:#b91c1c;
}

.funil-pill--intencao-media{
    background:#fef3d5;
    color:#b45309;
}

.funil-pill--intencao-baixa{
    background:#e5e7eb;
    color:#4b5563;
}


/* ===========================
   BOARD
=========================== */

.funil-board{

    display:flex;
    gap:16px;

    /* padding, não margin — margin-top colapsava com o margin-bottom de
       16px de .funil-filtros (achado verificando, o respiro não
       aparecia de verdade: max(16,6) sempre vencia pro maior). */
    padding-top:6px;

    background-color:var(--gca-fundo-app);

    overflow-x:auto;
    padding-bottom:10px;

}

/* [hidden] sozinho não bastava pra esconder o board (mesma causa-raiz
   já corrigida várias vezes no projeto — ver css/configuracoes.css):
   o "display:flex" acima, sem guarda, ganhava do [hidden]{display:none}
   nativo do navegador. Sem isto, alternar pra "Ver como lista" deixava
   o Kanban visível por baixo da tabela (achado numa auditoria). */
.funil-board[hidden]{
    display:none;
}

.funil-coluna{

    flex:0 0 270px;

    display:flex;
    flex-direction:column;

    background:#fafafa;
    border:1px solid #ececec;
    border-radius:14px;

    max-height:calc(100vh - 320px);

}

.funil-coluna.arrastando-sobre{
    border-color:#8B0000;
    background:#fbf0f0;
}

.funil-coluna-cabecalho{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;

    padding:14px 14px 10px;

}

.funil-coluna-titulo{
    font-size:13px;
    font-weight:700;
    color:#333;
}

.funil-coluna-contador{

    min-width:22px;
    padding:2px 7px;

    border-radius:999px;
    background:#ececec;
    color:#666;

    font-size:11.5px;
    font-weight:700;
    text-align:center;

}

.funil-coluna-lista{

    flex:1;

    display:flex;
    flex-direction:column;
    gap:8px;

    padding:0 10px 12px;

    overflow-y:auto;

}

.funil-coluna-vazia{
    padding:16px 6px;
    text-align:center;
    font-size:12px;
    color:#999;
}


/* ===========================
   EDIÇÃO DE ETAPAS (v34.2.x)
=========================== */

.funil-coluna-titulo-grupo{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0;
    overflow:hidden;
}

.funil-coluna-titulo{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.funil-coluna-cabecalho[draggable="true"]{
    cursor:grab;
}

.funil-coluna-cabecalho-acoes{
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
}

.funil-coluna-menu-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    padding:0;
    border:none;
    border-radius:6px;
    background:transparent;
    color:#999;
    cursor:pointer;
}

.funil-coluna-menu-btn:hover{
    background:#ececec;
    color:#555;
}

.funil-coluna-menu-btn i{
    width:15px;
    height:15px;
}

.funil-coluna-mover-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:22px;
    padding:0;
    border:none;
    border-radius:6px;
    background:transparent;
    color:#999;
    cursor:pointer;
}

.funil-coluna-mover-btn:hover{
    background:#ececec;
    color:#555;
}

.funil-coluna-mover-btn:disabled{
    color:#ddd;
    cursor:default;
}

.funil-coluna-mover-btn:disabled:hover{
    background:transparent;
}

.funil-coluna-mover-btn i{
    width:15px;
    height:15px;
}

/* Ocupa o lugar do botão "..." nas etapas travadas (venda ganha) —
   não é clicável de propósito, só informa por quê não há menu ali
   (ver menuBotaoHtml, js/funil-vendas.js). */
.funil-coluna-travada{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    color:#ccc;
    flex-shrink:0;
}

.funil-coluna-travada i{
    width:15px;
    height:15px;
}

.funil-etapa-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#999;
    flex-shrink:0;
}

.funil-etapa-badge i{
    width:13px;
    height:13px;
}

.funil-etapa-badge--venda{
    color:#1a7f37;
}

.funil-etapa-badge--perdido{
    color:#c62828;
}

/* Input de renomear o título da coluna — mesma tipografia do título
   que substitui, pra não "pular" o layout quando vira campo editável.
   Criar etapa nova passou a ser um modal (v34.2.x, ver "Nova Etapa"),
   não usa mais isto. */
.funil-coluna-titulo-input{
    font-size:13px;
    font-weight:700;
    color:#333;
    width:100%;
    min-width:0;
    border:1px solid #8B0000;
    border-radius:6px;
    padding:2px 6px;
    background:#fff;
}

/* Menu "..." da etapa — mesmo espírito visual de .funil-mais-filtros-painel,
   só que posicionado dinamicamente em JS (funilAbrirMenuEtapa) por cima
   do botão clicado, não relativo a um container fixo. */
.funil-etapa-menu-backdrop{
    position:fixed;
    inset:0;
    z-index:39;
    background:transparent;
}

.funil-etapa-menu{
    position:fixed;
    z-index:40;
    width:230px;
    padding:6px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.funil-etapa-menu-item{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    padding:8px 10px;
    border:none;
    border-radius:6px;
    background:transparent;
    color:#333;
    font-size:12.5px;
    text-align:left;
    cursor:pointer;
}

.funil-etapa-menu-item:hover{
    background:#f2f2f2;
}

.funil-etapa-menu-item i{
    width:15px;
    height:15px;
    flex-shrink:0;
}

.funil-etapa-menu-item--perigo{
    color:#c62828;
}


/* ===========================
   CARD
=========================== */

.funil-card{

    padding:12px 14px;

    background:#fff;
    border:1px solid #ececec;
    border-radius:10px;

    cursor:grab;
    transition:.15s;

}

.funil-card:hover{
    border-color:#ccc;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.funil-card.arrastando{
    opacity:.4;
}

.funil-card.somente-leitura{
    cursor:default;
}

.funil-card-nome{
    font-size:13px;
    font-weight:600;
    color:#222;
    margin-bottom:4px;
}

.funil-card-telefone{

    display:flex;
    align-items:center;
    gap:6px;

    font-size:12px;
    color:#777;

}

.funil-card-telefone i{
    width:12px;
    height:12px;
}

/* WhatsApp (pedido do usuário, 2026-08-30) — reaproveita a linha do
   telefone (mesmo dado, ação diferente) em vez de somar linha nova ao
   card. Badge verde preenchido (pedido do usuário, referência visual
   própria) — ícone branco sobre o verde oficial do WhatsApp, mesmo
   raciocínio de badge redondo já usado em outros ícones do sistema. */
.funil-card-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-left:auto;

    width:22px;
    height:22px;
    border-radius:50%;

    background:#25D366;
    color:#fff;

    transition:.15s;
}

.funil-card-whatsapp svg{
    width:13px;
    height:13px;
}

.funil-card-whatsapp:hover{
    background:#1EBE5A;
}

/* v34.2.2 (Funil Premium) — enriquecimento do card, todos os blocos
   abaixo são opcionais/condicionais (só aparecem se o lead tiver o
   dado) pra não inflar a altura de um lead cadastrado rápido, só com
   nome/telefone. */

.funil-card--parado{
    border-left:3px solid #d97706;
}

.funil-card-cabecalho{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:4px;
}

.funil-card-cabecalho .funil-card-nome{
    margin-bottom:0;
}

.funil-card-linha{

    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;

    margin-top:6px;

}

.funil-card-tag{

    display:inline-flex;
    align-items:center;
    gap:4px;

    padding:2px 8px;

    background:#f5f5f5;
    border-radius:20px;

    font-size:11px;
    font-weight:600;
    color:#666;

}

.funil-card-tag i{
    width:11px;
    height:11px;
}

.funil-card-credito{
    font-size:12px;
    font-weight:700;
    color:#333;
}

.funil-card-rodape{

    display:flex;
    align-items:center;
    gap:6px;

    margin-top:8px;
    padding-top:8px;

    border-top:1px solid #f2f2f2;

    font-size:11.5px;
    color:#999;

}

.funil-card-rodape i{
    width:12px;
    height:12px;
    flex-shrink:0;
}

.funil-card-rodape span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* v34.2.3 — card ganhou uma 2ª linha de rodapé possível (próxima ação
   + tempo na etapa, cada uma opcional/sempre-presente por si só — ver
   funilMontarCardHtml, js/funil-vendas.js). Quando as duas aparecem,
   só a primeira carrega a borda/respiro de separação da linha de cima
   (tag/crédito); a segunda vem colada, sem duplicar a borda. */
.funil-card-rodape + .funil-card-rodape{
    margin-top:2px;
    padding-top:0;
    border-top:none;
}

/* Indicador de "parado há tempo excessivo" — troca o texto normal
   ("{Etapa} há X dias") por um alerta compacto, sem aumentar a altura
   do card (mesma linha, só cor+ícone diferentes). */
.funil-card-rodape--alerta{
    color:#b45309;
    font-weight:600;
}

.funil-card-rodape--alerta i{
    color:#d97706;
}


/* ===========================
   MODAL PEQUENO (Novo Funil) / MÉDIO (Editar Lead)
=========================== */

.modal-pequeno{
    width:440px;
}

/* Editar Lead cresceu de 2 pra 9 campos (Funil Premium) — largo
   demais pra .modal-pequeno, mas não precisa dos 900px do padrão
   (Nova Venda) — tamanho intermediário próprio. */
.modal-medio{
    width:640px;
}

.funil-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.funil-form-group-full{
    grid-column:1 / -1;
}

/* Código do país + número do telefone lado a lado (pedido do usuário,
   2026-08-31) — os dois <input> herdam o estilo padrão de
   ".form-group input" (css/comissoes.css) por estarem dentro do mesmo
   .form-group, só precisam da largura fixa do código aqui. */
.funil-telefone-grupo{
    display:flex;
    gap:8px;
}

.funil-telefone-codigo{
    flex:0 0 72px;
    width:72px;
    text-align:center;
}

.funil-telefone-numero{
    flex:1 1 auto;
    min-width:0;
}

/* WhatsApp no modal (pedido do usuário, 2026-08-30; movido pro rodapé
   ao lado de Excluir em 2026-08-31 — versão anterior ficava como badge
   ao lado do rótulo "Telefone", ver histórico do arquivo). Botão de
   contorno verde (mesma base do .btn-secondary), só aparece em modo
   edição, com telefone válido — ver funilAbrirModalEdicaoLead,
   js/funil-vendas.js. */
.funil-btn-whatsapp-lead{
    display:flex;
    align-items:center;
    gap:6px;

    color:#1EBE5A;
    border-color:#25D366;
    text-decoration:none;

    transition:.15s;
}

.funil-btn-whatsapp-lead svg{
    width:15px;
    height:15px;
}

.funil-btn-whatsapp-lead:hover{
    background:#25D366;
    border-color:#25D366;
    color:#fff;
}

/* .btn-secondary (css/style.css) já define display:flex sem guarda —
   regra de autor vence o display:none padrão do navegador pro atributo
   hidden, mesma causa já documentada várias vezes neste projeto (ex.:
   .asn-btn-ja-paguei, css/assinaturas.css). */
.funil-btn-whatsapp-lead[hidden]{
    display:none;
}

/* .form-group (css/comissoes.css) só estiliza input/select — um
   <textarea> dentro dele ficava com a aparência crua do navegador.
   Mesmo visual dos outros campos, só com altura própria (auto, via
   rows) em vez dos 46px fixos. */
.funil-form-grid textarea{

    width:100%;
    min-width:0;

    padding:10px 14px;

    border:1px solid #d9d9d9;
    border-radius:10px;

    font-size:15px;
    font-family:inherit;

    resize:vertical;
    outline:none;

    transition:.2s;

}

.funil-form-grid textarea:focus{
    border-color:#8B1E3F;
}

.funil-lead-timestamps{

    margin-top:16px;

    display:flex;
    flex-direction:column;
    gap:2px;

    font-size:11.5px;
    color:#999;

}

.funil-lead-timestamps[hidden]{
    display:none;
}

.funil-btn-excluir-lead{
    margin-right:auto;
    color:#c62828;
}

/* Mesma causa-raiz de .funil-board[hidden] acima: este botão herda
   "display:flex" de .btn-secondary (css/style.css), sem guarda — sem
   isto, o botão "Excluir" aparecia até no modal de "Novo Lead" (achado
   numa auditoria), mesmo com btnExcluirLead.hidden=true corretamente
   definido em JS. */
#btnExcluirLead[hidden]{
    display:none;
}

/* Mesma causa-raiz — "Agendar compromisso" (sub-fase 3 da Agenda,
   2026-09-07) tem o mesmo problema: sem isto, ficaria visível até pra
   quem não tem acesso_beta, mesmo com .hidden=true corretamente
   definido em JS (funilAbrirModalEdicaoLead, js/funil-vendas.js). */
#btnAgendarCompromissoLead[hidden]{
    display:none;
}


/* ===========================
   MODAL: VENDA CONCLUÍDA
=========================== */

.funil-venda-concluida-cabecalho{
    display:flex;
    align-items:center;
    gap:14px;
}

.funil-venda-concluida-cabecalho > i{
    flex-shrink:0;
    width:22px;
    height:22px;
    padding:9px;
    border-radius:50%;
    background:#fff6e5;
    color:#e8a317;
}


/* =====================================================
   DARK PREMIUM
===================================================== */

/* [data-theme="dark-premium"] .card (css/cards.css) redefine box-shadow
   com um valor mais pesado que o padrão — precisa ser anulado aqui de
   novo, já que a regra não-temática acima (box-shadow:none) perde pra
   essa por especificidade igual + ordem de carga (cards.css vem antes
   no <head>, mas essa regra de lá tem o mesmo peso do seletor sozinho
   .funil-topo/.funil-filtros só no tema claro).

   Background também sobrescrito aqui, só no dark premium: no claro,
   --gca-fundo-card-solido (#FFFFFF) já contrasta bem contra o fundo da
   página (#F4F6F9); no escuro, o mesmo token (#1A1E24) fica perto
   demais de --gca-fundo-app (#171A1F) — diferença real, mas pequena
   demais pra ler como camada separada. --gca-fundo-elevado é o mesmo
   token já usado em todo o app pra superfície de controle (busca,
   botões do header, inputs) — mais coerente aqui (que também é
   controle) do que --gca-fundo-card-solido (documentado em tema.css
   como o tom de painel/tabela, não de toolbar). */
[data-theme="dark-premium"] .funil-topo,
[data-theme="dark-premium"] .funil-filtros{
    background:var(--gca-fundo-elevado);
    box-shadow:none;
}

[data-theme="dark-premium"] .funil-seletor-equipe{
    border-left-color:var(--gca-borda);
}

[data-theme="dark-premium"] .funil-aviso-leitura{
    color:#F2495C;
}

[data-theme="dark-premium"] .funil-coluna{
    background:var(--gca-fundo-elevado);
    border-color:var(--gca-borda-sutil);
}

[data-theme="dark-premium"] .funil-coluna.arrastando-sobre{
    border-color:#E63950;
    background:rgba(230,57,80,.08);
}

[data-theme="dark-premium"] .funil-coluna-titulo{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-coluna-contador{
    background:var(--gca-fundo-elevado-hover);
    color:var(--gca-texto-secundario);
}

[data-theme="dark-premium"] .funil-coluna-vazia{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-card{
    background:var(--gca-fundo-flutuante);
    border-color:var(--gca-borda-sutil);
}

[data-theme="dark-premium"] .funil-card:hover{
    border-color:var(--gca-borda);
}

[data-theme="dark-premium"] .funil-card-nome{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-card-telefone{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-btn-excluir,
[data-theme="dark-premium"] .funil-btn-excluir-lead{
    color:#f87171;
}

/* Sem isso, a regra genérica [data-theme="dark-premium"] .btn-secondary
   (css/style.css) — mais específica que a classe sozinha — sobrescreveria
   a cor/borda verde da marca (e o hover viraria vermelho, do botão
   secundário padrão). Verde da marca é o mesmo nos dois temas de
   propósito, mesmo raciocínio já aplicado a .funil-card-whatsapp. */
[data-theme="dark-premium"] .funil-btn-whatsapp-lead{
    color:#1EBE5A;
    border-color:#25D366;
}

[data-theme="dark-premium"] .funil-btn-whatsapp-lead:hover{
    background:#25D366;
    border-color:#25D366;
    color:#fff;
}

/* v34.2.2 (Funil Premium) */

[data-theme="dark-premium"] .funil-metrica{
    border-left-color:var(--gca-borda);
}

[data-theme="dark-premium"] .funil-metrica-icone--azul{ box-shadow:0 0 16px 2px rgba(37,99,235,.4); }
[data-theme="dark-premium"] .funil-metrica-icone--verde{ box-shadow:0 0 16px 2px rgba(22,163,74,.4); }
[data-theme="dark-premium"] .funil-metrica-icone--laranja{ box-shadow:0 0 16px 2px rgba(234,88,12,.4); }
[data-theme="dark-premium"] .funil-metrica-icone--roxo{ box-shadow:0 0 16px 2px rgba(124,58,237,.4); }

/* Vermelho GCA no dark premium usa o tom próprio do tema (#E63950),
   não o #8B0000 do claro — mesma convenção já seguida em todo o
   sistema (ver comissoes.css). */
[data-theme="dark-premium"] .funil-metrica-icone--vermelho{
    background:#E63950;
    box-shadow:0 0 16px 2px rgba(230,57,80,.4);
}

[data-theme="dark-premium"] .funil-metrica-rotulo{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-metrica-valor{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-desempenho-fluxo{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-desempenho-taxas{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-mais-filtros-badge{
    background:#E63950;
}

[data-theme="dark-premium"] .funil-mais-filtros-painel{
    background:var(--gca-fundo-flutuante);
    border-color:var(--gca-borda-sutil);
    box-shadow:0 8px 24px rgba(0,0,0,.4);
}

[data-theme="dark-premium"] .funil-busca,
[data-theme="dark-premium"] .funil-form-grid textarea{
    background:var(--gca-fundo-elevado);
    border-color:var(--gca-borda-sutil);
    color:var(--gca-texto-principal);
    color-scheme:dark;
}

[data-theme="dark-premium"] .funil-form-grid textarea:focus{
    border-color:#8B1E3F;
}

[data-theme="dark-premium"] .funil-lead-timestamps{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-alternancia-view{
    background:var(--gca-fundo-elevado);
}

[data-theme="dark-premium"] .funil-view-btn{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-view-btn:hover{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-view-btn.ativo{
    background:var(--gca-fundo-flutuante);
    color:#F2495C;
}

[data-theme="dark-premium"] .funil-atencao-item{
    background:rgba(217,119,6,.12);
    border-color:rgba(217,119,6,.3);
    color:#fbbf24;
}

[data-theme="dark-premium"] .funil-atencao-titulo{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-pill--intencao-alta{
    background:rgba(220,38,38,.18);
    color:#f87171;
}

[data-theme="dark-premium"] .funil-pill--intencao-media{
    background:rgba(217,119,6,.18);
    color:#fbbf24;
}

[data-theme="dark-premium"] .funil-pill--intencao-baixa{
    background:rgba(255,255,255,.09);
    color:var(--gca-texto-secundario);
}

[data-theme="dark-premium"] .funil-card--parado{
    border-left-color:#d97706;
}

[data-theme="dark-premium"] .funil-card-tag{
    background:var(--gca-fundo-elevado-hover);
    color:var(--gca-texto-secundario);
}

[data-theme="dark-premium"] .funil-card-credito{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-card-rodape{
    border-top-color:var(--gca-borda);
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-card-rodape--alerta{
    color:#fbbf24;
}

[data-theme="dark-premium"] .funil-card-rodape--alerta i{
    color:#fbbf24;
}

[data-theme="dark-premium"] .funil-coluna-menu-btn{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-coluna-menu-btn:hover{
    background:var(--gca-fundo-elevado-hover);
    color:var(--gca-texto-secundario);
}

[data-theme="dark-premium"] .funil-coluna-mover-btn{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-coluna-mover-btn:hover{
    background:var(--gca-fundo-elevado-hover);
    color:var(--gca-texto-secundario);
}

[data-theme="dark-premium"] .funil-coluna-mover-btn:disabled{
    color:var(--gca-borda-sutil);
}

[data-theme="dark-premium"] .funil-coluna-mover-btn:disabled:hover{
    background:transparent;
}

[data-theme="dark-premium"] .funil-etapa-badge{
    color:var(--gca-texto-terciario);
}

[data-theme="dark-premium"] .funil-coluna-travada{
    color:var(--gca-borda-sutil);
}

[data-theme="dark-premium"] .funil-etapa-badge--venda{
    color:#4ade80;
}

[data-theme="dark-premium"] .funil-etapa-badge--perdido{
    color:#f87171;
}

[data-theme="dark-premium"] .funil-venda-concluida-cabecalho > i{
    background:rgba(232,163,23,.16);
}

[data-theme="dark-premium"] .funil-coluna-titulo-input{
    background:var(--gca-fundo-elevado);
    border-color:#E63950;
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-etapa-menu{
    background:var(--gca-fundo-flutuante);
    border-color:var(--gca-borda-sutil);
    box-shadow:0 8px 24px rgba(0,0,0,.4);
}

[data-theme="dark-premium"] .funil-etapa-menu-item{
    color:var(--gca-texto-principal);
}

[data-theme="dark-premium"] .funil-etapa-menu-item:hover{
    background:var(--gca-fundo-elevado-hover);
}

[data-theme="dark-premium"] .funil-etapa-menu-item--perigo{
    color:#f87171;
}


/* ===========================
   RESPONSIVO
=========================== */

@media(max-width:767px){

    .funil-topo-linha{
        flex-direction:column;
        align-items:stretch;
    }
    .funil-btn-novo-lead{
        margin-left:0;
    }
    .funil-seletor-equipe{
        padding-left:0;
        border-left:none;
    }

    /* v34.2.2 (Funil Premium) — faixa de métricas: 3 por linha em vez
       de 1 fileira só, sem os divisores verticais (ficam estranhos
       quebrando linha) — troca por uma borda inferior sutil por item. */
    .funil-metrica{
        flex:1 1 30%;
        border-left:none;
        padding:6px 0;
    }

    .funil-metrica:first-child{
        padding-left:0;
    }

    /* Desempenho: no mobile some o margin-left:auto (não faz sentido
       com o wrap em 30%) e volta a ocupar a linha inteira, alinhado à
       esquerda como os outros itens, com uma borda superior no lugar
       da lateral (mesma troca já feita pros demais .funil-metrica). */
    .funil-metrica--desempenho{
        flex:1 1 100%;
        margin-left:0;
        padding-left:0;
        padding-top:8px;
        margin-top:4px;
        border-left:none;
        border-top:1px solid #ececec;
    }

    .funil-metrica--desempenho .funil-metrica-texto{
        align-items:flex-start;
        text-align:left;
    }

    .funil-desempenho-fluxo{
        font-size:13px;
        white-space:normal;
    }

    .funil-desempenho-taxas{
        white-space:normal;
    }

    .funil-filtros-linha{
        flex-direction:column;
        align-items:stretch;
    }

    .funil-busca{
        width:100%;
    }

    .funil-filtro-compacto{
        min-width:0;
        width:100%;
    }

    .funil-alternancia-view{
        margin-left:0;
        align-self:flex-start;
    }

}