/* ==========================================================================
   LINGUAGEM VISUAL DO ARGUS — 2026
   Redesenho A · 26/07/2026 · especificação aprovada pelo Sgt

   POR QUE ESTE ARQUIVO EXISTE, E POR QUE ELE NÃO É "MAIS UM TEMA"

   A modernização anterior (tema-argus.css) mexeu em PROPRIEDADES SOLTAS: raio
   de canto, altura de campo, tom de cor. O Sgt olhou e não viu diferença — e
   estava certo. O que data uma tela não é o raio do botão: é a LINGUAGEM DE
   LAYOUT. Caixa alta em tudo, tabela densa linha a linha, botão de cor chapada
   saturada. Trocar 5px por 12px de raio não mexe em nada disso.

   Este arquivo troca a linguagem. O tema-argus.css CONTINUA sendo a base de
   cor — nenhum token dele foi alterado; aqui só se consome.

   COMO USAR NAS PRÓXIMAS LEVAS
   Os componentes abaixo são genéricos, com prefixo `lg-`. Um módulo novo NÃO
   deve reimplementar cabeçalho, filtro, cartão, botão ou selo: deve usar estas
   classes. É esse o ponto de existir um arquivo separado em vez de repetir o
   desenho dentro de cada <style> injetado — que foi como o sistema chegou a
   ~700 cores cravadas em 14 módulos.

   O QUE NÃO MUDA
   Cor que codifica DADO permanece: selo de status, série de gráfico, escala do
   mapa do Painel. Aqui só se muda a FORMA do selo (vazado em vez de bloco
   chapado); o matiz continua sendo o do dado.
   ========================================================================== */

:root {
  /* --- tinta e papel da linguagem nova ---------------------------------
     Tons quentes de propósito: o cinza-azulado antigo (#6b7280) sobre branco
     puro dá o ar de planilha. Estes puxam para o bege/pedra e conversam com o
     bronze que já é a identidade do ARGUS. */
  --lg-tinta:        #14130f;   /* título, dado principal */
  --lg-tinta-2:      #57544e;   /* texto corrente, rótulo de botão secundário */
  --lg-tinta-3:      #8a8780;   /* rótulo de campo, meta */
  --lg-tinta-4:      #a3a099;   /* cabeçalho de coluna, texto de apoio */
  --lg-linha:        #e4e2dc;   /* borda de cartão */
  --lg-linha-2:      #dedbd4;   /* anel de botão secundário, borda de campo */
  --lg-papel:        #ffffff;
  --lg-fundo:        #f7f6f3;   /* fundo da área de conteúdo */

  /* bronze — os mesmos valores do tema-argus, repetidos aqui só por leitura */
  --lg-bronze:       #c9a84c;   /* anel do botão primário */
  --lg-bronze-texto: #8a6a12;   /* texto sobre branco: contraste 4,8:1 */

  --lg-perigo-anel:  #e6c3c3;
  --lg-perigo-texto: #9c3a3a;

  /* forma */
  --lg-raio-cartao:  12px;
  --lg-raio-campo:   10px;
  --lg-raio-pilula:  999px;
  --lg-altura-botao: 38px;
  --lg-altura-campo: 40px;
  --lg-gap-cartao:   8px;
}

/* ==========================================================================
   0. FIM DA CAIXA ALTA  (item 1 da especificação)

   O `text-transform: uppercase` estava em toda parte: título de módulo,
   cabeçalho de coluna, rótulo, selo — e, por tabela, no DADO. "GRAVATAÍ",
   "MACONHA", "PORTO ALEGRE". Caixa alta em texto corrido é mais lenta de ler
   (some o contorno da palavra) e é o traço que mais data a interface.

   As siglas NÃO são afetadas: CIA, CRPM, OPM, BPM, CVLI já vêm em caixa alta
   do banco, e removendo o text-transform elas continuam como estão. Só para de
   MAIÚSCULO o que era minúsculo na origem.
   ========================================================================== */
.lg-caixa-normal,
.lg-caixa-normal * { text-transform: none; }

/* ---- A CHROME GLOBAL SAI DE CAIXA ALTA ------------------------------------
   Os seletores abaixo repetem exatamente os do main.css e do tema-argus.css.
   Como esta folha carrega DEPOIS das duas e a especificidade empata, ela vence
   sem precisar de !important — e o main.css continua intocado, que é o
   princípio que o próprio tema-argus registra no cabeçalho dele.

   FICAM EM CAIXA ALTA, de propósito:
   · `input[type=text]`, `input:not([type])`, `textarea` (main.css:130) e o
     `el.value = el.value.toUpperCase()` do main.js:281 — isso é ENTRADA de
     dado, não aparência. Caixa alta em dado policial é convenção do ARGUS, e
     é o JS que grava assim no banco. Mexer aqui mudaria o que é ARMAZENADO,
     e esta leva é de redesenho.
   · `.logo-sigla` e `.logo-sub` da tela de acesso — é a marca institucional
     ("AGÊNCIA LOCAL ESPECIAL DE INTELIGÊNCIA"), não título de página.        */
.sidebar-nome, .sidebar-sub, .menu-grupo,
.badge-perfil, .topbar-nome-guerra,
.perfil-nome, .perfil-cargo,
#header-mobile-titulo, .header-mobile-nome-guerra,
.pagina-titulo, .tabela th, .badge, .modal-titulo, .perm-grupo-nome,
.campo label,
.conteudo-header h2 {
  text-transform: none;
}

/* O espaçamento de letra que acompanhava a caixa alta também sai: `letter-spacing`
   aberto existe para caixa alta respirar; em caixa normal ele só afrouxa a
   palavra e atrapalha a leitura. */
.sidebar-nome, .topbar-nome-guerra, .perfil-nome,
#header-mobile-titulo, .pagina-titulo, .modal-titulo, .tabela th {
  letter-spacing: -0.01em;
}

/* ==========================================================================
   0.5 MENU LATERAL  (item 7)

   Hoje o item ativo só troca a cor da letra para bronze, sobre um véu
   translúcido de 12% — num menu preto, isso quase não se lê de relance, que é
   exatamente como um menu lateral é usado. Passa a ter FUNDO PRÓPRIO
   (#1e1c18, um degrau acima do #111111 do menu), texto claro em bronze-areia e
   ÍCONE em bronze cheio. O filete à esquerda continua: é a pista de "onde
   estou" que já existia e funciona.
   ========================================================================== */
#sidebar { background: #111111; }

#menu-nav li a, .menu-grupo-btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13.5px;
}

/* Os DOIS níveis precisam ser nomeados. O item ativo quase sempre está dentro
   de um submenu, e o main.css:280 tem `#menu-nav .menu-sub li a.ativo` — mais
   específico que `#menu-nav li a.ativo`. Só a segunda linha aqui é que
   realmente pinta o item ativo na maioria das telas; medido: sem ela o fundo
   novo aplicava e a cor do texto continuava a antiga. */
#menu-nav li a.ativo,
#menu-nav .menu-sub li a.ativo {
  background: #1e1c18;
  color: #e8d9a8;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--lg-bronze);
}
#menu-nav li a.ativo svg,
#menu-nav .menu-sub li a.ativo svg { stroke: var(--lg-bronze); color: var(--lg-bronze); }

/* Ícones de contorno, nunca preenchidos — combina com a linguagem de anel dos
   botões. */
#menu-nav svg, .menu-grupo-btn svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
}

.menu-grupo {
  text-transform: none;
  letter-spacing: .04em;
  font-size: 10.5px;
  color: #6f6b63;
}


/* ---- TÍTULOS DE SEÇÃO E RÓTULOS DOS MÓDULOS -------------------------------
   Doze módulos declaram o próprio "título de seção" (.pe-section-title,
   .via-section-title, .ad-section-title, …) na mesma receita antiga: Barlow
   Condensed, bronze, CAIXA ALTA. E vários põem os rótulos de campo em caixa
   alta também.

   Mesma conversão dos cabeçalhos, e pelo mesmo motivo: um lugar só em vez de
   doze arquivos. Por ID, para vencer o <style> injetado. */
#conteudo-principal .pe-section-title,
#conteudo-principal .via-section-title,
#conteudo-principal .chk-section-title,
#conteudo-principal .rpo-section-title,
#conteudo-principal .ing-section-title,
#conteudo-principal .ad-section-title,
#conteudo-principal .prel-section-title,
#conteudo-principal .rpodoc-section-title,
#conteudo-principal .ap-section-title,
#conteudo-principal .cart-section-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--lg-tinta);
}
/* Rótulo de campo e cabeçalho de coluna, em qualquer módulo. Só a caixa e o
   espaçamento — tamanho e cor ficam com o módulo, para não achatar layouts que
   dependem deles. */
#conteudo-principal label,
#conteudo-principal th,
#conteudo-principal .ad-selo {
  text-transform: none;
  letter-spacing: 0;
}

/* ==========================================================================
   1. CABEÇALHO DE PÁGINA  (item 2)
   Rótulo pequeno em cima, título grande embaixo, ações à direita na mesma linha.
   ========================================================================== */
.lg-cabecalho {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.lg-cabecalho-titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-rotulo {
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .08em; text-transform: none;
}
.lg-titulo {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 23px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--lg-tinta);
  text-transform: none;
}
.lg-cabecalho-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- OS CABEÇALHOS ANTIGOS ADOTAM A TIPOGRAFIA NOVA -----------------------
   Onze módulos declaram o próprio cabeçalho — .pe-header, .via-header,
   .chk-header, .rpo-header, .ing-header, .proc-header, .ad-header,
   .prel-header, .rpodoc-header — todos com a mesma receita antiga: Barlow
   Condensed 1.5rem, CAIXA ALTA, bronze, letter-spacing aberto.

   Em vez de editar onze arquivos (e arriscar um id no caminho), a receita nova
   é aplicada aos onze de uma vez. As telas que já foram convertidas na Leva A
   usam .lg-titulo e não dependem disto; estas continuam com a marcação delas e
   ganham a tipografia certa.

   O <style> de cada módulo entra no documento DEPOIS desta folha, então aqui
   os seletores precisam pesar MAIS que a classe do módulo — daí o
   `#conteudo-principal` na frente, que é ID e vence sem !important. */
#conteudo-principal .pe-header h2,
#conteudo-principal .via-header h2,
#conteudo-principal .chk-header h2,
#conteudo-principal .rpo-header h2,
#conteudo-principal .ing-header h2,
#conteudo-principal .proc-header h2,
#conteudo-principal .ad-header h2,
#conteudo-principal .prel-header h2,
#conteudo-principal .rpodoc-header h2,
#conteudo-principal .ap-header h2,
#conteudo-principal .cart-header h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 23px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--lg-tinta);
  text-transform: none;
}
/* Planilha, SPE e outras telas usam a família GLOBAL `.pagina-header` /
   `.pagina-titulo` do main.css em vez de um cabeçalho próprio — mesma receita
   antiga (Barlow, caixa alta, letter-spacing 1px), mesma conversão. */
#conteudo-principal .pagina-titulo,
.pagina-titulo {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 23px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--lg-tinta);
  text-transform: none;
}
.pagina-header { align-items: flex-end; margin-bottom: 18px; }

/* O cabeçalho em si ganha o respiro do padrão. */
#conteudo-principal .pe-header,
#conteudo-principal .via-header,
#conteudo-principal .chk-header,
#conteudo-principal .rpo-header,
#conteudo-principal .ing-header,
#conteudo-principal .proc-header,
#conteudo-principal .ad-header,
#conteudo-principal .prel-header,
#conteudo-principal .rpodoc-header {
  align-items: flex-end; margin-bottom: 18px;
}

/* ==========================================================================
   2. BOTÕES DE ANEL  (item 3)
   Fundo branco, anel de 1.5px, pílula, 38px. Nunca cor chapada saturada.
   O verde do "+ Nova Apreensão" sai: nem pertence à paleta do ARGUS.
   ========================================================================== */
.lg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--lg-altura-botao); padding: 0 16px;
  border-radius: var(--lg-raio-pilula);
  background: var(--lg-papel);
  border: 1.5px solid var(--lg-linha-2);
  color: var(--lg-tinta-2);
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.lg-btn:hover        { background: #fbfaf8; border-color: #cdc9c0; }
.lg-btn:active       { transform: translateY(0.5px); }
.lg-btn:focus-visible{ outline: 2px solid var(--lg-bronze); outline-offset: 2px; }
.lg-btn:disabled     { opacity: .45; cursor: not-allowed; }

.lg-btn-primario { border-color: var(--lg-bronze); color: var(--lg-bronze-texto); }
.lg-btn-primario:hover { background: #fdfaf1; border-color: #b8963c; }

.lg-btn-perigo { border-color: var(--lg-perigo-anel); color: var(--lg-perigo-texto); }
.lg-btn-perigo:hover { background: #fdf6f6; border-color: #d9a8a8; }

/* ---- AS CLASSES ANTIGAS ADOTAM O ANEL -------------------------------------
   O ARGUS acumulou quatro nomenclaturas de botão (.btn, .btn-primary,
   .btn-primario, .btn-linha-acao) e — nas palavras do próprio main.css — elas
   são "usadas por praticamente todos os módulos". São ~12.400 linhas de módulo
   que dependem delas.

   Reescrever tela por tela para trocar a classe seria semanas de edição
   mecânica, com risco de errar um `id` no caminho e quebrar um `addEventListener`.
   Redefinir a APARÊNCIA das classes existentes leva a linguagem a todas as
   telas de uma vez, sem tocar em uma linha de JavaScript.

   Especificidade: os seletores abaixo empatam com os do tema, e esta folha
   carrega depois — vence por ordem, sem !important.

   O que NÃO é remapeado aqui: `.btn-acento` (bronze preenchido) continua sendo
   o "ativo" preenchido do sistema, usado como ESTADO em alguns lugares, e
   estado é dado. */
.btn, .btn-primary, .btn-secondary, .btn-ghost,
.btn-novo, .btn-outline, .btn-primario,
button[type="submit"],
.btn-dash-apresentacao, .btn-dash-cast, .btn-dash-aplicar, .btn-dash-limpar {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--lg-altura-botao); padding: 0 16px;
  border-radius: var(--lg-raio-pilula);
  background: var(--lg-papel);
  border: 1.5px solid var(--lg-linha-2);
  color: var(--lg-tinta-2);
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  box-shadow: none;
  transition: border-color .15s, color .15s, background .15s;
}
.btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover,
.btn-novo:hover, .btn-outline:hover, .btn-primario:hover,
button[type="submit"]:hover {
  background: #fbfaf8; border-color: #cdc9c0; color: var(--lg-tinta-2); box-shadow: none;
}

/* A AÇÃO PRINCIPAL ganha o anel bronze — é o "botão que importa" da tela. */
.btn-primary, .btn-novo, .btn-primario, button[type="submit"] {
  border-color: var(--lg-bronze); color: var(--lg-bronze-texto);
}
.btn-primary:hover, .btn-novo:hover, .btn-primario:hover, button[type="submit"]:hover {
  background: #fdfaf1; border-color: #b8963c; color: var(--lg-bronze-texto);
}

/* DESTRUTIVO — a cor continua dizendo "isto apaga"; muda de bloco para anel. */
.btn-perigo {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--lg-altura-botao); padding: 0 16px;
  border-radius: var(--lg-raio-pilula);
  background: var(--lg-papel);
  border: 1.5px solid var(--lg-perigo-anel);
  color: var(--lg-perigo-texto);
  font-size: 13px; font-weight: 500; text-transform: none; box-shadow: none;
}
.btn-perigo:hover { background: #fdf6f6; border-color: #d9a8a8; }

/* Ação dentro da linha da lista: some o bloco colorido, fica o anel. As
   variantes --editar e --excluir mantêm a COR SEMÂNTICA no anel e no texto,
   que é o que o operador usa para não clicar no botão errado. */
.btn-linha-acao {
  min-height: 30px; padding: 0 11px;
  border-radius: var(--lg-raio-pilula);
  background: var(--lg-papel);
  border: 1.5px solid var(--lg-linha-2);
  color: var(--lg-tinta-2);
  font-size: 12px; font-weight: 500; text-transform: none; box-shadow: none;
}
.btn-linha-acao--editar  { border-color: #e0cf9a; color: var(--lg-bronze-texto); }
.btn-linha-acao--excluir { border-color: var(--lg-perigo-anel); color: var(--lg-perigo-texto); }
.btn-linha-acao:hover { background: #fbfaf8; }


/* O marcador "registro EDITADO" (.btn-acao-editado) é COR-DADO: o índigo avisa
   que a apreensão foi alterada depois de registrada, e é o que leva o operador
   a abrir o histórico. O MATIZ FICA. O que muda é a forma — de bloco tingido
   para vazado, como todos os outros selos da linguagem. */
#conteudo-principal .btn-acao-editado {
  background: var(--lg-papel);
  border: 1.5px solid #c7cbf7;
  color: #4f52c9;
  border-radius: var(--lg-raio-pilula);
  min-height: 30px; padding: 0 11px;
  font-size: 12px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
#conteudo-principal .btn-acao-editado:hover { background: #f7f8ff; border-color: #4f52c9; }
@media (max-width: 1024px) {
  #conteudo-principal .btn-acao-editado { min-height: var(--toque-min, 44px); }
}

/* Selo de status global (.badge) — vazado, mantendo o matiz do dado. */
.badge {
  background: var(--lg-papel); border: 1px solid var(--lg-linha-2);
  color: var(--lg-tinta-2); border-radius: var(--lg-raio-pilula);
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: .18rem .6rem;
}
.badge-ativo   { border-color: #b9dcc4; color: #1d7a44; background: var(--lg-papel); }
.badge-inativo { border-color: var(--lg-linha-2); color: var(--lg-tinta-3); background: var(--lg-papel); }


/* ---- OS ÚLTIMOS VERDES CHAPADOS -------------------------------------------
   Alguns módulos ainda pintam "criar/salvar" com --cor-sucesso por SELETOR DE
   ID, que pesa mais que qualquer classe. A especificação proíbe: o verde não
   pertence à paleta do ARGUS.

   Estes seletores também são de ID e vêm depois — vencem por ordem. Listar os
   ids aqui é mais seguro do que editar cada <style> injetado: nenhum
   addEventListener corre risco, e quando um módulo novo aparecer com o mesmo
   vício, basta acrescentar o id nesta lista. */
#conteudo-principal #via-btn-nova, #conteudo-principal #via-btn-salvar,
#conteudo-principal #chk-btn-abrir, #conteudo-principal #chk-btn-salvar,
#conteudo-principal #cart-btn-novo, #conteudo-principal #cart-btn-salvar,
#conteudo-principal #ap-btn-nova, #conteudo-principal #ap-btn-salvar,
#conteudo-principal #prel-btn-gerar, #conteudo-principal #rpodoc-btn-novo,
#conteudo-principal #ad-btn-analisar, #conteudo-principal #ad-btn-gerar, #conteudo-principal #ad-btn-baixar-pdf, #conteudo-principal #ad-btn-baixar-excel,
#conteudo-principal #ing-btn-novo, #conteudo-principal #proc-btn-novo, #conteudo-principal #rpo-btn-novo,
#conteudo-principal #usr-btn-novo, #conteudo-principal #p-btn-salvar,
/* Acrescentados na leva de formulários: o módulo de Lançamento injeta
   `#pe-btn-nova, #pe-btn-salvar { background: var(--cor-sucesso) }` — verde
   chapado por ID, o mesmo vício dos demais. Estes dois escaparam das levas
   anteriores porque o botão só NASCE para Sargenteante ou Administrador
   Total, e o perfil de teste é Administrador: a varredura das 32 telas
   nunca os viu. Só apareceram quando o perfil foi elevado de propósito. */
#conteudo-principal #pe-btn-nova, #conteudo-principal #pe-btn-salvar {
  background: var(--lg-papel);
  border: 1.5px solid var(--lg-bronze);
  color: var(--lg-bronze-texto);
  font-weight: 500; font-size: 13px;
  min-height: var(--lg-altura-botao);
  border-radius: var(--lg-raio-pilula);
  box-shadow: none; text-transform: none;
}
#conteudo-principal #via-btn-nova:hover, #conteudo-principal #via-btn-salvar:hover,
#conteudo-principal #chk-btn-abrir:hover, #conteudo-principal #chk-btn-salvar:hover,
#conteudo-principal #cart-btn-novo:hover, #conteudo-principal #cart-btn-salvar:hover,
#conteudo-principal #ap-btn-nova:hover, #conteudo-principal #ap-btn-salvar:hover,
#conteudo-principal #prel-btn-gerar:hover, #conteudo-principal #rpodoc-btn-novo:hover,
#conteudo-principal #ad-btn-analisar:hover, #conteudo-principal #ad-btn-gerar:hover, #conteudo-principal #ad-btn-baixar-pdf:hover, #conteudo-principal #ad-btn-baixar-excel:hover,
#conteudo-principal #ing-btn-novo:hover, #conteudo-principal #proc-btn-novo:hover, #conteudo-principal #rpo-btn-novo:hover,
#conteudo-principal #usr-btn-novo:hover, #conteudo-principal #p-btn-salvar:hover,
#conteudo-principal #pe-btn-nova:hover, #conteudo-principal #pe-btn-salvar:hover {
  background: #fdfaf1; border-color: #b8963c; color: var(--lg-bronze-texto); box-shadow: none;
}

/* Ação de linha: circular, só ícone de contorno. 34px; 32px quando são três,
   para os três caberem na coluna fixa sem espremer. */
.lg-btn-acao {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lg-papel); border: 1.5px solid var(--lg-linha-2);
  color: var(--lg-tinta-2); cursor: pointer; flex: none;
  transition: border-color .15s, color .15s, background .15s;
}
.lg-acoes-3 .lg-btn-acao { width: 32px; height: 32px; }
.lg-btn-acao:hover { background: #fbfaf8; border-color: var(--lg-bronze); color: var(--lg-bronze-texto); }
.lg-btn-acao:focus-visible { outline: 2px solid var(--lg-bronze); outline-offset: 2px; }
.lg-btn-acao.perigo:hover { border-color: #d9a8a8; color: var(--lg-perigo-texto); background: #fdf6f6; }
.lg-btn-acao svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ==========================================================================
   3. PAINEL DE FILTROS EM GRADE  (item 4)
   Painel branco próprio, separado da lista. Rótulo EM CIMA de cada campo —
   acabou o "— CIA —" dentro do campo, que some assim que se escolhe algo e
   deixa o usuário sem saber o que aquele valor significa.
   ========================================================================== */
.lg-filtros {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  padding: 15px 16px 0;
  margin-bottom: 14px;
}
.lg-filtros-grade {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 13px 14px; align-items: start;
}
.lg-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lg-campo > label {
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
.lg-campo input, .lg-campo select {
  height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 1px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel);
  color: var(--lg-tinta); font-family: inherit; font-size: 13px;
  text-transform: none;
  width: 100%; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.lg-campo select { cursor: pointer; }
.lg-campo input:focus, .lg-campo select:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}

/* Período: dois campos de data num controle só, com o "até" entre eles. */
.lg-periodo { display: flex; align-items: center; gap: 7px; }
.lg-periodo input { flex: 1 1 0; min-width: 0; }
.lg-periodo-ate { font-size: 12px; color: var(--lg-tinta-3); flex: none; }

.lg-filtros-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 15px -16px 0; padding: 11px 16px;
  border-top: 0.5px solid var(--lg-linha);
}
.lg-contador { font-size: 12px; color: var(--lg-tinta-3); }
.lg-contador strong { color: var(--lg-tinta-2); font-weight: 600; }
.lg-filtros-botoes { display: flex; gap: 8px; }

/* ==========================================================================
   4. LISTA EM CARTÕES  (item 5)
   Cartão em vez de linha de tabela. O cabeçalho de coluna continua existindo,
   discreto, acima da lista — sem ele o usuário perde a chave do que é cada
   coluna.

   COLUNAS FIXAS: valor e ações têm largura fixa para os botões ficarem
   alinhados um embaixo do outro de linha para linha. Quando uma linha não tem
   determinado botão, o espaço é RESERVADO (.lg-acao-vazia) — senão a coluna
   "pula" e o olho perde o alinhamento, que é justamente o que faz uma lista
   parecer bagunçada.
   ========================================================================== */
.lg-lista { display: flex; flex-direction: column; gap: var(--lg-gap-cartao); }

.lg-colunas {
  display: grid; align-items: center;
  gap: 12px; padding: 0 15px 7px;
  font-size: 10.5px; font-weight: 500; color: var(--lg-tinta-4);
  letter-spacing: .06em; text-transform: none;
}

/* O cartão nasce em UMA coluna. As colunas fixas são declaradas pelo módulo
   DENTRO de `@media (min-width: 1025px)` — nunca fora dela e nunca inline.
   É essa a razão de o celular não precisar desfazer nada: no estreito
   simplesmente não existe regra de coluna para vencer, e o empilhamento é o
   estado natural. Fazer o contrário (declarar colunas sempre e desfazer no
   mobile) exigiria !important, porque a classe do módulo empata com a daqui e
   o <style> injetado entra depois desta folha. */
.lg-cartao {
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px;
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s;
}
.lg-cartao:hover { border-color: #d8d5cd; box-shadow: 0 1px 3px rgba(20,19,15,.05); }

/* Âncora à esquerda: dia grande + mês pequeno, ou equivalente. */
.lg-ancora { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.lg-ancora-forte { font-size: 19px; font-weight: 600; color: var(--lg-tinta); line-height: 1.05; letter-spacing: -0.02em; }
.lg-ancora-fraca { font-size: 10.5px; color: var(--lg-tinta-3); text-transform: none; margin-top: 1px; }

/* Miolo: título + selos, meta, linha secundária, rodapé. */
.lg-miolo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lg-linha-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.lg-cartao-titulo {
  font-size: 14px; font-weight: 600; color: var(--lg-tinta);
  letter-spacing: -0.01em; text-transform: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.lg-meta { font-size: 12px; color: var(--lg-tinta-3); text-transform: none; }
.lg-secundaria { font-size: 12.5px; color: var(--lg-tinta-2); text-transform: none; }
.lg-rodape { font-size: 11px; color: var(--lg-tinta-4); text-transform: none; }

/* Coluna de valor — largura fixa, alinhada à direita. */
.lg-valor { text-align: right; min-width: 0; }
.lg-valor-forte { font-size: 14px; font-weight: 600; color: var(--lg-tinta); letter-spacing: -0.01em; }
.lg-valor-fraco { font-size: 11px; color: var(--lg-tinta-3); }

/* Coluna de ações — largura fixa; o vazio ocupa lugar. */
.lg-acoes { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.lg-acao-vazia { width: 34px; height: 34px; flex: none; }
.lg-acoes-3 .lg-acao-vazia { width: 32px; height: 32px; }

.lg-vazio {
  padding: 34px 16px; text-align: center;
  color: var(--lg-tinta-3); font-size: 13px; text-transform: none;
}

/* ==========================================================================
   4.5 VARIANTE DENSA — lista de LANÇAMENTO e CONFERÊNCIA

   POR QUE ELA EXISTE
   O cartão da seção anterior custa altura: 13px de padding em cima e embaixo,
   mais 8px de intervalo, mais a borda — cerca de 34px a mais por registro que
   uma linha de tabela. Numa lista de leitura isso é ótimo: o olho separa os
   registros sem esforço.

   Em tela de LANÇAMENTO e CONFERÊNCIA não é. A Confirmação do Lançamento
   mostra dezenas de frações de uma vez, e o operador confere uma contra a
   outra, de cima a baixo, comparando números na mesma coluna. Dobrar a rolagem
   ali não é modernizar: é piorar o trabalho de quem usa.

   Então a linguagem tem DUAS formas de lista, e a escolha é por FINALIDADE:

       .lg-lista  + .lg-cartao   listas de leitura e busca (Apreensões, Cartorial)
       .lg-densa  + .lg-linha    listas de lançamento e conferência (Previsão)

   O que NÃO muda entre as duas: a tipografia, os botões de anel, os selos
   vazados, as colunas fixas com espaço reservado, o comportamento no celular.
   É a mesma linguagem — muda a densidade, não o vocabulário.
   ========================================================================== */
.lg-densa {
  display: flex; flex-direction: column;
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  overflow: hidden;                 /* o raio recorta a primeira e a última linha */
}
.lg-linha {
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: 12px; padding: 8px 15px;
  border-bottom: 0.5px solid var(--lg-linha);
  transition: background .12s;
}
.lg-densa > .lg-linha:last-child { border-bottom: none; }
.lg-linha:hover { background: #fbfaf8; }

/* O cabeçalho de coluna da lista densa fica COLADO no bloco, não solto acima —
   numa lista longa ele precisa parecer parte da mesma peça. */
.lg-densa-colunas {
  display: grid; align-items: center; gap: 12px;
  padding: 9px 15px;
  background: #faf9f7;
  border-bottom: 0.5px solid var(--lg-linha);
  font-size: 10.5px; font-weight: 500; color: var(--lg-tinta-4);
  letter-spacing: .06em; text-transform: none;
}

/* Na linha densa o texto é um pouco menor e as ações encolhem — 30px em vez de
   34px, que é o que mantém a altura da linha em ~44px com respiro. */
.lg-linha .lg-cartao-titulo { font-size: 13px; }
.lg-linha .lg-btn-acao { width: 30px; height: 30px; }
.lg-linha .lg-acao-vazia { width: 30px; height: 30px; }
.lg-linha .lg-btn-acao svg { width: 15px; height: 15px; }

/* ==========================================================================
   4.7 AS TABELAS ANTIGAS ADOTAM A LINGUAGEM

   Nove módulos têm tabela própria (.pe-table, .via-table, .chk-table,
   .rpo-table, .ing-table, .proc-table, .rpodoc-table, além das duas já
   convertidas). Converter cada uma em cartão exigiria reescrever o `render` de
   nove módulos — trabalho grande, e em várias delas o cartão nem é o certo:
   são justamente as tabelas de conferência, onde a densidade importa.

   O que a linguagem faz aqui é o que dá 90% do resultado visual sem tocar em
   JavaScript: cabeçalho discreto em caixa normal, linha com respiro, divisória
   fina, cantos do cartão na moldura. A tabela deixa de parecer planilha e
   passa a ler como lista — que é o problema que o Sgt apontou.

   Novamente por ID, para vencer o <style> injetado do módulo. */
#conteudo-principal .pe-table,
#conteudo-principal .via-table,
#conteudo-principal .chk-table,
#conteudo-principal .rpo-table,
#conteudo-principal .ing-table,
#conteudo-principal .proc-table,
#conteudo-principal .rpodoc-table {
  border-collapse: separate; border-spacing: 0;
  font-size: 13px;
}
#conteudo-principal .pe-table th,
#conteudo-principal .via-table th,
#conteudo-principal .chk-table th,
#conteudo-principal .rpo-table th,
#conteudo-principal .ing-table th,
#conteudo-principal .proc-table th,
#conteudo-principal .rpodoc-table th {
  background: #faf9f7;
  color: var(--lg-tinta-4);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .06em; text-transform: none;
  padding: 9px 12px; text-align: left;
  border-bottom: 0.5px solid var(--lg-linha);
}
#conteudo-principal .pe-table td,
#conteudo-principal .via-table td,
#conteudo-principal .chk-table td,
#conteudo-principal .rpo-table td,
#conteudo-principal .ing-table td,
#conteudo-principal .proc-table td,
#conteudo-principal .rpodoc-table td {
  padding: 9px 12px;
  border-bottom: 0.5px solid var(--lg-linha);
  color: var(--lg-tinta);
  text-transform: none;
}
#conteudo-principal .pe-table-wrap,
#conteudo-principal .via-table-wrap,
#conteudo-principal .chk-table-wrap,
#conteudo-principal .rpo-table-wrap,
#conteudo-principal .proc-table-wrap {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  box-shadow: none;
}

/* Os FILTROS antigos: campo com o mesmo desenho do .lg-campo. O painel branco
   com rótulo em cima é marcação, não CSS — esse fica para a conversão de cada
   tela; aqui os controles já ficam iguais aos das telas convertidas. */
#conteudo-principal .pe-filtros input, #conteudo-principal .pe-filtros select,
#conteudo-principal .via-filtros input, #conteudo-principal .via-filtros select,
#conteudo-principal .chk-filtros input, #conteudo-principal .chk-filtros select,
#conteudo-principal .rpo-filtros input, #conteudo-principal .rpo-filtros select,
#conteudo-principal .proc-filtros input, #conteudo-principal .proc-filtros select {
  height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 1px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel);
  color: var(--lg-tinta); font-size: 13px; text-transform: none;
}

/* ==========================================================================
   5. SELOS VAZADOS  (item 6)
   Fundo branco, borda na cor semântica, texto no tom escuro da mesma família.
   A COR CONTINUA SENDO A DO DADO — o que muda é a forma: vazado em vez de
   bloco chapado, que sobre uma lista inteira vira poluição.
   ========================================================================== */
.lg-selo {
  display: inline-flex; align-items: center; gap: 4px;
  height: 21px; padding: 0 8px;
  border-radius: var(--lg-raio-pilula);
  background: var(--lg-papel);
  border: 1px solid var(--lg-linha-2);
  color: var(--lg-tinta-2);
  font-size: 11px; font-weight: 500; letter-spacing: 0;
  text-transform: none; white-space: nowrap; flex: none;
}
.lg-selo-bronze  { border-color: #e0cf9a; color: var(--lg-bronze-texto); }
.lg-selo-verde   { border-color: #b9dcc4; color: #1d7a44; }
.lg-selo-vermelho{ border-color: var(--lg-perigo-anel); color: var(--lg-perigo-texto); }
.lg-selo-ambar   { border-color: #ecd7a0; color: #8a5a12; }
.lg-selo-azul    { border-color: #bfcbe8; color: #3b4ba8; }
.lg-selo-cinza   { border-color: var(--lg-linha-2); color: var(--lg-tinta-3); }

/* ==========================================================================
   6. CELULAR  (regra 4 da leva — mobile é inegociável)
   A grade de filtros vira UMA coluna alinhada; o cartão desmonta em blocos
   empilhados; alvo de toque 44px; campo com 16px de fonte (abaixo disso o
   Safari dá zoom ao focar).
   ========================================================================== */
@media (max-width: 1024px) {
  .lg-filtros-grade { grid-template-columns: 1fr; gap: 11px; }
  .lg-campo input, .lg-campo select { height: 44px; font-size: 16px; }
  .lg-btn { height: 44px; padding: 0 18px; font-size: 14px; }
  .lg-btn-acao, .lg-acoes-3 .lg-btn-acao { width: 44px; height: 44px; }
  .lg-acao-vazia, .lg-acoes-3 .lg-acao-vazia { width: 44px; height: 44px; }

  .lg-filtros-botoes { flex: 1 1 100%; }
  .lg-filtros-botoes .lg-btn { flex: 1; }

  /* Nada a desfazer no cartão: as colunas do módulo só existem acima de
     1024px, então aqui ele já é a coluna única do padrão. Só o respiro muda. */
  .lg-cartao { gap: 9px; padding: 13px 14px; }
  .lg-colunas { display: none; }

  /* No celular a variante densa vira cartão: numa tela de 390px não existe
     "conferir uma coluna contra a outra", e linha apertada no dedo é erro de
     toque. A densidade servia ao desktop; aqui ela perde a razão de ser. */
  .lg-densa {
    border: none; background: transparent; overflow: visible;
    gap: var(--lg-gap-cartao);
  }
  .lg-densa-colunas { display: none; }
  .lg-linha {
    background: var(--lg-papel);
    border: 0.5px solid var(--lg-linha);
    border-radius: var(--lg-raio-cartao);
    padding: 13px 14px; gap: 9px;
  }
  .lg-densa > .lg-linha:last-child { border-bottom: 0.5px solid var(--lg-linha); }
  .lg-linha .lg-btn-acao, .lg-linha .lg-acao-vazia { width: 44px; height: 44px; }
  .lg-ancora { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 7px; }
  .lg-valor { text-align: left; }
  .lg-acoes { justify-content: flex-start; padding-top: 3px; }
  .lg-cabecalho { align-items: flex-start; }
  .lg-cabecalho-acoes { width: 100%; }
  .lg-cabecalho-acoes .lg-btn { flex: 1 1 calc(50% - 4px); }

  /* O piso de toque de 44px vale TAMBÉM para estes.
     Ao elevar os seletores acima para ID+ID (para vencer o <style> injetado do
     módulo), eles passaram a vencer também o piso de 44px da fundação, que é
     ID+elemento — e os botões caíram para 38px no celular. Medido. O piso é
     acessibilidade e não pode ser vítima de uma correção de aparência. */
  #conteudo-principal #via-btn-nova,
  #conteudo-principal #via-btn-salvar,
  #conteudo-principal #chk-btn-abrir,
  #conteudo-principal #chk-btn-salvar,
  #conteudo-principal #cart-btn-novo,
  #conteudo-principal #cart-btn-salvar,
  #conteudo-principal #ap-btn-nova,
  #conteudo-principal #ap-btn-salvar,
  #conteudo-principal #prel-btn-gerar,
  #conteudo-principal #rpodoc-btn-novo,
  #conteudo-principal #ad-btn-analisar,
  #conteudo-principal #ad-btn-gerar,
  #conteudo-principal #ad-btn-baixar-pdf,
  #conteudo-principal #ad-btn-baixar-excel,
  #conteudo-principal #ing-btn-novo,
  #conteudo-principal #proc-btn-novo,
  #conteudo-principal #rpo-btn-novo,
  #conteudo-principal #pe-btn-nova,
  #conteudo-principal #pe-btn-salvar,
  #conteudo-principal #usr-btn-novo,
  #conteudo-principal #p-btn-salvar {
    min-height: var(--toque-min, 44px);
    padding-left: 18px; padding-right: 18px;
  }

}

/* ==========================================================================
   6. DASHBOARDS, GRÁFICOS, MAPAS e TV — SÓ FORMA  (regra invertida)

   Aqui a cor IDENTIFICA: série de gráfico, Companhia, tipo de droga, área do
   mapa. A paleta destas telas NÃO é a preto+bronze e NÃO muda:
   --da-accent #5a7fa8, --da-cia1..4, e no tv.css --tv-cia1..4 / --tv-crack.

   O que se converte é só a FORMA: tipografia do título, caixa normal, botão de
   anel, alvo de toque. Nenhuma regra abaixo toca em cor de série, em fill de
   mapa ou em variável --da-* / --tv-*.

   TV: o dimensionamento das telas de EXIBIÇÃO (tv.html) é para leitura a
   metros de distância e não é tocado — o tv.css sequer é carregado pela SPA.
   As duas telas aqui são de configuração, de mesa e de celular.
   ========================================================================== */
#conteudo-principal .dash-header h2,
#conteudo-principal .tv-config-header h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 23px; font-weight: 600; line-height: 1.2;
  letter-spacing: -0.02em;
  text-transform: none;
  /* A COR fica: nos dashboards o título é --da-accent, a identidade
     azul-ardósia daquelas telas. Só o desenho da letra muda. */
}
#conteudo-principal .dash-panel-header,
#conteudo-principal .dash-panel-header h3,
#conteudo-principal .tv-config-section h3,
#conteudo-principal .dash-filtros label,
#conteudo-principal .dash-kpi-label {
  text-transform: none; letter-spacing: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}

/* Os botões de TV eram azul institucional CHAPADO. O anel preserva o #1a2744 —
   que é identidade da BM, não decoração — e adota a forma da linguagem. */
#conteudo-principal .btn-tv-salvar,
#conteudo-principal .btn-tv-abrir {
  background: #ffffff;
  border: 1.5px solid #1a2744;
  color: #1a2744;
  box-shadow: none;
}
#conteudo-principal .btn-tv-salvar:hover,
#conteudo-principal .btn-tv-abrir:hover {
  background: #f6f7fa; border-color: #2a3a60; box-shadow: none;
}
#conteudo-principal .btn-tv-revogar {
  background: #ffffff;
  border: 1.5px solid var(--lg-perigo-anel);
  color: var(--lg-perigo-texto);
}
#conteudo-principal .btn-tv-revogar:hover { background: #fdf6f6; border-color: #d9a8a8; }

/* =========================================================================
   CAMADA DE FORMULÁRIO — 26/07/2026
   -------------------------------------------------------------------------
   As levas A-D deixaram as 32 telas do menu na linguagem, mas o operador que
   clica em "Nova apreensão" ainda caía num formulário com a cara antiga.
   Esta camada fecha isso.

   POR QUE ISTO É CSS E NÃO REESCRITA DE MARCAÇÃO
   Os módulos já organizam campo por campo em famílias próprias -- .ap-campo,
   .cart-campo, .chk-campo... -- com o rótulo em cima e o controle embaixo,
   que é exatamente a estrutura que a especificação pede. O que estava velho
   era a PELE: rótulo em caixa alta de 11,5px, borda de 1px cinza-azulado,
   título de seção em Barlow Condensed maiúsculo. Redefinir a pele converte
   tudo sem tocar num só arquivo de tela.

   A ESPECIFICIDADE, VERIFICADA ANTES E NÃO DEPOIS
   Cada módulo injeta a própria CSS num <style> que entra no documento DEPOIS
   desta folha. Empate de especificidade, portanto, o módulo ganha. Mas as
   regras deles são seletor de classe -- ".ap-campo input" é (0,2,0) -- e
   prefixar com #conteudo-principal leva estas para (1,2,1). ID vence classe
   em qualquer quantidade, e a ordem deixa de importar. Nenhum !important.
   ========================================================================= */

/* --- o campo ------------------------------------------------------------
   Rótulo pequeno em cima, controle de 40px, raio 10px, fio de 0,5px. O fio
   fino é o mesmo dos cartões da linguagem -- 1px sobre branco lê como grade
   de planilha, que é justamente o ar de que se está fugindo. */
#conteudo-principal .ap-campo,
#conteudo-principal .via-campo,
#conteudo-principal .chk-campo,
#conteudo-principal .via-add-row > div,
#conteudo-principal .pe-campo,
#conteudo-principal .pnl-campo,
#conteudo-principal .pe-mini-grid > div,
#conteudo-principal .cart-campo {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; margin-bottom: 14px;
}
/* Descendente, e não filho direto: Data e CIA vivem dentro de um <div> de
   par ("ap-inline"), então um seletor `> label` passava por cima delas. Foi
   medido — as duas ficavam em 11,52px cinza-azulado enquanto as outras seis
   já estavam certas. */
#conteudo-principal .ap-campo label,
#conteudo-principal .via-campo label,
#conteudo-principal .chk-campo label,
#conteudo-principal .via-add-row label,
#conteudo-principal .pe-campo label,
#conteudo-principal .pnl-campo label,
#conteudo-principal .pe-mini-grid > div > label,
#conteudo-principal .cart-campo label {
  display: block; margin: 0;
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
/* O par lado a lado precisa ser coluna por dentro, senão o rótulo cola no
   campo — a folga de 5px vem do flex, não de margem. */
#conteudo-principal .ap-campo.ap-inline > div {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
/* As exclusões de type existem porque caixa de seleção e botão de rádio não
   são campos de texto: dar 40px de altura a eles produz um quadrado enorme.
   Custam especificidade (cada :not() conta), e é de propósito -- (1,5,1)
   passa longe de qualquer regra de módulo. */
#conteudo-principal .ap-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .ap-campo select,
#conteudo-principal .cart-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .via-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .via-campo select,
#conteudo-principal .chk-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .chk-campo select,
#conteudo-principal .via-add-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .via-add-row select,
#conteudo-principal .pe-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .pe-campo select,
#conteudo-principal .pnl-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .pnl-campo select,
#conteudo-principal .pe-mini-grid > div input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .pe-mini-grid > div select,
#conteudo-principal .cart-campo select {
  /* min-height JUNTO com height, e não por descuido: `min-height` VENCE
     `height` sejam quais forem as especificidades, porque são propriedades
     diferentes — não há disputa de cascata, há ordem de aplicação. O módulo
     de Viaturas declara `.via-campo input { min-height: 42px }` e por isso
     os campos mediam 42px enquanto raio, fio e rótulo já estavam certos.
     Medido; nenhuma leitura de especificidade acharia. */
  height: var(--lg-altura-campo);
  min-height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel);
  color: var(--lg-tinta);
  font-family: inherit; font-size: 13px;
  width: 100%; min-width: 0; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
#conteudo-principal .cart-campo textarea,
#conteudo-principal .via-campo textarea,
#conteudo-principal .chk-campo textarea,
#conteudo-principal .via-add-row textarea,
#conteudo-principal .pe-campo textarea,
#conteudo-principal .pnl-campo textarea,
#conteudo-principal .ap-campo textarea {
  height: auto; min-height: 78px; padding: 10px 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px; line-height: 1.5;
  width: 100%; box-sizing: border-box; resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
#conteudo-principal .via-campo select,
#conteudo-principal .chk-campo select,
#conteudo-principal .ap-campo select,
#conteudo-principal .cart-campo select { cursor: pointer; }
#conteudo-principal .ap-campo input:focus,
#conteudo-principal .ap-campo select:focus,
#conteudo-principal .ap-campo textarea:focus,
#conteudo-principal .cart-campo input:focus,
#conteudo-principal .cart-campo select:focus,
#conteudo-principal .via-campo input:focus,
#conteudo-principal .via-campo select:focus,
#conteudo-principal .via-campo textarea:focus,
#conteudo-principal .chk-campo input:focus,
#conteudo-principal .chk-campo select:focus,
#conteudo-principal .chk-campo textarea:focus,
#conteudo-principal .via-add-row input:focus,
#conteudo-principal .via-add-row select:focus,
#conteudo-principal .pe-campo input:focus,
#conteudo-principal .pe-campo select:focus,
#conteudo-principal .pe-campo textarea:focus,
#conteudo-principal .pnl-campo input:focus,
#conteudo-principal .pnl-campo select:focus,
#conteudo-principal .pnl-campo textarea:focus,
#conteudo-principal .pe-mini-grid > div input:focus,
#conteudo-principal .pe-mini-grid > div select:focus,
#conteudo-principal .cart-campo textarea:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}
/* O campo recusado pela validação continua se anunciando -- só troca o
   vermelho de alarme por um vermelho de tinta, o mesmo dos selos. */
#conteudo-principal .ap-campo input.invalido,
#conteudo-principal .cart-campo input.invalido,
#conteudo-principal .ap-campo select.invalido,
#conteudo-principal .via-campo input.invalido,
#conteudo-principal .chk-campo input.invalido,
#conteudo-principal .cart-campo select.invalido {
  border-color: var(--lg-perigo-anel);
  box-shadow: 0 0 0 3px rgba(156,58,58,.10);
}

/* --- a seção ------------------------------------------------------------
   Bloco de fundo branco com fio, subtítulo discreto e filete. É o que deixa
   um formulário longo legível sem rolar tanto. */
#conteudo-principal .ap-section,
#conteudo-principal .via-section,
#conteudo-principal .chk-section,
#conteudo-principal .pnl-gestao-secao,
#conteudo-principal .cart-section {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  padding: 16px 18px; margin-bottom: 14px;
  box-shadow: none;
}
/* A TIPOGRAFIA do título de seção já foi convertida na leva C — bloco
   "TÍTULOS DE SEÇÃO E RÓTULOS DOS MÓDULOS", lá em cima. Aqui só se acrescenta
   o que faltava para virar seção de formulário: o filete e o respiro. Repetir
   a tipografia criaria duas declarações competindo pela mesma coisa, e a
   segunda venceria por ordem — exatamente o tipo de conflito silencioso que
   depois ninguém entende. */
#conteudo-principal .ap-section-title,
#conteudo-principal .via-section-title,
#conteudo-principal .chk-section-title,
#conteudo-principal .cart-section-title {
  margin: 0 0 14px; padding: 0 0 9px;
  border-bottom: 0.5px solid var(--lg-linha);
}

/* --- o cabeçalho do formulário -----------------------------------------
   O h2 já ganhou a tipografia nova na leva C (está na lista dos onze
   cabeçalhos de módulo). O que falta é a régua que separa o cabeçalho do
   corpo do formulário. */
#conteudo-principal .ap-header,
#conteudo-principal .via-header,
#conteudo-principal .chk-header,
#conteudo-principal .pe-header,
#conteudo-principal .cart-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 13px;
  border-bottom: 0.5px solid var(--lg-linha);
}

/* --- a grade ------------------------------------------------------------
   Duas colunas no desktop, uma quando estreita. O espaçamento vertical vem
   da margem do próprio campo, para as duas colunas ficarem alinhadas linha
   a linha em vez de cada uma seguir seu ritmo. */
#conteudo-principal .ap-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
#conteudo-principal .cart-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
@media (max-width: 1024px) {
  #conteudo-principal .ap-form-grid,
  #conteudo-principal .cart-grid-2 { grid-template-columns: 1fr; }
}

/* --- celular ------------------------------------------------------------
   44px de toque e 16px de fonte. Os 16px não são estética: abaixo disso o
   navegador do celular dá zoom sozinho ao focar o campo, e o operador perde
   o formulário de vista. */
@media (max-width: 640px) {
  #conteudo-principal .ap-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .ap-campo select,
  #conteudo-principal .ap-campo textarea,
  #conteudo-principal .cart-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .cart-campo select,
  #conteudo-principal .cart-campo textarea {
    min-height: var(--toque-min, 44px); font-size: 16px;
  }
  #conteudo-principal .ap-header h2,
  #conteudo-principal .cart-header h2 { font-size: 20px; }
}

/* --- linhas repetidas: pessoas e itens da apreensão ---------------------
   O rótulo existe em toda linha (é o que o leitor de tela anuncia), mas no
   desktop só a primeira o mostra: alinhado à mesma grade, ele vira cabeçalho
   de coluna. Repetir "Tipo / Marca / Calibre" em dez linhas seria ruído.
   No celular as linhas empilham e não há coluna nenhuma — aí todos aparecem,
   senão o operador fica com três caixas de seleção sem nome. */
#conteudo-principal .ap-linha-campo {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
#conteudo-principal .ap-linha-campo > label {
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none; margin: 0;
}
#conteudo-principal .ap-item-row:not(:first-child) .ap-linha-campo > label,
#conteudo-principal .ap-pessoa-row:not(:first-child) .ap-linha-campo > label {
  display: none;
}
/* align-items: end porque só a primeira linha tem rótulo — sem isto o botão
   de remover da primeira linha flutua no meio, desalinhado dos campos. */
#conteudo-principal .ap-item-row,
#conteudo-principal .ap-pessoa-row { align-items: end; gap: 8px; }
#conteudo-principal .ap-item-row select,
#conteudo-principal .ap-item-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#conteudo-principal .ap-pessoa-row select,
#conteudo-principal .ap-pessoa-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
  height: var(--lg-altura-campo); min-height: 0; padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px;
  width: 100%; box-sizing: border-box;
}
@media (max-width: 640px) {
  /* Flex em coluna, e não grade de uma coluna: numa grade os quatro filhos
     (três campos mais o botão de remover) se distribuem célula a célula e a
     ordem embaralha. Em coluna cada campo ocupa a largura toda e o botão
     fica no fim, encostado à direita. */
  #conteudo-principal .ap-item-row,
  #conteudo-principal .ap-pessoa-row {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 0.5px solid var(--lg-linha);
  }
  #conteudo-principal .ap-item-row > .ap-btn-rm,
  #conteudo-principal .ap-pessoa-row > .ap-btn-rm { align-self: flex-end; }
  #conteudo-principal .ap-item-row:not(:first-child) .ap-linha-campo > label,
  #conteudo-principal .ap-pessoa-row:not(:first-child) .ap-linha-campo > label {
    display: block;
  }
  #conteudo-principal .ap-item-row select,
  #conteudo-principal .ap-item-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  #conteudo-principal .ap-pessoa-row select,
  #conteudo-principal .ap-pessoa-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--toque-min, 44px); height: var(--toque-min, 44px); font-size: 16px;
  }
}

/* --- FROTA: grades, linha de adição e modais (bloco 2) ------------------
   Os 20 grupos "sem classe" da Frota — <div><label><input> cru, nove no
   Check List e onze em Viaturas — não precisaram de classe nova: TODOS
   vivem dentro de .via-add-row, que já era a família deles. Tratá-los pela
   família em vez de carimbar uma classe em vinte <div> evita mexer na
   marcação de dois arquivos grandes por puro efeito visual. */
#conteudo-principal .via-add-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
/* Dentro de uma linha, a margem de baixo do campo não faz sentido: o
   espaçamento é o gap do flex. */
#conteudo-principal .via-add-row > div { margin-bottom: 0; flex: 1 1 160px; min-width: 150px; }

#conteudo-principal .via-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
#conteudo-principal .via-linha-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* O par de placas continua junto e lado a lado — é regra do sistema, não
   arranjo de tela: onde aparece a placa comum aparece a de segurança. */
#conteudo-principal .via-par-placas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 1024px) {
  #conteudo-principal .via-form-grid { grid-template-columns: 1fr; }
}

/* --- o modal ------------------------------------------------------------
   Cabeçalho com título em caixa normal de 19px, corpo, e rodapé com filete
   e as ações à direita.

   O PREFIXO :root NÃO É ENFEITE. O modal genérico de Viaturas é criado com
   document.body.appendChild — nasce FORA do #conteudo-principal, então o
   ancoradouro de ID usado no resto desta folha não o alcança. As regras do
   módulo são de uma classe só (.via-modal-header h3 = 0,2,1); :root soma
   uma pseudo-classe e leva estas para 0,3,1, que vence sem !important. */
:root .via-modal,
:root .chk-modal,
#conteudo-principal .modal {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  box-shadow: 0 12px 40px rgba(20,19,15,.16);
}
:root .via-modal-header,
#conteudo-principal .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 0.5px solid var(--lg-linha);
}
:root .via-modal-header h3,
:root .chk-modal h3,
#conteudo-principal .modal-titulo {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 19px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; text-transform: none;
  color: var(--lg-tinta); margin: 0;
}
:root .chk-modal p {
  font-size: 13px; color: var(--lg-tinta-2); line-height: 1.5; margin: 0 0 14px;
}
/* Rodapé: filete e ações à direita. */
:root .chk-modal-btns,
#conteudo-principal .modal-footer {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 8px; flex-wrap: wrap;
  padding-top: 13px; margin-top: 16px;
  border-top: 0.5px solid var(--lg-linha);
}
/* Fechar em ícone de contorno, no lugar do × pesado ou do botão "Fechar". */
:root .via-modal-fechar,
#conteudo-principal .modal-fechar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-pilula);
  color: var(--lg-tinta-2); font-size: 17px; line-height: 1;
  cursor: pointer; transition: border-color .15s, color .15s;
}
:root .via-modal-fechar:hover,
#conteudo-principal .modal-fechar:hover {
  border-color: var(--lg-tinta-3); color: var(--lg-tinta);
}

@media (max-width: 640px) {
  #conteudo-principal .via-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .via-campo select,
  #conteudo-principal .via-campo textarea,
  #conteudo-principal .chk-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .chk-campo select,
  #conteudo-principal .chk-campo textarea,
  #conteudo-principal .via-add-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .via-add-row select {
    min-height: var(--toque-min, 44px); font-size: 16px;
  }
  /* Marca/Modelo e Ano/Cor empilham — são campos de texto longo e a 390px
     ficariam apertados.
     O PAR DE PLACAS NÃO empilha: a instrução pede as duas lado a lado, e uma
     placa tem sete caracteres, então cabe com folga em ~175px. Ver o par de
     uma vez é justamente o ponto da regra. */
  #conteudo-principal .via-linha-2 { grid-template-columns: 1fr; }
  #conteudo-principal .via-par-placas { grid-template-columns: 1fr 1fr; gap: 0 10px; }
  #conteudo-principal .via-add-row > div { flex: 1 1 100%; }
  :root .via-modal-fechar,
  #conteudo-principal .modal-fechar { width: 44px; height: 44px; }
}

/* --- o piso de toque, devolvido -----------------------------------------
   Ao declarar min-height: 40px na regra base eu passei por cima do piso de
   44px que o tema-argus aplica até 1024px -- a minha regra é (1,5,1) e a
   dele (1,3,1), então a minha vencia e os campos encolhiam para 40px em
   tablet. O piso volta aqui, com a mesma largura de corte do tema, para
   não haver duas ideias de "onde começa o toque" no sistema. */
@media (max-width: 1024px) {
  #conteudo-principal .ap-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .ap-campo select,
  #conteudo-principal .cart-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .cart-campo select,
  #conteudo-principal .via-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .via-campo select,
  #conteudo-principal .chk-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .chk-campo select,
  #conteudo-principal .via-add-row input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .via-add-row select {
    min-height: var(--toque-min, 44px); height: auto;
  }
}

/* --- PREVISÃO DE EFETIVO e PAINEL (bloco 3) -----------------------------
   DENSIDADE: os dois formulários de Previsão são de muitas linhas, e a
   instrução pede para NÃO aumentar a rolagem do operador. A grade de três
   colunas do lançamento fica; o que encolhe a página é o espaçamento entre
   campos, não o número deles. */
#conteudo-principal .pe-form-grid  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; align-items: start; }
#conteudo-principal .pe-mini-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
#conteudo-principal .pe-mini-grid > div { margin-bottom: 12px; }
@media (max-width: 1024px) {
  #conteudo-principal .pe-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  #conteudo-principal .pe-form-grid,
  #conteudo-principal .pe-mini-grid { grid-template-columns: 1fr; }
}

/* Slot de ação dentro de uma grade de filtros: o botão desce até a linha de
   base dos campos vizinhos, em vez de flutuar na altura do rótulo. */
.lg-campo-acao { justify-content: flex-end; }
.lg-campo-acao { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* O painel de Gestão é um modal de corpo inteiro — mesmo tratamento de
   cabeçalho, filete e fechar em ícone dos demais. */
:root .painel-gestao-painel {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  box-shadow: 0 12px 40px rgba(20,19,15,.16);
}
:root .painel-gestao-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 0.5px solid var(--lg-linha);
}
:root .painel-gestao-header h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 19px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; text-transform: none;
  color: var(--lg-tinta); margin: 0;
}
/* O título de cada bloco do painel de Gestão usa <h3>, não a família
   -section-title; recebe o mesmo subtítulo discreto com filete. */
:root .pnl-gestao-secao > h3 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--lg-tinta);
  margin: 0 0 14px; padding: 0 0 9px;
  border-bottom: 0.5px solid var(--lg-linha);
}
:root .painel-gestao-overlay .modal-fechar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-pilula);
  color: var(--lg-tinta-2); font-size: 17px; line-height: 1; cursor: pointer;
}
:root .painel-gestao-overlay .pnl-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
:root .painel-gestao-overlay .pnl-campo select {
  height: var(--lg-altura-campo); min-height: var(--lg-altura-campo);
  padding: 0 11px; border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo); background: var(--lg-papel);
  color: var(--lg-tinta); font-family: inherit; font-size: 13px;
  width: 100%; box-sizing: border-box;
}
:root .painel-gestao-overlay .pnl-campo textarea {
  min-height: 78px; padding: 10px 11px; border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo); background: var(--lg-papel);
  color: var(--lg-tinta); font-family: inherit; font-size: 13px;
  width: 100%; box-sizing: border-box; resize: vertical;
}
:root .painel-gestao-overlay .pnl-campo label {
  display: block; margin: 0 0 5px;
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
@media (max-width: 1024px) {
  #conteudo-principal .pe-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .pe-campo select,
  #conteudo-principal .pnl-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .pnl-campo select,
  #conteudo-principal .pe-mini-grid > div input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .pe-mini-grid > div select,
  :root .painel-gestao-overlay .pnl-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  :root .painel-gestao-overlay .pnl-campo select {
    min-height: var(--toque-min, 44px); height: auto;
  }
}
@media (max-width: 640px) {
  #conteudo-principal .pe-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .pe-campo select,
  #conteudo-principal .pe-campo textarea,
  #conteudo-principal .pnl-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .pnl-campo select,
  #conteudo-principal .pnl-campo textarea,
  #conteudo-principal .pe-mini-grid > div input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .pe-mini-grid > div select,
  :root .painel-gestao-overlay .pnl-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  :root .painel-gestao-overlay .pnl-campo select,
  :root .painel-gestao-overlay .pnl-campo textarea {
    font-size: 16px;
  }
}

/* Proporções de grade que estavam em atributo `style` na Confirmação.
   ATRIBUTO STYLE NÃO SE VENCE POR ESPECIFICIDADE — só com !important, que
   esta leva proíbe. Por isso as três proporções saíram do HTML e viraram
   classe: sem isso a grade continuava em 3 e 2 colunas a 390px, com o
   formulário espremido, e nenhuma folha conseguiria corrigir. */
#conteudo-principal .pe-grid-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
#conteudo-principal .pe-grid-1-2   { grid-template-columns: 1fr 2fr; }
#conteudo-principal .pe-grid-1-1   { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) {
  #conteudo-principal .pe-grid-1-2-1,
  #conteudo-principal .pe-grid-1-2,
  #conteudo-principal .pe-grid-1-1 { grid-template-columns: 1fr; }
}

/* =========================================================================
   BLOCO 4 — ADMINISTRAÇÃO, ASSUNTOS, PRODUTIVIDADE e AS TELAS DE ACESSO

   A família GENÉRICA .campo do main.css é a alavanca deste bloco: ela serve
   ao mesmo tempo o modal de Usuários, os modais de filtro dos dashboards e
   as seis telas de acesso (login, primeiro acesso, recuperação, 2FA). Uma
   redefinição alcança todas.

   Os seletores vêm em dois ramos de propósito: #conteudo-principal para o
   que é módulo, e .tela-central para as telas de acesso, que vivem FORA do
   conteúdo principal — são a página inteira, antes de existir menu.
   ========================================================================= */
#conteudo-principal .campo,
.tela-central .campo,
#conteudo-principal .ing-campo,
#conteudo-principal .prel-campo,
#conteudo-principal .ad-campo,
#conteudo-principal .rpo-campo,
#conteudo-principal .rpodoc-campo {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; margin-bottom: 14px;
}
#conteudo-principal .campo > label,
.tela-central .campo > label,
#conteudo-principal .ing-campo label,
#conteudo-principal .prel-campo label,
#conteudo-principal .ad-campo label,
#conteudo-principal .ad-campo-upload label,
#conteudo-principal .rpo-campo label,
#conteudo-principal .rpodoc-campo label {
  display: block; margin: 0;
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
#conteudo-principal .campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .campo select,
.tela-central .campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.tela-central .campo select,
#conteudo-principal .ing-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .ing-campo select,
#conteudo-principal .prel-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .prel-campo select,
#conteudo-principal .ad-campo select,
#conteudo-principal .rpo-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .rpo-campo select,
#conteudo-principal .rpodoc-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .rpodoc-campo select {
  height: var(--lg-altura-campo); min-height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px;
  width: 100%; min-width: 0; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
#conteudo-principal .campo textarea,
.tela-central .campo textarea,
#conteudo-principal .ing-campo textarea,
#conteudo-principal .prel-campo textarea {
  height: auto; min-height: 78px; padding: 10px 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px; line-height: 1.5;
  width: 100%; box-sizing: border-box; resize: vertical;
}
/* A narrativa da ocorrência do RPO tem min-height de 140px declarado pelo
   módulo, e é deliberado: é campo de texto longo. A regra geral de 78px
   venceria por especificidade e ENCOLHERIA a caixa — então aqui ela é
   devolvida explicitamente. Achado ao varrer os min-height dos módulos,
   como a lição do bloco 2 mandou fazer. */
#conteudo-principal .rpodoc-campo textarea {
  height: auto; min-height: 140px; padding: 10px 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px; line-height: 1.5;
  width: 100%; box-sizing: border-box; resize: vertical;
}
#conteudo-principal .campo input:focus,
#conteudo-principal .campo select:focus,
#conteudo-principal .campo textarea:focus,
.tela-central .campo input:focus,
.tela-central .campo select:focus,
#conteudo-principal .ing-campo input:focus,
#conteudo-principal .ing-campo select:focus,
#conteudo-principal .prel-campo input:focus,
#conteudo-principal .prel-campo select:focus,
#conteudo-principal .ad-campo select:focus,
#conteudo-principal .rpo-campo input:focus,
#conteudo-principal .rpo-campo select:focus,
#conteudo-principal .rpodoc-campo input:focus,
#conteudo-principal .rpodoc-campo select:focus,
#conteudo-principal .rpodoc-campo textarea:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}

/* Seções e grades das telas restantes */
#conteudo-principal .ing-section,
#conteudo-principal .prel-section,
#conteudo-principal .ad-section,
#conteudo-principal .rpo-section,
#conteudo-principal .rpodoc-section {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  padding: 16px 18px; margin-bottom: 14px; box-shadow: none;
}
#conteudo-principal .ing-section-title,
#conteudo-principal .prel-section-title,
#conteudo-principal .ad-section-title,
#conteudo-principal .rpo-section-title,
#conteudo-principal .rpodoc-section-title {
  margin: 0 0 14px; padding: 0 0 9px;
  border-bottom: 0.5px solid var(--lg-linha);
}
#conteudo-principal .form-grid,
#conteudo-principal .ing-campos-grid,
#conteudo-principal .ing-cotas-grid,
#conteudo-principal .rpo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
@media (max-width: 640px) {
  #conteudo-principal .form-grid,
  #conteudo-principal .ing-campos-grid,
  #conteudo-principal .ing-cotas-grid,
  #conteudo-principal .rpo-grid { grid-template-columns: 1fr; }
}

/* --- AS TELAS DE ACESSO — o cartão de visita do sistema -----------------
   Login, primeiro acesso, recuperação e as duas de 2FA. O fluxo de
   autenticação, o 2FA e as regras de senha não são tocados: só a pele.
   A MARCA institucional (.logo-sigla / .logo-sub) continua em caixa alta —
   é a mesma exceção registrada na leva A: marca não é título de página. */
.login-box {
  border-radius: var(--lg-raio-cartao);
  border: 0.5px solid var(--lg-linha);
  box-shadow: 0 16px 48px rgba(0,0,0,.30);
  padding: 1.2rem 1.9rem 2rem;
}
.login-box h1,
.login-box h2 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  text-transform: none; color: var(--lg-tinta);
}
.tela-central .btn-olho {
  border: none; background: transparent; color: var(--lg-tinta-3);
  display: inline-flex; align-items: center; justify-content: center;
}
/* O código de 2FA tem tamanho e espaçamento próprios (é leitura dígito a
   dígito, não texto corrido) — o main.css marca com !important e isso
   permanece; aqui só a forma da caixa acompanha a linguagem. */
.tela-central #codigo-2fa-setup,
.tela-central #codigo-2fa-verificar {
  border-radius: var(--lg-raio-campo);
  border: 0.5px solid var(--lg-linha-2);
}
.regras-senha { font-size: 11.5px; color: var(--lg-tinta-3); }
.info-box {
  border-radius: var(--lg-raio-campo);
  border: 0.5px solid #cddffb; border-left: 2px solid var(--cor-info, #2563eb);
  font-size: 12.5px;
}

/* Piso de toque e fonte de 16px. Nas telas de acesso o piso vale em
   qualquer largura: quem entra pelo celular é a maioria. */
@media (max-width: 1024px) {
  #conteudo-principal .campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .campo select,
  #conteudo-principal .ing-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .ing-campo select,
  #conteudo-principal .prel-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .prel-campo select,
  #conteudo-principal .ad-campo select,
  #conteudo-principal .rpo-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .rpo-campo select,
  #conteudo-principal .rpodoc-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .rpodoc-campo select,
  .tela-central .campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .tela-central .campo select {
    min-height: var(--toque-min, 44px); height: auto;
  }
}
@media (max-width: 640px) {
  #conteudo-principal .campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .campo select,
  #conteudo-principal .campo textarea,
  #conteudo-principal .ing-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .ing-campo select,
  #conteudo-principal .prel-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .prel-campo select,
  #conteudo-principal .ad-campo select,
  #conteudo-principal .rpo-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .rpo-campo select,
  #conteudo-principal .rpodoc-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .rpodoc-campo select,
  #conteudo-principal .rpodoc-campo textarea,
  .tela-central .campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .tela-central .campo select {
    font-size: 16px;
  }
}

/* --- dois componentes compartilhados que destoavam na altura -------------
   Medido lado a lado na mesma linha de filtros de Usuários: a busca em 40px
   e os dois selects em 44px. E o seletor de "Itens por página", que aparece
   no rodapé de sete listas, em 36px. Nenhum dos dois é defeito de regra
   nova — é altura antiga que a camada de formulário não alcançava, porque
   .filtro-select e .seletor-pag select não pertencem a nenhuma família de
   campo. Agora pertencem à linguagem. */
#conteudo-principal .filtro-select,
#conteudo-principal .seletor-pag select {
  height: var(--lg-altura-campo); min-height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px; box-sizing: border-box;
}
#conteudo-principal .seletor-pag label {
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
#conteudo-principal .filtro-select:focus,
#conteudo-principal .seletor-pag select:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}
@media (max-width: 1024px) {
  #conteudo-principal .filtro-select,
  #conteudo-principal .seletor-pag select {
    min-height: var(--toque-min, 44px); height: auto;
  }
}
@media (max-width: 640px) {
  #conteudo-principal .filtro-select,
  #conteudo-principal .seletor-pag select { font-size: 16px; }
}

/* =========================================================================
   OS MODAIS QUE NASCEM NO <body> — Armas, Cartorial e Previsão

   POR QUE ESTES PRECISARAM DE UM BLOCO PRÓPRIO
   Toda a camada de formulário até aqui ancora em #conteudo-principal. Só que
   NOVE modais de Armas (103 campos — a maior superfície de formulário do
   sistema), mais os de Cartorial e Previsão, são criados com
   document.body.appendChild: nascem FORA do #conteudo-principal e o
   ancoradouro simplesmente não os alcança. Eles ficaram no visual antigo
   sem que nenhuma medida acusasse, porque as medidas também olhavam dentro
   do #conteudo-principal.

   Achado ao conferir, a pedido do Sgt, se a correção dos componentes
   compartilhados alcançava todos os módulos que os usam: a busca por
   document.body.appendChild trouxe 16 pontos, e aí a lacuna apareceu.

   O prefixo :root vale o mesmo do bloco 2: as regras dos módulos são de uma
   classe só, e :root soma uma pseudo-classe suficiente para vencer sem
   !important.
   ========================================================================= */
:root .proc-campo,
:root .cart-modal-body .cart-campo,
:root .pe-modal .pe-campo,
:root .pe-modal .pe-mini-grid > div {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0; margin-bottom: 14px;
}
:root .proc-campo label,
:root .cart-modal-body .cart-campo label,
:root .pe-modal .pe-campo label,
:root .pe-modal .pe-mini-grid > div > label {
  display: block; margin: 0;
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
:root .proc-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root .proc-campo select,
:root .cart-modal-body .cart-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root .cart-modal-body .cart-campo select,
:root .pe-modal .pe-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root .pe-modal .pe-campo select,
:root .pe-modal .pe-mini-grid > div input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
:root .pe-modal .pe-mini-grid > div select {
  height: var(--lg-altura-campo); min-height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px;
  width: 100%; min-width: 0; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
:root .proc-campo textarea,
:root .cart-modal-body .cart-campo textarea,
:root .pe-modal .pe-campo textarea {
  height: auto; min-height: 78px; padding: 10px 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px; line-height: 1.5;
  width: 100%; box-sizing: border-box; resize: vertical;
}
:root .proc-campo input:focus,
:root .proc-campo select:focus,
:root .proc-campo textarea:focus,
:root .cart-modal-body .cart-campo input:focus,
:root .cart-modal-body .cart-campo select:focus,
:root .pe-modal .pe-campo input:focus,
:root .pe-modal .pe-campo select:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}

/* A caixa do modal, o cabeçalho e o rodapé */
:root .proc-modal,
:root .cart-modal,
:root .pe-modal {
  background: var(--lg-papel);
  border: 0.5px solid var(--lg-linha);
  border-radius: var(--lg-raio-cartao);
  box-shadow: 0 12px 40px rgba(20,19,15,.16);
}
:root .proc-modal-header,
:root .cart-modal-header,
:root .pe-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; border-bottom: 0.5px solid var(--lg-linha);
}
:root .proc-modal-header h3,
:root .cart-modal-header h3,
:root .pe-modal-header h3 {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 19px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em; text-transform: none;
  color: var(--lg-tinta); margin: 0;
}
:root .proc-modal-rodape,
:root .cart-modal-footer {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 8px; flex-wrap: wrap;
  border-top: 0.5px solid var(--lg-linha);
}
:root .proc-campos-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start;
}
:root .proc-campos-grid .proc-campo { margin-bottom: 14px; }

/* Piso de toque e fonte de 16px também dentro destes modais. */
@media (max-width: 1024px) {
  :root .proc-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  :root .proc-campo select,
  :root .cart-modal-body .cart-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  :root .cart-modal-body .cart-campo select,
  :root .pe-modal .pe-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  :root .pe-modal .pe-campo select {
    min-height: var(--toque-min, 44px); height: auto;
  }
}
@media (max-width: 640px) {
  :root .proc-campos-grid { grid-template-columns: 1fr; }
  :root .proc-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  :root .proc-campo select,
  :root .proc-campo textarea,
  :root .cart-modal-body .cart-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  :root .cart-modal-body .cart-campo select,
  :root .pe-modal .pe-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  :root .pe-modal .pe-campo select {
    font-size: 16px;
  }
}

/* --- os filtros de dashboard e painel, achados na varredura por perfil ----
   A varredura com seis perfis mediu 91 campos a 36px: os filtros dos quatro
   dashboards (.dash-filtro-grupo), a data do Painel e as datas da Planilha e
   do SPE. Nenhum deles pertencia a família de campo nenhuma — mesma classe
   de lacuna do .filtro-select e do seletor de "Itens por página", e mesma
   correção: entram na camada compartilhada, não tela a tela.

   Os campos do dashboard JÁ tinham <label> em cima; faltava só a altura. Os
   três de data não tinham rótulo nenhum e ganharam <label> na marcação.

   O piso de toque continua valendo: 44px até 1024px. */
#conteudo-principal .dash-filtro-grupo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
#conteudo-principal .dash-filtro-grupo select,
#conteudo-principal .painel-header-actions input[type="date"] {
  height: var(--lg-altura-campo); min-height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel); color: var(--lg-tinta);
  font-family: inherit; font-size: 13px; box-sizing: border-box;
}
#conteudo-principal .dash-filtro-grupo > label {
  display: block; margin: 0 0 5px;
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
#conteudo-principal .dash-filtro-grupo input:focus,
#conteudo-principal .dash-filtro-grupo select:focus,
#conteudo-principal .painel-header-actions input[type="date"]:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}
/* O "até" entre as duas datas do período alinha com os campos, não com o
   rótulo. */
#conteudo-principal .dash-filtro-periodo {
  display: flex; align-items: center; gap: 7px;
}
#conteudo-principal .dash-filtro-periodo > span {
  font-size: 12px; color: var(--lg-tinta-3); white-space: nowrap;
}
@media (max-width: 1024px) {
  #conteudo-principal .dash-filtro-grupo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  #conteudo-principal .dash-filtro-grupo select,
  #conteudo-principal .painel-header-actions input[type="date"] {
    min-height: var(--toque-min, 44px); height: auto;
  }
}
@media (max-width: 640px) {
  #conteudo-principal .dash-filtro-grupo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  #conteudo-principal .dash-filtro-grupo select,
  #conteudo-principal .painel-header-actions input[type="date"] { font-size: 16px; }
}

/* --- a fonte de 16px que faltava ao .lg-campo -----------------------------
   Achado na amostra ampla do bloco 6: os filtros do Check List e de Armas
   apareciam a 13px no celular. Não era regra nova errada — é que o
   `.lg-campo`, criado na leva A para os filtros, nunca ganhou a regra dos
   16px, que só nasceu nesta leva junto com a camada de formulário.

   Os 16px não são estética: abaixo disso o navegador do celular dá zoom
   sozinho ao focar o campo, e o operador perde a tela de vista. Vale para
   TODO campo, filtro incluído.

   A altura já estava certa (o piso de 44px do tema alcança o .lg-campo);
   aqui é só o tamanho da letra. */
@media (max-width: 640px) {
  #conteudo-principal .lg-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .lg-campo select,
  #conteudo-principal .lg-campo textarea,
  #conteudo-principal .lg-periodo input {
    font-size: 16px;
  }
}
/* O slot de ação da grade de filtros empilha os botões no celular, para não
   espremer dois botões numa faixa de 170px. */
@media (max-width: 640px) {
  .lg-campo-acao { flex-wrap: wrap; }
  .lg-campo-acao > button { flex: 1 1 auto; }
}

/* --- o .lg-campo precisava de ID para vencer o container do modulo ---------
   Medido na promocao: proc-f-busca ficou em 36px em producao. A causa nao e
   regra nova errada, e a especificidade da regra ANTIGA:

     leva A .....  .lg-campo input                 (0,1,1)
     modulo ......  .proc-filtros input            (0,2,0)  <- vence

   Quando um .lg-campo e colocado DENTRO de um container de filtro que o
   modulo estiliza por classe, o modulo ganha. O .lg-campo nasceu na leva A
   para substituir esses containers, nao para conviver com eles -- e a leva de
   formularios passou a aninhar os dois (o container vira grade, o .lg-campo
   vira o campo), o que trouxe a disputa a tona.

   Prefixar com #conteudo-principal leva a regra para (1,1,1) e encerra a
   discussao, sem !important. Vale para os filtros de TODAS as telas que
   receberam .lg-campo dentro do proprio container. */
#conteudo-principal .lg-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#conteudo-principal .lg-campo select {
  height: var(--lg-altura-campo);
  min-height: var(--lg-altura-campo);
  padding: 0 11px;
  border: 0.5px solid var(--lg-linha-2);
  border-radius: var(--lg-raio-campo);
  background: var(--lg-papel);
  color: var(--lg-tinta);
  font-family: inherit; font-size: 13px;
  width: 100%; min-width: 0; box-sizing: border-box;
}
#conteudo-principal .lg-campo > label {
  font-size: 11px; font-weight: 500; color: var(--lg-tinta-3);
  letter-spacing: .02em; text-transform: none;
}
#conteudo-principal .lg-campo input:focus,
#conteudo-principal .lg-campo select:focus {
  outline: none; border-color: var(--lg-bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.14);
}
@media (max-width: 1024px) {
  #conteudo-principal .lg-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .lg-campo select {
    min-height: var(--toque-min, 44px); height: auto;
  }
}
@media (max-width: 640px) {
  #conteudo-principal .lg-campo input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #conteudo-principal .lg-campo select { font-size: 16px; }
}

/* =========================================================================
   IDENTIDADE INSTITUCIONAL — Painel e barra lateral (27/07/2026)
   ========================================================================= */

/* --- a linha de identidade do Painel ------------------------------------
   Ocupa a largura toda acima do título, para não competir com o campo de
   data nem com o botão de Gestão, que ficam à direita. Em caixa alta, que é
   a exceção da marca institucional. */
#conteudo-principal .painel-identidade,
:root .painel-wrap .painel-identidade {
  flex: 1 0 100%;
  order: -1;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--lg-tinta-3, #8a8780);
  line-height: 1.35;
  margin: 0 0 2px;
}

/* --- a barra lateral QUEBRA em vez de cortar ----------------------------
   Medido antes: a 1440px o nome pede 235px e a barra dá 200px, com
   `white-space: nowrap` + `text-overflow: ellipsis` -> "AGÊNCIA LOCAL
   ESPECIAL DE INTELIGÊ…". No celular cabia, porque abaixo de 1024px a barra
   vira gaveta de 270px — o corte era um problema de DESKTOP, ao contrário
   do que se esperaria.

   Cortar o nome da Agência com reticências não é aceitável: onde não couber
   em uma linha, quebra em duas. As três propriedades que faziam o corte
   precisam ser desfeitas juntas — tirar só o `text-overflow` deixaria o
   texto escondido pelo `overflow: hidden` em vez de reticente, que é pior. */
#sidebar .sidebar-logo {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  /* quebra por palavra; sem hifenização forçada, que picaria "INTELIGÊNCIA" */
  overflow-wrap: break-word;
  text-align: center;
}