@charset "UTF-8";
/* ==========================================================================
   sgm-base.css — reset, tipografia e vocabulário de formulário
   Um único conjunto de controles para todo o sistema. Se o campo de busca do
   topo e o filtro de exercício não forem iguais, um dos dois está errado.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   🥇 REGRA DE OURO — `hidden` é lei, e a lei está escrita AQUI, uma vez

   O atributo `hidden` do HTML vale por uma regra da folha do NAVEGADOR, e
   folha do navegador perde para QUALQUER regra nossa. Então basta um
   `.alguma-coisa { display: flex }` para o elemento com `hidden` continuar
   na tela — sem erro, sem aviso, e com o JS convencido de que escondeu.

   ISTO JÁ CUSTOU TRÊS COBRANÇAS do Rodrigo:

     1. a aba de detalhamento que não fechava    (§6a, 2026-08-07)
     2. o realce de foco invisível no login      (§6a — mesmo empate, outro
                                                  lado: quem perdia era o
                                                  `:focus`)
     3. a faixa de busca nascendo aberta         (§6m, 2026-08-10)

   As duas primeiras foram corrigidas caso a caso, com `:not([hidden])` na
   regra culpada. A terceira mostrou que corrigir caso a caso é jogo perdido:
   toda regra de `display` futura é uma chance nova do mesmo defeito, e o
   sintoma nunca aponta para a causa.

   `!important` aqui é deliberado e é o ÚNICO do sistema em que ele resolve
   em vez de esconder: não existe elemento que precise de `display` enquanto
   está `hidden`. Com esta linha, a cascata para de ser assunto.

   As regras com `:not([hidden])` que já existem em sgm-components.css ficam
   como estão — não fazem mal e documentam o histórico. Há conferência em
   `scripts\testa-abas.js`.

   Decidido pelo Rodrigo em 2026-08-10.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Duas imposições de fora que precisam ser desfeitas AQUI

   Conferido no DevTools em 2026-08-06, com o sistema no ar:

   1. w3.css declara `html, body { font-size: 15px }`. Como toda a escala de
      tipo é em rem, isso encolhia a interface inteira em 6,25% — o corpo de
      13px chegava à tela com 12,19px. Não aparecia no mockup porque o
      login.html não carrega o w3.css: protótipo e sistema nunca bateram.

   2. `body { font-family }` PERDE para `.x-body` do tema ExtJS — classe
      vence elemento. A tela subia inteira em Tahoma, com os letter-spacing
      negativos que foram calibrados para a Segoe UI. Era o aspecto
      espremido que o Rodrigo apontou.

   O w3.css fica (decisão 11 do Retorno_SGM). O que muda é a ordem: esta
   folha carrega depois dele, então basta redeclarar com a mesma
   especificidade. `body.x-body` (0,1,1) é o que ganha do `.x-body` do tema
   sem tocar em nenhum widget do ExtJS.
   -------------------------------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
body.x-body {
  margin: 0;
  font-family: var(--sgm-font);
  font-size: var(--sgm-t-base);
  line-height: var(--sgm-lh);
  color: var(--color-on-surface);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cinto e suspensório: as duas raízes da nossa UI declaram a família por
   conta própria, então nenhuma folha carregada depois desta (o uniGUI
   injeta CSS em runtime) consegue devolver a tela para a Tahoma. */
.login,
.sgm-app { font-family: var(--sgm-font); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: var(--sgm-lh-tight); }
h1 { font-size: var(--sgm-t-xl);  letter-spacing: -.02em; }
h2 { font-size: var(--sgm-t-lg);  letter-spacing: -.015em; }
h3 { font-size: var(--sgm-t-md);  letter-spacing: -.01em; }
h4 { font-size: var(--sgm-t-base); }

p { margin: 0; }

a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--sgm-fast) var(--sgm-ease);
}
a:hover { color: var(--color-primary-600); text-decoration: underline; }

::selection { background: var(--color-primary-50); color: var(--color-primary-600); }

/* foco visível e consistente em tudo que recebe teclado */
:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: var(--sgm-r-sm);
}

/* --------------------------------------------------------------------------
   Utilitários mínimos
   -------------------------------------------------------------------------- */

.sgm-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sgm-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sgm-truncate {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

.sgm-field { display: flex; flex-direction: column; gap: var(--sgm-1); min-width: 0; }

.sgm-label {
  font-size: var(--sgm-t-sm);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.sgm-label[data-required]::after {
  content: " *";
  color: var(--color-error);
}

.sgm-input,
.sgm-select,
.sgm-textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font: inherit;
  font-size: var(--sgm-t-base);
  color: var(--color-on-surface);
  background: var(--color-surface);
  border: 1px solid var(--color-outline-strong);
  border-radius: var(--sgm-r-sm);
  outline: none;
  transition: border-color var(--sgm-fast) var(--sgm-ease),
              box-shadow var(--sgm-fast) var(--sgm-ease),
              background-color var(--sgm-fast) var(--sgm-ease);
}

.sgm-textarea { min-height: 88px; resize: vertical; line-height: var(--sgm-lh); }

.sgm-input::placeholder,
.sgm-textarea::placeholder { color: var(--color-on-surface-variant); }

.sgm-input:hover:not(:disabled),
.sgm-select:hover:not(:disabled),
.sgm-textarea:hover:not(:disabled) { border-color: #b9c7d6; }

.sgm-input:focus,
.sgm-select:focus,
.sgm-textarea:focus {
  border-color: var(--color-primary-500);
  box-shadow: var(--sgm-ring);
  outline: none;
}

/* Navegação por teclado: anel de verdade, e não só o ring de 18% de opacidade
   da regra acima.

   O `outline: none` ali foi pensado para o clique do mouse, onde a borda
   colorida já basta. Para quem anda de Tab, achar onde o foco parou é a
   informação principal da tela — e um realce que só se percebe procurando
   faz o Tab parecer que não funcionou.

   É o mesmo anel que o :focus-visible global já dá a botões e links; os
   campos estavam de fora por causa do `outline: none`. */
.sgm-input:focus-visible,
.sgm-select:focus-visible,
.sgm-textarea:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

.sgm-input:disabled,
.sgm-select:disabled,
.sgm-textarea:disabled {
  background: var(--color-surface-sunken);
  color: var(--color-on-surface-muted);
  cursor: not-allowed;
  border-color: var(--color-outline);
}

.sgm-input[aria-invalid="true"],
.sgm-select[aria-invalid="true"] {
  border-color: var(--color-error);
  background: var(--color-error-container);
}

.sgm-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .16);
}

/* seta própria, para que o select combine com o input */
.sgm-select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c8f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

/* campo com ícone ou botão acoplado */
.sgm-input-group { position: relative; display: flex; align-items: stretch; gap: var(--sgm-2); }
.sgm-input-group > .sgm-input { flex: 1 1 auto; }

.sgm-input-icon { position: relative; display: block; }
.sgm-input-icon > i {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-muted);
  font-size: 13px;
  pointer-events: none;
}
.sgm-input-icon > .sgm-input { padding-left: 34px; }

/* 💎 `--color-on-surface-variant`, E NÃO `--color-on-surface-muted` —
   2026-08-20.

   O muted (#6b7c8f) sobre a superfície branca dá 4,28:1. A WCAG AA pede 4,5:1
   para texto normal, e `.sgm-hint` é 12px: reprova. O variant (#46586b) dá
   7,32:1.

   A reprovação já era conhecida DENTRO desta mesma entrega: o comentário de
   `.sgm-cnt-linha__rot` (sgm-components.css) rejeita o muted por escrito,
   citando este mesmo número, e escolhe o variant. A régua foi aplicada nos
   rótulos do painel e não no texto que ENSINA O OPERADOR A DIGITAR — que é o
   único estado da dica que reprovava, e o que fica no ar quase o tempo todo:
   no estado de erro o mesmo `<span>` vira `.sgm-error`, que passa.

   ⚠️ O MUTED CONTINUA EXISTINDO, e continua certo onde está: ícone e controle
   desabilitado são NÃO-TEXTO, e ali a régua é 3:1 (WCAG 1.4.11). O que ele
   não faz mais é pintar prosa que o operador precisa ler. */
.sgm-hint  { font-size: var(--sgm-t-sm); color: var(--color-on-surface-variant); }
.sgm-error { font-size: var(--sgm-t-sm); color: var(--color-error); font-weight: 550;
             display: flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   Botões — uma forma só, três pesos
   -------------------------------------------------------------------------- */

.sgm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sgm-2);
  min-height: 38px;
  padding: 8px 16px;
  font: inherit;
  font-size: var(--sgm-t-base);
  font-weight: 600;
  color: var(--color-on-surface);
  background: var(--color-surface);
  border: 1px solid var(--color-outline-strong);
  border-radius: var(--sgm-r-sm);
  box-shadow: var(--sgm-sh-1);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--sgm-fast) var(--sgm-ease),
              border-color var(--sgm-fast) var(--sgm-ease),
              color var(--sgm-fast) var(--sgm-ease),
              box-shadow var(--sgm-fast) var(--sgm-ease),
              transform var(--sgm-fast) var(--sgm-ease);
}

.sgm-btn:hover:not(:disabled) {
  border-color: var(--color-primary-500);
  color: var(--color-primary-600);
  background: var(--color-primary-50);
  transform: translateY(-1px);
  box-shadow: var(--sgm-sh-2);
}

.sgm-btn:active:not(:disabled) { transform: translateY(0); box-shadow: var(--sgm-sh-1); }

.sgm-btn:disabled,
.sgm-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.sgm-btn--primary {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  color: var(--color-on-primary);
}
.sgm-btn--primary:hover:not(:disabled) {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: var(--color-on-primary);
  box-shadow: 0 4px 14px rgba(15, 118, 110, .28);
}

.sgm-btn--ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-on-surface-variant);
}
.sgm-btn--ghost:hover:not(:disabled) {
  background: var(--color-primary-50);
  border-color: transparent;
  box-shadow: none;
}

.sgm-btn--danger {
  background: var(--color-surface);
  border-color: var(--color-error-outline);
  color: var(--color-error);
}
.sgm-btn--danger:hover:not(:disabled) {
  background: var(--color-error-container);
  border-color: var(--color-error);
  color: var(--color-error);
}

.sgm-btn--sm  { min-height: 32px; padding: 6px 12px; font-size: var(--sgm-t-sm); }
.sgm-btn--lg  { min-height: 46px; padding: 12px 22px; font-size: var(--sgm-t-md); }
.sgm-btn--block { width: 100%; }

/* botão só de ícone: alvo de toque nunca menor que 38px */
.sgm-btn--icon {
  width: 38px; min-height: 38px; padding: 0;
  border-radius: var(--sgm-r-sm);
}
.sgm-btn--icon.sgm-btn--sm { width: 32px; min-height: 32px; }

/* estado de carregamento: o rótulo some, o giro entra, a largura não muda */
.sgm-btn[data-loading="true"] { color: transparent !important; pointer-events: none; position: relative; }
.sgm-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  animation: sgm-spin 640ms linear infinite;
  color: var(--color-on-primary);
}
.sgm-btn--primary[data-loading="true"]::after { color: #fff; }
.sgm-btn:not(.sgm-btn--primary)[data-loading="true"]::after { color: var(--color-primary-500); }

@keyframes sgm-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Caixa de marcação
   -------------------------------------------------------------------------- */

.sgm-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sgm-2);
  padding: 7px 11px;
  min-height: 38px;
  background: var(--color-surface);
  border: 1px solid var(--color-outline-strong);
  border-radius: var(--sgm-r-sm);
  cursor: pointer;
  user-select: none;
  transition: border-color var(--sgm-fast) var(--sgm-ease),
              background-color var(--sgm-fast) var(--sgm-ease);
}
.sgm-check:hover { border-color: var(--color-primary-100); background: var(--color-primary-50); }
.sgm-check input { accent-color: var(--color-primary-500); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.sgm-check span  { font-size: var(--sgm-t-base); }
.sgm-check:has(input:checked) { border-color: var(--color-primary-500); background: var(--color-primary-50); }

/* --------------------------------------------------------------------------
   SÓ PARA O LEITOR DE TELA — texto que existe, mas não ocupa a tela

   ⚠️ NASCEU DE UM DEFEITO REAL, 2026-08-20, quarta volta. As marcas do
   cabeçalho da ficha ("é aditamento", "é falecido") diziam ligado/desligado
   por COR e por FORMA e mais nada: o `data-ligado` é gancho de CSS e o glifo
   entra com `aria-hidden`. Quem não vê a tela não sabia se o contribuinte
   está marcado como falecido — e "informação só por cor" é a WCAG 1.4.1.

   ⚠️ E NÃO SE ESCONDE COM `display: none` NEM COM `visibility: hidden`: as
   duas tiram o texto da árvore de acessibilidade também, e o problema volta
   inteiro. O recorte abaixo é o que mantém o texto legível para o leitor de
   tela e invisível para o olho.

   ⚠️ SEM `color` DE PROPÓSITO. Ela herda, e um `color` aqui seria uma tinta
   medida contra fundo nenhum — o retângulo tem 1px. */
.sgm-so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

/* --------------------------------------------------------------------------
   🥇 FONT AWESOME 7.2.0 — a versão do modelo Angular, 2026-10-15

   O Web2 carregava o Font Awesome 5 desde o começo. O modelo da casa
   (gitlab.fiorilli.com.br/fiorilli-v2/arquetipos/angular/modelo) usa o
   `@fortawesome/fontawesome-free` 7.2.0, e o mesmo pacote está no disco no
   SISWEB2. A folha e as quatro fontes .woff2 vieram de lá, sem CDN.

   ⚠️ OS NOMES DO 5 CONTINUAM VALENDO: o 7 traz os apelidos antigos
      (`fa-university`, `fa-tachometer-alt`, `fa-sign-out-alt`...). Os 189
      nomes que este projeto escreve foram conferidos contra a folha nova
      antes da troca, e nenhum ficou de fora. O `confere-icones.js` continua
      sendo a prova: ele lê a folha que o navegador recebe.

   ⚠️ A LARGURA FIXA DO 7 FICA DESLIGADA. No 7 todo ícone nasce com
      `width: 1.25em` (a antiga `fa-fw` virou padrão). Aqui os ícones moram em
      caixas que já têm medida própria — o rail, o disco do card, o chip —, e
      1,25em empurraria o texto ao lado em todo botão do sistema. `auto` devolve
      a largura do desenho, que é o que o 5 fazia; quem quiser a caixa fixa
      continua pedindo `fa-fw`, que define a variável no próprio elemento. */
:root { --fa-width: auto; }