/* Casca compartilhada do Terminal ACTA — o material e a moldura que as páginas
   próprias dividem entre si.

   Duas telas moram fora da SPA: /fluxo (o Chart.js não sobrevive ao diff do
   dc.js) e /a-acta (SVG inline, revelação do título e carrossel também não).
   As duas usam o mesmo cabeçalho, o mesmo selo de estado e o mesmo vidro.
   Antes isto morava só em css/fluxo.css; carregar 54 KB de folha de gráfico
   numa landing que nunca desenha um gráfico é caro, e duplicar o material em
   dois arquivos garante que um dos dois fique para trás na próxima afinação.

   Carregar SEMPRE depois de site.css (de onde vêm --fundo, --tinta, --linha,
   --ambar-sup, --shell, --gutter, --topo) e ANTES da folha da página.
   Especificação: docs/design/fluxo-acta.md §12 e docs/design/a-acta-landing.md */

/* Blocos que nascem com `hidden` e são revelados pelo script (painel de datas,
   balões de ajuda, o modal do PIX) quase sempre ganham `display: grid` ou
   `flex`. A regra do navegador para [hidden] é display:none em
   `display: initial` — ela perde por especificidade e o bloco aparece mesmo
   escondido. Esta linha devolve o significado do atributo. */
[hidden] { display: none !important; }

:root {
  /* ── Raio ────────────────────────────────────────────────────────────────
     Vidro fino corta reto; vidro com espessura tem canto. Dois raios, porque
     o mesmo valor não serve para uma lâmina de 600px e para um campo de 34px:
     no campo, raio grande vira cápsula e a tela perde a régua. */
  --fx-raio: 8px;
  --fx-raio-vidro: 18px;

  /* ── Vidro ──────────────────────────────────────────────────────────────
     Vidro não tem aparência própria: ele mostra o que está ATRÁS. A primeira
     tentativa translúcida mudou 0,89% da tela justamente por isso — sobre cor
     chapada, translucidez é só outra cor chapada.

     Então o material tem duas metades, e a segunda é a que faz o olho ler
     "vidro" mesmo quando quase nada passa:
       1. AMBIENTE — um banho de luz preso à janela (`background-attachment:
          fixed`), para o `backdrop-filter` do cartão ter o que refratar. Como
          ele é fixo e a página rola, cada cartão atravessa uma luz diferente:
          é daí que vem a sensação de líquido. Quem usa a lâmina precisa
          pintar esse banho — sem ele o material vira retângulo pintado.
       2. ARESTA — fio especular no topo, sombra interna na base, contorno e
          sombra externa longa. É a aresta que diz "isto tem espessura".

     As luzes são os matizes da casa (âmbar 55, azul 250, verde 155), nunca
     cor nova, e em alfa baixo o bastante para nunca aparecer sob um dado. */
  --fx-luz-a: oklch(.66 .17 55 / .20);
  --fx-luz-b: oklch(.56 .15 250 / .17);
  --fx-luz-c: oklch(.56 .14 155 / .13);

  /* No papel o vidro CLAREIA: painel gelado boiando sobre a mesa bege. É a
     inversão do cartão comum (que é mais escuro que a página) e é o que dá
     o ar de acrílico em vez de retângulo cinza. */
  --fx-vidro: color-mix(in srgb, #FFFFFF 44%, transparent);

  /* O brilho é o que separa vidro de "retângulo translúcido": uma faixa de luz
     atravessando a lâmina na diagonal, forte no canto que recebe a luz e
     apagando no meio. É o reflexo da fonte na superfície, não sombreamento —
     por isso só clareia, nunca escurece, e some antes de chegar ao dado. */
  --fx-vidro-brilho: linear-gradient(151deg,
    rgba(255, 255, 255, .46) 0%,
    rgba(255, 255, 255, .10) 32%,
    rgba(255, 255, 255, 0)   56%,
    rgba(255, 255, 255, .22) 100%);

  /* Onde a superfície precisa ser OPACA e mesmo assim parecer a mesma lâmina:
     cabeçalho grudado de tabela, lista suspensa de campo. É a cor que o vidro
     tem em média sobre a página, resolvida à mão. */
  --fx-vidro-solido: #F7F6F3;

  /* Caixa DENTRO da lâmina: não ganha superfície própria (seria vidro sobre
     vidro), ganha um rebaixo — a mesma lâmina, um pouco mais funda. */
  --fx-vidro-interno: rgba(0, 0, 17, .038);
  --fx-vidro-linha: rgba(0, 0, 17, .07);

  /* A aresta tem dois tons, como vidro real: o corte que pega a luz (rim,
     claro, por dentro) e o corte contra a página (contorno, escuro, por fora).
     Um só dos dois faz o cartão virar retângulo pintado. */
  --fx-vidro-especular: rgba(255, 255, 255, .95);
  --fx-vidro-rim: rgba(255, 255, 255, .55);
  --fx-vidro-base: rgba(0, 0, 17, .05);
  --fx-vidro-contorno: rgba(0, 0, 17, .07);
  --fx-vidro-sombra: 0 1px 2px rgba(0, 0, 17, .05), 0 26px 54px -30px rgba(0, 0, 17, .30);

  /* Filtro da lâmina. Vidro que só deixa passar é película; vidro PROCESSA o
     que passa, e é esse processamento que o olho reconhece. Aqui ele é
     saturação, não desfoque, e a escolha foi medida com a luz forte já no
     lugar: `saturate(180%)` sozinho contra `blur(26px) saturate(180%)` deu
     0,23% de pixels diferentes, com desvio máximo de 4/255 — invisível. O
     mesmo `saturate` contra filtro nenhum deu 14,3% dos pixels e desvio de
     12/255: o banho de luz fica visivelmente mais vivo DENTRO da lâmina do
     que fora, e essa quebra na borda é a prova de que a superfície é
     translúcida. O motivo é o de sempre: atrás do cartão há um degradê liso,
     e degradê liso borrado continua liso. Não há o que frostar.
     O blur custava caro por nada — pior quadro da rolagem de 553ms contra
     157ms. Ele fica onde tem trabalho: a barra grudada, onde texto e gráfico
     de verdade passam por trás.
     No celular o filtro cai inteiro: lá um cartão ocupa a largura toda, quase
     não sobra página ao lado para o olho comparar dentro e fora, e é onde a
     camada de composição pesa mais. */
  --fx-desfoque: blur(20px) saturate(150%);
  --fx-filtro-vidro: saturate(180%);
}

[data-tema="noite"] {
  /* No escuro a lâmina é mais fina ainda (40%), porque a luz que ela deixa
     passar é a única cor da tela. O brilho diagonal cai para um décimo do
     valor do claro: no preto, um reflexo forte lê como mancha. E o banho
     aguenta o dobro de alfa, porque o escuro não satura. */
  --fx-luz-a: oklch(.66 .16 55 / .30);
  --fx-luz-b: oklch(.56 .15 250 / .26);
  --fx-luz-c: oklch(.56 .13 155 / .19);

  --fx-vidro: color-mix(in srgb, #191920 40%, transparent);
  --fx-vidro-brilho: linear-gradient(151deg,
    rgba(255, 255, 255, .085) 0%,
    rgba(255, 255, 255, .02)  34%,
    rgba(255, 255, 255, 0)    58%,
    rgba(255, 255, 255, .04)  100%);
  --fx-vidro-solido: #141418;
  --fx-vidro-interno: rgba(255, 255, 255, .045);
  --fx-vidro-linha: rgba(255, 255, 255, .08);
  --fx-vidro-especular: rgba(255, 255, 255, .13);
  --fx-vidro-rim: rgba(255, 255, 255, .05);
  --fx-vidro-base: rgba(0, 0, 0, .42);
  --fx-vidro-contorno: rgba(255, 255, 255, .10);
  --fx-vidro-sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 30px 60px -32px rgba(0, 0, 0, .95);
}

/* ── A lâmina ───────────────────────────────────────────────────────────────
   Quem quiser a superfície de vidro herda desta classe. A aresta vem em quatro
   traços: fio de luz no topo (a lâmina pegando a luz de frente), rim claro
   dando a volta (o corte do material), sombra interna na base (a espessura) e
   a sombra externa longa (o vão até a página). */
.fx-lamina {
  background-color: var(--fx-vidro);
  background-image: var(--fx-vidro-brilho);
  border: 1px solid var(--fx-vidro-contorno);
  border-radius: var(--fx-raio-vidro);
  backdrop-filter: var(--fx-filtro-vidro);
  -webkit-backdrop-filter: var(--fx-filtro-vidro);
  box-shadow:
    inset 0 1px 0 var(--fx-vidro-especular),
    inset 0 0 0 1px var(--fx-vidro-rim),
    inset 0 -1px 0 var(--fx-vidro-base),
    var(--fx-vidro-sombra);
}

/* ── Cabeçalho das páginas próprias ─────────────────────────────────────────
   O único lugar onde o desfoque fica: aqui passa conteúdo de verdade por trás,
   e é o que o blur existe para tratar. */

.fx-cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--fundo) 72%, transparent);
  backdrop-filter: var(--fx-desfoque);
  -webkit-backdrop-filter: var(--fx-desfoque);
  border-bottom: 1px solid var(--fx-vidro-contorno);
  box-shadow: inset 0 -1px 0 var(--fx-vidro-base);
}

.fx-cabecalho__interno {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--topo);
  display: flex;
  align-items: center;
  gap: 40px;
}

.fx-marca { display: flex; align-items: center; gap: 11px; }
.fx-marca img { border-radius: 50%; display: block; }
.fx-marca__texto { line-height: 1; }
.fx-marca__nome { display: block; font-weight: 700; letter-spacing: .22em; font-size: 16px; }
.fx-marca__sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .28em;
  opacity: .7;
  margin-top: 3px;
}

.fx-nav { display: flex; gap: 28px; }
.fx-nav a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 6px 0;
  color: var(--tinta-2);
  border-bottom: 2px solid transparent;
  transition: opacity .18s ease;
}
.fx-nav a:hover { opacity: .72; color: var(--tinta-2); }
.fx-nav a.fx-nav--ativo { color: var(--tinta); border-bottom-color: var(--tinta); }
.fx-cabecalho .tm-botao { margin-left: auto; }

/* ── Selo de estado ─────────────────────────────────────────────────────────
   O ponto muda de cor com o estado — e o estado vem do servidor, não de uma
   dedução do cliente sobre a data do arquivo. O pulso é reservado a "ao vivo":
   nenhuma outra peça do portal pode usá-lo. */
.fx-selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--tinta-2);
}
.fx-selo__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-3); }
.fx-selo[data-estado="ok"] .fx-selo__ponto { background: var(--verde); animation: actaPulse 2.2s ease-in-out infinite; }
.fx-selo[data-estado="fonte_atrasada"] .fx-selo__ponto { background: var(--ambar-sup); }
.fx-selo[data-estado="pipeline_parado"] .fx-selo__ponto { background: var(--coral); }
.fx-selo[data-estado="pipeline_parado"] { border-color: var(--coral); color: var(--coral); }

@media (max-width: 900px) {
  .fx-cabecalho__interno { height: auto; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; gap: 14px; }
  .fx-nav { order: 3; width: 100%; gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .fx-nav::-webkit-scrollbar { display: none; }
}