<!-- Bootstrap Progress Bar -->
<div class="progress reading-progress-bar" id="reading-progress">
  <div class="progress-bar" role="progressbar"
       style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <span class="progress-label">0%</span>
  </div>
</div>


<!-- CSS personalizado para que flote encima del navbar y tenga color amarillo -->
<style>
  .reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 9999;
    border-radius: 0;
    background-color: transparent;
    /* fondo del contenedor */
  }

  .reading-progress-bar .progress-bar {
    background-color: #ffc107;
    height: 100%;
    transition: width 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    /* Asegúrate que sea visible */
    font-size: 12px;
    font-weight: bold;
  }
</style>

<!-- JavaScript para actualizar la barra -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const progressBarContainer = document.getElementById("reading-progress");
    const progressBar = progressBarContainer.querySelector(".progress-bar");
    const postContainer = document.querySelector(".pst-cont");

    function updateProgress() {
      const scrollTop = window.scrollY;
      const offsetTop = postContainer.offsetTop;
      const postHeight = postContainer.scrollHeight;
      const windowHeight = window.innerHeight;

      const totalScrollable = postHeight - offsetTop - windowHeight;

      if (totalScrollable <= 0) {
        progressBarContainer.style.display = "none";
      } else {
        const progress = Math.min((scrollTop - offsetTop) / totalScrollable, 1);
        const progressPercent = progress >= 0 ? progress * 100 : 0;
        progressBar.style.width = `${progressPercent}%`;
        progressBar.setAttribute("aria-valuenow", progressPercent.toFixed(1));
        progressBarContainer.style.display = "block";
        progressBar.style.width = `${progressPercent}%`;
        progressBar.setAttribute("aria-valuenow", progressPercent.toFixed(1));
        progressBar.querySelector(".progress-label").textContent = `${Math.round(progressPercent)}%`;
      }
    }

    window.addEventListener("scroll", updateProgress);
    window.addEventListener("resize", updateProgress);

    updateProgress();
  });
</script>
