/* ==========================================================================
   TEMA ARGUS 2026 — ESTILO CENTRAL
   ALEI / 1º BPChq — Brigada Militar RS

   O QUE ESTE ARQUIVO É
   A camada de aparência do ARGUS. Carrega DEPOIS do main.css e do
   dashboard.css e REDEFINE as variáveis que eles já consomem, mais um punhado
   de regras de forma. O CSS funcional continua intacto: nenhuma linha do
   main.css foi alterada nesta leva.

   Mudar o visual do sistema depois = mexer NESTE arquivo, não em cada tela.

   A COR NÃO MUDOU. NEM UMA.
   A paleta preto+bronze foi LIDA do código, não inventada, e está preservada
   valor por valor:

       preto do menu    #111111   (--cor-sidebar, main.css:16)
       bronze principal #c9a84c   (--cor-acento,  main.css:17)
       bronze de título #a8842f   (o mais usado do sistema — 44 ocorrências,
                                   cravado nos <style> dos módulos)
       azul institucional #1a2744 (--cor-primaria)
       fundo            #f0f2f5   (--cor-fundo)
       texto            #1e2a3a   (--cor-texto)
       erro/info/sucesso #c0392b / #2563eb / #16a34a

   O que mudou foi a FORMA: botão-pílula de contorno, cartão com respiro,
   input arredondado, espaçamento generoso, cantos suaves, tipografia limpa.

   ORDEM NO CASCADE — POR QUE ISTO IMPORTA AQUI
   14 módulos do ARGUS injetam <style> em tempo de execução, com cerca de 700
   cores em hexadecimal cravado e ~103 `!important`. Um <style> injetado entra
   no documento DEPOIS das folhas do <head>, então vence empates. Este tema
   alcança tudo o que é GLOBAL (a casca: sidebar, cabeçalho, botões, campos,
   tabelas, paginação, toolbar) — que é a maior parte da superfície, porque
   .btn-primary/.btn-secondary/.btn-ghost são, nas palavras do próprio
   main.css, "usadas por praticamente todos os módulos".
   O que ele NÃO alcança são as classes próprias de cada módulo (.cart-table,
   .ap-table, .via-*, ...) definidas nesses <style> com !important. Essas estão
   listadas no relatório da leva para refino específico nas levas seguintes.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS — as cores continuam as mesmas; a forma é que foi modernizada
   ========================================================================== */
:root {
  /* --- cores lidas do sistema, REPETIDAS aqui para ficarem num lugar só --- */
  --preto-menu:      #111111;   /* era --cor-sidebar  */
  --preto-elevado:   #1a1a1a;   /* já usado no main.css */
  --preto-hover:     #2a2a2a;   /* já usado no main.css */
  /* ---------------------------------------------------------------------
     O BRONZE DO ARGUS — UM SÓ, EM DOIS TONS. Leia antes de "unificar".

     O sistema parecia ter dois bronzes. Convertidos para HSL, não tem:

         #c9a84c  =  matiz 44, saturação 54%, luz 54%
         #a8842f  =  matiz 42, saturação 57%, luz 42%

     Mesmo matiz, mesma saturação. O que muda é a LUZ — e muda por um motivo
     que não dá para contornar: contraste.

         fundo               #c9a84c      #a8842f
         branco #ffffff        2,29        3,50
         fundo do app          2,04        3,12
         menu preto            8,26        5,40

     A régua da WCAG pede 4,5 para texto comum e 3,0 para texto grande/negrito.
     O #c9a84c sobre fundo claro dá 2,29 — reprova até como título. Ou seja:
     colapsar os dois num valor só deixaria ILEGÍVEL todo título de módulo do
     sistema (41 dos 46 usos do tom escuro são `color:` sobre fundo claro).

     A solução é a que qualquer sistema de design usa: UM bronze, dois tons,
     escolhidos pelo FUNDO. Os nomes abaixo dizem a regra, para não voltar a
     virar decisão de cada tela.
     --------------------------------------------------------------------- */
  --bronze:              #c9a84c;   /* sobre fundo ESCURO, preenchimentos, bordas (= --cor-acento) */
  --bronze-sobre-claro:  #a8842f;   /* o MESMO bronze, escurecido, para TEXTO sobre fundo claro */
  --bronze-escuro:       #b8953e;   /* já usado no hover do .btn-acento */
  --azul-inst:       #1a2744;   /* era --cor-primaria */

  /* --- neutros que o sistema já usava (mantidos) --- */
  --linha:           #e5e7eb;
  --linha-forte:     #d1d5db;
  --cinza-texto:     #6b7280;
  --cinza-suave:     #9ca3af;
  --superficie-alt:  #f9fafb;
  --superficie-alt2: #f3f4f6;

  /* --- FORMA: é aqui que mora a modernização --- */

  /* O raio era 5px — um canto "duro" que datava o sistema. 12px arredonda
     cartões, campos e caixas sem virar bolha. Como main.css usa var(--radius)
     em vários lugares, redefinir aqui moderniza todos de uma vez. */
  --radius:          12px;
  --radius-sm:       9px;
  --radius-lg:       16px;
  --radius-pilula:   999px;      /* botões */

  /* Sombra mais baixa e difusa: eleva sem sujar. A antiga (0 2px 12px /.10)
     era escura demais para cartões grandes. */
  --sombra:          0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
  --sombra-forte:    0 2px 4px rgba(16,24,40,.05), 0 12px 32px rgba(16,24,40,.10);

  /* Respiro. Espaçamento generoso é metade da sensação de "moderno". */
  --esp-1: .35rem;  --esp-2: .6rem;   --esp-3: .9rem;
  --esp-4: 1.3rem;  --esp-5: 1.9rem;  --esp-6: 2.6rem;

  /* Alvo de toque mínimo (WCAG 2.5.5 / diretriz de app). O ARGUS é usado no
     celular em serviço, muitas vezes com luva ou em movimento. */
  --toque-min: 44px;

  --transicao: .18s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. BASE — tipografia limpa e respiro
   ========================================================================== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.006em;   /* fecha levemente o texto de interface */
}

h1, h2, h3, h4 { letter-spacing: .01em; }

/* Títulos de módulo: mantêm o bronze e a fonte condensada que o sistema já
   usa, ganham respiro e um filete de acento. */
.conteudo-header h2,
#conteudo h2:first-of-type {
  letter-spacing: .03em;
}

/* ==========================================================================
   3. BOTÕES — pílula de contorno; a variante ativa vem preenchida em bronze
   ========================================================================== */

/* Base comum a todas as famílias de botão do sistema. O ARGUS acumulou
   quatro nomenclaturas (.btn, .btn-primary, .btn-primario, .btn-linha-acao);
   o tema unifica a FORMA sem mexer em qual classe cada tela usa. */
.btn,
.btn-primary, .btn-secondary, .btn-ghost,
.btn-novo, .btn-acento, .btn-outline, .btn-perigo,
.btn-primario, button[type="submit"],
/* Os três botões das telas de acesso estão no main.css por ID
   (`#btn-login, #btn-troca, #btn-esqueci`). Seletor de ID pesa mais que
   classe: sem repeti-los aqui, o raio antigo venceria e só eles ficariam
   quadrados no sistema inteiro. */
#btn-login, #btn-troca, #btn-esqueci,
/* Família de botões própria dos Dashboards, definida no dashboard.css (folha
   global, não <style> injetado — por isso o tema alcança). Só a FORMA é
   ajustada; a cor de acento dos dashboards é outra e fica intocada, ver
   seção 10. */
.btn-dash-apresentacao, .btn-dash-cast, .btn-dash-aplicar, .btn-dash-limpar {
  border-radius: var(--radius-pilula);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
  padding: .55rem 1.15rem;
  min-height: 38px;
}

.btn:active,
.btn-primary:active, .btn-secondary:active, .btn-ghost:active,
.btn-novo:active, .btn-acento:active, .btn-outline:active, .btn-perigo:active {
  transform: translateY(1px);
}

/* --- CONTORNO é o padrão do visual novo ---
   O botão neutro deixa de ser um bloco cinza e passa a ser uma pílula de
   borda fina. Menos peso visual numa tela cheia de listas, e destaca de
   verdade o botão que importa (o bronze preenchido). */
.btn-secondary, .btn-outline, .btn-ghost {
  background: #fff;
  border: 1px solid var(--linha-forte);
  color: var(--cor-texto);
  box-shadow: 0 1px 1px rgba(16,24,40,.03);
}
.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover {
  background: var(--superficie-alt);
  border-color: var(--bronze);
  color: var(--bronze-sobre-claro);
}

/* --- AÇÃO PRINCIPAL: preta, como já era, agora em pílula --- */
.btn-novo, .btn-primario, button[type="submit"] {
  background: var(--preto-menu);
  color: #fff;
  border: 1px solid var(--preto-menu);
}
.btn-novo:hover, .btn-primario:hover, button[type="submit"]:hover {
  background: var(--preto-hover);
  border-color: var(--preto-hover);
  box-shadow: 0 4px 14px rgba(17,17,17,.18);
}

/* --- ACENTO: bronze preenchido, o "ativo" do sistema --- */
.btn-acento {
  background: var(--bronze);
  color: var(--preto-elevado);
  border: 1px solid var(--bronze);
}
.btn-acento:hover {
  background: var(--bronze-escuro);
  border-color: var(--bronze-escuro);
  box-shadow: 0 4px 14px rgba(201,168,76,.28);
}

/* Foco visível — acessibilidade e navegação por teclado. */
.btn:focus-visible,
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible,
.btn-novo:focus-visible, .btn-acento:focus-visible, .btn-outline:focus-visible,
.btn-perigo:focus-visible, .btn-primario:focus-visible, button[type="submit"]:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* Botões de ação dentro da linha da lista: pílula pequena, mesma linguagem. */
.btn-linha-acao { border-radius: var(--radius-pilula); font-weight: 600; }

/* Fechar de modal — está no main.css (global), então entra na fundação. */
.modal-fechar { border-radius: var(--radius-pilula); }

/* O botão de login ocupa a largura toda (regra do main.css) — a pílula fica
   larga, o que é o desejado numa tela de acesso. */
.btn-primario, button[type="submit"] { min-height: 44px; }

/* ==========================================================================
   4. CAMPOS — arredondados leves, com respiro e foco em bronze
   ========================================================================== */
.campo input, .campo select, .campo textarea,
.toolbar-busca input,
.seletor-pag select,
/* Filtros dos Dashboards — definidos no dashboard.css, que é folha global.
   A FORMA acompanha o resto do sistema; a cor de foco deles continua sendo a
   do próprio dashboard (--da-accent), tratada na seção 10. */
.dash-filtros select, .dash-filtros input[type="date"] {
  border-radius: var(--radius-sm);
  border: 1px solid var(--linha-forte);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input, .campo select, .campo textarea {
  padding: .65rem .85rem;
  min-height: 42px;
}

/* O foco antes era só uma troca de cor de borda. Um anel suave em bronze diz
   com clareza onde o cursor está — e amarra o campo à identidade do sistema. */
.campo input:focus, .campo select:focus, .campo textarea:focus,
.toolbar-busca input:focus, .seletor-pag select:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
  outline: none;
}

.campo label {
  color: var(--cinza-texto);
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: .38rem;
}

/* ---- PISO DE FORMA PARA CAMPO "NU" (refino 1, 26/07/2026) ----------------
   Descoberto ao refinar a família .pe-: nove campos em QUATRO módulos
   diferentes (as datas de referência de Confirmação, Planilha, SPE e Controle
   de Meios, mais os filtros de período) eram `<input type="date">` sem estilo
   nenhum — herdavam só o padrão do navegador e apareciam com 19 a 21 PIXELS
   de altura. Não era descuido de um módulo: é que nada no sistema estabelecia
   um piso, então qualquer campo escrito sem classe nascia assim.

   Isto é o piso. `:where()` zera a especificidade do seletor, então QUALQUER
   regra mais específica continua ganhando — `.campo input` segue com 42px,
   `.pe-campo input` com 40px, e assim por diante. Aqui só se garante que
   nenhum campo caia abaixo do mínimo utilizável.

   O piso de 44px do mobile (mais abaixo, na media query, com seletor de ID)
   continua valendo e vence este.

   ---- CORREÇÃO (refino 4, 26/07/2026): O PISO NÃO ERA ZERO ----------------
   O parágrafo acima descrevia a INTENÇÃO, não o que o seletor fazia. O
   `:where()` zerava só o `#conteudo-principal`; os três `:not()` ficavam de
   fora, e o ARGUMENTO de um `:not()` CONTA na especificidade. Cada
   `:not([type="..."])` vale o mesmo que uma classe:

       :where(#conteudo-principal) .......... 0,0,0
       input ................................ 0,0,1
       :not([type="hidden"]) ................ 0,1,0
       :not([type="checkbox"]) .............. 0,1,0
       :not([type="radio"]) ................. 0,1,0
       ----------------------------------------------
       TOTAL ................................ 0,3,1   <- não é zero

   Ou seja: o "piso" pesava mais que praticamente toda regra de campo escrita
   pelos módulos, que são do tipo `.xxx input` (0,1,1). Em vez de piso, virou
   TETO — e silenciosamente. Descoberto ao refinar o campo do código de
   pareamento da TV: `.tv-config-input-codigo` pedia monospace (é um código de
   6 dígitos lido de longe e digitado à mão) e o campo saía em Inter, porque
   quem vencia o `font-family` era este bloco. No mesmo campo, o `min-height`
   de 40px e o `padding` do módulo também estavam sendo descartados pelos 36px
   e pelo padding daqui.

   A correção é envolver a cadeia de `:not()` em `:where()`, que zera o que
   está dentro dela. O seletor passa a ser (0,0,1) — piso de verdade, como o
   comentário sempre disse. As exclusões continuam idênticas: caixa de marcação,
   botão de opção e campo oculto seguem de fora.

   Efeito colateral verificado, não presumido: as 32 telas foram medidas antes
   e depois. Nenhum campo caiu abaixo do mínimo, porque quase nenhum módulo
   declara `min-height` — para esses, o piso continua sendo o único a definir
   altura e continua valendo. O que muda é que agora o módulo consegue pedir
   MAIS que o piso (40px, monospace, padding próprio) e ser atendido. */
:where(#conteudo-principal) input:where(:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])),
:where(#conteudo-principal) select,
:where(#conteudo-principal) textarea {
  min-height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--linha-forte);
  padding: .45rem .7rem;
  font-family: var(--fonte-ui);
  box-sizing: border-box;
}
:where(#conteudo-principal) input:focus-visible,
:where(#conteudo-principal) select:focus-visible,
:where(#conteudo-principal) textarea:focus-visible {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(201,168,76,.16);
}

/* Checkbox/radio: o main.css já os protege do width:100%; aqui só o
   alvo de toque e a cor de marcação. */
.campo input[type="checkbox"], .campo input[type="radio"] { accent-color: var(--bronze); }

/* ==========================================================================
   5. SUPERFÍCIES — cartão com respiro no lugar da tabela dura
   ========================================================================== */
.tabela-container,
.painel-notificacoes,
.login-box {
  border-radius: var(--radius-lg);
  box-shadow: var(--sombra);
  border: 1px solid var(--linha);
}

.login-box { padding: var(--esp-5); }

/* A tabela ganha ar: cabeçalho discreto em maiúsculas, linhas mais altas,
   divisórias finas. Continua tabela (nada de mudar marcação), mas lida como
   uma lista de cartões. */
.tabela th {
  background: var(--superficie-alt);
  color: var(--cinza-texto);
  font-family: var(--fonte-titulo);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  padding: .85rem .9rem;
  border-bottom: 1px solid var(--linha);
}
.tabela td {
  padding: .95rem .9rem;
  border-bottom: 1px solid var(--superficie-alt2);
}
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover td { background: var(--superficie-alt); }
.tabela tbody tr:last-child td { border-bottom: none; }

/* Paginação e seletor de itens: pílulas, coerentes com os botões. */
.lista-paginacao { gap: var(--esp-2); align-items: center; }
.lista-paginacao button {
  border-radius: var(--radius-pilula);
  border: 1px solid var(--linha-forte);
  background: #fff;
  min-height: 36px;
  padding: .4rem 1rem;
  transition: all var(--transicao);
}
.lista-paginacao button:not(:disabled):hover {
  border-color: var(--bronze);
  color: var(--bronze-sobre-claro);
  background: var(--superficie-alt);
}
.seletor-pag select { min-height: 36px; padding: .35rem .7rem; }

/* ---- ABAS ----------------------------------------------------------------
   Estão no main.css (global), então entram na fundação. Antes: sublinhado
   azul (--cor-primaria) sobre uma borda cinza de 2px. Agora: aba ativa em
   BRONZE, com o sublinhado mais fino e a inativa em cinza discreto — a mesma
   linguagem do item ativo da sidebar, para "onde estou" ser sempre a mesma
   pista visual no sistema inteiro. */
.tabs {
  border-bottom: 1px solid var(--linha);
  gap: .2rem;
  margin-bottom: var(--esp-4);
  overflow-x: auto;                 /* no celular as 4 abas não cabem lado a lado */
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab-btn {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border-bottom: 2px solid transparent;
  color: var(--cinza-texto);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.tab-btn:hover { color: var(--bronze-sobre-claro); background: var(--superficie-alt); }
.tab-btn.ativa {
  color: var(--bronze-sobre-claro);
  border-bottom-color: var(--bronze);
  background: transparent;
}
.tab-btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: -2px; }

/* Toolbar com mais respiro entre os controles. */
.toolbar { gap: var(--esp-3); margin-bottom: var(--esp-4); }
.toolbar-busca input { min-height: 40px; padding-left: 2.1rem; }

/* Mensagens de estado: cantos suaves, mesma cor semântica de antes. */
.msg-erro, .msg-info, .msg-sucesso, .info-box {
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
}

/* ==========================================================================
   6. SIDEBAR — preta como já era, item ativo em bronze com realce de contorno
   ========================================================================== */
#sidebar {
  background: var(--preto-menu);
  border-right: 1px solid rgba(255,255,255,.06);
}

#menu-nav li a,
.menu-grupo-btn {
  border-radius: var(--radius-sm);
  margin: 2px .6rem;
  padding: .6rem .8rem;
  transition: background var(--transicao), color var(--transicao),
              box-shadow var(--transicao);
  letter-spacing: .01em;
}

#menu-nav li a:hover,
.menu-grupo-btn:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}

/* O item ativo ganha, além do fundo bronze translúcido que já existia, um
   filete sólido à esquerda — a leitura de "onde estou" fica imediata mesmo
   de relance, que é como um menu lateral é usado. */
#menu-nav li a.ativo {
  background: rgba(201,168,76,.14);
  color: var(--bronze);
  box-shadow: inset 3px 0 0 var(--bronze);
  font-weight: 600;
}

/* Ícones do menu em CONTORNO (não preenchidos): mais leves e coerentes com a
   linguagem de pílula de borda. Vale para <svg> dentro do menu. */
#menu-nav svg, .menu-grupo-btn svg {
  stroke-width: 1.6;
  fill: none;
  stroke: currentColor;
}

.menu-grupo {
  color: var(--cinza-suave);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Submenu com recuo e filete: hierarquia visível sem pesar. */
.menu-sub { padding-left: .5rem; }
.menu-sub li a { border-left: 1px solid rgba(255,255,255,.08); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ==========================================================================
   7. CABEÇALHO — coerente com a identidade preto+bronze
   ========================================================================== */
/* ATENÇÃO — o #topbar-desktop NÃO leva fundo, e isso é deliberado.
   O main.css (linhas 287-291) registra o motivo: a sidebar é `fixed`, então
   qualquer faixa opaca no topo, mesmo só à direita, passa por cima e corta
   visualmente a logo da coruja no canto superior esquerdo. Além disso o
   `.topbar-nome-guerra` usa texto ESCURO (var(--cor-sidebar)) — escurecer o
   fundo aqui sumiria com ele. Fundo escuro só no cabeçalho MOBILE, que já
   nasceu escuro e já tem texto claro. */
#header-mobile {
  background: var(--preto-menu);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.btn-icone, .btn-abrir-perfil, .btn-notificacoes {
  border-radius: var(--radius-pilula);
  transition: background var(--transicao), opacity var(--transicao);
}

/* Dois contextos, dois realces — um só não serve para os dois.
   Sobre fundo ESCURO (cabeçalho mobile e sidebar), o realce é um véu claro.
   Sobre fundo CLARO (topbar do desktop, que é transparente sobre o conteúdo),
   um véu claro seria invisível: ali o realce tem de ser um véu escuro. */
#header-mobile .btn-icone:hover,
#header-mobile .btn-abrir-perfil:hover,
#header-mobile .btn-notificacoes:hover,
#sidebar .btn-icone:hover {
  background: rgba(255,255,255,.10);
}
#topbar-desktop .btn-abrir-perfil:hover,
#topbar-desktop .btn-notificacoes:hover {
  background: rgba(17,17,17,.06);
}

.badge-perfil { color: var(--bronze); letter-spacing: .09em; }

/* ==========================================================================
   8. MOBILE — requisito inegociável
   O sistema já tem o mobile resolvido: breakpoint em 1024px, sidebar que vira
   gaveta com hambúrguer, SEM barra de ícones fixa embaixo (foi revertida no
   passado e não volta aqui). O tema NÃO mexe em layout de mobile — só garante
   que a forma nova continue confortável no dedo.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Alvo de toque: 44px é o mínimo. A pílula, sendo mais baixa que um bloco,
     precisa deste piso explícito para não ficar difícil de acertar. */
  .btn, .btn-primary, .btn-secondary, .btn-ghost,
  .btn-novo, .btn-acento, .btn-outline, .btn-perigo,
  .btn-linha-acao, .lista-paginacao button, .btn-icone {
    min-height: var(--toque-min);
    min-width: var(--toque-min);
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* Campos grandes: no celular o teclado ocupa metade da tela; campo baixo
     vira erro de digitação. 48px também evita o zoom automático do iOS,
     junto com o font-size de 16px abaixo. */
  .campo input, .campo select, .campo textarea,
  .toolbar-busca input, .seletor-pag select {
    min-height: 48px;
    font-size: 16px;   /* < 16px faz o Safari dar zoom ao focar o campo */
  }

  /* PISO DE TOQUE PARA TODO CAMPO DA ÁREA DE CONTEÚDO.
     A regra acima só alcança os campos com as classes globais. Muitos módulos
     desenham os próprios filtros em <style> injetado (ex.: `.cart-filtros
     input { padding:.38rem .6rem }`), e esses ficavam com ~24px de altura no
     celular — medido: só 14% dos campos da tela do Cartorial chegavam a 44px.
     Campo desse tamanho no dedo é erro de digitação garantido, e mobile é
     requisito, não enfeite.
     O seseletor usa o ID do <main> de propósito: um <style> injetado entra no
     documento depois desta folha e venceria um empate de especificidade. Com o
     ID, a regra ganha sem precisar de `!important` — que envenenaria o refino
     por módulo das próximas levas.
     É piso de ACESSIBILIDADE, não estilo de módulo: por isso mora na fundação.
     Caixas de marcação e botões de opção ficam de fora (têm tamanho próprio). */
  #conteudo-principal input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  #conteudo-principal select,
  #conteudo-principal textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* PISO DE TOQUE PARA TODO BOTÃO DA ÁREA DE CONTEÚDO (refino 2, 26/07/2026).
     A regra de botões acima lista CLASSES, e por isso não alcançava os botões
     que cada módulo inventa: `.btn-acao-editado` (a marca de "registro
     editado") tinha 32 px, `.ap-btn-rm` (remover item da apreensão) 34 px, e
     assim por diante em cada tela. Medido em três telas: o menor botão ficava
     abaixo dos 44 px em todas.
     Aqui o seletor usa o ID do <main> de propósito — precisa VENCER a classe
     do módulo, e não ser vencido por ela, como acontece com o piso dos campos
     logo acima. É acessibilidade, não estilo de módulo. */
  #conteudo-principal button {
    min-height: var(--toque-min);
  }

  /* Respiro maior entre blocos: no celular tudo empilha, e sem espaço a tela
     vira um paredão. */
  .toolbar { gap: var(--esp-2); }
  .tabela-container { border-radius: var(--radius); }

  /* Nada pode estourar a largura da tela. */
  .tabela-container, .toolbar, .lista-paginacao { max-width: 100%; }
}

/* ==========================================================================
   10. DASHBOARDS — só a forma; a paleta deles NÃO é a preto+bronze, e fica

   O dashboard.css tem um conjunto próprio de variáveis, com acento
   AZUL-ARDÓSIA (--da-accent: #5a7fa8) e uma escala de cores por Companhia
   (--da-cia1..4) usada nas séries dos gráficos. Não é descuido: cor de série
   é CODIFICAÇÃO DE DADO — trocar por tons de bronze deixaria as séries
   parecidas entre si e prejudicaria a leitura, além de contrariar a regra
   desta leva ("não inventar cor").
   Aqui, portanto, só se moderniza a FORMA: cantos e sombras acompanham o
   resto do sistema, as cores dos dashboards permanecem exatamente como estão.
   Se o Sgt quiser unificar a paleta dos dashboards, é decisão de outra leva.
   ========================================================================== */
:root {
  --da-radius:    var(--radius-sm);
  --da-shadow:    var(--sombra);
  --da-shadow-md: var(--sombra-forte);
}

/* ==========================================================================
   11. RESPEITO A QUEM PEDE MENOS MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-secondary, .btn-ghost,
  .btn-novo, .btn-acento, .btn-outline, .btn-perigo,
  .btn-primario, button[type="submit"],
  #menu-nav li a, .menu-grupo-btn,
  .campo input, .campo select, .campo textarea {
    transition: none;
  }
  .btn:active, .btn-primary:active, .btn-secondary:active { transform: none; }
}
