<script>
/**
 * GLOBAL COLOR OVERRIDE
 * Reemplaza cualquier azul por naranja
 * Funciona con:
 * - CSS variables
 * - Bootstrap
 * - inline styles
 * - SVG currentColor
 * - reloads del builder
 */

(function () {
  const ORANGE = "#ff7a00";
  const ORANGE_RGB = "255,122,0";

  function applyVariables() {
    const r = document.documentElement;

    /* Theme variables */
    r.style.setProperty("--cl-accent", ORANGE);
    r.style.setProperty("--cl-accent-rgb", ORANGE_RGB);

    /* Bootstrap */
    r.style.setProperty("--bs-primary", ORANGE);
    r.style.setProperty("--bs-primary-rgb", ORANGE_RGB);
    r.style.setProperty("--bs-link-color", ORANGE);
  }

  function injectGlobalCSS() {
    if (document.querySelector("style[data-global-orange]")) return;

    const style = document.createElement("style");
    style.setAttribute("data-global-orange", "true");
    style.textContent = `
      /* ===== GLOBAL ORANGE OVERRIDE ===== */

      /* Text + links */
      .text-primary,
      a,
      a:hover,
      .link-primary {
        color: ${ORANGE} !important;
      }

      /* Backgrounds */
      .bg-primary {
        background-color: ${ORANGE} !important;
      }

      /* Borders */
      .border-primary {
        border-color: ${ORANGE} !important;
      }

      /* Buttons */
      .btn-primary,
      .btn-outline-primary {
        background-color: ${ORANGE} !important;
        border-color: ${ORANGE} !important;
        color: #fff !important;
      }

      .btn-outline-primary {
        background-color: transparent !important;
        color: ${ORANGE} !important;
      }

      /* SVGs */
      svg {
        color: ${ORANGE};
      }

      /* Indicators, badges, pills */
      .badge,
      .indicator,
      .pulsating {
        background-color: ${ORANGE} !important;
        color: ${ORANGE} !important;
        border-color: ${ORANGE} !important;
      }

      /* Shadows & glow */
      .glow,
      .hover-glow:hover {
        box-shadow: 0 0 12px rgba(${ORANGE_RGB}, 0.6) !important;
      }

      /* Force override inline blue colors */
      [style*="rgb(0, 108, 186)"],
      [style*="#006cba"],
      [style*="rgba(0, 108, 186"] {
        color: ${ORANGE} !important;
        border-color: ${ORANGE} !important;
        background-color: rgba(${ORANGE_RGB}, 0.15) !important;
      }
    `;
    document.head.appendChild(style);
  }

  function recolorInlineSVGs() {
    document.querySelectorAll("svg[fill]").forEach(svg => {
      const fill = (svg.getAttribute("fill") || "").toLowerCase();
      if (
        fill.includes("000") ||
        fill.includes("006cba") ||
        fill.includes("blue")
      ) {
        svg.setAttribute("fill", ORANGE);
      }
    });
  }

  function applyAll() {
    applyVariables();
    injectGlobalCSS();
    recolorInlineSVGs();
  }

  /* Initial run */
  applyAll();

  /* Re-apply after builder reloads */
  const observer = new MutationObserver(() => applyAll());
  observer.observe(document.documentElement, {
    childList: true,
    subtree: true
  });
})();
</script>