/*============================================================================
  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.39.0 — 08/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).
============================================================================*/
: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; }

/* 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; }
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; }
.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; }
.rede-ajuda { color: var(--texto-suave); font-size: 14px; }
.rede-legenda { display: flex; gap: 18px; align-items: center; padding: 4px 8px;
                font-size: 13px; color: var(--texto-suave); }
.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; }
/* celular: o painel toma a largura toda em vez de espremer o grafo */
@media (max-width: 640px) {
  .rede-socio { left: 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; }

/* ===== 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; } }