/* CSS do Painel NF. Nenhum valor visual solto: todo numero de cor, espacamento, raio, sombra,
   peso, tamanho de fonte, espessura e duracao vem de app/css/tokens.css (regra do §6.0). Onde
   faltou token, ele foi ACRESCENTADO la, com comentario, em vez de escrito direto aqui.

   AS TRES DECISOES QUE EXPLICAM O RESTO DO ARQUIVO
   1. SEM SOMBRA NA MESA DE TRABALHO. A marca pede que a sofisticacao venha da tipografia e do
      espaco em branco, nunca de efeito. Entao cartao dentro do painel e branco com FIO, nao
      branco flutuando: --s-1/--s-2 sumiram do conteudo e sobraram so onde algo de fato paira por
      cima da pagina (a ficha lateral, a gaveta do menu no celular, o cartao de entrada).
   2. DOIS PLANOS, e so dois. Nevoa e a moldura (menu, fundo da entrada); branco e a mesa
      (conteudo). O fio de --linha separa os dois. Nao ha um terceiro tom de cinza em lugar
      nenhum.
   3. COR QUENTE SO MEDE TEMPO. Ambar e vermelho aparecem em duas coisas: a tarja de espera (e o
      gargalo, que e a mesma ideia aplicada ao funil) e o erro do proprio sistema. Nenhum botao,
      nenhum cabecalho, nenhuma borda decorativa usa cor quente. A explicacao completa esta no
      topo de tokens.css. */

* {
  box-sizing: border-box;
}

/* Varios componentes definem display proprio (flex/grid/inline-flex), que sobrescreveria o
   "display: none" que o navegador da de graca pro atributo `hidden`. Sem esta regra, esconder
   uma tela com `el.hidden = true` nao esconderia nada visualmente. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-3);
  font-weight: var(--peso-corpo);
  line-height: 1.5;
}

/* Foco de teclado visivel em TUDO que recebe foco, uma regra so. `:focus-visible` (e nao
   `:focus`) para o contorno aparecer para quem navega pelo teclado sem piscar a cada clique de
   mouse. */
:focus-visible {
  outline: 2px solid var(--acao);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Primeiro elemento focavel da pagina: pula o menu inteiro e cai no conteudo. Fica escondido ate
   receber foco, entao nao ocupa espaco para quem usa mouse. */
.pular {
  position: absolute;
  left: var(--e-3);
  top: var(--e-3);
  z-index: 40;
  transform: translateY(-200%);
  background: var(--acao);
  color: var(--texto-sobre-acao);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-1);
  font-size: var(--fs-2);
  font-weight: var(--peso-rotulo);
  text-decoration: none;
  transition: transform var(--transicao);
}

.pular:focus {
  transform: none;
}

/* Texto que existe so para leitor de tela (rotulo de campo que a interface mostra por outro
   meio). Nunca `display:none`, que tiraria do leitor de tela tambem. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: calc(var(--borda) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==== O ICONE, uma regra so para o produto inteiro ================================
   O desenho vem de app/js/icones.js (Lucide vendorizado, traco 1,5, currentColor). O CSS so
   resolve o alinhamento: `vertical-align` nao acerta um SVG dentro de linha de texto, e sem esta
   regra cada tela ajustava o seu com margem propria, que e exatamente a inconsistencia que a
   §6.0 proibe. A COR nunca e escrita aqui: `currentColor` faz o icone herdar a cor do texto ao
   lado, e e isso que o faz funcionar em qualquer fundo sem retrabalho. */
.icone {
  display: block;
  flex: none;
}

/* A caixa que envolve o icone quando ele vive dentro de um botao, de um selo ou de uma linha de
   texto: e ela que alinha o desenho pelo centro do texto vizinho. */
.icone-caixa,
.botao__icone {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: inherit;
}

/* ==== O rotulo de bloco: ——• NOME, o dispositivo da marca ==========================
   Linha fina + bolinha preenchida + caixa alta espacada. Desenhado em CSS puro (um degrade
   linear para o traco, um radial para o ponto), sem imagem e sem fonte de icone. Ele marca o
   inicio de cada bloco de informacao e NAO aparece em mais lugar nenhum: repetido demais viraria
   enfeite e pararia de dizer "comeca aqui". */
.rotulo-bloco {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}

.rotulo-bloco::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 5px;
  background:
    linear-gradient(currentColor, currentColor) left center / calc(100% - 6px) var(--borda) no-repeat,
    radial-gradient(circle closest-side at right center, currentColor 99%, transparent 100%) right center /
      5px 5px no-repeat;
}

/* ==== Topo: SO no celular =========================================================
   O desenho aprovado (D-P12) e o layout do painel v1: a marca mora no alto da BARRA LATERAL, em
   todas as telas, e nao existe barra de cima no computador. No celular a lateral vira gaveta, e
   ai a barra de cima volta a fazer falta: e ela que carrega o botao da gaveta e diz em qual
   produto a pessoa esta enquanto o menu esta fechado. Por isso ela nasce escondida aqui e so
   aparece dentro da media query de tela estreita. */

.topo {
  display: none;
  position: sticky;
  top: 0;
  z-index: 10;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  border-bottom: var(--borda) solid var(--linha);
}

body[data-estado="login"] .topo {
  display: none;
}

.topo__abrir-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo-toque); /* §6.0: alvo de toque de 44px no celular */
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--tinta);
  background: transparent;
  border: var(--borda) solid var(--linha-2);
  border-radius: var(--r-1);
  padding: var(--e-1) var(--e-2);
  cursor: pointer;
}

/* ==== A MARCA (§6.0, "Marca no produto vendido") ==================================
   "A logo e a que o produto ja usa hoje: PAINEL NF, com NF em azul e PAINEL em navy, e
   'Gestao de Leads' como descritor logo abaixo. Fica no topo da barra lateral, em todas as
   telas, para todo usuario."

   O AZUL DO NF E EXCECAO DELIBERADA, e a spec avisa quem for ler este arquivo: "Ele e cor de
   MARCA e vive so na logo. A cor de ACAO da interface continua sendo outra. Quem ler o CSS nao
   deve 'corrigir' a logo." Por isso ele vem de --azul-logo, um token que NAO aponta para --acao:
   no dia em que o dono decidir trocar a cor de acao, a logo continua azul sozinha. */

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-1);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  color: var(--tinta);
}

.marca__nf {
  color: var(--azul-logo);
}

.marca--compacta {
  font-size: var(--fs-2);
}

/* O descritor, logo abaixo do wordmark. Ele diz o que o produto E, e o wordmark diz como ele se
   chama: sem ele, "PAINEL NF" nomeia sem explicar. */
.marca__descritor {
  margin: var(--e-1) 0 0;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* ==== A BOLINHA DE STATUS (§6.0) ==================================================
   "A bolinha de status NAO faz parte da logo. Ela e componente de interface que fica ao lado:
   verde tudo certo, ambar atencao, vermelho numero desconectado; clicavel, abrindo o detalhe; e
   sempre com rotulo em texto, NUNCA SO COR."

   O rotulo em texto nao e opcional e nao esta atras de hover: ele fica escrito ao lado da
   bolinha o tempo inteiro. Cor sozinha nao e informacao para quem nao distingue verde de
   vermelho, e e a mesma razao pela qual a tarja de espera deste painel carrega largura junto da
   cor. Quem preenche o texto e app/js/status.js, do dado do servidor. */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-0) var(--e-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-pilula);
  background: var(--superficie);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-1);
  font-weight: var(--peso-rotulo);
  color: var(--tinta-2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transicao);
}

.status:hover {
  border-color: var(--linha-2);
}

.status__bolinha {
  flex: none;
  width: var(--e-2);
  height: var(--e-2);
  border-radius: var(--r-pilula);
  background: var(--tinta-2);
}

.status[data-nivel="ok"] {
  color: var(--ok);
  border-color: var(--ok-linha);
  background: var(--ok-fundo);
}

.status[data-nivel="ok"] .status__bolinha {
  background: var(--ok);
}

.status[data-nivel="atencao"] {
  color: var(--atencao);
  border-color: var(--atencao-linha);
  background: var(--atencao-fundo);
}

.status[data-nivel="atencao"] .status__bolinha {
  background: var(--atencao-mancha);
}

.status[data-nivel="erro"] {
  color: var(--erro);
  border-color: var(--erro-linha);
  background: var(--erro-fundo);
}

.status[data-nivel="erro"] .status__bolinha {
  background: var(--erro);
}

/* O detalhe que o clique abre. Ele fica dentro do fluxo do menu, empurrando as secoes para
   baixo, em vez de flutuar por cima: no celular um balao flutuante fica meio fora da tela, e
   este texto e curto o bastante para caber. */
.status__detalhe {
  margin: var(--e-2) 0 0;
  padding: var(--e-2);
  border-radius: var(--r-1);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  font-size: var(--fs-1);
  line-height: 1.45;
  color: var(--tinta-2);
}

/* ==== A moldura e a mesa ========================================================== */

.quadro {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* A barra lateral GRUDA no alto e ocupa a altura da janela, como no painel v1: ela e navegacao,
   e navegacao que sai da tela quando a pessoa desce a pagina obriga a subir tudo de volta so
   para trocar de secao. Rolagem propria (`overflow-y`) para o rodape de sessao continuar
   alcancavel em janela baixa. */
.menu {
  flex: none;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  width: var(--menu-largura);
  background: var(--fundo);
  border-right: var(--borda) solid var(--linha);
  padding: var(--e-4) var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

body[data-estado="login"] .menu,
body[data-estado="login"] .menu-veu {
  display: none;
}

/* O bloco da marca no alto da barra lateral: wordmark + bolinha na primeira linha, descritor e
   nome da empresa embaixo. */
.menu__marca {
  display: flex;
  flex-direction: column;
}

.menu__marca-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  flex-wrap: wrap;
}

/* O NOME DA EMPRESA CLIENTE como texto secundario, embaixo do wordmark (§6.0): "para a pessoa
   saber em qual conta esta, e e o que o seletor de empresa troca". E a informacao que responde
   "estou no cliente certo?" antes de qualquer numero da tela. */
.menu__empresa {
  margin: var(--e-2) 0 0;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-2);
  font-weight: var(--peso-rotulo);
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.menu__seletor {
  margin-top: var(--e-2);
  width: 100%;
  min-height: var(--alvo-toque);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha-2);
  border-radius: var(--r-1);
  padding: var(--e-1) var(--e-2);
}

.menu__secoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

/* O rodape empurra a si mesmo para o fim da coluna: quem esta logado e a saida ficam embaixo, do
   jeito que o painel v1 faz e a equipe ja conhece. */
.menu__rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: var(--borda) solid var(--linha);
}

.menu__usuario {
  font-size: var(--fs-1);
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.menu__grupo {
  padding: 0 var(--e-2);
}

.menu__lista {
  list-style: none;
  margin: var(--e-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo-toque); /* §6.0: o mesmo alvo de 44px vale no computador, sem prejuizo */
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-1);
  color: var(--tinta);
  text-decoration: none;
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  transition: background var(--transicao);
}

.menu__item:hover {
  background: var(--superficie);
}

/* O item ativo NAO ganha faixa lateral de proposito. Faixa lateral e o vocabulario da tarja de
   espera, e ela significa uma coisa so neste painel: tempo parado. Usar o mesmo desenho para
   "voce esta aqui" gastaria o sinal. O item ativo se distingue por superficie e por cor de acao,
   que e o gesto do painel v1 aprovado na D-P12. */
.menu__item--ativo {
  background: var(--acao-fundo);
  color: var(--acao-tinta);
  font-weight: var(--peso-rotulo);
}

.menu__icone {
  flex: none;
  display: flex;
  color: var(--tinta-2);
}

.menu__item--ativo .menu__icone {
  color: var(--acao-tinta);
}

.menu-veu {
  display: none;
}

#conteudo {
  flex: 1;
  min-width: 0;
  background: var(--superficie);
  padding: var(--e-5) var(--e-4);
}

body[data-estado="login"] #conteudo {
  background: var(--fundo);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.secao {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  max-width: var(--largura-conteudo-larga);
}

.secao__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  flex-wrap: wrap;
}

/* O bloco de titulo cresce ate ocupar a linha; sem isto ele encolhe para o tamanho do maior
   filho e a frase de apoio quebra cedo demais, em duas linhas curtas. */
.secao__topo > :first-child {
  flex: 1 1 24rem;
  min-width: 0;
}

.secao__titulo {
  margin: var(--e-2) 0 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-5);
  line-height: var(--altura-titulo);
  letter-spacing: var(--track-titulo);
  color: var(--tinta);
}

.secao__apoio {
  margin: var(--e-2) 0 0;
  max-width: 46ch;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.bloco {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

#tela-empresa {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.seletor-periodo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.seletor-periodo__rotulo {
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}

/* ==== A TARJA DE ESPERA: o elemento de assinatura ==================================
   Tempo parado vira pressao visual. A faixa na borda esquerda ENGORDA e ESQUENTA conforme o
   tempo passa, e o conteudo e EMPURRADO por ela: nao e um enfeite ao lado do cartao, e uma massa
   que invade o cartao. Por isso da para varrer uma coluna inteira e ver quem esfriou sem ler
   numero nenhum.

   Dois eixos carregam o mesmo sinal, largura E cor. Isso e proposital e nao e redundancia:
   mantem a leitura em preto e branco e para quem nao distingue cor, e e a razao de nao ser uma
   bolinha colorida de status (bolinha voce tem que procurar; tarja voce ve de longe). Alem dos
   dois, todo elemento que recebe tarja tambem escreve o estado em palavras, no proprio cartao ou
   no `title`.

   Quem esta em dia NAO ganha marca nenhuma (inicio-logica.js/classeDaTarja devolve string vazia
   no nivel 0): tarja em todo cartao seria decoracao e pararia de significar. */
.tarja {
  position: relative;
  --tarja-largura: 0px;
  --tarja-cor: transparent;
}

.tarja--1 {
  --tarja-largura: var(--tarja-1);
  --tarja-cor: var(--tinta-2);
}

.tarja--2 {
  --tarja-largura: var(--tarja-2);
  --tarja-cor: var(--atencao);
}

.tarja--3 {
  --tarja-largura: var(--tarja-3);
  --tarja-cor: var(--erro);
}

.tarja::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--tarja-largura);
  background: var(--tarja-cor);
  border-radius: var(--r-1) 0 0 var(--r-1);
}

/* ==== A regua de numeros ==========================================================
   Um bloco so, dividido por fios verticais, em vez de quatro caixinhas flutuando lado a lado. E
   a linha de dados de um relatorio impresso, nao um painel de widgets: combina com a marca
   ("editora de negocios") e evita o cartao-com-icone-e-seta-verde que todo SaaS entrega.

   Os rotulos vem das ETAPAS do funil do cliente, lidas do banco (inicio-logica.js/reguaDeNumeros),
   nunca escritos aqui. */
.regua {
  display: flex;
  flex-wrap: wrap;
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-2);
  overflow: hidden;
}

.regua__item {
  flex: 1 1 9rem;
  min-width: 9rem;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  border-left: var(--borda) solid var(--linha);
}

.regua__item:first-child {
  border-left: none;
}

.regua__rotulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}

.regua__valor {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-6);
  line-height: var(--altura-titulo);
  letter-spacing: var(--track-titulo);
  /* numero tabular: trocar 8 por 11 nao pode fazer a regua inteira dancar */
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.regua__apoio {
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.regua__vazio {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  padding: var(--e-4);
}

.regua__vazio-titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-4);
  color: var(--tinta);
}

.regua__vazio-texto {
  margin: 0;
  max-width: 46ch;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

/* ==== A fila que esfria ===========================================================
   A assinatura aplicada a tela inicial. No dia em que esta tudo em dia, e uma linha quieta em
   navy sobre branco. No dia em que ha gente esfriando, uma massa quente aparece na lateral e o
   texto e empurrado: o problema salta aos olhos sem ninguem procurar. */
.fila {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-2);
  padding: var(--e-4);
  padding-left: calc(var(--tarja-largura, 0px) + var(--e-4));
}

/* So o nivel 3 (frio, mais de uma semana) tinge a borda inteira. O nivel 2 fica com a tarja
   sozinha: se os dois niveis gritassem igual, o pior caso pararia de se destacar. */
.fila.tarja--3 {
  border-color: var(--erro);
}

.fila__frase {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-4);
  line-height: var(--altura-titulo);
  color: var(--tinta);
}

.fila__frase strong {
  display: block;
  font-weight: var(--peso-titulo);
  font-size: var(--fs-6);
  letter-spacing: var(--track-titulo);
  font-variant-numeric: tabular-nums;
}

.fila__detalhe {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta);
}

.fila__escopo {
  margin: 0;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

/* ==== O funil desenhado ===========================================================
   Barra por etapa, taxa de conversao entre elas, gargalo inequivoco. A taxa aparece na linha da
   etapa de DESTINO, que e como o painel em producao mostra e como o dono ja le.

   O gargalo recebe a MESMA tarja dos leads parados, no nivel 2: e a mesma ideia (aqui a
   pressao esta se acumulando) aplicada a uma etapa em vez de a uma pessoa. */
.funil-desenho {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.funil-etapa {
  display: grid;
  grid-template-columns: 10rem 1fr 8rem;
  grid-template-areas:
    "nome  trilho taxa"
    "agora trilho taxa";
  align-items: center;
  gap: 0 var(--e-3);
  padding: var(--e-2) 0;
  padding-left: calc(var(--tarja-largura, 0px) + var(--e-2));
}

.funil-etapa__nome {
  grid-area: nome;
  align-self: end;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-2);
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.funil-etapa__agora {
  grid-area: agora;
  align-self: start;
  margin: 0;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.funil-etapa__trilho {
  grid-area: trilho;
  height: 2.25rem;
  background: var(--fundo);
  border-radius: var(--r-1);
  overflow: hidden;
}

.funil-etapa__barra {
  height: 100%;
  /* min-width garante que o numero dentro da barra sempre caiba, mesmo na etapa com pouca gente
     (a largura tem piso de 6% em inicio-logica.js, o que sozinho nao daria espaco para o texto) */
  min-width: 3.5rem;
  display: flex;
  align-items: center;
  padding: 0 var(--e-3);
  background: var(--tinta);
  border-radius: var(--r-1);
  transition: width var(--transicao);
}

.funil-etapa__numero {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
  color: var(--texto-sobre-acao);
  white-space: nowrap;
}

.funil-etapa__taxa {
  grid-area: taxa;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--e-1);
  text-align: right;
}

.funil-etapa__taxa-valor {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}

.funil-etapa__seta {
  display: inline-flex;
  color: var(--tinta-2);
}

.funil-etapa__taxa-rotulo {
  font-size: var(--fs-0);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}

.funil-etapa--gargalo .funil-etapa__taxa-valor,
.funil-etapa--gargalo .funil-etapa__seta {
  color: var(--atencao);
}

.funil-etapa__selo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--atencao);
  border: var(--borda) solid var(--atencao);
  border-radius: var(--r-pilula);
  padding: var(--e-0) var(--e-2);
}

.funil-desenho__rodape {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: var(--borda) solid var(--linha);
}

.funil-desenho__nota {
  margin: 0;
  max-width: 72ch;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.funil-desenho__vazio {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

/* ==== Em construcao ===============================================================
   A borda tracejada nao e enfeite: e a unica coisa na interface inteira desenhada com traco
   interrompido, e ela diz exatamente o que a secao diz em palavras, "isto ainda nao esta
   fechado". Nenhum item aqui e clicavel, porque nenhum leva a lugar nenhum -- e a regra do dono
   valendo: botao que nao faz nada nao existe. */
.construcao {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.construcao__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background: var(--superficie);
  border: var(--borda) dashed var(--linha);
  border-radius: var(--r-2);
}

/* Nome em cima, selo embaixo: lado a lado, um selo de tres palavras estoura a largura do
   cartao em qualquer coluna estreita. */
.construcao__cabecalho {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
}

.construcao__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-4);
  line-height: var(--altura-titulo);
  color: var(--tinta);
}

.construcao__selo {
  flex: none;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-pilula);
  padding: var(--e-0) var(--e-2);
}

.construcao__promessa {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

/* ==== Cartao ====================================================================== */

.cartao {
  width: 100%;
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-2);
  padding: var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* O cartao de entrada e a unica coisa que PAIRA sobre a pagina antes do login: ali a sombra e
   legitima, porque ele nao esta apoiado numa mesa, ele e a mesa. */
.cartao--entrada {
  max-width: var(--largura-conteudo);
  margin-top: var(--e-5);
  padding: var(--e-5);
  box-shadow: var(--s-2);
}

.cartao--largo {
  max-width: var(--largura-conteudo-larga);
}

/* Sem moldura: o quadro do funil traz as proprias colunas, e uma caixa em volta de caixas so
   acrescentaria uma borda que nao separa nada. */
.cartao--liso {
  border: none;
  padding: 0;
  background: transparent;
}

.cartao__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-5);
  line-height: var(--altura-titulo);
  letter-spacing: var(--track-titulo);
  color: var(--tinta);
}

.cartao__texto {
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--fs-2);
}

/* ==== Formulario ================================================================== */

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  margin-bottom: var(--e-3);
}

.rotulo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  color: var(--tinta-2);
  text-transform: uppercase;
  letter-spacing: var(--track-rotulo);
}

input[type="email"],
input[type="password"] {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-3);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  padding: var(--e-2) var(--e-3);
}

select {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  padding: var(--e-1) var(--e-2);
}

/* ==== Botao ======================================================================= */

.botao {
  font-family: var(--fonte-corpo);
  font-weight: var(--peso-corpo-forte);
  font-size: var(--fs-3);
  border-radius: var(--r-1);
  border: var(--borda) solid transparent;
  padding: var(--e-2) var(--e-3);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.botao:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.botao--primario {
  background: var(--acao);
  color: var(--texto-sobre-acao);
}

.botao--secundario {
  background: transparent;
  color: var(--acao);
  border-color: var(--linha);
}

.botao--secundario:hover:not(:disabled) {
  background: var(--fundo);
}

.botao--curto {
  font-size: var(--fs-2);
  padding: var(--e-1) var(--e-2);
}

/* Variante de risco (desconectar WhatsApp, e qualquer acao futura do mesmo tipo): usa --erro,
   nunca uma cor nova. Combina com .botao--secundario (contorno) ou sozinha (preenchida, usada
   so no segundo clique de confirmar, para pesar mais que o "Cancelar" ao lado). */
.botao--perigo {
  color: var(--erro);
  border-color: var(--erro);
}

.botao--perigo:not(.botao--secundario) {
  background: var(--erro);
  color: var(--texto-sobre-acao);
  border-color: transparent;
}

/* ==== Avisos (ui.js) ============================================================== */

.aviso-area:empty {
  display: none;
}

.aviso {
  display: flex;
  gap: var(--e-2);
  align-items: flex-start;
  padding: var(--e-3);
  border-radius: var(--r-1);
  background: var(--fundo);
  border: var(--borda) solid var(--linha);
}

.aviso__icone {
  flex: none;
  display: flex;
  color: var(--tinta-2);
}

.aviso__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  align-items: flex-start;
}

.aviso__corpo strong {
  font-weight: var(--peso-rotulo);
  color: var(--tinta);
}

.aviso__corpo p {
  margin: 0;
  color: var(--tinta-2);
  font-size: var(--fs-2);
}

.aviso--voce .aviso__icone,
.aviso--voce .aviso__corpo strong {
  color: var(--atencao);
}

.aviso--nos .aviso__icone,
.aviso--nos .aviso__corpo strong {
  color: var(--erro);
}

.aviso--permissao .aviso__icone,
.aviso--permissao .aviso__corpo strong {
  color: var(--atencao);
}

.aviso--vazio .aviso__icone,
.aviso--vazio .aviso__corpo strong {
  color: var(--tinta-2);
}

/* ==== WhatsApp (tela de conexao, app/js/whatsapp.js) ============================== */

.whatsapp-status {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-4);
}

.whatsapp-status__icone {
  flex: none;
  display: flex;
}

/* Unico verde da interface inteira, e ele diz um fato binario (o WhatsApp esta ligado), nunca
   "sucesso" generico. Ver a regra de hierarquia de cor no topo de tokens.css. */
.whatsapp-status--conectado {
  color: var(--ok);
}

.whatsapp-status--desconectado {
  color: var(--tinta-2);
}

.whatsapp-status--aguardando {
  color: var(--atencao);
}

.whatsapp-qr {
  display: flex;
  justify-content: center;
  padding: var(--e-4);
  background: var(--fundo);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-2);
}

.whatsapp-qr__imagem {
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--r-1);
}

.whatsapp-contador {
  margin: 0;
  text-align: center;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.whatsapp-confirma {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--fundo);
  border: var(--borda) solid var(--atencao);
  border-radius: var(--r-1);
}

.whatsapp-confirma__botoes {
  display: flex;
  gap: var(--e-2);
}

/* ==== Conversas (a caixa de entrada, app/js/conversas.js, 0045) =================== */

.conversas__corpo {
  display: flex;
  gap: var(--e-3);
  height: 34rem;
  min-height: 0;
}

.conversas__lista {
  flex: none;
  width: 17rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-0);
  border-right: var(--borda) solid var(--linha);
  padding-right: var(--e-2);
}

.conversas__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  width: 100%;
  padding: var(--e-2);
  /* a tarja de espera empurra o conteudo: quanto mais tempo parado, mais para dentro */
  padding-left: calc(var(--tarja-largura, 0px) + var(--e-2));
  border-radius: var(--r-1);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--fonte-corpo);
  transition: background var(--transicao);
}

.conversas__item:hover {
  background: var(--fundo);
}

.conversas__item--ativo {
  background: var(--fundo);
}

.conversas__item-nome {
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--tinta);
}

.conversas__item-hora {
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.conversas__detalhe {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.conversas__vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

.conversas__janela {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* A linha do cabecalho da conversa: no celular ela comeca com o botao de voltar; no computador
   o botao nao existe e sobra so o cabecalho. */
.conversas__cabecalho-linha {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  border-bottom: var(--borda) solid var(--linha);
}

.conversas__voltar {
  display: none; /* so existe no celular, onde a lista sai da tela */
  align-items: center;
  gap: var(--e-1);
  min-height: var(--alvo-toque);
  padding: var(--e-1) var(--e-2);
  border: var(--borda) solid var(--linha-2);
  border-radius: var(--r-1);
  background: var(--superficie);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--acao);
  cursor: pointer;
}

.conversas__cabecalho {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  flex: 1;
  min-width: 0;
  padding-bottom: var(--e-2);
  font-family: var(--fonte-titulo);
}

.conversas__cabecalho-telefone {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.conversas__historico {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-1);
}

.conversas__carregar-mais {
  align-self: center;
  margin-bottom: var(--e-2);
}

.conversas__linha {
  display: flex;
}

.conversas__linha--recebida {
  justify-content: flex-start;
}

.conversas__linha--enviada {
  justify-content: flex-end;
}

.conversas__bolha {
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-2);
  background: var(--fundo);
}

.conversas__linha--enviada .conversas__bolha {
  background: var(--acao);
  color: var(--texto-sobre-acao);
}

.conversas__bolha--pendente {
  opacity: 0.7;
}

.conversas__bolha--falhou {
  background: var(--superficie);
  color: var(--tinta);
  border: var(--borda) solid var(--erro);
}

.conversas__bolha--fila {
  background: var(--superficie);
  color: var(--tinta);
  border: var(--borda) solid var(--atencao);
}

.conversas__bolha-texto {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--fs-3);
}

.conversas__bolha-rodape {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2);
  font-size: var(--fs-1);
  opacity: 0.85;
}

.conversas__status {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
}

.conversas__status-icone {
  display: inline-flex;
}

.conversas__status--ok {
  color: inherit;
}

.conversas__status--falhou {
  color: var(--erro);
}

.conversas__linha--enviada .conversas__bolha--falhou .conversas__status--falhou,
.conversas__linha--enviada .conversas__bolha--fila .conversas__status--fila {
  /* a bolha--falhou/fila troca o fundo para --superficie (acima); o texto de status usa a cor
     de estado normal, nao a cor de "texto sobre botao de acao" que a bolha enviada usa por
     padrao. */
  color: var(--erro);
}

.conversas__bolha--fila .conversas__status--fila {
  color: var(--atencao);
}

.conversas__botao-retry {
  align-self: flex-start;
  font-size: var(--fs-1);
  padding: var(--e-1) var(--e-2);
}

.conversas__resposta {
  display: flex;
  gap: var(--e-2);
  align-items: flex-end;
  padding-top: var(--e-3);
  border-top: var(--borda) solid var(--linha);
}

.conversas__campo-texto {
  flex: 1;
  resize: none;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-3);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  padding: var(--e-2) var(--e-3);
}

/* ==== BIBLIOTECA DE COMPONENTES: selo, abas, barra de ferramentas, busca ==========
   §6.0: "Uma biblioteca de componentes COMPARTILHADA: card do kanban, ficha lateral, modal,
   tabela, estado vazio, aviso, selo, avatar, abas, botao, campo. Tela nova monta com o que
   existe." O que esta abaixo e a parte que faltava: selo, abas, barra de ferramentas e campo de
   busca nascem aqui, genericos, e o funil so os USA. Nenhum deles tem "funil" no nome, de
   proposito: no dia em que a Base de contatos existir, ela monta a mesma barra sem CSS novo. */

/* ---- SELO: a pilula de estado, categoria ou contagem --------------------------------
   Um so componente para tudo que e "um fato curto sobre esta linha": origem do lead, retorno,
   follow-up, contagem de atrasadas. O TOM vem de `data-tom` e a ORIGEM de `data-origem`, nunca de
   uma classe por caso: assim um selo novo escolhe entre os tons que ja existem em vez de
   inventar o seu par de cores, que e a inconsistencia que a §6.0 proibe. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-0) var(--e-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-pilula);
  background: var(--superficie-2);
  font-size: var(--fs-1);
  font-weight: var(--peso-rotulo);
  line-height: 1.5;
  color: var(--tinta-2);
  white-space: nowrap;
}

.selo[data-tom="neutro"] {
  background: var(--superficie-2);
  border-color: var(--linha);
  color: var(--tinta-2);
}

.selo[data-tom="ok"] {
  background: var(--ok-fundo);
  border-color: var(--ok-linha);
  color: var(--ok);
}

.selo[data-tom="atencao"] {
  background: var(--atencao-fundo);
  border-color: var(--atencao-linha);
  color: var(--atencao);
}

.selo[data-tom="erro"] {
  background: var(--erro-fundo);
  border-color: var(--erro-linha);
  color: var(--erro);
}

.selo[data-tom="acao"] {
  background: var(--acao-fundo);
  border-color: transparent;
  color: var(--acao-tinta);
}

/* Os selos de ORIGEM, a excecao de cor declarada em tokens.css: aqui a cor diz CATEGORIA, porque
   de qual anuncio veio o lead e a medicao que este produto existe para entregar. "Direto" nao
   aparece: quem decide que ele nao ganha selo e funil-logica.js/seloDeOrigem. */
.selo[data-origem="meta_ads"] {
  background: var(--origem-meta-fundo);
  border-color: transparent;
  color: var(--origem-meta);
}

.selo[data-origem="google_ads"] {
  background: var(--origem-google-fundo);
  border-color: transparent;
  color: var(--origem-google);
}

.selo[data-origem="organico"] {
  background: var(--origem-organico-fundo);
  border-color: transparent;
  color: var(--origem-organico);
}

/* Selo que tambem e botao (o "3 atrasadas" da barra de ferramentas): ele filtra o quadro de
   verdade, entao precisa de alvo de toque, cursor e um estado de "ligado" visivel. */
.selo--botao {
  min-height: var(--alvo-toque);
  font-family: var(--fonte-corpo);
  cursor: pointer;
  transition: border-color var(--transicao);
}

.selo--botao[aria-pressed="true"] {
  border-color: currentColor;
}

/* ---- ABAS ---------------------------------------------------------------------------
   Sublinhado, nao pilula: aba com fundo compete com o selo, e este painel ja usa pilula para
   estado. A aba escolhida ganha a cor de acao e o fio embaixo. */
.abas {
  display: flex;
  gap: var(--e-1);
  border-bottom: var(--borda) solid var(--linha);
  flex-wrap: wrap;
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--alvo-toque);
  padding: var(--e-2) var(--e-3);
  margin-bottom: calc(var(--borda) * -1); /* o fio da aba encosta no fio da barra, sem duplicar */
  border: none;
  border-bottom: calc(var(--borda) * 2) solid transparent;
  background: none;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--tinta-2);
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}

.aba:hover {
  color: var(--tinta);
}

.aba[aria-selected="true"] {
  color: var(--acao);
  border-bottom-color: var(--acao);
  font-weight: var(--peso-rotulo);
}

/* ---- BARRA DE FERRAMENTAS e BUSCA ---------------------------------------------------
   A barra do painel v1 (D-P12): busca, filtro e os avisos, numa linha que quebra sozinha no
   celular. Os avisos vao para a direita no computador e para a linha de baixo no celular. */
.ferramentas {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.ferramentas__avisos {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-left: auto;
  flex-wrap: wrap;
}

.ferramentas__filtro {
  display: flex;
  min-width: 0;
}

.busca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: 1 1 16rem;
  min-width: 0;
  min-height: var(--alvo-toque);
  padding: 0 var(--e-3);
  background: var(--superficie-2);
  border: var(--borda) solid var(--linha-2);
  border-radius: var(--r-1);
  transition: border-color var(--transicao);
}

.busca:focus-within {
  border-color: var(--acao);
  background: var(--superficie);
}

.busca__icone {
  display: inline-flex;
  flex: none;
  color: var(--tinta-2);
}

.busca__campo {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  color: var(--tinta);
}

.busca__campo:focus {
  outline: none; /* o contorno vai na caixa inteira, pelo :focus-within acima */
}

.campo-select {
  min-height: var(--alvo-toque);
  max-width: 100%;
  padding: 0 var(--e-2);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha-2);
  border-radius: var(--r-1);
}

/* ==== Funil (kanban, app/js/funil.js) ============================================= */

.funil__seletor {
  font-size: var(--fs-2);
}

.funil__quadro {
  display: flex;
  gap: var(--e-3);
  overflow-x: auto;
  padding-bottom: var(--e-2);
}

/* "A coluna AFUNDA, o cartao SOBE": e essa inversao que da a leitura limpa do painel v1. A coluna
   fica no degrau entre a nevoa e o papel (--superficie-2) e o cartao fica branco por cima, com o
   fio e a sombra de 1px. Sem ela o cartao branco sobre fundo branco perde a borda. */
.funil__coluna {
  flex: none;
  width: 17rem;
  display: flex;
  flex-direction: column;
  background: var(--superficie-2);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-2);
  border-top: 3px solid var(--funil-cor-etapa, var(--linha));
  padding: var(--e-3);
  gap: var(--e-2);
}

.funil__coluna--recebendo {
  outline: var(--borda) dashed var(--acao);
  outline-offset: -2px;
}

.funil__coluna-cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.funil__coluna-linha-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
}

.funil__coluna-titulo {
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-3);
  color: var(--tinta);
}

.funil__coluna-contagem {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-2);
  font-weight: var(--peso-rotulo);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

.funil__badge-evento {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  width: fit-content;
  font-size: var(--fs-1);
  padding: var(--e-0) var(--e-2);
  border-radius: var(--r-1);
  cursor: help;
}

.funil__badge-evento-icone {
  display: inline-flex;
}

.funil__badge-evento--ativo {
  color: var(--acao);
  background: var(--superficie);
  border: var(--borda) solid var(--acao);
}

.funil__badge-evento--neutro {
  color: var(--tinta-2);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
}

/* Teto de altura para o quadro caber numa tela so: cada coluna rola por dentro em vez de a
   pagina inteira esticar. Sem isto, a coluna mais cheia empurra o rodape para fora da tela e
   quem usa perde a visao das outras etapas. */
.funil__coluna-cards {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-height: 4rem;
  max-height: 62vh;
  overflow-y: auto;
  /* espaco para a tarja da esquerda nao encostar na borda da coluna ao rolar */
  padding-right: var(--e-1);
}

.funil__coluna-vazio {
  margin: 0;
  padding: var(--e-2) 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
  text-align: center;
}

.funil__cartao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-1);
  width: 100%;
  text-align: left;
  font-family: var(--fonte-corpo);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  box-shadow: var(--s-1);
  padding: var(--e-2) var(--e-3);
  /* a tarja de espera empurra o conteudo do cartao para dentro: e a pressao do tempo, visivel */
  padding-left: calc(var(--tarja-largura, 0px) + var(--e-3));
  cursor: grab;
  transition: border-color var(--transicao);
}

.funil__cartao:active {
  cursor: grabbing;
}

.funil__cartao:hover {
  border-color: var(--acao);
}

.funil__cartao-nome {
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--tinta);
}

/* TELEFONE EM FONTE MONOESPACADA (D-P12, do painel v1). Nao e gosto: em fonte proporcional cada
   digito tem largura diferente, os numeros de uma coluna nao se alinham e quem varre a coluna
   procurando um telefone perde a referencia a cada linha. */
.funil__cartao-telefone {
  font-family: var(--fonte-dado);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
}

/* A linha de selos do cartao (origem, retorno) quebra em duas quando nao cabe, em vez de cortar
   um selo pela metade. */
.funil__cartao-selos {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  flex-wrap: wrap;
}

.funil__cartao-followup {
  margin-top: var(--e-1);
}

.funil__cartao-atividade {
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

/* ==== Ficha do lead (drawer, app/js/ficha.js) ===================================== */

.drawer-fundo {
  position: fixed;
  inset: 0;
  background: var(--veu);
  z-index: 20;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(26rem, 100%);
  background: var(--superficie);
  box-shadow: var(--s-3);
  z-index: 21;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--e-4);
  gap: var(--e-3);
}

.drawer__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-2);
}

.drawer__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-titulo);
  font-size: var(--fs-4);
  line-height: var(--altura-titulo);
  color: var(--tinta);
}

.drawer__telefone {
  margin: var(--e-1) 0 0;
  font-family: var(--fonte-dado);
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.drawer__fechar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--tinta-2);
  background: transparent;
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
}

.drawer__fechar:hover {
  background: var(--fundo);
  color: var(--tinta);
}

.drawer__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.ficha__secao-titulo {
  margin: 0 0 var(--e-2);
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  color: var(--tinta-2);
  text-transform: uppercase;
  letter-spacing: var(--track-rotulo);
}

.ficha__mover {
  display: flex;
  gap: var(--e-2);
}

.ficha__mover select {
  flex: 1;
}

.ficha__linha {
  margin: 0 0 var(--e-1);
  font-size: var(--fs-2);
  color: var(--tinta);
}

.ficha__linha--neutro {
  color: var(--tinta-2);
  font-style: italic;
}

.ficha__texto-vazio {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.ficha__lista-fatos {
  margin: var(--e-2) 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-1) var(--e-2);
}

.ficha__lista-fatos dt {
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.ficha__lista-fatos dd {
  margin: 0;
  font-size: var(--fs-1);
  color: var(--tinta);
  word-break: break-word;
}

.ficha__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}

.ficha__chip {
  font-size: var(--fs-1);
  padding: var(--e-0) var(--e-2);
  border-radius: var(--r-1);
  background: var(--fundo);
  border: var(--borda) solid var(--ficha-cor-chip, var(--linha));
  color: var(--tinta);
}

.ficha__timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.ficha__timeline-item {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  padding-left: var(--e-3);
  border-left: 2px solid var(--linha);
  font-size: var(--fs-2);
}

.ficha__timeline-rotulo {
  color: var(--tinta);
}

.ficha__timeline-data {
  flex: none;
  color: var(--tinta-2);
  font-size: var(--fs-1);
}

.ficha__tarefas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.ficha__tarefas-item {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: var(--fs-2);
  color: var(--tinta);
}

.ficha__tarefas-prazo {
  flex: none;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

/* ==== Automacoes (app/js/automacoes.js) ===========================================
   A tela onde o cliente LE o desenho e vira a chave. Segue a hierarquia de cor do tokens.css:
   estrutura em papel, nevoa e tinta; cor quente SO no que precisa de decisao humana (o motivo de
   uma automacao estar pendente, e a execucao que parou no meio). Automacao ligada NAO ganha
   verde: verde neste painel e reservado ao WhatsApp conectado, e "esta ligada" e o estado normal
   de quem ja passou pelo go-live, nao uma comemoracao. */

.automacoes__lista {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.automacao {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-2);
  box-shadow: var(--s-1);
}

/* A tarja da esquerda repete, em desenho, o que o selo diz em palavra: cor NUNCA e o unico
   sinal (mesma regra da tarja de espera do funil). */
.automacao[data-estado="ligada"] {
  border-left: var(--tarja-1) solid var(--tinta);
}

.automacao[data-estado="desligada"] {
  border-left: var(--tarja-1) solid var(--linha);
}

.automacao[data-estado="pendente"] {
  border-left: var(--tarja-2) solid var(--atencao);
}

.automacao__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.automacao__identidade {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  min-width: 0;
}

.automacao__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-4);
  font-weight: var(--peso-rotulo);
  line-height: var(--altura-titulo);
  color: var(--tinta);
}

.automacao__selo {
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-pilula);
  padding: var(--e-0) var(--e-2);
  color: var(--tinta-2);
}

.automacao__selo--ligada {
  color: var(--texto-sobre-acao);
  background: var(--acao);
  border-color: var(--acao);
}

.automacao__selo--pendente {
  color: var(--atencao);
  border-color: var(--atencao);
}

/* A chavinha. E um <button role="switch">, nao uma caixa de marcar disfarcada: recebe foco de
   teclado pela regra global de :focus-visible, e o estado real vai no aria-checked, para leitor
   de tela nunca depender do desenho do trilho. */
.automacao__chave {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-2);
  background: none;
  border: var(--borda) solid transparent;
  border-radius: var(--r-1);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--tinta);
  cursor: pointer;
}

.automacao__chave:hover:not(:disabled) {
  background: var(--fundo);
}

.automacao__chave:disabled {
  cursor: not-allowed;
  color: var(--tinta-2);
}

.automacao__chave-trilho {
  flex: none;
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--r-pilula);
  background: var(--fundo);
  border: var(--borda) solid var(--linha);
  display: inline-flex;
  align-items: center;
  padding: var(--e-0);
  transition: background var(--transicao), border-color var(--transicao);
}

.automacao__chave-bolinha {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--r-pilula);
  background: var(--tinta-2);
  transition: transform var(--transicao), background var(--transicao);
}

.automacao__chave[aria-checked="true"] .automacao__chave-trilho {
  background: var(--acao);
  border-color: var(--acao);
}

.automacao__chave[aria-checked="true"] .automacao__chave-bolinha {
  background: var(--texto-sobre-acao);
  transform: translateX(1rem);
}

.automacao__resumo {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta);
}

.automacao__motivo {
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--fundo);
  border-left: var(--tarja-1) solid var(--atencao);
  border-radius: var(--r-1);
}

.automacao__motivo-icone {
  flex: none;
  color: var(--atencao);
  display: inline-flex;
  padding-top: var(--e-0);
}

.automacao__motivo-rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-0);
  font-weight: var(--peso-rotulo);
  letter-spacing: var(--track-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}

.automacao__motivo-texto {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-2);
  color: var(--tinta);
}

.automacao__abrir {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  font-weight: var(--peso-corpo-forte);
  color: var(--acao);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.automacao__desenho,
.automacao__execucoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: var(--borda) solid var(--linha);
}

.automacao__passos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* O fio entre um passo e o proximo: o desenho e uma sequencia, e a linha continua e o que faz
   isso ficar obvio sem escrever "passo 1, passo 2". */
.automacao__passo {
  position: relative;
  display: flex;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--fundo);
  border-radius: var(--r-1);
}

.automacao__passo + .automacao__passo::before {
  content: "";
  position: absolute;
  left: calc(var(--e-3) + 0.5rem);
  top: calc(var(--e-2) * -1);
  height: var(--e-2);
  border-left: var(--borda) solid var(--linha);
}

.automacao__passo--senao {
  margin-left: var(--e-4);
}

.automacao__passo--solto {
  border: var(--borda) dashed var(--atencao);
  background: var(--superficie);
}

.automacao__passo-icone {
  flex: none;
  display: inline-flex;
  padding-top: var(--e-0);
  color: var(--tinta-2);
}

.automacao__passo--gatilho .automacao__passo-icone,
.automacao__passo--acao .automacao__passo-icone {
  color: var(--tinta);
}

.automacao__passo-corpo {
  min-width: 0;
}

.automacao__passo-titulo {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta);
}

.automacao__passo-detalhe {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.automacao__passo-ramo,
.automacao__passo-pendencia {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.automacao__passo-pendencia {
  color: var(--atencao);
}

.automacao__vazio {
  margin: 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.automacao__execucoes-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.automacao__execucao {
  padding: var(--e-2) var(--e-3);
  background: var(--fundo);
  border-left: var(--tarja-1) solid var(--linha);
  border-radius: var(--r-1);
}

.automacao__execucao--atencao {
  border-left-color: var(--atencao);
}

.automacao__execucao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
}

.automacao__execucao-rotulo {
  font-weight: var(--peso-corpo-forte);
  font-size: var(--fs-2);
  color: var(--tinta);
}

.automacao__execucao-quando {
  flex: none;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.automacao__execucao-texto {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-1);
  color: var(--tinta-2);
}

.automacao__execucao-motivo {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-1);
  color: var(--tinta);
}

/* ==== Construtor de automacoes (app/js/construtor.js) =============================
   O construtor em PASSOS, e a edicao do desenho bloco a bloco. Sem cor nova nenhuma: a hierarquia
   continua sendo papel, nevoa e tinta, e a unica cor quente e a de atencao, reservada ao que
   impede a automacao de funcionar. */

.automacoes__barra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: center;
  margin-bottom: var(--e-3);
}

.construtor {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  margin-bottom: var(--e-3);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-left: var(--tarja-1) solid var(--acao);
  border-radius: var(--r-2);
  box-shadow: var(--s-1);
}

.construtor__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--fs-4);
  font-weight: var(--peso-rotulo);
  line-height: var(--altura-titulo);
  color: var(--tinta);
}

.construtor__apoio {
  margin: var(--e-1) 0 0;
  font-size: var(--fs-2);
  color: var(--tinta-2);
}

.construtor__nota {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-2);
  color: var(--tinta);
  padding-left: var(--e-2);
  border-left: var(--tarja-1) solid var(--linha);
}

.construtor__impedimento {
  margin: var(--e-2) 0 0;
  font-size: var(--fs-2);
  color: var(--atencao);
}

.construtor__passo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: var(--borda) solid var(--linha);
}

.campo--construtor {
  margin-bottom: 0;
}

.campo--construtor input[type="text"] {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-3);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  padding: var(--e-2) var(--e-3);
}

.construtor__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--fundo);
  border-radius: var(--r-1);
}

.construtor__item > div:first-child {
  flex: 1 1 16rem;
  min-width: 0;
}

/* As escolhas de varios valores sao caixas de marcar, e nao um select multiplo: no celular,
   escolher varios num select nativo e a interacao que mais falha, e aqui a pessoa precisa ver o
   que ja marcou sem abrir nada. */
.construtor__escolhas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.construtor__escolha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--fs-2);
  color: var(--tinta);
  cursor: pointer;
}

.construtor__linha-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  align-self: flex-start;
  padding: var(--e-1) var(--e-2);
  background: none;
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  font-family: var(--fonte-corpo);
  font-size: var(--fs-2);
  color: var(--acao);
  cursor: pointer;
}

.construtor__linha-botao:hover:not(:disabled) {
  background: var(--fundo);
}

.construtor__linha-botao:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.construtor__linha-icone {
  display: inline-flex;
}

.construtor__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

/* A fileira de botoes de cada automacao, a caixa de confirmar o arquivamento e a de renomear. */
.automacao__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.automacao__confirmar,
.automacao__renomear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3);
  background: var(--fundo);
  border-radius: var(--r-1);
}

.automacao__confirmar .automacao__motivo-texto {
  flex: 1 1 18rem;
}

.automacao__renomear input[type="text"] {
  flex: 1 1 14rem;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-3);
  color: var(--tinta);
  background: var(--superficie);
  border: var(--borda) solid var(--linha);
  border-radius: var(--r-1);
  padding: var(--e-2) var(--e-3);
}

/* Arquivada: tarja neutra e o cartao no tom da nevoa, porque ela nao participa mais do trabalho
   do dia. Continua legivel: apagado nao pode virar ilegivel. */
.automacao[data-estado="arquivada"] {
  border-left: var(--tarja-1) solid var(--linha);
  background: var(--fundo);
}

.automacao__desenho--editando .automacao__passo-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  align-items: flex-start;
}

.automacao__desenho--editando .automacao__passo-corpo select {
  max-width: 100%;
}

/* ==== Telas estreitas =============================================================
   A recepcionista abre isto no celular, entre uma ligacao e outra (D26). O menu vira gaveta, a
   regua rola na horizontal em vez de quebrar em varias linhas, e o funil desenhado desmonta o
   grid de tres colunas: nome em cima, barra embaixo, taxa ao lado do nome. */

@media (max-width: 900px) {
  /* A barra de cima VOLTA aqui: no celular a lateral vira gaveta, e sem ela nao haveria como
     abrir o menu nem saber em qual produto a pessoa esta com a gaveta fechada. */
  .topo {
    display: flex;
  }

  .quadro {
    min-height: calc(100vh - 3.5rem);
  }

  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: auto;
    align-self: auto;
    z-index: 30;
    width: min(var(--menu-largura), 82vw);
    transform: translateX(-100%);
    transition: transform var(--transicao);
    box-shadow: var(--s-3);
    overflow-y: auto;
  }

  body[data-menu="aberto"] .menu {
    transform: none;
  }

  .menu-veu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: var(--veu);
    border: none;
    padding: 0;
    cursor: pointer;
  }

  #conteudo {
    padding: var(--e-4) var(--e-3);
  }

  .secao {
    gap: var(--e-4);
  }

  .regua {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .regua__item {
    flex: 0 0 auto;
    min-width: 8rem;
    padding: var(--e-3);
  }

  .regua__vazio {
    flex: 1 1 auto;
    min-width: 100%;
  }

  .funil-etapa {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "nome   taxa"
      "trilho trilho"
      "agora  agora";
    gap: var(--e-1) var(--e-3);
    align-items: baseline;
  }

  .funil-etapa__taxa {
    flex-direction: row;
    align-items: baseline;
    gap: var(--e-2);
  }

  .funil-etapa__trilho {
    height: 1.75rem;
    margin-top: var(--e-1);
  }
}

/* Celular estreito de verdade: a barra de cima disputa espaco entre o botao da gaveta e a marca.
   Some a palavra "Menu" (o icone de tres tracos ja e entendido, e o botao continua com nome
   acessivel pelo texto que fica visivel so para leitor de tela). */
@media (max-width: 480px) {
  .topo__abrir-menu-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: calc(var(--borda) * -1);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .cartao--largo {
    max-width: 100%;
  }

  .cartao--entrada {
    padding: var(--e-4);
    margin-top: var(--e-3);
  }

  /* ==== CONVERSAS NO CELULAR: uma metade por vez (§6.0, §6.0.4) ====
     "Empilhar um cliente de WhatsApp embaixo de um kanban da meia tela para cada um, e no
     celular, que e onde o dono abre, os dois ficam inutilizaveis." O mesmo vale aqui: lista em
     cima com 10rem e conversa embaixo com 26rem e o desktop encolhido. No celular a lista ocupa
     a tela; ao tocar numa conversa, ela sai e a conversa ocupa a tela, com o botao de voltar. */
  .conversas__corpo {
    flex-direction: column;
    height: auto;
  }

  .conversas__lista {
    width: 100%;
    max-height: none;
    border-right: none;
    padding-right: 0;
  }

  .conversas__corpo[data-vista="conversa"] .conversas__lista {
    display: none;
  }

  .conversas__corpo[data-vista="lista"] .conversas__detalhe {
    display: none;
  }

  .conversas__voltar {
    display: inline-flex;
  }

  /* No celular o cabecalho da conversa desce para a linha de baixo do botao de voltar, em vez de
     disputar a largura com ele e quebrar o nome em tres linhas. */
  .conversas__cabecalho-linha {
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-1);
  }

  .conversas__cabecalho {
    flex-wrap: wrap;
  }

  /* A janela ocupa a altura util da tela, descontando a barra de cima e o respiro do cartao. */
  .conversas__janela {
    height: calc(100vh - 12rem);
  }

  .conversas__bolha {
    max-width: 85%;
  }

  /* Alvo de toque em cada conversa da lista: e o item mais tocado do produto. */
  .conversas__item {
    min-height: var(--alvo-toque);
  }

  /* ==== "KANBAN VIRA LISTA" (§6.0, "Mobile de verdade"; D26) ====
     No celular o quadro deixa de rolar na horizontal e vira uma LISTA de etapas empilhadas, cada
     uma com os seus cartoes, e quem rola e a pagina. Rolar na horizontal com o polegar em um
     quadro que tambem rola na vertical por dentro e o gesto que faz o atendente perder a coluna,
     e a §6.0 e explicita: "nao e o desktop encolhido". */
  .funil__quadro {
    flex-direction: column;
    overflow-x: visible;
    gap: var(--e-3);
  }

  .funil__coluna {
    width: 100%;
  }

  /* A coluna deixa de ter rolagem propria: com uma etapa embaixo da outra, quem rola e a pagina.
     Duas rolagens aninhadas no celular prendem o dedo na de dentro. */
  .funil__coluna-cards {
    max-height: none;
    overflow-y: visible;
  }

  /* Alvo de toque no cartao: e nele que se toca para abrir a ficha. */
  .funil__cartao {
    min-height: var(--alvo-toque);
    padding: var(--e-3);
    padding-left: calc(var(--tarja-largura, 0px) + var(--e-3));
  }

  /* A barra de ferramentas empilha: busca em cima, filtro embaixo, avisos na terceira linha e
     alinhados a esquerda (a margem automatica que os joga para a direita no computador nao faz
     sentido quando cada um esta na propria linha). */
  .busca,
  .ferramentas__filtro,
  .campo-select {
    flex: 1 1 100%;
    width: 100%;
  }

  .ferramentas__avisos {
    margin-left: 0;
  }

  /* Celular: a chavinha desce para a linha de baixo em vez de espremer o nome da automacao. */
  .automacao__cabecalho {
    flex-direction: column;
    align-items: stretch;
  }

  .automacao__chave {
    align-self: flex-start;
  }

  .automacao__passo--senao {
    margin-left: var(--e-2);
  }

  /* Celular: o construtor perde a margem lateral grande e os botoes ocupam a linha inteira. E
     aqui que o atendente monta a automacao, entao os alvos de toque tem que ser largos. */
  .construtor {
    padding: var(--e-3);
  }

  .construtor__botoes .botao,
  .automacoes__barra .botao {
    flex: 1 1 100%;
  }

  .construtor__item {
    flex-direction: column;
    align-items: stretch;
  }

  .drawer {
    width: 100%;
  }
}