/*
 * Espera: ícone animado do sistema no centro da página enquanto o usuário espera.
 * Fica fora do estilos.css porque também é usada no index.html, antes de o JavaScript (e o estilos.css) carregar.
 * Por isso as cores têm valor de reserva: na abertura do site as variáveis do tema ainda não existem.
 */
.espera-global {
  position: fixed; inset: 0; z-index: 100; /* acima do painel lateral (60) e da pergunta "Fechar sem salvar?" (65); abaixo das notificações (200) */
  display: flex; align-items: center; justify-content: center;
  /* Escurece de leve: a pessoa vê o que acontece na tela, mas não consegue clicar (a camada pega os cliques). */
  background: rgb(0 0 0 / 0.15);
  animation: espera-entrar 0.18s ease-out;
  cursor: progress;
}

.espera-global img {
  width: 72px; height: 72px; padding: 20px; box-sizing: content-box;
  border-radius: 28px;
  background: var(--superficie, #ffffff); /* sólido, sem efeito vidro */
  border: 1px solid var(--borda, #e2e5ea);
  box-shadow: var(--vidro-sombra, 0 6px 24px rgb(15 23 42 / 0.08));
}
:root[data-tema="escuro"] .espera-global img { background: var(--superficie, #171b21); border-color: var(--borda, #2a3039); }

/* Abertura do site: ainda não há nada atrás, então o fundo é a cor da página, sem cartão. */
.espera-global.espera-inicial { background: #f4f6f9; animation: none; }
:root[data-tema="escuro"] .espera-global.espera-inicial { background: #0f1216; }
.espera-global.espera-inicial img { background: none; border: none; box-shadow: none; }

.so-leitor-tela {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes espera-entrar { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .espera-global { animation: none; } }