myio-js-library 0.1.525 → 0.1.527

package/dist/index.cjs

@@ -768,7 +768,7 @@ module.exports = __toCommonJS(src_exports);
 // package.json
 var package_default = {
   name: "myio-js-library",
-  version: "0.1.525",
+  version: "0.1.527",
   description: "A clean, standalone JS SDK for MYIO projects",
   license: "MIT",
   repository: "github:gh-myio/myio-js-library",
@@ -3551,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;
@@ -3877,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);
@@ -5987,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;
@@ -6589,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; }
@@ -9320,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);
@@ -9567,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;
 }
 
@@ -10181,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;
@@ -10373,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;
@@ -10607,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;
@@ -17231,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%);
@@ -18924,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); }
@@ -19073,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%);
@@ -21217,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 {
@@ -21753,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;
@@ -22284,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;
   }
@@ -23185,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);
       ">
       
@@ -23657,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);
@@ -24034,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;
@@ -24348,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) */
@@ -24445,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) */
@@ -26815,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;
       }
@@ -26843,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;}
@@ -28604,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",
@@ -30155,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"
 };
@@ -32275,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 {
@@ -33465,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; }
@@ -33965,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);
@@ -33997,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);
@@ -34018,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);
     });
@@ -39855,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 {
@@ -41414,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,
@@ -41449,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;
@@ -44486,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;
 }
@@ -45287,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 {
@@ -46259,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;
@@ -47388,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;
@@ -47804,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 {
@@ -48956,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 {
@@ -49434,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;
 }
@@ -51891,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 {
@@ -57615,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;}
@@ -57888,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);
@@ -59476,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 {
@@ -60030,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;
@@ -63389,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);
@@ -63430,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;
@@ -63701,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;
@@ -65286,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;
@@ -66869,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 {
@@ -69595,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;
@@ -69931,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";
@@ -71629,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({
@@ -71736,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>
@@ -71823,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>
@@ -71831,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>
@@ -72407,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="
@@ -72531,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>
@@ -72578,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>
@@ -72586,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>
@@ -73271,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;
@@ -82855,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;
@@ -84120,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;
@@ -85608,7 +85608,7 @@ function injectStyles11(doc) {
   opacity: 0;
   pointer-events: none; /* unpinned: never blocks the chart hover */
   transition: opacity .15s ease;
-  font-family: Nunito, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  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
@@ -85748,6 +85748,26 @@ function injectStyles11(doc) {
   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;
@@ -85782,6 +85802,13 @@ function resolveAccent(explicit, doc) {
   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;
@@ -85790,9 +85817,10 @@ function renderRow(row, level) {
   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 pctHtml = pct != null && isFinite(pct) ? `<span class="myio-gbt__pct">${esc5(fmtPct3(pct))}</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>` + pctHtml + `</div>`;
+  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>`;
@@ -85909,7 +85937,7 @@ function createGoalsBarTooltip(opts) {
     hideTimer = setTimeout(() => {
       if (!pinned) el2.classList.remove("myio-gbt--visible");
       hideTimer = null;
-    }, 260);
+    }, 450);
   }
   function destroy() {
     clearHideTimer();
@@ -85971,13 +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");
@@ -85991,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;
@@ -86014,10 +86061,17 @@ function _applyTheme(root) {
 }
 function _formatValue(value, domain) {
   const cfg = DOMAIN_CFG[domain] || DOMAIN_CFG.energy;
-  const dec = domain === "temperature" ? 1 : 2;
+  const U = typeof window !== "undefined" ? window.MyIOUtils : void 0;
+  if (domain === "energy" && typeof U?.formatEnergyWithSettings === "function") {
+    return U.formatEnergyWithSettings(value);
+  }
+  if (domain === "water" && typeof U?.formatWaterWithSettings === "function") {
+    return U.formatWaterWithSettings(value);
+  }
+  const dec = domain === "temperature" ? 1 : 3;
   const ptBR = (v, d) => v.toLocaleString("pt-BR", { minimumFractionDigits: d, maximumFractionDigits: d });
   if (cfg.threshold && cfg.unitLarge && Math.abs(value) >= cfg.threshold) {
-    return `${ptBR(value / cfg.threshold, 2)} ${cfg.unitLarge}`;
+    return `${ptBR(value / cfg.threshold, 3)} ${cfg.unitLarge}`;
   }
   return `${ptBR(value, dec)} ${cfg.unit}`;
 }
@@ -86152,7 +86206,7 @@ async function _fetchSeriesTotals(domain, boundaries, viewGran, fetchGran) {
 async function _fetchDayData(domain) {
   const boundaries = _buildDayBoundaries(_periodStart, _periodEnd);
   const labels = boundaries.map((b) => b.label);
-  const totals = await _fetchSeriesTotals(domain, boundaries, "1d", "1d") ?? await _fetchTotalsThrottled(domain, boundaries, "1d");
+  const totals = await _fetchSeriesTotals(domain, boundaries, "1h", "1h") ?? await _fetchTotalsThrottled(domain, boundaries, "1d");
   return { labels, totals };
 }
 async function _fetchHourData(domain, dateISO) {
@@ -86167,6 +86221,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);
@@ -86180,7 +86254,9 @@ async function _fetchPrevYearTotals(domain, gran, boundaries) {
     pe.setFullYear(pe.getFullYear() - 1);
     return { ...b, startTs: ps.getTime(), endTs: pe.getTime() };
   });
-  const viaSeries = await _fetchSeriesTotals(domain, prevBoundaries, gran, gran === "1M" ? "1d" : gran);
+  const seriesViewGran = gran === "1d" ? "1h" : gran;
+  const seriesFetchGran = gran === "1M" ? "1d" : gran === "1d" ? "1h" : gran;
+  const viaSeries = await _fetchSeriesTotals(domain, prevBoundaries, seriesViewGran, seriesFetchGran);
   if (viaSeries) return viaSeries;
   const fetchFn = _options.fetchConsumption;
   const totals = new Array(prevBoundaries.length).fill(0);
@@ -86237,34 +86313,6 @@ function _goalNodeValue(node) {
   const v = node.adjustedValue ?? node.value;
   return v == null ? null : v;
 }
-function _budgetNodeValue(node) {
-  if (!node) return null;
-  return node.value == null ? null : node.value;
-}
-function _buildBudgetLine(domain, labels, gran, dateISO) {
-  const tree = _getGoalsTree(domain);
-  if (!tree) return labels.map(() => null);
-  if (gran === "1h") {
-    const ref = (dateISO || _selectedDate).split("-");
-    const mm = ref[1] ?? "";
-    const dd = ref[2] ?? "";
-    if (tree.hourly && Object.keys(tree.hourly).length > 0) {
-      return labels.map((lbl) => {
-        const hh = lbl.replace("h", "").padStart(2, "0");
-        return _budgetNodeValue(tree.hourly[`${mm}-${dd}T${hh}`]);
-      });
-    }
-    return labels.map(() => null);
-  }
-  if (gran === "1M") {
-    return labels.map((lbl) => {
-      const m = MONTH_LABELS_PT.indexOf(lbl);
-      if (m < 0) return null;
-      return _budgetNodeValue(tree.monthly?.[String(m + 1).padStart(2, "0")]);
-    });
-  }
-  return labels.map((lbl) => _budgetNodeValue(tree.daily?.[_labelToDailyKey(lbl)]));
-}
 function _buildGoalLine(domain, labels, gran, dateISO) {
   const tree = _getGoalsTree(domain);
   if (!tree) return labels.map(() => null);
@@ -86322,12 +86370,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,
@@ -86337,6 +86387,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) {
@@ -86352,6 +86404,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
     });
   }
@@ -86365,7 +86419,6 @@ 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;
-  const budgetLine = _buildBudgetLine(domain, labels, _currentGran, _selectedDate);
   let accent = cfg.primaryColor;
   try {
     const root = _overlay || _getTopDoc().documentElement;
@@ -86377,32 +86430,47 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
     const realizado = totals[idx];
     const meta = goalLine[idx];
     const prev = prevTotals ? prevTotals[idx] : null;
-    const budget = budgetLine[idx];
-    const ref = meta != null && meta > 0 ? meta : realizado || null;
-    const pctOf = (v) => v != null && ref ? v / ref * 100 : null;
     const rows = [];
-    rows.push({
-      icon: "\u{1F4CA}",
-      label: "Realizado",
-      color: cfg.barColor,
-      valueText: _formatValue(realizado, domain),
-      pct: meta != null && meta > 0 ? pctOf(realizado) : null
-    });
     if (prev != null && prev > 0) {
       rows.push({
         icon: "\u{1F553}",
         label: "A-1 (ano anterior)",
         color: "#94a3b8",
         valueText: _formatValue(prev, domain),
-        pct: pctOf(prev)
+        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)
+        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) {
@@ -86426,15 +86494,6 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
       }
       rows.push(metaRow);
     }
-    if (budget != null && (meta == null || Math.abs(budget - meta) > 1e-6)) {
-      rows.push({
-        icon: "\u{1F4CB}",
-        label: "Or\xE7ado",
-        color: "#f59e0b",
-        valueText: _formatValue(budget, domain),
-        pct: pctOf(budget)
-      });
-    }
     let subtitle;
     if (meta != null && meta > 0) {
       const dev = (realizado - meta) / meta * 100;
@@ -86442,6 +86501,13 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
     }
     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;
@@ -86453,10 +86519,11 @@ function _renderChart(canvas, labels, totals, goalLine, domain, prevTotals) {
       if (!dp) return;
       const idx = dp.dataIndex;
       const rect = context.chart.canvas.getBoundingClientRect();
-      _barTip.show(buildBarTipData(idx), {
-        clientX: rect.left + tt.caretX,
-        clientY: rect.top + tt.caretY
-      });
+      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;
@@ -86473,7 +86540,9 @@ 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.
@@ -86584,6 +86653,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;
@@ -86635,7 +86713,7 @@ function _injectStyles(topDoc) {
   const s = topDoc.createElement("style");
   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);}
@@ -86692,6 +86770,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>
@@ -86777,6 +86859,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");
@@ -86846,7 +86942,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";
@@ -87193,7 +87289,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};
@@ -87628,7 +87724,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;
@@ -88316,7 +88412,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 {
@@ -89523,7 +89619,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;
@@ -89940,7 +90036,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;
@@ -91295,7 +91391,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 {
@@ -92126,7 +92222,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};
@@ -92606,7 +92702,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="
@@ -92665,7 +92761,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>
@@ -92674,49 +92770,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>
             ` : ""}
@@ -92724,13 +92820,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>
             ` : ""}
@@ -92738,19 +92834,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>
@@ -94839,7 +94935,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);
@@ -95010,7 +95106,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();
@@ -96278,7 +96374,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);
@@ -97315,7 +97411,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);">
@@ -97919,7 +98015,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;
@@ -98210,7 +98306,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;
@@ -98449,7 +98545,7 @@ function injectStyles12() {
   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 {
@@ -98670,7 +98766,7 @@ function injectStyles13() {
   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;
@@ -98770,7 +98866,7 @@ function injectStyles13() {
   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 {
@@ -102641,7 +102737,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;
@@ -102785,7 +102881,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;
@@ -102811,7 +102907,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;
@@ -103759,7 +103855,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;
 }
@@ -110874,7 +110970,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 */
@@ -112482,7 +112578,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"]{
@@ -112504,7 +112600,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;}
@@ -112512,7 +112608,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;}
@@ -112521,7 +112617,7 @@ 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(4,1fr);
@@ -112529,13 +112625,13 @@ var CSS3 = `
 }
 .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 9.5px 'Nunito',sans-serif;line-height:1.35;white-space:nowrap;}
+.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 11px '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{
@@ -112544,16 +112640,23 @@ var CSS3 = `
 }
 .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 9px 'Nunito',sans-serif;color:var(--cgc-muted);line-height:1.4;margin-bottom:2px;}
-.myio-cgc__delta-value{display:block;font:800 11.5px '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',sans-serif;color:var(--cgc-muted);}
+.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;
@@ -112809,49 +112912,49 @@ var CustomerGoalsCard = class {
     const hasBudget = !!s.budget || !!(s.budgetBreakdown && s.budgetBreakdown.length);
     const hasOrcado = this.hasRawOrcado();
     const t = totals;
-    const yl = this.params.yearLabels;
-    const curLbl = yl?.current || "Atual";
-    const prevLbl = yl?.previous || "A-1";
     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 deltaCell = (header, chipsHtml) => `<div class="myio-cgc__delta">${header ? `<span class="myio-cgc__delta-label">${header}</span>` : ""}${chipsHtml}</div>`;
-    const miniChip = (label, badgeHtml2) => `<span class="myio-cgc__delta-mini"><span class="myio-cgc__delta-mini-label">${label}</span>${badgeHtml2}</span>`;
+    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) {
       valueCells.push(valueCell("prev", "A-1", "prev", t.previousYear));
-      const grow = [];
-      if (hasOrcado) grow.push(miniChip("Or&ccedil;.", this.growthBadge(t.orcado, t.previousYear)));
-      if (hasMetaCol) grow.push(miniChip("Meta", this.growthBadge(t.budget, t.previousYear)));
-      if (!hasOrcado && hasBudget) grow.push(miniChip("Or&ccedil;.", this.growthBadge(t.budget, t.previousYear)));
-      if (grow.length) {
-        anyDelta = true;
-        const header = grow.length > 1 ? "vs Or&ccedil;ado &amp; vs Meta" : "vs Or&ccedil;ado";
-        deltaCells.push(deltaCell(header, `<div class="myio-cgc__delta-dual">${grow.join("")}</div>`));
-      } else {
-        deltaCells.push(deltaCell("", ""));
-      }
+      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(
-        deltaCell(`${this.esc(curLbl)} &times; ${this.esc(prevLbl)}`, this.growthBadge(t.realized, t.previousYear))
+        deltaLines([vsLine("--cgc-realized", "A-1", "--cgc-prev", this.growthBadge(t.realized, t.previousYear))])
       );
     } else {
-      deltaCells.push(deltaCell("", ""));
+      deltaCells.push(deltaLines([]));
     }
     if (hasOrcado || hasBudget) {
       anyDelta = true;
       valueCells.push(valueCell("orcado", "Or&ccedil;ado", hasOrcado ? "orcado" : "budget", orcadoVal));
-      deltaCells.push(deltaCell("vs Or&ccedil;ado", this.deltaBadge(t.realized, 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));
-      deltaCells.push(deltaCell("vs Meta", this.deltaBadge(t.realized, 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);`;
@@ -113196,7 +113299,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;
@@ -114166,7 +114269,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;
@@ -115348,7 +115451,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%;
@@ -116743,7 +116846,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);
@@ -118024,8 +118127,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 */
@@ -118379,8 +118481,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;
@@ -120063,7 +120164,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;
@@ -122058,7 +122159,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 ====== */
@@ -124493,7 +124594,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%;
@@ -126145,7 +126246,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%;
@@ -130975,7 +131076,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;
@@ -134528,7 +134629,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);
@@ -135316,7 +135417,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;
@@ -135606,7 +135707,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;
     }
 
@@ -136136,7 +136237,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;
@@ -136257,7 +136358,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;
     }
@@ -136650,7 +136751,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;
@@ -137213,7 +137314,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;
@@ -137539,7 +137640,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;
 }
@@ -138061,7 +138162,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;
 }
 
@@ -139719,7 +139820,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;
@@ -140434,7 +140535,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;
     }
@@ -141333,7 +141434,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;
     }
 
@@ -142336,7 +142437,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; }
@@ -142469,7 +142570,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; }
@@ -143220,7 +143321,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;";
@@ -143664,7 +143765,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 {
@@ -144016,7 +144117,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;
@@ -144974,7 +145075,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;
@@ -145881,7 +145982,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;
@@ -148151,7 +148252,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;
@@ -148789,7 +148890,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;
@@ -149070,7 +149171,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);
@@ -150534,7 +150635,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;",
@@ -152198,7 +152299,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;
       }
@@ -152950,7 +153051,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;
@@ -153835,7 +153936,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 {