myio-js-library 0.1.185 → 0.1.186

package/dist/myio-js-library.umd.js

@@ -8863,8 +8863,8 @@
         return "dot--offline";
     }
   }
-  function buildDOM(state) {
-    const { entityObject, i18n, enableSelection, enableDragDrop } = state;
+  function buildDOM(state2) {
+    const { entityObject, i18n, enableSelection, enableDragDrop } = state2;
     const root = document.createElement("div");
     root.className = "myio-ho-card";
     root.setAttribute("role", "group");
@@ -9190,8 +9190,8 @@
     }
     return isOffline;
   }
-  function paint(root, state) {
-    const { entityObject, i18n, delayTimeConnectionInMins, isSelected, LogHelper: LogHelper2, activeTooltipDebug } = state;
+  function paint(root, state2) {
+    const { entityObject, i18n, delayTimeConnectionInMins, isSelected, LogHelper: LogHelper2, activeTooltipDebug } = state2;
     let statusDecisionSource = "unknown";
     if (entityObject.connectionStatus) {
       if (entityObject.connectionStatus === "offline") {
@@ -9243,7 +9243,7 @@
     numSpan.textContent = primaryValue;
     const barContainer = root.querySelector(".bar");
     const effContainer = root.querySelector(".myio-ho-card__eff");
-    if (state.enableSelection) {
+    if (state2.enableSelection) {
       const checkbox = root.querySelector('.myio-ho-card__select input[type="checkbox"]');
       if (checkbox) {
         checkbox.checked = !!isSelected;
@@ -9291,8 +9291,8 @@
       statusDot.className = `status-dot ${dotClass}`;
     }
   }
-  function bindEvents(root, state, callbacks) {
-    const { entityObject } = state;
+  function bindEvents(root, state2, callbacks) {
+    const { entityObject } = state2;
     const kebabBtn = root.querySelector(".myio-ho-card__kebab");
     const menu = root.querySelector(".myio-ho-card__menu");
     function toggleMenu() {
@@ -9348,9 +9348,9 @@
       const onSelectionChange = () => {
         const selectedIds = MyIOSelectionStore2.getSelectedIds();
         const isSelected = selectedIds.includes(entityObject.entityId);
-        if (state.isSelected !== isSelected) {
-          state.isSelected = isSelected;
-          paint(root, state);
+        if (state2.isSelected !== isSelected) {
+          state2.isSelected = isSelected;
+          paint(root, state2);
         }
       };
       MyIOSelectionStore2.on("selection:change", onSelectionChange);
@@ -9363,7 +9363,7 @@
           clearTimeout(TempRangeTooltip._hideTimer);
           TempRangeTooltip._hideTimer = null;
         }
-        TempRangeTooltip.show(root, state.entityObject, e);
+        TempRangeTooltip.show(root, state2.entityObject, e);
       };
       const hideTooltip = () => {
         TempRangeTooltip._startDelayedHide();
@@ -9381,7 +9381,7 @@
           clearTimeout(EnergyRangeTooltip._hideTimer);
           EnergyRangeTooltip._hideTimer = null;
         }
-        EnergyRangeTooltip.show(root, state.entityObject, e);
+        EnergyRangeTooltip.show(root, state2.entityObject, e);
       };
       const hideEnergyTooltip = () => {
         EnergyRangeTooltip._startDelayedHide();
@@ -9433,7 +9433,7 @@
         }
       });
     }
-    if (state.enableDragDrop) {
+    if (state2.enableDragDrop) {
       root.addEventListener("dragstart", (e) => {
         root.classList.add("is-dragging");
         e.dataTransfer.setData("text/plain", entityObject.entityId);
@@ -9475,17 +9475,17 @@
       throw new Error("renderCardComponentHeadOffice: containerEl is required");
     }
     ensureCss();
-    const state = normalizeParams(params);
-    const root = buildDOM(state);
-    state.isSelected = params.isSelected || false;
+    const state2 = normalizeParams(params);
+    const root = buildDOM(state2);
+    state2.isSelected = params.isSelected || false;
     containerEl.appendChild(root);
-    bindEvents(root, state, state.callbacks);
-    paint(root, state);
+    bindEvents(root, state2, state2.callbacks);
+    paint(root, state2);
     return {
       update(next) {
         if (next) {
-          Object.assign(state.entityObject, next);
-          paint(root, state);
+          Object.assign(state2.entityObject, next);
+          paint(root, state2);
         }
       },
       destroy() {
@@ -20794,15 +20794,45 @@
       }
     }
     /**
-     * Save mapInstantaneousPower to customer server_scope attributes
+     * Fetch child customer relations (level 1) from a parent customer
+     * Returns array of child customer IDs
      */
-    async saveCustomerPowerLimits(customerId, limits) {
+    async fetchChildCustomerIds(parentCustomerId) {
+      try {
+        const url = `${this.tbBaseUrl}/api/relations/info?fromId=${parentCustomerId}&fromType=CUSTOMER`;
+        const response = await fetch(url, {
+          method: "GET",
+          headers: {
+            "X-Authorization": `Bearer ${this.jwtToken}`,
+            "Content-Type": "application/json"
+          }
+        });
+        if (!response.ok) {
+          console.warn("[PowerLimitsPersister] Failed to fetch relations:", response.status);
+          return [];
+        }
+        const relations = await response.json();
+        if (!Array.isArray(relations) || relations.length === 0) {
+          console.log("[PowerLimitsPersister] No child customer relations found");
+          return [];
+        }
+        const childCustomerIds = relations.filter((rel) => rel.to?.entityType === "CUSTOMER" && rel.to?.id).map((rel) => rel.to.id);
+        console.log(`[PowerLimitsPersister] Found ${childCustomerIds.length} child customer(s)`);
+        return childCustomerIds;
+      } catch (error) {
+        console.error("[PowerLimitsPersister] Error fetching relations:", error);
+        return [];
+      }
+    }
+    /**
+     * Save power limits to a single customer (internal method)
+     */
+    async saveToSingleCustomer(customerId, limits) {
       try {
         const url = `${this.tbBaseUrl}/api/plugins/telemetry/CUSTOMER/${customerId}/attributes/SERVER_SCOPE`;
         const payload = {
           mapInstantaneousPower: limits
         };
-        console.log("[PowerLimitsPersister] Saving power limits:", payload);
         const response = await fetch(url, {
           method: "POST",
           headers: {
@@ -20812,10 +20842,41 @@
           body: JSON.stringify(payload)
         });
         if (!response.ok) {
-          throw this.createHttpError(response.status, await response.text().catch(() => ""));
+          console.warn(`[PowerLimitsPersister] Failed to save to customer ${customerId}:`, response.status);
+          return false;
         }
-        console.log("[PowerLimitsPersister] Successfully saved power limits");
-        return { ok: true };
+        return true;
+      } catch (error) {
+        console.error(`[PowerLimitsPersister] Error saving to customer ${customerId}:`, error);
+        return false;
+      }
+    }
+    /**
+     * Save mapInstantaneousPower to customer server_scope attributes
+     * Also propagates to all child customers (level 1 relations)
+     */
+    async saveCustomerPowerLimits(customerId, limits) {
+      try {
+        console.log("[PowerLimitsPersister] Saving power limits:", { customerId, limits });
+        const mainSaveSuccess = await this.saveToSingleCustomer(customerId, limits);
+        if (!mainSaveSuccess) {
+          throw new Error("Failed to save to main customer");
+        }
+        console.log("[PowerLimitsPersister] Successfully saved to main customer");
+        const childCustomerIds = await this.fetchChildCustomerIds(customerId);
+        let successCount = 1;
+        if (childCustomerIds.length > 0) {
+          console.log(`[PowerLimitsPersister] Saving to ${childCustomerIds.length} child customer(s)...`);
+          const savePromises = childCustomerIds.map(
+            (childId) => this.saveToSingleCustomer(childId, limits)
+          );
+          const results = await Promise.all(savePromises);
+          const childSuccessCount = results.filter(Boolean).length;
+          successCount += childSuccessCount;
+          console.log(`[PowerLimitsPersister] Saved to ${childSuccessCount}/${childCustomerIds.length} child customer(s)`);
+        }
+        console.log(`[PowerLimitsPersister] Total: saved to ${successCount} customer(s)`);
+        return { ok: true, savedCount: successCount };
       } catch (error) {
         console.error("[PowerLimitsPersister] Error saving power limits:", error);
         return { ok: false, error: this.mapError(error) };
@@ -22005,6 +22066,136 @@
         this.annotations = [];
       }
     }
+    /**
+     * Show a confirmation modal and return user's choice
+     * Replaces native confirm() for better UX
+     */
+    showConfirmation(message, title = "Confirmar") {
+      return new Promise((resolve) => {
+        const overlay = document.createElement("div");
+        overlay.className = "annotations-confirm-overlay";
+        overlay.innerHTML = `
+        <div class="annotations-confirm-modal">
+          <div class="annotations-confirm-header">
+            <span class="annotations-confirm-icon">\u26A0\uFE0F</span>
+            <span class="annotations-confirm-title">${title}</span>
+          </div>
+          <div class="annotations-confirm-body">
+            <p>${message}</p>
+          </div>
+          <div class="annotations-confirm-actions">
+            <button class="annotations-confirm-btn annotations-confirm-btn--cancel" data-action="cancel">
+              Cancelar
+            </button>
+            <button class="annotations-confirm-btn annotations-confirm-btn--confirm" data-action="confirm">
+              Confirmar
+            </button>
+          </div>
+        </div>
+      `;
+        if (!document.getElementById("annotations-confirm-styles")) {
+          const style = document.createElement("style");
+          style.id = "annotations-confirm-styles";
+          style.textContent = `
+          .annotations-confirm-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 100001;
+            animation: confirmFadeIn 0.2s ease;
+          }
+          @keyframes confirmFadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          .annotations-confirm-modal {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 400px;
+            width: 90%;
+            overflow: hidden;
+            animation: confirmSlideIn 0.25s ease;
+          }
+          @keyframes confirmSlideIn {
+            from { transform: translateY(-20px) scale(0.95); opacity: 0; }
+            to { transform: translateY(0) scale(1); opacity: 1; }
+          }
+          .annotations-confirm-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 16px 20px;
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+            border-bottom: 1px solid #f59e0b;
+          }
+          .annotations-confirm-icon {
+            font-size: 20px;
+          }
+          .annotations-confirm-title {
+            font-weight: 600;
+            color: #92400e;
+            font-size: 16px;
+          }
+          .annotations-confirm-body {
+            padding: 20px;
+          }
+          .annotations-confirm-body p {
+            margin: 0;
+            color: #374151;
+            font-size: 14px;
+            line-height: 1.5;
+          }
+          .annotations-confirm-actions {
+            display: flex;
+            gap: 12px;
+            padding: 16px 20px;
+            background: #f9fafb;
+            border-top: 1px solid #e5e7eb;
+            justify-content: flex-end;
+          }
+          .annotations-confirm-btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: none;
+          }
+          .annotations-confirm-btn--cancel {
+            background: #e5e7eb;
+            color: #374151;
+          }
+          .annotations-confirm-btn--cancel:hover {
+            background: #d1d5db;
+          }
+          .annotations-confirm-btn--confirm {
+            background: #f59e0b;
+            color: white;
+          }
+          .annotations-confirm-btn--confirm:hover {
+            background: #d97706;
+          }
+        `;
+          document.head.appendChild(style);
+        }
+        document.body.appendChild(overlay);
+        const cleanup = (result) => {
+          overlay.remove();
+          resolve(result);
+        };
+        overlay.querySelector('[data-action="cancel"]')?.addEventListener("click", () => cleanup(false));
+        overlay.querySelector('[data-action="confirm"]')?.addEventListener("click", () => cleanup(true));
+        overlay.addEventListener("click", (e) => {
+          if (e.target === overlay) cleanup(false);
+        });
+      });
+    }
     async saveAnnotations() {
       try {
         const data = {
@@ -22068,7 +22259,7 @@
         this.render();
       } else {
         this.annotations.shift();
-        alert("Erro ao salvar anota\xE7\xE3o. Tente novamente.");
+        MyIOToast.show("Erro ao salvar anota\xE7\xE3o. Tente novamente.", "error");
       }
     }
     async editAnnotation(id, changes) {
@@ -22078,9 +22269,10 @@
       const now = (/* @__PURE__ */ new Date()).toISOString();
       const changeRecord = {};
       for (const [key, value] of Object.entries(changes)) {
-        if (annotation[key] !== value) {
+        const annotationAny = annotation;
+        if (annotationAny[key] !== value) {
           changeRecord[key] = {
-            from: annotation[key],
+            from: annotationAny[key],
             to: value
           };
         }
@@ -22105,7 +22297,7 @@
       const success = await this.saveAnnotations();
       if (!success) {
         this.annotations[index] = annotation;
-        alert("Erro ao atualizar anota\xE7\xE3o. Tente novamente.");
+        MyIOToast.show("Erro ao atualizar anota\xE7\xE3o. Tente novamente.", "error");
       }
     }
     async archiveAnnotation(id) {
@@ -22133,7 +22325,7 @@
         this.render();
       } else {
         this.annotations[index] = annotation;
-        alert("Erro ao arquivar anota\xE7\xE3o. Tente novamente.");
+        MyIOToast.show("Erro ao arquivar anota\xE7\xE3o. Tente novamente.", "error");
       }
     }
     async acknowledgeAnnotation(id) {
@@ -22648,8 +22840,8 @@
         card.querySelector('[data-action="details"]')?.addEventListener("click", () => {
           this.showDetailModal(id);
         });
-        card.querySelector('[data-action="archive"]')?.addEventListener("click", () => {
-          if (confirm("Tem certeza que deseja arquivar esta anota\xE7\xE3o?")) {
+        card.querySelector('[data-action="archive"]')?.addEventListener("click", async () => {
+          if (await this.showConfirmation("Tem certeza que deseja arquivar esta anota\xE7\xE3o?", "Arquivar Anota\xE7\xE3o")) {
             this.archiveAnnotation(id);
           }
         });
@@ -22666,8 +22858,8 @@
         row.querySelector('[data-action="details"]')?.addEventListener("click", () => {
           this.showDetailModal(id);
         });
-        row.querySelector('[data-action="archive"]')?.addEventListener("click", () => {
-          if (confirm("Tem certeza que deseja arquivar esta anota\xE7\xE3o?")) {
+        row.querySelector('[data-action="archive"]')?.addEventListener("click", async () => {
+          if (await this.showConfirmation("Tem certeza que deseja arquivar esta anota\xE7\xE3o?", "Arquivar Anota\xE7\xE3o")) {
             this.archiveAnnotation(id);
           }
         });
@@ -22676,12 +22868,189 @@
     // ============================================
     // EDIT MODAL
     // ============================================
-    showEditModal(id) {
+    /**
+     * Show a styled input modal for editing annotation text
+     * Replaces native prompt() for better UX
+     */
+    showInputModal(title, placeholder, initialValue) {
+      return new Promise((resolve) => {
+        const overlay = document.createElement("div");
+        overlay.className = "annotations-input-overlay";
+        overlay.innerHTML = `
+        <div class="annotations-input-modal">
+          <div class="annotations-input-header">
+            <span class="annotations-input-icon">\u270F\uFE0F</span>
+            <span class="annotations-input-title">${title}</span>
+          </div>
+          <div class="annotations-input-body">
+            <textarea
+              class="annotations-input-textarea"
+              placeholder="${placeholder}"
+              maxlength="255"
+            >${initialValue}</textarea>
+            <div class="annotations-input-char-count">
+              <span id="input-char-count">${initialValue.length}</span> / 255
+            </div>
+          </div>
+          <div class="annotations-input-actions">
+            <button class="annotations-input-btn annotations-input-btn--cancel" data-action="cancel">
+              Cancelar
+            </button>
+            <button class="annotations-input-btn annotations-input-btn--confirm" data-action="confirm">
+              Salvar
+            </button>
+          </div>
+        </div>
+      `;
+        if (!document.getElementById("annotations-input-styles")) {
+          const style = document.createElement("style");
+          style.id = "annotations-input-styles";
+          style.textContent = `
+          .annotations-input-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(4px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 100001;
+            animation: inputFadeIn 0.2s ease;
+          }
+          @keyframes inputFadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+          }
+          .annotations-input-modal {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 500px;
+            width: 90%;
+            overflow: hidden;
+            animation: inputSlideIn 0.25s ease;
+          }
+          @keyframes inputSlideIn {
+            from { transform: translateY(-20px) scale(0.95); opacity: 0; }
+            to { transform: translateY(0) scale(1); opacity: 1; }
+          }
+          .annotations-input-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 16px 20px;
+            background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
+            border-bottom: 1px solid #5b4cdb;
+          }
+          .annotations-input-icon {
+            font-size: 20px;
+          }
+          .annotations-input-title {
+            font-weight: 600;
+            color: white;
+            font-size: 16px;
+          }
+          .annotations-input-body {
+            padding: 20px;
+          }
+          .annotations-input-textarea {
+            width: 100%;
+            min-height: 100px;
+            padding: 12px;
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            font-size: 14px;
+            font-family: inherit;
+            resize: vertical;
+            color: #212529;
+          }
+          .annotations-input-textarea:focus {
+            outline: none;
+            border-color: #6c5ce7;
+            box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.15);
+          }
+          .annotations-input-char-count {
+            font-size: 11px;
+            color: #6c757d;
+            text-align: right;
+            margin-top: 6px;
+          }
+          .annotations-input-actions {
+            display: flex;
+            gap: 12px;
+            padding: 16px 20px;
+            background: #f9fafb;
+            border-top: 1px solid #e5e7eb;
+            justify-content: flex-end;
+          }
+          .annotations-input-btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: none;
+          }
+          .annotations-input-btn--cancel {
+            background: #e5e7eb;
+            color: #374151;
+          }
+          .annotations-input-btn--cancel:hover {
+            background: #d1d5db;
+          }
+          .annotations-input-btn--confirm {
+            background: #6c5ce7;
+            color: white;
+          }
+          .annotations-input-btn--confirm:hover {
+            background: #5b4cdb;
+          }
+        `;
+          document.head.appendChild(style);
+        }
+        document.body.appendChild(overlay);
+        const textarea = overlay.querySelector(".annotations-input-textarea");
+        const charCount = overlay.querySelector("#input-char-count");
+        textarea.focus();
+        textarea.select();
+        textarea.addEventListener("input", () => {
+          charCount.textContent = String(textarea.value.length);
+        });
+        const cleanup = (result) => {
+          overlay.remove();
+          resolve(result);
+        };
+        overlay.querySelector('[data-action="cancel"]')?.addEventListener("click", () => cleanup(null));
+        overlay.querySelector('[data-action="confirm"]')?.addEventListener("click", () => {
+          const value = textarea.value.trim();
+          cleanup(value || null);
+        });
+        overlay.addEventListener("click", (e) => {
+          if (e.target === overlay) cleanup(null);
+        });
+        textarea.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" && e.ctrlKey) {
+            const value = textarea.value.trim();
+            cleanup(value || null);
+          }
+          if (e.key === "Escape") {
+            cleanup(null);
+          }
+        });
+      });
+    }
+    async showEditModal(id) {
       const annotation = this.annotations.find((a) => a.id === id);
       if (!annotation) return;
-      const newText = prompt("Editar texto da anota\xE7\xE3o:", annotation.text);
-      if (newText && newText.trim() !== annotation.text) {
-        this.updateAnnotation(id, { text: newText.trim() });
+      const newText = await this.showInputModal(
+        "Editar Anota\xE7\xE3o",
+        "Digite o novo texto da anota\xE7\xE3o...",
+        annotation.text
+      );
+      if (newText && newText !== annotation.text) {
+        await this.editAnnotation(id, { text: newText });
+        this.render();
       }
     }
     // ============================================
@@ -22775,7 +23144,7 @@
       overlay.querySelector(".annotation-detail__close")?.addEventListener("click", () => overlay.remove());
       overlay.querySelector('[data-action="close"]')?.addEventListener("click", () => overlay.remove());
       overlay.querySelector('[data-action="archive"]')?.addEventListener("click", async () => {
-        if (confirm("Tem certeza que deseja arquivar esta anota\xE7\xE3o?")) {
+        if (await this.showConfirmation("Tem certeza que deseja arquivar esta anota\xE7\xE3o?", "Arquivar Anota\xE7\xE3o")) {
           overlay.remove();
           await this.archiveAnnotation(id);
         }
@@ -27340,7 +27709,7 @@
     const defaultDateRange = getTodaySoFar();
     const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
     const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
-    const state = {
+    const state2 = {
       token: params.token,
       deviceId: params.deviceId,
       label: params.label || "Sensor de Temperatura",
@@ -27363,58 +27732,58 @@
     };
     const savedGranularity = localStorage.getItem("myio-temp-modal-granularity");
     const savedTheme = localStorage.getItem("myio-temp-modal-theme");
-    if (savedGranularity) state.granularity = savedGranularity;
-    if (savedTheme) state.theme = savedTheme;
+    if (savedGranularity) state2.granularity = savedGranularity;
+    if (savedTheme) state2.theme = savedTheme;
     const modalContainer = document.createElement("div");
     modalContainer.id = modalId;
     document.body.appendChild(modalContainer);
-    renderModal(modalContainer, state, modalId);
+    renderModal(modalContainer, state2, modalId);
     try {
-      state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
-      state.stats = calculateStats(state.data, state.clampRange);
-      state.isLoading = false;
-      renderModal(modalContainer, state, modalId);
-      drawChart(modalId, state);
+      state2.data = await fetchTemperatureData(state2.token, state2.deviceId, state2.startTs, state2.endTs);
+      state2.stats = calculateStats(state2.data, state2.clampRange);
+      state2.isLoading = false;
+      renderModal(modalContainer, state2, modalId);
+      drawChart(modalId, state2);
     } catch (error) {
       console.error("[TemperatureModal] Error fetching data:", error);
-      state.isLoading = false;
-      renderModal(modalContainer, state, modalId, error);
+      state2.isLoading = false;
+      renderModal(modalContainer, state2, modalId, error);
     }
-    await setupEventListeners(modalContainer, state, modalId, params.onClose);
+    await setupEventListeners(modalContainer, state2, modalId, params.onClose);
     return {
       destroy: () => {
         modalContainer.remove();
         params.onClose?.();
       },
       updateData: async (startDate, endDate, granularity) => {
-        state.startTs = new Date(startDate).getTime();
-        state.endTs = new Date(endDate).getTime();
-        if (granularity) state.granularity = granularity;
-        state.isLoading = true;
-        renderModal(modalContainer, state, modalId);
+        state2.startTs = new Date(startDate).getTime();
+        state2.endTs = new Date(endDate).getTime();
+        if (granularity) state2.granularity = granularity;
+        state2.isLoading = true;
+        renderModal(modalContainer, state2, modalId);
         try {
-          state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
-          state.stats = calculateStats(state.data, state.clampRange);
-          state.isLoading = false;
-          renderModal(modalContainer, state, modalId);
-          drawChart(modalId, state);
+          state2.data = await fetchTemperatureData(state2.token, state2.deviceId, state2.startTs, state2.endTs);
+          state2.stats = calculateStats(state2.data, state2.clampRange);
+          state2.isLoading = false;
+          renderModal(modalContainer, state2, modalId);
+          drawChart(modalId, state2);
         } catch (error) {
           console.error("[TemperatureModal] Error updating data:", error);
-          state.isLoading = false;
-          renderModal(modalContainer, state, modalId, error);
+          state2.isLoading = false;
+          renderModal(modalContainer, state2, modalId, error);
         }
       }
     };
   }
-  function renderModal(container, state, modalId, error) {
-    const colors = getThemeColors(state.theme);
-    const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale);
-    const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale);
-    const statusText = state.temperatureStatus === "ok" ? "Dentro da faixa" : state.temperatureStatus === "above" ? "Acima do limite" : state.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
-    const statusColor = state.temperatureStatus === "ok" ? colors.success : state.temperatureStatus === "above" ? colors.danger : state.temperatureStatus === "below" ? colors.primary : colors.textMuted;
-    const rangeText = state.temperatureMin !== null && state.temperatureMax !== null ? `${state.temperatureMin}\xB0C - ${state.temperatureMax}\xB0C` : "N\xE3o definida";
-    new Date(state.startTs).toISOString().slice(0, 16);
-    new Date(state.endTs).toISOString().slice(0, 16);
+  function renderModal(container, state2, modalId, error) {
+    const colors = getThemeColors(state2.theme);
+    const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale);
+    const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale);
+    const statusText = state2.temperatureStatus === "ok" ? "Dentro da faixa" : state2.temperatureStatus === "above" ? "Acima do limite" : state2.temperatureStatus === "below" ? "Abaixo do limite" : "N/A";
+    const statusColor = state2.temperatureStatus === "ok" ? colors.success : state2.temperatureStatus === "above" ? colors.danger : state2.temperatureStatus === "below" ? colors.primary : colors.textMuted;
+    const rangeText = state2.temperatureMin !== null && state2.temperatureMax !== null ? `${state2.temperatureMin}\xB0C - ${state2.temperatureMax}\xB0C` : "N\xE3o definida";
+    new Date(state2.startTs).toISOString().slice(0, 16);
+    new Date(state2.endTs).toISOString().slice(0, 16);
     const isMaximized = container.__isMaximized || false;
     const contentMaxWidth = isMaximized ? "100%" : "900px";
     const contentMaxHeight = isMaximized ? "100vh" : "95vh";
@@ -27441,7 +27810,7 @@
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
-            \u{1F321}\uFE0F ${state.label} - Hist\xF3rico de Temperatura
+            \u{1F321}\uFE0F ${state2.label} - Hist\xF3rico de Temperatura
           </h2>
           <div style="display: flex; gap: 4px; align-items: center;">
             <!-- Theme Toggle -->
@@ -27449,7 +27818,7 @@
               background: none; border: none; font-size: 16px; cursor: pointer;
               padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
               transition: background-color 0.2s;
-            ">${state.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            ">${state2.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
             <!-- Maximize Button -->
             <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
               background: none; border: none; font-size: 16px; cursor: pointer;
@@ -27471,7 +27840,7 @@
         <!-- Controls Row -->
         <div style="
           display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
-          margin-bottom: 16px; padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          margin-bottom: 16px; padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
           border-radius: 6px; border: 1px solid ${colors.border};
         ">
           <!-- Granularity Select -->
@@ -27484,8 +27853,8 @@
               font-size: 14px; color: ${colors.text}; background: ${colors.surface};
               cursor: pointer; min-width: 130px;
             ">
-              <option value="hour" ${state.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
-              <option value="day" ${state.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+              <option value="hour" ${state2.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state2.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
             </select>
           </div>
           <!-- Day Period Filter (Multiselect) -->
@@ -27499,7 +27868,7 @@
               cursor: pointer; min-width: 180px; text-align: left;
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
             ">
-              <span>${getSelectedPeriodsLabel(state.selectedPeriods)}</span>
+              <span>${getSelectedPeriodsLabel(state2.selectedPeriods)}</span>
               <span style="font-size: 10px;">\u25BC</span>
             </button>
             <div id="${modalId}-period-dropdown" style="
@@ -27512,12 +27881,12 @@
                 <label style="
                   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                   cursor: pointer; font-size: 13px; color: ${colors.text};
-                " onmouseover="this.style.background='${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                " onmouseover="this.style.background='${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
                    onmouseout="this.style.background='transparent'">
                   <input type="checkbox"
                     name="${modalId}-period"
                     value="${period.id}"
-                    ${state.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    ${state2.selectedPeriods.includes(period.id) ? "checked" : ""}
                     style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
                   ${period.label}
                 </label>
@@ -27525,13 +27894,13 @@
               <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
                 <button id="${modalId}-period-select-all" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Selecionar Todos</button>
                 <button id="${modalId}-period-clear" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Limpar Sele\xE7\xE3o</button>
@@ -27556,8 +27925,8 @@
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state.isLoading ? "disabled" : ""}>
-            ${state.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          " ${state2.isLoading ? "disabled" : ""}>
+            ${state2.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
         </div>
 
@@ -27568,40 +27937,40 @@
         ">
           <!-- Current Temperature -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Temperatura Atual</span>
             <div style="font-weight: 700; font-size: 24px; color: ${statusColor}; margin-top: 4px;">
-              ${state.currentTemperature !== null ? formatTemperature(state.currentTemperature) : "N/A"}
+              ${state2.currentTemperature !== null ? formatTemperature(state2.currentTemperature) : "N/A"}
             </div>
             <div style="font-size: 11px; color: ${statusColor}; margin-top: 2px;">${statusText}</div>
           </div>
           <!-- Average -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">M\xE9dia do Per\xEDodo</span>
             <div id="${modalId}-avg" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
-              ${state.stats.count > 0 ? formatTemperature(state.stats.avg) : "N/A"}
+              ${state2.stats.count > 0 ? formatTemperature(state2.stats.avg) : "N/A"}
             </div>
             <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${startDateStr} - ${endDateStr}</div>
           </div>
           <!-- Min/Max -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Min / Max</span>
             <div id="${modalId}-minmax" style="font-weight: 600; font-size: 20px; color: ${colors.text}; margin-top: 4px;">
-              ${state.stats.count > 0 ? `${formatTemperature(state.stats.min)} / ${formatTemperature(state.stats.max)}` : "N/A"}
+              ${state2.stats.count > 0 ? `${formatTemperature(state2.stats.min)} / ${formatTemperature(state2.stats.max)}` : "N/A"}
             </div>
-            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state.stats.count} leituras</div>
+            <div style="font-size: 11px; color: ${colors.textMuted}; margin-top: 2px;">${state2.stats.count} leituras</div>
           </div>
           <!-- Ideal Range -->
           <div style="
-            padding: 16px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+            padding: 16px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
             border-radius: 12px; border: 1px solid ${colors.border};
           ">
             <span style="color: ${colors.textMuted}; font-size: 12px; font-weight: 500;">Faixa Ideal</span>
@@ -27617,18 +27986,18 @@
             Hist\xF3rico de Temperatura
           </h3>
           <div id="${modalId}-chart" style="
-            height: 320px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            height: 320px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
             border-radius: 12px; display: flex; justify-content: center; align-items: center;
             border: 1px solid ${colors.border}; position: relative;
           ">
-            ${state.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+            ${state2.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
                    <div style="animation: spin 1s linear infinite; font-size: 32px; margin-bottom: 8px;">\u21BB</div>
                    <div>Carregando dados...</div>
                  </div>` : error ? `<div style="text-align: center; color: ${colors.danger};">
                      <div style="font-size: 32px; margin-bottom: 8px;">\u26A0\uFE0F</div>
                      <div>Erro ao carregar dados</div>
                      <div style="font-size: 12px; margin-top: 4px;">${error.message}</div>
-                   </div>` : state.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   </div>` : state2.data.length === 0 ? `<div style="text-align: center; color: ${colors.textMuted};">
                        <div style="font-size: 32px; margin-bottom: 8px;">\u{1F4ED}</div>
                        <div>Sem dados para o per\xEDodo selecionado</div>
                      </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
@@ -27638,12 +28007,12 @@
         <!-- Actions -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <button id="${modalId}-export" style="
-            background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
             color: ${colors.text}; border: 1px solid ${colors.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;
-          " ${state.data.length === 0 ? "disabled" : ""}>
+          " ${state2.data.length === 0 ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
           <button id="${modalId}-close-btn" style="
@@ -27694,14 +28063,14 @@
     </style>
   `;
   }
-  function drawChart(modalId, state) {
+  function drawChart(modalId, state2) {
     const chartContainer = document.getElementById(`${modalId}-chart`);
     const canvas = document.getElementById(`${modalId}-canvas`);
-    if (!chartContainer || !canvas || state.data.length === 0) return;
+    if (!chartContainer || !canvas || state2.data.length === 0) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const colors = getThemeColors(state.theme);
-    const filteredData = filterByDayPeriods(state.data, state.selectedPeriods);
+    const colors = getThemeColors(state2.theme);
+    const filteredData = filterByDayPeriods(state2.data, state2.selectedPeriods);
     if (filteredData.length === 0) {
       canvas.width = chartContainer.clientWidth;
       canvas.height = chartContainer.clientHeight;
@@ -27712,14 +28081,14 @@
       return;
     }
     let chartData;
-    if (state.granularity === "hour") {
+    if (state2.granularity === "hour") {
       const interpolated = interpolateTemperature(filteredData, {
         intervalMinutes: 30,
-        startTs: state.startTs,
-        endTs: state.endTs,
-        clampRange: state.clampRange
+        startTs: state2.startTs,
+        endTs: state2.endTs,
+        clampRange: state2.clampRange
       });
-      const filteredInterpolated = filterByDayPeriods(interpolated, state.selectedPeriods);
+      const filteredInterpolated = filterByDayPeriods(interpolated, state2.selectedPeriods);
       chartData = filteredInterpolated.map((item) => ({
         x: item.ts,
         y: Number(item.value),
@@ -27727,7 +28096,7 @@
         screenY: 0
       }));
     } else {
-      const daily = aggregateByDay(filteredData, state.clampRange);
+      const daily = aggregateByDay(filteredData, state2.clampRange);
       chartData = daily.map((item) => ({
         x: item.dateTs,
         y: item.avg,
@@ -27745,12 +28114,12 @@
     const paddingRight = 20;
     const paddingTop = 20;
     const paddingBottom = 55;
-    const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
+    const isPeriodsFiltered = state2.selectedPeriods.length < 4 && state2.selectedPeriods.length > 0;
     const values = chartData.map((d) => d.y);
     const dataMin = Math.min(...values);
     const dataMax = Math.max(...values);
-    const thresholdMin = state.temperatureMin !== null ? state.temperatureMin : dataMin;
-    const thresholdMax = state.temperatureMax !== null ? state.temperatureMax : dataMax;
+    const thresholdMin = state2.temperatureMin !== null ? state2.temperatureMin : dataMin;
+    const thresholdMax = state2.temperatureMax !== null ? state2.temperatureMax : dataMax;
     const minY = Math.min(dataMin, thresholdMin) - 1;
     const maxY = Math.max(dataMax, thresholdMax) + 1;
     const chartWidth = width - paddingLeft - paddingRight;
@@ -27782,9 +28151,9 @@
       ctx.lineTo(width - paddingRight, y);
       ctx.stroke();
     }
-    if (state.temperatureMin !== null && state.temperatureMax !== null) {
-      const rangeMinY = height - paddingBottom - (state.temperatureMin - minY) * scaleY;
-      const rangeMaxY = height - paddingBottom - (state.temperatureMax - minY) * scaleY;
+    if (state2.temperatureMin !== null && state2.temperatureMax !== null) {
+      const rangeMinY = height - paddingBottom - (state2.temperatureMin - minY) * scaleY;
+      const rangeMaxY = height - paddingBottom - (state2.temperatureMax - minY) * scaleY;
       ctx.fillStyle = "rgba(76, 175, 80, 0.1)";
       ctx.fillRect(paddingLeft, rangeMaxY, chartWidth, rangeMinY - rangeMaxY);
       ctx.strokeStyle = colors.success;
@@ -27826,10 +28195,10 @@
       const point = chartData[i];
       const date = new Date(point.x);
       let label;
-      if (state.granularity === "hour") {
-        label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+      if (state2.granularity === "hour") {
+        label = date.toLocaleTimeString(state2.locale, { hour: "2-digit", minute: "2-digit" });
       } else {
-        label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+        label = date.toLocaleDateString(state2.locale, { day: "2-digit", month: "2-digit" });
       }
       ctx.strokeStyle = colors.chartGrid;
       ctx.lineWidth = 1;
@@ -27847,16 +28216,16 @@
     ctx.lineTo(paddingLeft, height - paddingBottom);
     ctx.lineTo(width - paddingRight, height - paddingBottom);
     ctx.stroke();
-    setupChartTooltip(canvas, chartContainer, chartData, state, colors);
+    setupChartTooltip(canvas, chartContainer, chartData, state2, colors);
   }
-  function setupChartTooltip(canvas, container, chartData, state, colors) {
+  function setupChartTooltip(canvas, container, chartData, state2, colors) {
     const existingTooltip = container.querySelector(".myio-chart-tooltip");
     if (existingTooltip) existingTooltip.remove();
     const tooltip = document.createElement("div");
     tooltip.className = "myio-chart-tooltip";
     tooltip.style.cssText = `
     position: absolute;
-    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    background: ${state2.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 10px 14px;
@@ -27893,17 +28262,17 @@
       if (point) {
         const date = new Date(point.x);
         let dateStr;
-        if (state.granularity === "hour") {
-          dateStr = date.toLocaleDateString(state.locale, {
+        if (state2.granularity === "hour") {
+          dateStr = date.toLocaleDateString(state2.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
-          }) + " " + date.toLocaleTimeString(state.locale, {
+          }) + " " + date.toLocaleTimeString(state2.locale, {
             hour: "2-digit",
             minute: "2-digit"
           });
         } else {
-          dateStr = date.toLocaleDateString(state.locale, {
+          dateStr = date.toLocaleDateString(state2.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
@@ -27941,7 +28310,7 @@
       canvas.style.cursor = "default";
     });
   }
-  async function setupEventListeners(container, state, modalId, onClose) {
+  async function setupEventListeners(container, state2, modalId, onClose) {
     const closeModal = () => {
       container.remove();
       onClose?.();
@@ -27952,19 +28321,19 @@
     document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
     document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
     const dateRangeInput = document.getElementById(`${modalId}-date-range`);
-    if (dateRangeInput && !state.dateRangePicker) {
+    if (dateRangeInput && !state2.dateRangePicker) {
       try {
-        state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
-          presetStart: new Date(state.startTs).toISOString(),
-          presetEnd: new Date(state.endTs).toISOString(),
+        state2.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+          presetStart: new Date(state2.startTs).toISOString(),
+          presetEnd: new Date(state2.endTs).toISOString(),
           includeTime: true,
           timePrecision: "minute",
           maxRangeDays: 90,
-          locale: state.locale,
+          locale: state2.locale,
           parentEl: container.querySelector(".myio-temp-modal-content"),
           onApply: (result) => {
-            state.startTs = new Date(result.startISO).getTime();
-            state.endTs = new Date(result.endISO).getTime();
+            state2.startTs = new Date(result.startISO).getTime();
+            state2.endTs = new Date(result.endISO).getTime();
             console.log("[TemperatureModal] Date range applied:", result);
           }
         });
@@ -27973,19 +28342,19 @@
       }
     }
     document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
-      state.theme = state.theme === "dark" ? "light" : "dark";
-      localStorage.setItem("myio-temp-modal-theme", state.theme);
-      state.dateRangePicker = null;
-      renderModal(container, state, modalId);
-      if (state.data.length > 0) drawChart(modalId, state);
-      await setupEventListeners(container, state, modalId, onClose);
+      state2.theme = state2.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("myio-temp-modal-theme", state2.theme);
+      state2.dateRangePicker = null;
+      renderModal(container, state2, modalId);
+      if (state2.data.length > 0) drawChart(modalId, state2);
+      await setupEventListeners(container, state2, modalId, onClose);
     });
     document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
       container.__isMaximized = !container.__isMaximized;
-      state.dateRangePicker = null;
-      renderModal(container, state, modalId);
-      if (state.data.length > 0) drawChart(modalId, state);
-      await setupEventListeners(container, state, modalId, onClose);
+      state2.dateRangePicker = null;
+      renderModal(container, state2, modalId);
+      if (state2.data.length > 0) drawChart(modalId, state2);
+      await setupEventListeners(container, state2, modalId, onClose);
     });
     const periodBtn = document.getElementById(`${modalId}-period-btn`);
     const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
@@ -28004,71 +28373,71 @@
     periodCheckboxes.forEach((checkbox) => {
       checkbox.addEventListener("change", () => {
         const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-        state.selectedPeriods = checked;
+        state2.selectedPeriods = checked;
         const btnLabel = periodBtn?.querySelector("span:first-child");
         if (btnLabel) {
-          btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+          btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
         }
-        if (state.data.length > 0) drawChart(modalId, state);
+        if (state2.data.length > 0) drawChart(modalId, state2);
       });
     });
     document.getElementById(`${modalId}-period-select-all`)?.addEventListener("click", () => {
       periodCheckboxes.forEach((cb) => {
         cb.checked = true;
       });
-      state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+      state2.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
       }
-      if (state.data.length > 0) drawChart(modalId, state);
+      if (state2.data.length > 0) drawChart(modalId, state2);
     });
     document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
       periodCheckboxes.forEach((cb) => {
         cb.checked = false;
       });
-      state.selectedPeriods = [];
+      state2.selectedPeriods = [];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
       }
-      if (state.data.length > 0) drawChart(modalId, state);
+      if (state2.data.length > 0) drawChart(modalId, state2);
     });
     document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
-      state.granularity = e.target.value;
-      localStorage.setItem("myio-temp-modal-granularity", state.granularity);
-      if (state.data.length > 0) drawChart(modalId, state);
+      state2.granularity = e.target.value;
+      localStorage.setItem("myio-temp-modal-granularity", state2.granularity);
+      if (state2.data.length > 0) drawChart(modalId, state2);
     });
     document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
-      if (state.startTs >= state.endTs) {
+      if (state2.startTs >= state2.endTs) {
         alert("Por favor, selecione um per\xEDodo v\xE1lido");
         return;
       }
-      state.isLoading = true;
-      state.dateRangePicker = null;
-      renderModal(container, state, modalId);
+      state2.isLoading = true;
+      state2.dateRangePicker = null;
+      renderModal(container, state2, modalId);
       try {
-        state.data = await fetchTemperatureData(state.token, state.deviceId, state.startTs, state.endTs);
-        state.stats = calculateStats(state.data, state.clampRange);
-        state.isLoading = false;
-        renderModal(container, state, modalId);
-        drawChart(modalId, state);
-        await setupEventListeners(container, state, modalId, onClose);
+        state2.data = await fetchTemperatureData(state2.token, state2.deviceId, state2.startTs, state2.endTs);
+        state2.stats = calculateStats(state2.data, state2.clampRange);
+        state2.isLoading = false;
+        renderModal(container, state2, modalId);
+        drawChart(modalId, state2);
+        await setupEventListeners(container, state2, modalId, onClose);
       } catch (error) {
         console.error("[TemperatureModal] Error fetching data:", error);
-        state.isLoading = false;
-        renderModal(container, state, modalId, error);
-        await setupEventListeners(container, state, modalId, onClose);
+        state2.isLoading = false;
+        renderModal(container, state2, modalId, error);
+        await setupEventListeners(container, state2, modalId, onClose);
       }
     });
     document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-      if (state.data.length === 0) return;
-      const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
-      const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+      if (state2.data.length === 0) return;
+      const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
+      const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
       exportTemperatureCSV(
-        state.data,
-        state.label,
-        state.stats,
+        state2.data,
+        state2.label,
+        state2.stats,
         startDateStr,
         endDateStr
       );
@@ -28081,7 +28450,7 @@
     const defaultDateRange = getTodaySoFar();
     const startTs = params.startDate ? new Date(params.startDate).getTime() : defaultDateRange.startTs;
     const endTs = params.endDate ? new Date(params.endDate).getTime() : defaultDateRange.endTs;
-    const state = {
+    const state2 = {
       token: params.token,
       devices: params.devices,
       startTs,
@@ -28100,44 +28469,44 @@
     };
     const savedGranularity = localStorage.getItem("myio-temp-comparison-granularity");
     const savedTheme = localStorage.getItem("myio-temp-comparison-theme");
-    if (savedGranularity) state.granularity = savedGranularity;
-    if (savedTheme) state.theme = savedTheme;
+    if (savedGranularity) state2.granularity = savedGranularity;
+    if (savedTheme) state2.theme = savedTheme;
     const modalContainer = document.createElement("div");
     modalContainer.id = modalId;
     document.body.appendChild(modalContainer);
-    renderModal2(modalContainer, state, modalId);
-    await fetchAllDevicesData(state);
-    renderModal2(modalContainer, state, modalId);
-    drawComparisonChart(modalId, state);
-    await setupEventListeners2(modalContainer, state, modalId, params.onClose);
+    renderModal2(modalContainer, state2, modalId);
+    await fetchAllDevicesData(state2);
+    renderModal2(modalContainer, state2, modalId);
+    drawComparisonChart(modalId, state2);
+    await setupEventListeners2(modalContainer, state2, modalId, params.onClose);
     return {
       destroy: () => {
         modalContainer.remove();
         params.onClose?.();
       },
       updateData: async (startDate, endDate, granularity) => {
-        state.startTs = new Date(startDate).getTime();
-        state.endTs = new Date(endDate).getTime();
-        if (granularity) state.granularity = granularity;
-        state.isLoading = true;
-        renderModal2(modalContainer, state, modalId);
-        await fetchAllDevicesData(state);
-        renderModal2(modalContainer, state, modalId);
-        drawComparisonChart(modalId, state);
-        setupEventListeners2(modalContainer, state, modalId, params.onClose);
+        state2.startTs = new Date(startDate).getTime();
+        state2.endTs = new Date(endDate).getTime();
+        if (granularity) state2.granularity = granularity;
+        state2.isLoading = true;
+        renderModal2(modalContainer, state2, modalId);
+        await fetchAllDevicesData(state2);
+        renderModal2(modalContainer, state2, modalId);
+        drawComparisonChart(modalId, state2);
+        setupEventListeners2(modalContainer, state2, modalId, params.onClose);
       }
     };
   }
-  async function fetchAllDevicesData(state) {
-    state.isLoading = true;
-    state.deviceData = [];
+  async function fetchAllDevicesData(state2) {
+    state2.isLoading = true;
+    state2.deviceData = [];
     try {
       const results = await Promise.all(
-        state.devices.map(async (device, index) => {
+        state2.devices.map(async (device, index) => {
           const deviceId = device.tbId || device.id;
           try {
-            const data = await fetchTemperatureData(state.token, deviceId, state.startTs, state.endTs);
-            const stats = calculateStats(data, state.clampRange);
+            const data = await fetchTemperatureData(state2.token, deviceId, state2.startTs, state2.endTs);
+            const stats = calculateStats(data, state2.clampRange);
             return {
               device,
               data,
@@ -28155,21 +28524,21 @@
           }
         })
       );
-      state.deviceData = results;
+      state2.deviceData = results;
     } catch (error) {
       console.error("[TemperatureComparisonModal] Error fetching data:", error);
     }
-    state.isLoading = false;
+    state2.isLoading = false;
   }
-  function renderModal2(container, state, modalId) {
-    const colors = getThemeColors(state.theme);
-    new Date(state.startTs).toLocaleDateString(state.locale);
-    new Date(state.endTs).toLocaleDateString(state.locale);
-    new Date(state.startTs).toISOString().slice(0, 16);
-    new Date(state.endTs).toISOString().slice(0, 16);
-    const legendHTML = state.deviceData.map((dd) => `
+  function renderModal2(container, state2, modalId) {
+    const colors = getThemeColors(state2.theme);
+    new Date(state2.startTs).toLocaleDateString(state2.locale);
+    new Date(state2.endTs).toLocaleDateString(state2.locale);
+    new Date(state2.startTs).toISOString().slice(0, 16);
+    new Date(state2.endTs).toISOString().slice(0, 16);
+    const legendHTML = state2.deviceData.map((dd) => `
     <div style="display: flex; align-items: center; gap: 8px; padding: 8px 12px;
-      background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
+      background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.03)"};
       border-radius: 8px;">
       <span style="width: 12px; height: 12px; border-radius: 50%; background: ${dd.color};"></span>
       <span style="color: ${colors.text}; font-size: 13px;">${dd.device.label}</span>
@@ -28178,9 +28547,9 @@
       </span>
     </div>
   `).join("");
-    const statsHTML = state.deviceData.map((dd) => `
+    const statsHTML = state2.deviceData.map((dd) => `
     <div style="
-      padding: 12px; background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
+      padding: 12px; background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#fafafa"};
       border-radius: 10px; border-left: 4px solid ${dd.color};
       min-width: 150px;
     ">
@@ -28231,7 +28600,7 @@
           min-height: 20px;
         ">
           <h2 style="margin: 6px; font-size: 18px; font-weight: 600; color: white; line-height: 2;">
-            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state.devices.length} sensores
+            \u{1F321}\uFE0F Compara\xE7\xE3o de Temperatura - ${state2.devices.length} sensores
           </h2>
           <div style="display: flex; gap: 4px; align-items: center;">
             <!-- Theme Toggle -->
@@ -28239,7 +28608,7 @@
               background: none; border: none; font-size: 16px; cursor: pointer;
               padding: 4px 8px; border-radius: 6px; color: rgba(255,255,255,0.8);
               transition: background-color 0.2s;
-            ">${state.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
+            ">${state2.theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"}</button>
             <!-- Maximize Button -->
             <button id="${modalId}-maximize" title="${isMaximized ? "Restaurar" : "Maximizar"}" style="
               background: none; border: none; font-size: 16px; cursor: pointer;
@@ -28262,7 +28631,7 @@
         <div style="
           display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
           margin-bottom: 16px; padding: 16px;
-          background: ${state.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
+          background: ${state2.theme === "dark" ? "rgba(255,255,255,0.05)" : "#f7f7f7"};
           border-radius: 6px; border: 1px solid ${colors.border};
         ">
           <!-- Granularity Select -->
@@ -28275,8 +28644,8 @@
               font-size: 14px; color: ${colors.text}; background: ${colors.surface};
               cursor: pointer; min-width: 130px;
             ">
-              <option value="hour" ${state.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
-              <option value="day" ${state.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
+              <option value="hour" ${state2.granularity === "hour" ? "selected" : ""}>Hora (30 min)</option>
+              <option value="day" ${state2.granularity === "day" ? "selected" : ""}>Dia (m\xE9dia)</option>
             </select>
           </div>
           <!-- Day Period Filter (Multiselect) -->
@@ -28290,7 +28659,7 @@
               cursor: pointer; min-width: 180px; text-align: left;
               display: flex; align-items: center; justify-content: space-between; gap: 8px;
             ">
-              <span>${getSelectedPeriodsLabel(state.selectedPeriods)}</span>
+              <span>${getSelectedPeriodsLabel(state2.selectedPeriods)}</span>
               <span style="font-size: 10px;">\u25BC</span>
             </button>
             <div id="${modalId}-period-dropdown" style="
@@ -28303,12 +28672,12 @@
                 <label style="
                   display: flex; align-items: center; gap: 8px; padding: 8px 12px;
                   cursor: pointer; font-size: 13px; color: ${colors.text};
-                " onmouseover="this.style.background='${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
+                " onmouseover="this.style.background='${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"}'"
                    onmouseout="this.style.background='transparent'">
                   <input type="checkbox"
                     name="${modalId}-period"
                     value="${period.id}"
-                    ${state.selectedPeriods.includes(period.id) ? "checked" : ""}
+                    ${state2.selectedPeriods.includes(period.id) ? "checked" : ""}
                     style="width: 16px; height: 16px; cursor: pointer; accent-color: #3e1a7d;">
                   ${period.label}
                 </label>
@@ -28316,13 +28685,13 @@
               <div style="border-top: 1px solid ${colors.border}; margin-top: 8px; padding-top: 8px;">
                 <button id="${modalId}-period-select-all" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px 4px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Selecionar Todos</button>
                 <button id="${modalId}-period-clear" type="button" style="
                   width: calc(100% - 16px); margin: 0 8px; padding: 6px;
-                  background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
+                  background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f0f0f0"};
                   border: none; border-radius: 4px; cursor: pointer;
                   font-size: 12px; color: ${colors.text};
                 ">Limpar Sele\xE7\xE3o</button>
@@ -28347,8 +28716,8 @@
             font-size: 14px; font-weight: 500; height: 38px;
             display: flex; align-items: center; gap: 8px;
             font-family: 'Roboto', Arial, sans-serif;
-          " ${state.isLoading ? "disabled" : ""}>
-            ${state.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
+          " ${state2.isLoading ? "disabled" : ""}>
+            ${state2.isLoading ? '<span style="animation: spin 1s linear infinite; display: inline-block;">\u21BB</span> Carregando...' : "Carregar"}
           </button>
         </div>
 
@@ -28364,14 +28733,14 @@
         <div style="margin-bottom: 24px;">
           <div id="${modalId}-chart" style="
             height: 380px;
-            background: ${state.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
+            background: ${state2.theme === "dark" ? "rgba(255,255,255,0.03)" : "#fafafa"};
             border-radius: 14px; display: flex; justify-content: center; align-items: center;
             border: 1px solid ${colors.border}; position: relative;
           ">
-            ${state.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
+            ${state2.isLoading ? `<div style="text-align: center; color: ${colors.textMuted};">
                    <div style="animation: spin 1s linear infinite; font-size: 36px; margin-bottom: 12px;">\u21BB</div>
-                   <div style="font-size: 15px;">Carregando dados de ${state.devices.length} sensores...</div>
-                 </div>` : state.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
+                   <div style="font-size: 15px;">Carregando dados de ${state2.devices.length} sensores...</div>
+                 </div>` : state2.deviceData.every((dd) => dd.data.length === 0) ? `<div style="text-align: center; color: ${colors.textMuted};">
                      <div style="font-size: 48px; margin-bottom: 12px;">\u{1F4ED}</div>
                      <div style="font-size: 16px;">Sem dados para o per\xEDodo selecionado</div>
                    </div>` : `<canvas id="${modalId}-canvas" style="width: 100%; height: 100%;"></canvas>`}
@@ -28389,12 +28758,12 @@
         <!-- Actions -->
         <div style="display: flex; justify-content: flex-end; gap: 12px;">
           <button id="${modalId}-export" style="
-            background: ${state.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
+            background: ${state2.theme === "dark" ? "rgba(255,255,255,0.1)" : "#f7f7f7"};
             color: ${colors.text}; border: 1px solid ${colors.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;
-          " ${state.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
+          " ${state2.deviceData.every((dd) => dd.data.length === 0) ? "disabled" : ""}>
             \u{1F4E5} Exportar CSV
           </button>
           <button id="${modalId}-close-btn" style="
@@ -28429,15 +28798,15 @@
     </style>
   `;
   }
-  function drawComparisonChart(modalId, state) {
+  function drawComparisonChart(modalId, state2) {
     const chartContainer = document.getElementById(`${modalId}-chart`);
     const canvas = document.getElementById(`${modalId}-canvas`);
     if (!chartContainer || !canvas) return;
-    const hasData = state.deviceData.some((dd) => dd.data.length > 0);
+    const hasData = state2.deviceData.some((dd) => dd.data.length > 0);
     if (!hasData) return;
     const ctx = canvas.getContext("2d");
     if (!ctx) return;
-    const colors = getThemeColors(state.theme);
+    const colors = getThemeColors(state2.theme);
     const width = chartContainer.clientWidth - 2;
     const height = 380;
     canvas.width = width;
@@ -28448,19 +28817,19 @@
     const paddingBottom = 55;
     ctx.clearRect(0, 0, width, height);
     const processedData = [];
-    state.deviceData.forEach((dd) => {
+    state2.deviceData.forEach((dd) => {
       if (dd.data.length === 0) return;
-      const filteredData = filterByDayPeriods(dd.data, state.selectedPeriods);
+      const filteredData = filterByDayPeriods(dd.data, state2.selectedPeriods);
       if (filteredData.length === 0) return;
       let points;
-      if (state.granularity === "hour") {
+      if (state2.granularity === "hour") {
         const interpolated = interpolateTemperature(filteredData, {
           intervalMinutes: 30,
-          startTs: state.startTs,
-          endTs: state.endTs,
-          clampRange: state.clampRange
+          startTs: state2.startTs,
+          endTs: state2.endTs,
+          clampRange: state2.clampRange
         });
-        const filteredInterpolated = filterByDayPeriods(interpolated, state.selectedPeriods);
+        const filteredInterpolated = filterByDayPeriods(interpolated, state2.selectedPeriods);
         points = filteredInterpolated.map((item) => ({
           x: item.ts,
           y: Number(item.value),
@@ -28470,7 +28839,7 @@
           deviceColor: dd.color
         }));
       } else {
-        const daily = aggregateByDay(filteredData, state.clampRange);
+        const daily = aggregateByDay(filteredData, state2.clampRange);
         points = daily.map((item) => ({
           x: item.dateTs,
           y: item.avg,
@@ -28491,7 +28860,7 @@
       ctx.fillText("Nenhum dado para os per\xEDodos selecionados", width / 2, height / 2);
       return;
     }
-    const isPeriodsFiltered = state.selectedPeriods.length < 4 && state.selectedPeriods.length > 0;
+    const isPeriodsFiltered = state2.selectedPeriods.length < 4 && state2.selectedPeriods.length > 0;
     let dataMinY = Infinity;
     let dataMaxY = -Infinity;
     processedData.forEach(({ points }) => {
@@ -28501,7 +28870,7 @@
       });
     });
     const rangeMap = /* @__PURE__ */ new Map();
-    state.deviceData.forEach((dd, index) => {
+    state2.deviceData.forEach((dd, index) => {
       const device = dd.device;
       const min = device.temperatureMin;
       const max = device.temperatureMax;
@@ -28520,10 +28889,10 @@
         }
       }
     });
-    if (rangeMap.size === 0 && state.temperatureMin !== null && state.temperatureMax !== null) {
+    if (rangeMap.size === 0 && state2.temperatureMin !== null && state2.temperatureMax !== null) {
       rangeMap.set("global", {
-        min: state.temperatureMin,
-        max: state.temperatureMax,
+        min: state2.temperatureMin,
+        max: state2.temperatureMax,
         customerName: "Global",
         color: colors.success,
         deviceLabels: []
@@ -28644,10 +29013,10 @@
       const point = xAxisPoints[i];
       const date = new Date(point.x);
       let label;
-      if (state.granularity === "hour") {
-        label = date.toLocaleTimeString(state.locale, { hour: "2-digit", minute: "2-digit" });
+      if (state2.granularity === "hour") {
+        label = date.toLocaleTimeString(state2.locale, { hour: "2-digit", minute: "2-digit" });
       } else {
-        label = date.toLocaleDateString(state.locale, { day: "2-digit", month: "2-digit" });
+        label = date.toLocaleDateString(state2.locale, { day: "2-digit", month: "2-digit" });
       }
       ctx.strokeStyle = colors.chartGrid;
       ctx.lineWidth = 1;
@@ -28666,16 +29035,16 @@
     ctx.lineTo(width - paddingRight, height - paddingBottom);
     ctx.stroke();
     const allChartPoints = processedData.flatMap((pd) => pd.points);
-    setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state, colors);
+    setupComparisonChartTooltip(canvas, chartContainer, allChartPoints, state2, colors);
   }
-  function setupComparisonChartTooltip(canvas, container, chartData, state, colors) {
+  function setupComparisonChartTooltip(canvas, container, chartData, state2, colors) {
     const existingTooltip = container.querySelector(".myio-chart-tooltip");
     if (existingTooltip) existingTooltip.remove();
     const tooltip = document.createElement("div");
     tooltip.className = "myio-chart-tooltip";
     tooltip.style.cssText = `
     position: absolute;
-    background: ${state.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
+    background: ${state2.theme === "dark" ? "rgba(30, 30, 40, 0.95)" : "rgba(255, 255, 255, 0.98)"};
     border: 1px solid ${colors.border};
     border-radius: 8px;
     padding: 10px 14px;
@@ -28712,17 +29081,17 @@
       if (point) {
         const date = new Date(point.x);
         let dateStr;
-        if (state.granularity === "hour") {
-          dateStr = date.toLocaleDateString(state.locale, {
+        if (state2.granularity === "hour") {
+          dateStr = date.toLocaleDateString(state2.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
-          }) + " " + date.toLocaleTimeString(state.locale, {
+          }) + " " + date.toLocaleTimeString(state2.locale, {
             hour: "2-digit",
             minute: "2-digit"
           });
         } else {
-          dateStr = date.toLocaleDateString(state.locale, {
+          dateStr = date.toLocaleDateString(state2.locale, {
             day: "2-digit",
             month: "2-digit",
             year: "numeric"
@@ -28764,7 +29133,7 @@
       canvas.style.cursor = "default";
     });
   }
-  async function setupEventListeners2(container, state, modalId, onClose) {
+  async function setupEventListeners2(container, state2, modalId, onClose) {
     const closeModal = () => {
       container.remove();
       onClose?.();
@@ -28775,19 +29144,19 @@
     document.getElementById(`${modalId}-close`)?.addEventListener("click", closeModal);
     document.getElementById(`${modalId}-close-btn`)?.addEventListener("click", closeModal);
     const dateRangeInput = document.getElementById(`${modalId}-date-range`);
-    if (dateRangeInput && !state.dateRangePicker) {
+    if (dateRangeInput && !state2.dateRangePicker) {
       try {
-        state.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
-          presetStart: new Date(state.startTs).toISOString(),
-          presetEnd: new Date(state.endTs).toISOString(),
+        state2.dateRangePicker = await createDateRangePicker2(dateRangeInput, {
+          presetStart: new Date(state2.startTs).toISOString(),
+          presetEnd: new Date(state2.endTs).toISOString(),
           includeTime: true,
           timePrecision: "minute",
           maxRangeDays: 90,
-          locale: state.locale,
+          locale: state2.locale,
           parentEl: container.querySelector(".myio-temp-comparison-content"),
           onApply: (result) => {
-            state.startTs = new Date(result.startISO).getTime();
-            state.endTs = new Date(result.endISO).getTime();
+            state2.startTs = new Date(result.startISO).getTime();
+            state2.endTs = new Date(result.endISO).getTime();
             console.log("[TemperatureComparisonModal] Date range applied:", result);
           }
         });
@@ -28796,23 +29165,23 @@
       }
     }
     document.getElementById(`${modalId}-theme-toggle`)?.addEventListener("click", async () => {
-      state.theme = state.theme === "dark" ? "light" : "dark";
-      localStorage.setItem("myio-temp-comparison-theme", state.theme);
-      state.dateRangePicker = null;
-      renderModal2(container, state, modalId);
-      if (state.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state);
-      }
-      await setupEventListeners2(container, state, modalId, onClose);
+      state2.theme = state2.theme === "dark" ? "light" : "dark";
+      localStorage.setItem("myio-temp-comparison-theme", state2.theme);
+      state2.dateRangePicker = null;
+      renderModal2(container, state2, modalId);
+      if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state2);
+      }
+      await setupEventListeners2(container, state2, modalId, onClose);
     });
     document.getElementById(`${modalId}-maximize`)?.addEventListener("click", async () => {
       container.__isMaximized = !container.__isMaximized;
-      state.dateRangePicker = null;
-      renderModal2(container, state, modalId);
-      if (state.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state);
+      state2.dateRangePicker = null;
+      renderModal2(container, state2, modalId);
+      if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state2);
       }
-      await setupEventListeners2(container, state, modalId, onClose);
+      await setupEventListeners2(container, state2, modalId, onClose);
     });
     const periodBtn = document.getElementById(`${modalId}-period-btn`);
     const periodDropdown = document.getElementById(`${modalId}-period-dropdown`);
@@ -28831,13 +29200,13 @@
     periodCheckboxes.forEach((checkbox) => {
       checkbox.addEventListener("change", () => {
         const checked = Array.from(periodCheckboxes).filter((cb) => cb.checked).map((cb) => cb.value);
-        state.selectedPeriods = checked;
+        state2.selectedPeriods = checked;
         const btnLabel = periodBtn?.querySelector("span:first-child");
         if (btnLabel) {
-          btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+          btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
         }
-        if (state.deviceData.some((dd) => dd.data.length > 0)) {
-          drawComparisonChart(modalId, state);
+        if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+          drawComparisonChart(modalId, state2);
         }
       });
     });
@@ -28845,77 +29214,77 @@
       periodCheckboxes.forEach((cb) => {
         cb.checked = true;
       });
-      state.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
+      state2.selectedPeriods = ["madrugada", "manha", "tarde", "noite"];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
       }
-      if (state.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state);
+      if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state2);
       }
     });
     document.getElementById(`${modalId}-period-clear`)?.addEventListener("click", () => {
       periodCheckboxes.forEach((cb) => {
         cb.checked = false;
       });
-      state.selectedPeriods = [];
+      state2.selectedPeriods = [];
       const btnLabel = periodBtn?.querySelector("span:first-child");
       if (btnLabel) {
-        btnLabel.textContent = getSelectedPeriodsLabel(state.selectedPeriods);
+        btnLabel.textContent = getSelectedPeriodsLabel(state2.selectedPeriods);
       }
-      if (state.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state);
+      if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state2);
       }
     });
     document.getElementById(`${modalId}-granularity`)?.addEventListener("change", (e) => {
-      state.granularity = e.target.value;
-      localStorage.setItem("myio-temp-comparison-granularity", state.granularity);
-      if (state.deviceData.some((dd) => dd.data.length > 0)) {
-        drawComparisonChart(modalId, state);
+      state2.granularity = e.target.value;
+      localStorage.setItem("myio-temp-comparison-granularity", state2.granularity);
+      if (state2.deviceData.some((dd) => dd.data.length > 0)) {
+        drawComparisonChart(modalId, state2);
       }
     });
     document.getElementById(`${modalId}-query`)?.addEventListener("click", async () => {
-      if (state.startTs >= state.endTs) {
+      if (state2.startTs >= state2.endTs) {
         alert("Por favor, selecione um per\xEDodo v\xE1lido");
         return;
       }
-      state.isLoading = true;
-      state.dateRangePicker = null;
-      renderModal2(container, state, modalId);
-      await fetchAllDevicesData(state);
-      renderModal2(container, state, modalId);
-      drawComparisonChart(modalId, state);
-      await setupEventListeners2(container, state, modalId, onClose);
+      state2.isLoading = true;
+      state2.dateRangePicker = null;
+      renderModal2(container, state2, modalId);
+      await fetchAllDevicesData(state2);
+      renderModal2(container, state2, modalId);
+      drawComparisonChart(modalId, state2);
+      await setupEventListeners2(container, state2, modalId, onClose);
     });
     document.getElementById(`${modalId}-export`)?.addEventListener("click", () => {
-      if (state.deviceData.every((dd) => dd.data.length === 0)) return;
-      exportComparisonCSV(state);
+      if (state2.deviceData.every((dd) => dd.data.length === 0)) return;
+      exportComparisonCSV(state2);
     });
   }
-  function exportComparisonCSV(state) {
-    const startDateStr = new Date(state.startTs).toLocaleDateString(state.locale).replace(/\//g, "-");
-    const endDateStr = new Date(state.endTs).toLocaleDateString(state.locale).replace(/\//g, "-");
+  function exportComparisonCSV(state2) {
+    const startDateStr = new Date(state2.startTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
+    const endDateStr = new Date(state2.endTs).toLocaleDateString(state2.locale).replace(/\//g, "-");
     const BOM = "\uFEFF";
     let csvContent = BOM;
     csvContent += `Compara\xE7\xE3o de Temperatura
 `;
     csvContent += `Per\xEDodo: ${startDateStr} at\xE9 ${endDateStr}
 `;
-    csvContent += `Sensores: ${state.devices.map((d) => d.label).join(", ")}
+    csvContent += `Sensores: ${state2.devices.map((d) => d.label).join(", ")}
 `;
     csvContent += "\n";
     csvContent += "Estat\xEDsticas por Sensor:\n";
     csvContent += "Sensor,M\xE9dia (\xB0C),Min (\xB0C),Max (\xB0C),Leituras\n";
-    state.deviceData.forEach((dd) => {
+    state2.deviceData.forEach((dd) => {
       csvContent += `"${dd.device.label}",${dd.stats.avg.toFixed(2)},${dd.stats.min.toFixed(2)},${dd.stats.max.toFixed(2)},${dd.stats.count}
 `;
     });
     csvContent += "\n";
     csvContent += "Dados Detalhados:\n";
     csvContent += "Data/Hora,Sensor,Temperatura (\xB0C)\n";
-    state.deviceData.forEach((dd) => {
+    state2.deviceData.forEach((dd) => {
       dd.data.forEach((item) => {
-        const date = new Date(item.ts).toLocaleString(state.locale);
+        const date = new Date(item.ts).toLocaleString(state2.locale);
         const temp = Number(item.value).toFixed(2);
         csvContent += `"${date}","${dd.device.label}",${temp}
 `;
@@ -29023,10 +29392,10 @@
       throw new Error(`Failed to save attributes: ${response.status}`);
     }
   }
-  function renderModal3(container, state, modalId, onClose, onSave) {
-    const colors = getColors(state.theme);
-    const minValue = state.minTemperature !== null ? state.minTemperature : "";
-    const maxValue = state.maxTemperature !== null ? state.maxTemperature : "";
+  function renderModal3(container, state2, modalId, onClose, onSave) {
+    const colors = getColors(state2.theme);
+    const minValue = state2.minTemperature !== null ? state2.minTemperature : "";
+    const maxValue = state2.maxTemperature !== null ? state2.maxTemperature : "";
     container.innerHTML = `
     <style>
       @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -29291,23 +29660,23 @@
         </div>
 
         <div class="modal-body">
-          ${state.isLoading ? `
+          ${state2.isLoading ? `
             <div class="loading-overlay">
               <div class="loading-spinner"></div>
               <div>Carregando configura\xE7\xF5es...</div>
             </div>
           ` : `
-            ${state.error ? `
-              <div class="message message-error">${state.error}</div>
+            ${state2.error ? `
+              <div class="message message-error">${state2.error}</div>
             ` : ""}
 
-            ${state.successMessage ? `
-              <div class="message message-success">${state.successMessage}</div>
+            ${state2.successMessage ? `
+              <div class="message message-success">${state2.successMessage}</div>
             ` : ""}
 
             <div class="customer-info">
               <div class="customer-label">Shopping / Cliente</div>
-              <div class="customer-name">${state.customerName || "N\xE3o identificado"}</div>
+              <div class="customer-name">${state2.customerName || "N\xE3o identificado"}</div>
             </div>
 
             <div class="form-group">
@@ -29351,11 +29720,11 @@
           `}
         </div>
 
-        ${!state.isLoading ? `
+        ${!state2.isLoading ? `
           <div class="modal-footer">
             <button class="btn btn-secondary" id="${modalId}-cancel">Cancelar</button>
-            <button class="btn btn-primary" id="${modalId}-save" ${state.isSaving ? "disabled" : ""}>
-              ${state.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
+            <button class="btn btn-primary" id="${modalId}-save" ${state2.isSaving ? "disabled" : ""}>
+              ${state2.isSaving ? '<div class="spinner"></div> Salvando...' : "Salvar"}
             </button>
           </div>
         ` : ""}
@@ -29392,18 +29761,18 @@
       const min = parseFloat(minInput.value);
       const max = parseFloat(maxInput.value);
       if (isNaN(min) || isNaN(max)) {
-        state.error = "Por favor, preencha ambos os valores.";
-        renderModal3(container, state, modalId, onClose, onSave);
+        state2.error = "Por favor, preencha ambos os valores.";
+        renderModal3(container, state2, modalId, onClose, onSave);
         return;
       }
       if (min >= max) {
-        state.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
-        renderModal3(container, state, modalId, onClose, onSave);
+        state2.error = "A temperatura m\xEDnima deve ser menor que a m\xE1xima.";
+        renderModal3(container, state2, modalId, onClose, onSave);
         return;
       }
       if (min < 0 || max > 50) {
-        state.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
-        renderModal3(container, state, modalId, onClose, onSave);
+        state2.error = "Os valores devem estar entre 0\xB0C e 50\xB0C.";
+        renderModal3(container, state2, modalId, onClose, onSave);
         return;
       }
       await onSave(min, max);
@@ -29411,7 +29780,7 @@
   }
   function openTemperatureSettingsModal(params) {
     const modalId = `myio-temp-settings-${Date.now()}`;
-    const state = {
+    const state2 = {
       customerId: params.customerId,
       customerName: params.customerName || "",
       token: params.token,
@@ -29431,37 +29800,37 @@
       params.onClose?.();
     };
     const handleSave = async (min, max) => {
-      state.isSaving = true;
-      state.error = null;
-      state.successMessage = null;
-      renderModal3(container, state, modalId, destroy, handleSave);
+      state2.isSaving = true;
+      state2.error = null;
+      state2.successMessage = null;
+      renderModal3(container, state2, modalId, destroy, handleSave);
       try {
-        await saveCustomerAttributes(state.customerId, state.token, min, max, params.onError);
-        state.minTemperature = min;
-        state.maxTemperature = max;
-        state.isSaving = false;
-        state.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
-        renderModal3(container, state, modalId, destroy, handleSave);
+        await saveCustomerAttributes(state2.customerId, state2.token, min, max, params.onError);
+        state2.minTemperature = min;
+        state2.maxTemperature = max;
+        state2.isSaving = false;
+        state2.successMessage = "Configura\xE7\xF5es salvas com sucesso!";
+        renderModal3(container, state2, modalId, destroy, handleSave);
         params.onSave?.({ minTemperature: min, maxTemperature: max });
         setTimeout(() => {
           destroy();
         }, 1500);
       } catch (error) {
-        state.isSaving = false;
-        state.error = `Erro ao salvar: ${error.message}`;
-        renderModal3(container, state, modalId, destroy, handleSave);
+        state2.isSaving = false;
+        state2.error = `Erro ao salvar: ${error.message}`;
+        renderModal3(container, state2, modalId, destroy, handleSave);
       }
     };
-    renderModal3(container, state, modalId, destroy, handleSave);
-    fetchCustomerAttributes(state.customerId, state.token, params.onError).then(({ minTemperature, maxTemperature }) => {
-      state.minTemperature = minTemperature;
-      state.maxTemperature = maxTemperature;
-      state.isLoading = false;
-      renderModal3(container, state, modalId, destroy, handleSave);
+    renderModal3(container, state2, modalId, destroy, handleSave);
+    fetchCustomerAttributes(state2.customerId, state2.token, params.onError).then(({ minTemperature, maxTemperature }) => {
+      state2.minTemperature = minTemperature;
+      state2.maxTemperature = maxTemperature;
+      state2.isLoading = false;
+      renderModal3(container, state2, modalId, destroy, handleSave);
     }).catch((error) => {
-      state.isLoading = false;
-      state.error = `Erro ao carregar: ${error.message}`;
-      renderModal3(container, state, modalId, destroy, handleSave);
+      state2.isLoading = false;
+      state2.error = `Erro ao carregar: ${error.message}`;
+      renderModal3(container, state2, modalId, destroy, handleSave);
     });
     return { destroy };
   }
@@ -29497,11 +29866,13 @@
   border: 1px solid #e2e8f0;
   border-radius: 12px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 380px;
   width: max-content;
   max-width: 90vw;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 12px;
   color: #1e293b;
+  overflow: hidden;
 }
 
 .energy-summary-tooltip__header {
@@ -29807,8 +30178,7 @@
   align-items: center;
   padding: 10px 14px;
   background: linear-gradient(135deg, #047857 0%, #059669 100%);
-  margin: 12px -14px -14px;
-  border-radius: 0 0 12px 12px;
+  border-radius: 0 0 11px 11px;
 }
 
 .energy-summary-tooltip__total-label {
@@ -29951,7 +30321,7 @@
         { key: "failure", label: "Falha", count: status.failure },
         { key: "standby", label: "Standby", count: status.standby },
         { key: "offline", label: "Offline", count: status.offline },
-        { key: "no-consumption", label: "Sem Dados", count: status.noConsumption }
+        { key: "no-consumption", label: "Sem Consumo", count: status.noConsumption }
       ];
       return items.map((item) => `
       <div class="energy-summary-tooltip__status-item ${item.key}">
@@ -30396,7 +30766,7 @@
      * Build summary data from TELEMETRY_INFO STATE
      * This is called by the widget controller to get data for the tooltip
      */
-    buildSummaryFromState(state, receivedData) {
+    buildSummaryFromState(state2, receivedData) {
       const summary = {
         totalDevices: 0,
         totalConsumption: 0,
@@ -30412,22 +30782,22 @@
         },
         lastUpdated: (/* @__PURE__ */ new Date()).toISOString()
       };
-      if (!state) return summary;
+      if (!state2) return summary;
       const entrada = {
         id: "entrada",
         name: "Entrada",
         icon: CATEGORY_ICONS.entrada,
-        deviceCount: state.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
-        consumption: state.entrada?.total || 0,
+        deviceCount: state2.entrada?.devices?.length || (receivedData?.entrada_total?.device_count || 0),
+        consumption: state2.entrada?.total || 0,
         percentage: 100
       };
       const lojas = {
         id: "lojas",
         name: "Lojas",
         icon: CATEGORY_ICONS.lojas,
-        deviceCount: state.consumidores?.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
-        consumption: state.consumidores?.lojas?.total || 0,
-        percentage: state.consumidores?.lojas?.perc || 0
+        deviceCount: state2.consumidores?.lojas?.devices?.length || (receivedData?.lojas_total?.device_count || 0),
+        consumption: state2.consumidores?.lojas?.total || 0,
+        percentage: state2.consumidores?.lojas?.perc || 0
       };
       const climatizacaoData = receivedData?.climatizacao || {};
       const elevadoresData = receivedData?.elevadores || {};
@@ -30438,9 +30808,9 @@
         id: "climatizacao",
         name: "Climatizacao",
         icon: CATEGORY_ICONS.climatizacao,
-        deviceCount: climatizacaoData.count || state.consumidores?.climatizacao?.devices?.length || 0,
-        consumption: state.consumidores?.climatizacao?.total || 0,
-        percentage: state.consumidores?.climatizacao?.perc || 0
+        deviceCount: climatizacaoData.count || state2.consumidores?.climatizacao?.devices?.length || 0,
+        consumption: state2.consumidores?.climatizacao?.total || 0,
+        percentage: state2.consumidores?.climatizacao?.perc || 0
       };
       if (climatizacaoData.subcategories) {
         climatizacao.children = [];
@@ -30491,54 +30861,67 @@
         id: "elevadores",
         name: "Elevadores",
         icon: CATEGORY_ICONS.elevadores,
-        deviceCount: elevadoresData.count || state.consumidores?.elevadores?.devices?.length || 0,
-        consumption: state.consumidores?.elevadores?.total || 0,
-        percentage: state.consumidores?.elevadores?.perc || 0
+        deviceCount: elevadoresData.count || state2.consumidores?.elevadores?.devices?.length || 0,
+        consumption: state2.consumidores?.elevadores?.total || 0,
+        percentage: state2.consumidores?.elevadores?.perc || 0
       });
       areaComumChildren.push({
         id: "escadasRolantes",
         name: "Esc. Rolantes",
         icon: CATEGORY_ICONS.escadas,
-        deviceCount: escadasData.count || state.consumidores?.escadasRolantes?.devices?.length || 0,
-        consumption: state.consumidores?.escadasRolantes?.total || 0,
-        percentage: state.consumidores?.escadasRolantes?.perc || 0
+        deviceCount: escadasData.count || state2.consumidores?.escadasRolantes?.devices?.length || 0,
+        consumption: state2.consumidores?.escadasRolantes?.total || 0,
+        percentage: state2.consumidores?.escadasRolantes?.perc || 0
       });
       areaComumChildren.push({
         id: "outros",
         name: "Outros",
         icon: CATEGORY_ICONS.outros,
-        deviceCount: outrosData.count || state.consumidores?.outros?.devices?.length || 0,
-        consumption: state.consumidores?.outros?.total || 0,
-        percentage: state.consumidores?.outros?.perc || 0
+        deviceCount: outrosData.count || state2.consumidores?.outros?.devices?.length || 0,
+        consumption: state2.consumidores?.outros?.total || 0,
+        percentage: state2.consumidores?.outros?.perc || 0
       });
       const areaComumDeviceCount = areaComumChildren.reduce((sum, c) => sum + c.deviceCount, 0);
-      const areaComumConsumption = state.consumidores?.areaComum?.total || areaComumChildren.reduce((sum, c) => sum + c.consumption, 0);
+      const areaComumConsumption = state2.consumidores?.areaComum?.total || areaComumChildren.reduce((sum, c) => sum + c.consumption, 0);
       const areaComum = {
         id: "areaComum",
         name: "Area Comum",
         icon: CATEGORY_ICONS.areaComum,
         deviceCount: areaComumDeviceCount,
         consumption: areaComumConsumption,
-        percentage: state.consumidores?.areaComum?.perc || 0,
+        percentage: state2.consumidores?.areaComum?.perc || 0,
         children: areaComumChildren
       };
       summary.byCategory = [entrada, lojas, areaComum];
       summary.totalDevices = entrada.deviceCount + lojas.deviceCount + areaComumDeviceCount;
-      summary.totalConsumption = state.grandTotal || entrada.consumption;
+      summary.totalConsumption = state2.grandTotal || entrada.consumption;
       const totalDevices = summary.totalDevices;
-      summary.byStatus = {
-        normal: Math.floor(totalDevices * 0.85),
-        // Estimate 85% normal
-        alert: Math.floor(totalDevices * 0.08),
-        // Estimate 8% alert
-        failure: Math.floor(totalDevices * 0.02),
-        // Estimate 2% failure
-        standby: Math.floor(totalDevices * 0.03),
-        // Estimate 3% standby
-        offline: Math.floor(totalDevices * 0.02),
-        // Estimate 2% offline
-        noConsumption: 0
-      };
+      const statusData = receivedData?.statusCounts || receivedData?.deviceStatus || null;
+      if (statusData && typeof statusData === "object") {
+        summary.byStatus = {
+          normal: statusData.normal || 0,
+          alert: statusData.alert || 0,
+          failure: statusData.failure || 0,
+          standby: statusData.standby || 0,
+          offline: statusData.offline || 0,
+          noConsumption: statusData.noConsumption || statusData.zeroConsumption || 0
+        };
+      } else {
+        summary.byStatus = {
+          normal: Math.floor(totalDevices * 0.75),
+          // Estimate 75% normal (with consumption)
+          alert: Math.floor(totalDevices * 0.06),
+          // Estimate 6% alert
+          failure: Math.floor(totalDevices * 0.02),
+          // Estimate 2% failure
+          standby: Math.floor(totalDevices * 0.02),
+          // Estimate 2% standby
+          offline: Math.floor(totalDevices * 0.03),
+          // Estimate 3% offline
+          noConsumption: Math.floor(totalDevices * 0.12)
+          // Estimate 12% sem consumo
+        };
+      }
       const statusSum = Object.values(summary.byStatus).reduce((a, b) => a + b, 0);
       if (statusSum !== totalDevices && totalDevices > 0) {
         summary.byStatus.normal += totalDevices - statusSum;
@@ -30547,6 +30930,654 @@
     }
   };
 
+  // src/utils/InfoTooltip.ts
+  var INFO_TOOLTIP_CSS = `
+/* ============================================
+   Info Tooltip (RFC-0105)
+   Premium draggable tooltip with actions
+   ============================================ */
+
+.myio-info-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+  transform: translateY(5px);
+}
+
+.myio-info-tooltip.visible {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.myio-info-tooltip.closing {
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.myio-info-tooltip.pinned {
+  box-shadow: 0 0 0 2px #047857, 0 10px 40px rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+}
+
+.myio-info-tooltip.dragging {
+  transition: none !important;
+  cursor: move;
+}
+
+.myio-info-tooltip.maximized {
+  top: 20px !important;
+  left: 20px !important;
+  right: 20px !important;
+  bottom: 20px !important;
+  width: auto !important;
+  max-width: none !important;
+}
+
+.myio-info-tooltip.maximized .myio-info-tooltip__panel {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.myio-info-tooltip.maximized .myio-info-tooltip__content {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.myio-info-tooltip__panel {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
+  min-width: 320px;
+  max-width: 400px;
+  font-size: 12px;
+  color: #1e293b;
+  overflow: hidden;
+  font-family: Inter, system-ui, -apple-system, sans-serif;
+}
+
+.myio-info-tooltip__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 100%);
+  border-bottom: 1px solid #cbd5e1;
+  cursor: move;
+  user-select: none;
+}
+
+.myio-info-tooltip__icon {
+  font-size: 18px;
+}
+
+.myio-info-tooltip__title {
+  font-weight: 700;
+  font-size: 14px;
+  color: #475569;
+  letter-spacing: 0.3px;
+  flex: 1;
+}
+
+.myio-info-tooltip__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.myio-info-tooltip__header-btn {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  color: #64748b;
+}
+
+.myio-info-tooltip__header-btn:hover {
+  background: rgba(255, 255, 255, 0.9);
+  color: #1e293b;
+}
+
+.myio-info-tooltip__header-btn.pinned {
+  background: #047857;
+  color: white;
+}
+
+.myio-info-tooltip__header-btn.pinned:hover {
+  background: #065f46;
+  color: white;
+}
+
+.myio-info-tooltip__header-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.myio-info-tooltip__content {
+  padding: 16px;
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+/* Content styles */
+.myio-info-tooltip__section {
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.myio-info-tooltip__section:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.myio-info-tooltip__section-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.8px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.myio-info-tooltip__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 0;
+  gap: 12px;
+}
+
+.myio-info-tooltip__label {
+  color: #64748b;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.myio-info-tooltip__value {
+  color: #1e293b;
+  font-weight: 600;
+  text-align: right;
+}
+
+.myio-info-tooltip__value--highlight {
+  color: #10b981;
+  font-weight: 700;
+  font-size: 14px;
+}
+
+.myio-info-tooltip__notice {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 12px 14px;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  margin-top: 12px;
+}
+
+.myio-info-tooltip__notice-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.myio-info-tooltip__notice-text {
+  font-size: 11px;
+  color: #475569;
+  line-height: 1.5;
+}
+
+.myio-info-tooltip__notice-text strong {
+  font-weight: 700;
+  color: #334155;
+}
+
+.myio-info-tooltip__category {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+  margin-bottom: 6px;
+  border-left: 3px solid #94a3b8;
+}
+
+.myio-info-tooltip__category:last-child {
+  margin-bottom: 0;
+}
+
+.myio-info-tooltip__category--climatizacao {
+  border-left-color: #00C896;
+  background: #ecfdf5;
+}
+
+.myio-info-tooltip__category--outros {
+  border-left-color: #9C27B0;
+  background: #fdf4ff;
+}
+
+.myio-info-tooltip__category-icon {
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+.myio-info-tooltip__category-info {
+  flex: 1;
+}
+
+.myio-info-tooltip__category-name {
+  font-weight: 600;
+  color: #334155;
+  font-size: 12px;
+}
+
+.myio-info-tooltip__category-desc {
+  font-size: 10px;
+  color: #64748b;
+  margin-top: 2px;
+}
+
+.myio-info-tooltip__category-value {
+  font-weight: 700;
+  color: #334155;
+  font-size: 13px;
+}
+`;
+  var cssInjected4 = false;
+  function injectCSS4() {
+    if (cssInjected4) return;
+    if (typeof document === "undefined") return;
+    const styleId = "myio-info-tooltip-styles";
+    if (document.getElementById(styleId)) {
+      cssInjected4 = true;
+      return;
+    }
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = INFO_TOOLTIP_CSS;
+    document.head.appendChild(style);
+    cssInjected4 = true;
+  }
+  var state = {
+    hideTimer: null,
+    isMouseOverTooltip: false,
+    isMaximized: false,
+    isDragging: false,
+    dragOffset: { x: 0, y: 0 },
+    savedPosition: null,
+    pinnedCounter: 0
+  };
+  function generateHeaderHTML(icon, title) {
+    return `
+    <div class="myio-info-tooltip__header" data-drag-handle>
+      <span class="myio-info-tooltip__icon">${icon}</span>
+      <span class="myio-info-tooltip__title">${title}</span>
+      <div class="myio-info-tooltip__header-actions">
+        <button class="myio-info-tooltip__header-btn" data-action="pin" title="Fixar na tela">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+            <line x1="12" y1="16" x2="12" y2="21"/>
+            <line x1="8" y1="4" x2="16" y2="4"/>
+          </svg>
+        </button>
+        <button class="myio-info-tooltip__header-btn" data-action="maximize" title="Maximizar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2"/>
+          </svg>
+        </button>
+        <button class="myio-info-tooltip__header-btn" data-action="close" title="Fechar">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+  `;
+  }
+  function setupHoverListeners(container) {
+    container.onmouseenter = () => {
+      state.isMouseOverTooltip = true;
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+        state.hideTimer = null;
+      }
+    };
+    container.onmouseleave = () => {
+      state.isMouseOverTooltip = false;
+      startDelayedHide();
+    };
+  }
+  function setupButtonListeners(container) {
+    const buttons = container.querySelectorAll("[data-action]");
+    buttons.forEach((btn) => {
+      btn.onclick = (e) => {
+        e.stopPropagation();
+        const action = btn.dataset.action;
+        switch (action) {
+          case "pin":
+            createPinnedClone(container);
+            break;
+          case "maximize":
+            toggleMaximize(container);
+            break;
+          case "close":
+            InfoTooltip.close();
+            break;
+        }
+      };
+    });
+  }
+  function setupDragListeners(container) {
+    const header = container.querySelector("[data-drag-handle]");
+    if (!header) return;
+    header.onmousedown = (e) => {
+      if (e.target.closest("[data-action]")) return;
+      if (state.isMaximized) return;
+      state.isDragging = true;
+      container.classList.add("dragging");
+      const rect = container.getBoundingClientRect();
+      state.dragOffset = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+      };
+      const onMouseMove = (e2) => {
+        if (!state.isDragging) return;
+        const newLeft = e2.clientX - state.dragOffset.x;
+        const newTop = e2.clientY - state.dragOffset.y;
+        const maxLeft = window.innerWidth - container.offsetWidth;
+        const maxTop = window.innerHeight - container.offsetHeight;
+        container.style.left = Math.max(0, Math.min(newLeft, maxLeft)) + "px";
+        container.style.top = Math.max(0, Math.min(newTop, maxTop)) + "px";
+      };
+      const onMouseUp = () => {
+        state.isDragging = false;
+        container.classList.remove("dragging");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+  }
+  function createPinnedClone(container) {
+    state.pinnedCounter++;
+    const pinnedId = `myio-info-tooltip-pinned-${state.pinnedCounter}`;
+    const clone = container.cloneNode(true);
+    clone.id = pinnedId;
+    clone.classList.add("pinned");
+    clone.classList.remove("closing");
+    const pinBtn = clone.querySelector('[data-action="pin"]');
+    if (pinBtn) {
+      pinBtn.classList.add("pinned");
+      pinBtn.setAttribute("title", "Desafixar");
+      pinBtn.innerHTML = `
+      <svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
+        <path d="M9 4v6l-2 4v2h10v-2l-2-4V4"/>
+        <line x1="12" y1="16" x2="12" y2="21"/>
+        <line x1="8" y1="4" x2="16" y2="4"/>
+      </svg>
+    `;
+    }
+    document.body.appendChild(clone);
+    setupPinnedCloneListeners(clone, pinnedId);
+    InfoTooltip.hide();
+  }
+  function setupPinnedCloneListeners(clone, cloneId) {
+    let isMaximized = false;
+    let savedPosition = null;
+    const pinBtn = clone.querySelector('[data-action="pin"]');
+    if (pinBtn) {
+      pinBtn.onclick = (e) => {
+        e.stopPropagation();
+        closePinnedClone(cloneId);
+      };
+    }
+    const closeBtn = clone.querySelector('[data-action="close"]');
+    if (closeBtn) {
+      closeBtn.onclick = (e) => {
+        e.stopPropagation();
+        closePinnedClone(cloneId);
+      };
+    }
+    const maxBtn = clone.querySelector('[data-action="maximize"]');
+    if (maxBtn) {
+      maxBtn.onclick = (e) => {
+        e.stopPropagation();
+        isMaximized = !isMaximized;
+        if (isMaximized) {
+          savedPosition = { left: clone.style.left, top: clone.style.top };
+          maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 5V3h12v12h-2"/></svg>`;
+          maxBtn.setAttribute("title", "Restaurar");
+        } else {
+          maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`;
+          maxBtn.setAttribute("title", "Maximizar");
+          if (savedPosition) {
+            clone.style.left = savedPosition.left;
+            clone.style.top = savedPosition.top;
+          }
+        }
+        clone.classList.toggle("maximized", isMaximized);
+      };
+    }
+    const header = clone.querySelector("[data-drag-handle]");
+    if (header) {
+      let isDragging = false;
+      let dragOffset = { x: 0, y: 0 };
+      header.onmousedown = (e) => {
+        if (e.target.closest("[data-action]")) return;
+        if (isMaximized) return;
+        isDragging = true;
+        clone.classList.add("dragging");
+        const rect = clone.getBoundingClientRect();
+        dragOffset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        const onMouseMove = (e2) => {
+          if (!isDragging) return;
+          const newLeft = e2.clientX - dragOffset.x;
+          const newTop = e2.clientY - dragOffset.y;
+          const maxLeft = window.innerWidth - clone.offsetWidth;
+          const maxTop = window.innerHeight - clone.offsetHeight;
+          clone.style.left = Math.max(0, Math.min(newLeft, maxLeft)) + "px";
+          clone.style.top = Math.max(0, Math.min(newTop, maxTop)) + "px";
+        };
+        const onMouseUp = () => {
+          isDragging = false;
+          clone.classList.remove("dragging");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+      };
+    }
+  }
+  function closePinnedClone(cloneId) {
+    const clone = document.getElementById(cloneId);
+    if (clone) {
+      clone.classList.add("closing");
+      setTimeout(() => clone.remove(), 400);
+    }
+  }
+  function toggleMaximize(container) {
+    state.isMaximized = !state.isMaximized;
+    if (state.isMaximized) {
+      state.savedPosition = {
+        left: container.style.left,
+        top: container.style.top
+      };
+    }
+    container.classList.toggle("maximized", state.isMaximized);
+    const maxBtn = container.querySelector('[data-action="maximize"]');
+    if (maxBtn) {
+      if (state.isMaximized) {
+        maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="5" y="5" width="14" height="14" rx="2"/><path d="M9 5V3h12v12h-2"/></svg>`;
+        maxBtn.setAttribute("title", "Restaurar");
+      } else {
+        maxBtn.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`;
+        maxBtn.setAttribute("title", "Maximizar");
+        if (state.savedPosition) {
+          container.style.left = state.savedPosition.left;
+          container.style.top = state.savedPosition.top;
+        }
+      }
+    }
+  }
+  function startDelayedHide() {
+    if (state.isMouseOverTooltip) return;
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+    }
+    state.hideTimer = setTimeout(() => {
+      hideWithAnimation();
+    }, 1500);
+  }
+  function hideWithAnimation() {
+    const container = document.getElementById("myio-info-tooltip");
+    if (container && container.classList.contains("visible")) {
+      container.classList.add("closing");
+      setTimeout(() => {
+        container.classList.remove("visible", "closing");
+      }, 400);
+    }
+  }
+  function positionTooltip(container, triggerElement) {
+    const rect = triggerElement.getBoundingClientRect();
+    let left = rect.left;
+    let top = rect.bottom + 8;
+    const tooltipWidth = 380;
+    if (left + tooltipWidth > window.innerWidth - 20) {
+      left = window.innerWidth - tooltipWidth - 20;
+    }
+    if (left < 10) left = 10;
+    if (top + 400 > window.innerHeight) {
+      top = rect.top - 8 - 400;
+      if (top < 10) top = 10;
+    }
+    container.style.left = left + "px";
+    container.style.top = top + "px";
+  }
+  var InfoTooltip = {
+    containerId: "myio-info-tooltip",
+    /**
+     * Get or create container
+     */
+    getContainer() {
+      injectCSS4();
+      let container = document.getElementById(this.containerId);
+      if (!container) {
+        container = document.createElement("div");
+        container.id = this.containerId;
+        container.className = "myio-info-tooltip";
+        document.body.appendChild(container);
+      }
+      return container;
+    },
+    /**
+     * Show tooltip
+     */
+    show(triggerElement, options) {
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+        state.hideTimer = null;
+      }
+      const container = this.getContainer();
+      container.classList.remove("closing");
+      container.innerHTML = `
+      <div class="myio-info-tooltip__panel">
+        ${generateHeaderHTML(options.icon, options.title)}
+        <div class="myio-info-tooltip__content">
+          ${options.content}
+        </div>
+      </div>
+    `;
+      positionTooltip(container, triggerElement);
+      container.classList.add("visible");
+      setupHoverListeners(container);
+      setupButtonListeners(container);
+      setupDragListeners(container);
+    },
+    /**
+     * Start delayed hide
+     */
+    startDelayedHide() {
+      startDelayedHide();
+    },
+    /**
+     * Hide immediately
+     */
+    hide() {
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+        state.hideTimer = null;
+      }
+      state.isMouseOverTooltip = false;
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible", "closing");
+      }
+    },
+    /**
+     * Close and reset all states
+     */
+    close() {
+      state.isMaximized = false;
+      state.isDragging = false;
+      state.savedPosition = null;
+      if (state.hideTimer) {
+        clearTimeout(state.hideTimer);
+        state.hideTimer = null;
+      }
+      state.isMouseOverTooltip = false;
+      const container = document.getElementById(this.containerId);
+      if (container) {
+        container.classList.remove("visible", "pinned", "maximized", "dragging", "closing");
+      }
+    },
+    /**
+     * Attach tooltip to trigger element with hover behavior
+     */
+    attach(triggerElement, getOptions) {
+      const self = this;
+      const handleMouseEnter = () => {
+        if (state.hideTimer) {
+          clearTimeout(state.hideTimer);
+          state.hideTimer = null;
+        }
+        const options = getOptions();
+        self.show(triggerElement, options);
+      };
+      const handleMouseLeave = () => {
+        startDelayedHide();
+      };
+      triggerElement.addEventListener("mouseenter", handleMouseEnter);
+      triggerElement.addEventListener("mouseleave", handleMouseLeave);
+      return () => {
+        triggerElement.removeEventListener("mouseenter", handleMouseEnter);
+        triggerElement.removeEventListener("mouseleave", handleMouseLeave);
+        self.hide();
+      };
+    }
+  };
+
   // src/components/ModalHeader/index.ts
   var DEFAULT_BG_COLOR = "#3e1a7d";
   var DEFAULT_TEXT_COLOR = "white";
@@ -34320,6 +35351,7 @@
   exports.IMPORTANCE_COLORS = IMPORTANCE_COLORS;
   exports.IMPORTANCE_LABELS = IMPORTANCE_LABELS;
   exports.IMPORTANCE_LABELS_EN = IMPORTANCE_LABELS_EN;
+  exports.InfoTooltip = InfoTooltip;
   exports.MyIOChartModal = MyIOChartModal;
   exports.MyIODraggableCard = MyIODraggableCard;
   exports.MyIOSelectionStoreClass = MyIOSelectionStoreClass;