/* =============================================================================
   Barra de progresso das requisições HTMX.
   Em 3G/4G instável a tela troca um fragmento e fica alguns segundos parada,
   sem nada dizendo que há algo em curso — o usuário toca de novo e dispara a
   mesma busca duas vezes. A barra é o feedback que faltava, e vale para TODA
   requisição HTMX (inclusive as que ainda vão ser escritas), em vez de
   depender de um hx-indicator lembrado caso a caso.

   Fica ABAIXO de modal e offcanvas do Bootstrap (z-index 1050/1055) de
   propósito: é aviso de fundo, não conteúdo.
   ========================================================================== */
.htmx-progress {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1040;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background: transparent;
  overflow: hidden;
}
.htmx-progress.is-ativa { opacity: 1; }

/* A faixa corre de ponta a ponta: progresso indeterminado, porque não dá para
   saber a fração baixada de uma resposta HTML sem Content-Length confiável. */
.htmx-progress::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg,
    rgba(var(--bs-primary-rgb), .25),
    rgba(var(--bs-primary-rgb), 1),
    rgba(var(--bs-primary-rgb), .25));
  animation: htmx-progress-corre 1.05s ease-in-out infinite;
  /* Parada enquanto a barra está invisível: opacity 0 não suspende animação, e
     sem isto o elemento seguiria animando transform para sempre depois da
     primeira requisição, gastando compositor e bateria em tela ociosa. */
  animation-play-state: paused;
}
.htmx-progress.is-ativa::before { animation-play-state: running; }

@keyframes htmx-progress-corre {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(255%); }
}

/* Quem pediu menos movimento no sistema recebe uma barra parada, não uma
   correndo: o aviso continua, a animação some. */
@media (prefers-reduced-motion: reduce) {
  .htmx-progress::before {
    animation: none;
    width: 100%;
    opacity: .6;
  }
}