/* ═══════════════════════════════════════════════════════════════
   layout.css — largura única e transições suaves em todo o sistema

   O PROBLEMA
   Cada módulo impunha a própria largura ao conteúdo: RH 1300px,
   Cargos 640px, EPI 1100px, MP 820px. Trocar de aba trocava de
   largura, a tabela encolhia ou esticava, e a tela parecia montada
   por mãos diferentes — porque foi.

   A SOLUÇÃO
   Uma única largura de página, definida aqui, que vale para a raiz de
   todo módulo. Os módulos não precisam ser editados: a regra alcança
   o primeiro nível dentro de .page, onde cada um escreve o seu
   max-width, e o sobrescreve. Janelas (modais) ficam fora — elas
   vivem no body, não dentro de .page — e cartões internos também.

   Ajuste --pagina-max aqui e o sistema inteiro acompanha.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --pagina-max: 1240px;        /* largura do conteúdo em qualquer módulo */
  --pagina-min-altura: 62vh;   /* a página não encolhe ao trocar de aba  */
  --transicao: 180ms;
}

/* ── raiz de cada módulo: largura única ───────────────────────── */
.page.active { min-height: var(--pagina-min-altura); }

.page > div[style*="max-width"],
.page > section[style*="max-width"],
.page > .conteudo-modulo {
  max-width: var(--pagina-max) !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* raiz sem max-width também se alinha ao mesmo limite */
.page > div:not([style*="max-width"]):not(.card):not(.table-wrap) {
  max-width: var(--pagina-max);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* o segundo nível é onde alguns módulos (RH) põem a largura do corpo */
.page > div > div[id$="-root"][style*="max-width"],
.page > div > div[id$="-corpo"][style*="max-width"],
.page > div > div[id$="-conteudo"][style*="max-width"] {
  max-width: var(--pagina-max) !important;
  width: 100%;
}

/* ── tabelas ocupam o contêiner, sempre ───────────────────────── */
.page .table-wrap { width: 100%; }
.page .table-wrap > table { width: 100%; }
.page table[style*="width"] { width: 100% !important; }

/* ── transição suave ao trocar aba ou lista ───────────────────── */
/* aplicada pelo transicoes.js nos blocos recém-desenhados */
.tg-entra {
  animation: tgEntra var(--transicao) ease-out both;
}
@keyframes tgEntra {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* botões de aba e chips mudam de estado com um fade, não num salto */
.page button,
.page .chip,
.page .sgnav-aba,
.page .mc-pil, .page .mp-pil, .page .at-pil {
  transition: background-color var(--transicao) ease,
              border-color var(--transicao) ease,
              color var(--transicao) ease,
              box-shadow var(--transicao) ease;
}

/* cartões: um leve realce ao passar o mouse, igual em todo lugar */
.page .card { transition: box-shadow var(--transicao) ease, transform var(--transicao) ease; }

/* esqueleto enquanto carrega: ocupa a altura, não colapsa */
.page .spinner-bloco {
  min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text3);
}

@media (prefers-reduced-motion: reduce) {
  .tg-entra { animation: none; }
  .page button, .page .chip, .page .card { transition: none; }
}