/*============================================================================
  Sistema........: FortisData
  Arquivo........: estilo.css
  Caminho........: /var/www/fortisdata/app/static/estilo.css
  Módulo.........: Folha de estilo do painel
  Camada.........: Apresentação (Web)
  Versão.........: v1.56.0 — 09/2026
  Autor..........: André Gomes Alay Esteves
  Data...........: 11/07/2026

  Descrição:
    Estilo único do painel: layout, cartões, formulários, tabelas, gráfico.

  Resumo das alterações:

    v1.0.0 — Versão inicial (André Gomes Alay Esteves, jul/2026).
    v1.1.0 — Tela de segurança: pesquisa, chips de tipo, ordenação por
             coluna, bandeira do país e rolagem horizontal da tabela
             (André Gomes Alay Esteves, jul/2026).
    v1.2.0 — Nome do usuário no topo e submenu de Administração
             (André Gomes Alay Esteves, jul/2026).
    v1.2.1 — Submenu abre no clique (details/summary) em vez de hover
             (André Gomes Alay Esteves, jul/2026).
    v1.2.2 — Select dentro de formulário (situação da busca) alinhado à
             altura e ao estilo dos demais campos (André Gomes Alay
             Esteves, jul/2026).
    v1.2.3 — Altura explícita (42px) em inputs e selects de formulário:
             mesma altura em qualquer navegador (André Gomes Alay
             Esteves, jul/2026).
    v1.2.4 — Linha de formulário: campos de texto absorvem a folga
             (flex 1) e os fixos (campo-fixo) ficam colados; botão
             alinhado à base em vez de esticado (André Gomes Alay
             Esteves, jul/2026).
    v1.2.5 — Rótulo sempre acima do campo nas linhas de formulário,
             mesmo em campos estreitos como UF (André Gomes Alay
             Esteves, jul/2026).
    v1.3.0 — Imagem do captcha do registro (fundo claro para as letras
             escuras do SVG) (André Gomes Alay Esteves, jul/2026).
    v1.4.0 — Player de áudio do captcha e lista de requisitos da senha
             com marcação ao vivo (André Gomes Alay Esteves, jul/2026).
    v1.5.0 — Linha "nenhum registro" das seções complementares do detalhe
             de CNPJ (André Gomes Alay Esteves, jul/2026).
    v1.6.0 — Seletor do ciclo (mensal/anual) no card de plano (André Gomes
             Alay Esteves, jul/2026).
    v1.7.0 — Página da rede de relações: canvas, legenda e status
             (André Gomes Alay Esteves, jul/2026).
    v1.8.0 — Logomarca oficial em imagem no topo e nos heros: chip branco
             arredondado atrás da arte (tema escuro) (André Gomes Alay
             Esteves, jul/2026).
    v1.8.1 — input[type=number] (Raio km da busca) com o mesmo estilo e
             altura dos demais campos (André Gomes Alay Esteves, jul/2026).
    v1.9.0 — Tabelas de resultado mais compactas: células com fonte 14px e
             CNPJ (code) sem quebra de linha (André Gomes Alay Esteves,
             jul/2026).
    v1.9.1 — .botao com altura idêntica em <button> e <a> (line-height
             normalizado) (André Gomes Alay Esteves, jul/2026).
    v1.10.0 — Painel CRM: .tabela-rolavel e tr.destaque (que os templates
              já usavam sem estilo definido), .metrica-valor-texto para
              cartão com valor textual (UFs de atuação) (André Gomes Alay
              Esteves, jul/2026).
    v1.11.0 — main.largo (1400px) para páginas de tabela larga, via bloco
              classe_main do base.html, e .nao-quebra (célula sem quebra
              de linha: CEP, CRM/UF); usado no painel CRM (André Gomes
              Alay Esteves, jul/2026).
    v1.12.0 — .tabela-vinculos (dossiê CRM): table-layout fixed com
              larguras por coluna — CNPJ inteiro sem quebra (160px),
              estabelecimento absorve a folga (André Gomes Alay Esteves,
              jul/2026).
    v1.13.0 — Troca das logos: .marca img vira o escudo quadrado (padding
              simétrico) e .hero-logo vira a logomarca retangular (altura
              fixa, largura automática) (André Gomes Alay Esteves,
              jul/2026).
    v1.14.0 — .cartoes-planos: os 5 planos lado a lado (grid de 5 colunas
              fixas em telas largas, auto-fit no restante); usado na
              landing e na página pública de planos (André Gomes Alay
              Esteves, jul/2026).
    v1.15.0 — Retrofit mobile (1ª leva): menu hambúrguer com navegação em
              coluna (≤900px), submenu Administração estático, cards com
              rolagem lateral para tabelas largas; em ≤640px tipografia e
              hero compactos, formulários empilhados e nome do usuário
              oculto (André Gomes Alay Esteves, jul/2026).
    v1.16.0 — Retrofit mobile (2ª leva): .tabela-cartoes colapsa em cards
              empilhados (≤640px, rótulo via data-rotulo) — usada nos
              resultados da busca; canvas da rede com touch-action none
              (gestos de toque no rede.js v1.2.0) (André Gomes Alay
              Esteves, jul/2026).
    v1.17.0 — Classes utilitárias (sem-margem, titulo-esq, m-topo-*, larg-*,
              bloco, em-linha, flutua-dir, m-vert-32) substituem todos os
              atributos style= dos templates: CSP passa a valer com
              style-src sem unsafe-inline (André Gomes Alay Esteves,
              jul/2026).
    v1.18.0 — .uf-grade / .uf-opcao: grade de pílulas clicáveis para o
              filtro multi-UF do painel CRM (substitui o <select multiple>
              nativo) (André Gomes Alay Esteves, jul/2026).
    v1.19.0 — .uf-grade fixa em 13 colunas (26 UFs = 2 linhas exatas, em vez
              das 3 do auto-fill); 6 colunas no celular (André Gomes Alay
              Esteves, jul/2026).
    v1.20.0 — Bloco .doc-* (assinatura de endpoint, campos, .alerta-info,
              .etiqueta-aviso): página de documentação de API no painel
              (André Gomes Alay Esteves, jul/2026).
    v1.21.0 — Cores da rede por situação da empresa, controles do canvas e
              estilo de tela cheia (André Gomes Alay Esteves, jul/2026).
    v1.22.0 — Autocomplete (.campo-auto*): dropdown de sugestões do campo
              Órgão na busca de servidores (André Gomes Alay Esteves,
              jul/2026).
    v1.23.0 — Demonstração da API na landing (.demo-exemplos, #demo-saida)
              (André Gomes Alay Esteves, jul/2026).
    v1.24.0 — .sessao-aviso: caixa fixa do aviso de expiração da sessão
              (André Gomes Alay Esteves, jul/2026).
    v1.25.0 — Gráfico do painel: total do dia acima da barra (.barra-valor)
              e .barra-area para o percentual não contar os rótulos
              (André Gomes Alay Esteves, jul/2026).
    v1.25.1 — .barra-valor ancorado ao topo da própria barra (position
              absolute sobre .barra) (André Gomes Alay Esteves, jul/2026).
    v1.26.0 — .bases/.bases-num: tabela de volumes na página Sobre (André
              Gomes Alay Esteves, jul/2026).
    v1.27.0 — Radar de risco: .radar-barra/.radar-busca/.radar-por e
              cabeçalhos de tabela ordenáveis (th a) (André Gomes Alay
              Esteves, jul/2026).
    v1.28.0 — th.col-atual: coluna do plano atual destacada na tabela
              comparativa do painel (André Gomes Alay Esteves, jul/2026).
    v1.29.0 — .exportar-grupo/.exportar-cartao: grupo de botões de exportar
              (PDF/Excel/JSON/XML) no dossiê e nas listagens (André Gomes
              Alay Esteves, jul/2026).
    v1.30.0 — .botao-completo: botão do relatório PDF completo (âmbar, para
              distinguir a ação pesada) (André Gomes Alay Esteves, jul/2026).
    v1.31.0 — Painel lateral do sócio na rede (.rede-palco/.rede-socio*) e
              cor do nó-resumo do excedente (André Gomes Alay Esteves,
              jul/2026).
    v1.32.0 — Configurações do usuário: abas (.config-abas), formulário
              estreito (.form-estreito) e lista de leitura (.config-dl)
              (André Gomes Alay Esteves, jul/2026).
    v1.33.0 — .alerta-aviso (âmbar) e .config-check (caixa "usar mesmo
              assim"): aviso de senha já usada nas Configurações (André
              Gomes Alay Esteves, jul/2026).
    v1.34.0 — .doc-preview / .doc-preview-leg: imagem de prévia do dashboard
              na página Power BI (André Gomes Alay Esteves, jul/2026).
    v1.35.0 — .botao-perigo: botão vermelho para destacar ações pesadas
              (backup do banco de dados); .cartoes-backup: os 5 tipos de
              backup lado a lado (André Gomes Alay Esteves, jul/2026).
    v1.36.0 — .hero-sub-largo: intro sem o cap de 560px, para caber em uma
              linha nas páginas largo (usado na tela de backups) (André Gomes
              Alay Esteves, jul/2026).
    v1.37.0 — .frescor-dom: subcabeçalho de domínio na tabela do Painel de
              Frescor (/adm/frescor) (André Gomes Alay Esteves, jul/2026).
    v1.38.0 — Seletor de idioma: bandeira em SVG (.bandeira), com moldura de
              1px e contorno no idioma ativo — o sublinhado do ativo não
              aparecia num elemento sem texto (André Gomes Alay Esteves,
              jul/2026).
    v1.39.0 — Menu do nome do usuário: abre à direita (senão escapa da
              janela), com rótulos de seção e a lista de idiomas (André
              Gomes Alay Esteves, ago/2026).
    v1.40.0 — Mapa de atuação redesenhado para o painel ESCURO: a escala vai
              do apagado ao vivo (a antiga, clara→escura, sumia no fundo) e a
              sigla ganhou halo, legível sobre qualquer bolha. Some o @media
              prefers-color-scheme, que nunca valeu aqui — o tema não depende
              do sistema do cliente (André Gomes Alay Esteves, ago/2026).
    v1.49.0 — Caminho mais curto na rede (.rede-caminho*): painel da cadeia
              à esquerda do palco, elo em âmbar e marca do nó concentrador
              (André Gomes Alay Esteves, ago/2026).
    v1.50.0 — .ajuda-tela: o link para o guia ao lado do título da tela de
              consulta, em peso de texto normal para não competir com o
              cabeçalho (André Gomes Alay Esteves, set/2026).
    v1.51.0 — Dicas do dossiê de exemplo (.tem-dica, .dica-marca,
              .dica-painel): sublinhado pontilhado no rótulo, marca ? ao
              lado e painel flutuante posicionado por JS (André Gomes Alay
              Esteves, set/2026).
    v1.52.0 — Arranjo manual e 3D na rede: .botao-mini.ativo (estado ligado
              de Travar e 3D) e .rede-cor-fixado, o anel tracejado da
              legenda do nó preso à mão (André Gomes Alay Esteves,
              set/2026).
    v1.53.0 — main.fluido: largura acompanha a tela, sem teto fixo (a rede
              é desenho, não texto, e 1000px espremiam o grafo num monitor
              largo). A legenda da rede passa a quebrar em linhas inteiras
              (flex-wrap + nowrap por item) em vez de espremer cada rótulo
              em três linhas, e a ajuda em prosa ganha teto próprio para
              continuar legível (André Gomes Alay Esteves, set/2026).
    v1.54.0 — .ajuda-caixa/.ajuda-corpo: a ajuda de uma tela recolhida num
              details, com os parágrafos em colunas quando aberta. Na rede
              os três parágrafos comiam a altura que faltava ao desenho.
              Mais .larg-12, a medida de um campo de CNPJ (André Gomes Alay
              Esteves, set/2026).
    v1.55.0 — .menu-mega/.menu-secao: menu suspenso em COLUNAS, para o de
              Documentação, que tem 31 páginas e em uma coluna só ficava
              mais alto que a janela. Encosta à direita (é largo) e volta a
              uma coluna abaixo de 900px (André Gomes Alay Esteves,
              set/2026).
    v1.56.0 — a.abre-aba: a seta que avisa que o link abre em outra aba,
              nos links de entidade (André Gomes Alay Esteves, set/2026).
============================================================================*/
:root {
  --fundo: #0f172a;
  --fundo-cartao: #1e293b;
  --borda: #334155;
  --texto: #e2e8f0;
  --texto-suave: #94a3b8;
  --primaria: #38bdf8;
  --primaria-escura: #0284c7;
  --ok: #34d399;
  --erro: #f87171;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #0b1222; padding: 2px 6px; border-radius: 4px; font-size: 90%; }

/* topo */
.topo {
  display: flex; align-items: center; gap: 24px;
  padding: 12px 28px; background: var(--fundo-cartao);
  border-bottom: 1px solid var(--borda);
}
.marca { font-size: 20px; font-weight: 800; color: var(--texto); letter-spacing: .5px; }
.marca span { color: var(--primaria); }
.marca:hover { text-decoration: none; }
/* a arte oficial é azul-marinho: chip branco para o tema escuro */
.marca img { display: block; height: 44px; width: 44px; background: #fff; padding: 5px; border-radius: 10px; }
.topo nav { display: flex; gap: 18px; flex: 1; }
.topo nav a { color: var(--texto-suave); font-weight: 500; }
.topo nav a:hover { color: var(--texto); text-decoration: none; }
.topo-direita { display: flex; align-items: center; gap: 16px; }
.topo-publico { justify-content: space-between; }
.idiomas { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
/* line-height 0 tira o espaço que a linha de texto reservaria embaixo do SVG */
.idiomas a { display: inline-flex; line-height: 0; text-decoration: none; opacity: .5; }
.idiomas a:hover { opacity: 1; }
/* a moldura de 1px separa a parte branca da bandeira (França, EUA) do fundo */
.bandeira { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
/* o idioma em uso fica opaco e contornado: bandeira sozinha não diz qual está
   ativo, e em tela pequena o title do hover não existe */
.idiomas a.idioma-ativo { opacity: 1; }
.idiomas a.idioma-ativo .bandeira { box-shadow: 0 0 0 2px var(--ok); }
.usuario-nome { color: var(--texto); font-weight: 600; font-size: 14px; white-space: nowrap; }

/* submenu do topo (details/summary: abre no clique, sem navegar) */
.menu-drop { position: relative; display: inline-block; }
.menu-drop summary {
  list-style: none; cursor: pointer; user-select: none;
  color: var(--ok); font-weight: 500;
}
.menu-drop summary::-webkit-details-marker { display: none; }
.menu-drop summary:hover { color: var(--texto); }
.menu-drop-area {
  display: none; position: absolute; left: -14px; top: 100%;
  padding-top: 14px; z-index: 60;
}
.menu-drop[open] .menu-drop-area { display: block; }
.menu-drop-itens {
  display: flex; flex-direction: column; min-width: 240px;
  background: var(--fundo-cartao); border: 1px solid var(--borda);
  border-radius: 10px; padding: 6px; box-shadow: 0 10px 24px #0009;
}
.menu-drop-itens a {
  color: var(--texto-suave); padding: 8px 12px; border-radius: 6px;
  font-weight: 500; white-space: nowrap;
}
.menu-drop-itens a:hover { background: #0b1222; color: var(--texto); text-decoration: none; }

/* Link que abre em OUTRA ABA (empresa, pessoa, servidor, parlamentar). Quem
   investiga percorre uma lista e abre vários registros para comparar: perder
   a lista a cada clique custa caro. A seta avisa antes do clique, que é o que
   a prática de acessibilidade pede de quem abre aba sem ser pedido; o title
   diz o mesmo para leitor de tela. Só vale para link de ENTIDADE: menu,
   paginação e "voltar" continuam navegando na mesma aba. */
a.abre-aba::after {
  content: "↗"; font-size: .78em; margin-left: 3px;
  opacity: .45; vertical-align: super; line-height: 0;
}
a.abre-aba:hover::after { opacity: .8; }

/* Menu em COLUNAS (Documentação): são 31 páginas, e em uma coluna só a
   lista fica mais alta que a janela. As seções viram colunas de grade e o
   painel encosta à direita, senão escapa da janela por ser largo. Em tela
   estreita volta a uma coluna, que o topo já vira menu sanfona. */
.menu-mega { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 2px 10px; align-items: start; }
.menu-secao { display: flex; flex-direction: column; }
.menu-drop-area:has(.menu-mega) { left: auto; right: -6px; }
@media (max-width: 900px) {
  .menu-mega { grid-template-columns: 1fr; }
  .menu-drop-area:has(.menu-mega) { right: auto; left: -14px; }
}

/* menu que abre no nome do usuário: encosta à DIREITA, senão a lista escapa
   da janela — é o último elemento do topo */
.menu-usuario .menu-drop-area { left: auto; right: -6px; }
.menu-usuario summary { color: var(--texto); font-weight: 600; font-size: 14px; }
/* rótulo de seção dentro do menu (Configurações, Idioma): separa os grupos
   sem precisar de um <hr>, que ficaria pesado num menu curto */
.menu-titulo {
  color: var(--texto-suave); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 8px 12px 4px; opacity: .7;
}
.menu-titulo + a { margin-top: 0; }
/* idioma com bandeira: alinha o desenho ao texto sem deslocar a linha */
.menu-drop-itens a.item-idioma { display: flex; align-items: center; gap: 8px; }
.item-idioma .bandeira-item { display: inline-flex; line-height: 0; }
.item-idioma.idioma-ativo { color: var(--texto); }
.item-idioma.idioma-ativo .bandeira { box-shadow: 0 0 0 2px var(--ok); }

/* layout */
main { max-width: 1000px; margin: 32px auto; padding: 0 20px; }
main.centrado { max-width: 420px; margin-top: 8vh; }
main.largo { max-width: 1400px; }
/* Fluido: ocupa a tela toda, seja qual for. Para página cujo conteúdo é
   DESENHO (a rede), onde um teto fixo só desperdiça monitor. */
main.fluido { max-width: none; }
h1 { font-size: 24px; margin: 0 0 20px; }
h2 { font-size: 17px; margin: 0 0 12px; }

/* cartões */
.cartao {
  background: var(--fundo-cartao); border: 1px solid var(--borda);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 20px;
}
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 20px; }
/* os 5 planos lado a lado nas páginas públicas (main.largo = 1400px) */
.cartoes-planos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .cartoes-planos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
/* os 5 tipos de backup lado a lado (página em main.largo) */
.cartoes-backup { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) {
  .cartoes-backup { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.cartao-auth { margin-top: 12px; }
.metrica { display: flex; flex-direction: column; gap: 4px; }
.metrica-rotulo { color: var(--texto-suave); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.metrica-valor { font-size: 32px; font-weight: 700; }

/* formulários */
label { display: block; margin-bottom: 14px; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=number] {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  background: #0b1222; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; font-size: 15px;
  box-sizing: border-box; height: 42px;
}
input:focus { outline: 2px solid var(--primaria-escura); border-color: transparent; }
/* select dentro de label acompanha os inputs (o select global, usado nas
   telas de administração, continua compacto); a altura explícita iguala
   os dois — sem ela cada navegador dá ao select uma altura própria */
label select {
  width: 100%; margin-top: 6px; padding: 0 12px;
  background: #0b1222; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; font-size: 15px;
  box-sizing: border-box; height: 42px;
}
label select:focus { outline: 2px solid var(--primaria-escura); border-color: transparent; }
small { color: var(--texto-suave); }
.botao {
  background: var(--primaria-escura); color: #fff; border: 0;
  padding: 10px 20px; border-radius: 8px; font-size: 15px; font-weight: 600;
  cursor: pointer;
  /* mesma altura como <button> e como <a> (o body dá 1.55 aos links) */
  display: inline-block; line-height: 1.2; box-sizing: border-box;
}
.botao:hover { background: var(--primaria); color: #06202e; }
.botao-mini { padding: 4px 10px; font-size: 13px; }
/* estado LIGADO de um botão que alterna (Travar, 3D): sem isso não dá para
   saber se a física está congelada olhando a barra */
.botao-mini.ativo { background: var(--primaria); color: #06202e; }
.exportar-grupo { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.exportar-grupo small { color: var(--texto-suave); }
.exportar-cartao { padding: 10px 14px; margin-bottom: 12px; }
.botao-completo { background: #92400e; }
.botao-completo:hover { background: #7c360b; }
.botao-perigo { background: #b91c1c; color: #fff; }
.botao-perigo:hover { background: #991b1b; color: #fff; }
.botao-link { background: none; border: 0; color: var(--primaria); cursor: pointer; font-size: 14px; padding: 0; }
.botao-link:hover { text-decoration: underline; }
.perigo { color: var(--erro); }
.linha-acao { display: flex; gap: 10px; margin-bottom: 20px; align-items: flex-end; }
/* campos de texto absorvem a folga da linha; os marcados como campo-fixo
   (UF, situação) mantêm a própria largura, colados na sequência */
.linha-acao label { flex: 1 1 0; margin-bottom: 0; }
.linha-acao label.campo-fixo { flex: 0 0 auto; }
/* o campo fica sempre ABAIXO do texto do rótulo, mesmo quando é estreito
   (ex.: UF com 4rem, que caberia ao lado do texto) */
.linha-acao label input, .linha-acao label select { display: block; }
/* campo com autocomplete (Órgão na busca de servidores): o wrapper vira o
   contexto de posicionamento do dropdown e ocupa a linha como um input
   comum (mesmo flex/width dos campos vizinhos, p/ não desbalancear) */
.campo-auto { position: relative; flex: 0 1 auto; width: 100%; }
.campo-auto-lista {
  position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  margin: 2px 0 0; padding: 6px; list-style: none;
  background: var(--fundo-cartao); border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 10px 24px #0009;
  max-height: 320px; overflow-y: auto;
}
.campo-auto-lista[hidden] { display: none; }
.campo-auto-lista li {
  padding: 8px 12px; border-radius: 6px; cursor: pointer;
  color: var(--texto-suave); font-weight: 500; white-space: normal;
}
.campo-auto-lista li:hover,
.campo-auto-lista li.ativa { background: #0b1222; color: var(--texto); }
.campo-auto-lista mark { background: none; color: var(--ok); font-weight: 600; }
.campo-auto-vazio { color: var(--texto-suave); cursor: default; font-style: italic; }
.campo-auto-vazio:hover { background: none; color: var(--texto-suave); }

.campo-cnpj { max-width: 320px; }
.campo-codigo { font-size: 22px; letter-spacing: 6px; text-align: center; max-width: 220px; }
.rodape-auth { color: var(--texto-suave); margin-top: 16px; }

/* honeypot: invisível para humanos, irresistível para robôs */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* filtro multi-UF (painel CRM): grade de pílulas em vez de <select multiple>.
   O checkbox real fica oculto; o estado marcado vem do :has(input:checked). */
.filtro-uf { margin-bottom: 20px; }
.filtro-uf-titulo { font-size: 13px; font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.filtro-uf-ajuda { font-size: 13px; color: var(--texto-suave); margin: 0 0 10px; }
/* são sempre 26 UFs (27 menos a UF da conta) → 13 colunas = exatamente 2
   linhas; no celular reflui para 6 colunas para não estourar na horizontal */
.uf-grade { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 6px; max-width: 760px; margin-bottom: 14px; }
@media (max-width: 640px) { .uf-grade { grid-template-columns: repeat(6, 1fr); } }
.uf-opcao { position: relative; display: flex; align-items: center;
  justify-content: center; padding: 9px 0; border: 1px solid var(--borda);
  border-radius: 6px; background: var(--fundo-cartao); color: var(--texto-suave);
  font-size: 14px; font-weight: 600; cursor: pointer; user-select: none;
  transition: border-color .12s, color .12s, background .12s; }
.uf-opcao:hover { border-color: var(--primaria-escura); color: var(--texto); }
.uf-opcao input { position: absolute; opacity: 0; width: 0; height: 0; }
.uf-opcao:has(input:checked) { background: var(--primaria-escura);
  border-color: var(--primaria); color: #fff; }
.uf-opcao:has(input:focus-visible) { outline: 2px solid var(--primaria);
  outline-offset: 2px; }

/* alertas e etiquetas */
.alerta { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.alerta-erro { background: #7f1d1d33; border: 1px solid var(--erro); color: #fecaca; }
.alerta-ok { background: #06402633; border: 1px solid var(--ok); color: #bbf7d0; }
/* aviso (âmbar): nem erro nem sucesso — ex.: senha já usada antes */
.alerta-aviso { background: #78350f33; border: 1px solid #d97706; color: #fde68a; }
.etiqueta {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: var(--borda);
}
.etiqueta-ok { background: #064026; color: var(--ok); }
.etiqueta-off { background: #7f1d1d55; color: var(--erro); }

/* tabelas */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borda); }
th { color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
td { font-size: 14px; }
/* CNPJ formatado (19 caracteres) nunca quebra no meio */
td code { white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* gráfico de barras (CSS puro) */
.grafico { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-top: 8px; }
.barra-coluna { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; }
/* a barra ocupa o espaço que sobra acima da data: o data-altura em % passa a
   ser relativo só a esta área, não à coluna inteira (antes a barra de 100%
   empurrava o rótulo para fora do gráfico) */
.barra-area { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center;
  padding-top: 16px; }  /* espaço do rótulo da barra mais alta */
.barra { position: relative; width: 100%; max-width: 42px; background: var(--primaria-escura);
  border-radius: 4px 4px 0 0; min-height: 2px; }
/* ancorado ao topo da própria barra: acompanha cada altura em vez de ficar
   numa linha fixa no alto, distante das barras baixas */
.barra-valor { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 3px; font-size: 11px; font-weight: 600; color: var(--texto); }
.barra-coluna:hover .barra { background: var(--primaria); }
.barra-coluna small { font-size: 10px; color: var(--texto-suave); }

/* planos */
.plano ul { padding-left: 18px; margin: 8px 0; }
.plano-atual { border-color: var(--primaria); }
.secoes { color: var(--texto-suave); }
/* coluna do plano atual, destacada na tabela comparativa do painel */
th.col-atual { color: var(--primaria); border-bottom: 2px solid var(--primaria); }

/* consulta */
.resultado dl { display: grid; grid-template-columns: 220px 1fr; gap: 6px 16px; margin: 16px 0; }
.resultado dt { color: var(--texto-suave); }
.resultado dd { margin: 0; }
.lista-simples { padding-left: 18px; color: var(--texto-suave); }
.chave-nova { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.qr { background: #fff; border-radius: 12px; padding: 12px; width: fit-content; margin: 12px auto; }
.qr svg { display: block; width: 220px; height: 220px; }
.segredo { text-align: center; word-break: break-all; }
.vazio { color: var(--texto-suave); }

/* administração */
.nav-adm { color: var(--ok) !important; }
.acoes { display: flex; gap: 12px; align-items: center; }
.form-inline { display: inline; }
select {
  background: #0b1222; color: var(--texto); border: 1px solid var(--borda);
  border-radius: 6px; padding: 6px 8px; font-size: 14px;
}

/* segurança — IPs bloqueados */
.seg-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.campo-busca {
  flex: 1; padding: 9px 12px; background: #0b1222; color: var(--texto);
  border: 1px solid var(--borda); border-radius: 8px; font-size: 14px;
}
.seg-contador { color: var(--texto-suave); font-size: 13px; white-space: nowrap; }
.seg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  background: #0b1222; color: var(--texto-suave); border: 1px solid var(--borda);
  border-radius: 99px; padding: 3px 12px; font-size: 12px; cursor: pointer;
}
.chip b { color: var(--texto); font-weight: 600; }
.chip:hover { border-color: var(--primaria-escura); color: var(--texto); }
.etiqueta-tipo { background: #0b1222; border: 1px solid var(--borda); font-family: ui-monospace, monospace; font-size: 11px; }
.bandeira { font-size: 17px; line-height: 1; }
.tabela-rolagem { overflow-x: auto; }
/* Radar de risco: barra de busca + tamanho de página; cabeçalhos ordenáveis */
.radar-barra { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.radar-busca { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.radar-busca input[type=text] { min-width: 260px; }
.radar-por a { margin: 0 2px; }
th a { color: inherit; text-decoration: none; white-space: nowrap; }
th a:hover { text-decoration: underline; }
.seg-motivo small { display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
th.ordenavel { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenavel:hover { color: var(--texto); }
th.ordenavel::after { content: ' ↕'; opacity: .35; }
th.ordenavel.asc::after { content: ' ↑'; opacity: 1; color: var(--primaria); }
th.ordenavel.desc::after { content: ' ↓'; opacity: 1; color: var(--primaria); }
tr.inativo { opacity: .55; }
.seg-fonte { color: var(--texto-suave); font-size: 12px; margin: 12px 0 0; }
.texto-suave { color: var(--texto-suave); }

/* landing */
.hero { text-align: center; padding: 48px 0 24px; }
.hero-logo {
  height: 96px; width: auto; padding: 12px 20px;
  background: #fff; border-radius: 22px;
}
.hero-titulo { font-size: 44px; font-weight: 800; margin: 12px 0 4px; letter-spacing: .5px; }
.hero-titulo span { color: var(--primaria); }
.hero-slogan { font-size: 21px; color: var(--texto); margin: 4px 0; }
.hero-sub { color: var(--texto-suave); max-width: 560px; margin: 8px auto 24px; }
/* intro sem o cap de 560px: usa a largura da página largo (cabe em 1 linha) */
.hero-sub.hero-sub-largo { max-width: none; }
/* subcabeçalho de domínio na tabela do Painel de Frescor */
.frescor-dom { padding-top: 16px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .5px; font-size: 12px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.botao-grande { padding: 13px 28px; font-size: 16px; }
.botao-vazado { background: transparent; border: 1px solid var(--primaria-escura); color: var(--primaria); }
.botao-vazado:hover { background: var(--primaria-escura); color: #fff; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0 40px; text-align: center; }
.secao-titulo { font-size: 26px; text-align: center; margin: 40px 0 20px; }
.passo { position: relative; padding-top: 48px; text-align: center; }
.passo-num {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; line-height: 30px; text-align: center;
  background: var(--primaria-escura); color: #fff; border-radius: 50%; font-weight: 700;
}
.codigo pre {
  background: #0b1222; border: 1px solid var(--borda); border-radius: 8px;
  padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.5;
}
.codigo-resposta { color: var(--ok); }
.preco { font-size: 30px; font-weight: 800; margin: 6px 0 12px; }
.preco small { font-size: 14px; font-weight: 400; color: var(--texto-suave); }
.rodape { text-align: center; color: var(--texto-suave); font-size: 13px; margin: 48px 0 24px; }
.credito { text-align: center; color: var(--texto-suave); font-size: 13px; margin: 24px 0 0; }
.rodape-links { margin-bottom: 8px; }

/* rede de relações societárias */
.rede-cartao { padding: 8px; }
.rede-cartao canvas { display: block; width: 100%; cursor: grab; border-radius: 8px; touch-action: none; }
/* a página é fluida, mas prosa em linha de 2000px não se lê */
.rede-ajuda { color: var(--texto-suave); font-size: 14px; max-width: 110ch; }
/* Ajuda recolhida: numa tela cujo conteúdo é desenho, a altura gasta com
   texto sai do gráfico. Fechada por padrão; aberta, os parágrafos vão para
   colunas em vez de empilhar. */
.ajuda-caixa { margin: 0 0 14px; }
.ajuda-caixa > summary { cursor: pointer; color: var(--primaria); font-size: 14px;
                         width: max-content; }
.ajuda-caixa > summary:hover { text-decoration: underline; }
.ajuda-caixa[open] > summary { margin-bottom: 10px; }
.ajuda-corpo { display: grid; gap: 10px 28px;
               grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ajuda-corpo > p { margin: 0; }
.rede-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
                padding: 4px 8px; font-size: 13px; color: var(--texto-suave); }
/* cada item da legenda é indivisível: sem isto o flex espreme "Empresa
   ativa" em três linhas em vez de mandar o item inteiro para a linha de
   baixo */
.rede-legenda > span { white-space: nowrap; }
.rede-cor { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
            margin-right: 6px; vertical-align: -1px; }
.rede-cor-empresa { background: #38bdf8; }
/* empresa por situação cadastral: ativa azul, baixada vermelha, demais cinza */
.rede-cor-ativa { background: #38bdf8; }
.rede-cor-baixada { background: #f87171; }
.rede-cor-outras { background: #94a3b8; }
.rede-cor-pessoa { background: #34d399; border-radius: 50%; }
/* excedente do sócio (losango âmbar): "há mais participações do que cabe" */
.rede-cor-resumo { background: #fbbf24; transform: rotate(45deg); }
.rede-controles { display: inline-flex; gap: 6px; align-items: center; }
.rede-controles .botao-mini { min-width: 30px; }
/* tela cheia: o cartão vira a tela toda e o canvas ocupa o que sobra */
.rede-cartao:fullscreen { background: var(--fundo); padding: 8px; }
.rede-cartao:fullscreen canvas { height: calc(100vh - 60px); }
.rede-status { margin-left: auto; }

/* Painel do sócio: sobreposto ao canvas, à direita. Há sócios com milhares
   de participações — o desenho não comporta, então a lista completa (com
   busca e paginação) vive aqui e o grafo só recebe o que for escolhido. */
.rede-palco { position: relative; }
.rede-socio { position: absolute; top: 8px; right: 8px; bottom: 8px; width: 330px;
              max-width: calc(100% - 16px); display: flex; flex-direction: column;
              gap: 8px; padding: 10px; border: 1px solid var(--borda);
              border-radius: 8px; background: var(--fundo-cartao);
              box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.rede-socio[hidden] { display: none; }
.rede-socio-topo { display: flex; align-items: flex-start; gap: 8px; }
.rede-socio-topo > div { flex: 1; min-width: 0; }
.rede-socio-topo strong { display: block; font-size: 14px; word-break: break-word; }
.rede-socio-total { display: block; font-size: 12px; color: var(--texto-suave); }
.rede-socio-busca { width: 100%; box-sizing: border-box; }
.rede-socio-lista { flex: 1; overflow-y: auto; list-style: none; margin: 0;
                    padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rede-socio-item { display: flex; align-items: center; gap: 8px; padding: 6px;
                   border: 1px solid var(--borda); border-radius: 6px; font-size: 12px; }
.rede-socio-item > div { flex: 1; min-width: 0; }
.rede-socio-item b { display: block; font-weight: 600; word-break: break-word; }
.rede-socio-meta { color: var(--texto-suave); }
.rede-socio-item.no-grafo { opacity: .55; }
.rede-socio-rodape { display: flex; align-items: center; gap: 6px; font-size: 12px;
                     color: var(--texto-suave); }
.rede-socio-rodape .botao-vazado { margin-left: auto; }
.rede-socio-vazio { color: var(--texto-suave); font-size: 12px; padding: 8px 0; }
/* Caminho mais curto: a cadeia em texto, à ESQUERDA do palco (o painel do
   sócio já ocupa a direita e os dois podem ficar abertos juntos). */
/* nó preso à mão: anel tracejado, igual ao que o canvas desenha em volta */
.rede-cor-fixado { background: transparent; border: 1px dashed #e2e8f0;
                   border-radius: 50%; width: 9px; height: 9px; }
.rede-cor-caminho { background: #f59e0b; }
.rede-caminho { position: absolute; top: 8px; left: 8px; bottom: 8px; width: 330px;
                max-width: calc(100% - 16px); display: flex; flex-direction: column;
                gap: 8px; padding: 10px; border: 1px solid var(--borda);
                border-radius: 8px; background: var(--fundo-cartao);
                box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.rede-caminho[hidden] { display: none; }
.rede-caminho-lista { flex: 1; overflow-y: auto; margin: 0; padding: 0 0 0 22px;
                      display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.rede-caminho-item { padding: 4px 6px; border: 1px solid var(--borda);
                     border-radius: 6px; cursor: pointer; }
.rede-caminho-item:hover { border-color: #f59e0b; }
.rede-caminho-item b { display: block; font-weight: 600; word-break: break-word; }
.rede-caminho-item.e-pessoa b { color: #34d399; }
/* o elo (qualificação e data) puxado para baixo do nó que o origina */
.rede-caminho-elo { display: block; color: #f59e0b; }
.rede-caminho-concentrador { display: block; color: #fbbf24; }
/* celular: o painel toma a largura toda em vez de espremer o grafo */
@media (max-width: 640px) {
  .rede-socio { left: 8px; width: auto; }
  .rede-caminho { right: 8px; width: auto; }
}

/* Configurações do usuário (Perfil · Segurança · Conta) */
.config-abas { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 20px;
               border-bottom: 1px solid var(--borda); }
.config-abas a { padding: 8px 16px; color: var(--texto-suave);
                 text-decoration: none; border-bottom: 2px solid transparent;
                 margin-bottom: -1px; }
.config-abas a:hover { color: var(--texto); }
.config-abas a.ativa { color: var(--primaria); border-bottom-color: var(--primaria); }
/* formulário de coluna única e estreito (perfil, senha, dados da conta) */
.form-estreito { max-width: 420px; }
.form-estreito label { display: block; margin-bottom: 14px; }
.form-estreito input { width: 100%; box-sizing: border-box; }
.form-estreito input:disabled { opacity: .6; cursor: not-allowed; }
.form-estreito small { display: block; color: var(--texto-suave); margin-top: 4px; }
/* pares rótulo/valor só de leitura */
.config-dl { display: grid; grid-template-columns: max-content 1fr;
             gap: 8px 20px; margin: 0; }
.config-dl dt { color: var(--texto-suave); }
.config-dl dd { margin: 0; }
/* prévia do dashboard (Power BI) na página de documentação */
.doc-preview { display: block; width: 100%; max-width: 900px; height: auto;
               border: 1px solid var(--borda); border-radius: 12px; margin: 10px 0 4px; }
.doc-preview-leg { color: var(--texto-suave); font-size: 12px; margin: 0 0 14px; }
/* caixa "usar mesmo assim" quando a senha já foi usada antes */
.config-check { display: flex; align-items: flex-start; gap: 8px;
                margin-bottom: 14px; font-size: 14px; }
.config-check input { width: auto; margin-top: 3px; }

/* escolha do ciclo (mensal/anual) no card do plano */
.ciclo-escolha { display: block; margin: 0 0 10px; font-size: 14px; }
.ciclo-escolha select { margin-left: 6px; }

/* detalhe de CNPJ: seção complementar consultada e sem ocorrências */
.sem-registros { color: var(--texto-suave); font-size: 14px; margin: 4px 0 12px; }

/* captcha do registro: as letras do SVG são escuras — fundo claro fixo */
.captcha-imagem { display: block; width: fit-content; background: #f1f5f9;
                  border: 1px solid var(--borda); border-radius: 8px;
                  padding: 2px 6px; margin: 6px 0; user-select: none; }
.captcha-audio { display: block; width: 100%; max-width: 220px; height: 34px;
                 margin: 0 0 6px; }

/* requisitos da senha: o JS marca cada item cumprido com .ok */
.senha-reqs { list-style: none; margin: 6px 0 12px; padding: 0;
              font-size: 13px; color: var(--texto-suave); }
.senha-reqs li::before { content: '●'; margin-right: 8px; }
.senha-reqs li.ok { color: var(--ok); }
.senha-reqs li.ok::before { content: '✔'; }
.senha2-erro { color: var(--erro); }

/* painel CRM: tabela larga rola na horizontal; vínculo fora da UF em
   destaque; cartão de métrica com valor textual (lista de UFs) */
.tabela-rolavel { overflow-x: auto; }
tr.destaque td { background: #7f1d1d1a; }
.nao-quebra { white-space: nowrap; }
/* dossiê: colunas de largura fixa; estabelecimento (sem width) absorve
   a folga; mínimo garante leitura antes de acionar a rolagem lateral */
.tabela-vinculos { table-layout: fixed; min-width: 1100px; }
.tabela-vinculos th:nth-child(1) { width: 85px; }   /* CRM/UF */
.tabela-vinculos th:nth-child(2) { width: 90px; }   /* UF de atuação */
.tabela-vinculos th:nth-child(3) { width: 200px; }  /* especialidade */
.tabela-vinculos th:nth-child(5) { width: 130px; }  /* município */
.tabela-vinculos th:nth-child(6) { width: 160px; }  /* CNPJ inteiro */
.tabela-vinculos th:nth-child(7) { width: 90px; }   /* CEP */
.tabela-vinculos th:nth-child(8) { width: 80px; }   /* carga h/sem */
.metrica-valor-texto { font-size: 20px; font-weight: 600; padding: 8px 0; }

/* ===== utilitárias (substituem style= inline; exigência da CSP) ===== */
.sem-margem { margin: 0; }
.titulo-esq { margin-left: 0; text-align: left; }
.m-topo-4 { margin-top: .4rem; }
.m-topo-6 { margin-top: .6rem; }
.m-vert-32 { margin: 32px 0; }
.bloco { display: block; }
.em-linha { display: inline; }
.flutua-dir { float: right; }
.larg-4 { width: 4rem; }
.larg-5 { width: 5rem; }
.larg-6 { width: 6rem; }
.larg-8 { width: 8rem; }
.larg-9 { width: 9rem; }
.larg-12 { width: 12rem; }        /* 00.000.000/0001-00 */

/* ===== mobile (retrofit responsivo) ===== */
.menu-btn {
  display: none; background: none; border: 1px solid var(--borda);
  color: var(--texto); font-size: 20px; line-height: 1;
  border-radius: 8px; padding: 6px 10px; cursor: pointer;
}

@media (max-width: 900px) {
  .topo { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; }
  .menu-btn { display: block; order: 2; margin-left: auto; }
  .topo-direita { order: 3; flex: 0 0 100%; justify-content: flex-end; }
  .topo nav { order: 4; flex: 0 0 100%; display: none; flex-direction: column; gap: 0; }
  .topo.menu-aberto nav { display: flex; }
  .topo nav > a { padding: 10px 2px; border-top: 1px solid var(--borda); }
  /* submenu Administração deixa de flutuar: vira bloco na coluna */
  .menu-drop summary { padding: 10px 2px; border-top: 1px solid var(--borda); }
  .menu-drop-area { position: static; padding-top: 4px; }
  .menu-drop-itens { min-width: 0; box-shadow: none; }
  /* tabela larga rola dentro do card em vez de estourar a tela */
  .cartao { overflow-x: auto; }
}

@media (max-width: 640px) {
  main { margin: 16px auto; padding: 0 14px; }
  /* o nome do usuário some no celular por falta de espaço — mas agora ele É o
     gatilho do menu (Configurações + idioma). Some o TEXTO, fica o ícone: sem
     isso o celular perderia o acesso ao menu inteiro. */
  .menu-usuario summary { font-size: 0; }
  .menu-usuario summary::after { content: '\2699'; font-size: 20px; }
  .usuario-nome:not(summary) { display: none; }
  .hero-logo { height: 64px; padding: 8px 14px; border-radius: 16px; }
  .hero-titulo { font-size: 30px; }
  .hero-slogan { font-size: 17px; }
  .secao-titulo { font-size: 22px; margin: 28px 0 14px; }
  .botao-grande { padding: 11px 20px; font-size: 15px; }
  .linha-acao { flex-direction: column; align-items: stretch; }
  .linha-acao label, .linha-acao label.campo-fixo { flex: 1 1 auto; }
  .campo-cnpj { max-width: none; }
  .resultado dl { grid-template-columns: 1fr; gap: 2px; }
  .resultado dt { margin-top: 10px; }
  /* tabela-chave vira cards empilhados: cabeçalho some e cada célula
     mostra o próprio rótulo (data-rotulo) à esquerda do valor */
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody { display: block; }
  .tabela-cartoes tr {
    display: block; border: 1px solid var(--borda); border-radius: 10px;
    padding: 8px 12px; margin-bottom: 10px; background: var(--fundo-cartao);
  }
  .tabela-cartoes td {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; padding: 5px 0; border: none; text-align: right;
  }
  .tabela-cartoes td::before {
    content: attr(data-rotulo);
    color: var(--texto-suave); font-size: 13px; text-align: left;
    flex-shrink: 0;
  }
}

/* Documentação de API no painel (página /painel/docs/compras) */
.doc-sig { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.doc-verb {
  font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px;
  letter-spacing: .05em; color: #06231a; background: var(--ok);
  padding: 4px 10px; border-radius: 6px;
}
.doc-path {
  font-family: ui-monospace, monospace; font-size: 15px; color: var(--texto);
  overflow-x: auto; white-space: nowrap;
}
.doc-path b { color: var(--primaria); font-weight: 700; }
.doc h2 { font-size: 18px; margin: 28px 0 8px; }
.doc h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin: 18px 0 8px; }
.doc p { max-width: 70ch; }
.doc .destaque { color: var(--primaria); }
.doc td .campo { font-family: ui-monospace, monospace; font-size: 12.5px;
  white-space: nowrap; }
.doc td .tipo { font-family: ui-monospace, monospace; font-size: 11.5px;
  color: var(--texto-suave); }
.alerta-info { background: #0c4a6e33; border: 1px solid var(--primaria-escura);
  color: #bae6fd; }
.etiqueta-aviso { background: #78350f66; color: #fbbf24; }

/* demonstração da API na landing (sem cadastro) */
.demo-exemplos { color: var(--texto-suave); font-size: 13px; margin: 10px 0 4px; }
.demo-exemplos a { margin: 0 2px; }
#demo-saida:empty { display: none; }
#demo-form { margin-top: 12px; }

/* tabela de volumes das bases (página Sobre) */
.bases td { padding: 6px 4px; }
.bases-num { text-align: right; font-weight: 600; white-space: nowrap; }

/* aviso de sessão prestes a expirar (fixo no rodapé, não empurra o conteúdo) */
.sessao-aviso {
  position: fixed; bottom: 16px; right: 16px; z-index: 50; max-width: 380px;
  display: flex; align-items: center; gap: 12px; box-shadow: 0 4px 16px #0008;
}
.sessao-aviso[hidden] { display: none; }
@media (max-width: 640px) { .sessao-aviso { left: 16px; right: 16px; max-width: none; } }

/* ---------------------------------------------------------------- mapa de
   atuação. As cores vêm de CLASSE, nunca de style inline: a CSP do projeto
   proíbe style-src unsafe-inline. O raio da bolha vai no atributo `r`, que é
   atributo de SVG e não estilo, então pode ser calculado no template. */
.mapa-atuacao { max-width: 100%; height: auto; display: block; margin: 4px auto 0; }
/* Mapa COROPLÉTICO: cada UF é o polígono da malha do IBGE, pintado com a cor
   da sua fatia. A versão de bolhas sobre um contorno desenhado à mão foi
   substituída — o desenho não parecia o Brasil e a bolha escondia o estado. */
.mapa-uf { stroke: #0f172a; stroke-width: 0.6; }
/* O painel é ESCURO FIXO (:root já é escuro): a escala vai do apagado ao
   VIVO, e não do claro ao escuro — em fundo escuro quem tem mais valor tem
   de brilhar mais. Nada de @media prefers-color-scheme: o tema não depende
   do sistema operacional do cliente. */
.mapa-n0 { fill: #263449; }
.mapa-n1 { fill: #1d4e7a; }
.mapa-n2 { fill: #2b79b4; }
.mapa-n3 { fill: #3f9bdb; }
.mapa-n4 { fill: #6cbaf2; }
.mapa-n5 { fill: #a5d8fb; }
/* estado onde a empresa TEM unidade: o mesmo polígono, com o traço marcado */
.mapa-presente { stroke: #f97316; stroke-width: 2; stroke-linejoin: round; }
/* realce ao passar o mouse: confirma qual estado a dica está descrevendo */
.mapa-uf:hover { filter: brightness(1.35); }
/* linha do estado pequeno até seu nome na coluna da direita */
.mapa-guia { stroke: #64748b; stroke-width: 0.7; }
/* halo escuro (paint-order: stroke) mantém a sigla legível sobre qualquer
   cor da escala, sem depender de acertar um limiar de luminosidade */
.mapa-sigla { font-size: 10px; font-weight: 600; fill: #f8fafc;
              stroke: #0f172a; stroke-width: 2.6; paint-order: stroke;
              text-anchor: middle; pointer-events: none; }
/* fora do mapa não há o que contrastar: sem halo e alinhado à esquerda */
.mapa-sigla-fora { fill: #cbd5e1; stroke: none; text-anchor: start; }
/* linha da própria empresa numa tabela de concorrentes: sem isto, achar-se
   entre dez nomes grandes exige contar linhas */
/* grade das seções na consulta em lote: muitas caixas curtas, e uma coluna
   só deixaria a tela alta demais */
/* fila de pedidos do lote */
.lote-h2 { font-size: 15px; margin: 18px 0 6px; }
.lote-pedidos { display: grid; gap: 10px; margin-bottom: 18px; }
.lote-cartao { border: 1px solid var(--borda); border-radius: 8px;
               padding: 10px 14px; background: var(--fundo-cartao); }
.lote-novo { border-color: #2563eb; }
.lote-cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* <progress> nativo: a CSP proíbe estilo inline, então a largura não pode
   vir do template nem do JS — quem desenha o preenchimento é o navegador */
progress.lote-barra { width: 100%; max-width: 460px; height: 10px;
                      margin: 8px 0 2px; }
progress.lote-barra::-webkit-progress-bar { background: #1e293b; border-radius: 5px; }
progress.lote-barra::-webkit-progress-value { background: #3b82f6; border-radius: 5px; }
progress.lote-barra::-moz-progress-bar { background: #3b82f6; border-radius: 5px; }
/* Coluna de número/valor: NUNCA quebra. "R$ 2.996.419.603,63" partido em duas
   linhas é ilegível, e o alinhamento à direita com dígitos de mesma largura é
   o que deixa a coluna comparável de relance. */
.num-col { white-space: nowrap; text-align: right;
           font-variant-numeric: tabular-nums; }
/* O CABEÇALHO segue o conteúdo. Rótulo à esquerda sobre número à direita é o
   que fazia a linha de títulos parecer solta da tabela — e a base comum
   (vertical-align) alinha "PREÇO MEDIANO", que ocupa duas linhas, com os
   títulos de uma linha só. */
th.num-col { text-align: right; vertical-align: bottom; white-space: normal; }
thead th { vertical-align: bottom; line-height: 1.25; }
/* busca do eixo do produto: dois campos e o botão na mesma linha */
.prod-busca { display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
              margin: 14px 0 20px; }
.prod-busca .campo-largo { max-width: 340px; }
.prod-h2 { font-size: 20px; margin: 26px 0 4px; }
/* a empresa que o cliente pediu, situada no mercado consultado */
.prod-empresa { border-left: 4px solid #2563eb; }
.lote-acoes { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; }
/* botão discreto: a ação é auxiliar e não deve competir com "Gerar planilha" */
.botao-fraco { background: transparent; color: var(--texto-suave);
               border: 1px solid var(--borda); border-radius: 6px;
               padding: 4px 12px; font-size: 12.5px; cursor: pointer; }
.botao-fraco:hover { color: var(--texto); border-color: #64748b; }
.lote-contador { margin-left: auto; font-variant-numeric: tabular-nums; }
.lote-secoes { display: grid; gap: 4px 18px; margin-top: 6px;
               grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.lote-secao { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.campo-largo { width: 100%; max-width: 720px; font-family: inherit;
               font-size: 13px; padding: 8px; border-radius: 6px;
               border: 1px solid var(--borda); background: var(--fundo-cartao);
               color: var(--texto); }
.linha-destaque td { background: rgba(96, 165, 250, .14); font-weight: 600; }
.mapa-legenda-texto { font-size: 12px; color: var(--texto-suave, #94a3b8);
                      margin: 6px 0 0; text-align: center; }

/* Link de ajuda ao lado do título de uma tela. Fica em peso e tamanho de
   texto normal, e não de cabeçalho, para não competir com o título: é um
   atalho para o guia, não uma seção da página. */
.ajuda-tela { font-size: 14px; font-weight: 400; margin-left: 12px;
              white-space: nowrap; }

/* Dicas do dossiê de exemplo. O rótulo com explicação ganha sublinhado
   pontilhado e uma marca "?" discreta; o texto sai num painel flutuante,
   posicionado pelo JS, porque a explicação é longa demais para caber num
   title= do navegador (que também não quebra linha nem é lido com calma). */
.tem-dica { cursor: help; text-decoration: underline dotted;
            text-underline-offset: 3px; outline-offset: 2px; }
.dica-marca { display: inline-block; margin-left: 5px; font-size: 10px;
              font-weight: 700; line-height: 14px; width: 14px; height: 14px;
              text-align: center; border-radius: 50%;
              background: var(--acento, #60a5fa); color: #0f172a;
              vertical-align: text-top; }
.dica-painel { position: absolute; z-index: 60; padding: 10px 12px;
               border: 1px solid var(--borda); border-radius: 8px;
               background: var(--fundo-cartao); color: var(--texto);
               font-size: 13px; line-height: 1.45; font-weight: 400;
               box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }