/* ==========================================================================
   NAVEGACION SIN RECARGA — indicador de carga
   ==========================================================================

   Barra fina en el borde superior mientras htmx pide la pagina. La inserta
   navegacion.js; aca solo vive su apariencia.

   La animacion no representa progreso real (una peticion fetch no reporta
   avance): llega rapido al 90% y se queda ahi hasta que la respuesta entra,
   momento en el que se completa. Es el mismo truco que usan las barras de
   carga de GitHub o YouTube.

   ========================================================================== */

.nav-progreso {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 0;
  height: 3px;
  /* background: var(--nav-progreso-color, #0d6efd); */
  opacity: 0;
  pointer-events: none;
}

.nav-progreso-activa {
  opacity: 1;
  animation: nav-progreso-avance 8s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

.nav-progreso-fin {
  width: 100%;
  opacity: 0;
  transition:
    width 0.15s ease-out,
    opacity 0.3s ease-out 0.15s;
}

@keyframes nav-progreso-avance {
  0% {
    width: 0;
  }
  30% {
    width: 45%;
  }
  100% {
    width: 90%;
  }
}

/* La barra es un adorno: quien pidio menos movimiento la ve fija, sin la
   animacion de avance, pero sigue viendo que algo esta pasando. */
@media (prefers-reduced-motion: reduce) {
  .nav-progreso-activa {
    width: 90%;
    animation: none;
  }

  .nav-progreso-fin {
    transition: opacity 0.2s linear;
  }
}

/* Atenua el contenido saliente mientras se espera la respuesta. Da la señal de
   "se esta cargando algo" sin mover nada de sitio. */
main.main-general.htmx-request {
  opacity: 0.6;
  transition: opacity 0.2s ease-in;
}