/* Component: progress-indicator — barra fina en la parte superior, estilo YouTube. */

.pf-riojano-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 200;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.pf-riojano-progress[hidden] { display: none; }
.pf-riojano-progress__bar {
  height: 100%;
  width: 30%;
  background: var(--pf-riojano-brand-accent-strong);
  animation: pf-riojano-progress-slide 1.2s linear infinite;
  transform: translateX(-100%);
}

@keyframes pf-riojano-progress-slide {
  0%   { transform: translateX(-100%); width: 30%; }
  50%  { width: 60%; }
  100% { transform: translateX(400%); width: 30%; }
}