myio-js-library 0.1.524 → 0.1.526

package/dist/index.cjs

@@ -402,6 +402,7 @@ __export(src_exports, {
   createFilterModalComponent: () => createFilterModalComponent,
   createFooterComponent: () => createFooterComponent,
   createFreshdeskTicket: () => createTicket,
+  createGoalsBarTooltip: () => createGoalsBarTooltip,
   createGranularitySelector: () => createGranularitySelector,
   createGroupScheduleCard: () => createGroupScheduleCard,
   createHeaderComponent: () => createHeaderComponent,
@@ -591,7 +592,7 @@ __export(src_exports, {
   injectBASDashboardStyles: () => injectBASDashboardStyles,
   injectCustomerCardV1Styles: () => injectCustomerCardV1Styles,
   injectCustomerCardV2Styles: () => injectCustomerCardV2Styles,
-  injectDeviceGridV6Styles: () => injectStyles16,
+  injectDeviceGridV6Styles: () => injectStyles17,
   injectDeviceOperationalCardGridStyles: () => injectDeviceOperationalCardGridStyles,
   injectDeviceOperationalCardStyles: () => injectDeviceOperationalCardStyles,
   injectExportButtonStyles: () => injectExportButtonStyles,
@@ -767,7 +768,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.524",
+  version: "0.1.526",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -3550,7 +3551,7 @@ var CSS_TOKENS = `
   --myio-spacing-lg: 24px;
   
   /* Typography */
-  --myio-font: 'Roboto', Arial, sans-serif;
+  --myio-font: 'Nunito', system-ui, sans-serif;
   --myio-font-size: 14px;
   --myio-font-size-sm: 12px;
   --myio-font-size-lg: 16px;
@@ -3876,7 +3877,7 @@ var DATERANGEPICKER_STYLES = `
    ========================================== */
 
 .daterangepicker {
-  font-family: 'Inter', 'Roboto', Arial, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   border: 1px solid #e0e0e0;
   border-radius: 10px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
@@ -5986,7 +5987,7 @@ function injectStyles() {
   const s = document.createElement("style");
   s.id = STYLE_ID;
   s.textContent = `
-  .myio-divcard { box-sizing: border-box; font-family: 'Nunito', sans-serif; border: 1px solid #e2e8f0;
+  .myio-divcard { box-sizing: border-box; font-family: 'Nunito', system-ui, sans-serif; border: 1px solid #e2e8f0;
     border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #fff; }
   .myio-divcard * { box-sizing: border-box; }
   .myio-divcard__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
@@ -6588,7 +6589,7 @@ function injectStyles2() {
   const s = document.createElement("style");
   s.id = STYLE_ID2;
   s.textContent = `
-  .mdp-root, .mdp-root * { box-sizing: border-box; font-family: 'Nunito', sans-serif; }
+  .mdp-root, .mdp-root * { box-sizing: border-box; font-family: 'Nunito', system-ui, sans-serif; }
   .mdp-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid #eee; }
   .mdp-tab { border: 1px solid transparent; border-bottom: none; background: none; cursor: pointer;
     font-size: 13px; font-weight: 700; color: #64748b; padding: 8px 14px; border-radius: 8px 8px 0 0; }
@@ -9319,7 +9320,7 @@ var CSS_STRING = `
   border-radius: var(--myio-card-radius);
   box-shadow: var(--myio-card-shadow);
   padding: 14px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   font-size: 14px;
   line-height: 1.4;
   color: var(--myio-text-1);
@@ -9566,7 +9567,7 @@ var CSS_STRING = `
   position: relative;
   min-width: 300px;
   text-align: left;
-  font-family: sans-serif; /* Use a fonte que preferir */
+  font-family: 'Nunito', system-ui, sans-serif; /* Use a fonte que preferir */
   line-height: 1.6;
 }
 
@@ -10180,7 +10181,7 @@ var CSS_STRING = `
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
   min-width: 340px;
   max-width: 420px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   font-size: 12px;
   color: #e2e8f0;
   overflow: hidden;
@@ -10372,7 +10373,7 @@ var CSS_STRING = `
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
   min-width: 280px;
   max-width: 320px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   font-size: 12px;
   color: #1e293b;
   overflow: hidden;
@@ -10606,7 +10607,7 @@ var CSS_STRING = `
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
   min-width: 300px;
   max-width: 360px;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   font-size: 12px;
   color: #1e293b;
   overflow: hidden;
@@ -17230,7 +17231,7 @@ function renderCardComponentV5({
               width: 320px;
               padding: 16px;
               border-radius: 8px;
-              font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+              font-family: 'Nunito', system-ui, sans-serif;
               font-size: 15px;
               color: #fff;
               transform: translateX(120%);
@@ -18923,7 +18924,7 @@ function injectCardActionSelectorStyles() {
       position: relative; width: 90%; max-width: 380px;
       background: #fff; border-radius: 16px; overflow: hidden;
       box-shadow: 0 20px 60px rgba(0,0,0,.3);
-      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       transform: translateY(16px) scale(.98); transition: transform .2s ease;
     }
     .myio-card-action-picker.show .myio-card-action-picker__content { transform: translateY(0) scale(1); }
@@ -19072,7 +19073,7 @@ function renderCardComponentV6({
         width: 320px;
         padding: 16px;
         border-radius: 8px;
-        font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
         font-size: 15px;
         color: #fff;
         transform: translateX(120%);
@@ -21216,7 +21217,7 @@ var HEADER_CSS = `
     flex-direction: column;
     flex-shrink: 0;
     box-sizing: border-box;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
 
   .myio-hp--top-border {
@@ -21752,7 +21753,7 @@ var PANEL_CSS = `
     background: #faf8f1;
     border: 1px solid #e8e4d9;
     overflow: hidden;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
     position: relative;
     height: 100%;
     min-width: 180px;
@@ -22283,7 +22284,7 @@ var PANEL_CSS2 = `
     background: #faf8f1;
     border: 1px solid #e8e4d9;
     overflow: hidden;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
     height: 100%;
     min-width: 0;
   }
@@ -23184,7 +23185,7 @@ var MyIOChartModalClass = class {
         max-width: 900px;
         margin: auto;
         color: #fff;
-        font-family: Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
         box-shadow: 0 8px 30px rgba(0,0,0,0.5);
       ">
       
@@ -23656,7 +23657,7 @@ var MyIOToast = (function() {
       padding: 16px 20px;
       background-color: #323232;
       color: white;
-      font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       font-size: 14px;
       border-radius: 8px;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
@@ -23851,7 +23852,8 @@ var DEFAULT_LOADING_CONFIG = {
   message: "Carregando dados...",
   spinnerType: "double",
   theme: "dark",
-  showTimer: false
+  showTimer: false,
+  showProgress: false
 };
 
 // src/components/loading-spinner/LoadingSpinner.ts
@@ -23866,11 +23868,15 @@ var LoadingSpinner = class {
   minDisplayTimeoutId = null;
   hidePending = false;
   theme;
+  progressElement = null;
+  progressFillElement = null;
+  progressLabelElement = null;
   styleElement = null;
   constructor(config2 = {}) {
     this.config = { ...DEFAULT_LOADING_CONFIG, ...config2 };
     this.theme = this.config.theme || "dark";
     this.container = this.ensureDOM();
+    this.applyAccent();
     this.updateTheme(this.theme);
     this.injectStyles();
     if (this.config.showTimer) {
@@ -23879,6 +23885,9 @@ var LoadingSpinner = class {
     if (this.config.message) {
       this.updateMessage(this.config.message);
     }
+    if (this.config.showProgress || this.config.progress != null) {
+      this.setProgress(this.config.progress ?? null);
+    }
   }
   /**
    * Ensures the main DOM element for the spinner exists in the body.
@@ -23886,27 +23895,57 @@ var LoadingSpinner = class {
   ensureDOM() {
     const BUSY_OVERLAY_ID = "myio-loading-spinner-overlay";
     let el2 = document.getElementById(BUSY_OVERLAY_ID);
-    if (el2) {
-      return el2;
+    if (!el2) {
+      el2 = document.createElement("div");
+      el2.id = BUSY_OVERLAY_ID;
+      el2.className = "myio-loading-spinner-overlay";
+      el2.style.display = "none";
+      const contentContainer = document.createElement("div");
+      contentContainer.className = "myio-loading-spinner-content";
+      contentContainer.innerHTML = `
+        <div class="myio-spinner-box">
+          <div class="myio-spinner-outer"></div>
+          <div class="myio-spinner-inner"></div>
+        </div>
+        <div class="myio-spinner-message">${this.config.message}</div>
+        <div class="myio-spinner-progress" style="display:none;">
+          <div class="myio-spinner-progress-track"><div class="myio-spinner-progress-fill"></div></div>
+          <div class="myio-spinner-progress-label"></div>
+        </div>
+      `;
+      el2.appendChild(contentContainer);
+      document.body.appendChild(el2);
     }
-    el2 = document.createElement("div");
-    el2.id = BUSY_OVERLAY_ID;
-    el2.className = "myio-loading-spinner-overlay";
-    el2.style.display = "none";
-    const contentContainer = document.createElement("div");
-    contentContainer.className = "myio-loading-spinner-content";
-    contentContainer.innerHTML = `
-      <div class="myio-spinner-box">
-        <div class="myio-spinner-outer"></div>
-        <div class="myio-spinner-inner"></div>
-      </div>
-      <div class="myio-spinner-message">${this.config.message}</div>
-    `;
-    el2.appendChild(contentContainer);
-    document.body.appendChild(el2);
     this.messageElement = el2.querySelector(".myio-spinner-message");
+    let progress = el2.querySelector(".myio-spinner-progress");
+    if (!progress) {
+      const content = el2.querySelector(".myio-loading-spinner-content");
+      if (content) {
+        progress = document.createElement("div");
+        progress.className = "myio-spinner-progress";
+        progress.style.display = "none";
+        progress.innerHTML = '<div class="myio-spinner-progress-track"><div class="myio-spinner-progress-fill"></div></div><div class="myio-spinner-progress-label"></div>';
+        content.appendChild(progress);
+      }
+    }
+    this.progressElement = progress;
+    this.progressFillElement = el2.querySelector(".myio-spinner-progress-fill");
+    this.progressLabelElement = el2.querySelector(".myio-spinner-progress-label");
     return el2;
   }
+  /**
+   * Resolves the accent color (config.accentColor → inherited `--myio-brand-700`
+   * → default purple) and stashes it on the overlay as `--myio-ls-accent`, which
+   * the spinner ring, progress fill and dark panel tint read from.
+   */
+  applyAccent() {
+    let accent = (this.config.accentColor || "").trim();
+    if (!accent && typeof document !== "undefined") {
+      accent = getComputedStyle(document.documentElement).getPropertyValue("--myio-brand-700").trim();
+    }
+    if (!accent) accent = "#7a2ff7";
+    this.container.style.setProperty("--myio-ls-accent", accent);
+  }
   /**
    * Inject necessary CSS styles for the spinner and overlay.
    */
@@ -23934,7 +23973,7 @@ var LoadingSpinner = class {
               .myio-spinner-inner {
                 width: 32px; height: 32px; border-width: 3px;
                 border-style: solid; border-radius: 50%;
-                border-color: rgba(122, 47, 247, 1) transparent rgba(122, 47, 247, 1) transparent;
+                border-color: var(--myio-ls-accent, #7a2ff7) transparent var(--myio-ls-accent, #7a2ff7) transparent;
                 position: absolute; top: 8px; left: 8px; /* Position inside outer */
                 animation: myio-spin-reverse 1.8s linear infinite;
               }
@@ -23995,7 +24034,7 @@ var LoadingSpinner = class {
         align-items: center;
         text-align: center;
         color: #ffffff;
-        font-family: Inter, system-ui, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
         font-size: 14px;
         line-height: 1.5;
         padding: 24px 32px;
@@ -24032,7 +24071,7 @@ var LoadingSpinner = class {
           border-color: rgba(45, 20, 88, 0.2) transparent rgba(45, 20, 88, 0.2) transparent;
       }
       .myio-loading-spinner-overlay.light .myio-spinner-inner {
-          border-color: rgba(122, 47, 247, 1) transparent rgba(122, 47, 247, 1) transparent;
+          border-color: var(--myio-ls-accent, #7a2ff7) transparent var(--myio-ls-accent, #7a2ff7) transparent;
       }
 
       /* Timer element styling */
@@ -24043,6 +24082,29 @@ var LoadingSpinner = class {
           text-align: center;
       }
       .myio-loading-spinner-overlay.light .myio-spinner-timer { color: #6b7280; }
+
+      /* Progress bar (determinate via setProgress(pct) / indeterminate when null) */
+      .myio-spinner-progress { width: 100%; min-width: 200px; margin-top: 16px; }
+      .myio-spinner-progress-track {
+        width: 100%; height: 6px; border-radius: 999px;
+        background: rgba(255, 255, 255, 0.18); overflow: hidden;
+      }
+      .myio-loading-spinner-overlay.light .myio-spinner-progress-track { background: rgba(0, 0, 0, 0.10); }
+      .myio-spinner-progress-fill {
+        height: 100%; width: 0%; border-radius: 999px;
+        background: var(--myio-ls-accent, #7a2ff7);
+        transition: width 0.3s ease;
+      }
+      .myio-spinner-progress.indeterminate .myio-spinner-progress-fill {
+        width: 40% !important; animation: myio-ls-indeterminate 1.2s ease-in-out infinite;
+      }
+      @keyframes myio-ls-indeterminate {
+        0% { margin-left: -40%; }
+        100% { margin-left: 100%; }
+      }
+      .myio-spinner-progress-label {
+        margin-top: 6px; font-size: 11px; font-weight: 600; opacity: 0.85; text-align: center;
+      }
     `;
   }
   /**
@@ -24116,7 +24178,7 @@ var LoadingSpinner = class {
     this.container.classList.add(theme);
     const content = this.container.querySelector(".myio-loading-spinner-content");
     if (content) {
-      content.style.background = theme === "dark" ? "#2d1458" : "#ffffff";
+      content.style.background = theme === "dark" ? "color-mix(in srgb, var(--myio-ls-accent, #7a2ff7) 22%, #14121c)" : "#ffffff";
       content.style.color = theme === "dark" ? "#ffffff" : "#1a1a2e";
     }
   }
@@ -24152,6 +24214,7 @@ var LoadingSpinner = class {
     this.isCurrentlyShowing = true;
     this.hidePending = false;
     this.startTime = Date.now();
+    this.applyAccent();
     this.container.style.display = "flex";
     requestAnimationFrame(() => {
       this.container.classList.add("show");
@@ -24219,6 +24282,26 @@ var LoadingSpinner = class {
       this.messageElement.textContent = message;
     }
   }
+  /**
+   * Updates the progress bar. `pct` 0–100 → determinate fill; `null` →
+   * indeterminate (animated) bar. `label` overrides the percentage text.
+   */
+  setProgress(pct, label) {
+    if (!this.progressElement || !this.progressFillElement) return;
+    this.progressElement.style.display = "block";
+    if (pct == null || Number.isNaN(Number(pct))) {
+      this.progressElement.classList.add("indeterminate");
+      this.progressFillElement.style.width = "";
+      if (this.progressLabelElement) this.progressLabelElement.textContent = label || "";
+    } else {
+      const clamped = Math.max(0, Math.min(100, Number(pct)));
+      this.progressElement.classList.remove("indeterminate");
+      this.progressFillElement.style.width = `${clamped}%`;
+      if (this.progressLabelElement) {
+        this.progressLabelElement.textContent = label != null ? label : `${Math.round(clamped)}%`;
+      }
+    }
+  }
   /**
    * Checks if spinner is currently visible
    * @returns true if spinner is showing
@@ -24236,6 +24319,11 @@ var LoadingSpinner = class {
     this.isCurrentlyShowing = false;
     this.hidePending = false;
     this.startTime = 0;
+    if (this.progressElement) {
+      this.progressElement.style.display = "none";
+      this.progressElement.classList.remove("indeterminate");
+    }
+    if (this.progressFillElement) this.progressFillElement.style.width = "0%";
     console.log("[LoadingSpinner] Instance destroyed (DOM kept for re-use)");
   }
 };
@@ -24260,7 +24348,7 @@ function injectStyles8(doc) {
       justify-content: center;
       align-items: center;
       gap: 6px;
-      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
     }
 
     /* Dark theme (default) */
@@ -24357,7 +24445,7 @@ function injectTooltipStyles(doc) {
     .myio-ver-tooltip-container {
       position: fixed;
       z-index: 999999;
-      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
     }
 
     /* Light theme tooltip (default) */
@@ -26727,7 +26815,7 @@ async function openRealTimeTelemetryModal(params) {
         border:1px solid #e2e8f0;
         box-shadow:0 10px 40px rgba(0,0,0,0.15),0 2px 10px rgba(0,0,0,0.08);
         min-width:240px;max-width:320px;overflow:hidden;
-        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
+        font-family:Nunito, system-ui, sans-serif;
         font-size:12px;color:#1e293b;
         user-select:none;
       }
@@ -26755,7 +26843,7 @@ async function openRealTimeTelemetryModal(params) {
         padding:4px 14px;font-size:12px;border-bottom:1px solid #f5f5f5;}
       .rtt-tt-history-row{display:flex;align-items:center;gap:6px;
         padding:5px 14px;font-size:12px;color:#374151;border-bottom:1px solid #f8fafc;
-        font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
+        font-family:Nunito, system-ui, sans-serif;}
       .rtt-tt-history-row:last-child{border-bottom:none;}
       .rtt-tt-row-ts{color:#bbb;}
       .rtt-tt-row-val{font-weight:600;}
@@ -28410,8 +28498,8 @@ var EnergyDataFetcher = class {
 // src/components/premium-modals/internal/engines/CsvExporter.ts
 var toCsv = (rows, locale = "pt-BR", sep = ";") => {
   const fmt2 = new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-  const esc5 = (v) => (typeof v === "number" ? fmt2.format(v) : String(v)).replace(/"/g, '""');
-  return rows.map((r) => r.map((c) => `"${esc5(c)}"`).join(sep)).join("\r\n");
+  const esc6 = (v) => (typeof v === "number" ? fmt2.format(v) : String(v)).replace(/"/g, '""');
+  return rows.map((r) => r.map((c) => `"${esc6(c)}"`).join(sep)).join("\r\n");
 };
 
 // src/utils/telemetryUtils.ts
@@ -28516,7 +28604,7 @@ var DEFAULT_STYLES = {
   spacingMd: "16px",
   spacingLg: "24px",
   spacingXl: "32px",
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  fontFamily: "Nunito, system-ui, sans-serif",
   fontSizeXs: "12px",
   fontSizeSm: "14px",
   fontSizeMd: "16px",
@@ -30067,7 +30155,7 @@ var DEFAULT_STYLES2 = {
   textColor: "#1f2937",
   borderColor: "#e5e7eb",
   borderRadius: "8px",
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontFamily: "Nunito, system-ui, sans-serif",
   modalWidth: "90vw",
   modalHeight: "90vh"
 };
@@ -32187,7 +32275,7 @@ var EnergyModalView = class {
   getModalStyles() {
     const styles = this.config.params.styles || {};
     const defaultPrimary = styles.primaryColor || "#4A148C";
-    const defaultFont = styles.fontFamily || '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+    const defaultFont = styles.fontFamily || "Nunito, system-ui, sans-serif";
     return `
       /* --- VARI\xC1VEIS DE TEMA (LIGHT MODE - PADR\xC3O) --- */
       .myio-energy-modal-scope {
@@ -33377,7 +33465,7 @@ function injectParticipationChartStyles() {
       border-radius: 10px;
       background: var(--mpc-bg, var(--mpc-bg-default));
       color: var(--mpc-text, var(--mpc-text-default));
-      font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       font-size: 13px;
     }
     .${P2} * { box-sizing: border-box; }
@@ -33877,7 +33965,7 @@ function createParticipationChart(container, params) {
         text2.setAttribute("fill", "#ffffff");
         text2.setAttribute("font-size", "12");
         text2.setAttribute("font-weight", "700");
-        text2.setAttribute("font-family", "Inter, 'Segoe UI', system-ui, sans-serif");
+        text2.setAttribute("font-family", "'Nunito', system-ui, sans-serif");
         text2.setAttribute("pointer-events", "none");
         text2.textContent = fmtPct(pct);
         svg.appendChild(text2);
@@ -33909,7 +33997,7 @@ function createParticipationChart(container, params) {
       label.setAttribute("text-anchor", "end");
       label.setAttribute("fill", textColor);
       label.setAttribute("font-size", "11");
-      label.setAttribute("font-family", "Inter, 'Segoe UI', system-ui, sans-serif");
+      label.setAttribute("font-family", "'Nunito', system-ui, sans-serif");
       const raw = item.label || "";
       label.textContent = raw.length > 18 ? `${raw.slice(0, 17)}\u2026` : raw;
       svg.appendChild(label);
@@ -33930,7 +34018,7 @@ function createParticipationChart(container, params) {
       value.setAttribute("text-anchor", "start");
       value.setAttribute("fill", mutedColor);
       value.setAttribute("font-size", "10.5");
-      value.setAttribute("font-family", "Inter, 'Segoe UI', system-ui, sans-serif");
+      value.setAttribute("font-family", "'Nunito', system-ui, sans-serif");
       value.textContent = `${settings.formatValue(item.value)}${settings.unit ? ` ${settings.unit}` : ""} \xB7 ${fmtPct(pct)}`;
       svg.appendChild(value);
     });
@@ -37597,10 +37685,10 @@ var WaterTankModalView = class {
    */
   render() {
     const { params } = this.config;
-    const STYLE_ID13 = "myio-water-tank-modal-styles";
-    if (!document.getElementById(STYLE_ID13)) {
+    const STYLE_ID14 = "myio-water-tank-modal-styles";
+    if (!document.getElementById(STYLE_ID14)) {
       const style = document.createElement("style");
-      style.id = STYLE_ID13;
+      style.id = STYLE_ID14;
       style.textContent = `
         @media (max-width: 640px) {
           .myio-water-tank-modal { width: 100vw !important; max-width: 100vw !important; max-height: 100vh !important; border-radius: 0 !important; }
@@ -39767,7 +39855,7 @@ var PowerLimitsModalView = class {
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
-        font-family: ${styles.fontFamily || "'Roboto', Arial, sans-serif"};
+        font-family: ${styles.fontFamily || "'Nunito', system-ui, sans-serif"};
       }
 
       .myio-power-limits-overlay.active {
@@ -41326,7 +41414,7 @@ var WelcomeModalView = class _WelcomeModalView {
    RFC-0112: Welcome Modal Head Office
    ========================================== */
 
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');
 
 /* CSS Reset to isolate modal from parent styles */
 .myio-welcome-modal,
@@ -41361,7 +41449,7 @@ var WelcomeModalView = class _WelcomeModalView {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+  font-family: 'Nunito', system-ui, sans-serif !important;
   font-size: 16px !important;
   line-height: 1.5 !important;
   font-weight: 400 !important;
@@ -43242,12 +43330,12 @@ var WelcomeModalView = class _WelcomeModalView {
     if (this.metaTipEl) this.metaTipEl.style.display = "none";
   }
   buildMetaTipHtml(type, card) {
-    const esc5 = _WelcomeModalView.escapeMetaHtml;
+    const esc6 = _WelcomeModalView.escapeMetaHtml;
     const chip = _WelcomeModalView.metaChip;
     const meta = card.metaCounts || {};
     const details = card.metaDetails || {};
     const loadingBody = '<div style="opacity:.7;padding:6px 0">Carregando\u2026</div>';
-    const header = (icon, label, count) => `<div style="font-weight:800;font-size:13px;margin-bottom:8px">${icon} ${label}${count === null || count === void 0 ? "" : ` (${count})`} \u2014 ${esc5(card.title)}</div>`;
+    const header = (icon, label, count) => `<div style="font-weight:800;font-size:13px;margin-bottom:8px">${icon} ${label}${count === null || count === void 0 ? "" : ` (${count})`} \u2014 ${esc6(card.title)}</div>`;
     const row = (titleHtml, subHtml) => `<div style="padding:6px 0;border-top:1px solid #334155">
          <div style="font-weight:600">${titleHtml}</div>
          ${subHtml ? `<div style="opacity:.7">${subHtml}</div>` : ""}
@@ -43263,8 +43351,8 @@ var WelcomeModalView = class _WelcomeModalView {
       const chips = Object.entries(byState).map(([s, n]) => chip(`${s}: ${n}`)).join("") || '<span style="opacity:.7">Sem alarmes ativos</span>';
       const rows = alarms.slice(0, 10).map(
         (a) => row(
-          esc5(a.deviceName ? `${a.deviceName} \u2014 ${a.title || "Alarme"}` : a.title || "Alarme"),
-          `${esc5(a.severity || "")} \xB7 ${esc5(a.state || "")}`
+          esc6(a.deviceName ? `${a.deviceName} \u2014 ${a.title || "Alarme"}` : a.title || "Alarme"),
+          `${esc6(a.severity || "")} \xB7 ${esc6(a.state || "")}`
         )
       ).join("");
       return `${header("\u{1F6A8}", "Alarmes", meta.alarms ?? alarms.length)}<div style="margin-bottom:6px">${chips}</div>${rows}`;
@@ -43284,14 +43372,14 @@ var WelcomeModalView = class _WelcomeModalView {
       const rows = annotations.slice(0, 10).map((a) => {
         const when = a.createdAt ? new Date(a.createdAt).toLocaleDateString("pt-BR") : "";
         const text2 = a.text.length > 90 ? `${a.text.slice(0, 90)}\u2026` : a.text;
-        return row(esc5(a.deviceLabel || "Dispositivo"), `${esc5(text2)}${when ? ` \xB7 ${esc5(when)}` : ""}`);
+        return row(esc6(a.deviceLabel || "Dispositivo"), `${esc6(text2)}${when ? ` \xB7 ${esc6(when)}` : ""}`);
       }).join("");
       return `${header("\u{1F4CB}", "Anota\xE7\xF5es", meta.annotations ?? annotations.length)}<div style="margin-bottom:6px">${chips}</div>${rows}`;
     }
     if (type === "users") {
       if (meta.users === null) return header("\u{1F465}", "Usu\xE1rios") + loadingBody;
       const users = details.users || [];
-      const rows = users.slice(0, 10).map((u) => row(esc5(u.name), esc5(u.email || ""))).join("") || '<div style="opacity:.7;padding:6px 0">Sem usu\xE1rios</div>';
+      const rows = users.slice(0, 10).map((u) => row(esc6(u.name), esc6(u.email || ""))).join("") || '<div style="opacity:.7;padding:6px 0">Sem usu\xE1rios</div>';
       const more = users.length > 10 ? `<div style="opacity:.7;padding:6px 0 0">\u2026 e mais ${users.length - 10}</div>` : "";
       return `${header("\u{1F465}", "Usu\xE1rios", meta.users ?? users.length)}${rows}${more}`;
     }
@@ -44398,7 +44486,7 @@ var HeaderView = class {
   height: 100%;
   padding: 8px 12px 4px 12px;
   box-sizing: border-box;
-  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   color: var(--hdr-ink-1);
   background: transparent;
 }
@@ -45199,7 +45287,7 @@ var HeaderFilterModal = class {
   justify-content: center;
   align-items: center;
   z-index: 10000;
-  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 
 .${HEADER_CSS_PREFIX}-filter-backdrop {
@@ -46171,7 +46259,7 @@ function getStyles() {
   --fc-empty-border: rgba(184, 165, 214, 0.4);
 
   /* Static tokens */
-  --fc-font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --fc-font-family: 'Nunito', system-ui, sans-serif;
   --fc-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
   --fc-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
   --fc-radius-sm: 6px;
@@ -47300,7 +47388,7 @@ function render(container, modalId, state6) {
         max-height: ${state6.isMaximized ? "100%" : "92vh"};
         display: flex; flex-direction: column; overflow: hidden;
         border: 1px solid ${colors2.border};
-        font-family: 'Roboto', Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       }
       #${modalId} .myio-alarm-compare-header {
         background: #3e1a7d; color: white;
@@ -47716,7 +47804,7 @@ function render2(container, modalId, state6) {
         display: flex; flex-direction: column; overflow: hidden;
         border: 1px solid ${colors2.border};
         border-radius: 12px;
-        font-family: 'Roboto', Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
       }
       #${modalId} .myio-op-compare-content.maximized {
@@ -48868,7 +48956,7 @@ var MODAL_CSS = `
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'Roboto', Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
 
   .myio-integrations-modal {
@@ -49346,7 +49434,7 @@ var ANNOTATIONS_STYLES = `
   display: flex;
   flex-direction: column;
   height: 100%;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   color: #1a1a2e;
   padding: 4px;
 }
@@ -51803,7 +51891,7 @@ var ANNOTATIONS_STYLES = `
   max-width: 340px;
   min-width: 280px;
   animation: annotationTourSlideIn 0.3s ease;
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 
 @keyframes annotationTourSlideIn {
@@ -57527,7 +57615,7 @@ function openAlarmDetailsModal(alarm, themeMode = "light", groupMode, onAction)
       const sumTbl = grid.querySelector(".adm-rpt-table-wrap--summary")?.outerHTML ?? "";
       win.document.write(`<!DOCTYPE html><html><head><title>Relat\xF3rio \u2014 ${escHtml2(alarm.title)}</title>
         <style>
-          body{font-family:Arial,sans-serif;padding:24px;font-size:12px;color:#111;}
+          body{font-family:Nunito, system-ui, sans-serif;padding:24px;font-size:12px;color:#111;}
           h2{font-size:15px;margin:0 0 4px;}p{color:#6b7280;font-size:11px;margin:0 0 16px;}
           h3{font-size:12px;font-weight:700;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.5px;color:#7c3aed;}
           table{border-collapse:collapse;width:100%;margin-bottom:16px;}
@@ -57800,7 +57888,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
    Container
    ===================================================================== */
 .myio-alarms-panel {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   font-size: 12px;
   line-height: 1.4;
   color: var(--alarms-text);
@@ -59388,7 +59476,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
 .alarms-trend-chart .chart-label {
   font-size: 10px;
   fill: var(--alarms-text-muted);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 
 .alarms-trend-legend {
@@ -59942,7 +60030,7 @@ var ALARMS_NOTIFICATIONS_PANEL_STYLES = `
   display: block;
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   font-size: 15px;
   font-weight: 700;
   color: #111827;
@@ -63301,7 +63389,7 @@ var AlarmsTab = class {
   }
   showToast(msg) {
     const el2 = document.createElement("div");
-    el2.style.cssText = "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;z-index:99999;box-shadow:0 4px 12px rgba(0,0,0,0.25);pointer-events:none;font-family:Inter,system-ui,-apple-system,sans-serif;white-space:nowrap;";
+    el2.style.cssText = "position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#dc2626;color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:8px;z-index:99999;box-shadow:0 4px 12px rgba(0,0,0,0.25);pointer-events:none;font-family:Nunito, system-ui, sans-serif;white-space:nowrap;";
     el2.textContent = `\u26A0\uFE0F ${msg}`;
     document.body.appendChild(el2);
     setTimeout(() => el2.remove(), 4e3);
@@ -63342,7 +63430,7 @@ var AlarmsTab = class {
         flex-direction: column;
         gap: 20px;
         padding: 4px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       }
       .at-section {
         background: #fff;
@@ -63613,7 +63701,7 @@ var AlarmsTab = class {
         max-width: 440px;
         width: calc(100% - 32px);
         overflow: hidden;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       }
       .at-confirm-warning-bar {
         height: 4px;
@@ -65187,10 +65275,10 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
   // Styles
   // ==========================================================================
   injectStyles() {
-    const STYLE_ID13 = "myio-tickets-tab-styles";
-    if (document.getElementById(STYLE_ID13)) return;
+    const STYLE_ID14 = "myio-tickets-tab-styles";
+    if (document.getElementById(STYLE_ID14)) return;
     const style = document.createElement("style");
-    style.id = STYLE_ID13;
+    style.id = STYLE_ID14;
     style.textContent = `
       /* ===== TicketsTab layout ===== */
       .ct-tab {
@@ -65198,7 +65286,7 @@ ${this._formatFileSize(f.size)} \xB7 ${f.type || "arquivo"}`;
         flex-direction: column;
         gap: 20px;
         padding: 4px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       }
       .ct-section {
         background: #fff;
@@ -66781,7 +66869,7 @@ var SettingsModalView = class {
           align-items: center;
           justify-content: center;
           z-index: 9999999;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-family: 'Nunito', system-ui, sans-serif;
         }
         
         .myio-device-settings-modal {
@@ -69507,7 +69595,7 @@ async function openDashboardPopupSettings(params) {
 // src/components/createInputDateRangePickerInsideDIV.ts
 var PREMIUM_STYLES = `
   .myio-daterange-wrapper {
-    font-family: 'Roboto', Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
     background: #f9f9f9;
     padding: 20px;
     border-radius: 8px;
@@ -69638,7 +69726,7 @@ async function createInputDateRangePickerInsideDIV(params) {
     placeholder = "Clique para selecionar per\xEDodo",
     pickerOptions = {},
     classNames = {},
-    injectStyles: injectStyles20 = true,
+    injectStyles: injectStyles21 = true,
     showHelper = true
   } = params;
   validateId(containerId, "containerId");
@@ -69647,7 +69735,7 @@ async function createInputDateRangePickerInsideDIV(params) {
   if (!container) {
     throw new Error(`[createInputDateRangePickerInsideDIV] Container '#${containerId}' not found`);
   }
-  if (injectStyles20) {
+  if (injectStyles21) {
     injectPremiumStyles();
   }
   let inputEl = document.getElementById(inputId);
@@ -69843,7 +69931,7 @@ function openGoalsPanel(params) {
     danger: styles.errorColor || "#dc2626",
     amber: styles.warningColor || "#d97706",
     borderRadius: styles.borderRadius || "10px",
-    fontFamily: styles.fontFamily || "'Nunito', 'Roboto', Arial, sans-serif",
+    fontFamily: styles.fontFamily || "'Nunito', system-ui, sans-serif",
     zIndex: styles.zIndex || 1e4
   };
   const MODAL_ID6 = "goals-gcdr-modal";
@@ -70366,7 +70454,7 @@ function openGoalsPanel(params) {
     rootEl.setAttribute("role", "dialog");
     rootEl.setAttribute("aria-modal", "true");
     container.appendChild(rootEl);
-    injectStyles20();
+    injectStyles21();
     rootEl.addEventListener("click", onClick);
     rootEl.addEventListener("change", onChange);
     rootEl.addEventListener("input", onInput);
@@ -71021,7 +71109,7 @@ ${state6.year}-03-15T08,15`)}">${esc3(state6.csv)}</textarea>
         return "";
     }
   }
-  function injectStyles20() {
+  function injectStyles21() {
     const id = "myio-goals-gcdr-styles";
     const prev = document.getElementById(id);
     if (prev) prev.remove();
@@ -71541,7 +71629,7 @@ function renderModal(container, state6, modalId, error) {
         max-height: ${contentMaxHeight}; height: ${isMaximized ? "100%" : "auto"};
         overflow: hidden; display: flex; flex-direction: column;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        font-family: 'Roboto', Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       ">
         <!-- Header - MyIO Premium Style (via ModalHeader component) -->
         ${ModalHeader.generateInlineHTML({
@@ -71648,7 +71736,7 @@ function renderModal(container, state6, modalId, error) {
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
-            font-family: 'Roboto', Arial, sans-serif;
+            font-family: 'Nunito', system-ui, sans-serif;
           " ${state6.isLoading ? "disabled" : ""}>
             ${state6.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
@@ -71735,7 +71823,7 @@ function renderModal(container, state6, modalId, error) {
             color: ${colors2.text}; border: 1px solid ${colors2.border};
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; display: flex; align-items: center; gap: 8px;
-            font-family: 'Roboto', Arial, sans-serif;
+            font-family: 'Nunito', system-ui, sans-serif;
           " ${state6.data.length === 0 ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
@@ -71743,7 +71831,7 @@ function renderModal(container, state6, modalId, error) {
             background: #3e1a7d; color: white; border: none;
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; font-weight: 500;
-            font-family: 'Roboto', Arial, sans-serif;
+            font-family: 'Nunito', system-ui, sans-serif;
           ">
             Fechar
           </button>
@@ -72319,7 +72407,7 @@ function renderModal2(container, state6, modalId) {
         max-height: ${contentMaxHeight}; height: ${isMaximized ? "100%" : "auto"};
         overflow: hidden; display: flex; flex-direction: column;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        font-family: 'Roboto', Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       ">
         <!-- Header - MyIO Premium Style -->
         <div style="
@@ -72443,7 +72531,7 @@ function renderModal2(container, state6, modalId) {
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
-            font-family: 'Roboto', Arial, sans-serif;
+            font-family: 'Nunito', system-ui, sans-serif;
           " ${state6.isLoading ? "disabled" : ""}>
             ${state6.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
@@ -72490,7 +72578,7 @@ function renderModal2(container, state6, modalId) {
             color: ${colors2.text}; border: 1px solid ${colors2.border};
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; display: flex; align-items: center; gap: 8px;
-            font-family: 'Roboto', Arial, sans-serif;
+            font-family: 'Nunito', system-ui, sans-serif;
           " ${state6.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
@@ -72498,7 +72586,7 @@ function renderModal2(container, state6, modalId) {
             background: #3e1a7d; color: white; border: none;
             padding: 8px 16px; border-radius: 6px; cursor: pointer;
             font-size: 14px; font-weight: 500;
-            font-family: 'Roboto', Arial, sans-serif;
+            font-family: 'Nunito', system-ui, sans-serif;
           ">
             Fechar
           </button>
@@ -73183,7 +73271,7 @@ function renderModal3(container, state6, modalId, onClose, onSave) {
         font-size: 14px;
         font-weight: 600;
         color: #fff;
-        font-family: 'Roboto', sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
         display: flex;
         align-items: center;
         gap: 8px;
@@ -77757,13 +77845,13 @@ var COLUMN_SUMMARY_CSS = `
 var _cssInjected2 = false;
 function injectCSS10() {
   if (_cssInjected2 || typeof document === "undefined") return;
-  const STYLE_ID13 = "myio-column-summary-tooltip-css";
-  if (document.getElementById(STYLE_ID13)) {
+  const STYLE_ID14 = "myio-column-summary-tooltip-css";
+  if (document.getElementById(STYLE_ID14)) {
     _cssInjected2 = true;
     return;
   }
   const style = document.createElement("style");
-  style.id = STYLE_ID13;
+  style.id = STYLE_ID14;
   style.textContent = COLUMN_SUMMARY_CSS;
   document.head.appendChild(style);
   _cssInjected2 = true;
@@ -82767,7 +82855,7 @@ function createModalHeader(config2) {
           color: ${textColor};
           border-radius: ${borderRadius};
           min-height: 20px;
-          font-family: 'Roboto', Arial, sans-serif;
+          font-family: 'Nunito', system-ui, sans-serif;
         ">
           <h2 id="${config2.id}-header-title" style="
             margin: 6px;
@@ -84032,7 +84120,7 @@ function getWidgetStyles(theme, primaryColor, headerStyles) {
   };
   return `
     .myio-chart-widget {
-      font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       background: ${colors2.chartBackground};
       border: 1px solid ${colors2.border};
       border-radius: 16px;
@@ -84857,7 +84945,7 @@ function createConsumptionChartWidget(config2) {
       </div>
     `;
   }
-  function injectStyles20() {
+  function injectStyles21() {
     if (styleElement) return;
     styleElement = document.createElement("style");
     styleElement.id = `${widgetId}-styles`;
@@ -85371,7 +85459,7 @@ function createConsumptionChartWidget(config2) {
         console.error(`[ConsumptionWidget] Container #${config2.containerId} not found`);
         return;
       }
-      injectStyles20();
+      injectStyles21();
       containerElement.innerHTML = renderHTML();
       setupListeners();
       applyCollapseState();
@@ -85504,6 +85592,368 @@ function createConsumptionChartWidget(config2) {
   return instance;
 }
 
+// src/components/tooltips/goals-bar-tooltip/createGoalsBarTooltip.ts
+var STYLE_ID5 = "myio-goals-bar-tooltip-styles";
+var DEFAULT_ACCENT = "#6c5ce7";
+function injectStyles11(doc) {
+  if (doc.getElementById(STYLE_ID5)) return;
+  const s = doc.createElement("style");
+  s.id = STYLE_ID5;
+  s.textContent = `
+.myio-gbt {
+  position: fixed;
+  z-index: 100000;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none; /* unpinned: never blocks the chart hover */
+  transition: opacity .15s ease;
+  font-family: 'Nunito', system-ui, sans-serif;
+}
+.myio-gbt.myio-gbt--visible { opacity: 1; }
+/* Header stays clickable even while unpinned, so the \u{1F4CC} pin is reachable as the
+   cursor travels off the chart onto the tooltip (a short grace hide covers the gap). */
+.myio-gbt .myio-gbt__header { pointer-events: auto; }
+.myio-gbt.myio-gbt--pinned { pointer-events: auto; } /* fully interactive when pinned */
+
+.myio-gbt__card {
+  background: #ffffff;
+  border: 1px solid #e6e8ef;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(2,6,23,.18), 0 2px 8px rgba(2,6,23,.08);
+  min-width: 250px;
+  max-width: 360px;
+  overflow: hidden;
+  color: #1e293b;
+  font-size: 12px;
+}
+
+.myio-gbt__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  background: linear-gradient(90deg,
+    color-mix(in srgb, var(--myio-gbt-accent) 14%, #fff) 0%,
+    color-mix(in srgb, var(--myio-gbt-accent) 6%, #fff) 100%);
+  border-bottom: 1px solid color-mix(in srgb, var(--myio-gbt-accent) 30%, #fff);
+}
+.myio-gbt__title-wrap { flex: 1; min-width: 0; }
+.myio-gbt__title {
+  font-weight: 800;
+  font-size: 13px;
+  color: var(--myio-gbt-accent);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.myio-gbt__subtitle {
+  font-size: 10.5px;
+  color: #64748b;
+  margin-top: 1px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.myio-gbt__btn {
+  width: 22px;
+  height: 22px;
+  border: none;
+  background: rgba(255,255,255,.55);
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  line-height: 1;
+  color: #64748b;
+  transition: background .12s ease, color .12s ease, transform .12s ease;
+  flex-shrink: 0;
+}
+.myio-gbt__btn:hover { background: rgba(255,255,255,.95); color: #1e293b; }
+.myio-gbt__btn--pin.is-pinned {
+  background: var(--myio-gbt-accent);
+  color: #fff;
+  transform: rotate(-8deg);
+}
+.myio-gbt__btn--close { display: none; }
+.myio-gbt.myio-gbt--pinned .myio-gbt__btn--close { display: flex; }
+
+.myio-gbt__body {
+  padding: 6px 8px 8px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
+.myio-gbt__row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 6px;
+  border-radius: 7px;
+}
+.myio-gbt__row:hover { background: #f5f6fb; }
+.myio-gbt__row--child { padding-top: 4px; padding-bottom: 4px; }
+.myio-gbt__row--child .myio-gbt__label { font-weight: 500; color: #475569; }
+.myio-gbt__row--child .myio-gbt__value { font-weight: 600; }
+
+.myio-gbt__caret {
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: transparent;
+  color: var(--myio-gbt-accent);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  flex-shrink: 0;
+  transition: transform .12s ease;
+  user-select: none;
+}
+.myio-gbt__caret.is-open { transform: rotate(90deg); }
+.myio-gbt__caret-spacer { width: 16px; flex-shrink: 0; }
+
+.myio-gbt__swatch {
+  width: 9px;
+  height: 9px;
+  border-radius: 3px;
+  flex-shrink: 0;
+}
+.myio-gbt__icon { font-size: 12px; flex-shrink: 0; }
+.myio-gbt__label {
+  flex: 1;
+  min-width: 0;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.myio-gbt__value {
+  font-weight: 800;
+  color: #0f172a;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+.myio-gbt__pct {
+  min-width: 46px;
+  text-align: right;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--myio-gbt-accent);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+/* Deviation chip (pill) \u2014 good/bad/neutral. Right-aligned, roughly fixed width so
+   the value column above lines up cleanly. */
+.myio-gbt__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  justify-content: flex-end;
+  min-width: 66px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 10.5px;
+  font-weight: 800;
+  line-height: 1.5;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+.myio-gbt__chip--good { background: rgba(22,163,74,.12); color: #16a34a; }
+.myio-gbt__chip--bad { background: rgba(239,68,68,.12); color: #ef4444; }
+.myio-gbt__chip--neutral { background: rgba(100,116,139,.12); color: #64748b; }
+.myio-gbt__children {
+  display: none;
+  margin-left: 10px;
+  padding-left: 6px;
+  border-left: 2px solid color-mix(in srgb, var(--myio-gbt-accent) 22%, #fff);
+}
+.myio-gbt__children.is-open { display: block; }
+
+.myio-gbt__empty {
+  padding: 10px;
+  text-align: center;
+  color: #94a3b8;
+  font-style: italic;
+}
+`;
+  (doc.head || doc.documentElement).appendChild(s);
+}
+function esc5(v) {
+  return String(v ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function fmtPct3(pct) {
+  if (pct == null || !isFinite(pct)) return "";
+  return `${pct.toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 })}%`;
+}
+function resolveAccent(explicit, doc) {
+  if (explicit) return explicit;
+  try {
+    const v = getComputedStyle(doc.documentElement).getPropertyValue("--myio-brand-700").trim();
+    if (v) return v;
+  } catch {
+  }
+  return DEFAULT_ACCENT;
+}
+var _rowSeq = 0;
+function renderDeltaChip(delta) {
+  const tone = delta.tone === "good" ? "good" : delta.tone === "bad" ? "bad" : "neutral";
+  const arrow = delta.arrow === "up" ? "\u2191" : delta.arrow === "down" ? "\u2193" : "\u2248";
+  const pctTxt = fmtPct3(Math.abs(Number(delta.pct)));
+  const txt = delta.text ? ` ${esc5(delta.text)}` : "";
+  return `<span class="myio-gbt__chip myio-gbt__chip--${tone}">${arrow} ${esc5(pctTxt)}${txt}</span>`;
+}
+function renderRow(row, level) {
+  const hasChildren = Array.isArray(row.children) && row.children.length > 0;
+  const open = !!row.defaultExpanded;
+  const id = `gbtr-${++_rowSeq}`;
+  const pct = row.pct;
+  const caret = hasChildren ? `<button class="myio-gbt__caret${open ? " is-open" : ""}" data-caret="${id}" title="Expandir/recolher">\u25B8</button>` : `<span class="myio-gbt__caret-spacer"></span>`;
+  const swatch = row.color ? `<span class="myio-gbt__swatch" style="background:${esc5(row.color)}"></span>` : "";
+  const icon = row.icon ? `<span class="myio-gbt__icon">${esc5(row.icon)}</span>` : "";
+  const chipHtml = row.delta ? renderDeltaChip(row.delta) : "";
+  const pctHtml = !row.delta && pct != null && isFinite(pct) ? `<span class="myio-gbt__pct">${esc5(fmtPct3(pct))}</span>` : "";
+  const rowClass = level > 0 ? "myio-gbt__row myio-gbt__row--child" : "myio-gbt__row";
+  let html = `<div class="${rowClass}">` + caret + swatch + icon + `<span class="myio-gbt__label">${esc5(row.label)}</span><span class="myio-gbt__value">${esc5(row.valueText)}</span>` + chipHtml + pctHtml + `</div>`;
+  if (hasChildren) {
+    const childHtml = row.children.map((c) => renderRow(c, level + 1)).join("");
+    html += `<div class="myio-gbt__children${open ? " is-open" : ""}" data-children="${id}">${childHtml}</div>`;
+  }
+  return html;
+}
+function createGoalsBarTooltip(opts) {
+  const doc = (() => {
+    try {
+      return (window.top || window).document;
+    } catch {
+      return document;
+    }
+  })();
+  injectStyles11(doc);
+  const el2 = doc.createElement("div");
+  el2.className = "myio-gbt";
+  el2.style.setProperty("--myio-gbt-accent", resolveAccent(opts?.accentColor, doc));
+  doc.body.appendChild(el2);
+  let pinned = false;
+  let hideTimer = null;
+  const clearHideTimer = () => {
+    if (hideTimer) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+  };
+  el2.addEventListener("mouseenter", clearHideTimer);
+  el2.addEventListener("mouseleave", () => {
+    if (!pinned) hide();
+  });
+  function positionAt(clientX, clientY) {
+    const rect = el2.getBoundingClientRect();
+    const w = rect.width || 280;
+    const h2 = rect.height || 200;
+    const pad = 12;
+    const gap = 16;
+    let left = clientX + gap;
+    let top = clientY + gap;
+    if (left + w > window.innerWidth - pad) left = clientX - w - gap;
+    if (left < pad) left = Math.max(pad, (window.innerWidth - w) / 2);
+    if (top + h2 > window.innerHeight - pad) top = clientY - h2 - gap;
+    if (top < pad) top = pad;
+    if (top + h2 > window.innerHeight - pad) top = Math.max(pad, window.innerHeight - h2 - pad);
+    el2.style.left = `${Math.round(left)}px`;
+    el2.style.top = `${Math.round(top)}px`;
+  }
+  function wireInteractions() {
+    const pinBtn = el2.querySelector('[data-action="pin"]');
+    pinBtn?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      pinned = !pinned;
+      el2.classList.toggle("myio-gbt--pinned", pinned);
+      pinBtn.classList.toggle("is-pinned", pinned);
+      pinBtn.title = pinned ? "Desafixar" : "Fixar na tela";
+    });
+    const closeBtn = el2.querySelector('[data-action="close"]');
+    closeBtn?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      pinned = false;
+      el2.classList.remove("myio-gbt--pinned");
+      hide(true);
+    });
+    el2.querySelectorAll("[data-caret]").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const id = btn.dataset.caret;
+        const kids = el2.querySelector(`[data-children="${id}"]`);
+        if (!kids) return;
+        const isOpen = kids.classList.toggle("is-open");
+        btn.classList.toggle("is-open", isOpen);
+      });
+    });
+  }
+  function render3(data) {
+    const accent = resolveAccent(data.accentColor ?? opts?.accentColor, doc);
+    el2.style.setProperty("--myio-gbt-accent", accent);
+    const rowsHtml = data.rows && data.rows.length > 0 ? data.rows.map((r) => renderRow(r, 0)).join("") : `<div class="myio-gbt__empty">Sem dados para este per\xEDodo</div>`;
+    el2.innerHTML = `
+      <div class="myio-gbt__card">
+        <div class="myio-gbt__header">
+          <div class="myio-gbt__title-wrap">
+            <div class="myio-gbt__title">${esc5(data.title)}</div>
+            ${data.subtitle ? `<div class="myio-gbt__subtitle">${esc5(data.subtitle)}</div>` : ""}
+          </div>
+          <button class="myio-gbt__btn myio-gbt__btn--pin${pinned ? " is-pinned" : ""}" data-action="pin" title="${pinned ? "Desafixar" : "Fixar na tela"}">\u{1F4CC}</button>
+          <button class="myio-gbt__btn myio-gbt__btn--close" data-action="close" title="Fechar">\u2715</button>
+        </div>
+        <div class="myio-gbt__body">${rowsHtml}</div>
+      </div>`;
+    if (pinned) el2.classList.add("myio-gbt--pinned");
+    wireInteractions();
+  }
+  function show(data, evt) {
+    clearHideTimer();
+    if (pinned) return;
+    render3(data);
+    el2.classList.add("myio-gbt--visible");
+    const x = evt && typeof evt.clientX === "number" ? evt.clientX : window.innerWidth / 2;
+    const y = evt && typeof evt.clientY === "number" ? evt.clientY : window.innerHeight / 2;
+    positionAt(x, y);
+    requestAnimationFrame(() => {
+      if (!pinned) positionAt(x, y);
+    });
+  }
+  function hide(force) {
+    if (pinned && !force) return;
+    if (force) {
+      clearHideTimer();
+      el2.classList.remove("myio-gbt--visible");
+      return;
+    }
+    clearHideTimer();
+    hideTimer = setTimeout(() => {
+      if (!pinned) el2.classList.remove("myio-gbt--visible");
+      hideTimer = null;
+    }, 450);
+  }
+  function destroy() {
+    clearHideTimer();
+    try {
+      el2.remove();
+    } catch {
+    }
+  }
+  return {
+    show,
+    hide,
+    isPinned: () => pinned,
+    destroy
+  };
+}
+
 // src/components/goals-modal/GoalsModal.ts
 var DOMAIN_CFG = {
   energy: {
@@ -85513,20 +85963,22 @@ var DOMAIN_CFG = {
     unitLarge: "MWh",
     threshold: 1e3,
     primaryColor: "#3e1a7d",
-    barColor: "#6c5ce7",
-    barColorAlpha: "rgba(108,92,231,0.15)",
-    goalColor: "#f97316",
-    goalColorAlpha: "rgba(249,115,22,0.12)"
+    // Esquema padrão das Metas: Realizado AZUL fixo #2563eb, Meta ROXO #7c3aed.
+    barColor: "#2563eb",
+    barColorAlpha: "rgba(37,99,235,0.15)",
+    goalColor: "#7c3aed",
+    goalColorAlpha: "rgba(124,58,237,0.12)"
   },
   water: {
     label: "\xC1gua",
     icon: "\u{1F4A7}",
     unit: "m\xB3",
     primaryColor: "#0288d1",
-    barColor: "#0891b2",
-    barColorAlpha: "rgba(8,145,178,0.15)",
-    goalColor: "#f59e0b",
-    goalColorAlpha: "rgba(245,158,11,0.12)"
+    // Esquema padrão das Metas: Realizado AZUL fixo #2563eb, Meta ROXO #7c3aed.
+    barColor: "#2563eb",
+    barColorAlpha: "rgba(37,99,235,0.15)",
+    goalColor: "#7c3aed",
+    goalColorAlpha: "rgba(124,58,237,0.12)"
   },
   temperature: {
     label: "Temperatura",
@@ -85547,12 +85999,27 @@ var _currentDomain = "energy";
 var _currentGran = "1d";
 var _selectedDate = _todayISO();
 var _selectedYear = (/* @__PURE__ */ new Date()).getFullYear();
-var _periodStart = _isoNDaysAgo(29);
+var _periodStart = _firstOfMonthISO();
 var _periodEnd = _todayISO();
 var _chartType = "bar";
 var _lastRender = null;
 var _renderSeq = 0;
 var _datePickerControl = null;
+var _barTip = null;
+var _periodDeviceBreakdown = null;
+function _neutralDelta(a, b) {
+  if (a == null || b == null || !(b > 0) || !isFinite(a)) return void 0;
+  const d = (a - b) / b * 100;
+  return { pct: Math.abs(d), tone: "neutral", arrow: d > 0.05 ? "up" : d < -0.05 ? "down" : "flat" };
+}
+function _bandDelta(real, ref, midText) {
+  if (real == null || ref == null || !(ref > 0) || !isFinite(real)) return void 0;
+  const d = (real - ref) / ref * 100;
+  const abs = Math.abs(d);
+  if (d < -3) return { pct: abs, tone: "good", arrow: "down", text: "abaixo" };
+  if (d > 3) return { pct: abs, tone: "bad", arrow: "up", text: "ultrapassou" };
+  return { pct: abs, tone: "neutral", arrow: "flat", text: midText };
+}
 function _todayISO() {
   const d = /* @__PURE__ */ new Date();
   const mm = String(d.getMonth() + 1).padStart(2, "0");
@@ -85566,6 +86033,11 @@ function _isoNDaysAgo(n) {
   const dd = String(d.getDate()).padStart(2, "0");
   return `${d.getFullYear()}-${mm}-${dd}`;
 }
+function _firstOfMonthISO() {
+  const d = /* @__PURE__ */ new Date();
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  return `${d.getFullYear()}-${mm}-01`;
+}
 function _getTopDoc() {
   try {
     return (window.top || window).document;
@@ -85589,10 +86061,12 @@ function _applyTheme(root) {
 }
 function _formatValue(value, domain) {
   const cfg = DOMAIN_CFG[domain] || DOMAIN_CFG.energy;
+  const dec = domain === "temperature" ? 1 : 2;
+  const ptBR = (v, d) => v.toLocaleString("pt-BR", { minimumFractionDigits: d, maximumFractionDigits: d });
   if (cfg.threshold && cfg.unitLarge && Math.abs(value) >= cfg.threshold) {
-    return `${(value / cfg.threshold).toFixed(2)} ${cfg.unitLarge}`;
+    return `${ptBR(value / cfg.threshold, 2)} ${cfg.unitLarge}`;
   }
-  return `${value.toFixed(domain === "temperature" ? 1 : 2)} ${cfg.unit}`;
+  return `${ptBR(value, dec)} ${cfg.unit}`;
 }
 function _getGoalsData(domain) {
   const cached = window.MyIOUtils?.goalsData?.[domain] ?? null;
@@ -85699,8 +86173,10 @@ function _seriesToTotals(series, boundaries, viewGran) {
   const byKey = /* @__PURE__ */ new Map();
   for (const pt of series) {
     if (!pt) continue;
-    const iso = typeof pt.timestamp === "number" ? new Date(pt.timestamp).toISOString() : String(pt.timestamp);
-    const key = viewGran === "1M" ? iso.slice(5, 7) : iso.slice(5, 10);
+    const dt = new Date(pt.timestamp);
+    const mm = String(dt.getMonth() + 1).padStart(2, "0");
+    const dd = String(dt.getDate()).padStart(2, "0");
+    const key = viewGran === "1M" ? mm : `${mm}-${dd}`;
     byKey.set(key, (byKey.get(key) || 0) + (Number(pt.value) || 0));
   }
   return boundaries.map(
@@ -85738,6 +86214,26 @@ async function _fetchMonthData(domain, year) {
   const totals = await _fetchSeriesTotals(domain, boundaries, "1M", "1d") ?? await _fetchTotalsThrottled(domain, boundaries, "1M");
   return { labels, totals };
 }
+async function _fetchPeriodDeviceBreakdown(domain, boundaries, gran) {
+  try {
+    const fn = _options?.fetchConsumption;
+    if (!fn || !boundaries.length) return null;
+    const start = boundaries[0].startTs;
+    const end = boundaries[boundaries.length - 1].endTs;
+    const devices = await fn(domain, start, end, gran);
+    if (!Array.isArray(devices) || devices.length === 0) return null;
+    const list = devices.map((d) => ({
+      label: String(d.name || d.label || d.deviceName || "Medidor"),
+      value: Number(d.total_value) || Number(d.value) || 0
+    })).filter((d) => d.value > 0);
+    if (list.length === 0) return null;
+    const sum = list.reduce((a, d) => a + d.value, 0);
+    if (!(sum > 0)) return null;
+    return { list, sum };
+  } catch {
+    return null;
+  }
+}
 function _buildBoundaries(gran, dateISO) {
   if (gran === "1M") return _buildMonthBoundaries(_selectedYear);
   if (gran === "1h") return _buildHourBoundaries(dateISO);
@@ -85865,12 +86361,14 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
       fill: false,
       tension: 0.4,
       pointRadius: isLine ? 2 : 0,
+      // Legenda: barra → quadradinho (usePointStyle + 'rect').
+      pointStyle: "rect",
       order: 4
     });
   }
   datasets.push({
     type: _chartType,
-    label: `Consumo (${cfg.unit})`,
+    label: `Realizado (${cfg.unit})`,
     data: totals,
     borderColor: cfg.barColor,
     backgroundColor: isLine ? cfg.barColorAlpha : cfg.barColor,
@@ -85880,6 +86378,8 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
     tension: 0.4,
     pointRadius: isLine ? 3 : 0,
     pointHoverRadius: 4,
+    // Legenda: barra → quadradinho (usePointStyle + 'rect').
+    pointStyle: "rect",
     order: 5
   });
   if (hasGoals) {
@@ -85895,6 +86395,8 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
       fill: false,
       spanGaps: true,
       tension: 0.4,
+      // Meta é LINHA — legenda deve mostrar um traço, não um quadradinho.
+      pointStyle: "line",
       order: 0
     });
   }
@@ -85908,6 +86410,114 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
   const useLarge = !!(cfg.unitLarge && cfg.threshold && yMax && yMax >= cfg.threshold);
   const axisDivisor = useLarge ? cfg.threshold : 1;
   const axisUnit = useLarge ? cfg.unitLarge : cfg.unit;
+  let accent = cfg.primaryColor;
+  try {
+    const root = _overlay || _getTopDoc().documentElement;
+    const v = getComputedStyle(root).getPropertyValue("--myio-brand-700").trim();
+    if (v) accent = v;
+  } catch {
+  }
+  const buildBarTipData = (idx) => {
+    const realizado = totals[idx];
+    const meta = goalLine[idx];
+    const prev = prevTotals ? prevTotals[idx] : null;
+    const rows = [];
+    if (prev != null && prev > 0) {
+      rows.push({
+        icon: "\u{1F553}",
+        label: "A-1 (ano anterior)",
+        color: "#94a3b8",
+        valueText: _formatValue(prev, domain),
+        delta: meta != null && meta > 0 ? _neutralDelta(prev, meta) : void 0
+      });
+    }
+    const realizadoRow = {
+      icon: "\u{1F4CA}",
+      label: "Realizado",
+      color: cfg.barColor,
+      valueText: _formatValue(realizado, domain),
+      delta: prev != null && prev > 0 ? _neutralDelta(realizado, prev) : void 0
+    };
+    try {
+      const bd = _periodDeviceBreakdown;
+      if (bd && bd.sum > 0 && realizado > 0 && bd.list.length > 0) {
+        realizadoRow.children = bd.list.map((d) => {
+          const w = d.value / bd.sum;
+          return {
+            icon: cfg.icon,
+            label: d.label,
+            valueText: _formatValue(realizado * w, domain),
+            pct: w * 100
+          };
+        });
+        realizadoRow.defaultExpanded = false;
+      }
+    } catch {
+    }
+    rows.push(realizadoRow);
+    if (meta != null) {
+      const metaRow = {
+        icon: "\u{1F3AF}",
+        label: "Meta",
+        color: cfg.goalColor,
+        valueText: _formatValue(meta, domain),
+        delta: _bandDelta(realizado, meta, "na meta")
+      };
+      const gdata = _getGoalsData(domain);
+      if (gdata?.granularity === "DEVICE" && Array.isArray(gdata.devices) && gdata.devices.length && meta > 0) {
+        const devs = gdata.devices.map((d) => ({
+          label: d.label || d.code || "Medidor",
+          annual: Number(d.annualAdjusted ?? d.annual ?? 0) || 0
+        }));
+        const totalAnnual = devs.reduce((s, d) => s + d.annual, 0);
+        if (totalAnnual > 0) {
+          metaRow.children = devs.map((d) => {
+            const w = d.annual / totalAnnual;
+            return {
+              icon: cfg.icon,
+              label: d.label,
+              valueText: _formatValue(meta * w, domain),
+              pct: w * 100
+            };
+          });
+          metaRow.defaultExpanded = false;
+        }
+      }
+      rows.push(metaRow);
+    }
+    let subtitle;
+    if (meta != null && meta > 0) {
+      const dev = (realizado - meta) / meta * 100;
+      subtitle = Math.abs(dev) < 0.05 ? "Na Meta (0,0%)" : `${Math.abs(dev).toLocaleString("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 })}% ${dev < 0 ? "abaixo" : "acima"} da Meta`;
+    }
+    return { title: labels[idx] ?? "", subtitle, rows, accentColor: accent };
+  };
+  let _lastMouse = null;
+  try {
+    canvas.addEventListener("mousemove", (e) => {
+      _lastMouse = { x: e.clientX, y: e.clientY };
+    });
+  } catch {
+  }
+  const externalTip = _barTip ? (context) => {
+    try {
+      const tt = context?.tooltip;
+      if (!tt || tt.opacity === 0) {
+        _barTip.hide();
+        return;
+      }
+      const dp = tt.dataPoints && tt.dataPoints[0];
+      if (!dp) return;
+      const idx = dp.dataIndex;
+      const rect = context.chart.canvas.getBoundingClientRect();
+      const pos = _lastMouse ?? {
+        x: rect.left + tt.caretX,
+        y: rect.top + tt.caretY
+      };
+      _barTip.show(buildBarTipData(idx), { clientX: pos.x, clientY: pos.y });
+    } catch {
+    }
+  } : void 0;
   _chartInstance = new Chart(canvas, {
     type: "bar",
     data: { labels, datasets },
@@ -85921,9 +86531,14 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
         legend: {
           display: hasGoals || hasPrev,
           position: "bottom",
-          labels: { color: "#374151", font: { size: 11 } }
+          // usePointStyle + pointStyle por dataset: barras (Realizado/Ano anterior)
+          // ficam quadradinhos ('rect'), Meta fica um traço ('line').
+          labels: { color: "#374151", font: { size: 11 }, usePointStyle: true }
         },
         tooltip: {
+          // Premium tooltip via external handler; se indisponível, cai no built-in.
+          enabled: !externalTip,
+          external: externalTip,
           callbacks: {
             label(ctx) {
               const v = ctx.parsed.y;
@@ -86029,6 +86644,15 @@ async function _loadAndRender(domain, gran, dateISO) {
     if (!canvas) return;
     _renderChart(canvas, labels, totals, goalLine, domain, prevTotals);
     _lastRender = { labels, totals, goalLine, prevTotals, domain };
+    _periodDeviceBreakdown = null;
+    if (domain !== "temperature") {
+      const mySeq = seq;
+      const bnds = _buildBoundaries(gran, dateISO);
+      _fetchPeriodDeviceBreakdown(domain, bnds, gran).then((bd) => {
+        if (mySeq === _renderSeq) _periodDeviceBreakdown = bd;
+      }).catch(() => {
+      });
+    }
     if (statsEl) {
       const total = totals.reduce((a, b) => a + b, 0);
       const avg = totals.length ? total / totals.length : 0;
@@ -86074,13 +86698,13 @@ function _rerenderFromCache() {
   const { labels, totals, goalLine, prevTotals, domain } = _lastRender;
   _renderChart(canvas, labels, totals, goalLine, domain, prevTotals);
 }
-var STYLE_ID5 = "myio-goals-modal-v2-styles";
+var STYLE_ID6 = "myio-goals-modal-v2-styles";
 function _injectStyles(topDoc) {
-  if (topDoc.getElementById(STYLE_ID5)) return;
+  if (topDoc.getElementById(STYLE_ID6)) return;
   const s = topDoc.createElement("style");
-  s.id = STYLE_ID5;
+  s.id = STYLE_ID6;
   s.textContent = `
-    .gm-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
+    .gm-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s ease;font-family:'Nunito', system-ui, sans-serif;}
     .gm-overlay.show{opacity:1;}
     .gm-modal{position:relative;background:#fff;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);width:min(1000px,95vw);height:min(660px,90vh);overflow:hidden;display:flex;flex-direction:column;transform:translateY(12px) scale(.98);transition:transform .2s ease;}
     .gm-overlay.show .gm-modal{transform:translateY(0) scale(1);}
@@ -86137,6 +86761,10 @@ function _buildModalHTML() {
         <button class="gm-gran-btn${_currentGran === "1d" ? " active" : ""}" data-gran="1d">1d</button>
         <button class="gm-gran-btn${_currentGran === "1h" ? " active" : ""}" data-gran="1h">1h</button>
       </div>
+      <div class="gm-gran-wrap" title="Atalhos de per\xEDodo">
+        <button class="gm-gran-btn" data-preset="prevYear">Ano ${(/* @__PURE__ */ new Date()).getFullYear() - 1}</button>
+        <button class="gm-gran-btn" data-preset="curYear">Ano ${(/* @__PURE__ */ new Date()).getFullYear()}</button>
+      </div>
       <div class="gm-date-picker-wrap" id="gm-date-picker-wrap">
         <input type="text" id="gm-date-range-input" class="gm-date-input" readonly placeholder="Selecione o per\xEDodo\u2026" />
       </div>
@@ -86222,6 +86850,20 @@ function _wireEvents(overlay, topDoc) {
       _loadAndRender(_currentDomain, _currentGran, _selectedDate);
     });
   });
+  overlay.querySelectorAll(".gm-gran-btn[data-preset]").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const which = btn.dataset.preset;
+      const Y = (/* @__PURE__ */ new Date()).getFullYear();
+      const year = which === "prevYear" ? Y - 1 : Y;
+      _selectedYear = year;
+      _currentGran = "1M";
+      _periodStart = `${year}-01-01`;
+      _periodEnd = which === "prevYear" ? `${year}-12-31` : _todayISO();
+      overlay.querySelectorAll(".gm-gran-btn[data-gran]").forEach((b) => b.classList.toggle("active", b.dataset.gran === "1M"));
+      _initDatePicker(topDoc).catch(console.error);
+      _loadAndRender(_currentDomain, _currentGran, _selectedDate);
+    });
+  });
 }
 function _updateGoalsHint(topDoc) {
   const existing = topDoc.getElementById("gm-no-goals-hint-el");
@@ -86262,19 +86904,19 @@ function _updateCoverageHint(topDoc) {
   const deviceCount = data.granularity === "DEVICE" ? data.devices?.length ?? 0 : 0;
   hint.textContent = `\u26A0 Meta incompleta para este dom\xEDnio/ano` + (deviceCount > 0 ? ` \xB7 Por medidor (${deviceCount})` : "") + ` \u2014 passe o mouse para detalhes`;
   tabs.insertAdjacentElement("afterend", hint);
-  const esc5 = (s) => String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const esc6 = (s) => String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   try {
     _coverageDetach = InfoTooltip.attach(hint, () => {
       const d = _getGoalsData(_currentDomain);
       const parts = [];
       if (hasCoverageGaps(d?.coverageGaps)) {
-        parts.push(`<p style="margin:0 0 8px;">${esc5(buildCoverageWarningTextPtBR(d?.coverageGaps, "GERAL"))}</p>`);
+        parts.push(`<p style="margin:0 0 8px;">${esc6(buildCoverageWarningTextPtBR(d?.coverageGaps, "GERAL"))}</p>`);
       }
       (d?.devices || []).forEach((dev) => {
         if (!hasCoverageGaps(dev?.coverageGaps)) return;
         const label = dev.label || dev.code || "medidor";
         parts.push(
-          `<p style="margin:0 0 8px;">${esc5(buildCoverageWarningTextPtBR(dev.coverageGaps, `do medidor ${label}`))}</p>`
+          `<p style="margin:0 0 8px;">${esc6(buildCoverageWarningTextPtBR(dev.coverageGaps, `do medidor ${label}`))}</p>`
         );
       });
       return {
@@ -86291,7 +86933,7 @@ var GoalsModal = {
     _options = options;
     _currentDomain = options.initialDomain ?? "energy";
     _periodEnd = _todayISO();
-    _periodStart = _isoNDaysAgo((options.defaultPeriodDays ?? 30) - 1);
+    _periodStart = options.defaultPeriodDays != null ? _isoNDaysAgo(options.defaultPeriodDays - 1) : _firstOfMonthISO();
     _selectedDate = _todayISO();
     _selectedYear = (/* @__PURE__ */ new Date()).getFullYear();
     _currentGran = "1d";
@@ -86313,6 +86955,16 @@ var GoalsModal = {
     overlay.appendChild(modal);
     topDoc.body.appendChild(overlay);
     _overlay = overlay;
+    try {
+      _barTip?.destroy();
+    } catch {
+    }
+    _barTip = null;
+    try {
+      _barTip = createGoalsBarTooltip();
+    } catch {
+      _barTip = null;
+    }
     _applyTheme(overlay);
     requestAnimationFrame(() => overlay.classList.add("show"));
     _wireEvents(overlay, topDoc);
@@ -86326,6 +86978,11 @@ var GoalsModal = {
     if (!_overlay) return;
     _overlay.classList.remove("show");
     _destroyChart();
+    try {
+      _barTip?.destroy();
+    } catch {
+    }
+    _barTip = null;
     _datePickerControl?.destroy();
     _datePickerControl = null;
     if (_coverageDetach) {
@@ -86623,7 +87280,7 @@ function generatePDFContent(data, config2) {
       <title>${deviceLabel} - ${domainLabel} Report</title>
       <style>
         body {
-          font-family: 'Roboto', Arial, sans-serif;
+          font-family: 'Nunito', system-ui, sans-serif;
           margin: 0;
           padding: 24px;
           color: ${colors2.text};
@@ -87058,7 +87715,7 @@ function createDistributionChartWidget(config2) {
     return `
       <style>
         #${widgetId} {
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-family: 'Nunito', system-ui, sans-serif;
         }
         #${widgetId} .myio-dist-header {
           display: flex;
@@ -87746,7 +88403,7 @@ var ContractDevicesModalView = class {
           align-items: center;
           justify-content: center;
           z-index: 10000;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-family: 'Nunito', system-ui, sans-serif;
         }
 
         .myio-contract-devices-modal {
@@ -88883,7 +89540,7 @@ function createMyIOTheme(settings, mode) {
 // src/components/settings-hub/openSettingsHubModal.ts
 var ROUTE_DELAY_MS = 250;
 var MODAL_ID = "myio-conf-picker";
-var STYLE_ID6 = "myio-conf-picker-styles";
+var STYLE_ID7 = "myio-conf-picker-styles";
 var HUB_OPTIONS = [
   {
     action: "temperature",
@@ -88953,7 +89610,7 @@ var HUB_CSS = `
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    font-family: Nunito, Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
   .myio-conf-picker.show {
     opacity: 1;
@@ -89094,9 +89751,9 @@ function resolveHubThemeVars(explicit) {
 function openSettingsHubModal(options) {
   const { customerName = "", isSuperAdmin: isSuperAdmin2 = false, handlers } = options;
   const doc = options.targetDocument || resolveTopDocument();
-  if (!doc.getElementById(STYLE_ID6)) {
+  if (!doc.getElementById(STYLE_ID7)) {
     const style = doc.createElement("style");
-    style.id = STYLE_ID6;
+    style.id = STYLE_ID7;
     style.textContent = HUB_CSS;
     doc.head.appendChild(style);
   }
@@ -89370,7 +90027,7 @@ var PRICING_PANEL_CSS = `
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    font-family: Nunito, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
   .myio-pricing.show {
     opacity: 1;
@@ -90725,7 +91382,7 @@ var MeasurementSetupView = class {
         opacity: 0;
         visibility: hidden;
         transition: all 0.3s ease;
-        font-family: ${styles.fontFamily || "'Roboto', Arial, sans-serif"};
+        font-family: ${styles.fontFamily || "'Nunito', system-ui, sans-serif"};
       }
 
       .myio-measurement-setup-overlay.active {
@@ -91556,7 +92213,7 @@ function ensureBusyModalDOM() {
       z-index: 99999;
       align-items: center;
       justify-content: center;
-      font-family: 'Roboto', Inter, system-ui, -apple-system, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
     ">
       <div style="
         background: ${MYIO_PURPLE_DARK};
@@ -92036,7 +92693,7 @@ function renderModal4(container, state6, modalId, t, error) {
         max-height: ${contentMaxHeight}; height: ${state6.isMaximized ? "100%" : "auto"};
         overflow: hidden; display: flex; flex-direction: column;
         box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-        font-family: 'Roboto', Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       ">
         <!-- Header - MyIO Premium Style -->
         <div style="
@@ -92095,7 +92752,7 @@ function renderModal4(container, state6, modalId, t, error) {
                 background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
                 color: ${colors2.text}; border: 1px solid ${colors2.border};
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-family: 'Nunito', system-ui, sans-serif;
               ">${t.back}</button>
             ` : ""}
           </div>
@@ -92104,49 +92761,49 @@ function renderModal4(container, state6, modalId, t, error) {
               <button id="${modalId}-bulk-attr" style="
                 background: #f59e0b; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               ">\u26A1 For\xE7ar Atributo (${state6.selectedDevices.length})</button>
               <button id="${modalId}-bulk-profile" style="
                 background: #8b5cf6; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               ">\u{1F3F7}\uFE0F For\xE7ar Profile (${state6.selectedDevices.length})</button>
               <button id="${modalId}-bulk-owner" style="
                 background: #10b981; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " ${!state6.selectedCustomer ? 'disabled title="Selecione um Customer primeiro"' : ""}>\u{1F464} Atribuir Owner (${state6.selectedDevices.length})</button>
               <button id="${modalId}-bulk-relation" style="
                 background: #0a6d5e; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " ${!state6.selectedCustomer ? 'disabled title="Selecione um Customer primeiro"' : ""}>\u{1F517} For\xE7ar Rela\xE7\xE3o (${state6.selectedDevices.length})</button>
               <button id="${modalId}-clear-gcdr-ids" style="
                 background: #dc2626; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " ${!state6.selectedCustomer ? 'disabled title="Selecione um Customer primeiro"' : ""}>\u{1F9F9} Clear GCDR IDs</button>
               <button id="${modalId}-custom-shortcut" style="
                 background: #ef4444; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               ">\u{1F39B}\uFE0F CUSTOM (${state6.selectedDevices.length})</button>
               <button id="${modalId}-bulk-sync-ingestion" style="
                 background: #0284c7; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " ${!state6.selectedCustomer ? 'disabled title="Selecione um Customer primeiro"' : ""}>\u{1F504} Sync Ingestion ID (${state6.selectedDevices.length})</button>
               <button id="${modalId}-bulk-delete" style="
                 background: #b91c1c; color: white; border: 1px solid #7f1d1d;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 600; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 600; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " title="Deletar permanentemente os dispositivos selecionados (irrevers\xEDvel)">\u{1F5D1}\uFE0F Deletar (${state6.selectedDevices.length})</button>
             ` : ""}
@@ -92154,13 +92811,13 @@ function renderModal4(container, state6, modalId, t, error) {
               <button id="${modalId}-lojas-sync" style="
                 background: #3b82f6; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " ${state6.lojasDataLoading ? "disabled" : ""}>\u{1F504} Sync Ingestion</button>
               <button id="${modalId}-lojas-apply" style="
                 background: #ef4444; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
                 display: flex; align-items: center; gap: 6px;
               " ${state6.lojasDataLoading ? "disabled" : ""}>\u{1F3EC} Aplicar ${state6.lojasConfig?.label ?? "LOJAS"} (${state6.lojasDeviceData.length})</button>
             ` : ""}
@@ -92168,19 +92825,19 @@ function renderModal4(container, state6, modalId, t, error) {
               background: ${state6.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f3f4f6"};
               color: ${colors2.text}; border: 1px solid ${colors2.border};
               padding: 8px 16px; border-radius: 6px; cursor: pointer;
-              font-size: 14px; font-family: 'Roboto', Arial, sans-serif;
+              font-size: 14px; font-family: 'Nunito', system-ui, sans-serif;
             ">${t.cancel}</button>
             ${state6.currentStep < 3 ? `
               <button id="${modalId}-next" style="
                 background: ${MYIO_PURPLE}; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
               " ${state6.deviceSelectionMode === "multi" ? 'disabled title="Desabilitado no modo multi"' : ""}>${t.next}</button>
             ` : state6.lojasMode ? "" : `
               <button id="${modalId}-save" style="
                 background: ${colors2.success}; color: white; border: none;
                 padding: 8px 16px; border-radius: 6px; cursor: pointer;
-                font-size: 14px; font-weight: 500; font-family: 'Roboto', Arial, sans-serif;
+                font-size: 14px; font-weight: 500; font-family: 'Nunito', system-ui, sans-serif;
               ">${t.save}</button>
             `}
           </div>
@@ -94269,7 +94926,7 @@ function openRelationsDetailPanel(deviceId, deviceName, direction, rels, state6,
       z-index:99999; background:${colors2.bg}; border:1px solid ${colors2.border};
       border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.35);
       min-width:380px; max-width:500px; width:90vw; max-height:70vh;
-      display:flex; flex-direction:column; font-family:system-ui,sans-serif;
+      display:flex; flex-direction:column; font-family:Nunito, system-ui, sans-serif;
     `;
     const rows = currentRels.map((rel, idx) => {
       const [tcBg, tcColor] = typeColor(rel.entityType);
@@ -94440,7 +95097,7 @@ async function openClearGcdrIdsModal(state6) {
     position:fixed; inset:0; z-index:99999;
     background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
     display:flex; align-items:center; justify-content:center;
-    font-family:'Roboto',Inter,system-ui,sans-serif;
+    font-family:'Nunito', system-ui, sans-serif;
   `;
   overlay.addEventListener("click", (e) => {
     if (e.target === overlay) close();
@@ -95708,7 +96365,7 @@ function showMiniTooltip(trigger, content, colors2) {
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     white-space: pre-line;
     max-width: 280px;
-    font-family: 'Roboto', Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   `;
   miniTooltipEl.textContent = content;
   document.body.appendChild(miniTooltipEl);
@@ -96745,7 +97402,7 @@ function openCheckFixScopeDialog(state6, onConfirm) {
   }
   const overlay = document.createElement("div");
   overlay.id = DIALOG_ID;
-  overlay.style.cssText = "position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;font-family:Roboto,Inter,system-ui,sans-serif;";
+  overlay.style.cssText = "position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,0.55);display:flex;align-items:center;justify-content:center;font-family:Nunito, system-ui, sans-serif;";
   overlay.innerHTML = `
     <div style="background:${c.surface};border-radius:12px;width:480px;max-width:92vw;max-height:88vh;
       overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,0.4);">
@@ -97329,7 +97986,7 @@ function refreshTicketBadges(opts) {
 
 // src/components/premium-modals/dialog/styles.ts
 var FONT_LINK_ID = "myio-dialog-font-nunito";
-var STYLE_ID7 = "myio-dialog-styles";
+var STYLE_ID8 = "myio-dialog-styles";
 function injectDialogStyles() {
   if (!document.getElementById(FONT_LINK_ID)) {
     const link = document.createElement("link");
@@ -97338,9 +97995,9 @@ function injectDialogStyles() {
     link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap";
     document.head.appendChild(link);
   }
-  if (document.getElementById(STYLE_ID7)) return;
+  if (document.getElementById(STYLE_ID8)) return;
   const style = document.createElement("style");
-  style.id = STYLE_ID7;
+  style.id = STYLE_ID8;
   style.textContent = `
 .myio-dialog-overlay {
   position: fixed;
@@ -97349,7 +98006,7 @@ function injectDialogStyles() {
   align-items: center;
   justify-content: center;
   background: rgba(17, 24, 39, 0.55);
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 .myio-dialog {
   background: #ffffff;
@@ -97610,7 +98267,7 @@ function openMessageDialog(params) {
 }
 
 // src/components/premium-modals/dialog/openGenericModal.ts
-var STYLE_ID8 = "myio-genmodal-styles";
+var STYLE_ID9 = "myio-genmodal-styles";
 var FONT_LINK_ID2 = "myio-dialog-font-nunito";
 var BASE_Z_INDEX2 = 10600;
 var openCount2 = 0;
@@ -97629,9 +98286,9 @@ function injectGenericModalStyles() {
     link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap";
     document.head.appendChild(link);
   }
-  if (document.getElementById(STYLE_ID8)) return;
+  if (document.getElementById(STYLE_ID9)) return;
   const style = document.createElement("style");
-  style.id = STYLE_ID8;
+  style.id = STYLE_ID9;
   style.textContent = `
 .myio-genmodal-overlay {
   position: fixed;
@@ -97640,7 +98297,7 @@ function injectGenericModalStyles() {
   align-items: center;
   justify-content: center;
   background: rgba(17, 24, 39, 0.55);
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 .myio-genmodal {
   background: #ffffff;
@@ -97858,12 +98515,12 @@ function openGenericModal(params) {
 }
 
 // src/components/img-gallery/ScrollableTabs.ts
-var STYLE_ID9 = "myio-tabs-styles";
+var STYLE_ID10 = "myio-tabs-styles";
 var FONT_LINK_ID3 = "myio-dialog-font-nunito";
 function escapeHtml11(value) {
   return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function injectStyles11() {
+function injectStyles12() {
   if (!document.getElementById(FONT_LINK_ID3)) {
     const link = document.createElement("link");
     link.id = FONT_LINK_ID3;
@@ -97871,15 +98528,15 @@ function injectStyles11() {
     link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap";
     document.head.appendChild(link);
   }
-  if (document.getElementById(STYLE_ID9)) return;
+  if (document.getElementById(STYLE_ID10)) return;
   const style = document.createElement("style");
-  style.id = STYLE_ID9;
+  style.id = STYLE_ID10;
   style.textContent = `
 .myio-tabs {
   display: flex;
   align-items: center;
   gap: 6px;
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   max-width: 100%;
 }
 .myio-tabs__arrow {
@@ -97948,7 +98605,7 @@ function createScrollableTabs(options) {
   if (typeof document === "undefined") {
     throw new Error("[createScrollableTabs] requires a browser environment");
   }
-  injectStyles11();
+  injectStyles12();
   const theme = options.theme ?? "light";
   const accent = options.accent ?? "#7C3AED";
   const showArrows = options.showArrows ?? "auto";
@@ -98081,13 +98738,13 @@ function createScrollableTabs(options) {
 }
 
 // src/components/img-gallery/ImgGallery.ts
-var STYLE_ID10 = "myio-gallery-styles";
+var STYLE_ID11 = "myio-gallery-styles";
 var FONT_LINK_ID4 = "myio-dialog-font-nunito";
 function escapeHtml12(value) {
   return String(value == null ? "" : value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
 var PRM = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-function injectStyles12() {
+function injectStyles13() {
   if (!document.getElementById(FONT_LINK_ID4)) {
     const link = document.createElement("link");
     link.id = FONT_LINK_ID4;
@@ -98095,12 +98752,12 @@ function injectStyles12() {
     link.href = "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap";
     document.head.appendChild(link);
   }
-  if (document.getElementById(STYLE_ID10)) return;
+  if (document.getElementById(STYLE_ID11)) return;
   const style = document.createElement("style");
-  style.id = STYLE_ID10;
+  style.id = STYLE_ID11;
   style.textContent = `
 .myio-gallery {
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -98200,7 +98857,7 @@ function injectStyles12() {
   position: fixed; inset: 0; z-index: 10800;
   display: flex; align-items: center; justify-content: center;
   background: rgba(0,0,0,.82);
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 .myio-gallery-lb__img { max-width: 88vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
 .myio-gallery-lb__cap {
@@ -98256,7 +98913,7 @@ function createImgGallery(options) {
   if (typeof document === "undefined") {
     throw new Error("[createImgGallery] requires a browser environment");
   }
-  injectStyles12();
+  injectStyles13();
   const locale = options.locale === "en-US" ? "en-US" : "pt-BR";
   const theme = options.theme ?? "light";
   const accent = options.accent ?? "#7C3AED";
@@ -102071,7 +102728,7 @@ var UserManagementModalView = class {
 /* \u2500\u2500 Component styles (theme-agnostic via variables) \u2500\u2500 */
 .um-modal {
   background: var(--um-modal-bg);
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   border-radius: 14px; width: 96vw; max-width: 1200px;
   --modal-header-radius: 14px 14px 0 0;
   height: 84vh; display: flex; flex-direction: column;
@@ -102215,7 +102872,7 @@ var UserManagementModalView = class {
   background: var(--um-modal-bg); border: 1px solid var(--um-border);
   border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
   width: 260px; pointer-events: none;
-  font-family: 'Nunito', -apple-system, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 .um-sync-tooltip-header {
   display: flex; align-items: center; gap: 7px;
@@ -102241,7 +102898,7 @@ var UserManagementModalView = class {
   background: var(--um-modal-bg); border: 1px solid var(--um-border);
   border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
   width: 320px; max-height: 340px; overflow-y: auto;
-  font-family: 'Nunito', -apple-system, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 .um-assign-popup-header {
   display: flex; align-items: center; justify-content: space-between;
@@ -103189,7 +103846,7 @@ var MenuView = class {
    ========================================== */
 
 .myio-menu-root {
-  font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   width: 100%;
   box-sizing: border-box;
 }
@@ -110304,7 +110961,7 @@ var MODAL_CSS2 = `
     overflow: hidden;
     transform: scale(0.95) translateY(10px);
     transition: transform 0.2s ease;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
 
   /* Two-column layout when device grid is shown */
@@ -110972,7 +111629,7 @@ var MODAL_CSS2 = `
     background: rgba(255, 255, 255, 0.2);
   }
 `;
-function injectStyles13() {
+function injectStyles14() {
   if (document.getElementById(CSS_ID5)) return;
   const style = document.createElement("style");
   style.id = CSS_ID5;
@@ -110989,7 +111646,7 @@ var FilterModalComponent = class {
   showDeviceGrid;
   deviceSearchQuery = "";
   constructor(options) {
-    injectStyles13();
+    injectStyles14();
     this.options = options;
     this.themeMode = options.themeMode || "light";
     this.selectedCategories = new Set(
@@ -111893,7 +112550,7 @@ function createCustomerCardV1(params) {
 }
 
 // src/components/cards/customer-goals/v1.0.0/styles.ts
-var STYLE_ID11 = "myio-customer-goals-card-css";
+var STYLE_ID12 = "myio-customer-goals-card-css";
 var CSS3 = `
 .myio-cgc{
   --cgc-surface:#ffffff;
@@ -111901,9 +112558,10 @@ var CSS3 = `
   --cgc-text:#1e293b;
   --cgc-muted:#64748b;
   --cgc-grid:rgba(100,116,139,.18);
-  --cgc-realized:#6c5ce7;
+  --cgc-realized:#2563eb;
   --cgc-prev:#94a3b8;
-  --cgc-budget:#f59e0b;
+  --cgc-budget:#7c3aed;
+  --cgc-orcado:#f59e0b;
   --cgc-good:#16a34a;
   --cgc-bad:#ef4444;
   display:flex;flex-direction:column;
@@ -111911,7 +112569,7 @@ var CSS3 = `
   border:1px solid var(--cgc-border);
   border-radius:12px;
   overflow:hidden;
-  font-family:'Nunito',sans-serif;
+  font-family:'Nunito', system-ui, sans-serif;
   transition:transform .15s ease, box-shadow .15s ease;
 }
 .myio-cgc[data-theme="dark"]{
@@ -111933,7 +112591,7 @@ var CSS3 = `
 .myio-cgc__expand{
   position:absolute;top:6px;right:8px;z-index:2;
   border:none;background:transparent;cursor:pointer;
-  color:var(--cgc-muted);font:700 13px 'Nunito',sans-serif;line-height:1;
+  color:var(--cgc-muted);font:700 13px 'Nunito', system-ui, sans-serif;line-height:1;
   padding:3px 5px;border-radius:6px;opacity:.55;transition:opacity .15s, background .15s;
 }
 .myio-cgc__expand:hover{opacity:1;background:rgba(124,58,237,.12);color:#7C3AED;}
@@ -111941,7 +112599,7 @@ var CSS3 = `
    font-size/margin grandes em h4, cortando o t\xEDtulo dentro do card). */
 .myio-cgc h4.myio-cgc__title{
   margin:0!important;padding:10px 26px 4px;
-  font:800 14px/1.4 'Nunito',sans-serif!important;color:var(--cgc-text);
+  font:800 14px/1.4 'Nunito', system-ui, sans-serif!important;color:var(--cgc-text);
   text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 .myio-cgc__title--clickable{cursor:pointer;}
@@ -111950,56 +112608,64 @@ var CSS3 = `
 .myio-cgc__chart canvas{width:100%!important;height:100%!important;}
 .myio-cgc__chart-empty{
   display:flex;align-items:center;justify-content:center;height:100%;
-  font:600 11px 'Nunito',sans-serif;color:var(--cgc-muted);
+  font:600 11px 'Nunito', system-ui, sans-serif;color:var(--cgc-muted);
 }
 .myio-cgc__totals{
-  display:grid;grid-template-columns:repeat(3,1fr);
+  display:grid;grid-template-columns:repeat(4,1fr);
   border-top:1px solid var(--cgc-border);margin-top:6px;
 }
-.myio-cgc__totals--two{grid-template-columns:repeat(2,1fr);}
-.myio-cgc__totals--one{grid-template-columns:1fr;}
-.myio-cgc__total{padding:6px 4px;text-align:center;border-right:1px solid var(--cgc-border);min-width:0;}
+.myio-cgc__total{padding:6px 3px;text-align:center;border-right:1px solid var(--cgc-border);min-width:0;}
 .myio-cgc__total:last-child{border-right:none;}
-.myio-cgc__total-label{display:block;font:700 10.5px 'Nunito',sans-serif;line-height:1.4;}
+.myio-cgc__total-label{display:block;font:700 9.5px 'Nunito', system-ui, sans-serif;line-height:1.35;white-space:nowrap;}
 .myio-cgc__total-label--realized{color:var(--cgc-realized);}
 .myio-cgc__total-label--prev{color:var(--cgc-prev);}
 .myio-cgc__total-label--budget{color:var(--cgc-budget);}
 .myio-cgc__total-label--orcado{color:var(--cgc-orcado);}
 .myio-cgc__total-value{
-  display:block;font:700 12px 'Nunito',sans-serif;color:var(--cgc-text);
+  display:block;font:700 11px 'Nunito', system-ui, sans-serif;color:var(--cgc-text);
   white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 }
 .myio-cgc__deltas{
-  display:grid;grid-template-columns:repeat(2,1fr);
+  display:grid;grid-template-columns:repeat(4,1fr);
   border-top:1px solid var(--cgc-border);
 }
-.myio-cgc__deltas--one{grid-template-columns:1fr;}
-.myio-cgc__deltas--three{grid-template-columns:repeat(3,1fr);}
-.myio-cgc__delta{padding:6px 4px 8px;text-align:center;border-right:1px solid var(--cgc-border);}
+.myio-cgc__delta{padding:5px 3px 8px;text-align:center;border-right:1px solid var(--cgc-border);min-width:0;}
 .myio-cgc__delta:last-child{border-right:none;}
-.myio-cgc__delta-label{display:block;font:600 10.5px 'Nunito',sans-serif;color:var(--cgc-muted);line-height:1.5;}
-/* "Meta <valor>" na coluna 3 dos deltas segue o azul da s\xE9rie de Meta. */
-.myio-cgc__delta-label[data-total="budget"]{color:var(--cgc-budget);font-weight:700;}
-.myio-cgc__delta-value{display:block;font:800 13px 'Nunito',sans-serif;}
+.myio-cgc__delta-label{display:block;font:600 9px 'Nunito', system-ui, sans-serif;color:var(--cgc-muted);line-height:1.4;margin-bottom:2px;}
+.myio-cgc__delta-value{display:block;font:800 11.5px 'Nunito', system-ui, sans-serif;}
+/* Coluna A-1: dois chips pequenos empilhados (Or\xE7ado vs A-1, Meta vs A-1). */
+.myio-cgc__delta-dual{display:flex;flex-direction:column;gap:2px;align-items:center;}
+.myio-cgc__delta-mini{display:inline-flex;align-items:center;gap:3px;line-height:1.2;}
+.myio-cgc__delta-mini-label{font:700 8px 'Nunito', system-ui, sans-serif;color:var(--cgc-muted);}
+.myio-cgc__delta-mini .myio-cgc__delta-value{display:inline;font-size:9.5px;}
 .myio-cgc__delta-value--good{color:var(--cgc-good);}
 .myio-cgc__delta-value--bad{color:var(--cgc-bad);}
 .myio-cgc__delta-value--neutral{color:var(--cgc-muted);}
+/* Linhas "vs <ref>" (col2/3/4): "vs" na cor da coluna, ref na sua cor, + chip.
+   col1 mostra "<ref> SEM DADOS". */
+.myio-cgc__delta-lines{display:flex;flex-direction:column;gap:2px;align-items:center;}
+.myio-cgc__vsline{display:inline-flex;align-items:center;gap:3px;line-height:1.25;font:800 8.5px 'Nunito',sans-serif;white-space:nowrap;}
+.myio-cgc__vs,.myio-cgc__vsref{font-weight:800;}
+.myio-cgc__vsline .myio-cgc__delta-value{font-size:9.5px;}
+.myio-cgc__nodata{color:var(--cgc-muted);font-weight:600;font-size:8px;letter-spacing:.3px;}
 `;
 function injectCustomerGoalsCardStyles() {
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID11)) return;
+  if (document.getElementById(STYLE_ID12)) return;
   const tag = document.createElement("style");
-  tag.id = STYLE_ID11;
+  tag.id = STYLE_ID12;
   tag.textContent = CSS3;
   document.head.appendChild(tag);
 }
 
 // src/components/cards/customer-goals/v1.0.0/CustomerGoalsCard.ts
 var COLORS = {
-  realized: "#6c5ce7",
+  realized: "#2563eb",
+  // Realizado (ano corrente) — AZUL fixo (não segue mais o accent do host)
   prev: "#94a3b8",
-  budget: "#0ea5e9",
-  // Meta (adjustedValue) — AZUL tracejado
+  // A-1 (ano anterior) — CINZA
+  budget: "#7c3aed",
+  // Meta (adjustedValue) — ROXO tracejado
   orcado: "#f59e0b"
   // Orçado (value cru) — LARANJA tracejado (também a linha "Orçado" legada)
 };
@@ -112171,7 +112837,7 @@ var CustomerGoalsCard = class {
         u = "MWh";
       }
     }
-    const txt = n.toLocaleString(this.locale, { maximumFractionDigits: Math.abs(n) >= 100 ? 0 : 2 });
+    const txt = n.toLocaleString(this.locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     return `${txt} ${u}`;
   }
   /** Compact axis ticks like the reference ("1M", "2M", "500k") */
@@ -112183,16 +112849,22 @@ var CustomerGoalsCard = class {
     if (abs >= 1e3) return `${num(v / 1e3)}k`;
     return num(v);
   }
-  /** Variance badge: consumption ABOVE the reference is bad (↑ red); below is good (↓ green). */
+  fmtPct(pct) {
+    return `${Math.abs(pct).toLocaleString(this.locale, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    })}%`;
+  }
+  /**
+   * Variance vs TARGET (Orçado/Meta): consumption BELOW the reference is GOOD
+   * (↓ green — under budget); ABOVE is bad (↑ red — over budget).
+   */
   deltaBadge(realized, reference) {
     if (realized == null || reference == null || reference === 0) {
       return '<span class="myio-cgc__delta-value myio-cgc__delta-value--neutral">\u2014</span>';
     }
     const pct = (realized - reference) / reference * 100;
-    const txt = `${Math.abs(pct).toLocaleString(this.locale, {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2
-    })}%`;
+    const txt = this.fmtPct(pct);
     if (pct > 0) {
       return `<span class="myio-cgc__delta-value myio-cgc__delta-value--bad">&#8593; ${txt}</span>`;
     }
@@ -112201,6 +112873,25 @@ var CustomerGoalsCard = class {
     }
     return `<span class="myio-cgc__delta-value myio-cgc__delta-value--neutral">${txt}</span>`;
   }
+  /**
+   * Growth vs LAST YEAR (A-1): a value ABOVE the reference GREW (↑ green — bom);
+   * below SHRANK (↓ red). Inverted semantics of deltaBadge — used pelas colunas
+   * A-1/Realizado onde "subir vs ano anterior" é positivo.
+   */
+  growthBadge(current, reference) {
+    if (current == null || reference == null || reference === 0) {
+      return '<span class="myio-cgc__delta-value myio-cgc__delta-value--neutral">\u2014</span>';
+    }
+    const pct = (current - reference) / reference * 100;
+    const txt = this.fmtPct(pct);
+    if (pct > 0) {
+      return `<span class="myio-cgc__delta-value myio-cgc__delta-value--good">&#8593; ${txt}</span>`;
+    }
+    if (pct < 0) {
+      return `<span class="myio-cgc__delta-value myio-cgc__delta-value--bad">&#8595; ${txt}</span>`;
+    }
+    return `<span class="myio-cgc__delta-value myio-cgc__delta-value--neutral">${txt}</span>`;
+  }
   // ── Rendering ─────────────────────────────────────────────────────────────
   esc(s) {
     return String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -112211,62 +112902,62 @@ var CustomerGoalsCard = class {
     const hasPrev = !!s.previousYear;
     const hasBudget = !!s.budget || !!(s.budgetBreakdown && s.budgetBreakdown.length);
     const hasOrcado = this.hasRawOrcado();
-    const totalCells = [
-      `<div class="myio-cgc__total">
-         <span class="myio-cgc__total-label myio-cgc__total-label--realized">Realizado</span>
-         <span class="myio-cgc__total-value" data-total="realized">${this.fmtQty(totals.realized)}</span>
-       </div>`
-    ];
+    const t = totals;
+    const orcadoVal = hasOrcado ? t.orcado : hasBudget ? t.budget : null;
+    const hasMetaCol = hasOrcado && hasBudget;
+    const valueCell = (cls, label, total, val) => `<div class="myio-cgc__total"><span class="myio-cgc__total-label myio-cgc__total-label--${cls}">${label}</span><span class="myio-cgc__total-value" data-total="${total}">${this.fmtQty(val)}</span></div>`;
+    const vsLine = (vsVar, refLabel, refVar, badge) => `<span class="myio-cgc__vsline"><span class="myio-cgc__vs" style="color:var(${vsVar})">vs</span> <span class="myio-cgc__vsref" style="color:var(${refVar})">${refLabel}</span>${badge}</span>`;
+    const noDataLine = (refVar, refLabel) => `<span class="myio-cgc__vsline"><span class="myio-cgc__vsref" style="color:var(${refVar})">${refLabel}</span> <span class="myio-cgc__nodata">SEM DADOS</span></span>`;
+    const deltaLines = (lines) => `<div class="myio-cgc__delta"><div class="myio-cgc__delta-lines">${lines.join("")}</div></div>`;
+    const valueCells = [];
+    const deltaCells = [];
+    let anyDelta = false;
     if (hasPrev) {
-      totalCells.push(`<div class="myio-cgc__total">
-        <span class="myio-cgc__total-label myio-cgc__total-label--prev">A-1</span>
-        <span class="myio-cgc__total-value" data-total="prev">${this.fmtQty(totals.previousYear)}</span>
-      </div>`);
-    }
-    if (hasOrcado) {
-      totalCells.push(`<div class="myio-cgc__total">
-        <span class="myio-cgc__total-label myio-cgc__total-label--orcado">Or&ccedil;ado</span>
-        <span class="myio-cgc__total-value" data-total="orcado">${this.fmtQty(totals.orcado)}</span>
-      </div>`);
-    } else if (hasBudget) {
-      totalCells.push(`<div class="myio-cgc__total">
-        <span class="myio-cgc__total-label myio-cgc__total-label--budget">Or&ccedil;ado</span>
-        <span class="myio-cgc__total-value" data-total="budget">${this.fmtQty(totals.budget)}</span>
-      </div>`);
-    }
-    const totalsMod = totalCells.length === 1 ? " myio-cgc__totals--one" : totalCells.length === 2 ? " myio-cgc__totals--two" : "";
-    let deltasHtml = "";
-    const dcell = (labelHtml, badgeHtml2) => `<div class="myio-cgc__delta"><span class="myio-cgc__delta-label">${labelHtml}</span>${badgeHtml2}</div>`;
-    if (hasOrcado) {
-      const cells = [];
-      if (hasPrev) {
-        cells.push(dcell("vs A-1", this.deltaBadge(totals.realized, totals.previousYear)));
-        cells.push(dcell("vs Or&ccedil;ado", this.deltaBadge(totals.realized, totals.orcado)));
-      } else {
-        cells.push(dcell("vs Or&ccedil;ado", this.deltaBadge(totals.realized, totals.orcado)));
-      }
-      cells.push(
-        `<div class="myio-cgc__delta"><span class="myio-cgc__delta-label" data-total="budget">${hasBudget ? `Meta ${this.fmtQty(totals.budget)}` : "Meta"}</span>${hasBudget ? this.deltaBadge(totals.realized, totals.budget) : ""}</div>`
+      valueCells.push(valueCell("prev", "A-1", "prev", t.previousYear));
+      const lines = [];
+      if (hasOrcado || hasBudget) lines.push(noDataLine("--cgc-orcado", "Or&ccedil;."));
+      if (hasMetaCol) lines.push(noDataLine("--cgc-budget", "Meta"));
+      if (lines.length) anyDelta = true;
+      deltaCells.push(deltaLines(lines));
+    }
+    valueCells.push(valueCell("realized", "Realizado", "realized", t.realized));
+    if (hasPrev) {
+      anyDelta = true;
+      deltaCells.push(
+        deltaLines([vsLine("--cgc-realized", "A-1", "--cgc-prev", this.growthBadge(t.realized, t.previousYear))])
       );
-      const mod = cells.length === 3 ? " myio-cgc__deltas--three" : cells.length === 1 ? " myio-cgc__deltas--one" : "";
-      deltasHtml = `<div class="myio-cgc__deltas${mod}">${cells.join("")}</div>`;
     } else {
-      const deltaCells = [];
-      if (hasPrev) {
-        deltaCells.push(dcell("vs A-1", this.deltaBadge(totals.realized, totals.previousYear)));
-      }
-      if (hasBudget) {
-        deltaCells.push(dcell("vs Or&ccedil;ado", this.deltaBadge(totals.realized, totals.budget)));
-      }
-      deltasHtml = deltaCells.length ? `<div class="myio-cgc__deltas${deltaCells.length === 1 ? " myio-cgc__deltas--one" : ""}">${deltaCells.join("")}</div>` : "";
+      deltaCells.push(deltaLines([]));
+    }
+    if (hasOrcado || hasBudget) {
+      anyDelta = true;
+      valueCells.push(valueCell("orcado", "Or&ccedil;ado", hasOrcado ? "orcado" : "budget", orcadoVal));
+      const lines = [
+        vsLine("--cgc-orcado", "Realizado", "--cgc-realized", this.deltaBadge(t.realized, orcadoVal))
+      ];
+      if (hasPrev) lines.push(vsLine("--cgc-orcado", "A-1", "--cgc-prev", this.growthBadge(orcadoVal, t.previousYear)));
+      deltaCells.push(deltaLines(lines));
+    }
+    if (hasMetaCol) {
+      anyDelta = true;
+      valueCells.push(valueCell("budget", "Meta", "budget", t.budget));
+      const lines = [
+        vsLine("--cgc-budget", "Realizado", "--cgc-realized", this.deltaBadge(t.realized, t.budget))
+      ];
+      if (hasPrev) lines.push(vsLine("--cgc-budget", "A-1", "--cgc-prev", this.growthBadge(t.budget, t.previousYear)));
+      deltaCells.push(deltaLines(lines));
     }
+    const nCols = valueCells.length;
+    const gridStyle = `grid-template-columns:repeat(${nCols},1fr);`;
+    const totalsHtml = `<div class="myio-cgc__totals" style="${gridStyle}">${valueCells.join("")}</div>`;
+    const deltasHtml = anyDelta ? `<div class="myio-cgc__deltas" style="${gridStyle}">${deltaCells.join("")}</div>` : "";
     const clickable = typeof this.params.onClick === "function";
     const expandable = this.params.expandable !== false;
     this.el.innerHTML = `
       ${expandable ? `<button type="button" class="myio-cgc__expand" title="${this.expanded ? "Recolher" : "Expandir"}">${this.expanded ? "\u2715" : "\u26F6"}</button>` : ""}
       <h4 class="myio-cgc__title${clickable ? " myio-cgc__title--clickable" : ""}" title="${this.esc(this.params.title)}">${this.esc(this.params.title)}</h4>
       <div class="myio-cgc__chart"><canvas></canvas></div>
-      <div class="myio-cgc__totals${totalsMod}">${totalCells.join("")}</div>
+      ${totalsHtml}
       ${deltasHtml}
     `;
     if (clickable) {
@@ -112599,7 +113290,7 @@ var EnergyPanelController = class {
 // src/components/energy-panel/styles.ts
 var ENERGY_PANEL_STYLES = `
   .energy-panel-wrap {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
     color: #1e293b;
     background-color: #f8fafc;
     padding: 16px;
@@ -113569,7 +114260,7 @@ var WaterPanelController = class {
 // src/components/water-panel/styles.ts
 var WATER_PANEL_STYLES = `
   .water-panel-wrap {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
     color: #1e293b;
     background-color: #f8fafc;
     padding: 16px;
@@ -114751,7 +115442,7 @@ var HEADER_SHOPPING_STYLES = `
 
 /* ===== Base ===== */
 .tbx-toolbar {
-    font-family: 'Nunito', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica;
+    font-family: 'Nunito', system-ui, sans-serif;
     color: var(--tbx-text);
     background: var(--tbx-bg);
     width: 100%;
@@ -116146,7 +116837,7 @@ var MENU_SHOPPING_STYLES = `
   height: 100%;
   padding: 16px 0;
   box-sizing: border-box;
-  font-family: 'Nunito', "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   position: relative;
   background: var(--bg);
   color: var(--text);
@@ -117427,8 +118118,7 @@ var TELEMETRY_GRID_SHOPPING_STYLES = `
   --brand: #5B2EBC;
   --brand-ghost: rgba(91, 46, 188, 0.08);
   --bg-soft: #f7fbff;
-  --font-ui: 'Nunito', Inter, 'Inter var', 'Plus Jakarta Sans', 'SF Pro Text', system-ui, -apple-system, Segoe UI,
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-ui: 'Nunito', system-ui, sans-serif;
 }
 
 /* Light mode explicit */
@@ -117782,8 +118472,7 @@ var TELEMETRY_GRID_SHOPPING_STYLES = `
   --brand: #5B2EBC;
   --brand-ghost: rgba(91, 46, 188, 0.08);
   --bg-soft: #f7fbff;
-  --font-ui: 'Nunito', Inter, 'Inter var', 'Plus Jakarta Sans', 'SF Pro Text', system-ui, -apple-system, Segoe UI,
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-ui: 'Nunito', system-ui, sans-serif;
 
   position: fixed;
   inset: 0;
@@ -118365,7 +119054,7 @@ var TELEMETRY_GRID_SHOPPING_STYLES = `
   text-overflow: ellipsis;
 }
 `;
-function injectStyles14(_container) {
+function injectStyles15(_container) {
   const styleId = "telemetry-grid-shopping-styles";
   if (document.getElementById(styleId)) {
     return;
@@ -118413,7 +119102,7 @@ var TelemetryGridShoppingView = class {
   // Render
   // =========================================================================
   render() {
-    injectStyles14(this.root);
+    injectStyles15(this.root);
     this.root.innerHTML = this.buildHTML();
     this.cacheElements();
     this.bindEvents();
@@ -119466,7 +120155,7 @@ var TELEMETRY_INFO_SHOPPING_STYLES = `
   padding: 12px !important;
   background: var(--tis-bg) !important;
   color: var(--tis-text) !important;
-  font-family: 'Nunito', Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  font-family: 'Nunito', system-ui, sans-serif !important;
   box-sizing: border-box !important;
   border-radius: 12px !important;
   overflow: auto !important;
@@ -120084,7 +120773,7 @@ var TELEMETRY_INFO_SHOPPING_STYLES = `
   }
 }
 `;
-function injectStyles15(_container) {
+function injectStyles16(_container) {
   const styleId = "telemetry-info-shopping-styles-v2";
   if (document.getElementById(styleId)) {
     return;
@@ -120144,7 +120833,7 @@ var TelemetryInfoShoppingView = class _TelemetryInfoShoppingView {
   // Render
   // =========================================================================
   render() {
-    injectStyles15(this.root);
+    injectStyles16(this.root);
     this.root.innerHTML = this.buildHTML();
     this.cacheElements();
     this.bindEvents();
@@ -121461,7 +122150,7 @@ var OPERATIONAL_GENERAL_LIST_STYLES = `
   display: flex;
   flex-direction: column;
   background: transparent;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
 }
 
 /* ====== LIGHT/DARK THEME MODE ====== */
@@ -123896,7 +124585,7 @@ var DEVICE_OPERATIONAL_CARD_STYLES = `
   --myio-chip-not-installed-bg: #e9d5ff;
   --myio-chip-not-installed-fg: #7c3aed;
 
-  font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   background: var(--alarms-bg-primary);
   color: var(--alarms-text-primary);
   height: 100%;
@@ -125548,7 +126237,7 @@ var DEVICE_OPERATIONAL_CARD_GRID_STYLES = `
   --grid-accent: #8b5cf6;
   --grid-accent-light: rgba(139, 92, 246, 0.1);
 
-  font-family: 'Inter', 'Roboto', 'Segoe UI', sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   background: var(--grid-bg-primary);
   color: var(--grid-text-primary);
   height: 100%;
@@ -128891,10 +129580,10 @@ var AlarmsNotificationsPanelView = class {
     const renderListPanel = (group, items, sel) => {
       if (items.length === 0) return '<div class="afm-empty">Nenhum item encontrado</div>';
       return items.map((item) => {
-        const esc5 = this.esc(item);
+        const esc6 = this.esc(item);
         return `<label class="afm-check-item">
-          <input type="checkbox" class="afm-checkbox" data-group="${group}" data-value="${esc5}"${sel.has(item) ? " checked" : ""}>
-          <span class="afm-check-label">${esc5}</span>
+          <input type="checkbox" class="afm-checkbox" data-group="${group}" data-value="${esc6}"${sel.has(item) ? " checked" : ""}>
+          <span class="afm-check-label">${esc6}</span>
         </label>`;
       }).join("");
     };
@@ -130378,7 +131067,7 @@ var OPERATIONAL_DASHBOARD_STYLES = `
     width: 100%;
     background: transparent;
     color: var(--ink-1, #f1f5f9);
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
     overflow: auto;
     padding: 0;
     box-sizing: border-box;
@@ -133931,7 +134620,7 @@ var BAS_DASHBOARD_STYLES = `
   flex-direction: column;
   width: 100%;
   height: 100%;
-  font-family: 'Roboto', 'Segoe UI', sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   overflow: hidden;
   background: var(--bas-bg-main);
   color: var(--bas-text-primary);
@@ -134719,7 +135408,7 @@ function injectFancoilRemoteStyles() {
       background: #BBB8A6;
       border-radius: 18px;
       padding: 12px;
-      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       color: #18446C;
       display: flex;
       flex-direction: column;
@@ -135009,7 +135698,7 @@ function injectFancoilRemoteStyles() {
       text-align: center;
       max-width: 360px;
       width: 90%;
-      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       color: #222;
     }
 
@@ -135539,7 +136228,7 @@ function injectSolenoidControlStyles() {
       justify-content: center;
       gap: 5%;
       margin: 0;
-      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       color: #18446C;
       box-sizing: border-box;
       overflow: hidden;
@@ -135660,7 +136349,7 @@ function injectSolenoidControlStyles() {
       text-align: center;
       max-width: 90%;
       width: 300px;
-      font-family: 'Segoe UI', Arial, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       z-index: 2147483647;
       color: #222;
     }
@@ -136053,7 +136742,7 @@ function injectSwitchControlStyles() {
       border-radius: 12px;
       background: #ffffff;
       border: 1px solid #e0e0e0;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       transition: all 0.2s ease;
       cursor: pointer;
       user-select: none;
@@ -136616,7 +137305,7 @@ function injectActionButtonStyles() {
       gap: 8px;
       border: none;
       cursor: pointer;
-      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       font-weight: 600;
       white-space: nowrap;
       transition: all 0.2s ease;
@@ -136942,7 +137631,7 @@ var SCHEDULING_SHARED_STYLES = `
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   color: #e0e0e0;
   box-sizing: border-box;
 }
@@ -137464,7 +138153,7 @@ var SCHEDULING_SHARED_STYLES = `
   text-align: center;
   max-width: 360px;
   width: 100%;
-  font-family: sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   color: #222 !important;
 }
 
@@ -139122,7 +139811,7 @@ var STYLES = `
   --dgv6-card: #0f1d30;
   --dgv6-bg: rgba(11, 18, 32, 0.65);
   --dgv6-accent: #38bdf8;
-  --dgv6-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --dgv6-font: 'Nunito', system-ui, sans-serif;
 
   display: flex;
   flex-direction: column;
@@ -139320,7 +140009,7 @@ var STYLES = `
   color: var(--dgv6-ink-2);
 }
 `;
-function injectStyles16() {
+function injectStyles17() {
   if (document.getElementById(CSS_ID6)) return;
   const style = document.createElement("style");
   style.id = CSS_ID6;
@@ -139359,7 +140048,7 @@ var DeviceGridV6View = class {
   // Render
   // =========================================================================
   render() {
-    injectStyles16();
+    injectStyles17();
     this.root.innerHTML = this.buildHTML();
     this.cacheElements();
     this.bindEvents();
@@ -139837,7 +140526,7 @@ function injectOnOffDeviceModalStyles() {
       flex-direction: row;
       width: 100%;
       max-width: 100%;
-      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       box-sizing: border-box;
       overflow: hidden;
     }
@@ -140736,7 +141425,7 @@ function injectOnOffTimelineStyles() {
 
     .${ONOFF_TIMELINE_CSS_PREFIX} {
       width: 100%;
-      font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       box-sizing: border-box;
     }
 
@@ -141729,7 +142418,7 @@ function exportTimelineToPDF(data, labels = {}, locale = "pt-BR", opts = {}) {
   const docTitle = buildActivationReportTitle(deviceName, opts.customerName);
   const issuedAt = formatIssuedAt(/* @__PURE__ */ new Date(), locale);
   const utilization = data.totalHours > 0 ? (data.totalOnMinutes / (data.totalHours * 60) * 100).toFixed(1) : "0.0";
-  const esc5 = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+  const esc6 = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
   const htmlContent = `
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -141739,7 +142428,7 @@ function exportTimelineToPDF(data, labels = {}, locale = "pt-BR", opts = {}) {
       <style>
         @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
         * { box-sizing: border-box; }
-        body { font-family: 'Nunito', 'Segoe UI', Arial, sans-serif; margin: 0; padding: 32px 40px; color: #1f2937; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+        body { font-family: 'Nunito', system-ui, sans-serif; margin: 0; padding: 32px 40px; color: #1f2937; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
 
         .report-header { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); color: #fff; border-radius: 14px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
         .report-header .brand { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; }
@@ -141781,14 +142470,14 @@ function exportTimelineToPDF(data, labels = {}, locale = "pt-BR", opts = {}) {
           <div class="brand">MyIO BAS</div>
           <h1>Relat\xF3rio de Acionamentos</h1>
           <div class="meta">
-            <div><b>Dispositivo:</b> ${esc5(deviceName)}</div>
+            <div><b>Dispositivo:</b> ${esc6(deviceName)}</div>
             <div><b>Per\xEDodo:</b> ${periodStart} \u2014 ${periodEnd}</div>
           </div>
         </div>
         ${customerName ? `
         <div class="customer-badge">
           <div class="label">Cliente</div>
-          <div class="value">${esc5(customerName)}</div>
+          <div class="value">${esc6(customerName)}</div>
         </div>` : ""}
       </div>
 
@@ -141799,7 +142488,7 @@ function exportTimelineToPDF(data, labels = {}, locale = "pt-BR", opts = {}) {
         </div>
         <div class="summary-card accent-green">
           <div class="summary-value">${formatDurationMinutes(data.totalOnMinutes)}</div>
-          <div class="summary-label">Tempo ${esc5(labelOn)}</div>
+          <div class="summary-label">Tempo ${esc6(labelOn)}</div>
         </div>
         <div class="summary-card accent-amber">
           <div class="summary-value">${utilization}%</div>
@@ -141827,7 +142516,7 @@ function exportTimelineToPDF(data, labels = {}, locale = "pt-BR", opts = {}) {
             <tr>
               <td>${formatDateForExport(seg.startTime, locale)}</td>
               <td>${formatDateForExport(seg.endTime, locale)}</td>
-              <td><span class="pill ${seg.state === "on" ? "pill-on" : "pill-off"}">${seg.state === "on" ? esc5(labelOn) : esc5(labelOff)}</span></td>
+              <td><span class="pill ${seg.state === "on" ? "pill-on" : "pill-off"}">${seg.state === "on" ? esc6(labelOn) : esc6(labelOff)}</span></td>
               <td>${formatDurationMinutes(seg.durationMinutes)}</td>
               <td>${seg.source === "manual" ? "Manual" : seg.source === "schedule" ? "Agendamento" : seg.source === "automation" ? "Automa\xE7\xE3o" : "Desconhecido"}</td>
             </tr>
@@ -141836,7 +142525,7 @@ function exportTimelineToPDF(data, labels = {}, locale = "pt-BR", opts = {}) {
       </table>
 
       <div class="footer">
-        <span class="issued">Emitido em ${issuedAt}</span>${customerName ? ` &middot; ${esc5(customerName)}` : ""} &middot; <span class="brand">MyIO BAS</span>
+        <span class="issued">Emitido em ${issuedAt}</span>${customerName ? ` &middot; ${esc6(customerName)}` : ""} &middot; <span class="brand">MyIO BAS</span>
       </div>
     </body>
     </html>
@@ -141872,7 +142561,7 @@ function exportSchedulesToPDF(schedules, deviceName, locale = "pt-BR") {
       <meta charset="UTF-8">
       <title>Agendamentos - ${deviceName}</title>
       <style>
-        body { font-family: 'Segoe UI', Arial, sans-serif; margin: 40px; color: #1f2937; }
+        body { font-family: 'Nunito', system-ui, sans-serif; margin: 40px; color: #1f2937; }
         h1 { color: #3b82f6; font-size: 24px; margin-bottom: 8px; }
         .subtitle { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
         .schedule-card { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
@@ -142623,7 +143312,7 @@ var OnOffDeviceModalView = class {
       position: relative; background: #1f2937; color: #f9fafb;
       border-radius: 12px; padding: 24px 28px; min-width: 280px; max-width: 380px;
       box-shadow: 0 20px 60px rgba(0,0,0,0.5); text-align: center;
-      font-family: sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
     `;
     const msg = document.createElement("p");
     msg.style.cssText = "margin: 0 0 20px; font-size: 15px; line-height: 1.5;";
@@ -143067,7 +143756,7 @@ var OnOffDeviceModalController = class {
         display: flex;
         flex-direction: column;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
       }
 
       .${ON_OFF_MODAL_CSS_PREFIX}-content.maximized {
@@ -143419,7 +144108,7 @@ function injectAmbienteModalStyles() {
       align-items: center;
       justify-content: center;
       z-index: 10000;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.2s ease, visibility 0.2s ease;
@@ -144377,7 +145066,7 @@ function injectAmbienteGroupModalStyles() {
       align-items: center;
       justify-content: center;
       z-index: 10000;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       opacity: 0;
       visibility: hidden;
       transition: opacity 0.2s ease, visibility 0.2s ease;
@@ -145284,7 +145973,7 @@ function injectSidebarMenuStyles() {
       background: #ffffff;
       border-right: 1px solid #e5e7eb;
       border-radius: 0 16px 16px 0;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Nunito', system-ui, sans-serif;
       transition: width var(--sidebar-transition);
       overflow: hidden;
       z-index: 100;
@@ -147554,7 +148243,7 @@ var STYLES2 = `
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'Roboto', Inter, system-ui, -apple-system, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
   #${MODAL_ID4} .gcdr-card {
     background: #fff;
@@ -147826,7 +148515,7 @@ var STYLES2 = `
   }
   #${MODAL_ID4} .gcdr-fail-item:last-child { border-bottom: none; }
 `;
-function injectStyles17() {
+function injectStyles18() {
   if (document.getElementById(`${MODAL_ID4}-styles`)) return;
   const style = document.createElement("style");
   style.id = `${MODAL_ID4}-styles`;
@@ -147935,7 +148624,7 @@ function escHtml3(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 async function openGCDRSyncModal(params) {
-  injectStyles17();
+  injectStyles18();
   removeExistingModal();
   if (!params.thingsboardToken) {
     alert("Token ThingsBoard n\xE3o encontrado. Fa\xE7a login novamente.");
@@ -148192,7 +148881,7 @@ var STYLES3 = `
     display: flex;
     align-items: center;
     justify-content: center;
-    font-family: 'Roboto', Inter, system-ui, -apple-system, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
   #${MODAL_ID5} .abm-card {
     background: #fff;
@@ -148473,7 +149162,7 @@ var STYLES3 = `
     position: fixed; inset: 0;
     background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
     z-index: 99999; display: flex; align-items: center; justify-content: center;
-    font-family: 'Roboto', Inter, system-ui, -apple-system, sans-serif;
+    font-family: 'Nunito', system-ui, sans-serif;
   }
   .abm-confirm-modal {
     background: #fff; border-radius: 10px; width: min(420px, 94vw);
@@ -148503,7 +149192,7 @@ var STYLES3 = `
   .abm-confirm-btn--confirm { background: #e67e22; color: #fff; }
   .abm-confirm-btn--confirm:hover { background: #cf6d17; }
 `;
-function injectStyles18() {
+function injectStyles19() {
   if (document.getElementById(`${MODAL_ID5}-styles`)) return;
   const style = document.createElement("style");
   style.id = `${MODAL_ID5}-styles`;
@@ -149181,7 +149870,7 @@ async function fetchBundle(customerTB_ID, gcdrTenantId, baseUrl) {
   return json.data;
 }
 async function openAlarmBundleMapModal(params) {
-  injectStyles18();
+  injectStyles19();
   removeExistingModal2();
   if (!params.customerTB_ID) {
     alert("Customer TB ID n\xE3o informado. N\xE3o \xE9 poss\xEDvel carregar o mapa de alarmes.");
@@ -149937,7 +150626,7 @@ var DEFAULT_INGESTION_API = "https://management.myio-bas.com";
 var DEFAULT_INGESTION_AUTH = "https://api.myio-bas.com/auth/token";
 var DEFAULT_PROVISIONING_API = "https://provisioning.apps.myio-bas.com";
 var S = {
-  root: "font-family:system-ui,sans-serif;font-size:14px;color:#111;background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;",
+  root: "font-family:Nunito, system-ui, sans-serif;font-size:14px;color:#111;background:#fff;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;",
   header: "padding:12px 16px;background:#f5f6fa;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:12px;",
   badge: (bg, fg) => `font-size:12px;padding:2px 8px;border-radius:9999px;background:${bg};color:${fg};`,
   tableWrap: "overflow-x:auto;border-bottom:1px solid #e0e0e0;",
@@ -150329,11 +151018,11 @@ function _esc(s) {
   const str = s == null ? "" : String(s);
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
-var STYLE_ID12 = "ntw-styles";
+var STYLE_ID13 = "ntw-styles";
 function _injectStyles2() {
-  if (document.getElementById(STYLE_ID12)) return;
+  if (document.getElementById(STYLE_ID13)) return;
   const s = document.createElement("style");
-  s.id = STYLE_ID12;
+  s.id = STYLE_ID13;
   s.textContent = NTW_CSS;
   document.head.appendChild(s);
 }
@@ -151601,7 +152290,7 @@ var TicketDetailModal = class {
         width: 100%; max-width: 580px;
         max-height: 86vh; min-height: 0;
         display: flex; flex-direction: column;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-family: 'Nunito', system-ui, sans-serif;
         font-size: 13px; color: #1a1a2e;
         animation: tdm-slide-up 0.2s ease;
       }
@@ -152353,7 +153042,7 @@ var HEADER_ANNOTATIONS_STYLES = `
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
   display: flex;
   flex-direction: column;
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   color: #1e293b;
   overflow: hidden;
   animation: myio-anno-pop 0.16s ease-out;
@@ -153238,7 +153927,7 @@ var STYLES4 = `
   border-radius: 12px;
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
   padding: 18px 20px;
-  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family: 'Nunito', system-ui, sans-serif;
   color: #1e293b;
 }
 .${MODAL_DOM_ID} .${MODAL_DOM_ID}__title {
@@ -153296,7 +153985,7 @@ var STYLES4 = `
   background: #cbd5e1; border-color: #cbd5e1; cursor: not-allowed;
 }
 `;
-function injectStyles19() {
+function injectStyles20() {
   if (typeof document === "undefined") return;
   if (document.getElementById(STYLES_ID3)) return;
   const el2 = document.createElement("style");
@@ -153306,7 +153995,7 @@ function injectStyles19() {
 }
 var _activeBackdrop = null;
 function openExportModal(options) {
-  injectStyles19();
+  injectStyles20();
   closeExportModal();
   const backdrop = document.createElement("div");
   backdrop.className = `${MODAL_DOM_ID}-backdrop`;
@@ -155075,6 +155764,7 @@ var version = package_default.version || "0.0.0";
   createFilterModalComponent,
   createFooterComponent,
   createFreshdeskTicket,
+  createGoalsBarTooltip,
   createGranularitySelector,
   createGroupScheduleCard,
   createHeaderComponent,