/* Base do sistema web: a imagem do tema por baixo de tudo (no Escuro, a escolhida pelo usuário — servidores e dados em azul e
   dourado; no Claro, o Céu), cobrindo a tela sem distorcer e parada atrás dos elementos, com o véu do tema por cima dela
   para a leitura, e o texto padrão. A JPEG é a reserva do navegador que não entende o image-set com WebP. Só tokens. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  background-color: var(--ground);
  background-image: var(--luz-fundo), linear-gradient(var(--veu-fundo), var(--veu-fundo)), var(--fundo-imagem-reserva);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--fonte);
  font-size: var(--corpo-tamanho);
  line-height: var(--corpo-linha);
  font-weight: var(--corpo-peso);
}
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  body { background-image: var(--luz-fundo), linear-gradient(var(--veu-fundo), var(--veu-fundo)), var(--fundo-imagem); }
  @media (min-width: 1921px) { body { background-image: var(--luz-fundo), linear-gradient(var(--veu-fundo), var(--veu-fundo)), var(--fundo-imagem-grande); } }
}
/* A tela de entrar mostra a imagem do tema SEM o véu e sem a luz azul (decisão do usuário em 10/10/2026): eles entram só depois
   de entrar no sistema. A página da entrada cobre a tela por cima do fundo do corpo, com a mesma imagem e a mesma reserva. */
.entrada-pagina { background-color: var(--ground); background-image: var(--fundo-imagem-reserva); background-size: cover;
  background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) { .entrada-pagina { background-image: var(--fundo-imagem); } }
a { color: var(--link); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: var(--borda-forte) solid var(--gold); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#blazor-error-ui { display: none; }
.carregando-sistema { display: flex; align-items: center; justify-content: center; min-height: 100vh; color: var(--ink-muted); }
/* A tela com a grade na janela (GradeComFiltro NaJanela; design-system.md, "Grade de dados"): a página ocupa a altura da janela
   e não rola — a barra do topo em cima, a página com o resto, e cada elemento entre a página e a grade (o painel da tela, o
   conteúdo, a raiz da tela) passa a altura adiante em coluna; a grade fica com o que sobra e rola por dentro, com a barra de
   status sempre visível embaixo. Se o que vem antes da grade não deixar espaço para ela, o conteúdo do painel rola (o título
   da tela e as abas ficam). Vale só para a página à vista que tem essa grade À VISTA: com um registro aberto (TelaComRegistro),
   a grade fica escondida e a página volta a rolar normalmente, com o registro no lugar. As caixas do TelaComRegistro não contam
   (são transparentes, display: contents): a altura passa por elas. */
#app:has(.pagina-viva:not(.escondida) .na-janela:not(.escondida *)) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
#app:has(.pagina-viva:not(.escondida) .na-janela:not(.escondida *)) > main {
  flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; padding-bottom: var(--space-3);
}
.pagina-viva:not(.escondida):has(.na-janela:not(.escondida *)),
.pagina-viva:not(.escondida) :has(.na-janela:not(.escondida *)):not([data-componente="tela-com-registro"], [data-componente="lista-da-tela"]) {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
.pagina-viva:not(.escondida) .painel > .conteudo:has(.na-janela:not(.escondida *)) { overflow-y: auto; }

/* O balão da dica dos selos da grade (sistema.js): texto maior que a dica comum do navegador, por cima de tudo. */
.dica-selo {
  display: none; position: fixed; z-index: 1000; pointer-events: none; max-width: var(--largura-extra-longo);
  padding: var(--espaco-linhas) var(--space-2); border: var(--borda-fina) solid var(--border-subtle); border-radius: var(--raio-controle);
  background: var(--surface-raised); color: var(--ink); font-size: var(--texto-dica-selo); font-weight: var(--rotulo-peso);
  box-shadow: 0 var(--espaco-linhas) var(--space-2) var(--sombra-menu);
}

/* O movimento dos gráficos do Início (pedido do usuário em 19/10/2026: "só subindo de 0 até onde estiver no momento"): as animações
   de entrada dos componentes (GraficoBarras, GraficoRosca, GraficoPizza3D, a linha do mês e as linhas dos cartões), uma vez, quando o
   gráfico aparece (o Início se atualizar sozinho não repete: o elemento é o mesmo). O estado de repouso é o do próprio gráfico
   (sem fill-mode forward); com "reduzir movimento", cada componente desliga a sua. */
/* A linha se revela da esquerda para a direita (o recorte vai abrindo; as folgas negativas deixam a espessura do traço passar). Não usa o
   tracejado do traço: com o traço de espessura fixa (vector-effect) o navegador desenha pedaços soltos no meio do caminho. */
@keyframes mov-revelar { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
@keyframes mov-crescer-y { from { transform: scaleY(0); } }
@keyframes mov-rosca { from { stroke-dasharray: 0 100; } }
@keyframes mov-inflar { from { transform: scale(0); opacity: 0; } }
@keyframes mov-aparecer { from { opacity: 0; } }
@keyframes mov-pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }