:root {
  --azul-base: #0D2750;
  --azul-escuro: #0A1D3C;
  --azul-claro: #3D5C86;
  --cor-primaria: var(--azul-base);
  --cor-primaria-escura: var(--azul-escuro);
  --cor-sobre-primaria: #ffffff;
  --cor-fundo: #f8fafc;
  --cor-card: #ffffff;
  --cor-texto: #1e293b;
  --cor-texto-suave: #334155;
  --cor-borda: #cbd5e1;
  --cor-desabilitado: #475569;
  --cor-erro: #8b1e1e;
  --cor-sucesso: #609361;
  --cor-superficie-suave: #e6ecf4;
  --espaco-xs: 0.35rem;
  --espaco-sm: 0.65rem;
  --espaco-md: 1rem;
  --espaco-lg: 1.5rem;
  --raio: 6px;
  --sombra: 0 1px 3px rgba(15, 23, 42, 0.12);
  --fonte: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 0.9rem;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

img { max-width: 100%; }

/* Atalhos de acessibilidade */
.atalhos { position: absolute; list-style: none; margin: 0; padding: 0; z-index: 100; }
.atalhos a {
  position: absolute; left: -9999px; top: 0;
  background: #000; color: #fff; padding: .5rem 1rem;
}
.atalhos a:focus { left: 0; outline: 3px solid #ffcc00; outline-offset: 2px; }

/* :focus-visible, não :focus puro — clique de mouse já dá foco a link/
   botão na maioria dos navegadores, e :focus sozinho mostrava o
   contorno também nesse caso (era isso, não outline nativo do
   navegador nem :active customizado). :focus-visible só casa quando o
   navegador julga o indicador necessário (navegação por teclado). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* Cabeçalho */
header {
  background: #ffffff;
  color: var(--cor-texto);
  padding: 0.9rem 1.5rem 0;
  position: relative;
  z-index: 40;
  border-bottom: 1px solid var(--cor-borda);
}
header a { color: var(--cor-primaria); text-decoration: none; }

.barra-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  padding-bottom: 0.75rem;
}

.marca {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.marca-logo-img {
  display: block;
  height: 8.25rem;
  width: auto;
}

.caixa-captcha {
  margin-top: 0.9rem;
}

.barra-sessao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

/* Faixa de ambiente (desenvolvimento e homologação; produção não tem).
   Violeta de propósito: a .barra-atuacao logo abaixo é âmbar e as duas
   podem aparecer juntas. Contraste 7,57:1 (AA e AAA) — calculado, não
   estimado, porque o eMAG 4.1 é referência adotada. A cor não carrega
   a informação sozinha (eMAG 4.2): a faixa diz o ambiente por escrito. */
/* Aviso de "consulta desativada neste ambiente" ao lado do campo. Violeta
   como a faixa de ambiente logo abaixo, nunca o vermelho de erro: o ponto
   da decisão (12/09/2026) e distinguir desativado de falha. */
.mensagem-ambiente-campo-visivel {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #5b21b6;
}

/* Avisos de "desativado neste ambiente": violeta como a faixa do topo,
   nunca vermelho de erro — o vínculo visual diz "isto é coisa do
   ambiente", que é a distinção pedida (12/09/2026). */
.texto-ambiente { color: #5b21b6; font-weight: 700; }
.botao-desabilitado {
  opacity: 0.55;
  cursor: not-allowed;
  display: inline-block;
}

.barra-ambiente {
  background: #ede9fe;
  color: #5b21b6;
  padding: 0.6rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
}
.barra-ambiente p { margin: 0; }

.barra-atuacao {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.2rem;
  background: #fdf3d9;
  color: #8a6100;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-bottom: 1px solid #f0dfa0;
}
.barra-atuacao p { margin: 0; }
.barra-atuacao form { margin: 0; }
.barra-atuacao .botao-secundario {
  margin: 0;
  background: #8a6100;
  color: #fff;
  border-color: #8a6100;
}

.link-sair {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.link-sair svg { width: 1rem; height: 1rem; }

.barra-navegacao {
  border-top: 1px solid var(--cor-borda);
  padding: 0.5rem 0;
}

.menu-gestao {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-gestao a {
  display: inline-block;
  padding: 0.35rem 0;
  font-weight: 700;
  font-size: 0.9rem;
}

.menu-gestao a:hover, .menu-gestao a:focus { text-decoration: underline; }

/* Conteúdo */
main { padding: 1.75rem 1rem 3rem; }
.conteudo-limitado { max-width: 68rem; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 0 0 1.2rem; color: var(--cor-texto); }
h2 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; color: var(--cor-texto); }
h3 { font-size: 0.95rem; margin: 0 0 0.75rem; color: var(--cor-texto-suave); }

/* Mensagens */
.mensagens { margin-bottom: 1rem; }
.msg {
  background: var(--cor-superficie-suave);
  color: var(--cor-texto);
  padding: 0.6rem 0.9rem;
  border-radius: var(--raio);
  margin: 0 0 0.5rem;
}
.msg.erro { background: #f8e6e6; color: var(--cor-erro); }

/* Cards */
.card {
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.area-arrastar-arquivos {
  border: 2px dashed var(--cor-borda);
  border-radius: var(--raio);
  padding: 2rem;
  text-align: center;
  margin: 1rem 0;
}
.area-arrastar-arquivos.area-arrastar-ativa {
  border-color: var(--cor-primaria);
  background: var(--cor-fundo);
}

/* Abas */
.abas {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--cor-borda);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.abas [role="tab"] {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.6rem 0.9rem;
  font-family: var(--fonte);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
  cursor: pointer;
}
.abas [role="tab"]:hover { color: var(--cor-primaria); }
.abas [role="tab"][aria-selected="true"] {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
}
.aba-contador {
  display: inline-block;
  min-width: 1.2rem;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--cor-erro);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

/* Painel de lacunas */
.lacunas {
  background: #fdf6e3;
  border: 1px solid #e6d3a3;
  border-radius: var(--raio);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  color: #6b5416;
  font-size: 0.85rem;
}

tr.linha-lacuna { background: #fdf6e3; }

/* Painel "Pendências de validação" (empresa_form.html) — dois blocos
   dentro do mesmo .lacunas, separados por natureza (o que a
   Controladoria resolve agora vs. o que depende do prestador), pedido
   do Bruno pra não misturar os dois numa lista só (07/09/2026). */
.lacunas-validacao .lacunas-bloco-titulo {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
}
.lacunas-validacao ul {
  margin: 0;
  padding-left: 1.25rem;
}
tr.linha-lacuna td { color: #6b5416; }

/* Popover de contato (janela flutuante com dados rápidos) */
.link-contato {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--cor-primaria);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.link-contato:hover { color: var(--cor-primaria-escura); }

.popover-contato {
  position: absolute;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 1.5rem);
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  padding: 1rem 1.1rem;
}
.popover-contato .botao-fechar-popover {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--cor-texto-suave);
  cursor: pointer;
  padding: 0.2rem;
}
.popover-contato .botao-fechar-popover:hover { color: var(--cor-texto); }
.popover-titulo { margin: 0 1.5rem 0.1rem 0; font-weight: 800; color: var(--cor-texto); }
.popover-dados { margin: 0.6rem 0 0; font-size: 0.85rem; }
.popover-dados > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--cor-borda);
}
.popover-dados > div:last-child { border-bottom: none; }
.popover-dados dt { margin: 0; flex-shrink: 0; color: var(--cor-texto-suave); font-weight: 700; }
.popover-dados dd { margin: 0; min-width: 0; text-align: right; word-break: break-word; }
.popover-acoes { margin: 0.75rem 0 0; text-align: right; }
.link-discreto { font-size: 0.8rem; color: var(--cor-texto-suave); text-decoration: underline; }
.link-discreto:hover { color: var(--cor-primaria); }

/* Chips de papel */
.chips-papel { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.25rem; }
.chip-papel {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--cor-superficie-suave);
  color: var(--azul-base);
  font-size: 0.75rem;
  font-weight: 700;
}
.chip-papel.chip-principal { background: var(--azul-base); color: #fff; }

.lista-papeis-contato { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.linha-papel-contato {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-size: 0.85rem;
}
.linha-papel-contato label { margin: 0; font-weight: 400; display: inline-flex; align-items: center; gap: 0.3rem; }
/* Rótulo ligado ao checkbox do papel: clicar no nome marca a linha, como
   já acontecia no "Principal" ao lado. Como <span> solto não marcava
   nada, embora a linha inteira pareça um alvo clicável. */
.linha-papel-contato .nome-papel { flex: 1; font-weight: 700; cursor: pointer; }
.botao-marcar-todos {
  font-family: var(--fonte);
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  background: none;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--azul-base);
  cursor: pointer;
}
.botao-marcar-todos:hover { background: var(--cor-fundo-suave, #f2f4f7); }
.linha-papel-contato-cabecalho {
  border: none;
  border-bottom: 1px solid var(--cor-borda);
  border-radius: 0;
  padding: 0 0.6rem 0.4rem;
  color: var(--cor-texto-suave);
}
.linha-papel-contato-cabecalho .nome-papel { font-weight: 400; font-style: italic; }

.form-ajuda { display: block; font-size: 0.75rem; color: var(--cor-texto-suave); margin-top: 0.2rem; }
/* Precisa vencer a linha acima: `.texto-ambiente` sozinha tem a mesma
   especificidade (uma classe) e está ANTES no arquivo, então a cor do
   texto de ajuda comum sobrescrevia o violeta do ambiente — o aviso
   saía cinza, sem se distinguir de nada ao redor. Margem um pouco maior
   pelo mesmo motivo: é aviso, não legenda do campo. */
.form-ajuda.texto-ambiente { color: #5b21b6; margin-top: 0.4rem; }

/* Campo com ícone de ajuda ao lado (ex.: regime de tributação) — flex
   pra manter select/input e ícone sempre na mesma linha, já que
   "form label" é display:block (ocupa a linha inteira sozinho) e
   "form select" tem width:100%, então soltos um atrás do outro o ícone
   acabava indo pra linha de cima, sozinho. */
.campo-com-ajuda { display: flex; align-items: center; gap: 0.4rem; }
.campo-com-ajuda select { flex: 1; width: auto; }

/* Tooltip de ajuda (ícone "i") — clique/toque mostra e esconde (essencial
   em mobile, onde não existe hover); hover e foco no teclado também
   mostram, de graça, via CSS. */
.campo-ajuda-tooltip { position: relative; display: inline-block; margin-left: 0.3rem; }
.botao-ajuda-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 1px solid var(--cor-primaria);
  border-radius: 50%;
  background: var(--cor-card);
  color: var(--cor-primaria);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.tooltip-texto {
  display: none;
  position: absolute;
  z-index: 20;
  top: 1.5rem;
  left: 0;
  width: 18rem;
  max-width: 80vw;
  padding: 0.5rem 0.65rem;
  border-radius: var(--raio);
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  color: var(--cor-texto);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: var(--sombra);
}
.tooltip-texto.tooltip-aberto,
.campo-ajuda-tooltip:hover .tooltip-texto:not(.tooltip-fechado),
.campo-ajuda-tooltip:focus-within .tooltip-texto:not(.tooltip-fechado) {
  display: block;
}
/* :not(.tooltip-fechado) acima: sem isso, Escape/clicar fora só fecham
   "por dentro" (aria-expanded, classe) — o mouse continua parado sobre o
   gatilho depois do clique, então :hover mantinha o tooltip visível na
   tela mesmo fechado. tooltip-ajuda.js marca .tooltip-fechado ao fechar
   e tira no mouseleave, pra não travar o hover de novo depois. */
/* Quando o tooltip está dentro de um ancestral que corta conteúdo (uma
   tabela, por causa do overflow:hidden que arredonda os cantos — ver
   regra "table" abaixo — ou o wrapper .tabela-responsiva), o clique
   (JS) troca pra position:fixed com coordenadas calculadas contra a
   janela, escapando do corte — ver
   tooltip-ajuda.js::escaparClipeSeNecessario(). Hover/focus-within (CSS
   puro, sem clique) nunca precisa disso na prática: os únicos usos hoje
   fora de tabela não têm ancestral que corte conteúdo. */

/* Botão "+N" da coluna Papel (contatos com mais papéis do que cabem sem
   quebrar a linha da tabela) — reaproveita o mesmo tooltip de ajuda, só
   com formato "pílula" em vez do círculo "i". Especificidade de duas
   classes (não uma) pra vencer .botao-ajuda-tooltip mesmo se a ordem no
   arquivo mudar — mesma lição do bug de especificidade do selo de CNAE
   principal. */
.chips-papel .botao-mais-papeis {
  width: auto;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-style: normal;
  font-size: 0.7rem;
}
details { margin: 1rem 0; }
details summary { cursor: pointer; font-weight: 700; color: var(--cor-primaria); padding: 0.3rem 0; }
details[open] summary { margin-bottom: 0.5rem; }

/* Cabeçalho de listagem: ações primárias (esquerda) + busca (direita),
   uma linha só quando cabe, quebra pra duas quando não — nunca mais
   de duas (achado do Bruno, 31/08/2026: os blocos empilhavam em até 3
   linhas, cada um `<p>`/form separado). `.busca-lista` já é
   `flex-wrap`, então o segundo filho (a busca) quebra pra baixo
   sozinho quando o primeiro (ações) já ocupa a largura toda — não
   precisa de media query. */
.cabecalho-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.cabecalho-lista > p { margin: 0; }
.cabecalho-lista .busca-lista { margin: 0; }

/* Busca de listagem */
.busca-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* flex-end, não center: nos filtros com rótulo empilhado (.filtro-lista,
     rótulo empilhado sobre o campo) os itens ficam mais altos que o
     botão — center deixava o botão acima da linha dos inputs. Nas
     demais listagens (_busca_lista.html, campo único) altura é igual
     nos dois casos, sem diferença visual. */
  align-items: flex-end;
  margin: 0.75rem 0 1.25rem;
}
.busca-lista input[type="search"] {
  flex: 1;
  min-width: 14rem;
  max-width: 22rem;
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: 0.9rem;
}
.busca-lista .botao-secundario { margin: 0; }

.filtro-lista label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cor-texto-suave);
}
/* O campo de busca é o único que cresce — os selects ficam do tamanho
   do conteúdo. `.busca-lista input[type="search"]` dimensiona o próprio
   input; aqui quem carrega a largura é o rótulo que o envolve, senão o
   `flex: 1` de lá tentaria crescer no eixo vertical do rótulo. */
.filtro-lista .campo-busca { flex: 1; min-width: 14rem; max-width: 22rem; }
.filtro-lista .campo-busca input[type="search"] { width: 100%; min-width: 0; max-width: none; }
.filtro-lista input,
.filtro-lista select {
  font-family: var(--fonte);
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
}

.tabela-alteracoes { margin-top: 0.5rem; font-size: 0.85rem; }
.tabela-alteracoes th, .tabela-alteracoes td { padding: 0.3rem 0.5rem; }

/* Tabelas */
.tabela-responsiva { width: 100%; overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cor-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--cor-borda);
  vertical-align: middle;
}
th { background: var(--cor-superficie-suave); font-weight: 700; color: var(--azul-base); }
tbody tr:hover { background: #fbfcfe; }
.acoes { white-space: nowrap; }
.acoes a, .acoes button { margin-right: 0.4rem; }
/* Coluna de conteúdo curto e de formato fixo (CNPJ, data, código) —
   nunca deveria quebrar linha, nem "roubar" espaço da coluna de texto
   livre da mesma tabela (razão social, nome, assunto). table-layout é
   auto (padrão) em toda tabela do sistema — width:1% + nowrap é o
   truque padrão pra encolher a coluna ao conteúdo, sobrando espaço
   pra quem precisa (achado do Bruno, 31/08/2026: CNPJ quebrando linha
   em empresas_lista — o navegador pode quebrar depois de "/" mesmo
   sem espaço, é assim que "11.222.333/0001-81" parte ao meio). */
.coluna-estreita { width: 1%; white-space: nowrap; }

.botao-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--azul-base);
  cursor: pointer;
}
.botao-ordenar:hover { text-decoration: underline; }
.botao-ordenar .seta-ordenar { font-size: 0.75rem; color: var(--cor-texto-suave); }

/* Formulários */
form label { display: block; margin-top: 0.9rem; font-weight: 700; color: var(--cor-texto-suave); }
form input[type=text], form input[type=password], form input[type=email],
form input[type=number], form input[type=date], form input[type=search],
form select, form textarea {
  width: 100%;
  max-width: 28rem;
  padding: 0.5rem 0.6rem;
  margin-top: 0.3rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: 0.9rem;
}

.campo-senha {
  position: relative;
  display: block;
  max-width: 28rem;
}

.campo-senha input[type="password"],
.campo-senha input[type="text"] {
  padding-right: 2.6rem;
}

.revelar-senha {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0.25rem;
  border: 0;
  border-radius: var(--raio);
  background: transparent;
  color: var(--cor-desabilitado);
  cursor: pointer;
  line-height: 0;
}

.revelar-senha svg {
  display: block;
  width: 100%;
  height: 100%;
}

.revelar-senha:hover,
.revelar-senha:focus {
  color: var(--cor-primaria);
  background: var(--cor-superficie-suave);
}

.revelar-senha[aria-pressed="true"] {
  color: var(--cor-primaria);
}
form .checkbox label { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400; }
form ul.errorlist { list-style: none; padding: 0; margin: 0.25rem 0 0; color: var(--cor-erro); font-size: 0.85rem; }

/* Mensagem de erro de validação no cliente (ex.: CNPJ com dígito
   verificador inválido) — classe de toggle, não [hidden]: um elemento
   com display fixo por regra de autor sempre vence [hidden] (default de
   user-agent), então esconder/mostrar aqui é sempre por classe. */
.mensagem-erro-campo { display: none; color: var(--cor-erro); font-size: 0.85rem; margin-top: 0.25rem; }
.mensagem-erro-campo.mensagem-erro-campo-visivel { display: block; }
.grade-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem 1.5rem;
}
.grade-form p, .grade-form div { margin: 0; }
.grade-form label { margin-top: 0; }
/* Variante de coluna fixa (não auto-fit) — usada onde um item pode
   sumir sem os outros mudarem de coluna (ex.: Identificador some no
   CADIN, mas Situação/Data de emissão não podem pular de coluna por
   causa disso). Achado real, 30/08/2026: auto-fit conta colunas pela
   largura do contêiner, não pela quantidade de itens visíveis — um
   tipo com 3 campos e outro com 2 (mesmo grupo) renderizavam número
   de colunas diferente, mesmo lado a lado na mesma tela. */
.grade-form-fixa-3 { grid-template-columns: repeat(3, minmax(14rem, 1fr)); }

/* Resumo da CND atual (aba CNDs) — classes locais deste bloco, não um
   componente genérico (é o único lugar que precisa disso hoje). Lista
   vertical, não grid de colunas: um selo como "Positiva com efeito de
   negativa" ou um código sem espaços como "F56E45CB3B957BD6" não cabiam
   numa coluna de ~14rem (era esse o bug — grid, não largura). */
.cnd-resumo { margin: 0.5rem 0 1.25rem; }
.cnd-resumo dt { margin: 0.9rem 0 0.3rem; font-weight: 700; color: var(--cor-texto-suave); font-size: 0.8rem; }
.cnd-resumo dt:first-child { margin-top: 0; }
.cnd-resumo dd { margin: 0; }
.cnd-codigo-controle { font-family: "Courier New", Consolas, monospace; font-size: 0.85rem; }

/* Situação é a informação mais importante do bloco — precisa ser vista
   primeiro, não ter o mesmo peso visual das demais. */
.cnd-situacao-rotulo { font-size: 0.95rem; }
.cnd-situacao-valor .selo { font-size: 1.05rem; padding: 0.35rem 0.9rem; }

#lista-cnaes { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }
.linha-cnae {
  display: grid;
  grid-template-columns: 12rem 28rem auto;
  gap: 0.75rem;
  align-items: end;
}
.linha-cnae p { margin: 0; }
.linha-cnae label { margin-top: 0; }
.linha-cnae-acoes {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-self: start;
  align-self: end;
  height: 2.4rem;
}
.linha-cnae-acoes .botao-tabela {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 2.4rem;
  margin: 0;
  padding: 0 0.9rem;
  white-space: nowrap;
}
/* Selo "Principal" e botão "Tornar principal" — visibilidade controlada
   só por CSS de autor (classe na linha), nunca pelo atributo [hidden]
   nesses elementos: .selo/.botao-tabela definem display como regra de
   autor, que sempre vence a regra padrão do navegador pra [hidden]
   (mesmo com especificidade igual) — [hidden] sozinho não escondia nada
   aqui, e todo CNAE aparecia marcado como principal. */
.linha-cnae .selo-cnae-principal {
  /* Especificidade de propósito 1 classe MAIOR que ".selo" (definida
     mais abaixo neste arquivo): com a mesma especificidade, ".selo"
     ganharia por vir depois no arquivo (mesmo problema que já rendeu o
     bug do selo "Principal" aparecendo em todo CNAE). Não depender de
     ordem de declaração pra isso. */
  display: none;
}
.linha-cnae.linha-cnae-principal .selo-cnae-principal { display: inline-block; }
.linha-cnae.linha-cnae-principal .botao-tornar-principal { display: none; }

/* :is(p, div) — a correção do bug <p>/<ul> (errorlist fechando o <p> antes
   da hora) trocou os campos de formulário pra <div>; sem o <div> aqui, o
   asterisco de obrigatório parava de aparecer em todo formulário do
   sistema (usuário/empresa/contato/contrato/comprovante), não só nos
   afetados por aquele bug — descoberto em 30/08/2026 testando o upload
   manual de comprovante. */
:is(p, div):has(.campo-obrigatorio) > label::after,
label.obrigatorio::after {
  content: " *";
  color: var(--cor-erro);
  font-weight: 700;
}
.legenda-obrigatorio { color: var(--cor-texto-suave); font-size: 0.85rem; margin-left: auto; }
.legenda-obrigatorio .asterisco { color: var(--cor-erro); font-weight: 700; }

/* Botões */
.botao-primario, button[type="submit"] {
  display: inline-block;
  margin-top: var(--espaco-md);
  padding: 0.55rem 1.1rem;
  background: var(--cor-primaria);
  color: var(--cor-sobre-primaria);
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio);
  font-family: var(--fonte);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.botao-primario:hover, button[type="submit"]:hover { background: var(--cor-primaria-escura); }

.botao-secundario {
  display: inline-block;
  margin-top: var(--espaco-md);
  padding: 0.55rem 1.1rem;
  background: var(--cor-card);
  color: var(--cor-primaria);
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.botao-secundario:hover { background: var(--cor-superficie-suave); }

.botao-perigo {
  background: var(--cor-erro);
  border-color: var(--cor-erro);
  color: #fff;
}
.botao-perigo:hover { background: #6f1717; }

.botao-tabela {
  display: inline-block;
  margin: 0.1rem 0.15rem 0.1rem 0;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--cor-primaria);
  border-radius: var(--raio);
  background: var(--cor-card);
  color: var(--cor-primaria);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
}
.botao-tabela:hover { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.botao-tabela-perigo { border-color: var(--cor-erro); color: var(--cor-erro); }
.botao-tabela-perigo:hover { background: var(--cor-erro); color: #fff; }
.botao-tabela-desabilitado {
  border-color: var(--cor-borda);
  color: var(--cor-desabilitado);
  cursor: not-allowed;
}
.botao-tabela-desabilitado:hover { background: var(--cor-card); color: var(--cor-desabilitado); }

.acoes-form { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.25rem; }

/* Paginação */
.paginacao { margin: var(--espaco-lg) 0 0; text-align: center; }
.paginacao-lista {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  overflow: hidden;
}
.paginacao-lista a,
.paginacao-lista span {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.45rem 0.7rem;
  border-right: 1px solid var(--cor-borda);
  color: var(--cor-primaria);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.paginacao-lista a:hover { background: var(--cor-superficie-suave); }
.paginacao-lista li:last-child a,
.paginacao-lista li:last-child span { border-right: 0; }
.paginacao-lista [aria-current="page"] { background: var(--cor-primaria); color: var(--cor-sobre-primaria); }
.paginacao-lista [aria-disabled="true"] { color: var(--cor-desabilitado); }
.paginacao-info { margin: var(--espaco-sm) 0 0; color: var(--cor-texto-suave); font-size: 0.85rem; }

/* Selos */
.selo {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}
.selo-proprietaria { background: var(--cor-superficie-suave); color: var(--azul-base); }
.selo-ativa { background: #e3f0e4; color: #2f6b3a; }
.selo-inativa { background: #f0e3e3; color: var(--cor-erro); }
.selo-alerta { background: #fdf3d9; color: #8a6100; }
.selo-atuacao { background: var(--cor-superficie-suave); color: var(--azul-base); }
/* Neutro de propósito — nunca verde/vermelho. Usado no CADIN: é
   consulta informativa, não comprovante, e o decreto municipal
   24.419/2013 diz expressamente que não prova regularidade nem o
   contrário (ver ComprovanteRegularidade.selo_situacao). */
.selo-informativo { background: var(--cor-superficie-suave); color: var(--cor-texto-suave); }

/* Rodapé */
footer {
  background: var(--azul-base);
  color: var(--cor-sobre-primaria);
  padding: 1rem 1.5rem;
  text-align: center;
  font-size: 0.85rem;
}

/* Login */
.pagina-entrar { max-width: 24rem; margin: 3rem auto; }

/* Checklist de regras de senha (apresentacao/static/senha-regras.js) */
.regras-senha { margin: 0.6rem 0 0; }
.regras-senha-titulo { margin: 0 0 0.3rem; font-weight: 700; color: var(--cor-texto); }
.regras-senha-lista { margin: 0; padding-left: 1.2rem; color: var(--cor-texto-suave); }
.regras-senha-lista li { margin: 0.15rem 0; }
.regras-senha-lista li.regra-ok { color: #2f6b3a; }
.regras-senha-lista li.regra-falha { color: var(--cor-erro); }
.regras-senha-aviso { margin-top: 0.5rem; }

/* Centros de custo — a indentação é a hierarquia (item 15): o código
   já a carrega, e o recuo só torna visível o que ele diz. Feito em CSS
   por nível, não com espaços no template, pra não depender de fonte
   nem quebrar na tabela responsiva. */
.codigo-centro { font-variant-numeric: tabular-nums; }
.linha-centro-raiz .codigo-centro { font-weight: 600; }
.linha-centro-contrato .codigo-centro { padding-left: 1.1rem; }
.linha-centro-subcentro .codigo-centro { padding-left: 2.2rem; }
.texto-suave { color: var(--cor-texto-suave); font-size: 0.85rem; }