/* ============================================================
   COMPONENTES — botao, campo, cartao, gaveta, tabela, etiqueta.
   Nenhum valor literal: tudo vem de tokens.css.
============================================================ */

/* --- botao ------------------------------------------------------------- */
.btn {
  min-height: var(--toque);
  padding: 0 var(--e4);
  border: 1px solid var(--acao);
  border-radius: var(--raio);
  background: var(--acao); color: var(--sobre-acao);
  font: 700 var(--t-corpo)/1 var(--fonte);
  cursor: pointer;
}
.btn:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-secundario {
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--borda);
}
.btn-secundario:hover { background: var(--realce); border-color: var(--texto-apoio); }

.btn-largo { width: 100%; }

/* --- campo ------------------------------------------------------------- */
.campo { display: block; margin-bottom: var(--e4); }
.campo > span {
  display: block; margin-bottom: var(--e1);
  font: 700 var(--t-rotulo)/var(--lh-rotulo) var(--fonte);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-apoio);
}
/* `:not([type=checkbox]):not([type=radio])` nao e purismo.

   Sem isso, a caixa de marcar herdava `width: 100%` e `min-height: 44px` e virava
   um retangulo gigante: no painel de filtro as opcoes apareciam como blocos
   vazios com o rotulo jogado para longe, e nao dava para saber o que estava
   marcado. Um campo de texto e uma caixa de marcar so parecem a mesma coisa no
   nome da tag. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select, .campo textarea {
  width: 100%; min-height: var(--toque);
  padding: 0 var(--e3);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto);
  font: var(--t-corpo)/var(--lh-corpo) var(--fonte);
}
.campo textarea { min-height: 88px; padding: var(--e2) var(--e3); resize: vertical; }

/* A caixa de marcar mantem o tamanho nativo e nao estica. O alvo de toque de
   44px vem do rotulo que a envolve (.opcao-filtro), nao do quadradinho — e o
   jeito certo: o dedo acerta a area toda, e o desenho continua legivel. */
.campo input[type="checkbox"],
.campo input[type="radio"] { width: auto; min-height: 0; flex: 0 0 auto; margin: 0; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--acao); outline: none;
  box-shadow: 0 0 0 2px rgba(1,122,97,.18);
}
.campo .erro-campo { display: block; margin-top: var(--e1); color: var(--erro); font-size: var(--t-apoio); }

/* --- cartao ------------------------------------------------------------
   Branco com borda, NUNCA cinza preenchido. Cinza empilhado e o que faz
   painel interno parecer sujo. */
.cartao {
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo);
  padding: var(--e3);
  margin-bottom: var(--e2);
}
.cartao-clicavel { cursor: pointer; width: 100%; text-align: left; }
.cartao-clicavel:hover { background: var(--realce); }
.cartao .linha1 { font-weight: 700; }
.cartao .linha2, .cartao .linha3 { color: var(--texto-apoio); font-size: var(--t-apoio); }

/* --- etiqueta de estagio ---------------------------------------------- */
.etiqueta {
  display: inline-block; padding: 2px var(--e2);
  border-radius: var(--raio-pequeno);
  font: 700 var(--t-rotulo)/var(--lh-rotulo) var(--fonte);
  border: 1px solid currentColor;
}
.etiqueta[data-estagio="novo"]      { color: var(--neutro); }
.etiqueta[data-estagio="grupo"]     { color: var(--texto); }
.etiqueta[data-estagio="engajado"]  { color: var(--alerta); }
.etiqueta[data-estagio="comprou"]   { color: var(--positivo); }
.etiqueta[data-estagio="perdido"]   { color: var(--neutro); opacity: .7; }

/* --- gaveta (filtro no celular) ---------------------------------------
   Sobe de baixo em vez de ocupar barra lateral: no celular a lateral rouba
   largura da lista, que e o conteudo. */
.gaveta-fundo {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0,0,0,.4);
}
.gaveta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-height: 85vh; overflow-y: auto;
  padding: var(--e4);
  border-top: 1px solid var(--borda);
  border-radius: var(--raio) var(--raio) 0 0;
  background: var(--fundo);
}
.gaveta h2 { margin-bottom: var(--e4); }

/* Opcao de filtro (caixa de marcar). No celular ela obedece ao alvo de toque de
   44px, que e o dedo. O desktop reduz isso em desktop.css — la existe cursor, e
   44px por linha somavam 604px de painel, empurrando a tabela para fora da
   dobra. Fica como classe, e nao como estilo inline no JS, porque inline vence
   folha e tiraria do CSS a possibilidade de decidir densidade por tamanho. */
.opcao-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque);
  margin-right: var(--e4);
}

/* --- funil (quadro de estagios) ---------------------------------------
   Este bloco descreve o CELULAR: UMA coluna por vez ocupando a largura toda,
   abas no topo para saltar, e o deslize horizontal trocando de coluna. Quatro
   colunas lado a lado num telefone dariam 90px cada uma e rolagem horizontal de
   pagina — que ninguem usa. E o padrao do Trello, pelo mesmo motivo.

   O deslize NAO tem um listener de toque sequer: e `overflow-x` com
   `scroll-snap`. Assim o gesto e o do proprio navegador, com a inercia e o
   ricochete certos de cada sistema, o teclado e o leitor de tela continuam
   rolando a faixa, e nao ha nada de gesto para manter. */
.funil-abas {
  /* NA BASE, logo acima da navegacao do app: o polegar alcanca a base, e trocar
     de coluna e a acao mais repetida desta tela. No topo, cada troca pedia que a
     mao subisse a tela inteira.

     A hierarquia entre as duas barras e o que faz isso funcionar em vez de
     virar amontoado: a de fora diz onde voce esta NO SISTEMA, esta diz onde voce
     esta NESTA TELA. Por isso ela e mais baixa e mais leve, e so existe aqui. */
  order: 2;
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}
.funil-aba {
  /* Quatro colunas IGUAIS, e nao uma tira que rola. Sao quatro estagios fixos
     para sempre, entao dividir a largura resolve — e aba que so aparece rolando
     fica invisivel justo na base, onde o dedo mora. O rotulo corta com
     reticencia quando nao couber; a contagem, que e o que muda, nunca corta. */
  flex: 1 1 0; min-width: 0;
  min-height: var(--toque);
  padding: 0 var(--e1);
  border: 0; background: none; cursor: pointer;
  font: var(--t-rotulo)/1.2 var(--fonte);
  color: var(--texto-apoio);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.funil-aba .funil-rotulo {
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Mesma marcacao da barra de navegacao: verde, negrito e um traco embaixo. O
   sistema ja ensinou esse sinal de "voce esta aqui"; nao inventa outro. */
.funil-aba[aria-current="true"] {
  color: var(--acao); font-weight: 700;
  box-shadow: inset 0 2px 0 var(--acao);
}
.funil-conta { color: var(--texto-apoio); font-weight: 400; }

/* O funil e uma coluna: a faixa de cartoes cresce, as abas ficam na base.
   `height: 100%` porque o pai (.tela.com-funil) ja tem altura definida pelo
   miolo — a corrente de alturas comeca em #appRoot e desce inteira. */
.funil {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}

.funil-faixa {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* `contain` para o deslize na ultima coluna nao virar o "voltar" do
     navegador — o gesto morre na faixa, que e onde ele significa alguma coisa. */
  overscroll-behavior-x: contain;
  /* SEM max-height calculada. Ela era `calc(100dvh - 330px)`, e o numero estava
     31px curto: a faixa terminava por baixo da barra de navegacao e os ultimos
     32px de cada coluna viravam area morta — o toque ali disparava o botao da
     nav em vez do cartao. Agora a altura vem do flex: a faixa pega o que sobra
     dentro de `.funil`, que pega o que sobra dentro do miolo. Ninguem soma
     barras a mao, e nada quebra quando uma delas mudar de altura. */
  flex: 1 1 auto;
  min-height: 0;
}
.funil-coluna {
  flex: 0 0 100%;                 /* uma coluna por tela, exatamente — e o que faz o snap ser inteiro */
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  min-width: 0;
}
/* No celular o rotulo da coluna ja esta na aba marcada; repeti-lo aqui custaria
   uma faixa de altura para dizer o que ja esta dito. O desktop, que nao tem
   abas, mostra este cabecalho. */
.funil-cabecalho { display: none; }

.funil-corpo {
  flex: 1; min-height: 0;         /* sem `min-height: 0` o filho nao encolhe e o overflow nunca acontece */
  overflow-y: auto;
  padding: var(--e1);             /* respiro para o anel de foco nao ser cortado pelo overflow */
}
.funil-vazio {
  margin: 0; padding: var(--e5) var(--e3);
  text-align: center;
  color: var(--texto-apoio); font-size: var(--t-apoio);
}

/* O cartao do quadro nao repete a etiqueta de estagio: a coluna acima ja diz
   isso. O corpo abre a ficha; o "Mover" ao lado e outro alvo, e por isso e um
   irmao e nao um filho. */
.funil-cartao {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--e2);
  padding: var(--e2);
}
.funil-abre {
  flex: 1 1 auto; min-width: 0;
  min-height: var(--toque);
  border: 0; background: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.funil-revisar { color: var(--erro); }

.funil-mover {
  flex: 0 0 auto;
  min-height: var(--toque); min-width: var(--toque);   /* o dedo, nao a palavra, define o tamanho */
  padding: 0 var(--e2);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto-apoio);
  font: var(--t-rotulo)/1 var(--fonte);
  cursor: pointer;
}
.funil-mover:hover { background: var(--realce); color: var(--texto); }

/* Os destinos abrem DENTRO do cartao, e nao numa gaveta. A gaveta vira painel
   fixo no desktop (desktop.css), entao um menu por cartao dentro dela
   apareceria longe do cartao que o abriu — e um menu tem que sair de onde foi
   pedido. Ocupando a linha inteira, ele empurra o resto para baixo em vez de
   flutuar por cima de outros cartoes. */
.funil-destinos { flex: 1 0 100%; }
.funil-destino {
  display: block; width: 100%;
  min-height: var(--toque);
  margin-top: var(--e1);
  padding: 0 var(--e3);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo); color: var(--texto);
  font: var(--t-corpo)/1 var(--fonte);
  text-align: left; cursor: pointer;
}
.funil-destino:hover { background: var(--realce); }
/* "Perdido" nao e uma coluna vizinha: e a saida do quadro. Separado por um
   espaco maior e em vermelho para nao ser tocado no lugar de "Comprou". */
.funil-destino-saida { margin-top: var(--e2); color: var(--erro); }

/* --- tabela (existe, mas so aparece no desktop) ----------------------- */
.tabela { display: none; }

/* --- toast ------------------------------------------------------------- */
.toast {
  position: fixed; left: var(--e4); right: var(--e4);
  bottom: calc(var(--toque) + var(--e4)); z-index: 30;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--fundo);
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
.toast[data-tipo="erro"]     { border-color: var(--erro);  color: var(--erro); }
.toast[data-tipo="sucesso"]  { border-color: var(--acao);  color: var(--acao); }

/* --- porta de entrada ---------------------------------------------------

   Esta tela tem UM trabalho: deixar passar quem ja e conhecido. Sao sete
   pessoas com conta; ninguem se cadastra, ninguem e persuadido, e a troca de
   senha acontece no painel do Supabase. Nao ha nada a vender aqui.

   Por isso ela e alinhada A ESQUERDA, simbolo incluido, num eixo so. Login
   centralizado e a linguagem de app de consumo; alinhado a esquerda le como
   ficha, como documento — que e o registro do resto do produto, denso e
   tabular. Uma tela de login centralizada seria a unica composicao centrada
   do sistema inteiro.

   No CELULAR nao ha cartao: o formulario e a pagina. Um cartao de 360px dentro
   de uma tela de 375px deixa 7px de margem de cada lado, e 7px nao le como
   respiro, le como erro. O cartao e um acrescimo do desktop — que e onde ele
   tem o que fazer, separando a porta do lado de fora.
------------------------------------------------------------------------- */
.login-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex;
  align-items: center; justify-content: center;
  padding: var(--e5) var(--e4);
  background: var(--fundo);
}

.login-caixa {
  width: 100%; max-width: 340px;
  /* Sobe do centro geometrico. O centro OPTICO de um bloco fica um pouco acima
     do meio, e no celular isso ainda abre espaco para o teclado. */
  margin-bottom: 8vh;
}

/* A marca ancora o eixo: mesma margem esquerda dos campos e do botao. */
.login-caixa .marca-login {
  margin: 0 0 var(--e6) 0;
  width: 44px; height: 44px;
}

/* Rotulo colado no seu campo, e folga maior ENTRE os campos. E o agrupamento
   que faz a leitura: rotulo e campo sao uma coisa so, campos sao coisas
   diferentes. Antes os dois espacos eram iguais e tudo lia como uma lista. */
.login-caixa .campo { margin-bottom: var(--e5); }
.login-caixa .campo > span {
  margin-bottom: 6px;
  font-size: 11px; letter-spacing: .08em;
}

/* 16px, e nao os 15px do corpo: abaixo de 16px o iOS DA ZOOM no campo ao focar,
   e a pessoa entra no sistema com a tela torta. */
.login-caixa .campo input { font-size: 16px; }

.login-caixa .btn-largo { margin-top: var(--e5); }

/* O erro e um estado, nao uma legenda: barra na lateral em vez de texto solto.
   Fica entre os campos e o botao, no caminho de volta do olho. */
.login-erro {
  margin: 0 0 var(--e4) 0;
  padding: var(--e2) 0 var(--e2) var(--e3);
  border-left: 2px solid var(--erro);
  color: var(--erro);
  font-size: var(--t-apoio); line-height: var(--lh-apoio);
}

/* --- a tela de leads em modo funil vira coluna de altura definida -------
   `:not([hidden])` porque `.tela.com-funil` empata em especificidade com
   `.tela[hidden]` do base.css e, vindo depois na ordem das folhas, venceria —
   a tela deixaria de ser escondida. Foi exatamente esse o erro que ja quebrou a
   navegacao do desktop uma vez, e ha teste guardando.

   `height: 100%` faz a corrente de alturas chegar ate o quadro: #appRoot tem
   100dvh, o miolo pega o resto, a tela pega o miolo, e o .funil pede flex:1
   dentro dela. Ninguem soma barra nenhuma. */
.tela.com-funil:not([hidden]) {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
}
/* O quadro e a unica parte que cresce; busca, acoes e contagem tem o tamanho
   que tem. */
.tela.com-funil > #leadResultado { flex: 1 1 auto; min-height: 0; }

/* A faixa rola, mas nao mostra barra de rolagem.

   As abas na base ja dizem em que coluna a pessoa esta e quantas ha — a barra
   repetiria isso com menos clareza e comendo altura util. Em carrossel com
   `scroll-snap` e indicador proprio, a barra e ruido.

   A rolagem em si continua inteira: dedo, roda do mouse, teclado e leitor de
   tela nao dependem da barra estar visivel. */
.funil-faixa { scrollbar-width: none; }
.funil-faixa::-webkit-scrollbar { display: none; }