/* ============================================================================
   Sistema visual do painel. Uma folha só, servida por /sistema.css (rota em
   app/plataforma/auth_router.py), linkada pelos cinco HTML.

   POR QUE ARQUIVO SEPARADO, se a regra do projeto é HTML autocontido: pelo
   mesmo motivo da logo (ver o comentário em auth_router.py). O arquivo vem do
   MESMO servidor, pelo mesmo túnel, na mesma origem. Se ele não chega, o HTML
   também não chegou.

   ---------------------------------------------------------------------------
   TRÊS CAMADAS, e a regra que as separa (09/09/2026)

   1. PRIMITIVOS: as rampas. Dez passos por família. Ninguém na interface
      consome isto direto.
   2. SEMÂNTICOS: a intenção. `--cor-texto-secundario`, `--cor-negativa-fundo`.
      É o que a interface usa.
   3. APELIDOS: os nomes antigos, apontando para os novos. Existem porque os
      cinco HTML somam 64 tokens em uso e reescrever todos de uma vez seria
      uma edição enorme com chance grande de deixar uma tela sem cor.

   Trocar uma cor da marca passa a ser mexer em UMA linha da camada 1.

   COMO AS RAMPAS FORAM FEITAS, e por que não é a olho: cada passo é definido
   pelo CONTRASTE que precisa entregar sobre branco, e a luminosidade é
   resolvida numericamente para atingi-lo. O passo 700 é o piso de texto em
   toda família (5.1:1, acima dos 4.5:1 do WCAG AA) e o 600 é o piso de
   preenchimento e borda forte (4.0:1). É por isso que o verde 700 é bem mais
   escuro que o vermelho 700: verde puro é claro demais e precisa descer mais
   para o mesmo contraste. Escolher a olho produz rampas que parecem certas e
   reprovam em metade dos passos.

   O QUE ESTA FOLHA CORRIGE, medido no arquivo antes de escrever:
     - 30 tamanhos de fonte distintos, com degraus de meio pixel. Viraram 7,
       e agora cada um carrega a PRÓPRIA altura de linha: era isso que faltava
       para o texto parar de boiar.
     - 20 raios de borda e 20 sombras, quase todas usadas uma vez.
     - 4 neutros no total, e 84 `#fff` crus fora deles.
     - a paleta era cópia literal do `:root` de site/index.html.
   ============================================================================ */

:root{
  /* ==========================================================================
     CAMADA 1 - PRIMITIVOS

     Dez passos por família, mais o branco. Não use nada daqui direto na
     interface: use os semânticos da camada 2. Estes existem para que trocar a
     cor da marca seja mexer no matiz e regerar, não caçar hexadecimal.

     Leitura dos passos, igual em todas as famílias:
       100-200  tinta de fundo (estado, seleção, faixa)
       300      borda e divisor
       400-500  preenchimento fraco, ícone decorativo
       600      preenchimento forte, borda de destaque   (4.0:1)
       700      TEXTO e AÇÃO                              (5.1:1)
       800      hover de ação, texto sobre tinta          (7.0:1)
       900-1000 texto forte, superfície escura            (10:1, 14:1)
     ========================================================================== */

  --branco:#FFFFFF;

  /* neutro (neutro, viés quente: metade da saturação da versão anterior, que lia como bege) */
  --neutro-100:#F9F9F8;
  --neutro-200:#F0F0EF;
  --neutro-300:#DFDEDB;
  --neutro-400:#B3AFA9;
  --neutro-500:#9A958D;
  --neutro-600:#857F76;
  --neutro-700:#736E66;
  --neutro-800:#5D5953;
  --neutro-900:#45423D;
  --neutro-1000:#2E2C28;

  /* terracota (marca) */
  --terracota-100:#FDF7F6;
  --terracota-200:#FBEDE9;
  --terracota-300:#F1D9D1;
  --terracota-400:#DFA08D;
  --terracota-500:#D57E63;
  --terracota-600:#CE5C3A;
  --terracota-700:#B64D2E;
  --terracota-800:#914129;
  --terracota-900:#693423;
  --terracota-1000:#43241A;

  /* verde (positivo) */
  --verde-100:#F2FAF6;
  --verde-200:#DDF6E8;
  --verde-300:#CAE3D5;
  --verde-400:#79BD98;
  --verde-500:#4EA575;
  --verde-600:#3D8F62;
  --verde-700:#307B52;
  --verde-800:#236541;
  --verde-900:#184B2F;
  --verde-1000:#0E331F;

  /* vermelho (negativo) */
  --vermelho-100:#FEF7F6;
  --vermelho-200:#FEECEB;
  --vermelho-300:#F6D6D3;
  --vermelho-400:#E69C93;
  --vermelho-500:#DB7A6F;
  --vermelho-600:#D2584B;
  --vermelho-700:#C14233;
  --vermelho-800:#9A392E;
  --vermelho-900:#6F2E27;
  --vermelho-1000:#46211D;

  /* ambar (aviso) */
  --ambar-100:#FFF7ED;
  --ambar-200:#FFEED4;
  --ambar-300:#F6DAAF;
  --ambar-400:#E5A23D;
  --ambar-500:#CC861E;
  --ambar-600:#AD731C;
  --ambar-700:#95641C;
  --ambar-800:#76521C;
  --ambar-900:#563E1A;
  --ambar-1000:#372915;

  /* ==========================================================================
     CAMADA 2 - SEMÂNTICOS. É o que a interface consome.
     ========================================================================== */

  /* superfície: o fundo do app, o cartão sobre ele, e o invertido */
  --cor-superficie-app:#F9F9F8;
  --cor-superficie:#FFFFFF;
  --cor-superficie-2:#F9F9F8;
  --cor-superficie-invertida:#2E2C28;

  /* texto: três degraus e nada mais. O quarto sempre vira decoração. */
  --cor-texto:#2E2C28;
  --cor-texto-secundario:#736E66;
  --cor-texto-fraco:#857F76;
  --cor-texto-invertido:#FFFFFF;

  /* linha: divisor comum e borda de campo */
  --cor-linha:#DFDEDB;
  --cor-linha-forte:#B3AFA9;

  /* preenchimento de componente (trilha, barra, avatar vazio) */
  --cor-preenchimento-fraco:#F0F0EF;
  --cor-preenchimento:#DFDEDB;
  --cor-preenchimento-forte:#9A958D;

  /* intenção PRIMÁRIA: ação, item ativo, seleção, foco. Não é cor de superfície. */
  --cor-primaria-fundo-claro:#FDF7F6;
  --cor-primaria-fundo:#FBEDE9;
  --cor-primaria-borda:#F1D9D1;
  --cor-primaria-preenchimento:#CE5C3A;
  --cor-primaria:#B64D2E;
  --cor-primaria-hover:#914129;
  --cor-primaria-forte:#693423;

  /* intenção POSITIVA */
  --cor-positiva-fundo-claro:#F2FAF6;
  --cor-positiva-fundo:#DDF6E8;
  --cor-positiva-borda:#CAE3D5;
  --cor-positiva-preenchimento:#3D8F62;
  --cor-positiva:#307B52;
  --cor-positiva-forte:#236541;

  /* intenção NEGATIVA */
  --cor-negativa-fundo-claro:#FEF7F6;
  --cor-negativa-fundo:#FEECEB;
  --cor-negativa-borda:#F6D6D3;
  --cor-negativa-preenchimento:#D2584B;
  --cor-negativa:#C14233;
  --cor-negativa-forte:#9A392E;

  /* intenção AVISO */
  --cor-aviso-fundo-claro:#FFF7ED;
  --cor-aviso-fundo:#FFEED4;
  --cor-aviso-borda:#F6DAAF;
  --cor-aviso-preenchimento:#AD731C;
  --cor-aviso:#95641C;
  --cor-aviso-forte:#76521C;

  /* ==========================================================================
     TIPO. Sete degraus, e cada um carrega a PRÓPRIA altura de linha.

     Era isto que faltava: a folha anterior tinha os tamanhos e nenhuma altura
     por degrau, então todo texto herdava um valor único e o ritmo vertical
     nunca fechava. O atalho `--tipo-*` traz peso, tamanho e altura juntos e é
     o que o código novo deve usar; `--t1..--t7` continuam existindo porque os
     HTML somam 300 usos de `font-size:var(--tN)`.

     Peso 450 no corpo, e não 400, é deliberado: meio degrau a mais de tinta
     deixa 13px legível em tela densa sem parecer negrito.
     ========================================================================== */

  /* Figtree, e nao a fonte que o resto do mercado usa: e ela que ja vem embutida em base64
     nos painéis, e apontar o token para outra coisa criaria divergencia entre o que a folha
     declara e o que o navegador tem. A embutida e VARIAVEL (font-weight:400 800), entao o
     peso 450 do corpo funciona de verdade e nao cai no 400. */
  --fonte:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fonte-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t1:12px; --lh1:18px;   /* rótulo em caixa alta, meta */
  --t2:13px; --lh2:20px;   /* card, célula de tabela densa */
  --t3:14px; --lh3:21px;   /* corpo */
  --t4:16px; --lh4:24px;   /* subtítulo, título de painel lateral */
  --t5:20px; --lh5:28px;   /* título de página */
  --t6:26px; --lh6:34px;   /* número em destaque */
  --t7:34px; --lh7:42px;   /* número grande de KPI */

  --tipo-etiqueta:600 var(--t1)/var(--lh1) var(--fonte);
  --tipo-card:450 var(--t2)/var(--lh2) var(--fonte);
  --tipo-card-forte:600 var(--t2)/var(--lh2) var(--fonte);
  --tipo-corpo:450 var(--t3)/var(--lh3) var(--fonte);
  --tipo-corpo-forte:600 var(--t3)/var(--lh3) var(--fonte);
  --tipo-subtitulo:600 var(--t4)/var(--lh4) var(--fonte);
  --tipo-titulo:700 var(--t5)/var(--lh5) var(--fonte);
  --tipo-numero:700 var(--t6)/var(--lh6) var(--fonte);
  --tipo-numero-g:700 var(--t7)/var(--lh7) var(--fonte);
  --tipo-botao:600 var(--t3)/20px var(--fonte);

  /* ==========================================================================
     FORMA, ESPAÇO, ELEVAÇÃO, MOVIMENTO
     ========================================================================== */

  /* Quatro raios: campo e etiqueta, botão e card pequeno, cartão, painel. */
  --r-xs:4px; --r-s:6px; --r-m:8px; --r-l:12px;

  /* Catorze degraus de espaço. Os de 1 e 2px não são exagero: é o que separa
     uma linha de outra dentro de um card denso sem virar margem. */
  --e-0:0; --e-10:1px; --e-25:2px; --e-50:4px; --e-75:6px; --e-100:8px;
  --e-150:12px; --e-200:16px; --e-300:24px; --e-400:32px; --e-500:40px;
  --e-600:48px; --e-700:56px; --e-800:64px;

  /* Elevação com nome de PAPEL, não de intensidade: quem escreve escolhe o que
     a coisa é (um botão, um card levantado, um painel flutuante), e não quão
     escura fica a sombra. */
  --el-nenhuma:0 0 0 0 transparent;
  --el-botao:0 1px 2px 0 rgba(46,44,40,.05);
  --el-card:0 0 1px 1px rgba(46,44,40,.05), 0 1px 2px -2px rgba(46,44,40,.06), 0 1px 3px 0 rgba(46,44,40,.07);
  --el-card-hover:0 3px 5px 0 rgba(46,44,40,.08), 0 0 4px 0 rgba(46,44,40,.12);
  --el-topo:0 0 1px 1px rgba(46,44,40,.05), 0 1px 3px 0 rgba(46,44,40,.07);
  --el-flutuante:0 0 2px 0 rgba(46,44,40,.16), 0 3px 4px 0 rgba(46,44,40,.05), 0 1px 8px 0 rgba(46,44,40,.1);
  --el-sobreposta:0 0 2px 0 rgba(46,44,40,.24), 0 16px 24px 2px rgba(46,44,40,.05), 0 8px 10px -5px rgba(46,44,40,.1);

  --mov-rapido:.1s; --mov-medio:.2s; --mov-lento:.3s;
  --mov-entrada:cubic-bezier(0,0,.2,1);
  --mov-saida:cubic-bezier(.7,0,1,1);
  --mov-transicao:cubic-bezier(.5,0,.2,1);

  /* Medidos no painel em 09/09/2026, e nao herdados: valiam 52 e 232, enquanto a barra do topo
     tem 56px de altura e o trilho 236px de largura. O unico consumidor de --larg-rail centraliza
     um elemento fixo, entao os 4px de erro tiravam o elemento do centro de forma silenciosa. */
  --alt-topo:56px;
  --larg-rail:236px;
  /* As duas larguras do trilho lateral. Ele reserva a fechada no fluxo e abre para a aberta
     por cima do conteúdo, então as duas precisam ser nomes e não números soltos: `--larg-rail`
     continua sendo a aberta, que é a que o cálculo de centralização da barra de lote usa. */
  --rail-fechado:60px;
  --rail-aberto:var(--larg-rail);
  /* Quanto o trilho RESERVA no fluxo agora. É o que centraliza qualquer coisa `fixed` sobre a
     área de conteúdo, e mudou de significado em 09/09/2026: antes o trilho reservava sempre a
     largura aberta, hoje reserva a fechada e cresce por cima. Quem usa `--larg-rail` para
     centralizar passaria a errar por 176px sem ninguém perceber. */
  --rail-reservado:var(--rail-fechado);

  /* Linha de lista. Media antes: quatro tabelas do painel com quatro ritmos diferentes (44px no
     funil, 46 no Insights, 62 em Marketing, 67 em Pre-vendas) e cinco combinacoes de respiro
     (`0 12px`, `10px`, `11px 10px`). Nenhum desses numeros foi escolhido, eles foram acumulando.
     Agora sao dois: a ALTURA e o piso de uma linha de texto, e o RESPIRO vertical so entra na
     celula que tem duas linhas, que cresce a partir do piso em vez de inventar a propria altura.
     Os 44px vem da propria nota da tabela do funil: numa lista que se percorre com o olho
     procurando um nome, a altura e o que separa uma linha da outra. */
  --linha-lista:44px;
  --celula-x:12px;
  --celula-y:10px;

  /* ==========================================================================
     ETAPAS DO FUNIL

     Graduam do neutro ao verde conforme a venda avança, então a cor carrega
     progresso em vez de decorar. Saem da rampa como todo o resto: antes eram
     cinco hexadecimais escolhidos a dedo, que não conversavam entre si.
     ========================================================================== */
  --e1:#B3AFA9;
  --e2:#E5A23D;
  --e3:#AD731C;
  --e4:#4EA575;
  --e5:#307B52;

  /* ==========================================================================
     SUPERFÍCIE ESCURA DAS TELAS DE ACESSO (entrar, definir senha)

     Vem do herói do site e continua vindo: ali a tela é vitrine, vista por
     trinta segundos, e a marca é o assunto. É o painel que precisa sumir, não
     a porta de entrada dele.
     ========================================================================== */
  --noite:#1C221D;
  --noite-2:#242C25;
  --noite-borda:#39443A;
  --noite-texto:#EDEBE4;
  --noite-texto-2:#A8B0A6;
  --terracota-clara:#DFA08D;
  --pinheiro-claro:#4EA575;

  /* ==========================================================================
     CAMADA 3 - APELIDOS

     Os nomes que os cinco HTML já usam, apontando para os semânticos acima.
     Nada aqui é uma cor nova: é tradução. Some quando o último uso migrar.
     ========================================================================== */
  --n0:var(--branco);
  --n1:var(--neutro-100);
  --n2:var(--neutro-200);
  --n3:var(--neutro-200);
  --n4:var(--neutro-300);
  --n5:var(--neutro-400);
  --n6:var(--neutro-600);
  --n7:var(--neutro-700);
  --n8:var(--neutro-1000);

  --fundo:var(--cor-superficie-app);
  --superficie:var(--cor-superficie);
  --superficie-2:var(--cor-superficie-2);
  --creme:var(--cor-superficie-app);
  --tinta:var(--cor-texto);
  --secundario:var(--cor-texto-secundario);
  --linha:var(--cor-linha);
  --linha-forte:var(--cor-linha-forte);

  --acao:var(--cor-primaria-preenchimento);
  --acao-escura:var(--cor-primaria);
  --acao-fraca:var(--cor-primaria-fundo-claro);
  --acao-borda:var(--cor-primaria-borda);
  --terracota:var(--cor-primaria-preenchimento);
  --terracota-texto:var(--cor-primaria);
  --terracota-fraco:var(--cor-primaria-fundo-claro);
  --terracota-borda:var(--cor-primaria-borda);

  --ok:var(--cor-positiva);
  --ok-fraco:var(--cor-positiva-fundo-claro);
  --ok-borda:var(--cor-positiva-borda);
  --pinheiro:var(--cor-positiva);
  --pinheiro-fraco:var(--cor-positiva-fundo-claro);

  --erro:var(--cor-negativa);
  --erro-fraco:var(--cor-negativa-fundo-claro);
  --erro-borda:var(--cor-negativa-borda);

  --alerta:var(--cor-aviso);
  --alerta-fraco:var(--cor-aviso-fundo-claro);
  --alerta-borda:var(--cor-aviso-borda);
  --aviso:var(--cor-aviso);
  --aviso-texto:var(--cor-aviso);
  --aviso-fraco:var(--cor-aviso-fundo-claro);

  --r1:var(--r-s);
  --r2:var(--r-m);
  --r-pill:999px;
  --s1:var(--el-botao);
  --s2:var(--el-card-hover);
  --s3:var(--el-sobreposta);
  --e-1:var(--e-50);
  --e-2:var(--e-100);
  --e-3:var(--e-150);
  --e-4:var(--e-200);
  --e-5:var(--e-500);
  --e-6:var(--e-300);
  --e-8:var(--e-400);
}



/* ---------- base ---------- */

/* Foco visível em tudo que recebe teclado. Antes existiam 11 regras de :focus
   no painel inteiro, então quem navega por teclado não sabia onde estava. */
:focus-visible{
  outline:2px solid var(--acao);
  outline-offset:2px;
  border-radius:3px;
}

/* Dígito de largura fixa onde número se alinha em coluna. */
.num, .mk-num-tab, td.num, .valor, .col-soma{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}

/* ---------- esconder ----------
   `!important` aqui não é preguiça, é o conserto da causa. `.oculto{display:none}` morava
   no <style> de cada painel, no alto do arquivo, com especificidade 0-0-1-0. Qualquer
   `display` declarado depois empatava e vencia por ordem, então `class="veu oculto"` ficava
   VISÍVEL. Isso não é teoria: em 20/08/2026 abriu os dois modais empilhados em produção,
   com o Cancelar sem efeito aparente (ele repunha a classe, que continuava perdendo).

   O remendo que se usou quatro vezes foi criar um par de classes por caso
   (`.veu.oculto`, `.painel-busca.oculto`, `.quadro.oculto`, `.lista-caixa.oculto`), e num
   quinto caso desistir da classe e escrever `style.display` no JS. Cada novo componente com
   `display` próprio precisava lembrar de entrar nessa lista, e esquecer não dá erro: dá
   duas coisas na tela ao mesmo tempo.

   Esconder é absoluto por definição: não existe caso em que um elemento marcado como oculto
   deva aparecer. Uma declaração que vence sempre é exatamente o que a regra quer dizer. */
.oculto{display:none !important}
/* O `hidden` nativo pela mesma razão do `.oculto`, e pela quinta vez neste projeto: o valor
   inicial do atributo é `display:none` no user-agent, e QUALQUER `display` declarado numa
   folha o vence, porque autor ganha de user-agent. O selo de contagem do botão de filtros
   declarava `display:inline-flex` e aparecia com "0" dentro mesmo com `hidden` posto pelo
   JavaScript. Aqui a regra encerra a classe inteira de defeito, em vez de cada caso lembrar
   de usar `.oculto`. */
[hidden]{display:none !important}

/* ---------- gabarito de página ----------
   Toda guia com o mesmo esqueleto: título à esquerda, contexto embaixo dele,
   ação primária à direita, sempre nas mesmas coordenadas. Antes cada uma das
   treze guias inventava o próprio topo, e trocar de guia era reaprender a
   tela.

   Media antes: NOVE guias com um contêiner (`.barra`) e CINCO com <h1> solto,
   sem lugar nenhum para a ação primária, que é por que essas cinco nunca
   ganharam uma. O título saía em três tamanhos para a mesma coisa: 26px no
   topo de guia do painel do operador, 23px na ficha da unidade e 23px de novo
   no painel do dono, os dois últimos crus, fora da escala. E 26px é o degrau
   que esta folha reserva a NÚMERO em destaque (--t6), não a título de página.

   A linha de ação continua se chamando `.barra-acoes` porque esse é o nome
   que os seis usos do painel já têm, e três deles não são topo de guia (linha
   de botões dentro de célula de tabela e de cartão). Criar `.pagina-acoes` ao
   lado dela seria repetir aqui o defeito que esta folha existe para corrigir. */
.pagina-cab{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--e-4); flex-wrap:wrap; margin-bottom:var(--e-3);
}
.pagina-cab h1{
  font-size:var(--t5); font-weight:700; letter-spacing:-.015em; line-height:1.25;
  margin:0; text-wrap:balance;
}
.pagina-ctx{
  margin-top:2px; font-size:var(--t2); color:var(--n7);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.pagina-ctx .ponto{width:3px; height:3px; border-radius:50%; background:var(--n5); flex:0 0 3px}
.pagina-ctx .atencao{color:var(--alerta); font-weight:600}
.barra-acoes{display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap}

/* ---------- barra de filtro ----------
   Fica visível o tempo todo e guarda o que foi escolhido (ver o localStorage
   de cada tela). Antes filtro nenhum sobrevivia a um F5, e o operador
   remontava a mesma configuração todo dia. */
.barra-filtros{
  display:flex; align-items:center; gap:var(--e-2); flex-wrap:wrap;
  padding:9px 10px; background:var(--superficie);
  border:1px solid var(--linha); border-radius:var(--r2);
  margin-bottom:var(--e-3);
}
.barra-filtros .separador{width:1px; height:20px; background:var(--linha)}
.barra-filtros .direita{margin-left:auto; display:flex; align-items:center; gap:var(--e-2);
  font-size:var(--t1); color:var(--n6)}

.segmento{display:flex; background:var(--n2); border-radius:var(--r1); padding:2px; gap:2px}
.segmento button{
  padding:4px 10px; border:0; background:none; cursor:pointer; border-radius:4px;
  font:inherit; font-size:var(--t1); font-weight:600; color:var(--n7);
  display:flex; align-items:center; gap:5px;
  transition:background .12s ease, color .12s ease;
}
.segmento button svg{width:14px; height:14px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.segmento button.on{background:var(--superficie); color:var(--n8); box-shadow:var(--s1)}

.filtro-sel{
  /* `width:auto` e `flex:0 0 auto` não são detalhe: os painéis declaram
     `input, select, textarea{width:100%}` para os formulários, e sem isto os
     filtros esticavam um por linha, empurrando o conteúdo da tela para baixo.
     A classe vence o seletor de elemento por especificidade, então basta declarar. */
  width:auto; flex:0 0 auto;
  height:28px; border:1px solid var(--linha); border-radius:var(--r1);
  background:var(--superficie); font:inherit; font-size:var(--t1); font-weight:500;
  color:var(--n7); padding:0 26px 0 9px; outline:0; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918C85' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 7px center; background-size:12px;
}
.filtro-sel:hover{border-color:var(--linha-forte)}

/* ---------- filtros dentro de um botão só (09/09/2026) ----------
   Antes os filtros eram três `select` abertos na barra. O custo não é a largura, é o que eles
   diziam em repouso: "Responsável: todos", "Atividade: qualquer", "Valor: qualquer" ocupam a
   linha inteira para informar que NENHUM filtro está aplicado. Três controles gritando o vazio.

   Agora o botão diz "Filtros" e carrega a contagem do que está ligado; os controles moram
   dentro dele. O que está ativo sai do painel e vira etiqueta ao lado, com o × que desliga só
   aquele: quem filtrou precisa ver o que filtrou sem abrir nada, e desfazer sem procurar qual
   dos três selects foi.

   Os `select` continuam sendo os mesmos elementos, com os mesmos ids: quem mudou de lugar foi a
   caixa em volta. Nenhuma linha do filtro em si foi reescrita. */
.filtro-caixa{position:relative; flex:0 0 auto}
.btn-filtros{
  display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px;
  border:1px solid var(--linha); border-radius:var(--r1); background:var(--superficie);
  font:inherit; font-size:var(--t1); font-weight:600; color:var(--n7); cursor:pointer;
}
.btn-filtros:hover{border-color:var(--linha-forte); color:var(--tinta)}
.btn-filtros svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.btn-filtros[aria-expanded="true"]{border-color:var(--acao-borda); color:var(--acao-escura)}
/* A contagem some quando é zero, em vez de mostrar "0": um zero num selo pede leitura para
   dizer que não há nada, e "nada" já é o estado sem selo nenhum. */
.btn-filtros .conta{
  display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px;
  padding:0 4px; border-radius:var(--r-pill); background:var(--acao); color:#fff;
  font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.painel-filtros{
  position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:230px;
  display:flex; flex-direction:column; gap:10px; padding:12px;
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r2);
  box-shadow:var(--s3);
}
.painel-filtros label{display:flex; flex-direction:column; gap:4px; font-size:var(--t1);
  font-weight:700; color:var(--secundario); text-transform:uppercase; letter-spacing:.06em}
/* Dentro do painel o `select` volta a ocupar a linha: aqui não há disputa por largura com o
   resto da barra, e campo de largura variável numa pilha vertical desalinha a coluna. */
.painel-filtros .filtro-sel{width:100%; flex:1 1 auto; height:30px}
.painel-filtros .limpar-filtros{align-self:flex-start}

.etiquetas-filtro{display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0}
.etiqueta-filtro{
  display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 6px 0 10px;
  border:1px solid var(--acao-borda); border-radius:var(--r1);
  background:var(--acao-fraca); color:var(--acao-escura);
  font-size:var(--t1); font-weight:600; white-space:nowrap;
}
.etiqueta-filtro button{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  padding:0; border:0; border-radius:var(--r-xs); background:transparent; color:inherit;
  cursor:pointer; font:inherit;
}
.etiqueta-filtro button:hover{background:var(--acao-borda)}
.etiqueta-filtro svg{width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:2.6;
  stroke-linecap:round}
/* Filtro ligado se anuncia: sem isso a pessoa esquece que filtrou e acha que
   o sistema perdeu dado. */
.filtro-sel.ativo{border-color:var(--acao-borda); background-color:var(--acao-fraca); color:var(--acao-escura)}
.limpar-filtros{
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:var(--t1); font-weight:600; color:var(--acao-escura);
  padding:4px 6px; border-radius:4px;
}
.limpar-filtros:hover{background:var(--acao-fraca)}

.btn-icone{
  width:28px; height:28px; display:grid; place-items:center; border-radius:var(--r1);
  border:1px solid var(--linha); background:var(--superficie); color:var(--n7); cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.btn-icone:hover{background:var(--n2); color:var(--n8)}
.btn-icone svg{width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- ordenação de tabela ----------
   O arquivo inteiro tinha 8 ocorrências de sort, com dezenas de tabelas na
   tela: na prática nenhuma ordenava. Tabela que não ordena lê como relatório
   impresso, não como ferramenta. */
th.ordenavel{padding:0}
th.ordenavel button{
  width:100%; display:flex; align-items:center; gap:5px; padding:9px 12px;
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:var(--t1); font-weight:700; color:var(--n7); text-align:left;
}
th.ordenavel.n button{justify-content:flex-end}
th.ordenavel button:hover{color:var(--n8); background:var(--n3)}
th.ordenavel .seta{opacity:0; display:flex; transition:opacity .12s ease}
th.ordenavel.ord .seta{opacity:1}
th.ordenavel.ord button{color:var(--n8)}
th.ordenavel .seta svg{width:12px; height:12px; stroke:currentColor; fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}

/* Fixado, o trilho volta a reservar a largura aberta, e o que estiver centralizado sobre o
   conteúdo precisa acompanhar. `:has` no `:root` porque a barra de lote é `fixed` e não tem
   como ler o estado de um elemento que não é ancestral dela. Sem suporte a `:has`, o valor
   fica no fechado: a barra sai do centro no modo fixado, e não some. */
:root:has(.rail.fixo){--rail-reservado:var(--rail-aberto)}
/* Abaixo de 900px o trilho deita e vira fila: não reserva coluna nenhuma. */
@media (max-width:900px){:root{--rail-reservado:0px}}

/* ---------- ação em lote ---------- */
.barra-lote{
  position:fixed; left:calc(var(--rail-reservado) + (100vw - var(--rail-reservado)) / 2);
  bottom:20px; z-index:60;
  transform:translateX(-50%) translateY(calc(100% + 40px));
  display:flex; align-items:center; gap:10px;
  background:var(--n8); color:#fff; border-radius:var(--r2); padding:8px 10px 8px 14px;
  box-shadow:var(--s3); transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.barra-lote.on{transform:translateX(-50%) translateY(0)}
.barra-lote .sep{width:1px; height:18px; background:rgba(255,255,255,.2)}
.barra-lote button{
  border:0; background:none; cursor:pointer; font:inherit;
  font-size:var(--t1); font-weight:600; color:#fff; padding:5px 9px; border-radius:var(--r1);
  transition:background .12s ease;
}
.barra-lote button:hover{background:rgba(255,255,255,.14)}
/* Os dois <select> da barra sao os mesmos `.filtro-sel` da barra de filtro, e la eles sao
   escuros sobre claro. Aqui o fundo e a superficie escura, entao so as cores mudam: manter a
   mesma forma e o que faz os dois lerem como o mesmo controle. */
.barra-lote .filtro-sel{
  background-color:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); color:#fff;
}
.barra-lote .filtro-sel:hover{border-color:rgba(255,255,255,.4)}
.barra-lote .filtro-sel option{color:var(--n8)}

/* ---------- seleção na lista ---------- */
th.col-sel, td.col-sel{width:34px; padding-left:12px; padding-right:0}
.col-sel input{
  width:15px; height:15px; margin:0; cursor:pointer; accent-color:var(--acao);
  vertical-align:middle;
}
tr.sel{background:var(--acao-fraca)}
tr.sel td{border-color:var(--acao-borda)}

/* ---------- painel lateral ----------
   Abrir uma unidade escondia as treze guias e ocupava a tela inteira, então
   voltar custava a lista, a rolagem e o filtro. Aqui o quadro continua vivo
   atrás, e Alt+seta anda de unidade sem fechar (com Alt, e não seta pura,
   porque o corpo tem textarea e campo de data). */
.veu-painel{
  position:fixed; inset:0; background:rgba(35,33,32,.28); z-index:70;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.veu-painel.on{opacity:1; pointer-events:auto}
/* `visibility` junto do `transform`, e nao `display`: um painel so deslocado para fora da tela
   continua no fluxo de foco, e o Tab levava o cursor para dentro de um painel fechado, com a
   pagina rolando atras para perseguir um campo invisivel. `display:none` resolveria isso e
   mataria a animacao, porque nao se anima de `none` para `flex`.

   O atraso na transicao de `visibility` e o que faz as duas coisas conviverem: ao abrir ela vale
   na hora (delay zero) e o transform desliza; ao fechar ela so vale depois dos 200ms, entao o
   painel some do foco exatamente quando termina de sair da tela. */
.painel-lateral{
  position:fixed; top:0; right:0; bottom:0; width:min(468px,100vw); z-index:80;
  background:var(--superficie); border-left:1px solid var(--linha); box-shadow:var(--s3);
  transform:translateX(100%); visibility:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.3,1), visibility 0s linear .2s;
  display:flex; flex-direction:column;
}
.painel-lateral.on{transform:none; visibility:visible; transition-delay:0s}
.painel-lateral .cabecalho{
  padding:12px 14px; border-bottom:1px solid var(--linha);
  display:flex; align-items:center; gap:var(--e-2); flex:0 0 auto;
}
.painel-lateral .navegacao{display:flex; gap:2px; margin-right:auto}
.painel-lateral .corpo{
  overflow-y:auto; padding:16px 18px 24px;
  display:flex; flex-direction:column; gap:18px;
}
.painel-lateral h2{
  font-size:var(--t4); font-weight:700; letter-spacing:-.01em; margin:0;
}
/* Cada bloco do corpo: rotulo em caixa alta, conteudo embaixo. Um so padrao para os cinco
   blocos, senao o painel vira uma pilha de cartoes com cinco espacamentos diferentes. */
.painel-lateral .bloco{display:flex; flex-direction:column; gap:var(--e-2)}
.painel-lateral .bloco > .rot{
  font-size:var(--t1); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--n6);
}
.painel-lateral .par{
  display:flex; justify-content:space-between; gap:var(--e-3);
  font-size:var(--t2); padding:5px 0; border-bottom:1px solid var(--n3);
}
.painel-lateral .par:last-child{border-bottom:0}
.painel-lateral .par .v{color:var(--n8); font-weight:600; text-align:right}
.painel-lateral .par .k{color:var(--n7)}
.painel-lateral .vazio-bloco{font-size:var(--t2); color:var(--n6)}

/* ---------- carregamento ----------
   Existiam 2 ocorrências de "carregando" no painel inteiro: trocar de guia
   mostrava branco e a tela pulava quando o dado chegava. */
.osso{
  background:linear-gradient(90deg,var(--n3) 25%,var(--n2) 37%,var(--n3) 63%);
  background-size:400% 100%; animation:osso-onda 1.3s ease infinite; border-radius:4px;
}
@keyframes osso-onda{0%{background-position:100% 0}100%{background-position:0 0}}
.osso-card{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--r1);
  padding:10px; display:flex; flex-direction:column; gap:7px;
}

/* ---------- avisos de estado ---------- */
.chip-parada{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; color:var(--alerta); background:var(--alerta-fraco);
  border-radius:var(--r-pill); padding:2px 7px;
}
.chip-parada svg{width:11px; height:11px; stroke:currentColor; fill:none;
  stroke-width:2.4; stroke-linecap:round}


/* ---------- cabecalho de tabela que gruda (09/09/2026) ----------
   Levantamento de todas as guias com 200 pousadas semeadas: das doze, so as tres de quadro
   tinham algum `position:sticky`; nas outras nove nao havia nenhum. Esta regra resolve o caso
   das tabelas, que e onde a falta doia mais: Marketing tem 200 linhas a 62px, ou seja 12.400px
   de rolagem em que o nome de cada coluna some no primeiro arrasto e a pessoa passa a ler
   numeros sem saber do que sao. O que nao e tabela continua sem grudar, de proposito: o trilho
   da esquerda ja e sticky e mostra a guia ativa o tempo todo, entao ninguem se perde de onde
   esta; o que se perde numa lista longa e o cabecalho dela.

   O deslocamento vem de uma variavel, e nao de um numero escrito aqui, porque `sticky` mede a
   partir do ANCESTRAL QUE ROLA, nao da janela: solto na pagina o cabecalho tem que descer os
   56px da barra do topo, mas dentro de um contentor com overflow proprio (a caixa de rolagem
   lateral da tabela, um modal) esse mesmo contentor e a referencia, e ali o deslocamento certo
   e zero. Cada contentor que rola declara o proprio valor; quem nao declara herda o da barra. */
table thead th{
  position:sticky; top:var(--gruda-tabela, var(--alt-topo)); z-index:2;
  background:var(--n2); padding-left:var(--celula-x); padding-right:var(--celula-x);
  /* Duas sombras, e as duas resolvem coisas diferentes.
     A INTERNA e a linha de baixo, e e sombra e nao `border-bottom` porque com
     `border-collapse:collapse` a borda pertence a tabela e nao acompanha a celula grudada:
     ela some no meio da rolagem e o cabecalho fica boiando sobre as linhas.
     A EXTERNA e o degrau. Sem ela, o cabecalho grudado com fundo quase branco sobre linhas
     brancas nao le como cabecalho fixo, le como linha cortada pela metade: o defeito que o
     Rodrigo apontou em 09/09/2026 olhando a tabela de leads de Marketing. O fundo tambem
     desceu de --n1 para --n2 pelo mesmo motivo, porque 2% de luminancia de diferenca nao
     separa duas superficies claras. */
  box-shadow:inset 0 -1px 0 var(--linha), 0 6px 8px -6px rgba(46,44,40,.22);
}
.modal, .transcricao, #retorno-leads{--gruda-tabela:0px}

/* A caixa de rolagem lateral so existe onde a tabela NAO cabe, e essa e a razao de ela viver
   dentro de um @media. Um `overflow-x` fixo custava o sticky inteiro: qualquer overflow diferente
   de `visible` torna a caixa o contexto de rolagem dos DOIS eixos, e como ela tem a altura do
   proprio conteudo, nao sobra folga vertical nenhuma para o cabecalho grudar. Era exatamente o
   que acontecia na tabela de 200 linhas de Marketing: o `thead` acompanhava as linhas e sumia
   atras da barra do topo. Em tela larga a caixa nao declara overflow, o contexto volta a ser a
   pagina, e o cabecalho gruda de verdade. */
@media (max-width:1100px){
  .rolagem-tabela{overflow-x:auto; --gruda-tabela:0px}
}


/* ---------- dobra: a lista de uma ação atrás de um clique (09/09/2026) ----------
   O botão é discreto de propósito. Ele não é a ação, é o caminho até ela: competir em peso com
   o título do bloco faria a tela oferecer duas coisas onde há uma. */
.dobra{margin-top:10px}
.dobra-btn{
  display:inline-flex; align-items:center; gap:6px; padding:4px 8px 4px 4px;
  border:0; border-radius:var(--r1); background:none; cursor:pointer;
  font:inherit; font-size:var(--t2); font-weight:700; color:var(--secundario);
}
.dobra-btn:hover{background:var(--n2); color:var(--tinta)}
.dobra-btn svg{
  width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  transform:rotate(-90deg); transition:transform .16s var(--mov-entrada);
}
.dobra-btn[aria-expanded="true"] svg{transform:none}
@media (prefers-reduced-motion:reduce){.dobra-btn svg{transition:none}}
/* A contagem fica no botão porque é ela que decide se vale abrir: "4" e "40" pedem decisões
   diferentes, e quem só quer saber o tamanho não precisa mais que isso. */
.dobra-conta{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px;
  padding:0 5px; border-radius:var(--r-pill); background:var(--n2); color:var(--n7);
  font-size:var(--t1); font-weight:700; font-variant-numeric:tabular-nums;
}
.dobra-btn:hover .dobra-conta{background:var(--n3)}
.dobra-corpo{margin-top:9px}