/* Véu de carregamento: a camada branca que bloqueia o clique enquanto o
   portal está trabalhando.

   O Dash cria sozinho um <div class="_dash-loading-callback"> no topo da
   árvore enquanto QUALQUER callback está pendente (de servidor, clientside,
   a navegação entre telas, o download) e o remove quando termina, inclusive
   quando o callback dá erro. Ele nasce sem estilo nenhum. Aqui ele vira o
   véu.

   Pedido do Riquelme ao ver o portal rodando em 11/09/2026: sem isto a
   pessoa clica duas, três vezes no mesmo botão enquanto a resposta não
   chega, e cada clique é uma requisição a mais, às vezes uma gravação a
   mais.

   Duas decisões que valem explicar:

   1. O véu bloqueia o clique DESDE O PRIMEIRO MILISSEGUNDO, mas só aparece
      depois de 250 ms. Um div cobre e recebe os cliques mesmo transparente;
      a pintura atrasada evita o piscar em callbacks rápidos (abrir o menu do
      celular, trocar um filtro). Em rede lenta de campo, o véu aparece e diz
      que algo está acontecendo.

   2. z-index acima de tudo o que o portal desenha: a sidebar do celular é
      z-50, o véu do menu z-40, o menu do dropdown 40. O painel de
      desenvolvimento do Dash (10000) continua clicável, de propósito.

   Sem transição de saída: o div é destruído quando o callback termina. */

._dash-loading-callback {
  position: fixed;
  inset: 0;
  z-index: 100;
  cursor: progress;
  background: rgba(255, 255, 255, 0.72);
  opacity: 0;
  animation: veu-carregando-entrar 0s linear 250ms forwards;
}

@keyframes veu-carregando-entrar {
  to {
    opacity: 1;
  }
}

/* O anel que gira, na cor da marca, e a palavra embaixo. Centralizados na
   tela, e não no conteúdo: o véu cobre a tela inteira. */
._dash-loading-callback::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -32px 0 0 -20px;
  border-radius: 9999px;
  border: 3px solid rgba(31, 59, 110, 0.18);
  border-top-color: #1f3b6e;
  animation: veu-carregando-girar 0.8s linear infinite;
}

._dash-loading-callback::after {
  content: "Carregando";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: 18px;
  text-align: center;
  font: 600 13px/1.4 Inter, system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
  color: #182f58;
}

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