/* sgi-pele.css — pele oficial do SGI.
   FONTE ÚNICA: o sgi-lateral.js referencia este arquivo, e as páginas que NÃO carregam a
   lateral (MAMUTE, holerite, vaga, ouvidoria, pesquisa, relato, frota-check, gestão à
   vista, prj-*) incluem <link rel="stylesheet" href="/Painel/sgi-pele.css"> antes de
   </head>. Regras e tokens: DESIGN.md §2/§3/§4/§6 no projeto Gestao_Licitacoes.
   ATENÇÃO: o link tem de vir DEPOIS do <style> da página para vencer no empate.

   26/08/2026 — mockup B "Conta Azul", aprovado por print.
   18/09/2026 — reescrita para o vocabulário do MaterialM (wrappixel/materialm-react-
   tailwind-free, medido no ar em 18/09) COM O AZUL DA APJ. O que veio de lá é FORMA,
   não cor: card raio 12 SEM BORDA, sombra quase invisível, tipografia de UMA família
   só (Inter) e uma escala curta. A paleta continua sendo a nossa — medindo os dois
   lado a lado, já éramos quase iguais em cor (fundo deles #F4F7FB × nosso #f3f7fc;
   texto #111C2D × #122036; secundário #5A6A85 × #64748b). A diferença real estava na
   FORMA e na ESCALA, e é ela que esta reescrita ataca.

   POR QUE A ESCALA: medido em 18/09 nas 28 páginas de public/ — 42 tamanhos de fonte
   distintos e QUATRO bases de corpo diferentes (13,5px nos 8 módulos do lote de 26/08;
   14px nos 2 monólitos; 14,5px na ouvidoria; 15px nas 10 páginas satélite), com h1
   variando de 15,5px a 31px. Havia 331 declarações em MEIO PIXEL (13,5 · 12,5 · 11,5 ·
   10,5 · 9,5 · 15,5 · 14,5): é o rastro de uma redução de 0,9× aplicada nos módulos do
   lote e nunca aplicada no resto. É isso que faz cada tela parecer de um sistema
   diferente — não a cor. */

/* 07/09/2026 (auditoria LGPD, Onda 1) — este @import apontava para fonts.googleapis.com.
   Toda página do SGI mandava o IP do usuário para servidor nos EUA a cada carregamento,
   sem base legal escrita e sem que ele soubesse. Poppins e Inter são SIL OFL 1.1: auto-
   hospedar é permitido pela licença. Mesma aparência, zero requisição para fora. */
@import url('/Painel/fontes/fontes.css');

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS DA PELE
   Prefixo --sgi- DE PROPÓSITO: a pele carrega DEPOIS do <style> da página, então
   um :root{--brand:…} aqui venceria o :root da página no empate e reescreveria a
   paleta de cada módulo por tabela. Com prefixo próprio não há colisão possível.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --sgi-fonte: Inter, "Segoe UI", system-ui, sans-serif;
  /* Ação — CHAPADA, como no MaterialM (lá é #00a1ff). O tom era #2b7de9 e desceu para
     #2472d6 em 18/09 por CONTRASTE MEDIDO: branco sobre #2b7de9 dá 4,03:1 e reprova no
     mínimo AA de 4,5:1 para texto normal — e é o rótulo de TODO botão principal do
     sistema. #2472d6 dá 4,7:1, é a mesma família de azul e a diferença a olho é de um
     tom. Quem for clarear este token de novo, meça o branco por cima antes. */
  --sgi-azul: #2472d6;
  --sgi-azul-fundo: #1c5fc0;    /* hover / pressionado */
  --sgi-azul-claro: #eaf3fd;    /* pílula suave, item ativo, botão fantasma */
  /* Texto sobre --sgi-azul-claro é o azul ESCURO, não o azul de ação: #2b7de9 sobre
     #eaf3fd dá 3,6:1 e reprova no mínimo de 4,5:1 (AA, texto normal) — no print do
     mockup o botão "Limpar" parecia desabilitado. #1c5fc0 sobre #eaf3fd dá 5,5:1. */
  --sgi-azul-texto: #1c5fc0;
  --sgi-tinta: #111c2d;         /* título (MaterialM: #111C2D) */
  --sgi-texto: #33415c;         /* corpo */
  --sgi-fraco: #5a6a85;         /* secundário (MaterialM: #5A6A85) */
  --sgi-linha: #e8eef7;
  --sgi-chao: #f3f7fc;          /* fundo da página — o nosso, já idêntico ao deles */
  --sgi-sombra: 0 2px 4px -1px rgba(175, 182, 201, .28);  /* --shadow-md do MaterialM */
  --sgi-r-card: 12px;
  --sgi-r-campo: 8px;
  /* 19/09 — SEMÂNTICA DE ESTADO, trazida para cá porque não existia lugar nenhum de onde
     herdar: cada tela carregava a própria cópia e tela nova copiava de tela velha. O
     #16a34a estava em 18 telas e dava 2,93:1 sobre o fundo da página — o pior contraste
     que a varredura achou em tela leve, e ele pinta mensagem de ESTADO. O #dc2626 estava
     em 19 e dava 4,30:1, pintando mensagem de ERRO. Os tons abaixo não são novos: são os
     mesmos que entraram no ar hoje no engenharia e no orcamentos. */
  --sgi-verde: #15763a;      /* sucesso / conforme — 5,07:1 no pior fundo claro */
  --sgi-vermelho: #b03a2e;   /* erro / recusa    — 5,35:1 no pior fundo claro */
}

/* ───────────────────────────────────────────────────────────────────────────
   1b. O ATRIBUTO hidden PRECISA ESCONDER — 30/09
   O atributo só esconde porque o navegador aplica display:none na folha DELE, e
   display de autor vence isso. Onde a classe é display:flex — `.campo` e `.linha`,
   que existem em 11 telas do public/ — o elemento marcado CONTINUA na tela. E o
   padrão se disfarça: botão e div sem classe escondem normal, então parece que
   funciona na maior parte dos casos.
   MEDIDO por mim no rh.html, não repassado: o campo “Justificativa do salário *”
   (#f-salario-just-campo) nasce marcado e computa display:flex; com o
   <dialog id="dlg-func"> aberto ele renderiza a 224×68 px. É um campo com asterisco
   de obrigatório que só deveria aparecer quando o salário foge do piso da CCT.
   O !important não é preguiça: é justamente o que vence o display do autor, que é o
   que quebra hoje. E NÃO vai sob :not(.pele-compacta) de propósito — isto é conserto
   de comportamento, não preferência visual: tela que dispensa o visual da pele não
   deve dispensar o atributo funcionando.
   Conferido ANTES de gravar: nenhum .html do public/ estiliza para APARECER (as duas
   únicas regras, no qsms, também escondem). Achado do MÓDULO INTEGRADOR; a medição
   do rh.html é minha, e corrigiu o recado: o sintoma só aparece com o diálogo aberto.
   ─────────────────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
/* ───────────────────────────────────────────────────────────────────────────
   2. ESCALA TIPOGRÁFICA — UMA SÓ, PARA TODO O SISTEMA
   Sete tamanhos: 12 · 13 · 14 · 16 · 18 · 20 · 22. Nenhum meio pixel.
   Uma família só (Inter), como no MaterialM — foi assim que eles fazem 20 telas
   parecerem a mesma tela. Poppins sai dos títulos: era o par escolhido em 26/08,
   e é a mudança mais visível desta rodada (está na fila como decisão dele).
   ─────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--sgi-fonte);
  background: var(--sgi-chao);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5 {
  font-family: var(--sgi-fonte);
  color: var(--sgi-tinta);
  letter-spacing: -0.01em;
}
/* Os tamanhos ficam FORA da tela densa: engenharia.html e orcamentos.html empilham
   1.053 e 974 declarações de 11px numa grade de orçamento — subir para 14px ali
   quebra a linha. Elas se declaram com class="pele-compacta" no <html>, herdam
   família, cor e superfície, e mantêm a própria régua de tamanho. */
html:not(.pele-compacta) h1 { font-size: 20px; font-weight: 600; }
html:not(.pele-compacta) h2 { font-size: 18px; font-weight: 600; }
html:not(.pele-compacta) h3 { font-size: 16px; font-weight: 600; }
html:not(.pele-compacta) table { font-size: 14px; }
html:not(.pele-compacta) th {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--sgi-fraco);
}
html:not(.pele-compacta) code, html:not(.pele-compacta) pre, .mono {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px;
}
/* 18/09 — <small> sem tamanho declarado herda o encolhimento de 0,83× do navegador, e é
   ele que produzia os tamanhos QUEBRADOS que sobraram depois de eu normalizar todos os
   px: 10,8 (12×0,83), 11,7 (14×0,83), 13,3. Não adiantava caçar declaração, porque não
   havia nenhuma — o valor nascia da conta do próprio navegador. Uma linha aqui fecha
   isso nas 28 páginas de uma vez. */
html:not(.pele-compacta) small { font-size: 12px; }

/* ───────────────────────────────────────────────────────────────────────────
   2b. O VOCABULÁRIO REAL DOS 7 MÓDULOS LEVES
   compras · estoque · planejamento · projetos · qsms · rh · servicos nasceram do
   mesmo gerador e compartilham .card>.rotulo/.valor, .campo>label, .painel>h2/.sub,
   button.principal / button.suave. NÃO usam .btn — medido em 18/09: `.btn` só existe
   em composicoes (4), engenharia (7) e orcamentos (7), e os dois últimos são
   pele-compacta. Ou seja, a regra de botão da pele vinha decorando UM arquivo desde
   26/08 e os 7 módulos do dia a dia nunca foram alcançados por ela.

   O que mais fazia "cada módulo parecer de um sistema diferente" está aqui: o
   rótulo do KPI e o label de formulário vinham em ui-monospace/Consolas com
   letter-spacing 1px, e o número do KPI também em monospace — fonte de código
   usada como fonte de interface, ao lado de telas em Inter. */
html:not(.pele-compacta) .card .rotulo,
html:not(.pele-compacta) .campo label,
html:not(.pele-compacta) th {
  font-family: var(--sgi-fonte);
  font-size: 12px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase; color: var(--sgi-fraco);
}
/* SEM `color` aqui, de propósito. O módulo pinta .valor.critico de vermelho e
   .valor.alerta de âmbar — é o alarme do KPI ("aguardando financeiro: 5"). Uma
   cor nesta regra tem especificidade (0,3,0)+elemento e VENCE a variante, apagando
   o alarme: o número fica azul-marinho como qualquer outro e ninguém mais vê que
   é o que está travado. Visto no print do mockup antes de subir. */
html:not(.pele-compacta) .card .valor {
  font-family: var(--sgi-fonte);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
html:not(.pele-compacta) .painel h2 { font-size: 18px; font-weight: 600; }
html:not(.pele-compacta) .painel .sub { font-size: 13px; color: var(--sgi-fraco); }
/* Tabela fica em 13px, não em 14: são grades de muitas colunas, e subir o corpo
   inteiro empurra coluna para fora da tela. 13 está na mesma régua e é o valor
   que o DESIGN.md §3 já prescrevia. */
html:not(.pele-compacta) table, html:not(.pele-compacta) td { font-size: 13px; }
html:not(.pele-compacta) .badge { font-size: 12px; font-weight: 600; }

/* ───────────────────────────────────────────────────────────────────────────
   2c. OS OUTROS VOCABULÁRIOS — etapa 1 da padronização do sistema inteiro
   (18/09, "temos que ter um padrão, vamos padronizar").
   §2b cobriu os 7 módulos que nasceram do mesmo gerador. Estes aqui são o resto:
   gerencial, trilha e composicoes vêm de gerações diferentes de código e escrevem o
   MESMO papel com outro nome — o número de KPI é `.kpi .n` num, `.card .valor` noutro,
   `.kpi b` no gerencial e `.card .val` na trilha. Medido em 18/09, telas renderizadas:
   42 tamanhos distintos no sistema e sobreviventes fora da régua em 4 das 5 telas
   auditadas (trilha 7, gerencial 2, composicoes 2, compras 2).
   Regra de tradução: 9,5 · 10 · 10,5 · 11 · 11,5 · 12,5 → 12 · 13,5 → 13 · 14,5 · 15 →
   14 · 21 · 26 → 22. Nenhum meio pixel sobrevive. */

/* o chip com o nome de quem está logado — 11px em ONZE páginas, o sobrevivente mais
   espalhado do sistema, e a pele nunca o tinha tocado */
html:not(.pele-compacta) #quem { font-size: 12px; }

/* número de KPI: os quatro nomes do mesmo papel. SEM `color` (a variante .critico /
   .alerta pinta o alarme e uma cor aqui apagaria, ver §4) e sem mono. */
html:not(.pele-compacta) .kpi b,
html:not(.pele-compacta) .card .val {
  font-family: var(--sgi-fonte); font-size: 22px; font-weight: 700;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
html:not(.pele-compacta) .kpi .n { font-size: 22px; }   /* era 26 no composicoes */

/* rótulo de KPI e finas: o mesmo par 12/600 CAIXA ALTA do §2b */
html:not(.pele-compacta) .kpi span,
html:not(.pele-compacta) .card .rot,
html:not(.pele-compacta) .field label,
html:not(.pele-compacta) .loc {
  font-family: var(--sgi-fonte); font-size: 12px; font-weight: 600;
  letter-spacing: .4px; color: var(--sgi-fraco);
}

/* textos de apoio, avisos e vazios — tudo que estava entre 9,5 e 12,5 */
html:not(.pele-compacta) .vazio,
html:not(.pele-compacta) .nota,
html:not(.pele-compacta) .erro,
html:not(.pele-compacta) .card .pe,
html:not(.pele-compacta) .selo,
html:not(.pele-compacta) .chip,
html:not(.pele-compacta) header .sub,
html:not(.pele-compacta) header h1 small { font-size: 12px; }

/* barras de aba próprias (trilha, composicoes) e a genérica */
html:not(.pele-compacta) .abas button,
html:not(.pele-compacta) #segH button,
html:not(.pele-compacta) nav button,
html:not(.pele-compacta) nav a[data-view] { font-size: 13px; }

/* números e títulos intermediários */
html:not(.pele-compacta) .num { font-size: 14px; }
html:not(.pele-compacta) .decisoes h2 { font-size: 16px; }
html:not(.pele-compacta) .decisoes a,
html:not(.pele-compacta) .tabm { font-size: 13px; }
html:not(.pele-compacta) .decisoes .mod,
html:not(.pele-compacta) .grupo h3 a { font-size: 12px; }

/* ───────────────────────────────────────────────────────────────────────────
   3. SUPERFÍCIES — a marca registrada do MaterialM
   Medido no ar em 18/09: os 11 cards do dashboard deles são brancos, raio 12,
   border:0 e box-shadow:none, separados só por espaço em branco de 30px.
   Aqui fica a sombra --shadow-md do token deles em vez de zero: nossos grids
   usam gap de 14px, e sem NENHUMA separação os cartões viram um bloco só.
   ─────────────────────────────────────────────────────────────────────────── */
.c, .kpi, .dcard, .cal, .tl, .card, .painel {
  border-radius: var(--sgi-r-card);
  border: 0;
  background: #fff;
  box-shadow: var(--sgi-sombra);
}
/* Padding de card NÃO é mexido nesta rodada de propósito: o MaterialM respira com
   24px, mas alterar o padding dos 9 módulos sem ver o print de cada um no ar é o
   tipo de mudança que custa uma rodada inteira para desfazer. Fica para a passada
   seguinte, com o print da tela publicada na mão. */
.stat { border-radius: var(--sgi-r-campo); background: #f7fafd; }

/* RAIO — fechando a deriva (18/09). O sistema tem DOIS raios e não sete: 12px para
   superfície (--sgi-r-card) e 8px para controle (--sgi-r-campo). Medindo as 21 telas
   leves apareceram 10 valores diferentes: além dos dois, 3 · 4 · 10 · 11 · 13 · 14 · 16.
   Nenhum deles é decisão — é o que sobra de telas feitas em meses diferentes.
   ANTES DE ESCREVER ISTO EU SIMULEI: injetei a regra em cada tela e comparei elemento a
   elemento. Mexe em 32, e os 32 são a deriva (avisos 11→12, abas 10/11/13→8, selects
   10→8, .cartao 14→12, .dlg 16→12). NADA de pílula virando quadrado e nada de ícone
   redondo achatado — que era o risco de mexer em `button` por tag.
   O botão fica em 8 e não vira pílula: a pílula é do botão de AÇÃO (.btn/.principal, §4),
   que tem seletor mais específico e continua ganhando.
   Fora daqui de propósito: checkbox, radio, range e color, que o navegador desenha e onde
   raio de autor ou não pinta ou deforma; e os dois monólitos (pele-compacta). */
html:not(.pele-compacta) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html:not(.pele-compacta) select,
html:not(.pele-compacta) textarea,
html:not(.pele-compacta) button { border-radius: var(--sgi-r-campo); }
#aviso, #erro, .aviso-priv, .cartao, .rolagem, .rol, .dlg, .bom {
  border-radius: var(--sgi-r-card);
}
/* FICA FORA, e é decisão: .sgi-aviso-lgpd (o rodapé de privacidade das 7 telas públicas)
   segue em 11px. O CSS dele é INJETADO em tempo de execução, num <style> que entra depois
   da pele — para vencer eu precisaria subir a especificidade de propósito, e 1px de raio
   não paga escrever uma regra que existe só para ganhar uma briga de cascata. */
.kpi { padding: 20px; }
.kpi .n {
  font-size: 22px; font-weight: 700; color: var(--sgi-tinta); letter-spacing: -0.01em;
}
.kpi .l {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: var(--sgi-fraco);
}
/* Header do MaterialM é CHAPADO — a separação é um filete, não uma sombra.
   O `background:#fff` que estava aqui SAIU em 18/09, e o motivo está medido: das 17
   páginas que têm <header>, TODAS declaram o próprio fundo. Nas 13 de aplicação ele já
   era #fff (a regra não fazia nada), e nas 4 de campo — frota-check, prj-dist, prj-local
   e prj-copia — o header é uma faixa `linear-gradient(120deg,#0e2748,#14498a)` com
   `color:#fff`. Pintar de branco por cima deixava texto branco sobre branco: no
   frota-check, a seta de voltar, o nome de quem está logado e o botão "Enviar checklist"
   mediram 1:1 de contraste, ou seja, invisíveis — numa tela que é usada no pátio, no
   celular. Ver _diagnostico/pele/frota-DEFEITO.png. */
header { border-bottom: 1px solid var(--sgi-linha); box-shadow: none; }
header h1 { font-size: 20px; font-weight: 600; }

/* Título dentro de FAIXA DE MARCA herda a cor da faixa.
   A regra `h1..h5 { color: var(--sgi-tinta) }` do §2 quebra a herança: numa faixa colorida
   o título deixa de ser branco e vira tinta escura — na capa vermelha do incidente isso
   deu 2,4:1. Tirar a cor da regra geral foi MEDIDO e é pior (17 títulos pioram e um vira
   branco no branco), então a exceção é só aqui, nas 4 classes de faixa que o sistema usa.
   Escrito seletor a seletor de propósito: `:is()` não existe em navegador de celular
   antigo e derrubaria a lista inteira — e estas páginas rodam no campo. */
header h1, header h2, header h3,
.topo h1, .topo h2, .topo h3,
.capa h1, .capa h2, .capa h3,
.contato h1, .contato h2, .contato h3 { color: inherit; }

/* ───────────────────────────────────────────────────────────────────────────
   4. AÇÃO
   MaterialM: pílula CHAPADA, sem gradiente e sem sombra, 14px/500, padding 8×32.
   O gradiente e a sombra azul saem — eram nossos, não deles. O azul fica.
   ─────────────────────────────────────────────────────────────────────────── */
html:not(.pele-compacta) .btn:not([class*="btn-"]):not(.ghost) {
  border-radius: 999px;
  background: var(--sgi-azul);
  color: #fff;  /* 26/08: SEM isto o texto escuro do modulo fica ilegivel sobre o azul */
  box-shadow: none;
  padding: 9px 24px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s;
}
html:not(.pele-compacta) .btn:not([class*="btn-"]):not(.ghost):hover {
  background: var(--sgi-azul-fundo);
}
/* Variantes do proprio modulo (.btn-ghost, .btn-sm, .btn-amber...) ficam INTOCADAS: cada
   uma ja tem fundo e cor pensados juntos. Pintar so o fundo quebrava o contraste. */
html:not(.pele-compacta) .btn.ghost {
  border-radius: 999px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto);
  box-shadow: none; font-size: 14px; font-weight: 500;
}
nav button, nav a[data-view] { border-radius: 999px; }
html:not(.pele-compacta) .chip, html:not(.pele-compacta) .tag {
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
/* Os botões que os 7 módulos leves REALMENTE usam (ver §2b). O gradiente
   #1c6fb0→#14498a e a sombra azul saem: o MaterialM é chapado. O azul fica. */
html:not(.pele-compacta) button.principal {
  border-radius: 999px; background: var(--sgi-azul); color: #fff;
  box-shadow: none; padding: 9px 24px; font-size: 14px; font-weight: 500;
  transition: background-color .15s;
}
html:not(.pele-compacta) button.principal:hover { background: var(--sgi-azul-fundo); }
/* .suave tem duas variantes de cor próprias (.perigo, .verde) — ficam FORA do
   seletor, como as .btn-* do MAMUTE: cada uma já tem fundo e texto pensados
   juntos, e pintar só o fundo quebrava o contraste (visto em 26/08).
   Excluir pelo :not() e não "desfazer" depois: `revert` numa regra de autor volta
   para o padrão do navegador, não para a regra do módulo — desfaria a cor em vez
   de preservá-la. */
html:not(.pele-compacta) button.suave:not(.perigo):not(.verde) {
  border-radius: 999px; background: var(--sgi-azul-claro); color: var(--sgi-azul-texto);
  border-color: transparent; font-size: 13px; font-weight: 500;
}
html:not(.pele-compacta) button.suave.perigo,
html:not(.pele-compacta) button.suave.verde { border-radius: 999px; font-size: 13px; }

/* ───────────────────────────────────────────────────────────────────────────
   5. CAMPOS — raio 8 (MaterialM usa 6–9), 14px, na família do corpo
   ─────────────────────────────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius: var(--sgi-r-campo);
  font-family: var(--sgi-fonte);
}
html:not(.pele-compacta) input:not([type=checkbox]):not([type=radio]),
html:not(.pele-compacta) select,
html:not(.pele-compacta) textarea { font-size: 14px; }
.bar input, .bar select { border-color: var(--sgi-linha); }

/* ───────────────────────────────────────────────────────────────────────────
   5b. MODAL — AP-09, resolvido de um jeito melhor do que eu tinha proposto.
   Eu ia criar uma classe `.sgi-modal` e depois aplicar em lote nos módulos. Medindo
   antes, descobri que isso já estava resolvido: os 7 módulos leves usam o <dialog>
   NATIVO (66 instâncias), e os 2 monólitos usam div de overlay (410) mas são
   pele-compacta. Ou seja, não faltava componente — faltava a pele vestir o que já
   existia. Classe nova nenhuma, lote nenhum nos módulos.
   O que entra aqui é IDENTIDADE (cor, raio, sombra, fundo, tipografia). GEOMETRIA
   (width, padding) fica com o módulo de propósito: cada um declara a largura que o
   formulário dele pede — 560, 640, 680 — e a pele carrega DEPOIS, então qualquer
   width aqui esmagaria o formulário largo do QSMS e do Serviços.
   ─────────────────────────────────────────────────────────────────────────── */
dialog {
  border: 0;
  border-radius: var(--sgi-r-card);
  color: var(--sgi-texto);
  font-family: var(--sgi-fonte);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);   /* §6 nível 5 */
  max-height: 85vh;
  overscroll-behavior: contain;                 /* rolar o modal não rola a página atrás */
}
dialog::backdrop { background: rgba(8, 16, 30, .5); }   /* §4, o valor de fato */
html:not(.pele-compacta) dialog { font-size: 14px; }
html:not(.pele-compacta) dialog h2 { font-size: 18px; font-weight: 600; }
html:not(.pele-compacta) dialog h3 { font-size: 16px; font-weight: 600; }
/* respeita quem pediu para não animar */
/* ─────────────────────────────────────────────────────────────────────────────
   CELULAR — a regra dos 16px, que é comportamento de sistema e não gosto.
   No iOS, focar um campo com fonte computada MENOR que 16px faz o Safari dar zoom na
   página sozinho, e o zoom não volta: o formulário pula na mão de quem preenche e a tela
   fica torta pelo resto do preenchimento. Medido em 19/09 a 375px: 11 campos a 14px, seis
   no frota-check (que o motorista preenche em campo) e cinco no ouvidoria (que vai por
   link para o celular de quem nem tem conta no sistema).
   Só no estreito: no desktop 14px em campo está certo, e mexer lá mudaria o layout de
   todos sem ganho. Quem escrever tela nova não precisa saber desta regra — ela mora aqui.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* alvo de toque: 44px é o mínimo do WCAG 2.5.5 e das diretrizes de iOS e Android.
     Medido em 19/09 a 375px: o botão de ENVIAR do ouvidoria tinha 35px de altura, as abas
     40 e o "Marcar todos como CONFORME" do frota-check 41. São telas preenchidas em pé,
     em campo, às vezes com luva. min-height só CRESCE o que está pequeno — quem já passa
     de 44 não muda. Link de texto em linha fica de fora de propósito: a própria 2.5.5 abre
     exceção para ele, e engordá-lo quebraria a entrelinha do parágrafo. */
  html:not(.pele-compacta) button,
  html:not(.pele-compacta) .btn,
  html:not(.pele-compacta) input[type="submit"],
  html:not(.pele-compacta) input[type="button"],
  html:not(.pele-compacta) a.botao, html:not(.pele-compacta) a.suave { min-height: 44px; }
  html:not(.pele-compacta) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html:not(.pele-compacta) select,
  html:not(.pele-compacta) textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: no-preference) {
  dialog[open] { animation: sgiModalEntra .16s ease-out; }
  @keyframes sgiModalEntra { from { opacity: 0; transform: translateY(6px); } }
}

/* ───────────────────────────────────────────────────────────────────────────
   5c. IMPRESSÃO — AP-10.
   Medido em 18/09: só 5 das 28 páginas tinham @media print. Imprimir qualquer um dos
   7 módulos saía com a lateral, a barra de filtros e os botões no papel, e com fundo
   colorido gastando tinta. Isto aqui é o mínimo que faz qualquer tela do SGI sair
   imprimível sem o módulo precisar saber de nada.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  /* O cromo não vai para o papel.
     ATENÇÃO ao `dialog` desta lista: hoje ninguém imprime de dentro de um modal — só
     engenharia.html e orcamentos.html chamam window.print, e os dois usam div de overlay,
     não <dialog> (medido pela integradora em 18/09). No dia em que um módulo leve ganhar
     um botão de imprimir DENTRO de um <dialog>, esta linha faz sair página em branco:
     ali a regra tem de virar `dialog:not([open])`, ou o modal precisa imprimir por conta
     própria. Quem mexer aqui, lembre. */
  #sgiLat, #sgiLatFundo, #sgiDica, #sgiBarAbas, #sgiLatHamb,
  nav, .filtros, .bar, .sgibar, #aviso, dialog { display: none !important; }
  /* a calha da lateral também não */
  body, body.sgiMenuOff, body.sgiSemPainel { padding-left: 0 !important; }
  /* papel branco, texto preto: cartão com fundo e sombra vira mancha e gasta tinta */
  body { background: #fff !important; color: #000 !important; }
  .c, .kpi, .dcard, .cal, .tl, .card, .painel {
    box-shadow: none !important; border: 1px solid #ccc !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  header { position: static !important; box-shadow: none !important; }

  /* 19/09 — TINTA BRANCA NO PAPEL BRANCO, o defeito que só aparece depois de gastar a
     folha. Faixa escura com texto branco: a impressora não imprime o fundo (padrão de
     fábrica, e é o certo — faixa marinha inteira gastaria um cartucho), e sobra branco no
     branco, 1,00:1. Medido emulando a mídia print: 23 elementos em 4 telas, e o pior deles
     é o Aviso de Privacidade, que saía do papel SEM TÍTULO e sem o nome e o endereço do
     encarregado pelo tratamento de dados — o documento de LGPD sem o contato obrigatório.
     Os seletores abaixo são os MEDIDOS (um probe subiu de cada texto claro até o body e
     imprimiu o caminho), não nomes que eu imaginei que existissem. */
  header, .topo, .capa, .contato, .hero {
    background: none !important; background-image: none !important;
  }
  header, .topo, .capa, .hero { border-bottom: 1px solid #ccc !important; }
  header *, .topo *, .capa *, .contato *, .hero *,
  header, .topo, .capa, .contato, .hero { color: #000 !important; }

  /* Botão fica LEGÍVEL, não some. A regra acima já esconde `nav`, e esconder botão seria
     coerente — mas botão às vezes carrega informação (um total, um estado) e no papel
     sumiria sem deixar rastro. Perder tinta é reversível; perder dado, não. */
  button, .btn, input[type="submit"], input[type="button"] {
    background: none !important; background-image: none !important; color: #000 !important;
    border: 1px solid #ccc !important; box-shadow: none !important;
  }

  /* CABEÇALHO DE IMPRESSÃO — QSMS#5 ("todas têm que ter logo, ainda tem umas sem logo"),
     no formato que ele decidiu em 18/09: LOGO DO CLIENTE DO CONTRATO à esquerda, LOGO DA
     APJ à direita, e embaixo a linha com contrato · base · data.
     O cliente vem do DADO (orgICJs.cliente), nunca chumbado — hoje os 3 contratos são
     Petrobras e o resultado é idêntico ao que o QSMS pediu; no dia do segundo cliente
     ninguém precisa mexer aqui. O mapa cliente → arquivo é uma tabela no sgi-lateral.js,
     e por isso NENHUM nome de cliente aparece neste CSS.
     Quem preenche: window.sgiCabecalhoImpressao({cliente, contrato, base}), chamado pelo
     módulo que conhece o contrato. Sem chamada, o padrão é só a APJ à esquerda — que é o
     que as telas corporativas devem imprimir (logo de cliente errado é pior que nenhum).
     DUAS ESCOLHAS DE FORMA, as duas para não quebrar no papel:
       · `background-image` e não <img>: arquivo ausente rende espaço vazio, não o ícone
         de imagem quebrada;
       · o NOME do cliente vai sempre na linha de texto, não só no logo. Se o arquivo do
         cliente não existir, o papel continua dizendo de quem é o contrato. */
  body::before {
    content: var(--sgi-imp-linha, "");
    display: block;
    min-height: 34px;
    /* 34px e nao 26: a 26 o "PETROBRAS" que fica sob o BR sai com ~1,5 mm no papel, que e
       o limite do ilegivel. O padding de topo acompanha a altura do logo mais o respiro,
       senao a linha de texto sobe por cima da marca. */
    padding: 38px 0 8px;   /* os logos ocupam o topo; o texto cai embaixo deles */
    margin: 0 0 12px;
    background-image: var(--sgi-imp-cliente, none), url("/Painel/logo.svg");
    background-repeat: no-repeat, no-repeat;
    background-position: left top, var(--sgi-imp-apj, left) top;
    background-size: auto 34px, auto 34px;
    border-bottom: 1px solid #ccc;
    font-family: var(--sgi-fonte);
    font-size: 11px;
    color: #444;
  }
  /* linha de tabela não se parte no meio da página, e o cabeçalho se repete */
  tr, .lista tr { break-inside: avoid; page-break-inside: avoid; }
  thead { display: table-header-group; }
  a { text-decoration: none; color: #000; }
}

/* ───────────────────────────────────────────────────────────────────────────
   6. LATERAL — TRILHO marinho + PAINEL branco (18/09, opção A escolhida por print).
   A forma é a do MaterialM; a cor do trilho é a nossa, decidida em 26/08. O CSS da
   lateral mora no `sgi-lateral.js`, que a injeta — aqui fica só o que também vale
   para as barras PRÓPRIAS dos módulos (`.latLk` do MAMUTE, `.seg` do Licitações),
   que não passam por lá e ficariam sozinhas com a tipografia antiga.
   ─────────────────────────────────────────────────────────────────────────── */
.latLk .tx b, .seg .tx b, .latMarca {
  font-family: var(--sgi-fonte); font-weight: 600;
}

/* ───────────────────────────────────────────────────────────────────────────
   7. FOCO VISÍVEL GLOBAL (DESIGN.md §7, Lei 21) — 15/09/2026
   O §7 dizia "foco visível global" desde 18/08, mas a regra não existia em lugar
   nenhum do núcleo: zero :focus-visible em sgi-pele.css, marca.css, sgi-lateral.js,
   sgi.html, login.html e index.html. Quem tinha, tinha porque a própria página
   escreveu a sua — 12 das 28 páginas de public/; as outras 13 ficavam só com o anel
   padrão do navegador, que sobre o marinho da lateral quase não se lê. Aqui a regra
   chega nas 9 telas de módulo de uma vez, porque a lateral referencia este arquivo.
   --brand é declarado por PÁGINA (18 de 28), nunca pela pele: o fallback #1c6fb0 é
   obrigatório, senão em engenharia, orcamentos, incidente, relato, prj-* e
   gestao-vista o var() resolve vazio e a declaração inteira é descartada.
   A segunda regra existe por especificidade: elemento+pseudo-classe (0,1,1) vence
   o .fc{outline:none} (0,1,0) dos monólitos. O que ela NÃO vence é
   .td-input:focus{outline:none} (0,2,0) — esse é AP-07, na janela dona do arquivo. */
:focus-visible {
  outline: 2px solid var(--brand, #1c6fb0); outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand, #1c6fb0); outline-offset: 2px;
}