document.addEventListener("DOMContentLoaded", () => {
  const buttonsLeft = document.querySelectorAll(".scrollLeft");
  const buttonsRight = document.querySelectorAll(".scrollRight");

  buttonsLeft.forEach(btn => {
    btn.addEventListener("click", () => {
      const id = btn.dataset.id;
      const track = document.getElementById(id);
      if (track) {
        track.scrollBy({ left: -200, behavior: "smooth" });
      }
    });
  });

  buttonsRight.forEach(btn => {
    btn.addEventListener("click", () => {
      const id = btn.dataset.id;
      const track = document.getElementById(id);
      if (track) {
        track.scrollBy({ left: 200, behavior: "smooth" });
      }
    });
  });

  // AUTO-CENTRAR SI EL CONTENIDO NO EXCEDE EL ANCHO DEL TRACK
  const track = document.getElementById("support");
  if (!track) return;  // <- DETIENE TODO SI NO EXISTE

  function centerIfFits() {
    const totalWidth = [...track.children].reduce(
      (w, el) => w + el.offsetWidth + 20,
      0
    );
    const visibleWidth = track.offsetWidth;

    if (totalWidth <= visibleWidth) {
      track.style.justifyContent = "center";
    } else {
      track.style.justifyContent = "flex-start";
    }
  }

  window.addEventListener("resize", centerIfFits);
  centerIfFits();
});