/* =====================================================================
   BASE — reset mínimo, tipografia, sistema de movimento e utilitários.
   ===================================================================== */

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

html {
  /* Tudo 10% menor, que é a medida em que o sistema se lê melhor (o mesmo que pôr o
     navegador em 90%). Como os tamanhos saem de tokens em rem, basta a raiz: texto,
     espaçamentos, alturas de controle e raios acompanham. As larguras máximas foram
     recalculadas em tokens.css para a página não encolher junto, e quem aumenta a letra
     do navegador continua aumentando tudo — é porcentagem, não pixel fixo. */
  font-size: 90%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  scroll-padding-top: calc(var(--altura-cabecalho) + var(--esp-4));
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-base);
  font-size: var(--texto-md);
  line-height: var(--altura-linha);
  color: var(--cor-texto);
  background: var(--fundo-pagina);
  background-attachment: fixed;
  font-feature-settings: "cv11", "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol[role="list"], ul[role="list"] {
  list-style: none;
  padding: 0;
}

h1, h2, h3, h4 {
  line-height: var(--altura-linha-justa);
  font-weight: var(--peso-semi);
  letter-spacing: var(--rastreio-titulo);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--cor-link);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

a:hover {
  text-decoration-thickness: 2px;
}

table {
  border-collapse: collapse;
}

/* =====================================================================
   CONTROLES NATIVOS — nada com a cara do navegador escapa do Design System.
   ===================================================================== */
/* Campo de busca: sem o "x" azul do Chromium (a limpeza é Esc/apagar; o DS não o desenha). */
input[type="search"] {
  appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
  appearance: none;
  display: none;
}

/* Campo numérico: sem as setinhas (inputmode="numeric" já traz o teclado certo). */
input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

/* Preenchimento automático: o navegador tingiria o campo de amarelo/azul. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--cor-texto);
  box-shadow: 0 0 0 100rem var(--cor-superficie) inset;
  transition: background-color 9999s;
}

input:autofill {
  box-shadow: 0 0 0 100rem var(--cor-superficie) inset;
}

/* Barras de rolagem internas (listas, tabelas, painéis): finas e nos neutros do papel. */
.tabela-rolagem,
.abas,
.relogio__lista,
.combobox__lista,
.comandos__lista,
.resumo__trechos,
dialog.dialogo,
.gaveta .dialogo__corpo {
  scrollbar-width: thin;
  scrollbar-color: var(--neutro-300) transparent;
}

/* Área de texto: a alça de redimensionar só vertical (a largura é da grade). */
textarea {
  resize: vertical;
}

/* Números alinhados em tabelas, valores e datas. */
.num,
td,
time {
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   FOCO — assinatura própria (docs/design-system/accessibility.md#foco).
   Anel grafite afastado 2px do elemento, com halo claro preenchendo o vão: lê-se sobre
   branco, sobre superfícies tingidas e sobre o dourado. Nunca o azul do navegador.
   ===================================================================== */
:focus-visible {
  outline: var(--foco-espessura) solid var(--foco-cor);
  outline-offset: var(--foco-offset);
  box-shadow: 0 0 0 var(--foco-offset) var(--foco-contraste);
}

/* Links no texto corrido ganham canto arredondado no anel. */
a:not([class]):focus-visible {
  border-radius: var(--raio-xs);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Superfícies escuras invertem o par: anel dourado, halo grafite. */
.cabecalho,
.acesso__marca {
  --foco-cor: var(--foco-cor-inverso);
  --foco-contraste: var(--foco-contraste-inverso);
}

[hidden] {
  display: none !important;
}

/* Só sem JavaScript (ex.: "Aplicar" dos filtros, que a busca ao vivo dispensa): com scripts ligados some
   já no primeiro desenho, sem piscar enquanto o app.js carrega (ele ainda marca `hidden`, para navegadores
   sem a consulta `scripting`). */
@media (scripting: enabled) {
  [data-so-sem-js] {
    display: none !important;
  }
}

::selection {
  background: var(--dourado-200);
  color: var(--grafite-950);
}

.icone {
  width: var(--tamanho-icone);
  height: var(--tamanho-icone);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone--sm {
  width: var(--tamanho-icone-sm);
  height: var(--tamanho-icone-sm);
}

.icone--lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Conteúdo apenas para leitores de tela. */
.sr-only,
.campos > .opcoes--compactas .opcao__descricao { /* explicação só para leitores de tela */
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Link "pular para o conteúdo" (WCAG 2.4.1). */
.pular-conteudo {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: var(--z-dica);
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: var(--raio-sm);
  box-shadow: var(--sombra-3);
  font-weight: var(--peso-semi);
}

.pular-conteudo:focus {
  top: var(--esp-2);
}

/* Micro-rótulo institucional em caixa alta (DNA visual). */
.rotulo-caixa-alta {
  font-size: var(--texto-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.rotulo-caixa-alta--marca {
  color: var(--cor-marca-texto);
}

.texto-secundario {
  color: var(--cor-texto-secundario);
}

.texto-terciario {
  color: var(--cor-texto-terciario);
}

.quebra-palavras {
  overflow-wrap: anywhere;
}

.pilha > * + * {
  margin-top: var(--esp-4);
}

.pilha-sm > * + * {
  margin-top: var(--esp-2);
}

.pilha-lg > * + * {
  margin-top: var(--esp-6);
}

.linha {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}

/* Título à esquerda, ação à direita (quebra em telas estreitas). */
.linha--entre {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-3);
}

.linha--fim {
  justify-content: flex-end;
}

.cresce {
  flex: 1 1 auto;
  min-width: 0;
}

/* =====================================================================
   SISTEMA DE MOVIMENTO (docs/design-system/motion.md)
   Vocabulário único de entradas/saídas/ênfase. Tudo responde aos tokens de
   duração, que viram 0ms com prefers-reduced-motion.
   ===================================================================== */

/* Entrada padrão: sobe 6px e aparece. */
@keyframes aparecer {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Entrada de elementos flutuantes: cresce a partir da origem. */
@keyframes brotar {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Folha inferior (celular): sobe da borda de baixo da tela (filtros, menu de linha). */
@keyframes folha-subir {
  from { translate: 0 100%; }
}

/* Saída: encolhe e some. */
@keyframes recolher {
  to { opacity: 0; transform: scale(0.97) translateY(4px); }
}

/* Filete dourado: cresce da esquerda (item ativo, aba, foco de seção). */
@keyframes filete-crescer {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Carimbo: a assinatura do sistema para emissão/conclusão. */
@keyframes carimbar {
  0% { opacity: 0; transform: scale(1.35) rotate(-6deg); }
  60% { opacity: 1; transform: scale(0.96) rotate(1deg); }
  100% { transform: none; }
}

/* Pulso discreto de atividade (gerando, processando). */
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* Brilho de esqueleto. */
@keyframes esqueleto {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Barra de progresso indeterminada (carregamento HTMX). */
@keyframes deslizar-indeterminado {
  from { transform: translateX(-100%); }
  to { transform: translateX(400%); }
}

/* Recusa: o elemento "balança a cabeça" uma vez (erro de ação, campo inválido ao enviar). */
@keyframes sacudir {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Trilho vertical cresce de cima (seção de formulário em foco). */
}

@keyframes trilho-crescer {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* =====================================================================
   MOTION 2.0 — continuidade espacial com View Transitions.
   - Entre páginas (same-origin): a placa do ofício, a aba ativa e o botão "Emitir"
     viajam para o lugar onde reaparecem (lista → detalhe, revisar → emitido).
   - Dentro da página: trocas HTMX (globalViewTransitions) reordenam registros em vez
     de piscar. Os nomes vêm de data-vt (attr() tipado); navegadores sem suporte
     simplesmente trocam o conteúdo.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duracao-rapida);
}

::view-transition-group(*) {
  animation-duration: var(--duracao-media);
  animation-timing-function: var(--curva-padrao);
}

[data-vt] {
  view-transition-name: attr(data-vt type(<custom-ident>), none);
}

/* Página: o conteúdo entra em cascata curta (orientação, não decoração).
   `backwards`, não `both`: com o preenchimento final a animação continuaria "ativa" e cada
   bloco viraria um contexto de empilhamento — o menu do cabeçalho da página ficava por baixo
   da folha seguinte no celular. */
.conteudo__interno > * {
  animation: aparecer var(--duracao-lenta) var(--curva-padrao) backwards;
}

.conteudo__interno > :nth-child(2) { animation-delay: 40ms; }
.conteudo__interno > :nth-child(3) { animation-delay: 80ms; }
.conteudo__interno > :nth-child(n + 4) { animation-delay: 120ms; }

/* Quando a navegação já tem transição de view (trocar de aba, abrir um registro), a
   cascata seria uma segunda entrada por cima da primeira: aparecia em degraus, parecendo
   travado. A transição cuida da passagem; a cascata fica para as cargas comuns. */
html:active-view-transition .conteudo__interno > * {
  animation: none;
}

/* HTMX: troca de fragmento sem parecer "reload". */
.htmx-swapping {
  opacity: 0;
  transition: opacity var(--duracao-rapida) var(--curva-saida);
}

.htmx-added,
.htmx-settling {
  animation: aparecer var(--duracao-media) var(--curva-padrao);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

.texto-xs { font-size: var(--texto-xs); }
.texto-sm { font-size: var(--texto-sm); }
.texto-lg { font-size: var(--texto-lg); }
.peso-semi { font-weight: var(--peso-semi); }
.mt-2 { margin-top: var(--esp-2); }
.mt-4 { margin-top: var(--esp-4); }
.mt-6 { margin-top: var(--esp-6); }
.mb-4 { margin-bottom: var(--esp-4); }
.texto-centro { text-align: center; }

/* Formulário que é só um botão (ex.: "Novo ofício" via POST): o botão participa do layout
   do contêiner como se o <form> não existisse. */
.form-em-linha {
  display: contents;
}

/* O navegador dá ao fieldset a largura mínima do conteúdo: uma tabela larga lá dentro
   esticava a página em vez de rolar na própria caixa (.tabela-rolagem). */
fieldset {
  min-width: 0;
}