/* tela da fila de espera (fila.js): servidor cheio. O mesmo painel da tela de carregamento (carregando.css), por cima
   da fornalha dela; o painel de carregamento fica escondido enquanto a fila durar */
.carga.fila-tela { z-index: 9050; background: transparent; }
.carga.fila-tela::before { display: none; }
.carga.fila-tela.solo { background: radial-gradient(ellipse 70% 55% at 50% 48%, #1a0f0b, #07060a 70%); }
body.na-fila #carga .carga-painel { visibility: hidden; }

.fila-painel { padding-bottom: 24px; }
.fila-lugar { margin-top: 16px; display: flex; flex-direction: column; align-items: center; }
.fila-lugar b {
  color: #f7e3b2; font: 700 52px/1.05 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em;
  text-shadow: 0 1px 0 #000, 0 2px 8px rgba(0, 0, 0, .9), 0 0 22px rgba(255, 150, 60, .5);
}
/* a posicao mudou (alguem entrou, alguem saiu da fila): o numero pulsa */
.fila-lugar.anda b { animation: filaAnda .7s ease-out; }
@keyframes filaAnda { 0% { transform: scale(1.25); color: #fff3c9; } 100% { transform: none; } }
.fila-txt { margin-top: 10px; color: #f2dba6; font: 600 16px/1.4 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, 'Times New Roman', serif; letter-spacing: .03em; overflow-wrap: anywhere; text-wrap: balance; text-shadow: 0 1px 0 #000; }
.fila-entra { margin-top: 6px; color: #c9a464; font: italic 14px/1.35 Georgia, 'Times New Roman', serif; letter-spacing: .03em; }
/* esperando a vaga: um filete de fogo que corre (sem tempo inventado) */
.fila-relogio { position: relative; height: 4px; margin: 14px 24px 0; border-radius: 999px; overflow: hidden; background: #0b0809; box-shadow: 0 0 0 1px #4b3313; }
.fila-relogio i { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: inherit; background: linear-gradient(90deg, transparent, #c63b14 30%, #ffc35e 70%, transparent); animation: filaCorre 2.2s ease-in-out infinite; }
@keyframes filaCorre { to { left: 100%; } }
.fila-espera { margin-top: 10px; color: #a39684; font: 12px/1.35 Verdana, sans-serif; }
.fila-sair {
  margin-top: 16px; padding: 9px 22px; border-radius: 8px; border: 1px solid #6a4d22; background: linear-gradient(180deg, #2a1c12, #170f0b);
  color: #f2dba6; font: 600 13px/1.2 Verdana, sans-serif; letter-spacing: .04em;
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .12), 0 2px 8px rgba(0, 0, 0, .6);
}
.fila-sair:hover { border-color: #d8a64a; color: #fff3c9; }
.fila-sair:focus-visible { outline: 2px solid #d8a64a; outline-offset: 2px; }

@media (max-width: 480px) {
  .fila-lugar b { font-size: 44px; }
  .fila-txt { font-size: 15px; }
  .fila-relogio { margin: 10px 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fila-lugar.anda b { animation: none; }
  .fila-relogio i { animation: none; left: 30%; }
}