/* 13/10/2026: direção "TGIF para apps" (prova no Painel; spec visual em
   memoria-compartilhada/reference_design_system_tgif_apps.md, decisões deste app em
   .interface-design/system.md). Em uma frase: moldura com cor, miolo calmo, cor só
   quando significa algo.

   - Lateral escura (tinta, o mesmo #141a26 do texto e do botão principal) e miolo
     claro. A marca mora na moldura; o trabalho acontece no branco e no cinza.
   - Neutros próprios, com leve viés do azul da marca, no lugar da paleta crua do
     Tailwind (#0f172a, #475569, #e2e8f0, #f8fafc), que era o carimbo de "cara de IA".
   - Profundidade (revista em 15/10/2026): cartão branco com fio de 1 px, raio 14 e uma
     sombra curta e baixa; o clicável sobe 1 px sob o mouse; sombra larga só no que
     flutua (menu, janela). Detalhe no bloco "CARTÃO COM RELEVO" do fim.
   - Botão principal em tinta; o azul fica para seleção, foco e link.
   - Escalas fechadas: 6 tamanhos de texto, espaço em múltiplos de 4 e raio por
     função (desde 20/10/2026: 6 controle, 10 cartão, 14 janela e painel, pílula
     só em status, contador e avatar; bloco "DISCIPLINA DE ESPAÇO" no fim).
   - Fonte servida daqui (public/fontes), nunca do Google: o app mostra conversa de
     cliente e não deve avisar terceiros de quem está usando. Desde 17/10/2026
     (specs/044) é a Schibsted Grotesk, a do site do Diego.

   17/10/2026 (specs/044): a pele inteira passou a ser a do site do Diego
   (site.dodiego.com.br). Moldura preta, o trabalho num painel claro de canto
   40, Schibsted Grotesk, preto e branco no resto; amarelo só para o que é seu
   e pede ação agora, vermelho só atraso, verde só venda, âmbar para hoje e
   perto. Valores e contraste medido em .interface-design/system.md; o que
   muda de forma está no bloco "VISUAL DO SITE" do fim do arquivo. */

:root {
  /* Tipo: 12 é o piso. Abaixo disso não sobrevive a um monitor grande nem a
     quem já usa óculos de leitura. */
  --t-1: 12px;
  --t-2: 13px;
  --t-3: 14px;
  --t-4: 16px;
  --t-5: 20px;
  --t-6: 26px;
  --t-heroi: 28px;
  --t-valor: 24px;
  /* Espaço (20/10/2026, a disciplina de espaço do Diego, a mesma em todo app
     nosso): uma escala só, --e-N = N × 4 px. 4 a 24 no dia a dia; 32 e 48 só
     para separar blocos grandes. A tabela de relações (borda da tela até o
     conteúdo, seção até seção, título até o conteúdo...) está em
     .interface-design/system.md, seção "Disciplina de espaço". */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-12: 48px;
  /* Folga de controle: 2 e 6 só DENTRO de controle pequeno (pílula de status,
     contador, etiqueta, botão compacto, trilho de abas). Entre elementos,
     sempre a escala de cima. */
  --fc-1: 2px;
  --fc-2: 6px;
  /* As relações que mais se repetem, com nome. */
  --margem-tela: var(--e-6);       /* borda do painel até o conteúdo (16 no celular) */
  --pad-cartao-p: var(--e-5);      /* dentro do cartão pequeno */
  --pad-bloco: var(--e-6);         /* dentro do bloco largo */
  /* Raio por função (20/10/2026): 6 no controle, 10 no cartão, 14 na janela e
     no painel, pílula só em status, contador e avatar. Concêntrico: o de fora
     = o de dentro + a folga (trilho de abas 6 + 2, menu 6 + 8 = 14). */
  --r-controle: 6px;
  --r-cartao: 10px;
  --r-janela: 14px;
  --r-pill: 999px;
  /* Movimento: só em mudança de estado, curto, e some com reduced-motion. */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --curva: cubic-bezier(.23, 1, .32, 1);

  /* Neutros do painel (specs/044, 17/10/2026): preto e branco, sem viés de
     cor. O papel é o próprio painel; o cartão se separa pelo fio. */
  --fundo: #ffffff;              /* o painel claro, atrás dos cartões */
  --papel: #ffffff;              /* superfície: cartão, campo */
  --recuo: #f4f4f5;              /* bloco rebaixado, fundo da conversa */
  --tinta: #111111;              /* texto principal e botão principal */
  --tinta-tx: #ffffff;           /* texto sobre fundo de tinta (botão principal, bolha nossa) */
  --tinta-2: #3a3a3f;            /* texto secundário (11,3:1 no papel; era #4e4e53, revisto em 17/10 a pedido do Diego) */
  /* Texto apagado: 7,4:1 no papel, 6,3:1 no realce, 5,8:1 no realce forte
     (era #68686d, 5,5:1; o Diego achou o cinza claro demais). */
  --tinta-3: #55555a;
  --linha: #e2e2e4;
  --realce: #ececee;             /* hover, trilho das abas, pílula */
  --realce-forte: #e4e4e7;       /* item ativo e contador sobre o realce */
  /* Sem cor de marca no miolo: link, foco e seleção são a própria tinta. */
  --acento: #111111;
  --acento-tx: #ffffff;
  --botao: #111111;
  --botao-tx: #ffffff;
  --marca: #ffffff;              /* o nome do produto e o foco, na moldura preta */
  /* Amarelo do site: só o que é seu e pede ação agora (marca-texto do número
     de quem espera, contador de Conversas, selo "Você", anel do laço). Sempre
     com texto preto (16,1:1). */
  --amarelo: #ffe14d;
  --amarelo-tx: #000000;
  /* Moldura preta (lateral, faixa do alto, barra do celular): texto branco a
     72%, grupos a 50%, hover branco 6%; o item ativo é uma pílula branca com
     texto preto. Igual nos dois temas. */
  --lateral: #000000;
  --lateral-tx: #ffffff;
  --lateral-tx-2: rgba(255, 255, 255, 0.8);
  --lateral-tx-3: rgba(255, 255, 255, 0.62);
  --lateral-realce: rgba(255, 255, 255, 0.06);
  --lateral-ativo: rgba(255, 255, 255, 0.1);
  --lateral-ativo-tx: #ffffff;
  --lateral-linha: rgba(255, 255, 255, 0.1);
  --lateral-campo: rgba(255, 255, 255, 0.06);
  --lateral-campo-linha: rgba(255, 255, 255, 0.16);
  /* Profundidade: o cartão é fio sobre o painel; a sombra é quase nada. O
     cartão clicável sobe 1 px e abre uma sombra baixa (--elev-2); o que
     flutua (menu, janela) leva --elev-3. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, .04);
  --elev-2: 0 10px 24px -10px rgba(0, 0, 0, .22);
  --linha-forte: #cfcfd2;        /* fio do cartão sob o mouse e do botão secundário */
  --elev-3: 0 2px 6px rgba(0, 0, 0, .08), 0 16px 40px rgba(0, 0, 0, .16);
  /* A conversa: a bolha deles é papel com fio sobre o recuo; a nossa é tinta
     com texto papel. */
  --chat-canvas: #f4f4f5;
  --bolha-deles: #ffffff;
  --bolha-minha: #111111;
  --bolha-minha-tx: #ffffff;
  /* Vermelho só para atraso, sempre com a palavra (5,4:1 no papel). */
  --alerta: #c4361a;
  --alerta-tx: #a8301a;
  --alerta-pilula: #a8301a;      /* contador vermelho, texto branco (6,5:1), nos dois temas */
  --ok-tx: #136332;
  /* Etiqueta: quente é "hoje" (âmbar); fria e neutra ficam no cinza. */
  --tag-quente-bg: #fbf0d9;
  --tag-quente-tx: #744800;
  --tag-fria-bg: #f4f4f5;
  --tag-fria-tx: #3a3a3f;
  --tag-neutra-bg: #f4f4f5;
  --tag-neutra-tx: #3a3a3f;
  --lateral-larg: 232px;
  --veu-hover: rgba(255, 255, 255, .16);
  --f-corpo: "Schibsted Grotesk", ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-titulo: var(--f-corpo);
  /* Calendário, seletor e barra de rolagem nativos seguem o tema. */
  color-scheme: light;
}

/* Tema escuro (01/10/2026): vale quando a página tem data-tema="escuro". Quem decide é
   public/tema.js: a escolha da pessoa no botão do topo ou, sem escolha, o sistema.
   Mesma matiz, só muda a luminosidade; a moldura continua a parte mais escura. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  /* Painel escuro (specs/044, revisto em 17/10 a pedido do Diego: "escuro
     demais, se perdeu no contraste"). A moldura continua preta; o painel é
     um grafite que se separa dela, o cartão fica um degrau acima do painel e
     o recuo um abaixo, com fio visível. Texto mais claro. */
  --fundo: #202024;
  --papel: #2a2a2f;
  --recuo: #1b1b1e;
  --tinta: #f5f5f6;
  --tinta-tx: #161618;
  --tinta-2: #d6d6da;
  --tinta-3: #bcbcc1;
  --linha: #3c3c42;
  --realce: #34343a;
  --realce-forte: #3e3e45;
  --acento: #f5f5f6;
  --acento-tx: #161618;
  --botao: #f5f5f6;
  --botao-tx: #161618;
  --marca: #ffffff;
  --elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --elev-2: 0 10px 24px -10px rgba(0, 0, 0, .7);
  --linha-forte: #55555c;
  --elev-3: 0 2px 6px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .55);
  --chat-canvas: #1b1b1e;
  --bolha-deles: #2a2a2f;
  --bolha-minha: #f5f5f6;
  --bolha-minha-tx: #161618;
  --alerta: #ff8a6e;
  --alerta-tx: #ff8a6e;
  --alerta-pilula: #a8301a;
  --ok-tx: #62dd98;
  --tag-quente-bg: #33280f;
  --tag-quente-tx: #ffc95e;
  --tag-fria-bg: #34343a;
  --tag-fria-tx: #d6d6da;
  --tag-neutra-bg: #34343a;
  --tag-neutra-tx: #d6d6da;
  --veu-hover: rgba(0, 0, 0, .14);
}

/* Fonte (17/10/2026, specs/044, a do site do Diego): Schibsted Grotesk 400,
   500, 600 e 800, só letras latinas, servida daqui (public/fontes, licença OFL
   em OFL-schibsted-grotesk.txt), nunca do Google. Substituiu a fonte da
   specs/039. O 600 responde por 700; o 800 por 800 e 900 (título). */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fontes/schibsted-grotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fontes/schibsted-grotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fontes/schibsted-grotesk-600.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fontes/schibsted-grotesk-800.woff2") format("woff2");
  font-weight: 800 900;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 400 var(--t-3)/22px var(--f-corpo);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
/* Controle de formulário não herda fonte sozinho. */
input, select, textarea, button { font-family: inherit; }

/* Retorno visual de mudança de estado (hover, ativo, foco). Uma regra só,
   em vez de uma transição por componente. */
a, button, summary, input, select, textarea, .item, .chip, .tag {
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva),
              border-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva),
              opacity var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── Estrutura: lateral fixa + conteudo ────────────────────────────────── */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral-larg);
  flex: 0 0 var(--lateral-larg);
  background: var(--lateral);
  color: var(--lateral-tx);
  border-right: 1px solid var(--lateral-linha);
  padding: var(--e-3) var(--e-2) var(--e-3);
  color-scheme: dark;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.lateral .marca {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-2) var(--e-4); font-size: var(--t-4); font-weight: 700;
  letter-spacing: -0.01em; color: var(--lateral-tx);
}
.lateral .marca b { color: var(--marca); font-weight: 700; }

.lateral .secao {
  font-size: var(--t-1); font-weight: 600; color: var(--lateral-tx-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding: var(--e-4) var(--e-2) var(--e-1);
}

/* Item de menu: 32px de altura, raio 6px (controle). */
.item {
  display: flex; align-items: center; gap: var(--e-3);
  height: 32px; padding: var(--e-1) var(--e-2); border-radius: var(--r-controle);
  font-size: var(--t-3); color: var(--lateral-tx-2); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item:hover { background: var(--lateral-realce); color: var(--lateral-tx); }
.item.ativo { background: var(--lateral-ativo); color: var(--lateral-ativo-tx); font-weight: 600; }
.item:active { transform: scale(.97); }
.item .ic { width: 16px; height: 16px; flex: 0 0 16px; opacity: .8; }
.item.ativo .ic { opacity: 1; }
.item .conta {
  margin-left: auto; font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--lateral-tx); background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-pill); padding: 0 var(--fc-2); min-width: 20px; line-height: 20px; text-align: center;
}
/* Pílula vermelha com texto branco, nos dois temas (5,2:1). */
.item .conta.urgente { background: var(--alerta-pilula); color: #fff; }

/* Rodapé: quem está logado numa linha só, que leva à conta, e o Sair como
   ícone ao lado. Eram três linhas (Minha conta, e-mail, botão Sair). */
.lateral .rodape {
  margin-top: auto; padding-top: var(--e-2); border-top: 1px solid var(--lateral-linha);
  display: flex; align-items: center; gap: var(--e-1);
}
.lateral .rodape .item { flex: 1; min-width: 0; }
.lateral .rodape .inicial {
  width: 22px; height: 22px; flex: 0 0 22px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.14); color: var(--lateral-ativo-tx); font-size: var(--t-1); font-weight: 600;
}
.lateral .rodape .email { overflow: hidden; text-overflow: ellipsis; }
.lateral .rodape form { margin: 0; flex: none; }
.lateral .rodape .sair {
  width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--lateral-tx-2); border-radius: var(--r-controle);
}
.lateral .rodape .sair:hover { background: var(--lateral-realce); color: var(--lateral-tx); filter: none; }
.lateral .rodape .sair svg { width: 16px; height: 16px; }
.lateral :focus-visible { outline-color: var(--marca); }

/* Cliente em que se está trabalhando. Fica no alto e com peso, porque tudo
   abaixo dele pertence a ele. */
.seletor { padding: 0 0 var(--e-3); margin: 0; }
.seletor select, .seletor.so-um {
  width: 100%; height: 36px; padding: 0 var(--e-2); font-size: var(--t-3); font-weight: 500;
  color: var(--lateral-tx); background: var(--lateral-campo);
  border: 1px solid var(--lateral-campo-linha); border-radius: var(--r-controle);
  display: flex; align-items: center;
}
.seletor select:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); cursor: pointer; }
.seletor select:focus { border-color: var(--marca); }
/* Nome longo de cliente corta com reticências em vez de quebrar e vazar para o item de baixo. */
.seletor.so-um { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 34px; }
.seletor select { text-overflow: ellipsis; }
.seletor select option { background: var(--lateral); color: var(--lateral-tx); }

/* ── Conteudo ──────────────────────────────────────────────────────────── */

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

/* Cabecalho fino, 44px, com o caminho da pagina. Medido. */
.topo {
  height: 44px; flex: 0 0 44px;
  display: flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-4); border-bottom: 1px solid var(--linha);
  font-size: var(--t-3); color: var(--tinta-2);
  position: sticky; top: 0; background: var(--fundo); z-index: 5;
}
.topo .caminho { color: var(--tinta); font-weight: 500; }
/* Trilha clicável: cada nível acima da tela atual é link (02/10/2026). */
.trilha { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.trilha .caminho { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trilha-link {
  color: var(--tinta-2); text-decoration: none; white-space: nowrap;
  padding: var(--fc-1) var(--fc-2); margin: 0 calc(var(--fc-2) * -1); border-radius: var(--r-controle);
}
.trilha-link:hover { color: var(--tinta); background: var(--realce); }
.trilha-link:active { background: var(--realce-forte, var(--realce)); }
.trilha-link:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.topo .sep { color: var(--tinta-3); }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); }

/* Botão de tema claro/escuro (01/10/2026): sempre no canto superior direito. Nas
   telas com login fica na ponta da barra do topo; nas telas sem login (entrar,
   link de conexão), solto no canto. */
.botao-tema {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel);
  color: var(--tinta-2); cursor: pointer;
}
.botao-tema:hover { background: var(--realce); color: var(--tinta); }
.botao-tema:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.botao-tema svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--curva); }
.botao-tema:active svg { transform: rotate(-30deg) scale(.9); }
.botao-tema .ic-sol { display: none; }
:root[data-tema="escuro"] .botao-tema .ic-sol { display: block; }
:root[data-tema="escuro"] .botao-tema .ic-lua { display: none; }
.botao-tema.solto { position: fixed; top: 12px; right: 16px; z-index: 50; margin: 0; }
@media (prefers-reduced-motion: reduce) { .botao-tema svg { transition: none; } }

main { padding: var(--margem-tela); width: 100%; min-width: 0; }

h1 { font-size: var(--t-6); line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 var(--e-1); text-wrap: balance; }
h2 { font-size: var(--t-4); font-weight: 600; letter-spacing: -0.01em; margin: var(--e-6) 0 var(--e-3); }
.legenda { color: var(--tinta-2); font-size: var(--t-3); margin: 0 0 var(--e-6); }

/* Bloco de destaque: superfície branca sobre o fundo cinza. */
.aviso {
  background: var(--papel); border: 1px solid var(--linha); box-shadow: var(--elev-1);
  border-radius: var(--r-cartao); padding: var(--e-3) var(--e-4);
  font-size: var(--t-3); color: var(--tinta); margin-bottom: var(--e-6); line-height: 22px;
}
.erro {
  background: color-mix(in srgb, var(--alerta) 12%, transparent);
  border-radius: var(--r-janela); padding: var(--e-3) var(--e-4); font-size: var(--t-3);
  color: var(--alerta); margin-bottom: var(--e-4);
}

/* ── Numeros do dia ────────────────────────────────────────────────────── */

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-3); }
.cartao { padding: var(--e-3) var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--papel); box-shadow: var(--elev-1); }
.cartao .rotulo { font-size: var(--t-1); color: var(--tinta-2); }
.cartao .valor { font-size: var(--t-6); font-weight: 600; letter-spacing: -0.02em; margin-top: var(--e-2); line-height: 1.15; }
.cartao.destaque .valor { color: var(--alerta); }

/* ── Tabelas ───────────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha); font-size: var(--t-3); }
th {
  font-size: var(--t-1); font-weight: 500; color: var(--tinta-2);
  border-bottom: 1px solid var(--linha); padding-top: var(--e-1); padding-bottom: var(--e-2);
}
tbody tr:hover { background: var(--realce); }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
td code, .mono {
  font: var(--t-2) ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--tinta-2);
  white-space: nowrap;
}
/* Cabecalho de coluna nao quebra: "Ultimo sinal" em duas linhas desalinha a
   tabela inteira e faz a linha do cabecalho ficar mais alta que o conteudo. */
th { white-space: nowrap; }

/* Etiqueta: retangulo de raio 4px, 18px de altura, 12px. Medido no Notion. */
.tag {
  display: inline-block; font-size: var(--t-1); line-height: 18px; height: 18px;
  padding: 0 var(--e-2); border-radius: var(--r-controle);
  background: var(--tag-neutra-bg); color: var(--tag-neutra-tx);
  /* Contorno da própria cor, como as etiquetas do Jurichat: a etiqueta se lê
     sem precisar de fundo forte. line-height desconta a borda (18px no total). */
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); line-height: 16px;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.tag.quente { background: var(--tag-quente-bg); color: var(--tag-quente-tx); }
.tag.fria { background: var(--tag-fria-bg); color: var(--tag-fria-tx); }
/* Fundo opaco (mistura com o papel): na linha da conversa aberta o fundo translúcido
   escurecia e o texto caía para 4,2:1. Agora 5,3:1 no claro e 6,2:1 no escuro. */
.tag.espera { background: var(--alerta-bg); color: var(--alerta-tx); }
.tag.ok { background: color-mix(in srgb, var(--ok-tx) 14%, transparent); color: var(--ok-tx); }

.apagado { color: var(--tinta-3); }

/* ── Filtros ───────────────────────────────────────────────────────────── */

.filtros { display: flex; gap: var(--e-1); margin-bottom: var(--e-3); flex-wrap: wrap; }
.filtros a {
  font-size: var(--t-3); padding: var(--e-1) var(--e-2); border-radius: var(--r-controle);
  text-decoration: none; color: var(--tinta-2);
}
.filtros a:hover { background: var(--realce); }
.filtros a.ativo { background: var(--realce); color: var(--tinta); font-weight: 500; }

/* ── Formularios ───────────────────────────────────────────────────────── */

label { display: block; font-size: var(--t-1); color: var(--tinta-2); margin: var(--e-3) 0 var(--e-1); }
input, select {
  width: 100%; height: 36px; padding: 0 var(--e-3); font-size: var(--t-3);
  color: var(--tinta); background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent); border-radius: var(--r-controle);
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
input:hover, select:hover { border-color: color-mix(in srgb, var(--tinta) 28%, transparent); }
/* No celular, campo abaixo de 16px faz o iPhone dar zoom ao tocar. */
@media (max-width: 900px) { input, select, textarea { font-size: var(--t-4); } }
/* O anel de foco e' o unico rastro de quem navega por teclado. Ate 21/09/2026
   esta regra fazia outline:none e trocava so a cor da borda, sinal fraco demais,
   e valia para todo formulario do app, inclusive a tela de entrada. */
input:focus, select:focus { border-color: var(--acento); }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--acento); outline-offset: -1px; }
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-controle); }
/* Caixa de marcar não herda altura e borda do campo de texto. */
input[type=checkbox] { width: 16px; height: 16px; padding: 0; flex: none; accent-color: var(--acento); }
/* Tabela larga rola dentro dela no celular, sem empurrar a página. */
.rolagem-x { overflow-x: auto; }

/* Botão principal em tinta (regra 8 do design system): o azul fica para seleção,
   foco e link. Um principal por tela; o resto é .discreto. */
button {
  height: 36px; padding: 0 var(--e-4); font-size: var(--t-3); font-weight: 500;
  border: none; border-radius: var(--r-controle);
  background: var(--botao); color: var(--botao-tx); cursor: pointer;
  box-shadow: var(--elev-1);
}
/* Véu por cima de qualquer cor de fundo (tinta, perigo, nota): clareia no tema
   claro, escurece no escuro, onde a tinta é quase branca. */
button:hover, a.botao:hover { background-image: linear-gradient(var(--veu-hover), var(--veu-hover)); }
button:active, a.botao:active { transform: scale(.97); }
button.discreto { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); }
/* O --recuo sobre o papel branco dava 1% de diferença: o botão claro não
   reagia ao mouse. Agora escurece e a borda aparece. */
button.discreto:hover {
  background: color-mix(in srgb, var(--tinta) 7%, var(--papel));
  border-color: color-mix(in srgb, var(--tinta) 24%, transparent); filter: none;
}
button.perigo { background: var(--alerta); }
button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
.zona-perigo { border-color: color-mix(in srgb, var(--alerta) 40%, var(--linha)); max-width: 640px; }
.zona-perigo p { font-size: var(--t-3); line-height: 22px; }

form.entrar {
  max-width: 320px; margin: 14vh auto; padding: 0 var(--e-6);
}
form.entrar button { width: 100%; height: 36px; margin-top: var(--e-4); }

/* ── Conversa ──────────────────────────────────────────────────────────── */

.somente-leitura {
  font-size: var(--t-2); color: var(--tinta-2); background: var(--recuo);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-janela); margin-bottom: var(--e-4);
}
/* O bloco antigo de .bolha que morava aqui saiu em 22/09/2026. Ele não era
   morto: o seletor casava com a bolha nova e o `white-space: pre-wrap` dele
   vazava para o rodapé, que ganhava duas linhas em branco (hora 40px abaixo
   do texto em toda mensagem). A bolha de hoje está em "Bolhas", mais abaixo. */

.vazio { padding: var(--e-12) 0; color: var(--tinta-2); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6); }
/* Item de grade não encolhe abaixo do conteúdo sem isto: com 30 dias, o
   gráfico por dia empurrava a página para o lado em 1100px e no celular. */
.grade2 > * { min-width: 0; }

/* ── Celular ───────────────────────────────────────────────────────────── */

/* Barra de baixo: só existe no celular (ver o bloco de 900 px). */
.barra-baixo { display: none; }
@media (max-width: 900px) {
  .app { flex-direction: column; }
  /* Celular (15/10/2026, no molde do Ficha Studio): a lateral vira só a faixa do
     alto, com a marca e o cliente; o menu desce para a barra de baixo. A faixa
     de ícones que rolava de lado saiu: escondia metade das telas. */
  .lateral {
    width: 100%; flex: none; height: auto; position: sticky; top: 0; z-index: 20;
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e-3);
    overflow: visible; padding: var(--e-2) var(--e-4); padding-top: calc(var(--e-2) + env(safe-area-inset-top, 0px));
    border-right: 0; border-bottom: 1px solid var(--lateral-linha);
  }
  .lateral .secao, .lateral .rodape, .lateral .quem, .lateral > .item, .troca-cliente { display: none; }
  .lateral .marca { padding: 0; flex: none; }
  .lateral .seletor { max-width: min(60vw, 240px); min-width: 0; padding: 0; }
  /* O caminho do topo repete o título da tela; no celular ele sai e o botão de
     tema vai para o "Mais". */
  .topo { display: none; }
  main { padding: var(--e-4) var(--e-4) calc(var(--alto-barra) + var(--e-4) + env(safe-area-inset-bottom, 0px)); }

  .barra-baixo {
    display: flex; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    padding: var(--e-1) var(--e-2) calc(var(--e-1) + env(safe-area-inset-bottom, 0px));
    background: var(--lateral); border-top: 1px solid var(--lateral-linha); color-scheme: dark;
  }
  .bb-item {
    position: relative; flex: 1 1 0; min-width: 0; min-height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fc-1);
    border-radius: var(--r-controle); color: var(--lateral-tx-2); text-decoration: none;
    font-size: var(--t-1); font-weight: 600; line-height: 1.1; cursor: pointer; list-style: none;
  }
  .bb-item::-webkit-details-marker { display: none; }
  .bb-item .ic { width: 22px; height: 22px; }
  .bb-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bb-item:hover { background: var(--lateral-realce); color: var(--lateral-tx); }
  .bb-item:active { transform: scale(.96); }
  .bb-item.ativo { background: var(--lateral-ativo); color: var(--lateral-tx); }
  .bb-item.ativo .ic { color: var(--marca); }
  .bb-item:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
  .bb-conta {
    position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 var(--fc-2);
    border-radius: var(--r-pill); background: var(--alerta-pilula); color: #fff;
    font-size: var(--t-1); line-height: 18px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
  }
  .bb-mais { flex: 1 1 0; min-width: 0; display: flex; }
  .bb-mais > summary { flex: 1; }
  .bb-mais[open] > summary { background: var(--lateral-ativo); color: var(--lateral-tx); }
  /* "Mais": folha que sobe do pé da tela, com o resto do menu em lista. */
  .bb-folha {
    position: fixed; left: var(--e-2); right: var(--e-2); bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    max-height: min(70vh, 560px); overflow-y: auto; padding: var(--e-2);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1);
    background: var(--lateral); border: 1px solid var(--lateral-linha); border-radius: var(--r-janela);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .35);
    transform-origin: bottom right; animation: bb-sobe var(--dur-2) var(--curva);
  }
  .bb-folha .bb-item { flex-direction: row; justify-content: flex-start; gap: var(--e-3); min-height: 48px; padding: 0 var(--e-3); font-size: var(--t-3); font-weight: 500; }
  .bb-folha .bb-item .ic { width: 18px; height: 18px; }
  .bb-fim {
    grid-column: 1 / -1; display: flex; align-items: center; gap: var(--e-3);
    margin-top: var(--e-1); padding: var(--e-2) var(--e-1) 0; border-top: 1px solid var(--lateral-linha);
  }
  .bb-fim .botao-tema { margin: 0; flex: none; width: 40px; height: 40px; color: var(--lateral-tx-2); border-color: var(--lateral-linha); background: transparent; }
  .bb-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lateral-tx-2); font-size: var(--t-2); }
  .bb-fim form { margin: 0; }
  .bb-fim button.discreto { height: 40px; background: transparent; color: var(--lateral-tx); border-color: var(--lateral-campo-linha); }
  .bb-fim button.discreto:hover { background: var(--lateral-realce); }
  @keyframes bb-sobe { from { opacity: 0; transform: translateY(8px) scale(.98); } }
  .grade2 { grid-template-columns: 1fr; gap: var(--e-6); }
  .bolha { max-width: 88%; }
  h1 { font-size: var(--t-6); }
}

/* ── Tela de entrada: formulário à esquerda, arte à direita ──────────────
   Proporção 50/50, como a da Hotmart. A arte é uma cor sólida por baixo e
   uma imagem por cima: se o arquivo /login.jpg não existir, a coluna
   simplesmente fica na cor, sem quebrar nada. Para trocar a foto, basta
   colocar um public/login.jpg no lugar. */

.entrada { display: flex; min-height: 100vh; }

.entrada-form {
  flex: 1 1 50%;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e-6);
}
.entrada-form .interno { width: 100%; max-width: 340px; margin: 0 auto; }
.entrada-form .logo { font-size: var(--t-5); font-weight: 600; margin-bottom: var(--e-6); }
.entrada-form .logo span, .logo-solta span { color: var(--acento); } /* fora da moldura, o nome inteiro na tinta */
.logo-solta { font-size: var(--t-5); font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--e-1); }
.entrada-form h1 { font-size: var(--t-6); margin-bottom: var(--e-1); }
.entrada-form form { margin: 0; max-width: none; padding: 0; }
.entrada-form button[type="submit"] { width: 100%; height: 40px; margin-top: var(--e-6); }
.entrada-form .abaixo {
  margin-top: var(--e-4); display: flex; justify-content: space-between;
  align-items: center; gap: var(--e-3); font-size: var(--t-2);
}
.entrada-form .abaixo button {
  height: auto; padding: 0; background: none; color: var(--tinta-2);
  font-weight: 400; font-size: var(--t-2);
}
.entrada-form .abaixo button:hover { color: var(--tinta); filter: none; text-decoration: underline; }

.entrada-arte {
  flex: 1 1 50%;
  /* Preto do site (specs/044). A foto, se houver um public/login.jpg, entra por cima. */
  background-color: #000;
  background-image: url('/login.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex; align-items: flex-end;
  padding: var(--e-6);
  position: relative;
}
/* Véu escuro: sem ele, a frase some quando a foto é clara. */
.entrada-arte::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
}
.entrada-arte .frase {
  position: relative; color: #fff; max-width: 420px;
  font-size: var(--t-6); line-height: 1.32; font-weight: 600; letter-spacing: -0.02em;
}
.entrada-arte .frase small {
  display: block; margin-top: var(--e-3);
  font-size: var(--t-3); font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.8);
}

@media (max-width: 860px) {
  .entrada-arte { display: none; }
  .entrada-form { flex: 1 1 100%; padding: var(--e-4); }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAINEL OPERACIONAL

   Aqui a estetica do Notion e deliberadamente abandonada. O Notion e calmo
   porque documento se le linha a linha; painel de plantao se le de relance, e
   silencio visual vira lentidao para achar o que importa. Entao: numero
   grande, cor com significado (e so onde ha significado), e linha mais densa.

   A regra que separa as duas metades da interface: TELA OPERACIONAL (painel,
   conversas, kanban) tem cor e densidade; TELA DE LEITURA E DE ADMINISTRACAO
   (conversa, cadastro, conta) continua calma. Cor aqui e informacao, nunca
   decoracao: se um estado nao muda o que a pessoa faz, ele fica cinza.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Verde só para venda; âmbar para "hoje" e "perto"; vermelho só para atraso
     (specs/044). Fundo de pílula opaco, para o texto não depender do que
     está atrás. */
  --ok: #16773b;
  --ok-bg: #eaf6ee;
  --atencao: #8a5600;
  --atencao-bg: #fbf0d9;
  --alerta-bg: #fdf0ed;
  --alerta-borda: rgba(196, 54, 26, 0.32);
  --barra: #c4c4c8;                /* barras de histórico: tinta a 28% */
  --atencao-tx: #744800;           /* "sem retorno", "hoje": 7,9:1 no papel */
  --acento-hover: #3a3a3f;         /* link e barra sob o mouse */
  /* Gráfico: grade a 6% e linha de base a 14% da tinta. */
  --grade: rgba(0, 0, 0, 0.06);
  --grade-base: rgba(0, 0, 0, 0.14);
  /* Origens em tons da tinta (100, 70, 45 e 25%): cor categórica brigaria com
     a regra do amarelo. "(sem origem)" é hachurado e "Outras origens" fica no
     cinza mais claro, porque não são uma origem. */
  --origem-1: #111111;
  --origem-2: #58585b;
  --origem-3: #8f8f92;
  --origem-4: #c3c3c5;
  --origem-5: #c3c3c5;
  --origem-6: #c3c3c5;
  --origem-neutra: #dcdcde;
}

:root[data-tema="escuro"] {
  --ok: #62dd98;
  --ok-bg: #16301f;
  --atencao: #ffc95e;
  --atencao-bg: #33280f;
  --alerta-bg: #3a1d16;
  --alerta-borda: rgba(255, 125, 95, 0.42);
  --barra: #5a5a61;
  --atencao-tx: #ffc95e;
  --acento-hover: #d6d6da;
  --grade: rgba(255, 255, 255, 0.06);
  --grade-base: rgba(255, 255, 255, 0.16);
  --origem-1: #f5f5f6;
  --origem-2: #b6b6ba;
  --origem-3: #808086;
  --origem-4: #5a5a61;
  --origem-5: #5a5a61;
  --origem-6: #5a5a61;
  --origem-neutra: #45454c;
}

/* ── Resumo do dia (direção C, aprovada em 13/10/2026) ─────────────────────
   O Painel abre com uma frase dizendo o que pede a pessoa agora, um botão para
   começar pela conversa mais antiga e quatro números, cada um com um desenho
   pequeno. Embaixo, duas listas: quem espera e de onde vieram. Detalhes e
   medidas em .interface-design/system.md. Transição só de cor, opacidade e
   transform (a regra global de movimento já cobre o resto e some com
   prefers-reduced-motion). */

/* Cabeçalho: "cliente · período" à esquerda, abas de período e Comparar à direita.
   O h1 é o nome do cliente, discreto de propósito: o destaque da tela é a frase. */
.kicker { min-width: 0; font-size: var(--t-3); line-height: 22px; font-weight: 500; color: var(--tinta-2); }
.kicker h1 { display: inline; margin: 0; font-size: inherit; line-height: inherit; font-weight: 500; letter-spacing: 0; color: var(--tinta-2); }
.kicker .apagado { color: var(--tinta-3); font-weight: 400; }
.controles-periodo { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }

/* Seletor de período: trilho cinza com a aba ativa em branco e com fio, texto de
   tinta, sem azul chapado (regra 8). Raio concêntrico: 6 da aba + 2 de recuo = 8. */
.periodo { display: flex; gap: var(--fc-1); padding: var(--fc-1); background: var(--realce); border-radius: calc(var(--r-controle) + var(--fc-1)); }
.periodo a {
  padding: var(--e-1) var(--e-3);
  border-radius: var(--r-controle);
  font-size: var(--t-3);
  color: var(--tinta-2);
  text-decoration: none;
  white-space: nowrap;
}
.periodo a:hover { background: var(--realce); color: var(--tinta); }
.periodo a:active { transform: scale(.97); }
.periodo a.ativo { background: var(--papel); color: var(--tinta); font-weight: 600; box-shadow: 0 0 0 1px var(--linha); }
/* Abas de 32 px de altura (trilho de 36), como o botão Comparar ao lado. */
.periodo > a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--e-3); }
.periodo .menu-datas > summary { display: inline-flex; align-items: center; gap: var(--e-1); height: 32px; padding: 0 var(--e-3); border-radius: var(--r-controle); }
.periodo .menu-datas.ativo > summary { background: var(--papel); box-shadow: 0 0 0 1px var(--linha); font-weight: 600; }
.periodo .menu-datas > summary:active { transform: scale(.97); }
.barra-periodo .menu-comparar > summary {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: 36px; padding: 0 var(--e-3);
  border-radius: var(--r-controle); background: var(--realce); color: var(--tinta); font-weight: 500; white-space: nowrap;
}
.barra-periodo .menu-comparar > summary:hover { background: var(--realce-forte); }
.barra-periodo .menu-comparar > summary:active { transform: scale(.97); }
.barra-periodo .menu-comparar.ativo > summary { background: var(--papel); box-shadow: 0 0 0 1px var(--linha); font-weight: 600; }
/* O botão fica na ponta direita da tela: o menu abre para dentro, não para fora dela. */
.barra-periodo .menu-comparar .menu-painel { left: auto; right: 0; top: 42px; transform-origin: top right; }

/* Frase de abertura: 28 px, peso 400, com o número e o tempo em 600. O número é
   vermelho (atraso); o "nunca respondidos" leva o âmbar de "sem retorno". Sem
   ninguém esperando, a frase vira uma linha calma com check verde. */
.abertura { margin-top: 0; max-width: 880px; }
.abertura .frase { margin: 0; font-size: var(--t-heroi); line-height: 1.25; font-weight: 400; letter-spacing: -0.018em; text-wrap: balance; }
.abertura .frase b { font-weight: 600; }
.abertura .n-alerta { color: var(--alerta); font-variant-numeric: tabular-nums; }
.abertura .frase.calma { display: flex; align-items: center; gap: var(--e-3); }
.abertura .frase.calma svg { flex: none; width: 28px; height: 28px; color: var(--ok-tx); }
.abertura .apoio { margin: var(--e-3) 0 0; font-size: var(--t-4); color: var(--tinta-2); text-wrap: pretty; }
.abertura .n-atencao { color: var(--atencao-tx); font-weight: 600; font-variant-numeric: tabular-nums; }
.abertura .acao { margin-top: var(--e-6); display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
a.botao.grande { height: 40px; padding: 0 var(--e-6); gap: var(--e-2); }
.seta { display: inline-block; transition: transform var(--dur-2) var(--curva); }
a.botao:hover .seta, .link-sec:hover .seta { transform: translateX(2px); }
.abertura .quem { min-width: 0; display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-3); color: var(--tinta-2); }
.abertura .quem .corta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inicial {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--realce-forte); color: var(--tinta-2); font-size: var(--t-1); font-weight: 600;
}

/* Quatro cartões de indicador, cada um com um desenho pequeno (anel ou barras).
   Rótulo 12/500, valor 28/600 tabular, nota 12; o delta da comparação, embaixo. */
.kpis { margin-top: var(--e-3); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); }
.kpi {
  min-width: 0; min-height: 112px; padding: var(--e-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-2);
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-cartao);
}
.kpi-corpo { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.kpi-txt { min-width: 0; align-self: flex-start; }
.kpi-rot { font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); white-space: nowrap; }
.kpi-val { margin-top: var(--e-2); font-size: var(--t-heroi); line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.kpi-val small { font-size: var(--t-4); font-weight: 500; color: var(--tinta-2); letter-spacing: 0; }
.kpi-nt { margin-top: var(--e-1); font-size: var(--t-1); line-height: 16px; color: var(--tinta-3); text-wrap: pretty; }
.kpi .delta { font-size: var(--t-1); line-height: 16px; font-weight: 600; color: var(--tinta-2); }
.kpi .delta span { font-weight: 400; color: var(--tinta-3); }
.kpi .delta.bom { color: var(--ok-tx); }
.kpi .delta.ruim { color: var(--alerta-tx); }
.anel { flex: none; }
.anel-trilho { stroke: var(--realce-forte); }
.anel-arco { stroke: var(--acento); }
/* Barras do dia: uma cor. Dia fora do período apagado, dia dentro a 45%, o último
   em cor cheia; dia sem contato vira um risco. Com 30 dias as barras ficam finas. */
.mini-b { --alt: 40px; flex: none; align-self: center; width: 96px; height: var(--alt); display: flex; align-items: flex-end; gap: var(--fc-1); }
.mini-b.denso { gap: 1px; }
.mini-b i {
  display: block; flex: 1 1 0; min-width: 1px; height: max(2px, calc(var(--alt) * var(--v))); border-radius: 2px 2px 0 0; /* desenho do gráfico */
  background: color-mix(in srgb, var(--acento) 45%, var(--papel)); transition: background-color var(--dur-1) var(--curva);
}
.mini-b i.fora { background: color-mix(in srgb, var(--acento) 18%, var(--papel)); }
.mini-b i.ultimo { background: var(--acento); }
.mini-b i:hover { background: var(--acento-hover); }
.mini-b i.zero { height: 2px; border-radius: 0; background: var(--grade-base); }

/* Duas colunas: quem espera (7) e de onde vieram (5). */
.grade-dia { margin-top: var(--e-4); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-4); align-items: start; }
.cartao-sec { min-width: 0; overflow: hidden; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-cartao); }
.sec-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-6) var(--e-6) var(--e-3); }
.sec-cab h2 { margin: 0; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-4); }
.sec-conta {
  height: 20px; min-width: 20px; padding: 0 var(--fc-2); border-radius: var(--r-pill); display: inline-grid; place-items: center;
  background: var(--realce-forte); color: var(--tinta-2); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.link-sec {
  display: inline-flex; align-items: center; gap: var(--e-1); padding: var(--e-1) var(--e-2); margin: calc(var(--e-1) * -1) calc(var(--e-2) * -1);
  border-radius: var(--r-controle); font-size: var(--t-3); font-weight: 500; color: var(--acento); text-decoration: none; white-space: nowrap;
}
.link-sec:hover { color: var(--acento-hover); }
.link-sec:active { transform: scale(.97); }

/* Lista de ação: ícone de conversa, "<Nome> está esperando resposta", origem
   embaixo, "Abrir conversa" e o tempo em vermelho (regra 4). A linha toda é o
   link: o ::after do "Abrir conversa" estica sobre ela. */
.lista-ac { list-style: none; margin: 0; padding: 0; }
.ac {
  position: relative; padding: var(--e-2) var(--e-6); display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: var(--e-3);
  border-top: 1px solid var(--linha); transition: background-color var(--dur-1) var(--curva);
}
.ac:hover { background: var(--realce); }
.ac:active { background: var(--realce-forte); }
.ac .ico { width: 32px; height: 32px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--realce-forte); color: var(--tinta-2); }
.ac .ico svg { width: 16px; height: 16px; }
.ac-txt { min-width: 0; }
.ac .fr { margin: 0; font-size: var(--t-3); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac .fr b { font-weight: 600; }
.ac .meta { margin: var(--e-1) 0 0; display: flex; align-items: center; gap: var(--e-1); min-width: 0; font-size: var(--t-2); line-height: 18px; color: var(--tinta-3); }
.ac .meta svg { flex: 0 0 14px; width: 14px; height: 14px; }
.ac .meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abrir-l { font-size: var(--t-3); font-weight: 500; color: var(--acento); text-decoration: none; white-space: nowrap; }
.abrir-l .abrir-txt { display: inline-block; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: transform var(--dur-1) var(--curva), color var(--dur-1) var(--curva); }
.abrir-l::after { content: ''; position: absolute; inset: 0; }
.abrir-l:hover { color: var(--acento-hover); }
.abrir-l:active .abrir-txt { transform: scale(.97); }
.ac:hover .abrir-l { color: var(--acento-hover); }
@supports selector(:has(*)) {
  .abrir-l:focus-visible { outline: none; }
  .ac:has(.abrir-l:focus-visible) { outline: 2px solid var(--acento); outline-offset: -2px; }
}
.ac .tempo { min-width: 72px; text-align: right; font-size: var(--t-2); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--alerta-tx); white-space: nowrap; }
.espera-vazia { margin: 0; padding: var(--e-4) var(--e-6) var(--e-6); display: flex; align-items: center; gap: var(--e-3); border-top: 1px solid var(--linha); font-size: var(--t-3); color: var(--tinta-2); }
.espera-vazia svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--ok-tx); }

/* De onde vieram: barra empilhada, uma cor por origem (regra 3) */
.og-box { padding: 0 var(--e-6) var(--e-6); }
.og-box > .legenda { margin: 0; }
.og-box .origem-barra { height: 16px; margin: var(--e-1) 0 var(--e-3); }
.origem-barra {
  display: flex; gap: var(--fc-1); height: 12px; margin: var(--e-3) 0 var(--e-3);
  border-radius: var(--r-pill); overflow: hidden;
}
.origem-barra .trecho { height: 100%; min-width: 3px; background: var(--cor-origem); transition: opacity var(--dur-1) var(--curva); }
.origem-barra:hover .trecho { opacity: .45; }
.origem-barra .trecho:hover { opacity: 1; }
.origem-legenda { list-style: none; margin: 0; padding: 0; }
.origem-legenda li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; align-items: center; column-gap: var(--e-3);
  min-height: 32px; padding: 0 var(--e-2); margin: 0 calc(var(--e-2) * -1); border-radius: var(--r-controle);
  font-size: var(--t-3); transition: background-color var(--dur-1) var(--curva);
}
.origem-legenda li:hover { background: var(--realce); }
.origem-legenda .bolinha { width: 10px; height: 10px; border-radius: var(--r-pill); background: var(--cor-origem); }
.origem-legenda .rot { color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.origem-legenda .qtd { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.origem-legenda .pct { color: var(--tinta-3); font-size: var(--t-1); font-variant-numeric: tabular-nums; text-align: right; }
.origem-legenda .neutra, .origem-barra .neutra { --cor-origem: var(--origem-neutra); }
.rodape-nota { margin-top: var(--e-4); font-size: var(--t-2); line-height: 18px; }
.og-box .rodape-nota { margin: var(--e-3) 0 0; padding-top: var(--e-3); border-top: 1px solid var(--linha); font-size: var(--t-1); line-height: 16px; color: var(--tinta-3); text-wrap: pretty; }

/* Em 1280 px o cartão tem ~200 px de miolo: barras mais estreitas deixam o rótulo numa linha. */
@media (max-width: 1360px) {
  .mini-b { width: 72px; }
}
@media (max-width: 1199px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .grade-dia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* `main` na frente: a regra base de .barra-periodo vem depois no arquivo. */
  main .barra-periodo { flex-direction: column; align-items: stretch; gap: var(--e-2); }
  .controles-periodo { display: grid; gap: var(--e-2); }
  .periodo { align-self: stretch; }
  .periodo > a, .periodo .menu-datas { flex: 1 1 auto; }
  .periodo > a, .periodo .menu-datas > summary { justify-content: center; padding: 0 var(--fc-2); font-size: var(--t-2); }
  .barra-periodo .menu-comparar > summary { display: flex; justify-content: center; }
  .abertura { margin-top: 0; }
  .abertura .frase { font-size: 24px; }
  .abertura .frase.calma svg { width: 24px; height: 24px; }
  .abertura .acao { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .abertura .acao a.botao { width: 100%; justify-content: center; }
  .kpis { gap: var(--e-3); margin-top: var(--e-3); }
  .kpi { padding: var(--e-5); }
  .kpi-corpo { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--e-2); }
  .kpi-val { font-size: 24px; }
  .mini-b { --alt: 28px; width: 100%; max-width: 96px; align-self: flex-start; }
  .sec-cab { padding: var(--e-4) var(--e-4) var(--e-3); }
  .ac { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "i f t" "i l l"; row-gap: var(--e-1); padding: var(--e-3) var(--e-4); }
  .ac .ico { grid-area: i; align-self: start; }
  .ac-txt { grid-area: f; }
  .ac .fr { white-space: normal; }
  .abrir-l { grid-area: l; justify-self: start; }
  .ac .tempo { grid-area: t; min-width: 0; align-self: start; }
  .espera-vazia { padding: var(--e-3) var(--e-4) var(--e-4); }
  .og-box { padding: 0 var(--e-4) var(--e-4); }
}

/* ── Tabela operacional: mais densa que a de leitura ───────────────────── */

table.operacional td, table.operacional th { padding-top: var(--e-2); padding-bottom: var(--e-2); }
table.operacional tbody tr:hover { background: var(--realce); }

.tag.ok { background: var(--ok-bg); color: var(--ok-tx); }

/* Titulo de secao com contador ao lado. */
h2 .conta { vertical-align: middle; margin-left: var(--e-2); }

/* ══════════════════════════════════════════════════════════════════════════
   KANBAN

   Tela operacional: densa e colorida. A cor de cada coluna e' a cor que a
   etiqueta tem no WhatsApp do cliente, entao o quadro aqui e o celular dele
   se parecem, que e' o ponto inteiro da escolha.
   ══════════════════════════════════════════════════════════════════════════ */

.quadro {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: var(--e-4);
  margin-top: var(--e-4);
  /* A rolagem lateral e' do quadro, nunca da pagina. */
  scrollbar-width: thin;
}

.barra-quadro { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.barra-quadro form { margin: 0; }
.seta-quadro { width: 34px; padding: 0; font-size: var(--t-5); line-height: 1; }
.seta-quadro:disabled { opacity: .35; }

.coluna-kanban {
  flex: 0 0 272px;
  background: var(--realce);
  border: 1px solid transparent;
  border-radius: var(--r-controle);
  padding: var(--e-3);
  min-height: 140px;
}
.coluna-kanban.recebendo { border-color: var(--acento); background: var(--realce-forte); }

.coluna-kanban > header {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 0 var(--e-2);
  font-size: var(--t-3);
  font-weight: 500;
}
.coluna-kanban .nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coluna-kanban .total {
  color: var(--tinta-3);
  background: var(--realce);
  border-radius: var(--r-pill);
  padding: 0 var(--e-2);
  font-size: var(--t-1);
}
.ponto { width: 9px; height: 9px; border-radius: var(--r-pill); flex: 0 0 9px; }

.coluna-kanban .cartoes { display: flex; flex-direction: column; gap: var(--e-2); }
.coluna-kanban .vazia { color: var(--tinta-3); font-size: var(--t-2); margin: var(--e-1) 0; }

.cartao-lead {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: var(--e-3);
  cursor: grab;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-2) var(--curva);
}
.cartao-lead:hover { box-shadow: var(--elev-2); }
.cartao-lead.arrastando { opacity: .45; }
.cartao-lead .titulo { display: block; font-size: var(--t-3); font-weight: 500; text-decoration: none; }
.cartao-lead .titulo:hover { text-decoration: underline; }
.cartao-lead .tel { margin-top: 0; }
.cartao-lead .tel code { font-size: var(--t-1); color: var(--tinta-3); }
.cartao-lead .marcas { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-2); }
/* Etiqueta de criativo pode ser longa; corta em vez de esticar a coluna. */
.cartao-lead .marcas .tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cartao-lead .rodape-cartao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.cartao-lead .quando { font-size: var(--t-1); color: var(--tinta-3); white-space: nowrap; }
/* O seletor de coluna continua em todo card (é o caminho sem JavaScript e o
   do teclado), mas sem caixa: 64 seletores emoldurados eram o ruído mais
   pesado do quadro. A moldura aparece só quando a mão chega no card. */
.cartao-lead .mover select {
  height: 26px; width: auto;
  font-size: var(--t-1);
  padding: 0 var(--e-2);
  max-width: 140px;
  border: 1px solid transparent;
  border-radius: var(--r-controle);
  background: transparent;
  color: var(--tinta-3);
  cursor: pointer;
}
.cartao-lead:hover .mover select, .cartao-lead .mover select:focus-visible {
  border-color: var(--linha); background: var(--papel); color: var(--tinta-2);
}

/* ── Onboarding ────────────────────────────────────────────────────────── */

.passos { list-style: none; padding: 0; margin: var(--e-4) 0 0; counter-reset: passo; }
.passo {
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: var(--e-4) var(--e-4);
  margin-bottom: var(--e-3);
}
.passo .cabeca { display: flex; align-items: center; gap: var(--e-3); }
.passo h2 { margin: 0; font-size: var(--t-4); }
.passo .marca {
  width: 24px; height: 24px; flex: 0 0 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: var(--realce-forte);
  color: var(--tinta-2);
  font-size: var(--t-2); font-weight: 600;
}
.passo.feito { border-color: rgba(47, 125, 79, .35); }
.passo.feito .marca { background: var(--ok-bg); color: var(--ok); }
.passo.ligado .marca { background: var(--tag-quente-bg); color: var(--tag-quente-tx); }
.passo p { margin: var(--e-2) 0 0; }
/* O "por que isto importa" e' apoio: menor, mas nunca escondido. Passo sem
   consequencia explicada vira item que alguem pula achando que e' opcional. */
.passo .porque { font-size: var(--t-2); color: var(--tinta-3); }

.passo .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); align-items: center; }
.passo .sugestao {
  margin-top: var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--recuo);
  border-radius: var(--r-controle);
}

.lista-etiquetas { list-style: none; padding: 0; margin: var(--e-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.lista-etiquetas li {
  display: flex; align-items: center; gap: var(--e-2);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2);
  font-size: var(--t-2);
  background: var(--papel);
}
.lista-etiquetas li.sumiu { opacity: .55; text-decoration: line-through; }
.lista-etiquetas .id { font-size: var(--t-1); color: var(--tinta-3); }

.aviso.ruim { border-color: var(--alerta-borda); background: var(--alerta-bg); }

/* Número caído no topo do painel: texto e botão lado a lado, empilha no celular. */
.aviso.caido { display: flex; gap: var(--e-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
a.botao {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--e-3);
  font-size: var(--t-3); font-weight: 500; border-radius: var(--r-controle);
  background: var(--botao); color: var(--botao-tx); text-decoration: none; white-space: nowrap;
}
a.botao.botao-google { width: 100%; justify-content: center; gap: var(--e-3); height: 40px; margin-top: var(--e-3); background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); }
a.botao.botao-google .logo-google { flex: none; }
.entrada-form .abaixo .link-esqueci { color: var(--tinta-2); text-decoration: none; }
.entrada-form .abaixo .link-esqueci:hover { color: var(--tinta); text-decoration: underline; }
a.botao.botao-google:hover { background: var(--realce); filter: none; }
.reconectar-opcoes { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-4); }

/* ══════════════════════════════════════════════════════════════════════════
   CONVERSAS: duas colunas, formato de aplicativo de mensagem

   Lista a esquerda, leitura a direita, as duas rolando por conta propria e a
   pagina nunca. E' o formato que todo mundo ja sabe usar, e a familiaridade
   vale mais que originalidade numa tela que se abre dez vezes por dia.
   ══════════════════════════════════════════════════════════════════════════ */

/* A tela de conversas usa a largura toda: é a que mais se abre e a que mais
   perdia espaço para a margem de leitura das outras páginas. */
main:has(.conversas-app) { max-width: none; padding: var(--e-4) var(--e-4) var(--e-4); }
/* O quadro também: coluna de kanban escondida atrás da margem é card que ninguém vê. */
main:has(.quadro) { max-width: none; }
.conversas-app {
  display: grid;
  grid-template-columns: 372px minmax(0, 1fr);
  gap: var(--e-3);
  /* Altura da area util: a pagina em si nao rola, cada painel rola sozinho. */
  height: calc(100vh - 44px - var(--e-4) * 2);
  min-height: 420px;
}
/* minmax(0, 1fr), e não 1fr: com 1fr a coluna cresce até a prévia mais longa
   da lista (que não quebra linha) e a tela do celular rolava de lado. */
@media (max-width: 900px) { .conversas-app { grid-template-columns: minmax(0, 1fr); height: auto; } }

/* ── Painel da esquerda ────────────────────────────────────────────────── */

.painel-lista {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--linha);
  border-radius: var(--r-janela);
  background: var(--papel);
  box-shadow: var(--elev-1);
  /* Sem overflow: hidden aqui. Ele cortava o menu "Mais" dos filtros quando
     o botão caía na segunda linha (visto pelo Diego em 23/09/2026). Quem
     precisa recortar os cantos é só a lista rolável, embaixo. */
}
.topo-lista { display: flex; align-items: baseline; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-2); }
.topo-lista h1 { margin: 0; font-size: var(--t-5); }
.topo-lista .quantas { color: var(--tinta-3); font-size: var(--t-2); }

.busca { padding: 0 var(--e-3) var(--e-2); }
.busca input {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha);
  border-radius: var(--r-controle);
  background: var(--recuo);
  color: var(--tinta);
  font-size: var(--t-3);
}
.busca input:focus { outline: 2px solid var(--acento); outline-offset: -1px; background: var(--papel); }

.filtros-lista { display: flex; gap: var(--e-1); padding: 0 var(--e-3) var(--e-2); flex-wrap: wrap; }
.filtros-lista a {
  padding: var(--e-1) var(--e-2); border-radius: var(--r-controle); font-size: var(--t-2);
  color: var(--tinta-2); text-decoration: none; background: var(--realce);
}
.filtros-lista a:hover { background: var(--realce-forte); color: var(--tinta); }
.filtros-lista a.ativo { background: var(--acento); color: var(--acento-tx); }

.filtro-etiqueta { padding: 0 var(--e-3) var(--e-3); }
.filtro-etiqueta select {
  width: 100%; height: 32px; padding: 0 var(--e-2); font-size: var(--t-2);
  border: 1px solid var(--linha); border-radius: var(--r-controle);
  background: var(--papel); color: var(--tinta-2);
}

.painel-lista .itens { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid var(--linha); border-radius: 0 0 var(--r-janela) var(--r-janela); }
.painel-lista .vazia { color: var(--tinta-3); font-size: var(--t-2); padding: var(--e-4); margin: 0; }

.item-conversa {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3) var(--e-3);
  border-bottom: 1px solid var(--linha);
  text-decoration: none;
  color: inherit;
}
.item-conversa:hover { background: var(--realce); }
/* A conversa aberta precisa de mais que fundo: em tema escuro a diferenca de
   fundo sozinha quase nao se ve. Era uma barra azul de 3px so na esquerda, que
   e' o carimbo visual que a regua de design da agencia recusa; virou contorno
   inteiro de 1px, que marca igual sem parecer template. */
.item-conversa.aberta {
  background: var(--realce-forte);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent);
}

.avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: var(--t-1); font-weight: 600; letter-spacing: .02em;
}

.item-conversa .miolo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.item-conversa .linha1 { display: flex; justify-content: space-between; gap: var(--e-2); align-items: baseline; }
.item-conversa .nome { font-size: var(--t-3); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conversa .hora { font-size: var(--t-1); color: var(--tinta-3); white-space: nowrap; }
.item-conversa .previa {
  font-size: var(--t-2); color: var(--tinta-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-conversa .previa .eu { color: var(--tinta-3); }
.item-conversa .previa .tipo { color: var(--tinta-3); font-style: italic; }
.item-conversa .marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); margin-top: var(--e-1); }
.item-conversa .marcas:not(:has(*)) { display: none; }

/* ── Busca rápida (specs/027) ──────────────────────────────────────────── */
/* Os resultados tomam o lugar da lista enquanto há texto na caixa. */
.resultados-busca[hidden], .res-bloco[hidden], .resultados-busca .vazia[hidden] { display: none; }
.item-conversa:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; background: var(--realce); }
.res-bloco { border-bottom: 1px solid var(--linha); }
.res-bloco:last-of-type { border-bottom: 0; }
.res-titulo {
  margin: 0; padding: var(--e-3) var(--e-4) var(--e-1);
  font-size: var(--t-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3);
}
.res-lista .item-conversa:last-child { border-bottom: 0; }
.res-nota { margin: 0; padding: var(--e-2) var(--e-4); font-size: var(--t-2); color: var(--tinta-3); }
.res-nota:empty { display: none; }
.item-conversa .res-trecho { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 18px; }
.item-conversa .res-trecho mark {
  background: color-mix(in srgb, var(--acento) 26%, transparent);
  color: inherit; border-radius: 2px; padding: 0 1px; /* marca-texto no meio da frase: ajuste óptico */ font-weight: 600;
}
.res-estado { margin: 0; padding: var(--e-2) var(--e-4); font-size: var(--t-2); color: var(--tinta-3); }
.res-estado:empty { display: none; }
.res-estado.procurando::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: var(--e-2); border-radius: var(--r-pill);
  background: var(--acento); vertical-align: middle; animation: busca-pulsa 1s ease-in-out infinite;
}
@keyframes busca-pulsa { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.res-rodape { padding-bottom: var(--e-3); }
.res-rodape .res-nota { padding-bottom: var(--e-2); }
.res-mais {
  margin: 0 var(--e-4); padding: var(--e-1) var(--e-3); border-radius: var(--r-controle);
  border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-2);
  font: inherit; font-size: var(--t-2); cursor: pointer;
  transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
}
.res-mais:hover { background: var(--realce); color: var(--tinta); border-color: var(--tinta-3); }
.res-mais:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.res-erro { color: var(--alerta-tx); }

/* Mensagem aberta pela busca: o fundo e o contorno somem em 2,5 s. Com "reduzir
   movimento" a regra global tira a animação: o contorno fica parado e o script
   tira a classe no mesmo prazo. */
.linha-bolha.destacada .bolha {
  outline: 2px solid var(--acento); outline-offset: 2px;
  animation: bolha-destacada 2.5s var(--curva) var(--destaque-atraso, 0ms) both;
}
@keyframes bolha-destacada {
  0%, 55% { background: color-mix(in srgb, var(--acento) 24%, var(--papel)); outline-color: var(--acento); }
  100% { outline-color: transparent; }
}
.aviso-busca { margin: 0 auto var(--e-3); max-width: 420px; text-align: center; font-size: var(--t-2); color: var(--tinta-2); background: var(--realce); padding: var(--e-2) var(--e-3); border-radius: var(--r-controle); }

/* Mesma altura da .tag (18px), para as duas se alinharem na mesma linha. */
.chip {
  display: inline-flex; align-items: center; gap: var(--e-1);
  height: 18px; line-height: 18px; vertical-align: middle;
  padding: 0 var(--e-2);
  border-radius: var(--r-controle);
  background: var(--realce);
  font-size: var(--t-1);
  color: var(--tinta-2);
}
.chip .ponto { width: 7px; height: 7px; flex: 0 0 7px; }

/* ── Painel da direita ─────────────────────────────────────────────────── */

.painel-leitura {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--linha);
  border-radius: var(--r-janela);
  background: var(--papel);
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.nada-aberto {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  color: var(--tinta-3); gap: var(--e-1);
}
.nada-aberto .icone { width: 54px; height: 54px; color: var(--tinta-3); opacity: .5; margin-bottom: var(--e-2); }
.nada-aberto .icone svg { width: 100%; height: 100%; }
.nada-aberto .titulo { font-size: var(--t-4); color: var(--tinta-2); margin: 0; }

.topo-conversa {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--linha);
  background: var(--papel);
}
.topo-conversa .quem { flex: 1; min-width: 0; }
.topo-conversa .nome { font-size: var(--t-4); font-weight: 600; }
.topo-conversa .sub { font-size: var(--t-2); color: var(--tinta-3); display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }

/* O <details> como menu: abre sem JavaScript. O Esc e o clique fora, que o
   <details> nativo não faz (conferido no Chromium em 23/09/2026: continua
   aberto depois do Esc e do clique fora), ficam com o
   public/menus.js; sem ele o menu fecha clicando no ⋮ de novo. */
.menu-conversa { position: relative; }
.menu-conversa > summary {
  list-style: none; cursor: pointer;
  width: 36px; height: 36px; line-height: 34px; text-align: center; font-size: var(--t-4);
  border-radius: var(--r-controle); color: var(--tinta-2); border: 1px solid var(--linha);
  user-select: none;
}
.menu-conversa > summary::-webkit-details-marker { display: none; }
.menu-conversa > summary:hover, .menu-conversa[open] > summary { background: var(--recuo); color: var(--tinta); }
/* Um painel só, com as duas partes empilhadas dentro. Até 23/09/2026 cada
   parte era um painel absoluto no mesmo lugar, e o de follow-up cobria as
   primeiras etiquetas. */
.menu-painel {
  position: absolute; right: 0; top: 42px; z-index: 20;
  width: 264px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--r-janela);
  box-shadow: var(--elev-3);
  animation: surgir var(--dur-2) var(--curva);
  transform-origin: top right;
}
@keyframes surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.painel-marcar { padding: var(--e-3); }
.painel-marcar .titulo-painel {
  margin: 0 0 var(--e-1); font-size: var(--t-1); font-weight: 600; color: var(--tinta-2);
}
.painel-marcar .titulo-painel + * { margin-top: 0; }
.painel-marcar .opcao {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-1) var(--e-2); border-radius: var(--r-controle); font-size: var(--t-3); cursor: pointer;
  line-height: 18px;
}
/* Sem tamanho explicito o radio herda a fonte do painel e fica enorme em
   alguns navegadores, empurrando o nome da etiqueta para uma segunda linha. */
.painel-marcar .opcao input[type="radio"] { flex: 0 0 14px; width: 14px; height: 14px; margin: 0; }
.painel-marcar .opcao .ponto { flex: 0 0 8px; width: 8px; height: 8px; }
.painel-marcar .opcao:hover { background: var(--realce); }
.painel-marcar select { width: 100%; padding: var(--e-2) var(--e-2); margin-bottom: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel); color: var(--tinta); font-size: var(--t-3); }
.painel-marcar .titulo-painel:nth-of-type(2) { margin-top: var(--e-3); }
.painel-marcar button { height: 32px; }
.acoes-painel { display: flex; justify-content: flex-end; }

/* ── Bolhas ────────────────────────────────────────────────────────────── */

.bolhas {
  flex: 1; overflow-y: auto;
  padding: var(--e-4) var(--e-4);
  display: flex; flex-direction: column; gap: var(--e-1);
  background: var(--chat-canvas);
}
/* "Ver mensagens anteriores" (29/09/2026): a conversa abre nas últimas 300. */
.ver-anteriores { text-align: center; margin: var(--e-2) 0 var(--e-3); }
.ver-anteriores a {
  display: inline-block; font-size: var(--t-1); color: var(--acento);
  background: var(--papel); border: 1px solid var(--linha);
  padding: var(--e-1) var(--e-3); border-radius: var(--r-controle); text-decoration: none;
  transition: border-color var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.ver-anteriores a:hover { border-color: currentColor; transform: translateY(-1px); }
.ver-anteriores a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.ver-anteriores a.carregando { opacity: .6; pointer-events: none; }

.separador-dia { text-align: center; margin: var(--e-3) 0 var(--e-2); }
.separador-dia span {
  background: var(--papel); border: 1px solid var(--linha);
  color: var(--tinta-3); font-size: var(--t-1);
  padding: var(--fc-1) var(--e-3); border-radius: var(--r-controle);
}

.linha-bolha { display: flex; }
.linha-bolha.minha { justify-content: flex-end; }
.linha-bolha.deles { justify-content: flex-start; }

.bolha {
  max-width: min(74%, 620px);
  margin-bottom: var(--e-1);
  padding: var(--e-2) var(--e-3) var(--e-2);
  border-radius: var(--r-janela);
  font-size: var(--t-3); line-height: 20px;
  display: flex; flex-direction: column; gap: var(--e-1);
  box-shadow: var(--elev-1);
}
.linha-bolha.deles .bolha { background: var(--bolha-deles); border-top-left-radius: var(--r-controle); }
.linha-bolha.minha .bolha { background: var(--bolha-minha); border-top-right-radius: var(--r-controle); }
/* `pre-wrap` preserva a quebra de linha que a pessoa digitou. O texto tem que
   entrar colado na tag, senao a indentacao do template vira linha em branco. */
.bolha .texto { white-space: pre-wrap; word-break: break-word; }
.bolha .anexo { color: var(--tinta-2); font-style: italic; font-size: var(--t-2); }
/* Ligação (specs/017): frase, não anexo. Perdida do lead é pendência, por isso a cor. */
.bolha .anexo.chamada { font-style: normal; color: var(--tinta); }
.bolha .anexo.chamada.perdida { color: var(--alerta-tx); }

/* Arquivo guardado (specs/011-guardar-midia). A imagem tem teto de altura
   para uma foto vertical de celular não ocupar a tela inteira; o tamanho real
   abre em outra aba. Figurinha é menor e sem moldura, como no WhatsApp.
   O fundo preto do vídeo é o de todo player: some quando o vídeo carrega. */
.bolha .midia-imagem { display: block; line-height: 0; text-decoration: none; align-self: flex-start; }
.bolha .midia-imagem img {
  max-width: 100%; width: 280px; max-height: 320px; object-fit: cover;
  border-radius: var(--r-controle); border: 1px solid var(--linha); background: var(--realce);
}
.bolha .midia-imagem.figurinha img { width: 140px; max-height: 140px; object-fit: contain; border: 0; background: none; }
.bolha .midia-som { width: 280px; max-width: 100%; height: 40px; }
.bolha .midia-video { width: 320px; max-width: 100%; max-height: 360px; border-radius: var(--r-controle); background: #000; }
.bolha .midia-doc {
  display: flex; flex-direction: column; gap: var(--fc-1);
  padding: var(--e-2) var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-controle);
  background: var(--realce); color: inherit; text-decoration: none; min-width: 200px;
}
.bolha .midia-doc:hover { border-color: var(--tinta-3); }
.bolha .midia-doc .nome { font-weight: 500; word-break: break-all; }
.bolha .midia-doc .tam { font-size: var(--t-1); color: var(--tinta-2); }
.bolha .rodape-bolha { font-size: var(--t-1); color: var(--tinta-3); align-self: flex-end; }

.bolha .transcricao {
  margin-top: 0; padding: var(--e-2);
  background: var(--realce); border-radius: var(--r-controle);
  font-size: var(--t-2); line-height: 18px; color: var(--tinta-2);
  white-space: pre-wrap;
}
.bolha .transcricao .rot {
  display: block; font-size: var(--t-1); text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-3); margin-bottom: var(--e-1);
}

/* Selo de origem. Existe para separar o que foi gente do que foi robo: sem
   isso a conversa parece atendida quando so o automatico respondeu. */
.bolha .selo {
  align-self: flex-start;
  font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: var(--fc-1) var(--e-2); border-radius: var(--r-controle); margin-bottom: 0;
}
.bolha .selo.automacao { background: var(--tag-quente-bg); color: var(--tag-quente-tx); }
.bolha .selo.crm { background: var(--tag-fria-bg); color: var(--tag-fria-tx); }
.bolha .selo.fixada { background: var(--tag-neutra-bg); color: var(--tag-neutra-tx); }

/* Faixa das mensagens fixadas no WhatsApp (specs/013), entre o cabeçalho e
   as bolhas. Vazia, não ocupa espaço. Clicar rola até a bolha, que ganha um
   contorno azul (:target) para a pessoa achar onde parou. */
.fixadas:not(:has(.fixada-item)) { display: none; } /* :empty não serve: o molde deixa espaços dentro */
.fixadas { border-bottom: 1px solid var(--linha); background: var(--papel); }
.fixada-item {
  display: flex; gap: var(--e-2); align-items: baseline; padding: var(--e-2) var(--e-4);
  color: inherit; text-decoration: none; font-size: var(--t-2); line-height: 18px;
}
.fixada-item + .fixada-item { border-top: 1px solid var(--linha); }
.fixada-item:hover { background: var(--realce); }
.fixada-item .rot { font-size: var(--t-1); color: var(--tinta-3); flex: none; }
.fixada-item .trecho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-bolha:target .bolha { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── Caixa de envio ────────────────────────────────────────────────────── */

.compositor {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-2) var(--e-4) var(--e-3);
  border-top: 1px solid var(--linha);
  background: var(--papel);
}
.linha-compositor { display: flex; gap: var(--e-2); align-items: flex-end; }
.abas-compositor { display: flex; gap: var(--e-1); }
.abas-compositor .aba {
  height: 26px; padding: 0 var(--e-3); font-size: var(--t-2); font-weight: 500;
  background: transparent; color: var(--tinta-3); border-radius: var(--r-controle);
}
.abas-compositor .aba:hover { background: var(--realce); filter: none; }
.abas-compositor .aba.ativa { background: var(--realce-forte); color: var(--tinta); }
/* Nota interna em amarelo: impossível confundir com resposta ao lead. */
.compositor.modo-nota textarea { background: var(--atencao-bg); border-color: color-mix(in srgb, var(--atencao) 40%, transparent); }
.compositor.modo-nota .linha-compositor button { background: var(--atencao); color: var(--papel); } /* âmbar com o papel por cima: 6,2:1 no claro, 11:1 no escuro */
.bolha.nota { background: var(--atencao-bg) !important; border: 1px dashed color-mix(in srgb, var(--atencao) 45%, transparent); }
.bolha .selo.nota { background: transparent; color: var(--atencao); padding-left: 0; }
.form-resolver { margin: 0; }
.form-resolver button { white-space: nowrap; }
/* No celular o botão vira só o ✓ e a linha de baixo corre como texto, em vez
   de cada pedaço ("veio de", o criativo) virar uma linha. */
@media (max-width: 600px) {
  .rotulo-resolver { display: none; }
  .form-resolver button { padding: 0 var(--e-3); }
  .topo-conversa .sub { display: block; }
}
.compositor textarea {
  flex: 1; resize: none;
  min-height: 38px; max-height: 140px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-controle);
  background: var(--recuo); color: var(--tinta);
  font: inherit; font-size: var(--t-3); line-height: 20px;
}
.compositor textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; background: var(--papel); }
.compositor.desativado {
  color: var(--tinta-3); font-size: var(--t-2);
  justify-content: center; padding: var(--e-4);
}
.nota-compositor {
  margin: 0; padding: 0 var(--e-4) var(--e-3);
  font-size: var(--t-1); line-height: 16px; color: var(--tinta-3);
  background: var(--papel);
}

/* O aviso dentro do painel de leitura nao empurra a conversa para fora. */
.painel-leitura .aviso { margin: var(--e-3) var(--e-4) 0; }

/* ── Integracoes ───────────────────────────────────────────────────────── */

h3 { font-size: var(--t-3); font-weight: 600; margin: var(--e-6) 0 var(--e-2); }
.indice-pagina { display: flex; gap: var(--e-1); flex-wrap: wrap; margin: var(--e-1) 0 var(--e-2); }
.indice-pagina a {
  font-size: var(--t-2); padding: var(--e-1) var(--e-2); border-radius: var(--r-controle);
  background: var(--realce); color: var(--tinta-2); text-decoration: none;
}
.indice-pagina a:hover { background: var(--realce-forte); color: var(--tinta); }
.form-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--e-1) var(--e-4); align-items: end;
}
.form-grade label { margin-top: var(--e-2); }
/* label.marcar tem display:flex e vencia o atributo hidden (Venda ganha esconde campos). */
.form-grade [hidden] { display: none !important; }
/* Caixa de marcar e botões numa linha própria, alinhados à esquerda. Como
   itens soltos da grade, o botão caía embaixo da segunda coluna e a caixa
   embaixo da primeira, desalinhados um do outro. */
/* grid-column-start e não 1 / -1: um item que atravessa a grade toda impede o
   auto-fit de recolher a coluna vazia, e os campos ficavam com um buraco à direita. */
.form-grade > label.marcar, .form-grade > .acoes { grid-column-start: 1; white-space: nowrap; }
.form-grade > .acoes { padding-top: var(--e-2); display: flex; gap: var(--e-2); }
label.marcar {
  display: flex; gap: var(--e-2); align-items: center;
  font-size: var(--t-3); color: var(--tinta); margin: var(--e-2) 0 0;
}
label.marcar code { font-size: var(--t-1); color: var(--tinta-3); }
.titulo-campo { font-size: var(--t-1); color: var(--tinta-2); margin: var(--e-4) 0 0; }
.legenda.pequena { font-size: var(--t-2); line-height: 19px; margin-top: var(--e-2); max-width: 760px; }
.legenda.atencao { color: var(--atencao); }
.linha-botoes { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-3); }
.linha-botoes form { margin: 0; }
/* Barra de queda do tempo real (public/vivo.js). Fica no TOPO: no rodape ela
   cobria a caixa de escrever da tela de conversas (visto no navegador em
   21/09/2026). Nao empurra o conteudo e some sozinha quando a conexao volta. */
.aviso-queda {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: var(--e-3);
  max-width: calc(100vw - 32px);
  padding: var(--e-2) var(--e-3) var(--e-2) var(--e-4); border-radius: var(--r-janela);
  background: var(--tinta); color: var(--papel);
  font-size: var(--t-2); line-height: 20px;
  box-shadow: var(--elev-3);
}
.aviso-queda button {
  height: 26px; padding: 0 var(--e-3); font-size: var(--t-2); flex: none;
  background: var(--papel); color: var(--tinta); border: 0; border-radius: var(--r-controle);
}

/* Aviso que carrega uma acao junto (ex: "Movido para X" + Desfazer). */
.aviso.com-acao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.aviso.com-acao form { margin: 0; flex: none; }

.aviso.uma-vez { border: 1px solid color-mix(in srgb, var(--atencao) 45%, transparent); }
.aviso.uma-vez p { margin: var(--e-1) 0 var(--e-2); font-size: var(--t-3); }
code.segredo {
  display: block; padding: var(--e-2) var(--e-3); border-radius: var(--r-controle);
  background: var(--papel); border: 1px solid var(--linha);
  font: var(--t-2) ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; user-select: all;
}
details.explica { margin-top: var(--e-3); max-width: 760px; font-size: var(--t-3); line-height: 21px; }
details.explica summary { cursor: pointer; color: var(--tinta-2); font-size: var(--t-2); }
details.explica p { margin: var(--e-2) 0; }
pre.codigo {
  margin: var(--e-2) 0; padding: var(--e-3) var(--e-3); border-radius: var(--r-controle);
  background: var(--recuo); border: 1px solid var(--linha);
  font: var(--t-1)/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre;
}
.tag.recusado { background: var(--alerta-bg); color: var(--alerta); }
td code.quebra { white-space: normal; overflow-wrap: anywhere; }
td.resposta { font-size: var(--t-1); color: var(--tinta-3); max-width: 320px; overflow-wrap: anywhere; }
.filtro-etiqueta { display: flex; gap: var(--e-2); }
.filtro-etiqueta select { flex: 1; min-width: 0; }

/* ── Grupo e follow-up na conversa ─────────────────────────────────────── */

.bolha .autor-bolha { font-size: var(--t-1); font-weight: 600; line-height: 16px; }
.painel-followup { border-top: 1px solid var(--linha); }
.linha-followup { display: flex; gap: var(--e-2); align-items: center; margin-bottom: var(--e-2); }
.linha-followup select { flex: 1; margin: 0 !important; }

/* Ficha do lead no menu da conversa (specs/018). Com a ficha, o painel pode
   passar da altura da tela: rola por dentro. */
.menu-conversa .menu-painel { max-height: calc(100vh - 170px); overflow-y: auto; }
.painel-ficha { border-top: 1px solid var(--linha); }
/* Rótulo em cima do valor: a pergunta do formulário pode ser longa e, lado a
   lado, espremia o e-mail em duas linhas. */
.painel-ficha .ficha { margin: 0 0 var(--e-3); font-size: var(--t-2); }
.painel-ficha .ficha dt { color: var(--tinta-2); font-size: var(--t-1); margin-top: var(--e-2); }
.painel-ficha .ficha dt:first-child { margin-top: 0; }
.painel-ficha .ficha dd { margin: 0; overflow-wrap: anywhere; }
.form-ficha label { display: block; font-size: var(--t-1); color: var(--tinta-2); margin: 0 0 var(--e-2); }
.form-ficha input { width: 100%; margin-bottom: var(--e-2); }

/* ── Relatório semanal e horário ───────────────────────────────────────── */

.tabela-horario { max-width: 520px; }
.tabela-horario input[type="time"] { width: 120px; height: 30px; font-size: var(--t-3); }
.grade-feriados { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--e-1) var(--e-6); max-width: 760px; }
.relatorio-semanal h2 { margin-top: var(--e-6); }
.relatorio-semanal .cartao .rotulo + .rotulo { margin-top: var(--e-1); }
.estagios { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.pontos { padding-left: var(--e-6); max-width: 820px; }
.pontos li { margin-bottom: var(--e-4); font-size: var(--t-3); line-height: 21px; }
.pontos blockquote { margin: var(--e-1) 0 0; padding: var(--e-1) var(--e-3); border-left: 3px solid var(--linha); color: var(--tinta-2); }
.como-medido { font-size: var(--t-3); line-height: 21px; color: var(--tinta-2); padding-left: var(--e-4); max-width: 820px; }
@media print {
  .lateral, .topo, .nao-imprimir { display: none !important; }
  main { padding: 0 !important; }
  a { text-decoration: none; }
}

/* Política de privacidade: página pública de leitura */
.politica { max-width: 720px; margin: 0 auto; padding: var(--e-12) var(--e-6); line-height: 1.6; }
.politica h1 { font-size: var(--t-6); margin: var(--e-6) 0 var(--e-1); }
.politica h2 { font-size: var(--t-4); margin: var(--e-6) 0 var(--e-3); }
.politica ul { padding-left: var(--e-6); }
.entrada-form .abaixo a { color: var(--tinta-2); }

/* ── "Mais" dos filtros da lista de conversas ──────────────────────────── */

.menu-filtro { position: relative; }
.menu-filtro > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: var(--e-1) var(--e-2); border-radius: var(--r-controle); font-size: var(--t-2);
  color: var(--tinta-2); background: var(--realce);
}
.menu-filtro > summary::-webkit-details-marker { display: none; }
.menu-filtro > summary:hover { background: var(--realce-forte); color: var(--tinta); }
.menu-filtro > summary.ativo { background: var(--acento); color: var(--acento-tx); }
.menu-filtro > summary span { font-size: 10px; }
/* Abre para baixo e para a direita do botão, como todo menu: alinhado pela
   direita ele saía para fora da lista quando o botão estava no começo da linha. */
.menu-filtro .menu-painel { left: 0; right: auto; top: 30px; width: 180px; padding: var(--e-2); transform-origin: top left; z-index: 30; }
.menu-filtro .menu-painel a {
  display: block; padding: var(--e-2) var(--e-3); border-radius: var(--r-controle);
  font-size: var(--t-3); color: var(--tinta); text-decoration: none; background: none;
}
.menu-filtro .menu-painel a:hover { background: var(--realce); }
.menu-filtro .menu-painel a.ativo { font-weight: 600; background: var(--realce); color: var(--tinta); }

/* ── Cabeçalho da conversa em duas linhas ──────────────────────────────── */

.topo-conversa { align-items: center; }
/* Nome e telefone como texto corrido: em flex, com a tela estreita, o nome
   quebrava palavra por palavra e o telefone ia parar longe dele. */
.topo-conversa .nome { min-width: 0; }
.topo-conversa .nome .tel { font: 400 var(--t-1) ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--tinta-3); margin-left: var(--e-2); white-space: nowrap; }
.topo-conversa .nome .tag { margin-left: var(--e-2); }
/* Entre 900 e 1280px a lista cede espaço para a conversa. */
@media (max-width: 1280px) and (min-width: 901px) { .conversas-app { grid-template-columns: 320px minmax(0, 1fr); } }
.topo-conversa .sub { color: var(--tinta-2); gap: var(--e-2); }
.topo-conversa .sub .origem { min-width: 0; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-conversa .sub strong { font-weight: 500; color: var(--tinta); }

/* ── Abas de Configurações ─────────────────────────────────────────────── */

.abas-config {
  display: flex; gap: var(--e-6); flex-wrap: wrap;
  margin: 0 0 var(--e-6); padding: 0 0 var(--e-2);
  border-bottom: 1px solid var(--linha);
}
.abas-config a {
  padding: var(--e-1) 0;
  font-size: var(--t-3); color: var(--tinta-2); text-decoration: none;
  position: relative;
}
.abas-config a:hover { color: var(--tinta); }
.abas-config a:not(.ativa):hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--e-2) - 1px);
  height: 2px; border-radius: 2px; background: var(--linha);
}
/* A aba atual ganha um traço embaixo, alinhado à linha da faixa. */
.abas-config a.ativa { color: var(--tinta); font-weight: 600; }
.abas-config a.ativa::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--e-2) - 1px);
  height: 2px; border-radius: 2px; background: var(--acento);
}
@media (max-width: 600px) { .tabela-horario input[type="time"] { width: 96px; } }

/* Botão dentro de linha de tabela: mais baixo, para a linha não crescer. */
td button, td a.botao { height: 30px; padding: 0 var(--e-3); }
td form { display: inline-block; margin: 0; }
/* No celular, tabela larga rola dentro dela em vez de empurrar a página para
   o lado (a de "Números conectados" do painel deixava a tela com 471px). */
@media (max-width: 900px) {
  main table { display: block; overflow-x: auto; }
  main th, main td { white-space: nowrap; }
}

/* ── Período e comparação no painel (specs/014) ────────────────────────── */

.barra-periodo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin: 0;
}
.periodo { flex-wrap: wrap; align-items: center; }
.menu-datas { position: relative; }
.menu-datas > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: var(--fc-2) var(--e-3); border-radius: var(--r-controle); font-size: var(--t-3); color: var(--tinta-2);
}
.menu-datas > summary::-webkit-details-marker { display: none; }
.menu-datas > summary:hover { background: var(--realce); color: var(--tinta); }
.menu-datas.ativo > summary { background: var(--papel); color: var(--tinta); font-weight: 500; box-shadow: var(--elev-1); }
.menu-datas > summary span[aria-hidden] { font-size: 10px; }
.menu-datas .menu-painel { left: 0; right: auto; top: 38px; width: 240px; padding: var(--e-3); transform-origin: top left; z-index: 30; }
.menu-datas .menu-painel label:first-of-type { margin-top: 0; }
.menu-datas .menu-painel > button { width: 100%; margin-top: var(--e-3); }
/* Botão de menu com cara de campo: o "outras datas" da comparação e a nova
   folga. O "Datas" do período fica com a cara das abas ao lado dele. */
.menu-datas.campo-data > summary {
  display: inline-flex; align-items: center; gap: var(--e-2); height: 32px; padding: 0 var(--e-3);
  background: var(--papel); color: var(--tinta); border: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
  border-radius: var(--r-controle); white-space: nowrap;
}
.menu-datas.campo-data > summary:hover { background: var(--papel); border-color: color-mix(in srgb, var(--tinta) 28%, transparent); }
.menu-datas.campo-data[open] > summary { border-color: var(--acento); }
.menu-datas.campo-data.ativo > summary { box-shadow: none; }
.menu-datas.campo-data .menu-painel { top: 38px; }

/* ── Calendário de clicar (public/calendario.js) ────────────────────────
   O jeito de funcionar é o do dash da AUVP; a cara é a deste app. Sem
   JavaScript, os campos de data do navegador continuam no lugar. */

.com-calendario .so-sem-js { display: none; }
.menu-datas .menu-painel.com-calendario { width: auto; padding: var(--e-3); }
.menu-datas .menu-painel.para-cima { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
/* Os campos seguem no HTML, fora da vista: são eles que o formulário envia. */
.calendario.com-js > label,
.calendario.com-js > input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.cal-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }
.cal-dica { font-size: var(--t-2); font-weight: 500; color: var(--tinta-2); }
.cal button {
  height: auto; padding: 0; background: transparent; color: var(--tinta);
  box-shadow: none; border-radius: var(--r-controle); font-weight: 400;
}
.cal button:hover { background-image: none; }
.cal button:active { transform: none; }
.cal .cal-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none; color: var(--tinta-2);
  transition: background var(--dur-1) var(--curva);
}
.cal .cal-nav:hover { background: var(--realce); color: var(--tinta); }
.cal-meses { display: flex; gap: var(--e-6); }
.cal-mes { width: 252px; }
.cal-nome { margin-bottom: var(--e-2); font-size: var(--t-3); font-weight: 600; text-align: center; color: var(--tinta); }
.cal-nome::first-letter { text-transform: uppercase; }
.cal-semana, .cal-grade { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-semana span { padding: var(--e-1) 0; font-size: var(--t-1); font-weight: 500; text-align: center; color: var(--tinta-3); }
.cal-grade { row-gap: var(--e-1); }
.cal .cal-dia {
  position: relative; height: 34px; font-size: var(--t-2); font-variant-numeric: tabular-nums;
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.cal .cal-dia:hover:not(:disabled) { background: var(--realce-forte); }
.cal .cal-dia:disabled { color: var(--tinta-3); opacity: .45; cursor: default; }
.cal .cal-dia[aria-current="date"] { font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tinta) 30%, transparent); }
/* Faixa contínua entre as pontas: cantos retos no meio, arredondados nas
   pontas. A especificidade passa a do :hover, senão o mouse apagava a faixa. */
.cal .cal-dia.no-intervalo { background: var(--realce-forte); border-radius: 0; }
.cal .cal-dia.no-intervalo:hover:not(:disabled) { background: color-mix(in srgb, var(--tinta) 16%, transparent); }
.cal .cal-dia.ponta-inicio,
.cal .cal-dia.ponta-fim,
.cal .cal-dia.ponta-inicio:hover,
.cal .cal-dia.ponta-fim:hover { background: var(--acento); color: var(--acento-tx); font-weight: 600; }
.cal .cal-dia.ponta-inicio:not(.ponta-fim) { border-radius: var(--r-controle) 0 0 var(--r-controle); }
.cal .cal-dia.ponta-fim:not(.ponta-inicio) { border-radius: 0 var(--r-controle) var(--r-controle) 0; }
/* Folga já salva: um ponto embaixo do número. */
.cal .cal-dia.marcada::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; transform: translateX(-50%);
  border-radius: var(--r-pill); background: currentColor; opacity: .6;
}
@media (max-width: 600px) {
  .cal-meses { display: block; }
  .cal-mes { width: 100%; }
  .cal .cal-dia { height: 40px; font-size: var(--t-3); }
}

/* ── Outras folgas: calendário no lugar do texto livre ─────────────────── */

.lista-folgas { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-2) 0 var(--e-3); }
label.folga {
  display: inline-flex; align-items: center; gap: var(--e-2); margin: 0;
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-2); border: 1px solid var(--linha);
  border-radius: var(--r-controle); background: var(--papel); font-size: var(--t-3); color: var(--tinta); cursor: pointer;
}
label.folga:has(input:not(:checked)) { opacity: .5; text-decoration: line-through; }
.nova-folga { display: flex; align-items: flex-start; gap: var(--e-2); flex-wrap: wrap; margin-top: var(--e-1); }
.nova-folga > button { height: 32px; }
.nova-folga .menu-painel label { margin-top: 0; }
.nova-folga .menu-painel:not(.com-calendario) { width: 220px; padding: var(--e-3); }

/* ── Relatório: quem manda (specs/015) ─────────────────────────────────── */

.form-relatorio { display: flex; flex-direction: column; gap: var(--e-3); }
.form-relatorio .acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
fieldset.remetente { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
fieldset.remetente legend { font-size: var(--t-1); color: var(--tinta-2); padding: 0; margin-bottom: var(--e-2); }
label.opcao-remetente {
  display: flex; align-items: flex-start; gap: var(--e-3); margin: 0; cursor: pointer;
  padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-controle);
  font-size: var(--t-3); color: var(--tinta); line-height: 20px;
}
label.opcao-remetente:has(input:checked) { border-color: var(--acento); background: var(--recuo); }
label.opcao-remetente:has(input:disabled) { opacity: .6; cursor: not-allowed; }
label.opcao-remetente input { width: 16px; height: 16px; margin: var(--fc-1) 0 0; flex: none; accent-color: var(--acento); }
label.opcao-remetente .apagado { display: block; font-size: var(--t-2); }
.campo-numeros label { margin-top: 0; }
/* Com o próprio número escolhido, a lista de números não vale: fica apagada. */
.form-relatorio:has(input[value="proprio"]:checked) .campo-numeros { opacity: .45; }

/* No celular, menu suspenso vira uma folha presa embaixo da tela: preso ao
   botão, ele saía pela borda direita conforme o botão caía na linha (medido
   em 23/09/2026 nos três menus, a 390px). */
@media (max-width: 600px) {
  details.menu > .menu-painel {
    position: fixed; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); top: auto;
    width: auto; max-height: 70vh; overflow-y: auto; z-index: 60;
    transform-origin: bottom center;
  }
}

/* ── Módulo de vendas (specs/019) ──────────────────────────────────────────
   Só classes novas: nada daqui muda tela de quem tem o módulo desligado.
   Sem cor nova: ganho usa o --ok, atraso usa o --alerta de sempre. */

.faixa-vendas {
  border-bottom: 1px solid var(--linha); background: var(--papel);
  display: flex; flex-direction: column;
}
.oport {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-2) var(--e-4); flex-wrap: wrap;
}
.oport + .oport { border-top: 1px solid var(--linha); }
.oport.fechada { font-size: var(--t-2); }
.oport.nova { justify-content: flex-start; font-size: var(--t-2); margin: 0; }
.oport-resumo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; min-width: 0; font-size: var(--t-2); line-height: 18px; }
.oport-funil { font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
.oport-etapa { font-weight: 600; color: var(--tinta); }
.oport-valor { font-variant-numeric: tabular-nums; font-weight: 500; }
.oport-detalhe { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oport-acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
/* Situação do envio da Compra à Meta (specs/024), numa linha própria e só para a agência. */
.oport-meta { flex: 0 0 100%; font-size: var(--t-1); line-height: 16px; }
.oport-meta.atencao { color: var(--atencao); }
.oport-acoes .botao-discreto, .menu-vendas > summary {
  display: inline-flex; align-items: center; height: 28px; padding: 0 var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel);
  color: var(--tinta); font-size: var(--t-2); font-weight: 500; text-decoration: none; cursor: pointer;
  list-style: none; user-select: none; white-space: nowrap;
}
.menu-vendas > summary::-webkit-details-marker { display: none; }
.oport-acoes .botao-discreto:hover, .menu-vendas > summary:hover, .menu-vendas[open] > summary { background: var(--recuo); }
.oport.nova .menu-vendas > summary { border-style: dashed; color: var(--tinta-2); }
.menu-vendas { position: relative; }
.painel-vendas {
  top: 34px; width: 320px; padding: var(--e-3);
  max-height: calc(100vh - 220px); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--e-2);
}
.painel-vendas.painel-esquerda { left: 0; right: auto; transform-origin: top left; }
.painel-vendas label { margin: var(--e-1) 0 0; }
.painel-vendas input, .painel-vendas select { width: 100%; margin: 0; }
.painel-vendas .titulo-painel { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.painel-vendas .opcao { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-3); color: var(--tinta); cursor: pointer; }
.painel-vendas .opcao input { width: 14px; height: 14px; flex: 0 0 14px; }
.painel-vendas .acoes-painel { display: flex; justify-content: flex-end; margin-top: var(--e-1); }
.linha-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); align-items: end; }
.painel-vendas .linha-dupla label { display: grid; gap: 2px; margin: 0; }
/* Próximo passo à vista na conversa (specs/051): uma linha que quebra no estreito. */
.proximo-passo { width: 100%; margin: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.proximo-aviso { margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--acento); }
.proximo-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2); }
.proximo-campos label { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0;
  font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.proximo-campos .campo-passo { flex: 1 1 140px; }
.proximo-campos .campo-prazo { flex: 0 1 150px; }
.proximo-campos .campo-obs { flex: 3 1 220px; }
.proximo-campos input, .proximo-campos select { height: 32px; font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.proximo-campos button { height: 32px; flex: 0 0 auto; }
.proximo-passo.feita .proximo-campos select { border-color: var(--acento); animation: realce-passo .6s ease-out; }
@keyframes realce-passo { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 30%, transparent); } to { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .proximo-passo.feita .proximo-campos select { animation: none; } }
@media (max-width: 720px) {
  .painel-vendas { position: fixed; left: var(--e-4); right: var(--e-4); top: auto; bottom: var(--e-4); width: auto; max-height: 70vh; }
}

/* Agenda */
.filtros-agenda { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-4); }
.filtros-agenda select { width: auto; }
.rotulo-inline { margin: 0; font-size: var(--t-2); }
.titulo-agenda { display: flex; align-items: center; gap: var(--e-2); }
.titulo-agenda .conta {
  font-size: var(--t-1); font-weight: 600; min-width: 20px; height: 20px; padding: 0 var(--fc-2); border-radius: var(--r-pill);
  background: var(--realce-forte); color: var(--tinta-2); display: inline-flex; align-items: center; justify-content: center;
}
.titulo-agenda .conta.urgente { background: var(--alerta); color: var(--acento-tx); }
.tabela-agenda td.num, .tabela-agenda th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-agenda td.dia { white-space: nowrap; }

/* Painel de vendas */
/* Tela Vendas (specs/028): dinheiro da vertical, caixas do funil, perdas. */
.bloco-vendas { margin-top: var(--e-6); }
/* Uma caixa por etapa, que quebra linha: um funil de 35 etapas vira várias
   linhas, nunca rolagem lateral. É uma sequência de verdade, por isso o número. */
.grade-funil {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--e-2);
  margin: 0; padding: 0; list-style: none;
}
.caixa-etapa {
  display: flex; flex-direction: column; gap: var(--e-1); min-width: 0;
  padding: var(--e-3); background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r-controle); box-shadow: var(--elev-1);
}
/* Duas linhas reservadas para o nome: os números ficam na mesma altura na linha. */
.cabeca-caixa { display: flex; align-items: flex-start; gap: var(--e-2); min-height: 36px; }
.caixa-etapa .ordem {
  flex: none; min-width: 20px; height: 20px; padding: 0 var(--fc-2); border-radius: var(--r-pill);
  background: var(--realce); color: var(--tinta-2); font-size: var(--t-1); font-weight: 600;
  line-height: 20px; text-align: center; font-variant-numeric: tabular-nums;
}
.caixa-etapa .nome {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0;
  overflow-wrap: anywhere; font-size: var(--t-2); line-height: 18px; font-weight: 500; color: var(--tinta-2);
}
.caixa-etapa .n { font-size: var(--t-6); line-height: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* A barra é dado, não ação: cor neutra, proporcional à primeira caixa. */
.caixa-etapa .barra { display: block; height: 4px; border-radius: var(--r-pill); background: var(--realce); overflow: hidden; }
.caixa-etapa .barra > span { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--tinta) 38%, transparent); }
.caixa-etapa .t { font-size: var(--t-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.caixa-etapa .t .apagado { font-weight: 400; }
.caixa-etapa .delta { font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.caixa-etapa .delta span { font-weight: 400; color: var(--tinta-3); }
.caixa-etapa .delta.bom { color: var(--ok-tx); }
.caixa-etapa .delta.ruim { color: var(--alerta-tx); }
/* A venda: destaque discreto, na cor que no app já quer dizer "deu certo". */
.caixa-etapa.ganho { border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); background: color-mix(in srgb, var(--ok) 6%, var(--papel)); }
.caixa-etapa.ganho .nome { color: var(--tinta); }
.caixa-etapa.ganho .barra > span { background: var(--ok); }
.legenda-funil { margin-bottom: 0; }
.perdas-funil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); max-width: 880px; }
.perdas-funil h3 { margin: 0 0 var(--e-2); font-size: var(--t-2); font-weight: 600; color: var(--tinta-2); }
.motivos-perda { list-style: none; margin: 0; padding: 0; }
.motivos-perda li { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-1) 0; border-bottom: 1px solid var(--linha); font-size: var(--t-3); }
.motivos-perda strong { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .perdas-funil { grid-template-columns: 1fr; gap: var(--e-4); } }

/* Configurar */
.lista-config { display: flex; flex-direction: column; gap: var(--e-2); max-width: 760px; }
.linha-config { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin: 0; }
.linha-config input { width: auto; flex: 1 1 200px; margin: 0; }
.linha-config select { width: auto; margin: 0; }
/* Ganho e perda (specs/029): marcação fixa no lugar do seletor, com a mesma
   largura dele, para o nome e o Salvar ficarem na mesma coluna das outras. */
.tabela-etapas .linha-config select, .tabela-etapas .marco-fixo { flex: 0 0 164px; }
.marco-fixo { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--e-3); }
.linha-config.arquivada, tr.arquivada td { opacity: .6; }
.funil-config { border: 1px solid var(--linha); border-radius: var(--r-janela); background: var(--papel); padding: var(--e-4); margin-bottom: var(--e-4); max-width: 900px; }
.funil-config.arquivado { opacity: .7; }
.cabeca-funil { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3); }
.cabeca-funil form { margin: 0; }
.tabela-etapas td { vertical-align: middle; }
.tabela-etapas td.ordem { width: 76px; white-space: nowrap; }
.tabela-etapas td.ordem form, .acoes-etapa form { display: inline; margin: 0; }
.acoes-etapa { white-space: nowrap; text-align: right; }
button.mini { height: 26px; min-width: 26px; padding: 0 var(--fc-2); }
.nova-etapa, .novo-funil { margin-top: var(--e-3); max-width: 900px; }
/* Quatro números da vertical: 4 na linha, 2 no meio, 1 no celular. */
/* As três tabelas da Agenda com as mesmas colunas, uma embaixo da outra. */
.tabela-agenda { table-layout: fixed; min-width: 760px; }
.tabela-agenda td { overflow-wrap: anywhere; }
/* Botões sempre embaixo do resumo, à esquerda: o painel abre para a direita
   e nunca é cortado pela borda da coluna da conversa. */
.oport { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
.oport.fechada { flex-direction: row; align-items: center; justify-content: flex-start; }
.painel-vendas { left: 0; right: auto; transform-origin: top left; }
/* Linha de item (produto, objeção) e cabeça do funil numa linha só. */
.linha-item { display: flex; align-items: center; gap: var(--e-2); }
.linha-item.arquivada { opacity: .6; }
.linha-item > form { margin: 0; }
.linha-item > form.linha-config, .cabeca-funil > form.linha-config { flex: 1 1 auto; flex-wrap: nowrap; }
.linha-config input { min-width: 0; }
@media (max-width: 620px) {
  .linha-item { flex-wrap: wrap; }
  .linha-item > form.linha-config, .cabeca-funil > form.linha-config { flex-wrap: wrap; }
}

/* Produtos e ofertas (specs/031). Cada produto é um bloco com as ofertas
   recuadas embaixo; valor em coluna estreita e números alinhados. */
.produto-config { border: 1px solid var(--linha); border-radius: var(--r-janela); background: var(--papel); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-3); max-width: 900px; transition: border-color var(--dur-2) var(--curva); }
.produto-config:hover { border-color: var(--realce-forte); }
.produto-config.arquivada { opacity: .65; }
.cabeca-produto { display: flex; align-items: center; gap: var(--e-2); }
.cabeca-produto > form { margin: 0; }
.cabeca-produto > form.linha-config { flex: 1 1 auto; flex-wrap: nowrap; }
.cabeca-produto input[name="nome"] { font-weight: 600; }
.aviso-produto { margin: var(--e-2) 0 0; font-size: var(--t-2); color: var(--atencao); }
.lista-ofertas { list-style: none; margin: var(--e-2) 0 0; padding: 0 0 0 var(--e-4); border-left: 2px solid var(--linha); display: flex; flex-direction: column; gap: var(--e-2); }
.linha-oferta { display: flex; align-items: center; gap: var(--e-2); }
.linha-oferta > form { margin: 0; }
.linha-oferta > form.linha-config { flex: 1 1 auto; flex-wrap: nowrap; }
.linha-oferta.arquivada { opacity: .6; }
.linha-config input.campo-valor { flex: 0 0 132px; font-variant-numeric: tabular-nums; }
.novo-produto { max-width: 900px; margin-top: var(--e-4); padding: var(--e-3) var(--e-4); border: 1px dashed var(--linha); border-radius: var(--r-janela); }
.novo-produto .titulo-painel { margin: 0 0 var(--e-2); font-size: var(--t-2); font-weight: 600; color: var(--tinta-2); }
.titulo-sem-vertical { margin: var(--e-6) 0 var(--e-1); font-size: var(--t-3); }
/* Celular: o nome ocupa a linha; vertical ou valor, Salvar e Arquivar na de
   baixo. `display: contents` deixa os campos na linha da lista sem tirá-los
   do formulário deles. */
@media (max-width: 620px) {
  .cabeca-produto, .linha-oferta { flex-wrap: wrap; }
  .cabeca-produto > form.linha-config, .linha-oferta > form.linha-config { display: contents; }
  .cabeca-produto input[name="nome"], .linha-oferta input[name="nome"] { flex: 1 1 100%; }
  .cabeca-produto select, .linha-config input.campo-valor { flex: 1 1 90px; min-width: 0; }
  .lista-ofertas { padding-left: var(--e-3); }
}
/* Escolha na oportunidade: a dica do valor fica colada no campo. */
.campos-produto .dica-valor { margin: var(--e-1) 0 0; }
/* Tabela de faturamento por produto e oferta, na tela Vendas. */
.tabela-produtos { max-width: 720px; }
.tabela-produtos th, .tabela-produtos td { text-align: left; }
.tabela-produtos .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.tabela-produtos tbody th { font-weight: 400; }
.tabela-produtos .linha-produto th { font-weight: 600; }
.tabela-produtos .linha-oferta-venda th { padding-left: var(--e-6); color: var(--tinta-2); }
.tabela-produtos .linha-oferta-venda td { color: var(--tinta-2); }
.tabela-produtos .sem-produto th { font-style: italic; }
.tabela-produtos tfoot th, .tabela-produtos tfoot td { font-weight: 600; border-top: 1px solid var(--linha); }

/* ── Motion da arte de entrada: o laço do Leadloop ───────────────────────
   Um oito em traço fino, com pontos de luz percorrendo o caminho (o lead que
   entra, conversa e volta como venda) e um anel que pulsa no cruzamento. Só
   CSS/SVG. Com prefers-reduced-motion a regra global de cima zera as
   animações: fica um quadro parado. Os pontos só aparecem onde o navegador
   sabe andar por offset-path. */
.laco {
  position: absolute; left: 50%; top: 50%; width: min(82%, 640px);
  transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
  animation: laco-entra 900ms var(--curva) both;
}
.laco-fio {
  fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1.5;
  stroke-dasharray: 2 9; stroke-linecap: round;
  animation: laco-fluxo 28s linear infinite;
}
.laco-anel {
  fill: none; stroke: var(--amarelo); stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: laco-pulso 4.2s ease-out infinite;
}
.laco-anel-2 { animation-delay: 2.1s; }
.laco-ponto { display: none; fill: #fff; }
@supports (offset-path: path("M0 0")) {
  .laco-ponto {
    display: block;
    offset-path: path("M300 200C380 90 560 90 560 200C560 310 380 310 300 200C220 90 40 90 40 200C40 310 220 310 300 200Z");
    offset-rotate: 0deg;
    animation: laco-anda 14s linear infinite;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .45));
  }
  .laco-ponto.p1 { animation-delay: 0s; }
  .laco-ponto.p2 { animation-delay: -3.5s; fill: var(--amarelo); }
  .laco-ponto.p3 { animation-delay: -7s; }
  .laco-ponto.p4 { animation-delay: -10.5s; fill: var(--amarelo); }
}
@keyframes laco-anda { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes laco-fluxo { to { stroke-dashoffset: -220; } }
@keyframes laco-pulso {
  0% { opacity: .75; transform: scale(1); }
  100% { opacity: 0; transform: scale(5.5); }
}
@keyframes laco-entra { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
/* A frase e o véu ficam por cima do laço. */
.entrada-arte .frase { z-index: 1; }
/* Formulário sobe suave ao abrir, como o cartão do FFunnels, sem copiar o desenho. */
.entrada-form .interno { animation: form-sobe 520ms var(--curva) both; }
@keyframes form-sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Refino de 29/09/2026: menos seletores, hover visível ─────────────────
   Pedido do Diego: "muitos seletores sobrepostos, nenhum highlight quando se
   passa o mouse". O período ficou com 4 abas + "Outro período"; a comparação
   virou um menu; os filtros da lista de conversas saíram dos dois <select>. */

/* Opção de menu (links dentro de .menu-painel). */
.menu-painel .opcao-menu {
  display: block; padding: var(--e-2) var(--e-3); border-radius: var(--r-controle);
  font-size: var(--t-3); color: var(--tinta); text-decoration: none;
}
.menu-painel .opcao-menu:hover { background: var(--realce); }
.menu-painel .opcao-menu.ativo { background: var(--realce-forte); font-weight: 600; }
.menu-painel .titulo-menu {
  margin: var(--e-2) var(--e-3) var(--e-1); padding-top: var(--e-2);
  border-top: 1px solid var(--linha);
  font-size: var(--t-1); font-weight: 600; color: var(--tinta-2);
}
.menu-painel .opcao-menu .ponto { display: inline-block; width: 8px; height: 8px; margin-right: var(--e-2); vertical-align: 1px; }
.menu-datas .menu-painel.menu-periodo { width: 264px; padding: var(--e-2); }
.menu-periodo form { padding: 0 var(--e-2) var(--e-2); margin: 0; }
.menu-periodo form label:first-of-type { margin-top: 0; }
.menu-periodo form > button { width: 100%; margin-top: var(--e-3); }

/* "Comparar" com a mesma cara das abas do período, sem caixa de seletor. */
.menu-comparar > summary { background: var(--realce); border-radius: var(--r-controle); }
.menu-comparar > summary:hover { background: var(--realce-forte); }
.menu-comparar .menu-painel { left: auto; right: 0; transform-origin: top right; }

/* Título de seção com link à direita ("Ver todas as 43 →"). */
.titulo-secao { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin: var(--e-6) 0 var(--e-3); }
.titulo-secao h2 { margin: 0; }
.link-secao { font-size: var(--t-2); color: var(--acento); text-decoration: none; padding: var(--fc-1) var(--e-2); border-radius: var(--r-controle); }
.link-secao:hover { background: var(--realce); text-decoration: underline; }

/* Linha inteira clicável: o link do nome se estica sobre a linha. */
table.linhas-clicaveis tbody tr { position: relative; cursor: pointer; }
table.linhas-clicaveis tbody td:first-child a::after { content: ''; position: absolute; inset: 0; }
table.linhas-clicaveis tbody td:first-child a { font-weight: 500; }

/* Filtros da lista de conversas: um menu só. */
.menu-filtro > summary { display: inline-flex; align-items: center; gap: var(--e-1); }
.menu-filtro > summary svg { width: 13px; height: 13px; }
.menu-filtro > summary.ligado { background: var(--acento); color: var(--acento-tx); }
.menu-filtro > summary b { font-weight: 600; }
.menu-filtro .menu-painel.menu-filtros { width: 248px; max-height: min(460px, 70vh); overflow-y: auto; }
.menu-painel .titulo-menu.primeiro { border-top: 0; padding-top: 0; margin-top: var(--e-1); }
.menu-painel .opcao-menu.limpar { margin-top: var(--e-1); color: var(--tinta-2); border-top: 1px solid var(--linha); border-radius: 0 0 var(--r-controle) var(--r-controle); }

/* Estado no celular (fixada, silenciada) como ícone com dica. */
.icone-estado { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; color: var(--tinta-3); }
.icone-estado svg { width: 13px; height: 13px; }

/* ── Painel "Detalhes" da conversa ─────────────────────────────────────── */

.botao-detalhes { display: inline-flex; align-items: center; gap: var(--fc-2); }
.botao-detalhes svg { width: 15px; height: 15px; }
.botao-detalhes[aria-expanded="true"] { background: var(--realce-forte); border-color: color-mix(in srgb, var(--tinta) 24%, transparent); }
@media (max-width: 1100px) { .botao-detalhes span { display: none; } .botao-detalhes { padding: 0 var(--e-2); } }

.painel-detalhes { display: none; }
.conversas-app.com-detalhes { grid-template-columns: 340px minmax(0, 1fr) 288px; }
@media (max-width: 1280px) and (min-width: 901px) { .conversas-app.com-detalhes { grid-template-columns: 300px minmax(0, 1fr) 264px; } }
.conversas-app.com-detalhes .painel-detalhes {
  display: flex; flex-direction: column; min-height: 0; overflow-y: auto;
  border: 1px solid var(--linha); border-radius: var(--r-janela);
  background: var(--papel); box-shadow: var(--elev-1);
}
@media (max-width: 900px) { .conversas-app.com-detalhes { grid-template-columns: minmax(0, 1fr); } }
.topo-detalhes { display: flex; align-items: center; justify-content: space-between; padding: var(--e-3) var(--e-4) var(--e-2); }
.topo-detalhes h2 { margin: 0; font-size: var(--t-4); }
.fechar-detalhes {
  width: 28px; height: 28px; padding: 0; font-size: var(--t-5); line-height: 1;
  background: transparent; color: var(--tinta-2); box-shadow: none;
}
.fechar-detalhes:hover { background: var(--realce); color: var(--tinta); }
.bloco-detalhe { padding: var(--e-3) var(--e-4) var(--e-4); border-top: 1px solid var(--linha); margin: 0; }
.bloco-detalhe .titulo-detalhe { margin: 0 0 var(--e-2); font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.bloco-detalhe .titulo-detalhe:not(:first-child) { margin-top: var(--e-4); }
.bloco-detalhe select { height: 34px; }
.bloco-detalhe.com-js .so-sem-js { display: none; }
.bloco-detalhe form > button.so-sem-js { margin-top: var(--e-3); }

/* Etiqueta como pílulas: a escolhida fica cheia. */
.escolha-etiqueta { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.opcao-etiqueta { margin: 0; font-size: var(--t-2); color: var(--tinta); cursor: pointer; }
.opcao-etiqueta input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.opcao-etiqueta > span {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: 28px; padding: 0 var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel);
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}
.opcao-etiqueta .ponto { width: 8px; height: 8px; flex: 0 0 8px; }
.opcao-etiqueta:hover > span { background: var(--realce); border-color: color-mix(in srgb, var(--tinta) 24%, transparent); }
.opcao-etiqueta input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--acento-tx); font-weight: 500; }
.opcao-etiqueta input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

.prazos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin: 0; }
.prazos button { height: 32px; padding: 0 var(--e-2); font-size: var(--t-2); }
.followup-marcado { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-size: var(--t-3); }
.followup-marcado form { margin: 0; }
.followup-marcado button { height: 30px; }
.dica-detalhe { font-size: var(--t-1); margin: var(--e-2) 0 var(--e-1); }

.painel-detalhes .ficha { margin: 0 0 var(--e-3); font-size: var(--t-2); }
.painel-detalhes .ficha dt { color: var(--tinta-2); font-size: var(--t-1); margin-top: var(--e-2); }
.painel-detalhes .ficha dt:first-child { margin-top: 0; }
.painel-detalhes .ficha dd { margin: 0; overflow-wrap: anywhere; }
.painel-detalhes .form-ficha > button { width: 100%; }

/* ── Kanban: cada coluna rola sozinha ──────────────────────────────────────
   A página tinha 7.400px de altura com 65 cards numa coluna. Agora o quadro
   ocupa a altura da tela e a coluna rola por dentro, com o título parado. */
@media (min-width: 901px) {
  .quadro { align-items: stretch; height: calc(100vh - 44px - 190px); min-height: 360px; }
  .coluna-kanban { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .coluna-kanban > header { padding: var(--e-3) var(--e-3) var(--e-2); }
  .coluna-kanban .cartoes { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e-1) var(--e-1) var(--e-3); scrollbar-width: thin; }
}
/* O seletor de mover repetia o nome da coluna em todo card. Some até a mão
   (ou o teclado) chegar no card; arrastar continua sendo o caminho principal. */
.cartao-lead .mover select { opacity: 0; }
.cartao-lead:hover .mover select, .cartao-lead:focus-within .mover select { opacity: 1; }
@media (hover: none) { .cartao-lead .mover select { opacity: 1; } }
.cartao-lead:hover { border-color: color-mix(in srgb, var(--tinta) 18%, transparent); }

/* Busca e Filtros na mesma linha: as quatro abas cabem numa fileira só. */
.busca { display: flex; gap: var(--e-2); align-items: stretch; }
.busca input { flex: 1; min-width: 0; }
.busca .menu-filtro > summary {
  height: 100%; min-height: 36px; padding: 0 var(--e-3); border-radius: var(--r-controle);
  border: 1px solid var(--linha); background: var(--papel); font-size: var(--t-2);
}
.busca .menu-filtro > summary:hover { background: var(--realce); color: var(--tinta); }
.busca .menu-filtro > summary.ligado { border-color: var(--acento); color: var(--acento); }
.busca .menu-filtro .menu-painel { left: auto; right: 0; top: 40px; transform-origin: top right; }

/* Com o painel aberto o botão "Detalhes" some (o × do painel fecha). */
.conversas-app.com-detalhes .botao-detalhes { display: none; }
.barra-periodo + .aviso, .barra-periodo + .aviso.ruim { margin-top: var(--e-4); }
@media (min-width: 901px) { .quadro { height: calc(100vh - 44px - 214px); } }
/* Com o calendário de dois meses o menu cresce até caber. */
.menu-datas .menu-painel.menu-periodo.com-calendario { width: auto; min-width: 264px; padding: var(--e-2); }

/* ── Movimento entre telas (29/09/2026, "deixar mais premium") ────────────
   Transição nativa do navegador entre páginas (View Transitions): a lateral e
   o cabeçalho ficam parados, só o conteúdo troca, com um esmaecer curto e
   subindo 6px. A pílula azul do menu desliza do item antigo para o novo; na
   lista de conversas, a lista fica parada e só a conversa troca. Navegador
   sem suporte (Firefox, Safari antigo) troca de página como antes. Com
   "reduzir movimento", nada disso liga. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* Desde 19/10/2026 (troca de tela sem piscar) os nomes de transição são só
   estes: a moldura (lateral e barra de baixo) e, no computador, o painel claro.
   O cabeçalho e a lista de conversas não têm mais nome próprio: um nome que só
   existe numa das telas virava um fantasma por cima da outra. */
.lateral { view-transition-name: lateral; }

.item { position: relative; isolation: isolate; }
.item .pilula-menu { position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.item.ativo { background: transparent; }
.item.ativo .pilula-menu { background: var(--lateral-ativo); }
/* Barra de 3 px na cor da marca, na borda esquerda do item ativo (regra 1). */
.item.ativo .pilula-menu::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--marca);
}

/* A troca de tela (19/10/2026, depois da specs/046). No vídeo do Diego (computador,
   retina) a tela inteira ia ao preto por uns 70 ms a cada troca: a raiz nova
   acendia do zero por cima da moldura preta, e quando a imagem da tela antiga
   não chega a tempo (tela grande, máquina ocupada) sobra só o preto embaixo.
   Agora nada passa pelo preto:
   - a raiz não anima: a tela nova entra na hora;
   - a moldura (lateral e barra de baixo) não anima: o item marcado muda na hora;
   - no computador só o painel claro faz a troca cruzada, as duas imagens ao
     mesmo tempo (150 ms), sobre a cor do próprio painel. No celular o painel
     rola com a página e não tem nome: a troca é seca, sem passar pelo preto.
   "Reduzir movimento" desliga tudo (o @view-transition acima). */
.barra-baixo { view-transition-name: barra-baixo; }
@media (min-width: 901px) { .conteudo { view-transition-name: painel; } }
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
::view-transition-old(root), ::view-transition-old(lateral), ::view-transition-old(barra-baixo) { display: none; }
::view-transition-group(painel) { background: var(--fundo); border-radius: var(--r-janela); overflow: hidden; }
::view-transition-old(painel) { animation: 150ms var(--curva) both vt-painel-sai; }
::view-transition-new(painel) { animation: 150ms var(--curva) both vt-painel-entra; }
@keyframes vt-painel-sai { to { opacity: 0; } }
@keyframes vt-painel-entra { from { opacity: 0; } }

/* Servidor demorando: a tela antiga continua à vista (o navegador segura a
   pintura) e, depois de 250 ms, uma linha fina branca corre na moldura preta,
   no alto da tela, para dizer que a próxima está a caminho (voltar.js põe a
   classe). Branca e não amarela: amarelo é só o que é seu e pede ação. */
.carregando-tela { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 120ms linear; }
.carregando-tela::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: rgba(255, 255, 255, .85); border-radius: 0 var(--r-pill) var(--r-pill) 0; transform: translateX(-100%); }
html.indo .carregando-tela { opacity: 1; }
html.indo .carregando-tela::before { animation: carregando-corre 1.1s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes carregando-corre { to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { html.indo .carregando-tela::before { animation: none; transform: none; width: 100%; opacity: .6; } }

/* Pequenos retornos de estado que faltavam. */
.item .ic { transition: transform var(--dur-2) var(--curva); }
.item:hover .ic { transform: translateX(1px); }
.periodo a, .filtros-lista a, .menu-filtro > summary, .menu-datas > summary { transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva); }
.item-conversa { transition: background-color var(--dur-2) var(--curva), box-shadow var(--dur-2) var(--curva); }
.cartao-lead, .aviso { transition: box-shadow var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), transform var(--dur-2) var(--curva); }
/* Menu que abre (Filtros, Outro período, Comparar): surge do botão. */
.menu-painel { animation: surgir var(--dur-2) var(--curva); }
@media (prefers-reduced-motion: reduce) {
  .item:hover .ic { transform: none; }
}
/* Durante a transição a pílula é desenhada por cima da lateral (é a regra do
   navegador para elemento com nome). "multiply" deixa o texto do item aparecer
   através dela no tema claro; no escuro, "screen" faz o mesmo. */


/* ── Aba Etiquetas (specs/020) ─────────────────────────────────────────── */

.bloco-etiquetas {
  max-width: 760px; background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--r-cartao); padding: var(--e-6); margin-bottom: var(--e-4);
}
.bloco-etiquetas h2 { margin: 0 0 var(--e-3); }
.bloco-etiquetas .legenda { margin-bottom: var(--e-3); }
.bloco-etiquetas .acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.bloco-etiquetas .sugestao { margin-top: var(--e-4); padding: var(--e-3) var(--e-4); background: var(--recuo); border-radius: var(--r-controle); }

/* A pergunta: dois cartões lado a lado, o marcado em azul. */
.escolha-origem { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
label.opcao-origem {
  display: flex; align-items: flex-start; gap: var(--e-3); margin: 0; cursor: pointer;
  padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-controle);
  font-size: var(--t-3); color: var(--tinta); line-height: 20px; background: var(--papel);
  transition: border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}
label.opcao-origem:hover { border-color: color-mix(in srgb, var(--tinta) 24%, transparent); box-shadow: var(--elev-1); }
label.opcao-origem:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, var(--papel)); }
label.opcao-origem:has(input:disabled) { cursor: default; }
label.opcao-origem:has(input:disabled):hover { box-shadow: none; }
label.opcao-origem:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
label.opcao-origem input { width: 16px; height: 16px; margin: var(--fc-1) 0 0; flex: none; accent-color: var(--acento); }
label.opcao-origem strong { display: block; font-size: var(--t-4); margin-bottom: var(--e-1); }
label.opcao-origem .apagado { display: block; font-size: var(--t-2); }

/* Lista das etiquetas do CRM: uma linha por etiqueta, ações à direita. */
.lista-crm { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.linha-crm {
  display: flex; align-items: center; gap: var(--e-3); min-height: 48px;
  padding: var(--e-2) var(--e-2); border-bottom: 1px solid var(--linha);
  transition: background-color var(--dur-1) var(--curva);
  animation: surgir var(--dur-2) var(--curva);
}
.linha-crm:hover { background: var(--realce); }
.ponto.grande { width: 12px; height: 12px; flex: 0 0 12px; }
.nome-crm { font-weight: 500; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-crm { font-size: var(--t-2); white-space: nowrap; }
.acoes-crm { display: flex; gap: var(--e-1); flex: none; }
.acoes-crm form { margin: 0; }
button.perigo-texto { color: var(--alerta); }

.nova-etiqueta { margin-top: var(--e-6); }
.nova-etiqueta h3 { font-size: var(--t-3); margin: 0 0 var(--e-2); }
.linha-nova { display: flex; gap: var(--e-3); align-items: flex-end; }
.linha-nova .campo-nome { flex: 1 1 auto; }
.linha-nova .campo-nome label { margin-top: 0; }

/* Cores em bolinhas: a marcada ganha um anel. */
fieldset.cores { border: 0; padding: 0; margin: var(--e-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
fieldset.cores legend { font-size: var(--t-1); color: var(--tinta-2); padding: 0; margin-bottom: var(--e-2); }
label.cor { margin: 0; cursor: pointer; position: relative; }
label.cor input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
label.cor span {
  display: block; width: 24px; height: 24px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  transition: transform var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
label.cor:hover span { transform: scale(1.12); }
label.cor input:checked + span { box-shadow: 0 0 0 2px var(--papel), 0 0 0 4px var(--acento); }
label.cor input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 4px; }

/* Janela de confirmar, editar e apagar. */
dialog.janela {
  width: min(440px, calc(100vw - 32px)); padding: var(--e-6); border: 1px solid var(--linha);
  border-radius: var(--r-janela); background: var(--papel); color: var(--tinta); box-shadow: var(--elev-3);
}
dialog.janela[open] { animation: surgir var(--dur-2) var(--curva); }
dialog.janela::backdrop { background: rgba(10, 11, 13, .4); }
dialog.janela h3 { margin: 0 0 var(--e-3); font-size: var(--t-4); }
dialog.janela p { margin: 0 0 var(--e-3); font-size: var(--t-3); line-height: 1.5; }
.aviso-janela { padding: var(--e-2) var(--e-3); border-radius: var(--r-controle); background: var(--alerta-bg); border: 1px solid var(--alerta-borda); }
.acoes-janela { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-4); }

@media (max-width: 640px) {
  .bloco-etiquetas { padding: var(--e-4); }
  .escolha-origem { grid-template-columns: 1fr; }
  .linha-crm { flex-wrap: wrap; row-gap: var(--e-1); }
  .nome-crm { flex-basis: calc(100% - 120px); }
  .acoes-crm { width: 100%; justify-content: flex-end; }
  .linha-nova { flex-direction: column; align-items: stretch; }
}

/* ── Tráfego (specs/021): gasto da Meta × conversa × venda ─────────────────
   Os totais moram na faixa de indicadores (fim deste arquivo). A tabela é
   larga de propósito e rola dentro dela, nunca a página. */

.vazio-ensina {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-controle); box-shadow: var(--elev-1);
  padding: var(--e-4) var(--e-6); margin: var(--e-4) 0; max-width: 760px; font-size: var(--t-3); line-height: 22px;
}
.vazio-ensina h2 { margin-top: 0; }
.vazio-ensina ol { padding-left: var(--e-6); margin: var(--e-2) 0 var(--e-4); }
.vazio-ensina li { margin-bottom: var(--e-2); }

table.trafego { min-width: 940px; }
table.trafego th, table.trafego td { padding-left: var(--e-2); padding-right: var(--e-2); }
table.trafego th { white-space: normal; vertical-align: bottom; line-height: 17px; }
table.trafego th.num, table.trafego td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.trafego tbody.grupo tr.campanha { background: var(--recuo); cursor: pointer; }
table.trafego tbody.grupo tr.campanha:hover { background: var(--realce); }
table.trafego tr.anuncio td:first-child { padding-left: var(--e-6); }
table.trafego tfoot tr.total td { border-top: 2px solid var(--linha); background: var(--recuo); }
table.trafego td:first-child { min-width: 190px; white-space: normal; }
/* A tabela é larga: nesta tela o conteúdo usa a largura que a janela der. */
main:has(table.trafego) { max-width: none; }
table.trafego .nome-anuncio { font-weight: 500; }
table.trafego .pequeno { font-size: var(--t-1); line-height: 17px; }
table.trafego .cobertura {
  margin-top: var(--e-1); max-width: 440px; font-size: var(--t-1); line-height: 17px; color: var(--atencao);
}
table.trafego button.alterna {
  width: 24px; height: 24px; padding: 0; margin-right: var(--e-2); vertical-align: middle; font-size: var(--t-2);
  line-height: 1; box-shadow: none;
}
table.trafego button.alterna span { display: inline-block; transition: transform var(--dur-1) var(--curva); }
table.trafego button.alterna[aria-expanded="true"] span { transform: rotate(90deg); }
table.trafego .tag { margin-left: var(--e-2); }
@media (prefers-reduced-motion: reduce) { table.trafego button.alterna span { transition: none; } }

.form-venda { display: flex; align-items: flex-end; gap: var(--e-3); flex-wrap: wrap; max-width: 520px; }
.form-venda > div:first-child { flex: 1 1 220px; }
.form-venda .acoes { padding-bottom: 0; }

/* ── Link de conexão sem login (specs/023) ─────────────────────────────────
   A página pública (views/conectar-link.ejs) não tem lateral: uma coluna só,
   que cabe em 390 px sem rolagem lateral. O bloco da tela do número
   (views/instancia.ejs) mostra o link gerado, as contagens e o cancelar. */

.pagina-link { min-height: 100vh; }
main.link-pagina { max-width: 480px; margin: 0 auto; padding: var(--e-6) var(--e-4); width: 100%; }
.link-pagina h1 { margin-top: var(--e-4); }
.link-pagina .link-quem { margin-bottom: var(--e-4); line-height: 22px; overflow-wrap: anywhere; }
.link-cartao { padding: var(--e-4); }
.link-cartao .link-ajuda { font-size: var(--t-2); margin: var(--e-2) 0 0; line-height: 20px; }

.caixa-aceite {
  display: flex; align-items: flex-start; gap: var(--e-3); margin: 0; padding: var(--e-3) var(--e-4);
  font-size: var(--t-3); line-height: 22px; color: var(--tinta); cursor: pointer;
  background: var(--recuo); border: 1px solid var(--linha); border-radius: var(--r-controle);
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva), box-shadow var(--dur-2) var(--curva);
}
.caixa-aceite:hover { background: var(--realce); border-color: color-mix(in srgb, var(--tinta) 24%, transparent); }
.caixa-aceite:focus-within { box-shadow: 0 0 0 2px var(--acento); }
.caixa-aceite input[type=checkbox] { margin-top: 3px; cursor: pointer; }
.caixa-aceite span { min-width: 0; overflow-wrap: anywhere; }

.link-opcoes { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
.link-opcoes button { width: 100%; height: 44px; white-space: normal; line-height: 18px; }

.link-resultado { margin-top: var(--e-6); text-align: center; }
.link-pagina [hidden] { display: none !important; } /* o display:block do QR vencia o atributo hidden */
.link-qr { display: block; margin: 0 auto; width: 100%; max-width: 260px; height: auto; background: #fff; padding: var(--e-3); border-radius: var(--r-controle); border: 1px solid var(--linha); }
.link-codigo {
  font: 600 30px/1.2 ui-monospace, Menlo, monospace; letter-spacing: 5px; padding: var(--e-3) 0;
  overflow-wrap: anywhere; user-select: all;
}
.link-passos { text-align: left; margin: var(--e-3) auto 0; padding-left: var(--e-6); font-size: var(--t-3); line-height: 24px; max-width: 360px; }
.link-instrucao { font-size: var(--t-2); margin: var(--e-2) 0 0; }
.link-resultado button { margin-top: var(--e-3); width: 100%; height: 44px; }

.link-final {
  margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--r-controle);
  font-size: var(--t-3); line-height: 22px; border: 1px solid var(--linha); background: var(--papel); box-shadow: var(--elev-1);
}
.link-final.ok { border-color: color-mix(in srgb, var(--ok-tx) 45%, var(--linha)); color: var(--ok-tx); }
.link-final.aviso { border-color: color-mix(in srgb, var(--atencao) 55%, var(--linha)); }
.link-final.erro { border-color: var(--alerta-borda); background: var(--alerta-bg); color: var(--alerta-tx); }

/* Tela do número: o bloco "Link de conexão". */
.link-bloco { max-width: 640px; padding: var(--e-4) var(--e-4); }
.link-gerado { margin-bottom: var(--e-4); padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--recuo); }
.link-gerado .rotulo { font-size: var(--t-2); color: var(--tinta-2); margin-bottom: var(--e-2); }
.link-gerado-linha { display: flex; gap: var(--e-2); }
.link-gerado-linha input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: var(--t-2); }
.link-gerado-linha button { flex: none; min-width: 84px; }
.link-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e-3); margin: 0 0 var(--e-4); }
.link-dados dt { font-size: var(--t-1); color: var(--tinta-2); }
.link-dados dd { margin: var(--e-2) 0 0; font-size: var(--t-3); font-weight: 500; }
.link-form { display: flex; gap: var(--e-3); align-items: flex-end; flex-wrap: wrap; }
.link-form-campo { flex: 1 1 260px; }
@media (max-width: 480px) {
  .link-gerado-linha { flex-direction: column; }
  .link-gerado-linha button { width: 100%; }
  .link-form button { width: 100%; }
}

/* ── Kanban pelos funis (specs/025) ────────────────────────────────────────
   Só escalas e cores que já existem. A casca do quadro é a do Kanban de
   etiquetas (.quadro, .coluna-kanban, .cartao-lead); aqui entram as duas
   caixas do topo, o total e a soma de cada coluna, o cartão de oportunidade
   e as telas de configuração com um funil por vez. */
.caixas-funil { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); margin: var(--e-4) 0 0; }
.caixas-funil label { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.caixas-funil select { width: auto; min-width: 200px; max-width: 100%; height: 34px; }
.caixas-funil.com-js .so-sem-js { display: none; }
.caixas-funil .setas-funil { margin-left: auto; }
@media (max-width: 520px) {
  .caixas-funil { gap: var(--e-2); }
  .caixas-funil label, .caixas-funil select { width: 100%; }
}

/* "Novo contato" é uma fila, não uma etapa: borda tracejada a distingue. */
.coluna-funil { flex-basis: 280px; }
.coluna-novo { background: transparent; border: 1px dashed color-mix(in srgb, var(--tinta) 24%, transparent); }
.coluna-arquivada { opacity: .85; }
.coluna-funil .soma-coluna { margin: 0; padding: 0 0 var(--e-2); font-size: var(--t-1); color: var(--tinta-3); min-height: 22px; font-variant-numeric: tabular-nums; }
/* Em tela larga a coluna não tem recuo próprio (o cabeçalho tem): a soma acompanha o cabeçalho. */
@media (min-width: 901px) { .coluna-funil .soma-coluna { padding: 0 var(--e-3) var(--e-2); } }
.coluna-funil.recebendo { border-style: solid; }
/* Ganho e perda no fim do quadro (specs/033): um fio em cima diz o que é, sem cor
   nova (ganho no --ok, perda no cinza do texto apagado). Soltar ali abre o fechamento. */
.coluna-fechamento { box-shadow: inset 0 3px 0 0 var(--tinta-3); }
.coluna-fechamento.coluna-ganha { box-shadow: inset 0 3px 0 0 var(--ok); }
.coluna-fechamento.recebendo { border-color: var(--acento); }
.cartao-fechado .linha-oport { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); margin-top: var(--e-2); font-size: var(--t-2); min-height: 1.4em; }
.cartao-fechado .valor-cartao { font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-fechado .rodape-cartao .quando { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
dialog.janela button[type="submit"]:disabled { opacity: .6; cursor: progress; }

.cartao-oport .linha-oport { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); margin-top: var(--e-2); font-size: var(--t-2); }
.cartao-oport .valor-cartao { font-weight: 600; font-variant-numeric: tabular-nums; }
.cartao-oport .rodape-cartao .quando { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cartao-lead .botao-cartao {
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--e-3); flex: none;
  border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel);
  color: var(--tinta); font-size: var(--t-1); font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
}
.cartao-lead .botao-cartao:hover { background: color-mix(in srgb, var(--tinta) 7%, var(--papel)); border-color: color-mix(in srgb, var(--tinta) 24%, transparent); }
.cartao-oport > form.mover { margin-top: var(--e-1); }
.cartao-oport > form.mover select { max-width: 100%; width: 100%; }

.opcoes-resultado { display: flex; gap: var(--e-4); margin: var(--e-2) 0 var(--e-1); }
.opcoes-resultado .opcao { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-3); color: var(--tinta); cursor: pointer; }
.opcoes-resultado .opcao input { width: 16px; height: 16px; padding: 0; flex: none; accent-color: var(--acento); }
dialog.janela [hidden] { display: none; }
dialog.janela select, dialog.janela input:not([type=radio]):not([type=hidden]) { width: 100%; }
dialog.janela .linha-dupla { margin-bottom: var(--e-2); }

/* Configurar vendas com caixas: uma vertical e um funil por vez. */
.escolha-funil { max-width: 900px; border: 1px solid var(--linha); border-radius: var(--r-janela); background: var(--papel); padding: var(--e-4); margin: var(--e-4) 0; display: flex; flex-direction: column; gap: var(--e-3); }
.escolha-funil .linha-escolha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-2); }
.escolha-funil .linha-escolha > form { margin: 0; }
.escolha-funil .caixa-escolha { display: flex; flex-direction: column; gap: var(--e-1); margin: 0; font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); min-width: 0; }
.escolha-funil .caixa-escolha select { width: auto; min-width: 220px; max-width: 100%; height: 34px; }
.escolha-funil .linha-escolha form.so-botoes { display: flex; gap: var(--e-2); align-items: center; margin: 0; }
.escolha-funil .titulo-linha { font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); margin: 0; width: 100%; }
.funil-config.sozinho { margin-bottom: var(--e-4); }
.secao-separada { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
@media (max-width: 520px) {
  .escolha-funil { padding: var(--e-3); }
  .escolha-funil .caixa-escolha, .escolha-funil .caixa-escolha select { width: 100%; }
}

/* Etapa no painel Detalhes da conversa: uma escolha por funil ativo. */
.form-etapa { margin: 0; }
.form-etapa + .form-etapa { margin-top: var(--e-3); }
.form-etapa label { margin: 0 0 var(--e-1); font-size: var(--t-1); color: var(--tinta-2); }
.form-etapa select { width: 100%; }
.escolha-funil.com-js .so-sem-js { display: none; }
/* Os botões soltos da barra da escolha têm a altura dos menus ao lado. */
.escolha-funil .so-botoes button { height: 28px; padding: 0 var(--e-3); font-size: var(--t-2); }

/* ── Histórico do número (specs/026) ───────────────────────────────────────
   Bloco de uma frase e, quando há contagem, uma barra fina. Cartão neutro;
   com ressalva (celular sem resposta, conversa que falhou) o contorno e o
   fundo seguem o aviso ruim, porque ali tem algo para a pessoa fazer. */
.historico-bloco { margin-top: var(--e-4); }
.historico-bloco .historico-frase { margin: var(--e-1) 0 0; font-size: var(--t-3); line-height: 22px; color: var(--tinta); }
.historico-bloco.com-aviso { border-color: var(--alerta-borda); background: var(--alerta-bg); }
.historico-trilho { height: 6px; margin-top: var(--e-3); background: var(--realce); border-radius: var(--r-controle); overflow: hidden; }
.historico-preenche { height: 100%; background: var(--barra); border-radius: var(--r-controle); transition: width var(--dur-2) var(--curva); }
@media (prefers-reduced-motion: reduce) { .historico-preenche { transition: none; } }
/* Aviso de deixar o WhatsApp aberto, junto do QR ou do código. */
.aviso-whatsapp-aberto { margin: var(--e-3) 0 0; font-size: var(--t-2); line-height: 20px; color: var(--tinta-2); text-align: left; }

/* ── Iniciar conversa pelo lead (specs/032) ────────────────────────────── */
/* O contato inteiro (nome e telefone) é o alvo do clique, não um link pequeno. */
.tabela-leads td:has(> .contato-lead) { padding-top: var(--e-1); padding-bottom: var(--e-1); }
.contato-lead, .contato-parado {
  display: flex; flex-direction: column; gap: var(--fc-1); min-width: 180px;
  padding: var(--e-1) var(--e-2); margin: 0 calc(-1 * var(--e-2));
  border-radius: var(--r-controle); color: var(--tinta); text-decoration: none;
}
.contato-lead { cursor: pointer; border: 1px solid transparent; }
.contato-lead:hover { background: var(--realce); border-color: var(--linha); }
.contato-lead:hover .nome-contato { color: var(--acento); }
.contato-lead:active { transform: translateY(1px); }
.contato-lead .nome-contato, .contato-parado .nome-contato { font-weight: 500; }
.contato-lead .tel, .contato-parado .tel { font-size: var(--t-1); color: var(--tinta-3); }
dialog.janela .tel-janela code { font-size: var(--t-3); color: var(--tinta-2); }
.numeros-empresa { border: 0; padding: 0; margin: var(--e-3) 0 0; display: flex; flex-direction: column; gap: var(--e-2); }
.numeros-empresa legend { padding: 0; margin-bottom: var(--e-2); font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.opcao-numero {
  display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha); border-radius: var(--r-controle); font-size: var(--t-3); color: var(--tinta); cursor: pointer;
}
.opcao-numero:hover { background: var(--realce); }
.opcao-numero:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 6%, var(--papel)); }
.opcao-numero:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcao-numero input { width: 16px; height: 16px; margin: 0; padding: 0; flex: none; accent-color: var(--acento); }
.erro-janela {
  margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-controle);
  background: var(--alerta-bg); border: 1px solid var(--alerta-borda); color: var(--tinta); font-size: var(--t-3);
}
button[aria-busy="true"] { cursor: progress; }
.confirmar-lead { max-width: 480px; margin: 0 auto; padding: var(--e-6); }
.confirmar-lead h1 { font-size: var(--t-5); margin: 0 0 var(--e-3); }
.confirmar-lead .acoes-janela a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--e-4); border-radius: var(--r-controle);
  border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); font-size: var(--t-3); font-weight: 500; text-decoration: none;
}
.confirmar-lead .acoes-janela a:hover { background: color-mix(in srgb, var(--tinta) 7%, var(--papel)); }

/* ── Colunas do Kanban que mudam de lugar (specs/032) ──────────────────── */
.coluna-kanban > header.alca-coluna { cursor: grab; border-radius: var(--r-controle); }
.coluna-kanban > header.alca-coluna:active { cursor: grabbing; }
.seta-coluna { margin: 0; flex: none; display: flex; }
.seta-vaga { flex: none; width: 24px; }
.seta-coluna button {
  width: 24px; height: 24px; padding: 0; font-size: var(--t-4); line-height: 1;
  border-radius: var(--r-controle); box-shadow: none; color: var(--tinta-2);
}
.seta-coluna button:hover { color: var(--tinta); }
/* Com mouse, as setas aparecem ao passar sobre a coluna; no toque ficam sempre à vista. */
@media (hover: hover) {
  .seta-coluna button { opacity: 0; }
  .coluna-kanban:hover .seta-coluna button,
  .coluna-kanban:focus-within .seta-coluna button,
  .seta-coluna button:focus-visible { opacity: 1; }
}
.coluna-kanban.coluna-arrastando { opacity: .5; }
/* Onde a coluna arrastada vai cair: uma barra azul do lado certo. */
.coluna-kanban.soltar-antes { box-shadow: -3px 0 0 0 var(--acento); }
.coluna-kanban.soltar-depois { box-shadow: 3px 0 0 0 var(--acento); }
@media (prefers-reduced-motion: no-preference) {
  .coluna-kanban.coluna-movida { animation: coluna-movida 900ms var(--curva); }
}
@keyframes coluna-movida {
  from { box-shadow: 0 0 0 2px var(--acento); }
  to { box-shadow: 0 0 0 2px transparent; }
}

/* ── Qualificação assistida (specs/034) ────────────────────────────────── */
/* Uma ação principal por cartão: "Confirmar qualificado" é o botão cheio, "Descartar"
   é o discreto. A frase que a pessoa disse é o destaque do cartão (faixa azul de
   informação, a mesma cor do foco), e a pendência usa o tom de atenção que o app já tem. */
.mes-qualif { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-4); margin: 0 0 var(--e-4); font-size: var(--t-3); }
.mes-qualif strong { font-size: var(--t-4); }
.mes-qualif a { color: var(--tinta-2); text-decoration: none; padding: var(--e-1) var(--e-2); border-radius: var(--r-controle); transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva); }
.mes-qualif a:hover { background: var(--realce); color: var(--tinta); }
.numeros-qualif { margin-bottom: var(--e-4); }
.numeros-qualif .cartao { transition: box-shadow var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva); }
.numeros-qualif .cartao:hover { box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--acento) 25%, var(--linha)); }
.numeros-qualif .valor.sem-numero { font-size: var(--t-4); font-weight: 500; color: var(--tinta-3); padding: 0; line-height: calc(var(--t-6) * 1.15); }
.detalhe-numero { margin-top: var(--e-1); font-size: var(--t-1); color: var(--tinta-3); }

.contagem-lista { display: inline-block; margin-left: var(--e-1); padding: 0 var(--e-2); border-radius: var(--r-pill); background: var(--realce); color: var(--tinta-2); font-size: var(--t-1); font-weight: 500; vertical-align: 2px; }
.vazio-lista { margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); border: 1px dashed var(--linha); border-radius: var(--r-controle); color: var(--tinta-2); font-size: var(--t-3); }

.fila-qualif { display: flex; flex-direction: column; gap: var(--e-3); }
.cartao-qualif {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-3) var(--e-6); align-items: center;
  padding: var(--e-4); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-controle); box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva), transform var(--dur-2) var(--curva);
}
.cartao-qualif:hover { box-shadow: var(--elev-2); border-color: color-mix(in srgb, var(--acento) 30%, var(--linha)); }
.cartao-qualif:focus-within { border-color: var(--acento); }
.corpo-qualif { min-width: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.quem-qualif { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); }
.nome-qualif { font-size: var(--t-4); font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.nome-qualif:hover { text-decoration: underline; }
.quando-qualif { font-size: var(--t-2); color: var(--tinta-3); }

.frase-qualif { margin: var(--e-1) 0; padding: var(--e-3) var(--e-4); border-left: 3px solid var(--acento); border-radius: 0 var(--r-controle) var(--r-controle) 0; background: color-mix(in srgb, var(--acento) 8%, var(--papel)); }
.frase-qualif figcaption { margin-bottom: var(--e-1); font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); }
.frase-qualif blockquote { margin: 0; font-size: var(--t-4); line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; }

.motivo-qualif { margin: 0; font-size: var(--t-3); color: var(--tinta-2); line-height: 1.5; }
.motivo-qualif .rotulo-motivo { font-weight: 500; color: var(--tinta); }
.pendencia-qualif { margin: 0; padding: var(--e-2) var(--e-3); border-radius: var(--r-controle); background: var(--atencao-bg); border: 1px solid color-mix(in srgb, var(--atencao) 40%, transparent); font-size: var(--t-3); line-height: 1.45; color: var(--tinta); }
.decisao-qualif { margin: 0; font-size: var(--t-2); color: var(--tinta-3); }

.acoes-qualif { display: flex; flex-direction: column; align-items: stretch; gap: var(--e-2); min-width: 200px; }
.acoes-qualif form { margin: 0; }
.acoes-qualif button { width: 100%; white-space: nowrap; }
.ver-conversa-qualif { text-align: center; font-size: var(--t-2); color: var(--tinta-2); text-decoration: none; padding: var(--e-1); border-radius: var(--r-controle); }
.ver-conversa-qualif:hover { color: var(--tinta); text-decoration: underline; }

/* Lista de quem não interagiu e das decididas: linha enxuta. */
.fila-qualif.compacta { gap: var(--e-2); }
.fila-qualif.compacta .cartao-qualif { padding: var(--e-3) var(--e-4); box-shadow: none; }
.fila-qualif.compacta .nome-qualif { font-size: var(--t-3); }
.fila-qualif.compacta .acoes-qualif { flex-direction: row; align-items: center; min-width: 0; }
.fila-qualif.compacta .acoes-qualif button { width: auto; height: 30px; padding: 0 var(--e-3); font-size: var(--t-2); }

.lista-recolhida { margin: var(--e-6) 0 0; border-top: 1px solid var(--linha); }
.lista-recolhida > summary { cursor: pointer; padding: var(--e-3) var(--e-1); font-size: var(--t-4); font-weight: 600; letter-spacing: -0.01em; list-style: none; border-radius: var(--r-controle); display: flex; align-items: center; gap: var(--e-2); transition: background var(--dur-1) var(--curva); }
.lista-recolhida > summary::-webkit-details-marker { display: none; }
.lista-recolhida > summary::before { content: ''; width: 7px; height: 7px; border-right: 2px solid var(--tinta-3); border-bottom: 2px solid var(--tinta-3); transform: rotate(-45deg); transition: transform var(--dur-2) var(--curva); margin-right: var(--e-1); }
.lista-recolhida[open] > summary::before { transform: rotate(45deg); }
.lista-recolhida > summary:hover { background: var(--realce); }
.lista-recolhida > summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.selo-qualificacao { text-decoration: none; }
.selo-qualificacao:hover { filter: brightness(.95); text-decoration: underline; }

/* Bloco da agência em Configurações. */
.bloco-qualificacao { max-width: 760px; }
.situacao-qualificacao { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-3); }
.titulo-mini { margin: 0 0 var(--e-1); font-size: var(--t-2); font-weight: 600; color: var(--tinta-2); }
.falta-qualificacao { margin: 0 0 var(--e-3); padding-left: var(--e-6); font-size: var(--t-3); line-height: 1.5; }
.aviso .falta-qualificacao { margin: var(--e-2) 0; }
.gasto-qualificacao { margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-controle); background: var(--recuo); border: 1px solid var(--linha); }
.linha-gasto { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; font-size: var(--t-3); }
.barra-gasto { height: 6px; margin-top: var(--e-2); border-radius: var(--r-pill); background: var(--linha); overflow: hidden; }
.barra-gasto span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--acento); transition: width var(--dur-2) var(--curva); }
.form-aceite { display: flex; gap: var(--e-3); align-items: end; flex-wrap: wrap; margin-top: var(--e-3); }

@keyframes qualif-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .cartao-qualif { animation: qualif-entra var(--dur-2) var(--curva) both; animation-delay: var(--atraso, 0ms); }
  .lista-recolhida[open] > :not(summary) { animation: qualif-entra var(--dur-2) var(--curva) both; }
}
@media (prefers-reduced-motion: reduce) {
  .cartao-qualif, .lista-recolhida > summary::before, .barra-gasto span { transition: none; }
}

@media (max-width: 900px) {
  .cartao-qualif { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .acoes-qualif { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .acoes-qualif form { flex: 1 1 110px; }
  .acoes-qualif form:first-child { flex: 2 1 200px; }
  .acoes-qualif button { min-height: 44px; }
  .ver-conversa-qualif { flex-basis: 100%; }
  .fila-qualif.compacta .acoes-qualif button { min-height: 40px; }
  .mes-qualif { flex-wrap: wrap; }
}

/* ── Fila de abordagem (specs/035) ─────────────────────────────────────── */
/* Só cores que já existem: o selo quente usa o laranja das etiquetas quentes, o
   morno o neutro e o frio o azul claro; atraso é o vermelho de "esperando". */
.selo-temp { font-weight: 600; white-space: nowrap; }
.resumo-fila { margin: 0 0 var(--e-3); font-size: var(--t-3); color: var(--tinta-2); }
.resumo-fila .atraso-fila { color: var(--alerta-tx); font-weight: 600; }
.fila-abordagem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); }
.item-fila {
  display: grid; grid-template-columns: 112px minmax(180px, 1.2fr) minmax(220px, 1.4fr);
  grid-template-areas: "selo contato situacao" "origem origem origem";
  gap: var(--e-1) var(--e-4); align-items: center;
  padding: var(--e-3) var(--e-4); background: var(--papel);
  border: 1px solid var(--linha); border-left-width: 3px; border-radius: var(--r-controle); box-shadow: var(--elev-1);
  transition: border-color var(--dur-1) var(--curva), box-shadow var(--dur-1) var(--curva);
}
.item-fila:hover { border-color: color-mix(in srgb, var(--acento) 40%, var(--linha)); box-shadow: var(--elev-2); }
.item-fila.atrasado { border-left-color: var(--alerta); }
.item-fila.encerrado { background: var(--recuo); box-shadow: none; }
.fila-selo { grid-area: selo; }
.fila-contato { grid-area: contato; min-width: 0; }
.fila-situacao { grid-area: situacao; display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-1); font-size: var(--t-3); }
.fila-origem { grid-area: origem; font-size: var(--t-2); }
@media (max-width: 720px) {
  .item-fila { grid-template-columns: 1fr; grid-template-areas: "selo" "contato" "situacao" "origem"; gap: var(--e-2); }
}
/* No painel Detalhes da conversa. */
.situacao-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); font-size: var(--t-3); }
.situacao-fila + .situacao-fila { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--linha); }
.situacao-fila .form-cadencia { margin: 0; flex-basis: 100%; }
.situacao-fila .form-cadencia button { height: 30px; }

/* ── Faixa de indicadores e seções em cartão (Vendas e Tráfego, 13/10/2026) ──
   Regra 7 do design system "TGIF para apps": um número herói por tela e os
   outros numa faixa só, divididos por fio, no lugar das caixas iguais. Em
   Tráfego a faixa é o dinheiro descendo o funil: uma seta no fio entre as
   etapas e o custo de cada uma embaixo do número. Medidas em
   .interface-design/system.md. */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.linha-vertical { margin-top: var(--e-6); }
.linha-vertical .caixas-funil { margin: 0; }

.faixa {
  margin-top: var(--e-4); display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-cartao);
}
.faixa-funil { margin-top: var(--e-6); grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); }
.fx { position: relative; min-width: 0; padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-1); }
.fx + .fx { border-left: 1px solid var(--linha); }
.fx-rot { font-size: var(--t-1); line-height: 16px; font-weight: 500; color: var(--tinta-2); }
.fx-val { margin-top: var(--e-1); font-size: var(--t-5); line-height: 28px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx.heroi .fx-val { font-size: var(--t-heroi); line-height: 34px; letter-spacing: -0.015em; }
.fx-custo { font-size: var(--t-2); line-height: 18px; font-weight: 500; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.fx-nt { font-size: var(--t-1); line-height: 16px; color: var(--tinta-3); text-wrap: pretty; }
.fx-nt .link-sec { font-size: var(--t-2); }
.fx .delta { margin-top: var(--e-1); font-size: var(--t-1); line-height: 16px; font-weight: 600; color: var(--tinta-2); }
.fx .delta span { font-weight: 400; color: var(--tinta-3); }
.fx .delta.bom { color: var(--ok-tx); }
.fx .delta.ruim { color: var(--alerta-tx); }
/* Vermelho só para atraso (regra 4); retorno abaixo de 1 vez no âmbar. */
.fx.atrasou .fx-rot { color: var(--alerta-tx); }
.fx.atrasou .fx-val { color: var(--alerta); }
.fx.atencao .fx-val { color: var(--atencao-tx); }
/* A seta senta em cima do fio, entre uma etapa e a seguinte. */
.fx-seta {
  position: absolute; z-index: 1; left: -11px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--papel); border: 1px solid var(--linha); color: var(--tinta-3);
}
.fx-seta svg { width: 12px; height: 12px; }
.nota-faixa { margin-top: var(--e-3); max-width: 880px; }

/* Seções das duas telas no mesmo cartão do Painel. */
.bloco-vendas { margin-top: var(--e-4); }
.bloco-sec { margin-top: var(--e-6); }
.sec-sub { font-size: var(--t-2); color: var(--tinta-3); }
.sec-miolo { padding: 0 var(--e-6) var(--e-6); }
.sec-vazia { margin: 0; padding: 0 var(--e-6) var(--e-6); font-size: var(--t-3); color: var(--tinta-2); }
.sec-vazia p { margin: 0 0 var(--e-1); }
.sec-miolo > .legenda:first-child { margin-top: 0; }
.sec-tabela table { margin: 0; }
.sec-tabela tr > :first-child { padding-left: var(--e-6); }
.sec-tabela tr > :last-child { padding-right: var(--e-6); }
.cartao-sec .tabela-produtos { max-width: none; }
.cartao-sec .form-venda { margin-top: var(--e-3); }

/* Etapas: célula rebaixada dentro do cartão, sem sombra (regra 2). Barra de uma
   cor só (regra 9) a 35%; a etapa de ganho em verde, porque é status. */
.cartao-sec .grade-funil { gap: var(--e-2); }
.cartao-sec .caixa-etapa { background: var(--recuo); box-shadow: none; border-color: var(--linha); border-radius: var(--r-controle); }
.cartao-sec .caixa-etapa .n { font-size: var(--t-5); line-height: 28px; letter-spacing: -0.01em; }
.cartao-sec .caixa-etapa .barra { background: var(--realce-forte); }
.cartao-sec .caixa-etapa .barra > span { background: color-mix(in srgb, var(--acento) 35%, var(--papel)); }
.cartao-sec .caixa-etapa.ganho { background: var(--recuo); border-color: var(--linha); }
.cartao-sec .caixa-etapa.ganho .nome { color: var(--ok-tx); font-weight: 600; }
.cartao-sec .caixa-etapa.ganho .barra > span { background: var(--ok); }
.cartao-sec .legenda-funil { margin: var(--e-3) 0 0; max-width: 880px; }
.cartao-sec .perdas-funil { max-width: none; gap: var(--e-6); }
.cartao-sec .motivos-perda li { min-height: 36px; align-items: center; padding: 0; }

@media (min-width: 621px) and (max-width: 1100px) {
  .faixa-funil { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa-funil .fx { border-left: 0; border-top: 1px solid var(--linha); }
  .faixa-funil .fx.heroi { grid-column: 1 / -1; border-top: 0; }
  .faixa-funil .fx:nth-child(odd):not(.heroi) { border-left: 1px solid var(--linha); }
  .faixa-funil .fx:nth-child(even) .fx-seta { left: 20px; top: -11px; margin-top: 0; transform: rotate(90deg); }
}
@media (min-width: 621px) and (max-width: 1000px) {
  .faixa:not(.faixa-funil) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faixa:not(.faixa-funil) .fx { border-left: 0; border-top: 1px solid var(--linha); }
  .faixa:not(.faixa-funil) .fx.heroi { grid-column: 1 / -1; border-top: 0; }
  .faixa:not(.faixa-funil) .fx:nth-child(odd):not(.heroi) { border-left: 1px solid var(--linha); }
}
@media (max-width: 620px) {
  .faixa, .faixa-funil { grid-template-columns: 1fr; }
  .faixa .fx, .faixa-funil .fx { border-left: 0; border-top: 1px solid var(--linha); padding: var(--e-5); }
  .faixa .fx.heroi { border-top: 0; }
  .faixa .fx .fx-seta { left: var(--e-4); top: -11px; margin-top: 0; transform: rotate(90deg); }
  .fx.heroi .fx-val { font-size: var(--t-valor); line-height: 30px; }
  .sec-miolo, .sec-vazia { padding: 0 var(--e-4) var(--e-4); }
  .sec-tabela tr > :first-child { padding-left: var(--e-4); }
  .sec-tabela tr > :last-child { padding-right: var(--e-4); }
  .cartao-sec .perdas-funil { grid-template-columns: 1fr; gap: var(--e-4); }
  .sec-cab:has(.sec-sub) { flex-wrap: wrap; row-gap: var(--e-1); }
  .sec-cab .sec-sub { flex-basis: 100%; }
}

/* Lead em uma vertical só ou em várias (Verticais e produtos, 14/10/2026):
   duas opções grandes, clicáveis inteiras, a escolhida contornada. */
.cartao-opcao { margin: var(--e-4) 0; padding: var(--e-3) var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--papel); box-shadow: var(--elev-1); }
.cartao-opcao h2 { margin: 0 0 var(--e-3); font-size: var(--t-3); }
.opcoes-vertical { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); align-items: stretch; }
.opcoes-vertical button { grid-column: 1 / -1; justify-self: start; }
.opcao { display: flex; gap: var(--e-2); align-items: flex-start; padding: var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-controle); cursor: pointer; transition: border-color var(--dur-1) var(--curva), background var(--dur-1) var(--curva); }
.opcao:hover { border-color: var(--tinta-3); background: var(--realce); }
.opcao:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.opcao:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcao input { flex: none; width: auto; height: auto; margin: 3px 0 0; padding: 0; accent-color: var(--acento); }
.opcao > span { flex: 1; min-width: 0; }
@media (max-width: 640px) { .opcoes-vertical { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   ONDA 1 (15/10/2026): toda tela abre igual

   Estudo do Stint Hub (relatório no handoff tgif-crm): a tela parece calma
   quando todas abrem com o mesmo molde e quase nada explica a própria
   mecânica. Aqui entram o cabeçalho único, a dica no lugar do parágrafo, as
   pílulas "Agora" e "No período", os seletores no nosso desenho e o Kanban
   mais leve. Medidas em .interface-design/system.md.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* A fonte (--f-corpo e --f-titulo) mora no primeiro :root do arquivo. */
  /* Seta dos seletores: desenho próprio na cor do texto apagado de cada tema. */
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2355555a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}
:root[data-tema="escuro"] {
  --seta-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23bcbcc1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}

/* ── Cabeçalho único ────────────────────────────────────────────────────
   Sobretítulo (onde a tela mora no menu) em 12/600 caixa alta, título 26/600 e,
   na mesma linha, a ação da tela sempre encostada à direita. Uma linha curta de
   apoio embaixo, só com fato (período, quantos), nunca com instrução. */
.cab-tela { margin: 0 0 var(--e-6); }
.cab-tela .sobre {
  margin: 0 0 var(--e-2); font-size: var(--t-1); line-height: 16px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.cab-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-4); flex-wrap: wrap; min-height: 36px; }
.cab-titulo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.cab-tela h1 {
  margin: 0; font-family: var(--f-titulo); font-size: var(--t-6); line-height: 32px;
  font-weight: 600; letter-spacing: -0.02em; text-wrap: balance;
}
.cab-acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin-left: auto; }
/* Títulos de bloco e a marca também na fonte de títulos. */
main h2, .lateral .marca, .barra-baixo + .conteudo .entrada-form .logo { font-family: var(--f-titulo); }
main h2 { letter-spacing: -0.01em; }
.cab-acoes form { margin: 0; }
.cab-tela .legenda { margin: var(--e-1) 0 0; font-size: var(--t-3); line-height: 22px; color: var(--tinta-2); }
.cab-tela .legenda .apagado { color: var(--tinta-3); }
/* As abas de Configurações e de Leads vêm logo depois do cabeçalho. */
.cab-tela + .abas-config { margin-top: 0; }
/* Telas com período: as abas e o Comparar são a ação da tela. */
.cab-acoes.barra-periodo { justify-content: flex-end; }
/* Painel: a frase de abertura vem logo depois do cabeçalho. */
.cab-tela + .abertura, .cab-tela ~ .aviso + .abertura { margin-top: var(--e-2); }
/* Configurações: o texto de apoio da aba, logo abaixo das abas. */
.intro-aba { margin: 0 0 var(--e-6); }
/* Link com cara de botão discreto (ação de cabeçalho que leva a outra tela). */
.cab-acoes > a.botao { height: 36px; padding: 0 var(--e-4); font-weight: 600; }
a.botao.discreto { height: 36px; padding: 0 var(--e-4); background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); }
a.botao.discreto:hover { background: color-mix(in srgb, var(--tinta) 7%, var(--papel)); border-color: color-mix(in srgb, var(--tinta) 24%, transparent); }
@media (max-width: 620px) {
  .cab-tela { margin-bottom: var(--e-4); }
  .cab-tela h1 { font-size: 22px; line-height: 28px; }
  .cab-linha { flex-direction: column; align-items: stretch; gap: var(--e-3); }
  .cab-acoes { margin-left: 0; }
  .cab-acoes > a.botao, .cab-acoes > form > button { width: 100%; justify-content: center; }
}

/* ── Dica (o "?" ao lado do título) ─────────────────────────────────────
   O parágrafo que explicava a tela vira um botão de 24 px com o texto num
   balão. Abre ao passar o mouse e ao focar pelo teclado; Esc fecha (menus.js).
   O texto fica no HTML, ligado ao botão por aria-describedby: leitor de tela
   lê sem abrir nada. No toque, tocar no "?" foca e abre. */
.ajuda { position: relative; display: inline-flex; flex: none; vertical-align: middle; }
.ajuda-btn {
  width: 24px; height: 24px; padding: 0; display: inline-grid; place-items: center;
  border-radius: var(--r-controle); background: transparent; color: var(--tinta-3); box-shadow: none;
}
.ajuda-btn svg { width: 16px; height: 16px; }
.ajuda-btn:hover { background: var(--realce); background-image: none; color: var(--tinta); }
/* Área de toque de 40 px sem mudar o desenho. */
.ajuda-btn::after { content: ""; position: absolute; inset: calc(var(--e-2) * -1); }
.ajuda-txt {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: -8px;
  width: max-content; max-width: min(340px, calc(100vw - 32px));
  padding: var(--e-2) var(--e-3); border-radius: var(--r-controle);
  background: var(--tinta); color: var(--tinta-tx); box-shadow: var(--elev-3);
  font-size: var(--t-2); line-height: 19px; font-weight: 400; letter-spacing: 0; text-transform: none; text-wrap: pretty;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transform-origin: top left; pointer-events: none;
  /* Fechado, o balão não ocupa espaço: escondido mas largo, ele empurrava a
     página para o lado no celular. */
  width: 1px; max-width: 1px; height: 1px; padding: 0; overflow: hidden;
}
.ajuda:hover .ajuda-txt, .ajuda-btn:focus-visible + .ajuda-txt, .ajuda.aberta .ajuda-txt {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  width: max-content; max-width: min(340px, calc(100vw - 32px)); height: auto; padding: var(--e-2) var(--e-3); overflow: visible;
  transition: opacity var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.ajuda.fechada .ajuda-txt { opacity: 0; visibility: hidden; width: 1px; max-width: 1px; height: 1px; padding: 0; overflow: hidden; }
/* No celular o balão ocupa a largura da tela, logo abaixo do "?". */
@media (max-width: 620px) {
  .ajuda:hover .ajuda-txt, .ajuda-btn:focus-visible + .ajuda-txt, .ajuda.aberta .ajuda-txt {
    position: fixed; left: var(--e-4); right: var(--e-4); top: auto; width: auto; max-width: none; margin-top: var(--e-8);
  }
}
/* O cartão de seção corta o que passa da borda (por causa das tabelas); com
   dica dentro, não corta, senão o balão some pela metade. */
.cartao-sec:has(.ajuda) { overflow: visible; }
/* Dica na ponta direita de um bloco abre para dentro. */
.ajuda.pra-esquerda .ajuda-txt { left: auto; right: -8px; transform-origin: top right; }

/* ── Pílulas de tempo ──────────────────────────────────────────────────
   "Agora" = o número é do momento e não muda com as datas; "No período" = muda.
   Neutras: a pílula informa, não chama. O ponto verde do "Agora" diz "ao vivo". */
.pilula-tempo {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: 20px; padding: 0 var(--e-2);
  border-radius: var(--r-pill); background: var(--realce); color: var(--tinta-2);
  font-size: var(--t-1); line-height: 1; font-weight: 500; letter-spacing: 0; white-space: nowrap; flex: none;
}
.pilula-tempo.agora::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ok); }
.sec-titulo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; flex-wrap: wrap; }
.fx-rot { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.titulo-bloco { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-6) 0 var(--e-3); }
.titulo-bloco h2 { margin: 0; }
/* Painel: os quatro cartões ganham um título com a pílula. */
.titulo-bloco + .kpis { margin-top: 0; }
.titulo-bloco.intro-aba { margin-top: 0; }
/* Conversas: o mesmo cabeçalho, dentro da coluna da lista. */
.topo-lista.cab-tela { display: block; margin: 0; padding: var(--e-4) var(--e-4) var(--e-2); }
.topo-lista.cab-tela h1 { font-size: var(--t-6); }
.topo-lista.cab-tela .quantas { color: var(--tinta-2); font-size: var(--t-1); }

/* ── Seletores no nosso desenho ─────────────────────────────────────────
   O seletor do navegador (seta cinza e caixa de outro sistema) dava cara de
   formulário. Mesmo campo de 36 px, seta própria. A lista que abre é do CRM
   desde a specs/052 (public/selecao.js, .selecao-cartao no fim deste arquivo);
   no toque e sem JavaScript, continua a do sistema. */
main select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none;
  padding-right: var(--e-8); text-overflow: ellipsis; cursor: pointer;
}
main select:not([multiple]):not([size]),
main .cartao-lead .mover select {
  background-image: var(--seta-select); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}
main .cartao-lead .mover select { padding-right: var(--e-6); background-position: right 4px center; }

/* Filtro: o rótulo e o seletor numa peça só, com a cara do botão Comparar. */
label.filtro {
  display: inline-flex; flex-direction: row; align-items: center; gap: var(--fc-1); height: 36px; margin: 0;
  padding: 0 0 0 var(--e-3); border-radius: var(--r-controle); background: var(--realce);
  font-size: var(--t-2); font-weight: 500; color: var(--tinta-2); cursor: pointer; max-width: 100%;
  transition: background-color var(--dur-1) var(--curva);
}
label.filtro:hover { background: var(--realce-forte); }
label.filtro select {
  height: 36px; width: auto; min-width: 0; max-width: 260px; border: 0; background-color: transparent;
  padding-left: var(--e-1); font-size: var(--t-3); font-weight: 600; color: var(--tinta);
}
label.filtro select:hover { border: 0; }
label.filtro select:focus-visible { outline: none; }
label.filtro:has(select:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.linha-filtros { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin: 0 0 var(--e-4); }
.linha-filtros .periodo { flex-wrap: nowrap; }
.linha-filtros .periodo > a { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--e-3); }
.caixas-funil label.filtro { flex-direction: row; gap: var(--fc-1); font-size: var(--t-2); font-weight: 500; }
.caixas-funil label.filtro select { min-width: 0; height: 36px; }
@media (max-width: 900px) { label.filtro select { font-size: var(--t-4); } }
@media (max-width: 520px) {
  label.filtro, .caixas-funil label.filtro { width: 100%; }
  label.filtro select, .caixas-funil label.filtro select { flex: 1; width: auto; max-width: none; }
}

/* ── Kanban mais leve ───────────────────────────────────────────────────
   A coluna era um bloco cinza; agora é só o cabeçalho com um fio de 2 px em
   cima, na cor que a coluna tem (etiqueta do WhatsApp, ganho em verde, perda
   em cinza, a fila de novos no azul) e o nome. Os cartões ficam direto no
   fundo da tela. Cartão mais baixo: 10/12 de recuo, telefone e tempo numa
   linha só. */
.coluna-kanban { --cor-coluna: color-mix(in srgb, var(--tinta) 22%, transparent); background: transparent; border: 0; border-radius: 0; padding: 0; }
.coluna-kanban > header {
  border-top: 2px solid var(--cor-coluna); border-radius: 0;
  padding: var(--e-2) 0 var(--e-1); margin-bottom: var(--e-1);
}
.coluna-kanban .total { background: var(--realce-forte); color: var(--tinta-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.coluna-kanban.recebendo { background: color-mix(in srgb, var(--acento) 6%, transparent); border-radius: var(--r-controle); box-shadow: inset 0 0 0 1px var(--acento); }
.coluna-novo { --cor-coluna: var(--acento); background: transparent; border: 0; }
.coluna-fechamento, .coluna-fechamento.coluna-ganha { box-shadow: none; }
.coluna-fechamento { --cor-coluna: var(--tinta-3); }
.coluna-fechamento.coluna-ganha { --cor-coluna: var(--ok); }
.coluna-fechamento.coluna-ganha .nome { color: var(--ok-tx); }
.coluna-fechamento.recebendo { box-shadow: inset 0 0 0 1px var(--acento); }
.coluna-funil .soma-coluna { padding: 0 0 var(--e-2); }
@media (min-width: 901px) {
  .coluna-kanban > header { padding: var(--e-2) 0 var(--e-1); }
  .coluna-funil .soma-coluna { padding: 0 0 var(--e-2); }
  .coluna-kanban .cartoes { padding: var(--e-1) var(--e-1) var(--e-3); }
}

.cartao-lead { padding: var(--pad-cartao-p); border-radius: var(--r-controle); }
.cartao-lead .titulo { line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-lead .titulo.sem-nome { color: var(--tinta-2); font-weight: 400; }
.cartao-lead .tel { margin-top: 0; line-height: 18px; }
.cartao-lead .marcas:empty { display: none; }
.cartao-lead .marcas { margin-top: var(--e-2); }
.cartao-lead .rodape-cartao { margin-top: var(--e-2); min-height: 26px; }
.cartao-oport .linha-oport, .cartao-fechado .linha-oport { margin-top: var(--e-1); }
/* O seletor de mover (o caminho do teclado e sem JavaScript) ocupava uma linha
   vazia em todo cartão até a mão chegar. Agora, com mouse, ele aparece por cima
   do "responsável" do rodapé: o cartão não cresce nem pula. No toque fica à
   vista, numa linha própria, como antes. */
.cartao-oport > form.mover { margin-top: var(--e-1); }
@media (hover: hover) {
  .cartao-oport { position: relative; }
  .cartao-oport > form.mover { position: absolute; left: var(--e-3); right: 84px; bottom: 10px; margin: 0; pointer-events: none; }
  .cartao-oport > form.mover select { height: 26px; background-color: var(--papel); border-color: var(--linha); }
  .cartao-oport:hover > form.mover, .cartao-oport:focus-within > form.mover { pointer-events: auto; }
  .cartao-oport:hover .rodape-cartao .quando, .cartao-oport:focus-within .rodape-cartao .quando { visibility: hidden; }
}

/* ── VENDA COM DONO (specs/036, 15/10/2026) ─────────────────────────────
   Dono do lead com prazo de posse, Assumir, Oportunidade futura, Base de
   reaproveitamento, gargalo e ranking. Sem cor nova: o relógio usa as três
   que já significam algo (verde calmo, âmbar perto, vermelho atrasado). */
.relogio {
  /* relative: o texto para leitor de tela (.sr-only, absoluto) fica preso aqui;
     solto, escapava da rolagem do quadro e alargava a página no celular. */
  position: relative;
  display: inline-flex; align-items: center; gap: var(--e-1); height: 20px; padding: 0 var(--e-2) 0 var(--fc-2); flex: none;
  border-radius: var(--r-pill); font-size: var(--t-1); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.relogio svg { width: 12px; height: 12px; flex: none; }
.relogio.ok { background: var(--ok-bg); color: var(--ok-tx); }
.relogio.perto { background: var(--atencao-bg); color: var(--atencao-tx); }
.relogio.vencido { background: var(--alerta-bg); color: var(--alerta-tx); }
.linha-dono { display: flex; align-items: center; gap: var(--e-2); margin-top: var(--e-2); min-height: 22px; font-size: var(--t-1); }
.linha-dono .nome-dono { color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.linha-dono.sem-dono { justify-content: space-between; }
.linha-dono form { margin: 0; }
.cartao-lead .botao-cartao.assumir { border-color: color-mix(in srgb, var(--acento) 45%, var(--linha)); color: var(--acento); font-weight: 600; }
.cartao-lead .botao-cartao.assumir:hover { background: color-mix(in srgb, var(--acento) 8%, var(--papel)); border-color: var(--acento); }
.bloco-dono .linha-dono.sem-dono button { height: 32px; }
.cartao-lead .botao-cartao:active { transform: scale(.97); }
.cartao-lead form.form-retomar { margin: 0; }
.cartao-lead .botao-cartao.retomar { background: var(--botao); color: var(--botao-tx); border-color: transparent; font-weight: 600; }
.cartao-lead .botao-cartao.retomar:hover { background: var(--botao); box-shadow: inset 0 0 0 999px var(--veu-hover); }
/* Atrasado: um fio vermelho à esquerda do cartão, nada mais (o vermelho é só para atraso). */
.cartao-lead.atrasado { border-left: 3px solid var(--alerta); padding-left: calc(var(--pad-cartao-p) - 2px); }
.cartao-oport .rodape-cartao .quando .tag { vertical-align: middle; }

/* Oportunidade futura: o fio de cima tracejado diz "guardado para depois". */
.coluna-futura { --cor-coluna: var(--tinta-3); }
.coluna-futura > header { border-top-style: dashed; }
.coluna-futura.recebendo { box-shadow: inset 0 0 0 1px var(--acento); }
@media (hover: hover) {
  .cartao-futuro > form.mover { right: 124px; }
}

/* Filtro do quadro: Todos, Meus, Atrasados (no trilho das abas de período). */
.caixas-funil .filtro-quadro { flex: none; }
.filtro-quadro a { gap: var(--fc-2); }
.conta-atraso {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--fc-2);
  border-radius: var(--r-pill); background: var(--alerta-pilula); color: #fff; font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.filtro-legenda { margin: var(--e-3) 0 0; }
.link-base { display: inline-flex; align-items: center; gap: var(--e-1); margin: var(--e-2) 0 0; font-size: var(--t-1); }

/* Conversa: bloco do dono. */
.bloco-dono .linha-dono { margin-top: 0; font-size: var(--t-2); }
.bloco-dono .nome-dono { color: var(--tinta); font-weight: 500; }
.bloco-dono p.pequena { margin: var(--e-2) 0 0; font-size: var(--t-1); }
.oport-acoes .form-retomar { margin: 0; display: inline-flex; }

/* Configurações → Vendas: prazo do dono. */
.form-prazo label { margin-top: 0; }
.linha-prazo { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.linha-prazo input { width: 112px; }
.form-prazo .legenda { margin: var(--e-2) 0 0; }

/* Vendas: gargalo e ranking por pessoa. */
.gargalo { margin: 0 0 var(--e-3); padding: var(--e-3); border-radius: var(--r-controle); background: var(--recuo); border: 1px solid var(--linha); font-size: var(--t-2); color: var(--tinta); }
.gargalo .gargalo-rot { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--e-2); margin-right: var(--e-2); border-radius: var(--r-pill); background: var(--atencao-bg); color: var(--atencao-tx); font-size: var(--t-1); font-weight: 600; }
.gargalo.neutro { background: transparent; border: 0; padding: 0; }
.cartao-sec .caixa-etapa.no-gargalo { border-color: var(--atencao-tx); box-shadow: inset 0 0 0 1px var(--atencao-tx); }
.tabela-pessoas .posicao {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: var(--e-2);
  border-radius: var(--r-pill); background: var(--realce-forte); color: var(--tinta-2); font-size: var(--t-1); font-weight: 600; font-variant-numeric: tabular-nums;
}
.tabela-pessoas thead .pilula-tempo { margin-left: var(--e-1); vertical-align: middle; }
.atraso-pessoa { color: var(--alerta-tx); font-weight: 600; }

/* Base de reaproveitamento. */
.bloco-base { margin-top: var(--e-4); }
.tabela-base .acao-base { text-align: right; white-space: nowrap; }
.tabela-base form { margin: 0; }
.tabela-base button { height: 30px; }
.sec-sub-base { padding: var(--e-2) var(--e-6) var(--e-3); margin: 0; }
/* Linhas com o nome no th (leitor de tela) mas com cara de célula comum, como
   a tabela de produtos; números à direita. */
.tabela-pessoas tbody th, .tabela-base tbody th, .tabela-pessoas tfoot th {
  font-size: var(--t-3); font-weight: 500; color: var(--tinta); text-transform: none; letter-spacing: 0; white-space: normal;
}
.tabela-pessoas tfoot th, .tabela-pessoas tfoot td { font-weight: 600; border-top: 1px solid var(--linha); }
.tabela-pessoas .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-pessoas .sem-produto th { font-style: italic; font-weight: 400; color: var(--tinta-2); }
.tabela-base td { font-size: var(--t-2); }
.tabela-base .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-base tbody th a { text-decoration: none; }
.tabela-base tbody th a:hover { text-decoration: underline; }
/* O "Ação" escondido do cabeçalho (.sr-only) fica preso à célula: solto, saía da rolagem da tabela no celular. */
.tabela-base thead th { position: relative; }

/* ── CARTEIRA DA AGÊNCIA (specs/037, 15/10/2026) ───────────────────────
   Saúde do cliente na tela Clientes, faixa "ver como" e Exportar. Nenhuma cor
   nova: âmbar é atenção, vermelho é atraso, neutro é "em dia" (verde é venda). */
.th-com-ajuda { display: inline-flex; align-items: center; gap: var(--e-1); }
.tabela-clientes .celula-saude { min-width: 240px; }
.saude {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: 22px; padding: 0 var(--e-2); border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--realce); color: var(--tinta-2);
}
.saude::before { content: ''; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--tinta-3); flex: none; }
.saude.atencao { background: var(--atencao-bg); color: var(--atencao-tx); }
.saude.atencao::before { background: var(--atencao-tx); }
.saude.alerta { background: var(--alerta-bg); color: var(--alerta-tx); }
.saude.alerta::before { background: var(--alerta-tx); }
.selo-risco {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--e-2); margin-left: var(--e-1); border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--alerta-pilula); color: #fff;
}
.celula-saude .fatores { display: block; margin-top: var(--e-1); font-size: 13px; line-height: 18px; color: var(--tinta-2); }
.tabela-clientes tr.linha-risco td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.tabela-clientes td:last-child { white-space: nowrap; }

/* Faixa "ver como o cliente": presa no alto, acima da trilha (que desce 44 px). */
.faixa-ver-como {
  position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: var(--e-3);
  height: 44px; padding: 0 var(--e-3) 0 var(--e-4); background: var(--tinta); color: var(--tinta-tx); font-size: 14px;
}
.faixa-ver-como + .topo { top: 44px; }
.faixa-ver-como .ic { width: 16px; height: 16px; flex: none; }
.faixa-ver-como form { margin: 0; }
.fvc-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fvc-sair {
  height: 32px; padding: 0 var(--e-4); border: 0; border-radius: var(--r-controle); background: var(--papel); color: var(--tinta);
  font-size: 13px; font-weight: 600; transition: background-color 120ms cubic-bezier(.23,1,.32,1);
}
.fvc-sair:hover { background: var(--recuo); background-image: none; }
.fvc-sair:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.aviso-ver-como {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; margin: 0;
  max-width: calc(100vw - 32px); padding: var(--e-3) var(--e-4); border-radius: var(--r-controle); box-shadow: var(--elev-3);
  background: var(--tinta); color: var(--tinta-tx); font-size: 14px;
}
@media (max-width: 900px) {
  .faixa-ver-como { position: static; }
  .aviso-ver-como { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 620px) {
  .faixa-ver-como { height: auto; min-height: 44px; padding-block: var(--e-2); }
  .fvc-txt { white-space: normal; }
}

/* Exportar: o secundário do cabeçalho, com o ícone de baixar. */
a.botao.exportar { display: inline-flex; align-items: center; gap: var(--fc-2); }
a.botao.exportar svg { width: 16px; height: 16px; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   CARTÃO COM RELEVO E TELA CHEIA (15/10/2026). O Diego mostrou o ClickUp ("a
   interface é mais gostosa de mexer") e pediu três coisas: borda mais redonda,
   cartão que se destaca do fundo e a tela toda ocupada no computador. Os
   tokens de raio, fundo e sombra mudaram no topo do arquivo; aqui fica o que
   cada componente precisou a mais. Medidas em .interface-design/system.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* Raio: o que é cartão usa o raio de cartão (alguns usavam o de janela ou o
   de controle). */
.funil-config, .produto-config, .novo-produto, .escolha-funil, .erro { border-radius: var(--r-cartao); }
.cartao-lead, .caixa-etapa, .cartao-qualif, .item-fila { border-radius: var(--r-cartao); }
.cartao-sec .caixa-etapa { border-radius: var(--r-controle); }

/* Relevo: todo cartão leva a sombra curta. Botão e aba ativa não são cartão. */
.kpi, .faixa, .cartao-sec, .funil-config, .produto-config, .escolha-funil { box-shadow: var(--elev-1); }
button { box-shadow: none; }
.menu-datas.ativo > summary { box-shadow: 0 0 0 1px var(--linha); }

/* Tabela solta na tela vira cartão (Clientes, Leads, Configurações, Agenda...).
   A que já mora dentro de um cartão (.sec-tabela, etapas do funil) não muda. */
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-cartao);
  box-shadow: var(--elev-1); margin-bottom: var(--e-4);
}
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) th { padding-top: var(--e-3); }
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) tr > :first-child { padding-left: var(--e-4); }
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) tr > :last-child { padding-right: var(--e-4); }
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) tbody tr:last-child > * { border-bottom: 0; }
main .rolagem-x:has(> .tabela-horario) { max-width: 520px; }

/* Cartão clicável: sobe 1 px e a sombra abre, em 180 ms. Só com mouse (no
   toque o hover gruda). Arrastando, o cartão não sobe. */
.cartao-lead, .cartao-qualif, .item-fila, .numeros-qualif .cartao {
  transition: box-shadow var(--dur-2) var(--curva), transform var(--dur-2) var(--curva), border-color var(--dur-1) var(--curva);
}
@media (hover: hover) {
  .cartao-lead:hover, .cartao-qualif:hover, .item-fila:hover, .numeros-qualif .cartao:hover {
    transform: translateY(-1px); box-shadow: var(--elev-2);
  }
  .cartao-lead:hover { border-color: var(--linha-forte); }
}
.cartao-lead.arrastando { transform: none; box-shadow: var(--elev-1); }
/* A coluna do quadro rola por dentro: 6 px de folga dos lados para a sombra
   do cartão não ser cortada, sem mudar o alinhamento com o cabeçalho. */
@media (min-width: 901px) {
  .coluna-kanban .cartoes { padding: var(--e-1) var(--e-1) var(--e-3); margin-inline: calc(var(--e-1) * -1); }
}
@media (prefers-reduced-motion: reduce) {
  .cartao-lead:hover, .cartao-qualif:hover, .item-fila:hover, .numeros-qualif .cartao:hover { transform: none; }
}

/* Tela cheia: o miolo não tem mais largura máxima (era 1120 px). Tabela, quadro,
   faixa e grade crescem com a tela; texto corrido para em 75 caracteres. */
main > p, main > .legenda, .cab-tela .legenda, .intro-aba { max-width: 75ch; }
/* Caixas de etapa (Vendas, 16/10/2026): esticam e dividem a linha inteira do
   cartão. Com auto-fill sobravam colunas vazias à direita em tela larga (8
   etapas paravam no meio do cartão); com auto-fit as vazias somem. */
.grade-funil { grid-template-columns: repeat(auto-fit, minmax(156px, 1fr)); }

/* ══ NAVEGAÇÃO PELO FUNIL (specs/038, 16/10/2026) ═════════════════════════
   Princípio do ClickUp, nunca a marca: lateral em dois níveis (trilho escuro
   com os módulos + painel claro com os funis e atalhos contados), tela Funil
   com abas e uma barra só de agrupar e filtrar, e o painel do lado que abre
   ao clicar no cartão. Cores: só os tokens do topo. */

:root { --trilho-larg: 84px; --painel-lat-larg: 228px; }

@media (min-width: 901px) {
  .lateral {
    width: auto; flex: 0 0 auto; padding: 0; gap: 0; flex-direction: row;
    background: var(--recuo); color: var(--tinta); color-scheme: normal; border-right: 1px solid var(--linha); overflow: visible;
  }
}

/* Trilho: módulos com ícone em cima do nome. */
.trilho {
  width: var(--trilho-larg); flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--e-1);
  padding: var(--e-3) var(--e-2); background: var(--lateral); color: var(--lateral-tx); color-scheme: dark;
  overflow-y: auto; scrollbar-width: none;
}
.marca-mini {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; margin-bottom: var(--e-2);
  border-radius: var(--r-controle); background: var(--marca); color: var(--lateral); text-decoration: none;
  font: 700 18px/1 var(--f-titulo);
}
.marca-mini:hover { filter: brightness(1.06); }
.t-item {
  position: relative; width: 72px; min-height: 54px; flex: none; display: grid; justify-items: center; align-content: center; gap: var(--e-1);
  padding: var(--fc-2) var(--fc-1); border-radius: var(--r-controle); color: var(--lateral-tx-2); text-decoration: none;
  font-size: var(--t-1); font-weight: 500; line-height: 1.15;
  transition: background-color var(--dur-1, 120ms) var(--curva), color var(--dur-1, 120ms) var(--curva);
}
.t-item .ic { width: 20px; height: 20px; }
.t-item:hover { background: var(--lateral-realce); color: var(--lateral-tx); }
.t-item:active { transform: scale(.97); }
.t-item.ativo { background: var(--lateral-ativo); color: var(--lateral-ativo-tx); font-weight: 600; }
.t-item.ativo .ic { color: var(--marca); }
.t-item.ativo::before {
  content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 0 var(--r-pill) var(--r-pill) 0; background: var(--marca);
}
.t-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-conta {
  position: absolute; top: 3px; left: calc(50% + 4px); min-width: 18px; height: 18px; padding: 0 var(--fc-2);
  border-radius: var(--r-pill); background: var(--alerta-pilula); color: #fff;
  font-size: var(--t-1); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.trilho :focus-visible { outline: 2px solid var(--marca); outline-offset: 0; }
.trilho-pe {
  margin-top: auto; width: 100%; display: grid; justify-items: center; gap: var(--e-1);
  padding-top: var(--e-2); border-top: 1px solid var(--lateral-linha);
}
.trilho-pe .t-conta-item { min-height: 40px; }
.trilho-pe .inicial {
  width: 26px; height: 26px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.14); color: var(--lateral-tx); font-size: var(--t-1); font-weight: 600;
}
.trilho-pe form { margin: 0; }
.trilho-pe .sair {
  width: 40px; height: 36px; padding: 0; display: grid; place-items: center;
  background: transparent; color: var(--lateral-tx-2); border-radius: var(--r-controle);
}
.trilho-pe .sair:hover { background: var(--lateral-realce); color: var(--lateral-tx); filter: none; }
.trilho-pe .sair svg { width: 16px; height: 16px; }

/* O painel claro de verticais (cliente, funis e atalhos) saiu na specs/039: o
   funil se escolhe no topo da tela Funil e o cliente fica na faixa do alto. */

/* Topo do Funil: abas e a barra única. */
.cab-funil { margin-bottom: var(--e-3); }
.abas-funil {
  display: flex; gap: var(--e-1); margin: 0 0 var(--e-3); border-bottom: 1px solid var(--linha);
  overflow-x: auto; scrollbar-width: none;
}
.aba-funil {
  display: inline-flex; align-items: center; gap: var(--fc-2); flex: none; padding: var(--e-2) var(--e-3); margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--tinta-2); text-decoration: none; font-size: var(--t-3); font-weight: 500; white-space: nowrap;
  transition: color var(--dur-1, 120ms) var(--curva), border-color var(--dur-1, 120ms) var(--curva);
}
.aba-funil svg { flex: none; }
.aba-funil:hover { color: var(--tinta); border-bottom-color: var(--linha-forte); }
.aba-funil.ativa { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento); }
.aba-n {
  min-width: 20px; padding: 0 var(--fc-2); border-radius: var(--r-pill); background: var(--realce);
  font-size: var(--t-1); font-weight: 600; line-height: 18px; text-align: center; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.barra-funil { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-4); }
.filtro-funil {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: 32px; padding: 0 var(--e-3); cursor: pointer; list-style: none;
  border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel);
  color: var(--tinta-2); font-size: var(--t-2); font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-1, 120ms) var(--curva), color var(--dur-1, 120ms) var(--curva), background-color var(--dur-1, 120ms) var(--curva);
}
summary.filtro-funil::-webkit-details-marker { display: none; }
.filtro-funil b { color: var(--tinta); font-weight: 600; }
.filtro-funil .seta-menu { font-size: var(--t-1); color: var(--tinta-3); }
.filtro-funil:hover { border-color: var(--tinta-3); color: var(--tinta); }
.filtro-funil:active { transform: scale(.97); }
.filtro-funil.ligado { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.filtro-funil.ligado b { color: inherit; }
.filtro-funil .cnt {
  min-width: 18px; padding: 0 var(--fc-2); border-radius: var(--r-pill); background: var(--alerta-pilula); color: #fff;
  font-size: var(--t-1); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.menu-agrupar { position: relative; }
.menu-agrupar[open] > summary { border-color: var(--tinta-3); color: var(--tinta); }
.menu-agrupar .menu-painel { left: 0; right: auto; top: 38px; width: 200px; padding: var(--e-2); transform-origin: top left; z-index: 30; }
.sep-barra { width: 1px; height: 20px; background: var(--linha); margin: 0 var(--e-1); }
.limpar-funil { padding: 0 var(--e-1); font-size: var(--t-2); color: var(--acento); }
.barra-fim { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }
.barra-funil .barra-quadro { display: flex; gap: var(--e-1); }
.barra-funil .periodo { flex-wrap: nowrap; }
.so-celular { display: none; }
@media (max-width: 900px) {
  .so-celular { display: block; width: 100%; }
  .vertical-celular .caixas-funil { margin: 0; }
  .barra-funil .barra-quadro { display: none; }
}
/* O topo novo é mais baixo que o de antes (título + caixa Vertical + filtro). */
@media (min-width: 901px) { .quadro { height: calc(100vh - 44px - 236px); } }

/* Quadro agrupado por dono ou origem: o cartão diz a etapa dele. */
.coluna-grupo { --cor-coluna: color-mix(in srgb, var(--tinta) 22%, transparent); }
.coluna-sem-chave { --cor-coluna: var(--tinta-3); }
.coluna-grupo header { display: flex; align-items: center; gap: var(--e-2); }
.avatar-dono {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--realce-forte); color: var(--tinta); font-size: var(--t-1); font-weight: 700;
}
.etapa-cartao { margin-top: var(--e-1); font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); }
.quadro-agrupado .cartao-lead { cursor: pointer; }

/* Lista: os mesmos cartões em linhas, um cartão por grupo. */
.lista-funil { display: grid; gap: var(--e-4); }
.grupo-lista { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-cartao); box-shadow: var(--elev-1); overflow: hidden; }
main .grupo-cab {
  display: flex; align-items: center; gap: var(--e-2); margin: 0; padding: var(--e-3) var(--e-4) var(--e-2);
  font: 600 var(--t-4)/1.3 var(--f-titulo); letter-spacing: -0.01em;
}
.ponto-grupo { width: 8px; height: 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tinta) 30%, transparent); }
.grupo-novo .ponto-grupo { background: var(--acento); }
.grupo-ganha .ponto-grupo { background: var(--ok); }
.grupo-n {
  min-width: 22px; padding: 0 var(--fc-2); border-radius: var(--r-pill); background: var(--realce); color: var(--tinta-2);
  font: 600 var(--t-1)/20px var(--f-corpo); text-align: center; font-variant-numeric: tabular-nums;
}
.grupo-nota { font: 500 var(--t-1) var(--f-corpo); }
.rolagem-lista { overflow-x: auto; }
.tabela-funil { width: 100%; min-width: 680px; border-collapse: collapse; font-size: var(--t-3); }
.tabela-funil th, .tabela-funil td { padding: var(--e-2) var(--e-3); text-align: left; vertical-align: middle; border-top: 1px solid var(--linha); background: none; }
.tabela-funil thead th { padding-top: 0; padding-bottom: var(--e-2); border-top: 0; font-size: var(--t-1); font-weight: 600; color: var(--tinta-3); text-transform: none; letter-spacing: 0; }
.tabela-funil th:first-child, .tabela-funil td:first-child { padding-left: var(--e-4); }
.tabela-funil th:last-child, .tabela-funil td:last-child { padding-right: var(--e-4); }
.tabela-funil .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela-funil tbody th { font-weight: 400; }
.linha-lead { cursor: pointer; transition: background-color var(--dur-1, 120ms) var(--curva); }
.linha-lead:hover { background: var(--realce); }
.linha-lead.atrasado > th:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.col-lead .titulo { color: var(--tinta); font-weight: 600; text-decoration: none; }
.col-lead .titulo:hover { text-decoration: underline; }
.col-lead .titulo.sem-nome { color: var(--tinta-2); font-weight: 400; }
.tel-linha { display: block; font-size: var(--t-1); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.col-dono { white-space: nowrap; }
.col-dono .relogio { margin-right: var(--e-2); }
.valor-ganho { color: var(--ok-tx); font-weight: 600; }
.vazia-lista { margin: 0; }
.linha-lead.espiado { background: var(--realce); }
.linha-lead.espiado > th:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.cartao-lead.espiado { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento), var(--elev-2); }

/* Painel do lado. */
.espiar {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(400px, 100vw);
  display: flex; flex-direction: column; background: var(--papel); color: var(--tinta);
  border-left: 1px solid var(--linha); box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .35);
  transform: translateX(100%); transition: transform 220ms var(--curva);
}
.espiar[hidden] { display: none !important; }
.espiar.aberto { transform: none; }
.espiar-cab { position: relative; display: grid; gap: var(--e-2); padding: var(--e-6) var(--e-6) var(--e-4); border-bottom: 1px solid var(--linha); }
.espiar .espiar-x {
  position: absolute; top: var(--e-4); right: var(--e-4); width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border-radius: var(--r-controle); background: transparent; color: var(--tinta-3);
}
.espiar .espiar-x:hover { background: var(--realce); color: var(--tinta); background-image: none; }
main .espiar h2, .espiar h2 { margin: 0; padding-right: var(--e-8); font: 700 20px/1.2 var(--f-titulo); letter-spacing: -0.01em; outline: none; }
.espiar-tel { margin: 0; font-size: var(--t-2); color: var(--tinta-2); }
.espiar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); font-size: var(--t-2); color: var(--tinta-2); }
.espiar-meta .relogio { margin-left: 0; }
.espiar-corpo { flex: 1; overflow-y: auto; display: grid; gap: var(--e-2); align-content: start; padding: var(--e-6); }
.espiar-corpo p { margin: 0; }
.espiar-rotulo { margin: var(--e-2) 0 0; font: 600 var(--t-1)/1.3 var(--f-corpo); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.espiar-rotulo:first-child { margin-top: 0; }
.espiar-msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.espiar-bolha { max-width: 88%; display: grid; gap: var(--e-1); padding: var(--e-2) var(--e-3); border-radius: var(--r-cartao); font-size: var(--t-2); line-height: 1.45; overflow-wrap: anywhere; }
.espiar-bolha.deles { justify-self: start; background: var(--bolha-deles); border: 1px solid var(--linha); }
.espiar-bolha.nossa { justify-self: end; background: var(--bolha-minha); color: var(--bolha-minha-tx); }
.espiar-bolha.nossa .espiar-hora { color: color-mix(in srgb, var(--bolha-minha-tx) 75%, var(--bolha-minha)); }
.espiar-hora { font-size: var(--t-1); color: var(--tinta-3); }
.espiar-agendar { display: grid; gap: var(--e-2); margin-top: var(--e-2); padding: var(--e-3); background: var(--recuo); border: 1px solid var(--linha); border-radius: var(--r-cartao); }
.espiar-agendar[hidden] { display: none; }
.espiar-agendar label { margin: 0; }
.espiar-pe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); padding: var(--e-4) var(--e-6); border-top: 1px solid var(--linha); }
.espiar-pe form { margin: 0; }
.espiar-pe .espiar-mover select { height: 36px; max-width: 190px; }
.espiar-carregando, .espiar-erro { padding: var(--e-6); color: var(--tinta-2); display: grid; gap: var(--e-3); justify-items: start; }
@media (max-width: 620px) {
  .espiar { top: auto; height: min(88vh, 720px); width: 100vw; border-left: 0; border-top: 1px solid var(--linha); border-radius: var(--r-janela) var(--r-janela) 0 0; transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .espiar { transition: none; } }
/* O título recebe o foco ao abrir (leitor de tela começa por ele); sem anel. */
.espiar h2:focus, .espiar h2:focus-visible { outline: none; box-shadow: none; }
/* Cliente único (sem seletor): o nome não encosta na borda (no celular o
   `.lateral .seletor { padding: 0 }` tirava o recuo da caixa também). */
.painel-lat .seletor.so-um { padding: 0 var(--e-3); }
@media (max-width: 900px) { .sep-barra { display: none; } }
@media (max-width: 620px) { .espiar { height: auto; max-height: min(88vh, 720px); } }

/* ══ FUNIS E RECUPERAÇÃO (specs/039, 16/10/2026) ═════════════════════════════
   Estrutura, hierarquia e comportamento do VendaTech (docs/referencias/
   vendatech.md, seções 4 e 5), nunca a marca nem as cores dele: a paleta segue
   a do topo. (1) Escala: título de página 18/600, título de cartão 16/600, aba
   14/500, controle 12/500, cabeçalho de coluna em caixa alta. (2) Botão
   principal escuro de 32 px (a tinta); a cor da marca fica para o
   ativo (aba, filtro ligado, estrela, item de Configurações). (3) Lateral só
   com o trilho; o cliente vai para a faixa do alto. (4) Topo do funil com
   seletor, estrela e linha de filtros escondida. (5) Configurações numa coluna
   com busca. (6) Recuperação. */

:root {
  --botao: var(--tinta);
  --botao-tx: var(--tinta-tx);
  --t-titulo-pagina: 18px;
}
:root[data-tema="escuro"] {
  --botao: var(--tinta);
  --botao-tx: var(--tinta-tx);
}

/* ── Escala ── */
.cab-tela h1, .cab-funil h1 {
  font-family: var(--f-titulo); font-size: var(--t-titulo-pagina); line-height: 28px; font-weight: 600; letter-spacing: 0;
}
h1 { font-size: var(--t-titulo-pagina); line-height: 28px; font-weight: 600; letter-spacing: 0; }
main h2, .sec-titulo { font-size: var(--t-4); line-height: 24px; font-weight: 600; letter-spacing: 0; }
.cab-tela { margin-bottom: var(--e-4); }

/* Botões, filtros e controles: 12/500, 32 px, raio 8. O principal é escuro. */
button, a.botao, .cab-acoes > a.botao, a.botao.discreto {
  height: 32px; padding: 0 var(--e-3); font-size: var(--t-1); font-weight: 500; line-height: 16px;
  border-radius: var(--r-controle); box-shadow: none; gap: var(--fc-2);
}
a.botao { display: inline-flex; align-items: center; }
a.botao svg, button svg { flex: none; }
.cab-acoes > a.botao, a.botao.discreto { font-weight: 500; }
button.mini { height: 26px; }
.filtro-funil { height: 32px; font-size: var(--t-1); font-weight: 500; }

/* Cabeçalho da coluna do quadro em caixa alta (14/600, espaçamento .35 px). */
.coluna-kanban header .nome { text-transform: uppercase; letter-spacing: .35px; font-size: var(--t-3); font-weight: 600; }

/* ── Lateral: só o trilho ── */
@media (min-width: 901px) {
  .lateral { background: var(--lateral); border-right: 0; }
  .marca-topo { display: none; }
}
.seletor-topo { padding: 0; margin: 0; flex: none; display: flex; align-items: center; gap: var(--e-2); }
.seletor-topo select, .seletor-topo select:hover {
  height: 30px; max-width: 240px; padding: 0 var(--e-8) 0 var(--e-2); font-size: var(--t-1); font-weight: 600;
  background-color: var(--papel); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--r-controle);
}
.seletor-topo select:hover { border-color: var(--linha-forte); }
.seletor-topo select option { background: var(--papel); color: var(--tinta); }
.marca-topo { color: var(--lateral-tx); text-decoration: none; font: 600 var(--t-4)/1 var(--f-titulo); flex: none; }
.marca-topo b { color: var(--marca); font-weight: 600; }
@media (max-width: 900px) {
  /* Celular: a lateral some (o menu é a barra de baixo) e a faixa do alto é o
     topo, na cor da moldura, com a marca e o cliente. */
  .lateral { display: none; }
  .topo {
    display: flex; height: auto; min-height: 52px; position: sticky; top: 0; z-index: 20;
    padding: var(--e-2) var(--e-4); padding-top: calc(var(--e-2) + env(safe-area-inset-top, 0px));
    background: var(--lateral); color: var(--lateral-tx); border-bottom: 1px solid var(--lateral-linha); color-scheme: dark;
    justify-content: space-between;
  }
  .topo .trilha, .topo .botao-tema { display: none; }
  .seletor-topo { min-width: 0; flex: 0 1 auto; }
  .seletor-topo select, .seletor-topo select:hover {
    max-width: min(60vw, 240px); background-color: var(--lateral-campo); color: var(--lateral-tx); border-color: var(--lateral-campo-linha);
  }
  .seletor-topo select option { background: var(--lateral); color: var(--lateral-tx); }
}

/* ── Topo da tela Funil: seletor, estrela, contador e filtros ── */
.abas-funil { margin-bottom: var(--e-4); }
.aba-funil { font-size: var(--t-3); font-weight: 500; }
.aba-funil.ativa { font-weight: 500; color: var(--tinta); border-bottom-color: var(--acento); }
.aba-funil.ativa svg { color: var(--acento); }
.cab-funil { margin: 0 0 var(--e-3); }
.cab-funil-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); flex-wrap: wrap; min-height: 36px; }
.cab-funil-titulo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; flex-wrap: wrap; }
.cab-funil h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-funil .legenda { margin: var(--e-1) 0 0; color: var(--tinta-2); }
.seletor-funil { position: relative; min-width: 0; }
.seletor-funil-botao {
  display: inline-flex; align-items: center; gap: var(--e-2); height: 36px; max-width: min(360px, 70vw); padding: 0 var(--e-3) 0 var(--e-4);
  border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel); cursor: pointer; list-style: none;
  box-shadow: var(--elev-1); transition: border-color var(--dur-1) var(--curva);
}
.seletor-funil-botao::-webkit-details-marker { display: none; }
.seletor-funil-botao h1 { font-size: var(--t-3); line-height: 20px; }
.seletor-funil-botao svg { color: var(--tinta-3); flex: none; transition: transform var(--dur-2) var(--curva); }
.seletor-funil-botao:hover { border-color: var(--linha-forte); }
.seletor-funil[open] .seletor-funil-botao svg { transform: rotate(180deg); }
.seletor-funil .menu-painel { left: 0; right: auto; top: 42px; width: min(320px, 86vw); padding: var(--e-2); z-index: 40; transform-origin: top left; }
.menu-titulo { margin: 0; padding: var(--e-2) var(--e-2) var(--e-1); font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.opcao-funil { display: flex; align-items: center; gap: var(--e-2); }
.of-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-estrela { color: var(--acento); display: inline-flex; }
.of-tag { flex: none; }
.of-n { flex: none; font-size: var(--t-1); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.opcao-funil.ativo { font-weight: 600; color: var(--tinta); }
.form-estrela, .form-fixar { margin: 0; display: inline-flex; }
.botao-icone, .botao-icone:hover {
  height: 32px; min-width: 32px; padding: 0 var(--e-2); display: inline-flex; align-items: center; justify-content: center; gap: var(--fc-2);
  background: var(--papel); color: var(--tinta-2); border: 1px solid var(--linha); border-radius: var(--r-controle);
}
.botao-icone:hover { color: var(--tinta); border-color: var(--linha-forte); background-image: none; background: color-mix(in srgb, var(--tinta) 5%, var(--papel)); }
.botao-icone.marcada, .botao-icone.ligado {
  color: var(--acento); border-color: color-mix(in srgb, var(--acento) 45%, var(--linha));
  background: color-mix(in srgb, var(--acento) 9%, var(--papel));
}
.contador-funil { font-size: var(--t-1); font-weight: 500; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.botao-filtros { display: none; }
.filtros-js .botao-filtros { display: inline-flex; }
.bf-nome { font-size: var(--t-1); font-weight: 500; }
.cnt-filtros {
  min-width: 18px; padding: 0 var(--fc-2); border-radius: var(--r-pill); background: var(--acento); color: var(--acento-tx);
  font-size: var(--t-1); font-weight: 600; line-height: 18px; text-align: center;
}
.barra-funil[hidden] { display: none; }
.filtro-funil svg { color: var(--tinta-3); }
.filtro-funil.ligado { background: var(--acento); border-color: var(--acento); color: var(--acento-tx); }
.filtro-funil.ligado svg { color: inherit; }
.filtro-funil .cnt { background: var(--realce-forte); color: var(--tinta); font-weight: 600; }
.filtro-funil .cnt.urgente { background: var(--alerta-pilula); color: #fff; }
.filtro-funil.ligado .cnt { background: var(--papel); color: var(--acento); }
@media (max-width: 620px) {
  .cab-funil-linha { align-items: flex-start; }
  .cab-funil .cab-acoes { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .cab-funil .cab-acoes > *, .cab-funil .cab-acoes > a.botao { width: auto; flex: none; }
  .contador-funil { width: 100%; }
  .bf-nome { display: none; }
}

/* ── Configurações: coluna com busca e grupos ── */
.config-grade { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.config-miolo { min-width: 0; }
.config-nav { position: sticky; top: 60px; }
.config-nav-resumo { display: none; }
.config-busca { position: relative; margin-bottom: var(--e-3); }
.config-busca svg { position: absolute; left: var(--e-2); top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.config-busca input { width: 100%; height: 34px; padding: 0 var(--e-2) 0 var(--e-8); font-size: var(--t-2); }
.cfg-grupo { margin-bottom: var(--e-4); }
.cfg-grupo[hidden] { display: none; }
.cfg-grupo-tit { margin: 0 0 var(--e-2); padding: 0 var(--e-2); font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.cfg-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.cfg-grupo li[hidden] { display: none; }
.cfg-item {
  display: flex; align-items: center; min-height: 32px; padding: var(--e-1) var(--e-2); border-radius: var(--r-controle);
  color: var(--tinta-2); text-decoration: none; font-size: var(--t-3);
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.cfg-item:hover { background: var(--realce); color: var(--tinta); }
.cfg-item.ativo { background: color-mix(in srgb, var(--acento) 10%, var(--fundo)); color: var(--acento); font-weight: 500; }
.cfg-nada { margin: var(--e-2); color: var(--tinta-3); font-size: var(--t-2); }
.config-miolo > .intro-aba:first-child { margin-top: 0; }
.config-miolo .titulo-bloco.intro-aba h2 { margin-top: 0; }
.nota-produtos { margin-top: var(--e-6); }
.linha-aparencia { margin: var(--e-2) 0 var(--e-6); }
.linha-aparencia .botao-tema { position: static; }
@media (max-width: 900px) {
  .config-grade { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .config-nav { position: static; border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--papel); box-shadow: var(--elev-1); }
  .config-nav-resumo {
    display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 var(--e-4); cursor: pointer; list-style: none;
    font-size: var(--t-3); color: var(--tinta-2);
  }
  .config-nav-resumo::-webkit-details-marker { display: none; }
  .config-nav-resumo::after { content: '▾'; color: var(--tinta-3); font-size: var(--t-1); }
  .config-nav[open] .config-nav-resumo::after { content: '▴'; }
  .config-nav-resumo b { color: var(--tinta); font-weight: 600; }
  .config-nav > nav { padding: 0 var(--e-3) var(--e-3); }
}

/* ── Recuperação ── */
.vazio-guiado {
  max-width: 680px; margin: var(--e-2) auto var(--e-6); padding: var(--e-8) var(--pad-bloco); text-align: center;
  border: 1px dashed var(--linha-forte); border-radius: var(--r-cartao); background: var(--papel);
}
.vazio-guiado h2 { margin: var(--e-4) 0 var(--e-1); }
.vazio-guiado > .legenda { margin: 0 auto; max-width: 52ch; }
.vazio-icone {
  width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: var(--r-cartao);
  background: color-mix(in srgb, var(--acento) 10%, var(--papel)); color: var(--acento);
}
.passos-guia { counter-reset: passo; list-style: none; margin: var(--e-6) auto var(--e-4); padding: 0; max-width: 520px; text-align: left; display: grid; gap: var(--e-3); }
.passos-guia li { counter-increment: passo; position: relative; padding-left: var(--e-8); line-height: 22px; }
.passos-guia li::before {
  content: counter(passo); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: var(--t-1); font-weight: 600;
  background: color-mix(in srgb, var(--acento) 10%, var(--papel)); color: var(--acento);
}
.vazio-guiado .legenda.pequena { max-width: 56ch; margin: 0 auto var(--e-4); }
.botao-mais span { font-size: var(--t-4); line-height: 1; }
.cartao-sec.rec-filtros, .cartao-sec.rec-previa, .cartao-sec.rec-rodadas { margin-bottom: var(--e-4); }
.form-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-3); align-items: end; }
.campo-rec { display: grid; gap: var(--e-2); min-width: 0; margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); }
.campo-rec select, .campo-rec input { width: 100%; min-width: 0; }
.acoes-rec { display: flex; align-items: end; }
/* Escolha de vários (motivo, etapa, dono, etiqueta): <details> com a cara do
   seletor (36 px, fio, seta) e um painel de caixas de marcar que abre por cima
   do resto. O cartão deixa o painel sair dele (o resto dos .cartao-sec corta). */
.cartao-sec.rec-filtros { overflow: visible; }
.escolha-varios { position: relative; min-width: 0; font-size: var(--t-3); font-weight: 400; }
.escolha-varios > summary {
  list-style: none; cursor: pointer; user-select: none;
  height: 36px; display: flex; align-items: center; padding: 0 var(--e-8) 0 var(--e-4);
  color: var(--tinta); background: var(--papel) var(--seta-select) no-repeat right 8px center / 16px;
  border: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent); border-radius: var(--r-controle);
}
.escolha-varios > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.escolha-varios > summary::-webkit-details-marker { display: none; }
.escolha-varios > summary:hover { border-color: color-mix(in srgb, var(--tinta) 28%, transparent); }
.escolha-varios > summary.marcado { font-weight: 500; border-color: var(--acento); }
.escolha-varios .menu-painel {
  left: 0; right: auto; top: 40px; width: max(100%, 220px); max-width: calc(100vw - 32px);
  max-height: 280px; overflow-y: auto; margin: 0; padding: var(--e-2); transform-origin: top left; z-index: 30;
}
.opcao-varios {
  display: flex; align-items: center; gap: var(--e-2); min-height: 32px; margin: 0; padding: var(--e-1) var(--e-2);
  border-radius: var(--r-controle); font-size: inherit; color: var(--tinta); cursor: pointer;
}
.campo-rec .opcao-varios input { width: 16px; height: 16px; margin: 0; }
.opcao-varios:hover { background: var(--realce); }
.opcao-varios span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .escolha-varios { font-size: var(--t-4); } }
.rec-resumo { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-3); }
.rec-num { flex: 1 1 200px; padding: var(--e-3) var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--recuo); display: grid; gap: var(--e-1); }
.rec-num .rotulo { font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); }
.rec-num b { font-size: var(--t-5); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-num.entram b { color: var(--ok-tx); }
.rec-num .nota { font-size: var(--t-1); color: var(--tinta-2); }
.rec-sub { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-3); }
.tabela-rec td, .tabela-rec th { white-space: nowrap; }
.tabela-rec td:first-child { white-space: normal; min-width: 160px; }
.ganho-valor { color: var(--ok-tx); font-weight: 600; }
.form-confirmar-rec { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.form-confirmar-rec .linha-config { flex-wrap: wrap; }
.acoes-rodada form { margin: 0; }
.form-nao-receber { margin-top: var(--e-3); }
.form-nao-receber .legenda { margin: 0 0 var(--e-2); }

/* Contraste remedido na 039 (medidor em todo texto visível, 16/10/2026): três
   textos do tema claro ficavam abaixo de 4,5:1 e agora usam as versões de texto
   das cores. Contador vermelho da Agenda 4,27 → 5,2 (pílula); "Ação atrasada"
   da faixa de Vendas 4,27 → 6,4 (alerta-tx); aviso do produto sem oferta
   3,4 → 5,1 (atencao-tx). */
.titulo-agenda .conta.urgente { background: var(--alerta-pilula); color: #fff; }
.fx.atrasou .fx-val { color: var(--alerta-tx); }
.aviso-produto { color: var(--atencao-tx); }
.cartao-opcao .titulo-bloco h2, .cartao-opcao > h2:first-child { margin-top: 0; }

/* ══ ACABAMENTO: O CONTRATO DE LAYOUT (specs/040, 16/10/2026) ════════════════
   "Banho de loja" pedido pelo Diego: coerência de bordas, alturas e eixos em
   todas as telas logadas. O contrato está escrito em .interface-design/
   system.md ("Contrato de layout"); aqui ele vira regra. Vale por cima de tudo
   o que veio antes, por isso fica no fim.
   (1) Uma altura de controle: 32 px (--ctl) para botão, campo, seletor, filtro
       e aba de segmento. Controles irmãos numa linha têm a mesma altura e o
       mesmo centro.
   (2) Duas larguras de tela: "tela cheia" (Painel, Funil, Conversas, Agenda,
       Vendas, Relatórios, Tráfego, Qualificação, Clientes) e "coluna"
       (Configurações: 880 px de miolo). Dentro de uma tela todo bloco começa
       na mesma borda esquerda e, sendo bloco, termina na mesma borda direita.
   (3) A faixa do alto começa na mesma borda do conteúdo.
   (4) Ícone e texto no mesmo eixo: ícone de 16 px em flex com align-items
       center, nunca alinhado pela linha de base. */

:root {
  --ctl: 32px; --col-config: 880px;
  /* Seta do seletor de cliente sobre a moldura escura (celular). */
  --seta-select-escura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ffffffb8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
}

/* (1) Altura única de controle nas telas logadas. A entrada (sem .app) fica
   como está. Checkbox, rádio e área de texto não são controles de linha. */
/* Especificidade baixa de propósito (:where): regra de um componente que
   pede outra altura continua valendo e aparece na auditoria. Botão já é 32
   desde a 039; faltavam campo e seletor (36) e o botão de tabela (30). */
.app :where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=color]), select:not([multiple], [size])) {
  height: var(--ctl);
}
td button, td a.botao { height: var(--ctl); }
button.mini { height: 28px; min-width: 28px; }
.config-busca input { height: var(--ctl); }
label.filtro, label.filtro select, .caixas-funil label.filtro select { height: var(--ctl); }
.escolha-funil .caixa-escolha select, .caixas-funil select, .bloco-detalhe select, .espiar-pe .espiar-mover select { height: var(--ctl); }
.marco-fixo { height: var(--ctl); }
.followup-marcado button, .situacao-fila .form-cadencia button, .fila-qualif.compacta .acoes-qualif button { height: var(--ctl); }
.tabela-horario input[type="time"] { height: var(--ctl); }
.seletor-funil-botao { height: var(--ctl); }
.seletor-funil .menu-painel, .barra-periodo .menu-comparar .menu-painel { top: calc(var(--ctl) + 6px); }
/* Período: trilho de 32 com abas de 28; o Comparar ao lado com os mesmos 32. */
.periodo { min-height: var(--ctl); padding: var(--fc-1); align-items: center; }
.periodo > a, .periodo .menu-datas > summary { height: calc(var(--ctl) - 4px); }
.barra-periodo .menu-comparar > summary { height: var(--ctl); }
/* Campo e botão lado a lado: mesmo centro. */
.app form:has(> input + button), .app form:has(> select + button) { align-items: center; }

/* (2) Coluna de Configurações: um miolo de 880 px, e tudo que é bloco dentro
   dele vai de borda a borda dessa coluna (aviso, cartão, tabela, texto de
   ajuda, separador). Texto não passa da coluna; cartão não para no meio. */
.config-miolo { max-width: var(--col-config); }
.config-grade .config-miolo :is(div, p, form, section, table, details, ul, ol, fieldset, hr):not(.ajuda-txt, .menu-painel, .menu-painel *, .ajuda *) {
  max-width: none;
}
.config-grade .config-miolo :is(.intro-aba, .legenda, p) { max-width: none; }
.config-miolo > :is(hr, .separador) { margin-left: 0; margin-right: 0; }

/* (3) A faixa do alto alinha com o conteúdo (a margem do main). */
@media (min-width: 901px) {
  .topo { padding: 0 var(--margem-tela); }
  main { padding-left: var(--margem-tela); padding-right: var(--margem-tela); }
}

/* Seletor de cliente na faixa do alto: a mesma seta própria dos seletores do
   miolo, centrada no eixo do texto (a seta do sistema ficava baixa e grossa). */
.seletor-topo select, .seletor-topo select:hover {
  appearance: none; -webkit-appearance: none; height: var(--ctl); line-height: normal;
  background-image: var(--seta-select); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
  padding: 0 var(--e-8) 0 var(--e-3); text-overflow: ellipsis; cursor: pointer;
}
@media (max-width: 900px) {
  .seletor-topo select, .seletor-topo select:hover { background-image: var(--seta-select-escura); }
}

/* (4) Itens da coluna de Configurações com ícone de linha (16 px), como o
   trilho; ativo pinta o ícone na cor do ativo. */
.cfg-item { gap: var(--e-2); }
.cfg-item .ic { width: 16px; height: 16px; flex: none; color: var(--tinta-3); transition: color var(--dur-1) var(--curva); }
.cfg-item:hover .ic { color: var(--tinta-2); }
.cfg-item.ativo .ic { color: var(--acento); }
.cfg-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* No celular o resumo "Seções: Funis" fica junto, à esquerda; a seta no fim. */
@media (max-width: 900px) {
  .config-nav-resumo { justify-content: flex-start; gap: var(--e-1); }
  .config-nav-resumo::after { margin-left: auto; }
}

/* Excluir funil (specs/040): o gatilho é um texto em vermelho com ícone, ao
   lado de Renomear e Novo funil; o painel é a confirmação. */
.menu-excluir > summary { display: inline-flex; align-items: center; gap: var(--fc-2); color: var(--alerta-tx); }
.menu-excluir > summary .ic { width: 14px; height: 14px; }
.painel-excluir { width: min(380px, 88vw); }
.painel-excluir .legenda { margin: 0 0 var(--e-3); }
.painel-excluir label { display: block; margin-bottom: var(--e-1); font-weight: 500; }
.painel-excluir select { width: 100%; }
button.perigo { background: var(--alerta-pilula); color: #fff; }

/* Quadro: o nome de toda coluna começa na mesma borda. As setas ‹ › das
   colunas que mudam de lugar ocupavam um espaço à esquerda do nome (e um
   vazio guardado onde não havia seta), então só as etapas do meio ficavam
   recuadas. Com mouse, as setas saem do fluxo e aparecem no canto direito do
   cabeçalho ao passar sobre a coluna; no toque continuam à vista, como antes. */
@media (hover: hover) {
  .coluna-kanban > header.alca-coluna { position: relative; }
  .alca-coluna > .seta-vaga { display: none; }
  .alca-coluna > .seta-coluna { position: absolute; top: 50%; transform: translateY(-50%); background: var(--fundo); border-radius: var(--r-controle); }
  .alca-coluna > .seta-esq { right: 30px; }
  .alca-coluna > .seta-dir, .alca-coluna > .seta-esq:not(:has(~ .seta-dir)) { right: 2px; }
  .seta-coluna:not(:has(button:focus-visible)) { pointer-events: none; }
  .coluna-kanban:hover .seta-coluna, .coluna-kanban:focus-within .seta-coluna { pointer-events: auto; }
}

/* Controles dentro do cartão do quadro: uma altura só, compacta (28 px), para
   Assumir, Abrir em…, Reabrir e Reaproveitar ficarem do mesmo tamanho. */
.cartao-lead :is(button, select, a.botao, .botao-cartao) { height: 28px; }
.cartao-lead :is(button, a.botao, .botao-cartao) { padding: 0 var(--e-3); display: inline-flex; align-items: center; }

/* Conversas: busca e "Filtros" na mesma linha, os dois com 32 px; ícone de
   16 px no eixo do texto, como no resto. */
.busca input, .menu-filtro > summary { height: var(--ctl); }
.menu-filtro > summary svg { width: 16px; height: 16px; }

/* Celular: campo + botão das telas de coluna (Novo número, Novo acesso, Novo
   token, Novo endereço, Perfil) ocupam a largura da coluna, como os cartões. */
@media (max-width: 600px) {
  .config-miolo form:has(> div > input) { flex-wrap: wrap; }
  .config-miolo form > div:has(> input, > label + input) { flex: 1 1 100%; }
  .config-miolo form > div > input, .config-miolo form > div > label + input { width: 100% !important; }
  .config-miolo form:has(> label) { max-width: none; }
}

/* Campos lado a lado dentro de um cartão (Perfil): três colunas, uma no celular. */
.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
.campos-3 label { display: block; margin-bottom: var(--e-1); }
.campos-3 input { width: 100%; }
.form-senha .legenda { margin: var(--e-2) 0 var(--e-3); }
.cartao-opcao .linha-aparencia { margin: var(--e-2) 0 0; }
@media (max-width: 600px) { .campos-3 { grid-template-columns: minmax(0, 1fr); } }

/* Funis (Configurações): o título do cartão encosta no topo como nos outros
   cartões (vinha com a margem de seção, um vão de 40 px acima do nome); na
   linha da etapa, campo, marca e Salvar terminam no mesmo eixo em todas as
   linhas; a nova etapa usa as mesmas larguras. */
.funil-config > h2:first-child { margin-top: 0; }
.tabela-etapas .linha-config { flex-wrap: nowrap; }
.tabela-etapas .linha-config input { flex: 1 1 auto; }
.tabela-etapas .marco-fixo { box-sizing: border-box; padding: 0; justify-content: flex-start; display: inline-flex; align-items: center; }
.tabela-etapas .linha-config select, .tabela-etapas .marco-fixo, .nova-etapa select { flex: 0 0 164px; width: 164px; }
.acoes-etapa form { display: inline-flex; vertical-align: middle; margin-left: var(--e-2); }
.acoes-etapa .tag { vertical-align: middle; }
.tabela-etapas td.ordem form { display: inline-flex; gap: var(--e-1); }
@media (max-width: 600px) {
  .tabela-etapas .linha-config { flex-wrap: wrap; }
  .tabela-etapas .linha-config input { flex: 1 1 100%; }
}
/* Cartão de opção: o primeiro título encosta no topo do cartão. */
.cartao-opcao > :first-child, .cartao-opcao > .titulo-bloco:first-child h2 { margin-top: 0; }
.campos-3 label { margin-top: 0; }

/* Etapas no celular: cada etapa vira um bloco (setas e Arquivar em cima, o
   nome na largura toda, a marca e o Salvar embaixo), em vez de uma tabela
   cortada que rola de lado. */
@media (max-width: 600px) {
  main .funil-config .rolagem-x { overflow: visible; }
  main table.tabela-etapas, main .tabela-etapas tbody { display: block; width: 100%; }
  main .tabela-etapas thead { display: none; }
  main .tabela-etapas tr { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-2); padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
  main .tabela-etapas td { display: block; padding: 0; border: 0; white-space: normal; width: auto; }
  main .tabela-etapas td.ordem { grid-column: 1; grid-row: 1; }
  main .tabela-etapas td.acoes-etapa { grid-column: 2; grid-row: 1; text-align: right; }
  main .tabela-etapas td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  main .tabela-etapas .linha-config { flex-wrap: wrap; }
  main .tabela-etapas .linha-config input { flex: 1 1 100%; }
  main .tabela-etapas .linha-config select, main .tabela-etapas .marco-fixo { flex: 1 1 auto; width: auto; }
  .nova-etapa { flex-wrap: wrap; }
  .nova-etapa input { flex: 1 1 100%; }
  .nova-etapa select { flex: 1 1 auto; width: auto; }
}
/* Coluna de Configurações: 216 px, para o item mais longo ("Horário de
   atendimento") caber com o ícone sem passar da borda da busca. */
@media (min-width: 901px) { .config-grade { grid-template-columns: 216px minmax(0, 1fr); } }
.cfg-grupo ul { grid-template-columns: minmax(0, 1fr); }

/* Gatilhos de menu que têm cara de botão (Renomear, Novo funil, Excluir,
   Abrir oportunidade, Filtros da lista de conversas): 32 px como o botão. */
.busca .menu-filtro > summary,
.menu-vendas > summary { height: var(--ctl); display: inline-flex; align-items: center; box-sizing: border-box; }
/* Cabeçalho da lista de conversas: o título na mesma escala de toda tela (18/600). */
.topo-lista.cab-tela h1 { font-size: var(--t-titulo-pagina); line-height: 28px; }
.busca { align-items: center; }
.busca .menu-filtro > summary { min-height: 0; }
.busca .menu-filtro .menu-painel { top: calc(var(--ctl) + 4px); }

/* Contraste (specs/040, medido em toda tela logada nos dois temas): o que
   ainda ficava abaixo de 4,5:1. O círculo de iniciais escurece a cor de cada
   pessoa no próprio views/conversas.ejs (corDoAvatar). */
.abertura .n-alerta { color: var(--alerta-tx); }
table.trafego .cobertura { color: var(--atencao-tx); }
.passo.feito .marca { color: var(--ok-tx); }

/* Vazio guiado (Recuperação sem funil): o cartão vai de borda a borda como os
   blocos da tela; o miolo continua centrado e na medida de leitura. */
.vazio-guiado { max-width: none; margin-left: 0; margin-right: 0; }

/* Endereço longo (webhook, token) quebra dentro do cartão em vez de empurrar
   a tela para o lado no celular (a tela do número dava 127 px de rolagem). */
main code { overflow-wrap: anywhere; }

/* ══ SPECS/042: CONFIGURAÇÕES EM TELAS PRÓPRIAS E NAVEGAÇÃO ══════════════
   (1) Configurações com a mesma largura das outras telas (a coluna de 880 px
       fazia a aba parecer outra tela). (2) Lateral que recolhe e expande, com
       o nome num balão ao parar o mouse. (3) Tema com três escolhas. (4)
       Seletor de cliente com desenho próprio. (5) WhatsApp com a API oficial
       (Em breve) e a não oficial; Acessos com nível; Instagram. */

/* (1) Configurações na largura de tela cheia: menu de 216 px + o resto. */
.config-miolo { max-width: none; }

/* (2) Lateral: aberta, cada item é uma linha com ícone e nome; recolhida, só
   o ícone. A escolha fica no navegador (tema.js põe data-lateral no <html>
   antes de desenhar). */
:root { --trilho-larg: 208px; --trilho-recolhido: 64px; }
@media (min-width: 901px) {
  .trilho { width: var(--trilho-larg); align-items: stretch; padding: var(--e-3) var(--e-2); transition: width var(--dur-2) var(--curva); }
  .marca-mini { margin-left: var(--e-2); }
  .t-item {
    width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: flex-start; gap: var(--e-3);
    padding: 0 var(--e-3); font-size: var(--t-3); line-height: 20px;
  }
  .t-item .ic { width: 18px; height: 18px; flex: none; }
  .t-item.ativo::before { left: -8px; top: 10px; bottom: 10px; }
  .t-nome { flex: 1; min-width: 0; text-align: left; }
  .t-conta { position: static; margin-left: auto; flex: none; }
  .trilho-pe { justify-items: stretch; }
  .trilho-pe form { display: flex; }
  .trilho-pe .sair { width: 100%; height: 40px; display: flex; align-items: center; justify-content: flex-start; gap: var(--e-3); padding: 0 var(--e-3); font-size: var(--t-3); font-weight: 500; }
  button.t-item { background: transparent; border: 0; cursor: pointer; height: auto; font: inherit; font-size: var(--t-3); font-weight: 500; }
  button.t-item:hover { filter: none; }

  :root[data-lateral="recolhida"] .trilho { width: var(--trilho-recolhido); align-items: center; padding: var(--e-3) var(--e-2); }
  :root[data-lateral="recolhida"] .marca-mini { margin-left: 0; }
  :root[data-lateral="recolhida"] .t-item { width: 48px; justify-content: center; padding: 0; }
  :root[data-lateral="recolhida"] .t-nome { display: none; }
  :root[data-lateral="recolhida"] .t-item.ativo::before { left: -6px; }
  :root[data-lateral="recolhida"] .t-conta { position: absolute; top: 2px; left: auto; right: 2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 var(--e-1); font-size: 10px; }
  :root[data-lateral="recolhida"] .trilho-pe { justify-items: center; }
  :root[data-lateral="recolhida"] .trilho-pe .sair { width: 48px; justify-content: center; padding: 0; }

  /* Botão de recolher: círculo de 24 px na borda da lateral, na altura da
     marca, metade para fora. Sem nome: o balão diz o que ele faz. */
  .lateral { position: sticky; z-index: 6; }
  .recolher-lateral {
    position: absolute; top: 18px; right: -12px; width: 24px; height: 24px; padding: 0;
    display: grid; place-items: center; border-radius: var(--r-controle); cursor: pointer;
    background: var(--papel); color: var(--tinta-2); border: 1px solid var(--linha-forte);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    transition: color var(--dur-1, 120ms) var(--curva);
  }
  .recolher-lateral svg { width: 14px; height: 14px; transition: transform var(--dur-2) var(--curva); }
  .recolher-lateral:hover { color: var(--tinta); filter: none; }
  .recolher-lateral:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
  :root[data-lateral="recolhida"] .recolher-lateral svg { transform: scaleX(-1); }
}
@media (max-width: 900px) { .recolher-lateral { display: none; } }
@media (prefers-reduced-motion: reduce) { .trilho, .recolher-lateral, .recolher-lateral svg { transition: none; } }

/* Balão com o nome do item (menus.js), à direita do ícone, no eixo dele. */
.dica-lateral {
  position: fixed; z-index: 90; transform: translate(-4px, -50%); opacity: 0; pointer-events: none;
  padding: var(--e-2) var(--e-3); border-radius: var(--r-controle); background: var(--tinta); color: var(--tinta-tx, var(--papel));
  font-size: var(--t-2); font-weight: 500; line-height: 18px; white-space: nowrap; box-shadow: var(--elev-3);
  transition: opacity var(--dur-1) var(--curva), transform var(--dur-1) var(--curva);
}
.dica-lateral.visivel { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { .dica-lateral { transition: none; } }

/* (3) Tema: grupo de três botões de ícone (claro, escuro, automático). */
.botao-tema, .botao-tema:hover {
  width: auto; height: var(--ctl); padding: var(--fc-1); gap: var(--fc-1); display: inline-flex; align-items: center;
  background: var(--papel); color: var(--tinta-2); border: 1px solid var(--linha); cursor: default;
  border-radius: calc(var(--r-controle) + var(--fc-1)); /* concêntrico: botão de 6 + folga de 2 */
}
.botao-tema button, .botao-tema button:hover {
  width: 26px; height: 26px; min-width: 0; padding: 0; display: grid; place-items: center;
  background: transparent; color: var(--tinta-3); border: 0; border-radius: var(--r-controle); cursor: pointer; filter: none;
}
.botao-tema button:hover { color: var(--tinta); background: var(--realce); }
.botao-tema button[aria-pressed="true"] { background: var(--realce-forte); color: var(--tinta); }
.botao-tema button:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.botao-tema svg { width: 16px; height: 16px; }
.botao-tema:active svg { transform: none; }
@media (max-width: 900px) {
  .bb-fim .botao-tema { width: auto; height: 40px; padding: var(--fc-1); background: transparent; border-color: var(--lateral-linha); }
  .bb-fim .botao-tema button { width: 32px; height: 32px; color: var(--lateral-tx-2); }
  .bb-fim .botao-tema button:hover { background: var(--lateral-realce); color: var(--lateral-tx); }
  .bb-fim .botao-tema button[aria-pressed="true"] { background: var(--lateral-ativo); color: var(--lateral-tx); }
}

/* (4) Seletor de cliente: botão com a inicial colorida e o nome; o painel é
   do CRM (papel, fio, sombra de flutuar), não a lista do sistema. */
.seletor-cliente { position: relative; flex: none; min-width: 0; }
.sc-botao {
  list-style: none; cursor: pointer; user-select: none;
  height: var(--ctl); max-width: 280px; display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-2) 0 var(--e-1); border: 1px solid var(--linha); border-radius: var(--r-controle); background: var(--papel);
  color: var(--tinta); font-size: var(--t-2); font-weight: 600; box-shadow: var(--elev-1);
  transition: border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
}
.sc-botao::-webkit-details-marker { display: none; }
.sc-botao:hover { border-color: var(--linha-forte); }
.sc-botao:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sc-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-seta { flex: none; color: var(--tinta-3); transition: transform var(--dur-2) var(--curva); }
.seletor-cliente[open] .sc-seta { transform: rotate(180deg); }
.sc-ini {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--r-controle);
  font-size: var(--t-1); font-weight: 600; color: #fff; background: var(--acento);
}
/* Inicial do cliente sem cor própria (specs/044): a cor fica para o que significa algo. */
.sc-ini { background: var(--tinta); color: var(--tinta-tx); }
.seletor-cliente .sc-painel { left: 0; right: auto; top: calc(var(--ctl) + 6px); width: min(300px, 88vw); padding: var(--e-2); z-index: 40; transform-origin: top left; }
.sc-titulo { margin: 0; padding: var(--e-2) var(--e-2) var(--e-1); font-size: var(--t-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3); }
.sc-busca { position: relative; margin: 0 var(--e-1) var(--e-1); }
.sc-busca svg { position: absolute; left: var(--e-2); top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.sc-busca input { width: 100%; height: var(--ctl); padding: 0 var(--e-2) 0 var(--e-8); font-size: var(--t-2); }
.sc-lista { margin: 0; display: grid; gap: 0; max-height: min(60vh, 420px); overflow-y: auto; }
.sc-opcao, .sc-opcao:hover {
  width: 100%; height: 36px; display: flex; align-items: center; gap: var(--e-2); padding: 0 var(--e-2) 0 var(--fc-2);
  background: transparent; color: var(--tinta-2); border: 0; border-radius: var(--r-controle); cursor: pointer;
  font-size: var(--t-3); font-weight: 400; text-align: left; filter: none;
}
.sc-opcao[hidden] { display: none; }
.sc-opcao:hover, .sc-opcao:focus-visible { background: var(--realce); color: var(--tinta); }
.sc-opcao.atual { color: var(--tinta); font-weight: 600; }
.sc-opcao-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-check { flex: none; color: var(--acento); }
.sc-nada { margin: var(--e-2); color: var(--tinta-3); font-size: var(--t-2); }
@media (max-width: 900px) {
  .sc-botao { max-width: min(60vw, 240px); background: var(--lateral-campo); color: var(--lateral-tx); border-color: var(--lateral-campo-linha); box-shadow: none; }
  .sc-seta { color: var(--lateral-tx-2); }
  /* Abre logo abaixo da faixa do alto (e não como a folha de baixo dos
     outros menus, que ficava atrás da barra do celular). */
  details.menu.seletor-cliente > .sc-painel {
    position: fixed; left: var(--e-3); right: var(--e-3); top: calc(56px + env(safe-area-inset-top, 0px)); bottom: auto;
    width: auto; max-height: calc(100vh - 56px - 96px); overflow-y: auto; z-index: 60; transform-origin: top center;
  }
  .sc-lista { max-height: none; }
}

/* (5) WhatsApp: os dois jeitos de ligar lado a lado. */
.opcoes-canal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); margin: var(--e-3) 0 var(--e-6); }
.opcao-canal { padding: var(--e-4); border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--papel); box-shadow: var(--elev-1); }
.opcao-canal.ativa { border-color: color-mix(in srgb, var(--acento) 40%, var(--linha)); }
.opcao-canal.desligada { background: var(--recuo, var(--fundo)); box-shadow: none; }
.oc-topo { display: flex; align-items: center; gap: var(--e-2); }
.oc-topo h3 { margin: 0; font-size: var(--t-4, 16px); font-weight: 600; flex: 1; min-width: 0; }
.oc-icone { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--r-controle); background: color-mix(in srgb, var(--acento) 10%, var(--papel)); color: var(--acento); }
.opcao-canal.desligada .oc-icone { background: var(--realce); color: var(--tinta-3); }
.oc-icone svg { width: 16px; height: 16px; }
.opcao-canal .legenda { margin: var(--e-2) 0 0; }
@media (max-width: 620px) { .opcoes-canal { grid-template-columns: minmax(0, 1fr); } }

/* Acessos: o nível na linha da pessoa; o formulário com o nível ao lado. */
.form-nivel { margin: 0; display: inline-flex; }
.form-nivel select { min-width: 112px; }
.form-novo-acesso { margin: var(--e-4) 0 var(--e-2); display: flex; gap: var(--e-2); align-items: end; flex-wrap: wrap; }
.form-novo-acesso select { min-width: 120px; }

/* Instagram: foto redonda (a inicial fica por baixo se a foto não carregar). */
.ig-avatar {
  position: relative; width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center; border-radius: var(--r-pill); overflow: hidden;
  background: linear-gradient(135deg, #f9a03f, #d6246e 55%, #7a2bb3); color: #fff; font-weight: 600; font-size: var(--t-3);
}
.ig-avatar.grande { width: 48px; height: 48px; font-size: var(--t-4, 16px); }
.ig-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cab-titulo .ig-avatar { margin-right: var(--e-1); }
.faixa-instagram {
  display: flex; align-items: center; gap: var(--e-6); flex-wrap: wrap; margin: 0 0 var(--e-6); padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linha); border-radius: var(--r-cartao); background: var(--papel); box-shadow: var(--elev-1);
}
.fi-perfil { display: flex; align-items: center; gap: var(--e-3); color: var(--tinta); text-decoration: none; min-width: 0; }
.fi-perfil:hover b { text-decoration: underline; }
.fi-nome { display: grid; min-width: 0; }
.fi-nome b { font-weight: 600; }
.fi-nome span { color: var(--tinta-2); font-size: var(--t-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-numeros { display: flex; gap: var(--e-6); flex-wrap: wrap; margin: 0; }
.fi-numeros div { display: grid; gap: var(--e-2); }
.fi-numeros dt { font-size: var(--t-1); font-weight: 500; color: var(--tinta-3); }
.fi-numeros dd { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); }
.fi-erro { flex-basis: 100%; margin: 0; }
.ig-conectado { display: flex; align-items: center; gap: var(--e-3); }
.ig-dados p { margin: 0; }
.ig-conectar button { margin-top: var(--e-2); }
@media (max-width: 620px) { .faixa-instagram { gap: var(--e-3); } .fi-numeros { gap: var(--e-4); } }

/* ══ VISUAL DO SITE (specs/044, 17/10/2026) ════════════════════════════════
   A pele do site do Diego (site.dodiego.com.br), aprovada na maquete
   https://claude.ai/artifact/ScWLAgszYPFqJZwETDcRaU. Só a pele: nenhuma regra,
   rota ou dado muda. (1) Moldura preta (lateral, faixa do alto, barra do
   celular) e o trabalho num painel claro (canto 40 até 20/10; hoje 14), solto da moldura, que
   rola por dentro no computador. (2) Schibsted Grotesk; títulos em 800 com a
   letra apertada. (3) Preto e branco no resto; amarelo só para o que é seu e
   pede ação agora; vermelho só atraso, verde só venda, âmbar hoje e perto.
   (4) Botão, aba e filtro em pílula (até 20/10; hoje raio 6). (5) Raio em escala (até 20/10): 14 etiqueta, 18
   cartão pequeno repetido, 28 cartão, 40 painel, 999 botão. (6) A frase do
   Painel num cartão preto com o laço atrás. Valores e contraste medido em
   .interface-design/system.md. */

:root {
  /* Raios: os do topo do arquivo (20/10/2026). */
  --margem-painel: var(--e-3);
  --trilho-larg: 236px;  /* a lateral da maquete: cabe o nome do cliente */
  --t-titulo-pagina: clamp(30px, 2.6vw, 40px);
  --t-titulo-bloco: 22px;
  --t-heroi: 34px;
  --t-valor: 34px;
}

/* ── (1) Moldura preta e painel claro ── */
html { background: var(--lateral); }
body { background: var(--lateral); font-family: var(--f-corpo); font-feature-settings: "ss01" 0; }
.app { background: var(--lateral); }
.lateral { color-scheme: dark; }
@media (min-width: 901px) {
  /* O painel rola por dentro: a moldura fica parada. */
  body:has(> .app) { height: 100vh; overflow: hidden; }
  .app { height: 100vh; min-height: 0; }
  .conteudo {
    margin: var(--margem-painel) var(--margem-painel) var(--margem-painel) 0;
    height: calc(100vh - var(--margem-painel) * 2);
    border-radius: var(--r-janela); background: var(--fundo);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    position: relative; isolation: isolate;
    transition: background-color var(--dur-2) var(--curva);
  }
  :root[data-tema="escuro"] .conteudo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
}

/* Lateral: marca, cliente e os grupos, em coluna. */
.lateral { background: var(--lateral); }
@media (min-width: 901px) {
  .lateral {
    width: var(--trilho-larg); flex: 0 0 var(--trilho-larg); height: 100vh;
    display: flex; flex-direction: column; gap: var(--e-3);
    padding: var(--e-5) 0 var(--e-3); border-right: 0; background: var(--lateral);
    transition: width var(--dur-2) var(--curva), flex-basis var(--dur-2) var(--curva);
  }
  .lateral .trilho { width: 100%; flex: 1 1 auto; min-height: 0; padding: 0 var(--e-3); background: transparent; gap: var(--e-1); }
  :root[data-lateral="recolhida"] .lateral { width: var(--trilho-recolhido); flex-basis: var(--trilho-recolhido); }
  :root[data-lateral="recolhida"] .lateral .trilho { width: 100%; padding: 0 var(--e-2); }
}
.marca-lateral {
  display: flex; align-items: center; gap: var(--e-2); min-width: 0; height: 36px; flex: none;
  margin: 0 var(--e-3) 0 var(--e-6); color: #fff; text-decoration: none; border-radius: var(--r-controle);
}
.marca-laco { width: 34px; height: 23px; flex: none; color: #fff; }
.marca-laco circle { fill: var(--amarelo); }
.marca-nome { font: 800 21px/1 var(--f-titulo); letter-spacing: -0.04em; white-space: nowrap; }
.marca-lateral:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Grupos da lateral: branco 50%, caixa alta com espaçamento. Menu de navegação
   (este e a coluna de Configurações) é lista compacta, uma regra para os dois:
   grupo até grupo 16, nome do grupo até os itens 8, item até item 4. */
.t-grupo {
  margin: var(--e-4) 0 var(--e-2); padding: 0 var(--e-3); font-size: 11px; line-height: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lateral-tx-3); white-space: nowrap;
}
/* Item de 38 px (raio de controle); o ativo é branco com texto preto (sai a barra de 3 px). */
@media (min-width: 901px) {
  .t-item {
    min-height: 38px; height: 38px; padding: 0 var(--e-3); gap: var(--e-3); border-radius: var(--r-controle);
    color: var(--lateral-tx-2); font-size: var(--t-3); font-weight: 500;
  }
  .t-item .ic { width: 17px; height: 17px; }
  .trilho-pe .sair { height: 38px; padding: 0 var(--e-3); border-radius: var(--r-controle); gap: var(--e-3); }
  :root[data-lateral="recolhida"] .t-item, :root[data-lateral="recolhida"] .trilho-pe .sair { width: 44px; height: 40px; padding: 0; justify-content: center; }
  :root[data-lateral="recolhida"] .t-grupo { visibility: hidden; height: 1px; margin: var(--e-2) 0; overflow: hidden; }
  :root[data-lateral="recolhida"] .marca-lateral { margin: 0 auto; }
  :root[data-lateral="recolhida"] .marca-nome { display: none; }
}
.t-item:hover { background: var(--lateral-realce); color: #fff; }
.t-item.ativo, .t-item.ativo:hover { background: #fff; color: #000; font-weight: 600; }
.t-item.ativo .ic { color: #000; }
.t-item.ativo::before { content: none; }
.trilho-pe { border-top: 0; padding-top: var(--e-3); }
.trilho :focus-visible, .lateral :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.t-item.ativo:focus-visible { outline-offset: 3px; }
/* Contador de Conversas: amarelo com texto preto (é seu e pede ação agora). */
.t-conta, .bb-conta {
  background: var(--amarelo); color: var(--amarelo-tx); font-weight: 600;
  min-width: 22px; height: 20px; line-height: 20px; padding: 0 var(--fc-2); border-radius: var(--r-pill);
}
:root[data-lateral="recolhida"] .t-conta { min-width: 16px; height: 16px; line-height: 16px; padding: 0 var(--e-1); }

/* Seletor de cliente na moldura: controle com fio branco 16%. */
.lateral .seletor-cliente { margin: 0 var(--e-3); flex: none; }
.lateral .sc-botao, .lateral .sc-botao:hover {
  width: 100%; max-width: none; height: 40px; padding: 0 var(--e-3) 0 var(--fc-2); gap: var(--e-2);
  background: transparent; color: #fff; border: 1px solid var(--lateral-campo-linha); border-radius: var(--r-controle);
  font-size: var(--t-3); font-weight: 600; box-shadow: none;
}
.lateral .sc-botao:hover { background: var(--lateral-realce); }
.lateral .sc-botao .sc-nome { flex: 1; }
.lateral .sc-seta { color: var(--lateral-tx-3); }
.lateral .sc-ini { width: 28px; height: 28px; border-radius: var(--r-pill); background: #fff; color: #000; font-weight: 800; }
.lateral .seletor-cliente .sc-painel { top: 46px; color-scheme: normal; }
.lateral .sc-painel .sc-ini { width: 24px; height: 24px; background: var(--realce); color: var(--tinta); }
.sc-painel .sc-ini { border-radius: var(--r-pill); }
@media (min-width: 901px) {
  :root[data-lateral="recolhida"] .lateral .seletor-cliente { margin: 0 auto; }
  :root[data-lateral="recolhida"] .lateral .sc-botao { width: 40px; padding: 0; justify-content: center; border-color: transparent; }
  :root[data-lateral="recolhida"] .lateral .sc-nome, :root[data-lateral="recolhida"] .lateral .sc-seta { display: none; }
}

/* Botão de recolher: na borda, na altura da marca, sobre o preto. */
@media (min-width: 901px) {
  .recolher-lateral, .recolher-lateral:hover { background: #fff; color: #000; border-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
  .recolher-lateral:focus-visible { outline-color: #fff; }
}

/* Faixa do alto dentro do painel (trilha e tema), presa ao rolar. */
@media (min-width: 901px) {
  .topo {
    height: 56px; flex: 0 0 56px; padding: 0 var(--margem-tela); border-bottom: 0;
    background: var(--fundo);
  }
  .faixa-ver-como + .aviso-ver-como + script + .topo, .faixa-ver-como ~ .topo { top: 44px; }
}
.marca-topo { display: none; }

/* Celular: a lateral vira a faixa preta do alto (marca e cliente); o menu é a barra de baixo. */
@media (max-width: 900px) {
  body { background: var(--lateral); }
  .app { padding: 0 var(--e-2); }
  .lateral {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e-3);
    position: sticky; top: 0; z-index: 20; width: auto; height: auto; min-height: 56px; margin: 0 calc(var(--e-2) * -1);
    padding: var(--e-2) var(--e-4); padding-top: calc(var(--e-2) + env(safe-area-inset-top, 0px));
    background: var(--lateral); border: 0; overflow: visible;
  }
  .lateral .trilho, .lateral .recolher-lateral { display: none; }
  .marca-lateral { margin: 0; }
  .lateral .seletor-cliente { margin: 0; min-width: 0; flex: 0 1 auto; }
  .lateral .sc-botao, .lateral .sc-botao:hover { width: auto; max-width: min(60vw, 240px); height: 36px; font-size: var(--t-2); }
  .topo { display: none; }
  .conteudo { margin: 0; border-radius: var(--r-janela); background: var(--fundo); min-height: calc(100vh - 72px); }
  main { padding: var(--margem-tela) var(--margem-tela) calc(var(--alto-barra) + var(--margem-tela) + env(safe-area-inset-bottom, 0px)); }
  /* Barra de baixo: preta, item ativo em branco 10%, contador amarelo. */
  .barra-baixo { background: var(--lateral); border-top: 1px solid rgba(255, 255, 255, .16); }
  .bb-item { border-radius: var(--r-controle); }
  .bb-item.ativo { background: var(--lateral-ativo); color: #fff; }
  .bb-item.ativo .ic { color: #fff; }
  .bb-item:focus-visible { outline-color: #fff; }
  .bb-folha { background: #000; border-color: rgba(255, 255, 255, .16); border-radius: var(--r-janela); }
  .bb-folha .bb-item { border-radius: var(--r-controle); }
}

/* ── (2) Tipo: títulos em 800 e a letra apertada; número tabular ── */
.cab-tela h1, .cab-funil h1, main h1 {
  font-family: var(--f-titulo); font-size: var(--t-titulo-pagina); line-height: 1; font-weight: 800; letter-spacing: -0.045em;
}
.cab-tela .sobre { margin-bottom: var(--e-2); letter-spacing: .1em; }
.cab-linha { min-height: 40px; }
.cab-tela .legenda { margin-top: var(--e-2); }
.cab-tela { margin-bottom: var(--e-6); }
main h2, .sec-titulo, .titulo-bloco h2 { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -0.035em; }
.titulo-bloco h2, main > h2 { font-size: var(--t-titulo-bloco); line-height: 1.1; }
.sec-cab h2, .cartao-sec h2 { font-size: 17px; line-height: 1.2; letter-spacing: -0.025em; }
.topo-lista h1 { font-size: 30px; }
/* Número tabular só onde o texto é só número e muda de valor (contadores,
   quantidades, porcentagens). Na Schibsted o tabular também alarga o ponto, a
   vírgula e os dois-pontos ("R$ 573 . 954 , 20", "16 : 27"): dinheiro, data,
   hora e telefone ficam nos números normais da fonte. */
.sec-conta, .t-conta, .bb-conta, .total, .qtd, .pct, .of-n, .caixa-etapa .n, .cnt, .cnt-filtros, .conta-atraso { font-variant-numeric: tabular-nums; }
:root :is(.oport-valor, .valor-cartao, .soma-coluna, .fx-val, .fx-custo, .kpi-val, td, th, .tel-linha, .contador-funil,
  .relogio, .ac .tempo, .linha-config input.campo-valor, .fi-numeros dd, .caixa-etapa .t, .rec-num b, .motivos-perda strong,
  .abertura .n-atencao, .saude) { font-variant-numeric: normal; }

/* ── (4) Controles (raio 6 desde 20/10/2026; eram pílula) ── */
/* Botão principal: tinta com texto papel (preto no claro, branco no
   escuro); a seta anda 3 px no hover; scale(.97) no clique. */
button, a.botao, .cab-acoes > a.botao, a.botao.discreto {
  border-radius: var(--r-controle); font-size: var(--t-2); font-weight: 600; padding: 0 var(--e-4); height: 36px;
}
button:hover, a.botao:hover { background-image: linear-gradient(var(--veu-hover), var(--veu-hover)); }
a.botao:hover .seta, button:hover .seta, .link-sec:hover .seta { transform: translateX(3px); }
button.discreto, a.botao.discreto, .botao.discreto {
  background: transparent; color: var(--tinta); border: 0; box-shadow: inset 0 0 0 1px var(--linha-forte);
}
button.discreto:hover, a.botao.discreto:hover { background: var(--recuo); background-image: none; border-color: transparent; }
button.mini { height: 28px; padding: 0 var(--e-3); }
a.botao.grande { height: 46px; padding: 0 var(--e-6); font-size: 15px; }
button.perigo { background: var(--alerta-pilula); color: #fff; }
/* Campo de uma linha, seletor e texto longo: raio de controle. */
/* :where() deixa estas regras gerais sem peso: a busca com lupa e os campos
   com desenho próprio continuam mandando no recuo. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file])), select { border-radius: var(--r-controle); border-color: var(--linha-forte); }
input:where(:not([type=checkbox]):not([type=radio])) { padding-left: var(--e-4); padding-right: var(--e-4); }
select { padding-left: var(--e-4); }
.config-busca input, .sc-busca input { padding-left: var(--e-8); }
.config-busca svg, .sc-busca svg { left: var(--e-2); }
textarea { border-radius: var(--r-controle); }
input[type=file] { border-radius: var(--r-controle); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--tinta); outline-offset: 1px; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: var(--r-controle); }
a.botao:focus-visible, button:focus-visible { border-radius: var(--r-controle); }
input[type=checkbox] { accent-color: var(--tinta); }

/* Os controles: raio 6 (botão e campo estão logo acima). */
.botao-icone, .botao-icone:hover, .seletor-funil-botao, .filtro-funil, label.filtro, label.filtro select,
.botao-tema button, .botao-tema button:hover, .menu-filtro > summary, .menu-vendas > summary,
.menu-comparar > summary, .menu-excluir > summary, .escolha-varios > summary, .cartao-lead .botao-cartao,
.abas-compositor .aba, .filtros a, .filtros-lista a, .indice-pagina a, .fvc-sair,
.recolher-lateral, .ver-anteriores a, .separador-dia span {
  border-radius: var(--r-controle);
}
.seletor-funil-botao { box-shadow: none; border-color: var(--linha-forte); height: 44px; padding: 0 var(--e-3) 0 var(--e-4); }
.botao-icone, .botao-icone:hover { border-color: var(--linha-forte); background: transparent; }
.botao-icone:hover { background: var(--recuo); }
.botao-icone.marcada, .botao-icone.ligado { color: var(--tinta); border-color: var(--tinta); background: var(--recuo); }
.filtro-funil.ligado { background: var(--tinta); border-color: var(--tinta); color: var(--tinta-tx); }
.filtro-funil.ligado .cnt { background: var(--papel); color: var(--tinta); }
.cnt-filtros { background: var(--tinta); color: var(--tinta-tx); }
.of-estrela { color: var(--tinta); }

/* Trilho de abas (período, filtros do quadro), concêntrico (6 + 2): fundo realce; a aba ativa
   tem o fundo do painel e o fio. */
.periodo { padding: var(--fc-1); gap: var(--fc-1); border-radius: calc(var(--r-controle) + var(--fc-1)); background: var(--realce); }
.periodo a, .periodo > a, .periodo .menu-datas > summary { border-radius: var(--r-controle); font-size: var(--t-2); font-weight: 500; color: var(--tinta-2); }
.periodo a:hover, .periodo .menu-datas > summary:hover { background: transparent; color: var(--tinta); }
.periodo a.ativo, .periodo .menu-datas.ativo > summary { background: var(--fundo); color: var(--tinta); font-weight: 600; box-shadow: 0 0 0 1px var(--linha); }
.barra-periodo .menu-comparar > summary { height: 38px; border-radius: var(--r-controle); background: transparent; box-shadow: inset 0 0 0 1px var(--linha-forte); font-size: var(--t-2); font-weight: 600; }
.barra-periodo .menu-comparar > summary:hover { background: var(--recuo); }
.barra-periodo .menu-comparar.ativo > summary { background: var(--fundo); box-shadow: inset 0 0 0 1px var(--tinta); }
.filtros a, .filtros-lista a, .indice-pagina a { border-radius: var(--r-controle); }
.filtros a.ativo, .filtros-lista a.ativo { background: var(--tinta); color: var(--tinta-tx); }

/* Pílula de tempo e contadores. */
.pilula-tempo { height: 22px; padding: 0 var(--e-2); border-radius: var(--r-pill); background: var(--realce); color: var(--tinta-2); }
.sec-conta { background: var(--realce); color: var(--tinta-2); }

/* Menus que flutuam: raio de janela (14), 8 de recuo, itens de 6. */
.menu-painel { border-radius: var(--r-janela); border-color: var(--linha); box-shadow: var(--elev-3); }
.menu-painel .opcao-menu, .sc-opcao, .sc-opcao:hover { border-radius: var(--r-controle); }
dialog.janela { border-radius: var(--r-janela); }
dialog.janela::backdrop { background: rgba(0, 0, 0, .45); }
.ajuda-balao, .dica-lateral { border-radius: var(--r-controle); }

/* ── (5) Cartões: fio sobre o painel, raio de cartão (10) ── */
.aviso, .cartao, .cartao-sec, .kpi, .faixa, .faixa-instagram, .opcao-canal, .funil-config, .produto-config, .escolha-funil {
  border-radius: var(--r-cartao); box-shadow: none; border-color: var(--linha);
}
main .rolagem-x:not(.sec-tabela .rolagem-x):not(.funil-config .rolagem-x):not(.aviso .rolagem-x) { border-radius: var(--r-cartao); box-shadow: none; }
.cartao-lead, .cartao-fila, .caixa-etapa { border-radius: var(--r-cartao); }
.tag, .relogio, .saude, .selo-risco { border-radius: var(--r-pill); }
.tag { border-radius: var(--r-controle); }
.erro, .somente-leitura { border-radius: var(--r-cartao); }
.erro { color: var(--alerta-tx); background: var(--alerta-bg); }

/* ── (6) Painel: a frase num cartão preto, o capítulo preto do site ── */
.abertura {
  position: relative; isolation: isolate; overflow: hidden; max-width: none; margin-top: 0;
  min-height: 300px; padding: var(--e-6); border-radius: var(--r-cartao);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-6);
  background: #000; color: #fff; color-scheme: dark;
  /* A foto de luz da maquete entra aqui, por baixo do laço: um
     background-image (por exemplo url('/painel-luz.jpg') a 55%, no lugar
     62% 50%) e a classe com-foto no <section>, que liga o véu do ::after.
     O Diego põe depois. */
}
:root[data-tema="escuro"] .abertura { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); }
/* Véu da foto: só entra junto com ela (.abertura.com-foto), para a frase
   continuar legível sobre a luz. Sem foto, o laço fica limpo sobre o preto. */
.abertura.com-foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .86) 38%, rgba(0, 0, 0, .25) 72%, rgba(0, 0, 0, .1));
}
.abertura-arte { position: absolute; z-index: -1; right: -2%; top: 50%; width: min(46%, 520px); aspect-ratio: 3 / 2; transform: translateY(-50%); pointer-events: none; }
.abertura .laco { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform: none; animation: none; opacity: .9; }
.abertura .laco-fio { stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.abertura .laco-anel { stroke: var(--amarelo); stroke-width: 2; }
.laco-meio { fill: var(--amarelo); }
.abertura .laco-ponto { filter: none; }
.abertura-txt { position: relative; }
.abertura .sobre { margin: 0; font-size: var(--t-1); line-height: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.abertura .frase {
  margin: var(--e-2) 0 0; max-width: 15ch; font: 800 clamp(30px, 3.6vw, 52px)/1 var(--f-titulo); letter-spacing: -0.045em; text-wrap: balance;
}
.abertura .frase b { font-weight: 800; }
/* Marca-texto de verdade (pedido do Diego, 17/10/2026): um traço de caneta
   no lugar do retângulo de canto redondo. Bordas de cima e de baixo
   tremidas, o traço subindo um pouco da esquerda para a direita, pontas
   chanfradas onde a tinta carrega mais e uns riscos no sentido do traço. O
   desenho é um SVG esticado na caixa de cada linha (com
   box-decoration-break: clone, cada linha ganha o seu traço); a faixa cobre a
   altura toda das letras, para nenhuma perna de letra cair no preto. A cor
   é o --amarelo (#ffe14d), escrita no SVG porque url() não lê variável. Ao
   abrir, a caneta passa da esquerda para a direita em meio segundo (parada,
   já pintada, com prefers-reduced-motion). */
.abertura mark, .abertura .n-alerta {
  --marca-texto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffe14d' d='M6 3.4C50 2.2 110 3.3 160 1.9C178 1.4 190 1.2 195.6 1.6Q198.6 2 198.7 6L199.3 33.8Q199.3 38.2 195 38.4C150 39.4 90 38.1 40 39.2C24 39.6 12 39.8 5 39.6Q1 39.4 1.2 35.6L2.6 6.6Q3 3.6 6 3.4Z'/%3E%3Cpath fill='%23f2c418' fill-opacity='.55' d='M6 3.4Q3 3.6 2.6 6.6L1.2 35.6Q1 39.4 5 39.6L7.4 39.5Q5 34 5.6 20Q6 8 8.6 3.3Z'/%3E%3Cpath fill='%23f2c418' fill-opacity='.55' d='M195.6 1.6Q198.6 2 198.7 6L199.3 33.8Q199.3 38.2 195 38.4L192.6 38.5Q195.4 30 194.8 19Q194.4 7 192.4 1.4Z'/%3E%3Cpath fill='%23fff3a8' fill-opacity='.55' d='M8 9.2C60 8 130 8.6 192 6.6L192 8.2C130 10.4 60 9.8 8 10.8Z'/%3E%3Cpath fill='%23f5cc22' fill-opacity='.3' d='M7 22.4C70 21.2 140 22.2 193 20.6L193 22.6C140 24.4 70 23.4 7 24.6Z'/%3E%3Cpath fill='%23fff3a8' fill-opacity='.4' d='M8 31.6C60 30.6 130 31.6 192 29.8L192 31C130 33 60 32.2 8 33Z'/%3E%3C/svg%3E");
  background: var(--marca-texto) 0 0 / 100% 100% no-repeat;
  color: var(--amarelo-tx); padding: .02em .3em .1em; margin: 0 -.06em; border-radius: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: marca-texto-passa 550ms cubic-bezier(.45, 0, .25, 1) 120ms both;
}
/* O número é sempre preto: a caneta o revela ao passar (branco por cima do
   amarelo, no meio do caminho, dava 1,3:1). */
@keyframes marca-texto-passa { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.abertura .frase.calma { max-width: 18ch; display: block; }
.abertura .frase.calma svg { display: none; }
.abertura .apoio { margin: var(--e-2) 0 0; max-width: 46ch; font-size: var(--t-4); color: #a3a3a6; }
.abertura .apoio .n-atencao { color: #fff; font-weight: 600; }
.abertura .acao { margin: 0; display: flex; align-items: center; gap: var(--e-3) var(--e-4); flex-wrap: wrap; position: relative; }
.abertura a.botao, .abertura a.botao:hover { background: #fff; color: #000; background-image: none; }
.abertura a.botao:hover { background: #e6e6e6; }
.abertura a.botao:focus-visible { outline-color: #fff; }
.abertura .quem { color: #d6d6d8; }
.abertura .inicial { background: #fff; color: #000; font-weight: 800; flex-basis: 30px; width: 30px; height: 30px; }
.abertura.calma { min-height: 220px; }
.abertura.calma .abertura-arte { opacity: .7; }
@media (max-width: 900px) {
  .abertura { min-height: 0; padding: var(--e-5); }
  .abertura-arte { width: 90%; right: -30%; top: 22%; transform: none; opacity: .45; }
}
@media (max-width: 620px) {
  .abertura .frase { font-size: 34px; }
  .abertura .acao a.botao { width: 100%; justify-content: center; }
}

/* Blocos do Painel. */
.titulo-bloco { margin-top: var(--e-6); }
.kpis { margin-top: var(--e-3); }

/* ── Faixa de indicadores: um cartão de fio com células divididas por fio ── */
.kpis {
  gap: 0; border: 1px solid var(--linha); border-radius: var(--r-cartao); overflow: hidden; background: var(--papel);
}
.kpi { border: 0; border-radius: 0; background: transparent; padding: var(--e-5); min-height: 0; }
.kpi + .kpi { border-left: 1px solid var(--linha); }
.kpi-rot { font-size: var(--t-2); color: var(--tinta-2); }
.kpi-val { font-size: var(--t-valor); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; }
.kpi-val small { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.anel-trilho { stroke: var(--realce); }
.anel-arco { stroke: var(--tinta); }
.mini-b i { background: color-mix(in srgb, var(--tinta) 28%, var(--papel)); border-radius: 3px 3px 1px 1px; /* desenho do gráfico */ }
.mini-b i.fora { background: color-mix(in srgb, var(--tinta) 12%, var(--papel)); }
.mini-b i.ultimo { background: var(--tinta); }
.mini-b i:hover { background: var(--tinta-2); }
@media (max-width: 1199px) {
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--linha); }
}
@media (max-width: 620px) {
  .kpis { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kpi + .kpi { border-left: 0; border-top: 1px solid var(--linha); }
  .kpi { padding: var(--e-5); }
  .kpi-val { font-size: 30px; }
}

/* Faixa de Vendas e Tráfego. */
.faixa { overflow: hidden; }
.fx { padding: var(--e-5); }
.fx-rot { font-size: var(--t-2); }
.fx-val { font-size: var(--t-valor); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; margin-top: var(--e-1); }
.fx.heroi .fx-val { font-size: 40px; line-height: 1.05; letter-spacing: -0.045em; }
.fx.ganho .fx-val, .fx.heroi.ganho .fx-val { color: var(--ok-tx); }
.fx-seta { background: var(--papel); border-color: var(--linha-forte); }
@media (max-width: 620px) { .fx-val { font-size: 30px; } .fx.heroi .fx-val { font-size: 34px; } }

/* Lista de quem espera e De onde vieram. */
.cartao-sec { overflow: hidden; }
.sec-cab { padding: var(--e-6) var(--e-6) var(--e-3); }
.ac { padding: var(--e-2) var(--e-6); min-height: 0; border-top: 0; }
.ac:hover { background: var(--recuo); }
.ac:active { background: var(--realce); }
.ac .ico { background: var(--realce); color: var(--tinta); border-radius: var(--r-pill); }
.link-sec, .abrir-l { color: var(--tinta); font-weight: 600; }
.link-sec { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link-sec:hover, .abrir-l:hover, .ac:hover .abrir-l { color: var(--tinta-2); }
.og-box { padding: 0 var(--e-6) var(--e-6); }
.origem-legenda .hachura .bolinha, .origem-barra .trecho.hachura {
  background: repeating-linear-gradient(135deg, var(--origem-4) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px var(--origem-4);
}
.origem-barra .trecho.hachura { box-shadow: none; }
.inicial { background: var(--realce); color: var(--tinta); font-weight: 800; }

/* ── Quadro do funil ── */
.coluna-kanban > header { border-top-width: 2px; }
.cartao-lead { background: var(--papel); border-color: var(--linha); box-shadow: var(--elev-1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cartao-lead:hover { border-color: var(--linha-forte); box-shadow: var(--elev-2); }
}
.coluna-kanban .total, .coluna-kanban header .total { border-radius: var(--r-pill); }
.coluna-kanban.recebendo { border-color: var(--tinta); background: var(--recuo); }
/* Selo "Você": o lead é de quem está logado. */
.nome-dono.voce {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--e-2); border-radius: var(--r-pill);
  background: var(--amarelo); color: var(--amarelo-tx); font-weight: 600;
}

/* ── Conversas ── */
.painel-lista, .painel-leitura, .painel-detalhes { border-radius: var(--r-janela); box-shadow: none; }
.painel-lista .itens { border-radius: 0 0 var(--r-janela) var(--r-janela); }
.busca input, .sc-busca input, .config-busca input { border-radius: var(--r-controle); background: var(--recuo); border-color: transparent; height: 40px; }
.busca input:focus { outline: 2px solid var(--tinta); outline-offset: 0; background: var(--recuo); }
.item-conversa.aberta { background: var(--realce); box-shadow: none; }
.item-conversa.aberta .avatar { background: var(--papel); }
.avatar { background: var(--realce); color: var(--tinta); font-weight: 800; }
.bolhas { background: var(--chat-canvas); }
.bolha { border-radius: var(--r-cartao); box-shadow: none; padding: var(--e-2) var(--e-3); }
.linha-bolha.deles .bolha { background: var(--bolha-deles); border: 1px solid var(--linha); border-top-left-radius: var(--r-cartao); border-bottom-left-radius: 0; }
.linha-bolha.minha .bolha { background: var(--bolha-minha); color: var(--bolha-minha-tx); border-top-right-radius: var(--r-cartao); border-bottom-right-radius: 0; }
.linha-bolha.minha .bolha .rodape-bolha, .linha-bolha.minha .bolha .anexo { color: color-mix(in srgb, var(--bolha-minha-tx) 72%, var(--bolha-minha)); }
.linha-bolha.minha .bolha .anexo.chamada { color: var(--bolha-minha-tx); }
.linha-bolha.minha .bolha .transcricao, .linha-bolha.minha .bolha .midia-doc { background: color-mix(in srgb, var(--bolha-minha-tx) 12%, var(--bolha-minha)); color: var(--bolha-minha-tx); border-color: transparent; }
.linha-bolha.minha .bolha .transcricao .rot, .linha-bolha.minha .bolha .midia-doc .tam { color: color-mix(in srgb, var(--bolha-minha-tx) 72%, var(--bolha-minha)); }
.linha-bolha.minha .bolha a { color: inherit; }
/* Nota interna: âmbar, nunca a cor da nossa resposta. */
.linha-bolha .bolha.nota { color: var(--tinta); }
.linha-bolha .bolha.nota .rodape-bolha { color: var(--tinta-2); }
.bolha .selo.nota { color: var(--atencao-tx); }
.separador-dia span { font-weight: 600; }
/* Veio do anúncio: marcador de fio tracejado. */
.topo-conversa .origem {
  display: inline-flex; align-items: center; gap: var(--e-1); max-width: 100%; padding: var(--fc-1) var(--e-2); border-radius: var(--r-controle);
  border: 1px dashed var(--linha-forte); background: var(--papel); color: var(--tinta-2);
}
.topo-conversa .origem strong { color: var(--tinta); }
/* Campo de resposta: raio de controle. */
.compositor { border-top-color: var(--linha); }
.compositor textarea { border-radius: var(--r-controle); padding: var(--e-3) var(--e-4); background: var(--recuo); border-color: transparent; min-height: 44px; }
.compositor textarea:focus { outline: 2px solid var(--tinta); outline-offset: 0; }
.linha-compositor button { height: 44px; }
.abas-compositor .aba { border-radius: var(--r-controle); }

/* ── Tela de entrar: a mesma moldura (o formulário num painel claro sobre o preto) ── */
.entrada { background: #000; padding: var(--margem-painel); gap: 0; }
.entrada-form { background: var(--fundo); border-radius: var(--r-janela); }
.entrada-arte { background-color: transparent; }
.entrada-form h1 { font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-bottom: var(--e-2); }
@media (max-width: 860px) {
  .entrada { padding: var(--e-2); }
  .entrada-form { border-radius: var(--r-janela); min-height: calc(100vh - 16px); }
}
.entrada-form .logo { font: 800 26px/1 var(--f-titulo); letter-spacing: -0.04em; }
.entrada-form .logo span, .logo-solta span { color: inherit; }
.entrada-form h1 { font-size: 34px; }
.entrada-form .logo { display: flex; align-items: center; gap: var(--e-2); }
.entrada-form .logo .marca-laco { color: var(--tinta); }
.entrada-arte .frase { font: 800 clamp(30px, 3vw, 44px)/1.02 var(--f-titulo); letter-spacing: -0.045em; max-width: 14ch; }
.entrada-arte .frase small { font-family: var(--f-corpo); letter-spacing: 0; font-weight: 400; }
.entrada-arte .laco-fio { stroke: rgba(255, 255, 255, .4); }
.entrada-arte .laco-anel { stroke: var(--amarelo); }

/* Alturas que contam com a faixa do alto: agora 56 px dentro do painel, mais
   os 12 px de margem do painel em cima e embaixo. */
@media (min-width: 901px) {
  :root { --alto-moldura: calc(56px + var(--margem-painel) * 2); }
  .conversas-app { height: calc(100vh - var(--alto-moldura) - var(--e-4) * 2); }
  .quadro { height: calc(100vh - var(--alto-moldura) - 224px); }
  main:has(.conversas-app) { padding: 0 var(--e-4) var(--e-4); }
}

/* Opção que não dá para escolher (Automações → quem manda): o texto que diz
   por quê continua legível; só o botão de marcar fica apagado. Com a opacidade
   na linha toda, a explicação caía para 2,5:1. */
label.opcao-remetente:has(input:disabled) { opacity: 1; color: var(--tinta-2); }
label.opcao-remetente input:disabled { opacity: .5; }

/* Quadro: as setas de mudar a coluna de lugar só aparecem com o mouse sobre
   ela (o fundo da caixa delas tapava metade do contador); o relógio com folga
   é cinza (verde é só venda), âmbar perto do fim, vermelho vencido. */
@media (hover: hover) {
  .alca-coluna > .seta-coluna { opacity: 0; background: var(--fundo); }
  .coluna-kanban:hover .alca-coluna > .seta-coluna, .coluna-kanban:focus-within .alca-coluna > .seta-coluna { opacity: 1; }
}
.seta-coluna button.discreto { box-shadow: none; background: transparent; }
.relogio.ok { background: var(--realce); color: var(--tinta-2); }

/* Verde só para venda (e os dois sinais pequenos que a maquete aprovada já
   mostrava: a variação boa da comparação e o ponto do "Agora"). O que é só
   calmo ou feito fica na tinta. */
.espera-vazia svg { color: var(--tinta-2); }
.passo.feito .marca { background: var(--realce); color: var(--tinta); }
.rec-num.entram b { color: var(--tinta); }
.link-final.ok { border-color: var(--linha-forte); color: var(--tinta); }

/* ── Ficha do lead no painel do lado (specs/045, 17/10/2026) ──
   Tudo o que o CRM sabe da pessoa: dados, de onde veio e cada formulário
   (UTM e as outras respostas). Rótulo à esquerda em tinta-2, valor à direita
   em tinta 500; valor longo quebra em qualquer ponto. */
.espiar-ficha { display: grid; gap: var(--e-2); padding-bottom: var(--e-4); margin-bottom: var(--e-2); border-bottom: 1px solid var(--linha); }
.ficha-dl {
  display: grid; grid-template-columns: minmax(104px, 38%) minmax(0, 1fr); gap: var(--e-2); margin: 0 0 var(--e-2);
  font-size: var(--t-2); line-height: 1.45;
}
.ficha-dl dt { color: var(--tinta-2); overflow-wrap: anywhere; }
.ficha-dl dd { margin: 0; color: var(--tinta); font-weight: 500; overflow-wrap: anywhere; }
.ficha-dl:empty { display: none; }

/* Revisão de contraste (17/10, pedido do Diego): o nome do lead na Lista no
   mesmo tamanho das outras colunas, o telefone legível. */
.espiar-tel code, .tel-linha { color: var(--tinta-2); }

/* ══════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO NO CELULAR (specs/046, 19/10/2026)
   No celular e no app instalado (tela cheia, sem a seta do navegador): o
   voltar no alto de toda tela de detalhe, a conversa numa tela só, as folhas
   de baixo, 44 px no dedo e resposta ao toque. No computador com mouse nada
   muda: cada regra mora num @media de largura ou de ponteiro.
   ══════════════════════════════════════════════════════════════════════════ */

:root { --alto-faixa: calc(56px + env(safe-area-inset-top, 0px)); }
@keyframes folha-sobe { from { transform: translateY(32px); opacity: 0; } }

/* ── O voltar do alto: a seta e o nome de para onde vai, no lugar da marca ── */
.voltar-topo { display: none; }
@media (max-width: 900px) {
  .lateral { min-height: var(--alto-faixa); }
  .voltar-topo {
    display: inline-flex; align-items: center; gap: var(--fc-1); min-width: 44px; min-height: 44px; max-width: 72vw;
    margin-left: calc(var(--e-2) * -1); padding: 0 var(--e-3) 0 var(--fc-2); border-radius: var(--r-controle);
    color: #fff; font: 600 var(--t-4)/1 var(--f-titulo); letter-spacing: -0.02em; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .voltar-topo svg { flex: none; }
  .voltar-topo .voltar-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .voltar-topo:active { background: rgba(255, 255, 255, .14); }
  .voltar-topo:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  /* Na tela de detalhe a faixa é só o voltar: trocar de cliente no meio de
     uma conversa levaria a uma conversa que não é dele. */
  body.tela-detalhe .lateral .marca-lateral,
  body.tela-detalhe .lateral .seletor-cliente { display: none; }
  body.tela-detalhe .lateral { justify-content: flex-start; }
}

/* ── A conversa no celular: uma tela só ──
   Sem a lista em cima e sem a barra de baixo: voltar no alto, o contato, as
   mensagens rolando no meio e o campo de digitar preso embaixo, acima do
   indicador do iPhone; com o teclado aberto o Android encolhe a página
   (interactive-widget no viewport) e o campo sobe junto. */
@media (max-width: 900px) {
  body:not(.conversa-aberta) .conversas-app .painel-leitura { display: none; }
  body.conversa-aberta .barra-baixo,
  body.conversa-aberta .conversas-app .painel-lista { display: none; }
  body.conversa-aberta .conteudo { margin-bottom: 0; min-height: 0; border-radius: var(--r-janela) var(--r-janela) 0 0; overflow: hidden; }
  body.conversa-aberta main { padding: 0; }
  body.conversa-aberta .conversas-app {
    height: calc(100vh - var(--alto-faixa)); height: calc(100dvh - var(--alto-faixa));
    min-height: 0; gap: 0;
  }
  body.conversa-aberta .painel-leitura { border: 0; border-radius: var(--r-janela) var(--r-janela) 0 0; box-shadow: none; }
  body.conversa-aberta .topo-conversa { padding: var(--e-3) var(--e-4) var(--e-2); gap: var(--e-2); align-items: center; }
  body.conversa-aberta .topo-conversa .avatar { width: 36px; height: 36px; flex: none; }
  body.conversa-aberta .topo-conversa .nome { font-size: var(--t-4); line-height: 1.25; }
  /* "Novo contato · sem atendente" quebra entre as partes, nunca no meio. */
  body.conversa-aberta .topo-conversa .sub { white-space: nowrap; row-gap: var(--e-1); }
  body.conversa-aberta .topo-conversa .sub > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.conversa-aberta .bolhas { padding: var(--e-3); overscroll-behavior: contain; }
  body.conversa-aberta .compositor {
    gap: var(--e-1); padding: var(--e-2) var(--e-3) calc(var(--e-2) + env(safe-area-inset-bottom, 0px));
  }
  body.conversa-aberta .nota-compositor:empty { display: none; }
  body.conversa-aberta .compositor textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Detalhes da conversa no celular: folha de baixo, com "‹ Conversa" no alto. */
.fechar-detalhes .fd-voltar { display: none; }
@media (max-width: 900px) {
  .conversas-app.com-detalhes .painel-detalhes {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    max-height: 88vh; max-height: 88dvh;
    border: 0; border-top: 1px solid var(--linha); border-radius: var(--r-janela) var(--r-janela) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, .45);
    animation: folha-sobe var(--dur-2) var(--curva);
  }
  /* O fundo escurecido: tocar nele fecha (conversas.ejs). */
  .conversas-app.com-detalhes::after {
    content: ''; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .45);
  }
  .conversas-app.com-detalhes .topo-detalhes {
    position: sticky; top: 0; z-index: 1; background: var(--papel);
    flex-direction: row-reverse; justify-content: flex-end; gap: var(--e-2); padding: var(--e-3) var(--e-4) var(--e-2);
  }
  .conversas-app.com-detalhes .topo-detalhes::before {
    content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; transform: translateX(-50%);
    border-radius: var(--r-pill); background: var(--linha-forte);
  }
  .fechar-detalhes .fd-x { display: none; }
  .fechar-detalhes .fd-voltar { display: inline-flex; align-items: center; gap: var(--fc-1); }
  :root .fechar-detalhes {
    width: auto; min-width: 44px; height: 44px; padding: 0 var(--e-3) 0 var(--fc-2); margin-left: calc(var(--fc-2) * -1);
    font: 600 var(--t-3)/1 var(--f-corpo); color: var(--tinta); border-radius: var(--r-controle);
  }
  .topo-detalhes h2 { font-size: var(--t-3); color: var(--tinta-2); font-weight: 600; margin-left: auto; }
}

/* ── Folhas de baixo: janelas, painel do lado e o "Mais" ── */
@media (max-width: 620px) {
  dialog.janela {
    width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 88vh; max-height: 88dvh;
    border-width: 1px 0 0; border-radius: var(--r-janela) var(--r-janela) 0 0;
    padding-bottom: calc(var(--e-6) + env(safe-area-inset-bottom, 0px));
  }
  dialog.janela[open] { animation: folha-sobe var(--dur-2) var(--curva); }
  dialog.janela::before, .espiar::before {
    content: ''; display: block; width: 40px; height: 4px; margin: calc(var(--e-3) * -1) auto var(--e-3);
    border-radius: var(--r-pill); background: var(--linha-forte);
  }
  .espiar::before { flex: none; margin: var(--e-2) auto 0; }
  .espiar.aberto { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .espiar { border-radius: var(--r-janela) var(--r-janela) 0 0; height: min(88vh, 720px); height: min(88dvh, 720px); }
  .espiar-pe { padding-bottom: calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 900px) {
  /* "Mais" aberto: o fundo escurece e só ele fica marcado. O fundo é do
     próprio botão "Mais" (::after): tocar nele fecha a folha, sem script. */
  .bb-mais[open] > summary::after { content: ''; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .45); cursor: default; }
  .barra-baixo:has(.bb-mais[open]) > .bb-item.ativo { background: transparent; color: var(--lateral-tx-2); }
  .barra-baixo:has(.bb-mais[open]) > .bb-item.ativo .ic { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.janela[open], .conversas-app.com-detalhes .painel-detalhes { animation: none; }
}

/* ── Configurações no celular: a tela de entrada é a lista; as subtelas têm
   o voltar no alto e não repetem o cabeçalho nem o cartão "Seções" ── */
@media (max-width: 900px) {
  .config-nav[data-indice] { border: 0; background: transparent; box-shadow: none; }
  .config-nav[data-indice] > .config-nav-resumo { display: none; }
  .config-nav[data-indice] > nav { padding: 0; }
  .config-indice-nota { display: none; }
  .config-nav:not([data-indice]) { display: none; }
  body.tela-detalhe main > .cab-tela:has(+ .config-grade) { display: none; }
  .config-grade:has(.config-nav[data-indice]) .config-miolo { display: none; }
}
@media (min-width: 901px) { .config-indice-nota { margin: 0; } }

/* ── Quadro no dedo: cada coluna encaixa na tela ao arrastar ── */
@media (max-width: 620px) {
  .quadro { scroll-snap-type: x mandatory; scroll-padding-inline: 0; overscroll-behavior-x: contain; }
  .quadro > .coluna-kanban { scroll-snap-align: start; flex-basis: min(84vw, 320px); }
}

/* ── Lista do Funil em cartões (até 620 px): nada some atrás de rolagem ── */
@media (max-width: 620px) {
  .lista-funil .rolagem-lista { overflow: visible; }
  .lista-funil .tabela-funil, .lista-funil .tabela-funil tbody { display: block; width: 100%; min-width: 0; }
  .lista-funil .tabela-funil thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lista-funil .tabela-funil tr.linha-lead {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3);
    min-height: 44px; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha);
  }
  .lista-funil .tabela-funil tr.linha-lead > :is(th, td) { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--t-2); background: none; }
  .lista-funil .tabela-funil tr.linha-lead > th.col-lead { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-2); font-size: var(--t-3); }
  .lista-funil .tabela-funil tr.linha-lead > td:empty { display: none; }
  .lista-funil .tabela-funil tr.linha-lead > td.num { margin-left: auto; font-weight: 600; }
  .lista-funil .tabela-funil tr.linha-lead.atrasado { box-shadow: inset 3px 0 0 var(--alerta); }
  .lista-funil .tabela-funil tr.linha-lead.atrasado > th:first-child,
  .lista-funil .tabela-funil tr.linha-lead.espiado > th:first-child { box-shadow: none; }
  .lista-funil .tabela-funil tr.linha-lead.espiado { box-shadow: inset 3px 0 0 var(--acento); }
}

/* ── 44 px no dedo ──
   Em aparelho de toque todo controle tem 44 px de altura (no mouse o contrato
   de layout continua: 32). Exceções: caixa de marcar e rádio (24 px, com o
   rótulo clicável), link dentro de texto e o nome do lead no cartão (o
   cartão inteiro é o alvo). */
@media (pointer: coarse) {
  :root { --ctl: 44px; }
  html body .app :is(button, a.botao, .botao-cartao, .botao-icone, .aba-funil, .opcao-menu, .cfg-item,
    .filtros-lista a, .menu > summary:not(.bb-item), .seletor-funil-botao, .sc-botao, .sc-opcao, .periodo > a, .barra-periodo .menu-comparar > summary,
    .menu-vendas > summary, .botao-discreto, .botao-tema, .link-sec, .abrir-l, .marca-lateral) {
    height: auto; min-height: 44px;
  }
  html body .app :is(.botao-icone, .espiar-x, .seta-coluna button, .botao-tema button, .ajuda-btn, button.mini) { min-width: 44px; min-height: 44px; }
  html body .app .periodo { min-height: 48px; }
  html body .app :is(.periodo > a, .periodo .menu-datas > summary) { display: inline-flex; align-items: center; }
  html body .app input:is([type=checkbox], [type=radio]) { width: 24px; height: 24px; }
  /* O "?" mantém o ícone de 24 e ganha a área de toque por fora. */
  html body .app .ajuda-btn { min-width: 24px; min-height: 24px; }
  html body .app .ajuda-btn::after { inset: calc(var(--e-3) * -1); }
  .abas-compositor .aba { height: 44px; }
  .busca input, .sc-busca input, .config-busca input { height: 44px; }
  html body .app .cartao-lead .mover select, html body .app .cartao-oport > form.mover select { height: 44px; }
  .compositor textarea { min-height: 44px; }
  /* Botões que eram 28 dentro do cartão do quadro: 44, numa linha só. */
  .cartao-lead .botao-cartao { padding: 0 var(--e-4); }
  /* As setas do quadro e "Fixar controles" são do mouse; no dedo o quadro desliza. */
  .barra-quadro .seta-quadro, .cab-acoes .form-fixar { display: none; }
  /* Itens da coluna de Configurações e das listas de menu com o texto no meio. */
  .cfg-item, .opcao-menu, .filtros-lista a { display: flex; align-items: center; }
}

/* ── Toque no lugar do hover ──
   No toque o :hover "gruda" no último elemento tocado. Onde ele pintava fundo
   ou sombra, o toque ganha o :active (aparece enquanto o dedo está em cima). */
@media (hover: none) {
  button:hover, a.botao:hover { background-image: none; }
  .item-conversa:hover, .linha-lead:hover, .cfg-item:hover, .menu-painel .opcao-menu:hover { background: transparent; }
  .item-conversa.aberta:hover { background: var(--realce); }
  .cartao-lead:hover { box-shadow: var(--elev-1); border-color: var(--linha); }
  .item-conversa:active, .linha-lead:active, .cfg-item:active, .menu-painel .opcao-menu:active, .item-fila:active { background: var(--realce); }
  .cartao-lead:active { border-color: var(--linha-forte); }
  button:active, a.botao:active, .botao-cartao:active, .botao-icone:active { transform: scale(.97); }
  :is(.item-conversa, .linha-lead, .cartao-lead, .cfg-item, .opcao-menu, .bb-item, a, button, summary) { -webkit-tap-highlight-color: transparent; }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  button:active, a.botao:active, .botao-cartao:active, .botao-icone:active { transform: none; }
}

/* ── Área segura do app instalado no iPhone (viewport-fit=cover) ── */
@media (max-width: 900px) {
  .app { padding-left: max(var(--e-2), env(safe-area-inset-left, 0px)); padding-right: max(var(--e-2), env(safe-area-inset-right, 0px)); }
  .barra-baixo { padding-left: max(var(--e-2), env(safe-area-inset-left, 0px)); padding-right: max(var(--e-2), env(safe-area-inset-right, 0px)); }
}
@media (max-width: 860px) {
  .entrada { padding-top: max(var(--e-2), env(safe-area-inset-top, 0px)); padding-bottom: max(var(--e-2), env(safe-area-inset-bottom, 0px)); }
}
.botao-tema.solto { top: calc(12px + env(safe-area-inset-top, 0px)); }

/* ── Formulários (specs/047): tela própria do grupo Leads ── */
.barra-formularios { margin: 0 0 var(--e-4); }
.formularios-do-cliente { margin: var(--e-3) 0 var(--e-4); }
.formularios-do-cliente .fdc-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; padding: var(--e-6); }
.formularios-do-cliente h3 { margin: 0 0 var(--e-1); font-size: var(--t-3); font-weight: 600; }
.formularios-do-cliente .legenda { margin: 0; }
.formularios-do-cliente form { margin: 0; }
.formato-padrao { margin: var(--e-4) 0; }
.formato-padrao .sec-miolo { display: grid; gap: var(--e-3); padding-top: 0; }
.formato-padrao .legenda { margin: 0; }
.formato-lista { margin: 0; padding-left: var(--e-5); display: grid; gap: var(--e-2); font-size: var(--t-2); color: var(--tinta-2); line-height: 1.5; }
/* No celular, cada lead de formulário é um cartão (como a Lista do Funil, specs/046). */
@media (max-width: 620px) {
  main .rolagem-x:has(> .tabela-leads) { overflow: visible; }
  .tabela-leads, .tabela-leads tbody { display: block; width: 100%; min-width: 0; }
  .tabela-leads thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-leads tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--linha); }
  .tabela-leads tbody tr:first-child { border-top: 0; }
  main .rolagem-x .tabela-leads tr > td { display: block; min-width: 0; padding: 0; border: 0; font-size: var(--t-2); background: transparent; }
  main .rolagem-x .tabela-leads tr { background: transparent; }
  main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) .tabela-leads tr > :is(:first-child, :last-child) { padding: 0; }
  .tabela-leads tr > td:nth-child(2) { order: -1; flex: 1 1 100%; font-size: var(--t-3); }
  .tabela-leads tr > td:first-child { color: var(--tinta-2); }
  .tabela-leads tr > td:empty { display: none; }
}

/* ══ DISCIPLINA DE ESPAÇO (20/10/2026) ═════════════════════════════════════
   Decisão do Diego para todo app nosso, medida num painel feito no Lovable:
   harmonia vem de poucas distâncias, sempre as mesmas. Escala única (--e-1 a
   --e-6 = 4 a 24 px; 32 e 48 só entre blocos grandes) e uma distância por
   relação, a mesma na tela inteira. Este bloco vale por cima de tudo o que
   veio antes; a tabela completa está em .interface-design/system.md
   ("Disciplina de espaço"). Cor, fonte, rota e dado não mudam.
     borda do painel até o conteúdo ... 24 (16 no celular)   --margem-tela
     seção até a seção seguinte ....... 24, sempre             --e-6
     título da seção até o conteúdo ... 12                     --e-3
     cartão até cartão ................ 16 (grandes), 12 (fileira de muitos pequenos)
     dentro do cartão pequeno ......... 20                     --pad-cartao-p
     dentro do bloco largo ............ 24 (20 no celular)     --pad-bloco
     rótulo até o valor ............... 8, em todos            --e-2
     linha de lista ou tabela ......... 8 em cima e embaixo    --e-2
   Proximidade: título→conteúdo (12) < cartão↔cartão (16) < seção↔seção (24). */

:root {
  /* A barra de baixo do celular: botões de 52 + 4 em cima e embaixo + o fio. */
  --alto-barra: 61px;
}
@media (max-width: 900px) {
  :root { --margem-tela: var(--e-4); --pad-bloco: var(--e-5); }
}

/* Seção até seção: 24. As margens de bloco se somam pela maior (colapsam),
   então cada bloco pede 24 e o vão entre dois deles dá 24. */
.cab-tela { margin-bottom: var(--e-6); }
.cab-tela + .abertura, .cab-tela ~ .aviso + .abertura { margin-top: 0; }
.titulo-bloco { margin: var(--e-6) 0 var(--e-3); }
.grade-dia, .faixa, .faixa-funil, .bloco-vendas, .bloco-sec, .bloco-base, .linha-vertical { margin-top: var(--e-6); }
.titulo-secao { margin: var(--e-6) 0 var(--e-3); }
.abas-funil, .cab-funil { margin-bottom: var(--e-6); }
.quadro { margin-top: 0; }

/* Cartões lado a lado: mesma altura (o de baixo de "Quem espera" e "De onde
   vieram" acompanha o mais alto). */
.grade-dia { align-items: stretch; }

/* Dentro do bloco largo: 24 (cartão de seção, a frase do Painel, tabela em
   cartão, cartão de configuração, painel da conversa). */
.abertura { padding: var(--pad-bloco); }
.sec-cab { padding: var(--pad-bloco) var(--pad-bloco) var(--e-3); }
.ac { padding: var(--e-2) var(--pad-bloco); }
.espera-vazia { padding: var(--e-4) var(--pad-bloco) var(--pad-bloco); }
.og-box, .sec-miolo, .sec-vazia { padding: 0 var(--pad-bloco) var(--pad-bloco); }
.sec-tabela tr > :first-child { padding-left: var(--pad-bloco); }
.sec-tabela tr > :last-child { padding-right: var(--pad-bloco); }
.sec-sub-base { padding: var(--e-2) var(--pad-bloco) var(--e-3); }
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) tr > :first-child { padding-left: var(--pad-bloco); }
main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) tr > :last-child { padding-right: var(--pad-bloco); }
main .grupo-cab { padding: var(--pad-bloco) var(--pad-bloco) var(--e-3); }
.tabela-funil th:first-child, .tabela-funil td:first-child { padding-left: var(--pad-bloco); }
.tabela-funil th:last-child, .tabela-funil td:last-child { padding-right: var(--pad-bloco); }
.funil-config, .produto-config, .novo-produto, .escolha-funil, .vazio-ensina, .cartao-opcao, .link-bloco, .faixa-instagram { padding: var(--pad-bloco); }
.formularios-do-cliente .fdc-linha { padding: var(--pad-bloco); }
.cartao { padding: var(--pad-bloco); }
/* Aviso de largura toda: o texto começa na mesma borda do conteúdo dos cartões (24). */
.aviso { padding: var(--e-4) var(--pad-bloco); }

/* Dentro do cartão pequeno: 20 (célula de indicador, cartão do quadro, caixa
   de etapa, opção, cartão da fila). */
.kpi, .fx, .caixa-etapa, .cartoes > .cartao, .cartao-qualif, .item-fila, .rec-num, .opcao-canal, label.opcao-origem { padding: var(--pad-cartao-p); }
.fila-qualif.compacta .cartao-qualif { padding: var(--e-3) var(--pad-cartao-p); }

/* Cartão até cartão: 16 entre os grandes, 12 numa fileira de muitos pequenos. */
.quadro { gap: var(--e-4); }
.coluna-kanban .cartoes { gap: var(--e-3); }
.grade-funil, .cartao-sec .grade-funil, .opcoes-vertical { gap: var(--e-3); }
.opcoes-canal, .escolha-origem, .rec-resumo, .conversas-app { gap: var(--e-4); }

/* Rótulo até o valor: 8, em todo par (indicador, faixa, formulário, ficha). */
label { margin-bottom: var(--e-2); }
.form-ficha label, .form-etapa label, .campos-3 label, .painel-excluir label { margin-bottom: var(--e-2); }
.caixas-funil label, .escolha-funil .caixa-escolha { gap: var(--e-2); }
.rec-num b { margin-top: var(--e-1); }
.painel-ficha .ficha dt, .painel-detalhes .ficha dt { margin-top: var(--e-4); }
.painel-ficha .ficha dd, .painel-detalhes .ficha dd { margin-top: var(--e-2); }
.painel-ficha .ficha dt:first-child, .painel-detalhes .ficha dt:first-child { margin-top: 0; }

/* Linha de lista ou tabela: 8 em cima e embaixo. */
th { padding-top: var(--e-2); }
.origem-legenda li { min-height: 0; padding: var(--e-2); }
.motivos-perda li, .cartao-sec .motivos-perda li { min-height: 0; padding: var(--e-2) 0; }

/* Conversas: a mesma borda de 24 das outras telas; a lista é coluna (20 por
   dentro, como cartão pequeno), a conversa é bloco largo (24). */
@media (min-width: 901px) {
  main:has(.conversas-app) { padding: 0 var(--margem-tela) var(--margem-tela); }
  .conversas-app { height: calc(100vh - var(--alto-moldura) - var(--margem-tela)); }
}
.topo-lista.cab-tela { padding: var(--pad-cartao-p) var(--pad-cartao-p) var(--e-3); margin: 0; }
.busca, .filtros-lista, .filtro-etiqueta { padding: 0 var(--pad-cartao-p) var(--e-3); }
.item-conversa { padding: var(--e-2) var(--pad-cartao-p); }
.painel-lista .vazia { padding: var(--pad-cartao-p); }
.res-titulo { padding: var(--e-3) var(--pad-cartao-p) var(--e-1); }
.res-nota, .res-estado { padding: var(--e-2) var(--pad-cartao-p); }
.res-mais { margin: 0 var(--pad-cartao-p); }
.topo-conversa { padding: var(--e-3) var(--pad-bloco); }
.bolhas { padding: var(--pad-bloco); }
.compositor { padding: var(--e-3) var(--pad-bloco); }
.nota-compositor { padding: 0 var(--pad-bloco) var(--e-3); }
.fixada-item, .oport { padding: var(--e-2) var(--pad-bloco); }
.painel-leitura .aviso { margin: var(--e-3) var(--pad-bloco) 0; }
.topo-detalhes { padding: var(--pad-cartao-p) var(--pad-cartao-p) var(--e-3); }
.bloco-detalhe { padding: var(--pad-cartao-p); }
@media (max-width: 900px) {
  main:has(.conversas-app) { padding: var(--margem-tela) var(--margem-tela) calc(var(--alto-barra) + var(--margem-tela) + env(safe-area-inset-bottom, 0px)); }
  /* A conversa aberta ocupa a tela: a borda dela é a borda da tela (16). */
  body.conversa-aberta .topo-conversa { padding: var(--e-3) var(--margem-tela) var(--e-2); }
  body.conversa-aberta .bolhas { padding: var(--margem-tela); }
  body.conversa-aberta .compositor { padding: var(--e-2) var(--margem-tela) calc(var(--e-2) + env(safe-area-inset-bottom, 0px)); }
}

/* Painel claro e moldura: canto de janela (14). */
@media (min-width: 901px) { .conteudo { border-radius: var(--r-janela); } }

/* O quadro vai até o pé do painel, a 24 da borda como todo conteúdo. Antes a
   altura era a da tela menos um número fixo, que deixava um vão embaixo
   sempre que o cabeçalho mudava de altura. */
@media (min-width: 901px) {
  .conteudo > main:has(> .quadro) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  main:has(> .quadro) > .quadro { flex: 1 1 0; height: auto; min-height: 360px; padding-bottom: 0; }
}

/* ── Base de contatos, a tela Leads (specs/050) ───────────────────────────
   Todo mundo que já passou pelo cliente. Uma ação principal (Baixar, escura,
   como todo botão principal); os filtros são caixas de 36 px numa grade que
   quebra sozinha; a tabela é o cartão de sempre e vira cartões no celular.
   Cor só onde é informação: verde só na venda ganha, como no resto do app. */
.menu-baixar { position: relative; }
.menu-baixar > summary.botao-baixar {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: var(--ctl, 32px); padding: 0 var(--e-3);
  border-radius: var(--r-controle); background: var(--botao); color: var(--botao-tx);
  font-size: var(--t-1); font-weight: 500; cursor: pointer; list-style: none; user-select: none;
  transition: transform var(--dur-1) var(--curva), background-image var(--dur-2) var(--curva);
}
.menu-baixar > summary.botao-baixar::-webkit-details-marker { display: none; }
.menu-baixar > summary.botao-baixar:hover { background-image: linear-gradient(var(--veu-hover), var(--veu-hover)); }
.menu-baixar > summary.botao-baixar:active { transform: scale(.97); }
.menu-baixar > summary.botao-baixar svg { width: 16px; height: 16px; flex: none; }
.menu-baixar .painel-baixar { top: calc(100% + 6px); width: 304px; padding: var(--e-2); z-index: 30; }
.titulo-baixar { margin: 0; padding: var(--e-1) var(--e-3) var(--e-2); font-size: var(--t-1); font-weight: 600; color: var(--tinta-2); }
.opcao-baixar {
  display: grid; gap: 2px; padding: var(--e-2) var(--e-3); border-radius: var(--r-controle);
  color: var(--tinta); text-decoration: none; transition: background-color var(--dur-2) var(--curva);
}
.opcao-baixar:hover { background: var(--realce); }
.opcao-baixar:active { transform: scale(.99); }
.opcao-baixar b { font-size: var(--t-2); font-weight: 600; }
.opcao-baixar span { font-size: var(--t-1); line-height: 16px; color: var(--tinta-2); }

.filtros-base { display: grid; gap: var(--e-3); margin: 0 0 var(--e-4); }
.busca-base { position: relative; display: flex; align-items: center; gap: var(--e-2); max-width: 640px; }
.busca-base > svg { position: absolute; left: var(--e-3); color: var(--tinta-3); pointer-events: none; }
.busca-base input { flex: 1 1 auto; min-width: 0; padding-left: 36px; }
.busca-base .botao-buscar { flex: none; height: 36px; }
.caixas-base { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--e-3); }
.caixa-base { display: grid; gap: var(--e-1); min-width: 0; margin: 0; font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); }
.caixa-base select, .caixa-base input { width: 100%; min-width: 0; }
.caixa-base select { transition: border-color var(--dur-2) var(--curva); cursor: pointer; }
fieldset.datas-base { border: 0; padding: 0; }
fieldset.datas-base legend { padding: 0; margin: 0 0 var(--e-1); font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); }
.par-datas { display: flex; align-items: center; gap: var(--e-2); }
.par-datas input { flex: 1 1 0; }
.par-datas span { color: var(--tinta-3); }
.datas-base { grid-column: span 2; }
.mais-base > summary {
  display: inline-flex; align-items: center; gap: var(--fc-2); padding: var(--e-1) var(--e-2); margin-left: calc(var(--e-2) * -1);
  border-radius: var(--r-controle); font-size: var(--t-2); font-weight: 500; color: var(--tinta-2); cursor: pointer; list-style: none;
  transition: background-color var(--dur-2) var(--curva), color var(--dur-2) var(--curva);
}
.mais-base > summary::-webkit-details-marker { display: none; }
.mais-base > summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--curva); }
.mais-base[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.mais-base > summary:hover { background: var(--realce); color: var(--tinta); }
.mais-base[open] > .caixas-base { margin-top: var(--e-3); animation: surgir var(--dur-2) var(--curva); }
.n-filtros { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--tinta); color: var(--tinta-tx); font-size: 11px; font-weight: 600; }
.filtros-base > .so-sem-js { justify-self: start; }
.filtros-base.com-js > .so-sem-js { display: none; }

.resumo-base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin: 0 0 var(--e-3); }
.total-base { margin: 0; font-size: var(--t-3); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.total-base strong { font-size: var(--t-5); font-weight: 600; color: var(--tinta); }
.chips-base { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.chip-base {
  display: inline-flex; align-items: center; gap: var(--fc-2); height: 28px; padding: 0 var(--e-2) 0 var(--e-3);
  border-radius: var(--r-pill); background: var(--realce); color: var(--tinta); font-size: var(--t-1); font-weight: 500; text-decoration: none;
  transition: background-color var(--dur-2) var(--curva), transform var(--dur-1) var(--curva);
}
.chip-base:hover { background: var(--realce-forte); }
.chip-base:active { transform: scale(.97); }
.chip-base svg { opacity: .7; }
.chip-base:hover svg { opacity: 1; }
.limpar-base { font-size: var(--t-1); font-weight: 500; color: var(--tinta-2); text-decoration: underline; text-underline-offset: 3px; }
.limpar-base:hover { color: var(--tinta); }

.tabela-base { min-width: 760px; }
.tabela-base th, .tabela-base td { vertical-align: top; font-size: var(--t-2); line-height: 18px; padding-top: var(--e-3); padding-bottom: var(--e-3); }
.tabela-base thead th { padding-top: var(--e-3); padding-bottom: var(--e-2); font-size: var(--t-1); font-weight: 600; color: var(--tinta-3); }
.tabela-base tbody th { font-weight: 400; white-space: normal; }
.linha-base { cursor: pointer; transition: background-color var(--dur-1) var(--curva); }
@media (hover: hover) { .linha-base:hover { background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); } }
.linha-base:has(:focus-visible) { background: color-mix(in srgb, var(--tinta) 4%, var(--papel)); }
.col-contato { min-width: 190px; max-width: 260px; }
.col-contato > * + * { margin-top: 2px; }
.nome-base { display: block; font-weight: 600; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere; }
.nome-base:hover { text-decoration: underline; text-underline-offset: 3px; }
.nome-base.sem-nome { font-weight: 500; }
.tel-base, .email-base { display: block; font-size: var(--t-1); color: var(--tinta-2); overflow-wrap: anywhere; }
.marcas-base, .etiquetas-no-contato { display: flex; flex-wrap: wrap; gap: var(--e-1); padding-top: var(--e-1); }
.etiquetas-no-contato { display: none; }
.etiquetas-no-contato .etiqueta-base { margin: 0; }
/* Abaixo de 1400 px a coluna Etiquetas some e as etiquetas vão para baixo do nome. */
@media (max-width: 1399px) {
  .tabela-base .col-etiquetas { display: none; }
  .etiquetas-no-contato { display: flex; }
}
.col-contato .contato-lead, .col-contato .contato-parado { margin-left: calc(var(--e-2) * -1); }
.col-origem { max-width: 220px; }
.col-origem > span { display: block; overflow-wrap: anywhere; }
.campanha-base { font-size: var(--t-1); }
.col-data { white-space: nowrap; color: var(--tinta-2); }
.col-dono { white-space: nowrap; }
.col-etiquetas { max-width: 180px; }
.etiqueta-base { margin: 0 var(--e-1) var(--e-1) 0; }
.col-funis { min-width: 200px; }
.funil-base { display: block; font-size: var(--t-1); color: var(--tinta-2); }
.funil-base + .funil-base { margin-top: var(--e-1); }
.funil-base b { font-weight: 600; color: var(--tinta); }
.funil-base.est-ganha, .funil-base.est-ganha b { color: var(--ok-tx); }
.rotulo-celular { display: none; }
.paginas-base { display: flex; align-items: center; justify-content: center; gap: var(--e-3); margin: 0 0 var(--e-6); }
.paginas-base .desligado { opacity: .45; pointer-events: none; }

@media (max-width: 900px) {
  .menu-baixar .painel-baixar { left: 0; right: auto; width: min(304px, calc(100vw - 2 * var(--margem-tela))); transform-origin: top left; }
  .busca-base { max-width: none; }
  .caixas-base { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datas-base { grid-column: 1 / -1; }
  /* A tabela vira um cartão por pessoa: o contato em cima, o resto embaixo. */
  main .rolagem-x.tabela-base-caixa { overflow: visible; }
  .tabela-base, .tabela-base tbody { display: block; width: 100%; min-width: 0; }
  .tabela-base thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-base tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linha); }
  .tabela-base tbody tr:last-child { border-bottom: 0; }
  main .rolagem-x:not(.sec-tabela, .funil-config .rolagem-x, .aviso .rolagem-x) .tabela-base tr > :is(th, td) { display: block; padding: 0; border: 0; max-width: none; min-width: 0; }
  .tabela-base .col-contato, .tabela-base .col-origem, .tabela-base .col-funis { flex: 1 1 100%; }
  .tabela-base .col-contato { order: -2; }
  main .rolagem-x .tabela-base :is(.col-contato, .col-origem, .col-funis) { white-space: normal; }
  .tabela-base td:empty { display: none; }
  .rotulo-celular { display: inline; color: var(--tinta-3); }
  .col-data, .col-dono { font-size: var(--t-1); }
}

/* ── A lista que abre nos seletores (specs/052) ────────────────────────────
   O cartão do seletor de cliente para todo <select>: papel, fio, raio de
   janela, sombra de flutuar, o nome do campo em versalete no alto, opções de
   36 px e o ✓ na escolhida. Quem monta é o public/selecao.js, só com mouse e
   teclado; no toque, e sem o script, abre a lista do sistema. Fica na camada
   de cima do navegador (popover): nenhum cartão com rolagem o corta. */
.selecao-cartao {
  position: fixed; inset: auto; margin: 0; z-index: 1000; width: max-content;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  padding: var(--e-2); color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linha); border-radius: var(--r-janela); box-shadow: var(--elev-3);
  font: 400 var(--t-3)/20px var(--f-corpo); text-align: left;
  animation: surgir var(--dur-2) var(--curva); transform-origin: top left;
}
.selecao-cartao.acima { transform-origin: bottom left; animation-name: surgir-acima; }
@keyframes surgir-acima { from { opacity: 0; transform: translateY(4px) scale(.98); } }
/* Com o .selecao-cartao na frente: regras de parágrafo da janela e dos menus
   (dialog.janela p) não mudam o título. */
.selecao-cartao .selecao-titulo, .selecao-cartao .selecao-grupo {
  margin: 0; padding: var(--e-2) var(--e-2) var(--e-1); font-size: var(--t-1); line-height: 16px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-3);
}
.selecao-cartao .selecao-titulo { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selecao-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.selecao-lista:focus-visible { outline: none; }
.selecao-lista [role="group"] + [role="group"], .selecao-lista .selecao-opcao + [role="group"] { margin-top: var(--e-1); }
.selecao-opcao {
  display: flex; align-items: center; gap: var(--e-2); min-height: 36px; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3);
  border-radius: var(--r-controle); color: var(--tinta-2); cursor: pointer; user-select: none;
  transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
.selecao-opcao.ativa { background: var(--realce); color: var(--tinta); }
.pelo-teclado .selecao-opcao.ativa { box-shadow: inset 0 0 0 2px var(--acento); }
/* A caixa da lista aberta fica com a borda da caixa em foco. */
select[data-selecao-aberta] { border-color: var(--acento); }
.selecao-opcao.escolhida { color: var(--tinta); font-weight: 600; }
.selecao-opcao[aria-disabled="true"] { color: var(--tinta-3); cursor: default; background: transparent; }
.selecao-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.selecao-check { flex: none; color: var(--acento); }
.selecao-cartao .selecao-nada { margin: var(--e-2); color: var(--tinta-3); font-size: var(--t-2); }
/* Cartão do quadro com a lista do "Mover para" aberta: o foco está no cartão
   da lista, fora do cartão do lead, e o seletor continua à vista como se a mão
   estivesse nele. */
.cartao-lead:has(select[data-selecao-aberta]) .mover select { opacity: 1; border-color: var(--linha); background-color: var(--papel); color: var(--tinta-2); }
@media (hover: hover) {
  .cartao-oport:has(select[data-selecao-aberta]) > form.mover { pointer-events: auto; }
  .cartao-oport:has(select[data-selecao-aberta]) .rodape-cartao .quando { visibility: hidden; }
}