zenit-sdk 0.0.7 → 0.0.9

package/dist/{chunk-ITF7QCUZ.mjs → chunk-PCTRVN4O.mjs}

@@ -1,7 +1,7 @@
 // src/react/ZenitMap.tsx
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, forwardRef } from "react";
-import { GeoJSON, MapContainer, Marker, TileLayer, ZoomControl, useMap } from "react-leaflet";
-import L from "leaflet";
+import React3, { useCallback as useCallback2, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useState as useState2, forwardRef } from "react";
+import { MapContainer, Marker as Marker2, TileLayer, ZoomControl } from "react-leaflet";
+import L4 from "leaflet";
 
 // src/maps/helpers.ts
 function toNumber(value) {
@@ -206,9 +206,9 @@ function getAccentByLayerId(layerId, mapLayers) {
 
 // src/react/zoomOpacity.ts
 var DEFAULT_OPTIONS = {
-  minZoom: 10,
-  maxZoom: 17,
-  minFactor: 0.6,
+  minZoom: 11,
+  maxZoom: 15,
+  minFactor: 0.3,
   maxFactor: 1,
   minOpacity: 0.1,
   maxOpacity: 0.92
@@ -245,302 +245,215 @@ function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, op
   return clampNumber(effective, settings.minOpacity, settings.maxOpacity);
 }
 
-// src/react/ZenitMap.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var DEFAULT_CENTER = [0, 0];
-var DEFAULT_ZOOM = 3;
-function computeBBoxFromGeojson(geojson) {
-  if (!geojson) return null;
-  if (!Array.isArray(geojson.features) || geojson.features.length === 0) return null;
-  const coords = [];
-  const collect = (candidate) => {
-    if (!Array.isArray(candidate)) return;
-    if (candidate.length === 2 && typeof candidate[0] === "number" && typeof candidate[1] === "number") {
-      coords.push([candidate[0], candidate[1]]);
-      return;
-    }
-    candidate.forEach((entry) => collect(entry));
-  };
-  geojson.features.forEach((feature) => {
-    collect(feature.geometry?.coordinates);
-  });
-  if (coords.length === 0) return null;
-  const [firstLon, firstLat] = coords[0];
-  const bbox = { minLon: firstLon, minLat: firstLat, maxLon: firstLon, maxLat: firstLat };
-  coords.forEach(([lon, lat]) => {
-    bbox.minLon = Math.min(bbox.minLon, lon);
-    bbox.minLat = Math.min(bbox.minLat, lat);
-    bbox.maxLon = Math.max(bbox.maxLon, lon);
-    bbox.maxLat = Math.max(bbox.maxLat, lat);
-  });
-  return bbox;
+// src/react/map/layer-geojson.tsx
+import { GeoJSON } from "react-leaflet";
+import L from "leaflet";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
+function getGeometryType(feature) {
+  const t = feature?.geometry?.type;
+  return typeof t === "string" ? t : null;
 }
-function mergeBBoxes(bboxes) {
-  const valid = bboxes.filter((bbox) => !!bbox);
-  if (valid.length === 0) return null;
-  const first = valid[0];
-  return valid.slice(1).reduce(
-    (acc, bbox) => ({
-      minLon: Math.min(acc.minLon, bbox.minLon),
-      minLat: Math.min(acc.minLat, bbox.minLat),
-      maxLon: Math.max(acc.maxLon, bbox.maxLon),
-      maxLat: Math.max(acc.maxLat, bbox.maxLat)
-    }),
-    { ...first }
-  );
+function isPointGeometry(feature) {
+  const geometryType = getGeometryType(feature);
+  return geometryType !== null && POINT_GEOMETRY_TYPES.has(geometryType);
 }
-function getFeatureLayerId(feature) {
-  const layerId = feature?.properties?.__zenit_layerId ?? feature?.properties?.layerId ?? feature?.properties?.layer_id;
-  if (layerId === void 0 || layerId === null) return null;
-  return layerId;
+function isNonPointGeometry(feature) {
+  const geometryType = getGeometryType(feature);
+  return geometryType !== null && !POINT_GEOMETRY_TYPES.has(geometryType);
 }
-function escapeHtml(value) {
-  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+function buildFeatureCollection(features) {
+  return {
+    type: "FeatureCollection",
+    features
+  };
 }
-var DESCRIPTION_KEYS = /* @__PURE__ */ new Set(["descripcion", "description"]);
-var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry"]);
+var LayerGeoJson = ({
+  layerId,
+  data,
+  baseOpacity,
+  isMobile,
+  panesReady,
+  mapInstance,
+  fillPaneName,
+  pointsPaneName,
+  layerType,
+  styleFn,
+  onEachFeature,
+  onPolygonLabel
+}) => {
+  const features = data.features ?? [];
+  const fillFeatures = features.filter(isNonPointGeometry);
+  const pointFeatures = features.filter(isPointGeometry);
+  const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
+  const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    fillData && /* @__PURE__ */ jsx(
+      GeoJSON,
+      {
+        data: fillData,
+        pane: panesReady && mapInstance?.getPane(fillPaneName) ? fillPaneName : void 0,
+        style: (feature) => styleFn(feature, layerType, baseOpacity),
+        onEachFeature: (feature, layer) => {
+          onEachFeature(feature, layer);
+          onPolygonLabel?.(feature, layer);
+        }
+      },
+      `fill-${layerId}`
+    ),
+    pointsData && /* @__PURE__ */ jsx(
+      GeoJSON,
+      {
+        data: pointsData,
+        pane: panesReady && mapInstance?.getPane(pointsPaneName) ? pointsPaneName : void 0,
+        pointToLayer: (feature, latlng) => L.circleMarker(latlng, {
+          radius: isMobile ? 8 : 6,
+          ...styleFn(feature, layerType, baseOpacity)
+        }),
+        onEachFeature
+      },
+      `points-${layerId}`
+    )
+  ] });
+};
+
+// src/react/map/location-control.tsx
+import { useEffect as useEffect2, useMemo, useRef as useRef2 } from "react";
+import { createPortal } from "react-dom";
+import { Circle, Marker, useMap } from "react-leaflet";
+import L3 from "leaflet";
+
+// src/react/hooks/use-geolocation.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useGeolocation(options) {
+  const [isTracking, setIsTracking] = useState(false);
+  const [location, setLocation] = useState(null);
+  const [error, setError] = useState(null);
+  const watchIdRef = useRef(null);
+  const stopTracking = useCallback(() => {
+    if (watchIdRef.current !== null && typeof navigator !== "undefined" && navigator.geolocation) {
+      navigator.geolocation.clearWatch(watchIdRef.current);
+    }
+    watchIdRef.current = null;
+    setIsTracking(false);
+  }, []);
+  const startTracking = useCallback(() => {
+    if (typeof navigator === "undefined" || !navigator.geolocation) {
+      setError({ code: 0, message: "La geolocalizaci\xF3n no est\xE1 disponible en este navegador." });
+      return;
+    }
+    setError(null);
+    watchIdRef.current = navigator.geolocation.watchPosition(
+      (position) => {
+        setLocation({
+          lat: position.coords.latitude,
+          lon: position.coords.longitude,
+          accuracy: position.coords.accuracy
+        });
+        setIsTracking(true);
+      },
+      (err) => {
+        setError({ code: err.code, message: err.message });
+        stopTracking();
+      },
+      {
+        enableHighAccuracy: options?.enableHighAccuracy ?? true,
+        timeout: options?.timeout ?? 12e3,
+        maximumAge: options?.maximumAge ?? 0
+      }
+    );
+  }, [options?.enableHighAccuracy, options?.maximumAge, options?.timeout, stopTracking]);
+  const toggleTracking = useCallback(() => {
+    if (isTracking) {
+      stopTracking();
+    } else {
+      startTracking();
+    }
+  }, [isTracking, startTracking, stopTracking]);
+  const clearError = useCallback(() => setError(null), []);
+  useEffect(() => {
+    return () => {
+      stopTracking();
+    };
+  }, [stopTracking]);
+  return {
+    isTracking,
+    location,
+    error,
+    startTracking,
+    stopTracking,
+    toggleTracking,
+    clearError
+  };
+}
+
+// src/react/map/map-utils.ts
+import L2 from "leaflet";
 var POPUP_STYLE_ID = "zenit-leaflet-popup-styles";
-var DESKTOP_POPUP_DIMENSIONS = { maxWidth: 350, minWidth: 280, maxHeight: 480 };
-var MOBILE_POPUP_DIMENSIONS = { maxWidth: 280, minWidth: 240, maxHeight: 380 };
+var POPUP_EXCLUDED_KEYS = /* @__PURE__ */ new Set(["geom", "geometry", "_private"]);
+var POPUP_HEADER_KEYS = ["nombre", "name", "title", "titulo"];
+var DESKTOP_POPUP_DIMENSIONS = { maxWidth: 360, minWidth: 280, maxHeight: 520 };
+var MOBILE_POPUP_DIMENSIONS = { maxWidth: 300, minWidth: 240, maxHeight: 420 };
 var ZENIT_LEAFLET_POPUP_STYLES = `
-/* ===== Zenit Leaflet Popup - Modern Professional Styling ===== */
-
-/* Main popup wrapper */
-.zenit-leaflet-popup .leaflet-popup-content-wrapper {
+.custom-leaflet-popup .leaflet-popup-content-wrapper {
   border-radius: 12px;
-  box-shadow:
-    0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
   padding: 0;
   background: #ffffff;
-  overflow: hidden;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
+  border: 1px solid rgba(15, 23, 42, 0.08);
 }
 
-/* Content area with scroll support */
-.zenit-leaflet-popup .leaflet-popup-content {
+.custom-leaflet-popup .leaflet-popup-content {
   margin: 0;
-  padding: 0;
+  padding: 12px 14px;
   font-size: 13px;
-  line-height: 1.5;
-  color: #374151;
-  min-width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
-}
-
-/* Popup tip/arrow shadow */
-.zenit-leaflet-popup .leaflet-popup-tip-container {
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
-}
-
-.zenit-leaflet-popup .leaflet-popup-tip {
-  background: #ffffff;
-  box-shadow: none;
-}
-
-/* Close button styling */
-.zenit-leaflet-popup .leaflet-popup-close-button {
-  color: #9ca3af;
-  font-size: 18px;
-  font-weight: 400;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  margin: 8px 8px 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-  z-index: 10;
-}
-
-.zenit-leaflet-popup .leaflet-popup-close-button:hover {
-  color: #374151;
-  background-color: #f3f4f6;
-}
-
-.zenit-leaflet-popup .leaflet-popup-close-button:active {
-  background-color: #e5e7eb;
-}
-
-/* Main card container */
-.zenit-popup-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 16px;
-}
-
-/* Individual row styling with subtle separator */
-.zenit-popup-row {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 10px 0;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.zenit-popup-row:first-child {
-  padding-top: 0;
-}
-
-.zenit-popup-row:last-child {
-  border-bottom: none;
-  padding-bottom: 0;
-}
-
-/* Label styling - small, gray, uppercase */
-.zenit-popup-label {
-  font-size: 10px;
-  font-weight: 500;
-  color: #9ca3af;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   line-height: 1.4;
+  color: #0f172a;
+  max-height: min(70vh, 520px);
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.6) transparent;
 }
 
-/* Value styling - darker, readable */
-.zenit-popup-value {
-  font-size: 13px;
-  font-weight: 400;
-  color: #1f2937;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  line-height: 1.5;
-}
-
-/* Special styling for description field */
-.zenit-popup-row.zenit-popup-description {
-  background-color: #f9fafb;
-  margin: 0 -16px;
-  padding: 12px 16px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.zenit-popup-row.zenit-popup-description:first-child {
-  margin-top: 0;
-  border-radius: 0;
-}
-
-.zenit-popup-row.zenit-popup-description .zenit-popup-value {
-  font-size: 13px;
-  line-height: 1.6;
-  color: #374151;
-  max-height: 150px;
-  overflow-y: auto;
-  padding-right: 4px;
-}
-
-/* Preformatted text (JSON objects) */
-.zenit-popup-pre {
-  margin: 0;
-  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  font-size: 11px;
-  white-space: pre-wrap;
-  word-break: break-word;
-  color: #4b5563;
-  background-color: #f9fafb;
-  padding: 8px;
-  border-radius: 6px;
-  border: 1px solid #e5e7eb;
+.custom-leaflet-popup .leaflet-popup-close-button {
+  color: #64748b;
+  font-size: 16px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  transition: background-color 0.15s ease, color 0.15s ease;
 }
 
-/* Empty state styling */
-.zenit-popup-empty {
-  font-size: 13px;
-  color: #9ca3af;
-  font-style: italic;
-  text-align: center;
-  padding: 20px 0;
+.custom-leaflet-popup .leaflet-popup-close-button:hover {
+  color: #0f172a;
+  background: rgba(148, 163, 184, 0.2);
 }
 
-/* Webkit scrollbar styling */
-.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar {
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar {
   width: 6px;
 }
 
-.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.4);
-  border-radius: 3px;
-}
-
-.zenit-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(107, 114, 128, 0.6);
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 999px;
 }
 
-/* Scrollbar for description field */
-.zenit-popup-row.zenit-popup-description .zenit-popup-value::-webkit-scrollbar {
-  width: 4px;
-}
-
-.zenit-popup-row.zenit-popup-description .zenit-popup-value::-webkit-scrollbar-track {
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-track {
   background: transparent;
 }
 
-.zenit-popup-row.zenit-popup-description .zenit-popup-value::-webkit-scrollbar-thumb {
-  background-color: rgba(156, 163, 175, 0.4);
-  border-radius: 2px;
-}
-
-/* ===== Responsive: Mobile (<640px) ===== */
 @media (max-width: 640px) {
-  .zenit-leaflet-popup .leaflet-popup-content-wrapper {
-    border-radius: 10px;
-  }
-
-  .zenit-leaflet-popup .leaflet-popup-close-button {
-    width: 26px;
-    height: 26px;
-    font-size: 16px;
-    margin: 6px 6px 0 0;
-  }
-
-  .zenit-popup-card {
-    padding: 12px;
-  }
-
-  .zenit-popup-row {
-    padding: 8px 0;
-  }
-
-  .zenit-popup-label {
-    font-size: 9px;
-  }
-
-  .zenit-popup-value {
+  .custom-leaflet-popup .leaflet-popup-content {
     font-size: 12px;
-  }
-
-  .zenit-popup-row.zenit-popup-description {
-    margin: 0 -12px;
     padding: 10px 12px;
+    max-height: min(65vh, 420px);
   }
 
-  .zenit-popup-row.zenit-popup-description .zenit-popup-value {
-    font-size: 12px;
-    max-height: 120px;
-  }
-
-  .zenit-popup-pre {
-    font-size: 10px;
-    padding: 6px;
-  }
-
-  .zenit-popup-empty {
-    font-size: 12px;
-    padding: 16px 0;
+  .custom-leaflet-popup .leaflet-popup-close-button {
+    font-size: 14px;
+    padding: 4px 6px;
   }
 }
 
-/* ===== Map tooltip styling ===== */
 .zenit-map-tooltip {
   background-color: rgba(31, 41, 55, 0.95);
   border: none;
@@ -555,7 +468,23 @@ var ZENIT_LEAFLET_POPUP_STYLES = `
 .zenit-map-tooltip::before {
   border-top-color: rgba(31, 41, 55, 0.95);
 }
+
+.polygon-label-tooltip {
+  background: rgba(15, 23, 42, 0.92);
+  border: none;
+  border-radius: 6px;
+  color: #f8fafc;
+  font-weight: 600;
+  font-size: 12px;
+  padding: 4px 8px;
+}
 `;
+function clampNumber2(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function clampOpacity4(value) {
+  return clampNumber2(value, 0, 1);
+}
 function ensurePopupStyles() {
   if (typeof document === "undefined") return;
   if (document.getElementById(POPUP_STYLE_ID)) return;
@@ -565,47 +494,52 @@ function ensurePopupStyles() {
   document.head.appendChild(styleTag);
 }
 function getPopupDimensions() {
-  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+  if (typeof window === "undefined") {
     return DESKTOP_POPUP_DIMENSIONS;
   }
-  return window.matchMedia("(max-width: 640px)").matches ? MOBILE_POPUP_DIMENSIONS : DESKTOP_POPUP_DIMENSIONS;
-}
-function normalizeDescriptionValue(value) {
-  if (value === void 0 || value === null) return null;
-  if (typeof value === "string") {
-    const trimmed = value.trim();
-    return trimmed ? trimmed : null;
-  }
-  if (typeof value === "number" || typeof value === "boolean") {
-    return String(value);
-  }
-  return null;
+  const isSmallWidth = window.innerWidth < 640;
+  const isShortHeight = window.innerHeight < 768;
+  const base = isSmallWidth ? MOBILE_POPUP_DIMENSIONS : DESKTOP_POPUP_DIMENSIONS;
+  const maxHeight = isShortHeight ? Math.min(base.maxHeight, 360) : base.maxHeight;
+  return { ...base, maxHeight };
 }
-function extractDescriptionValue(properties) {
-  if (!properties) return null;
-  const matches = Object.entries(properties).find(
-    ([key]) => DESCRIPTION_KEYS.has(key.toLowerCase())
-  );
-  if (!matches) return null;
-  return normalizeDescriptionValue(matches[1]);
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
-function safeJsonStringify(value) {
-  try {
-    const json = JSON.stringify(value, null, 2);
-    if (json !== void 0) return json;
-  } catch {
-  }
-  return String(value);
+function formatLabel(key) {
+  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
 }
 function renderPopupValue(value) {
-  if (value === null || value === void 0) {
-    return '<span class="zenit-popup-empty">Sin datos</span>';
+  if (value === null || value === void 0) return '<span style="color:#94a3b8;">Sin datos</span>';
+  if (value instanceof Date) {
+    return escapeHtml(value.toLocaleDateString("es-GT"));
+  }
+  if (typeof value === "number") {
+    return escapeHtml(value.toLocaleString("es-GT"));
+  }
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    if (!trimmed) return '<span style="color:#94a3b8;">Sin datos</span>';
+    return escapeHtml(trimmed);
   }
   if (typeof value === "object") {
-    const json = safeJsonStringify(value);
-    return `<pre class="zenit-popup-pre">${escapeHtml(json)}</pre>`;
+    try {
+      return `<pre style="margin:0; white-space:pre-wrap; font-size:11px; background:#f8fafc; border:1px solid #e2e8f0; padding:6px 8px; border-radius:6px;">${escapeHtml(
+        JSON.stringify(value, null, 2)
+      )}</pre>`;
+    } catch {
+      return escapeHtml(String(value));
+    }
   }
-  return `<span>${escapeHtml(String(value))}</span>`;
+  return escapeHtml(String(value));
+}
+function extractPopupHeader(properties) {
+  const entry = Object.entries(properties).find(([key, value]) => {
+    if (typeof value !== "string") return false;
+    const normalized = key.trim().toLowerCase();
+    return POPUP_HEADER_KEYS.includes(normalized) && value.trim().length > 0;
+  });
+  return entry ? entry[1].trim() : null;
 }
 function shouldIncludePopupEntry(key, value) {
   if (!key) return false;
@@ -617,45 +551,89 @@ function shouldIncludePopupEntry(key, value) {
   if (typeof value === "string" && !value.trim()) return false;
   return true;
 }
-function isDescriptionKey(key) {
-  const normalized = key.trim().toLowerCase();
-  return DESCRIPTION_KEYS.has(normalized);
-}
-function formatLabel(key) {
-  return key.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").trim();
-}
 function createPopupContent(properties) {
-  const entries = Object.entries(properties).filter(
-    ([key, value]) => shouldIncludePopupEntry(key, value)
-  );
+  const headerText = extractPopupHeader(properties);
+  const entries = Object.entries(properties).filter(([key, value]) => {
+    if (!shouldIncludePopupEntry(key, value)) return false;
+    if (headerText && POPUP_HEADER_KEYS.includes(key.trim().toLowerCase())) return false;
+    return true;
+  });
   if (entries.length === 0) {
-    return `<div class="zenit-popup-card"><div class="zenit-popup-empty">Sin datos disponibles</div></div>`;
+    return '<div style="padding:8px 0; color:#64748b; text-align:center;">Sin datos disponibles</div>';
   }
-  const descriptionEntry = entries.find(([key]) => isDescriptionKey(key));
-  const otherEntries = entries.filter(([key]) => !isDescriptionKey(key));
-  let rowsHtml = "";
-  if (descriptionEntry) {
-    const [key, value] = descriptionEntry;
-    const label = escapeHtml(formatLabel(key));
-    const valueHtml = renderPopupValue(value);
-    rowsHtml += `
-      <div class="zenit-popup-row zenit-popup-description">
-        <div class="zenit-popup-label">${label}</div>
-        <div class="zenit-popup-value">${valueHtml}</div>
-      </div>
-    `;
-  }
-  rowsHtml += otherEntries.map(([key, value]) => {
+  const headerHtml = headerText ? `<div style="font-weight:700; font-size:14px; margin-bottom:8px; color:#0f172a;">${escapeHtml(
+    headerText
+  )}</div>` : "";
+  const rowsHtml = entries.map(([key, value]) => {
     const label = escapeHtml(formatLabel(key));
     const valueHtml = renderPopupValue(value);
     return `
-        <div class="zenit-popup-row">
-          <div class="zenit-popup-label">${label}</div>
-          <div class="zenit-popup-value">${valueHtml}</div>
+        <div style="display:grid; grid-template-columns:minmax(90px, 35%) 1fr; gap:8px; padding:6px 0; border-bottom:1px solid #e2e8f0;">
+          <div style="font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#64748b;">${label}</div>
+          <div style="font-size:13px; color:#0f172a; word-break:break-word;">${valueHtml}</div>
         </div>
       `;
   }).join("");
-  return `<div class="zenit-popup-card">${rowsHtml}</div>`;
+  return `<div>${headerHtml}${rowsHtml}</div>`;
+}
+function isPolygonType(layerType, geometryType) {
+  const candidate = (layerType ?? geometryType ?? "").toLowerCase();
+  return candidate === "polygon" || candidate === "multipolygon";
+}
+function calculateZoomBasedOpacity(zoom, baseOpacity, layerType, geometryType) {
+  if (!isPolygonType(layerType, geometryType)) return clampOpacity4(baseOpacity);
+  const minZoom = 11;
+  const maxZoom = 15;
+  const minFactor = 0.3;
+  if (maxZoom <= minZoom) return clampOpacity4(baseOpacity * minFactor);
+  const t = clampNumber2((zoom - minZoom) / (maxZoom - minZoom), 0, 1);
+  const factor = 1 - (1 - minFactor) * t;
+  return clampOpacity4(baseOpacity * factor);
+}
+function layerStyleToLeaflet(options) {
+  const { baseOpacity, zoom, layerStyle, geometryType, layerType } = options;
+  const sanitizedOpacity = clampOpacity4(baseOpacity);
+  const zoomOpacity = calculateZoomBasedOpacity(zoom, sanitizedOpacity, layerType, geometryType);
+  const styleFillOpacity = typeof layerStyle?.fillOpacity === "number" ? clampOpacity4(layerStyle.fillOpacity) : 0.8;
+  return {
+    color: layerStyle?.color ?? layerStyle?.fillColor ?? "#2563eb",
+    weight: layerStyle?.weight ?? 2,
+    fillColor: layerStyle?.fillColor ?? layerStyle?.color ?? "#2563eb",
+    opacity: clampOpacity4(Math.max(0.35, zoomOpacity * 0.9)),
+    fillOpacity: clampOpacity4(zoomOpacity * styleFillOpacity)
+  };
+}
+function getRgbFromColor(color) {
+  const trimmed = color.trim();
+  if (trimmed.startsWith("#")) {
+    const hex = trimmed.replace("#", "");
+    const expanded = hex.length === 3 ? hex.split("").map((char) => `${char}${char}`).join("") : hex;
+    if (expanded.length === 6) {
+      const r = parseInt(expanded.slice(0, 2), 16);
+      const g = parseInt(expanded.slice(2, 4), 16);
+      const b = parseInt(expanded.slice(4, 6), 16);
+      return { r, g, b };
+    }
+  }
+  const rgbMatch = trimmed.match(/rgba?\(([^)]+)\)/i);
+  if (rgbMatch) {
+    const [r, g, b] = rgbMatch[1].split(",").map((value) => parseFloat(value.trim())).slice(0, 3);
+    if ([r, g, b].every((value) => Number.isFinite(value))) {
+      return { r, g, b };
+    }
+  }
+  return null;
+}
+function getLabelTextStyles(color) {
+  const rgb = getRgbFromColor(color);
+  if (!rgb) {
+    return { color: "#0f172a", shadow: "0 1px 2px rgba(255, 255, 255, 0.6)" };
+  }
+  const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
+  if (luminance > 0.6) {
+    return { color: "#0f172a", shadow: "0 1px 2px rgba(255, 255, 255, 0.7)" };
+  }
+  return { color: "#ffffff", shadow: "0 1px 2px rgba(0, 0, 0, 0.4)" };
 }
 function withAlpha(color, alpha) {
   const trimmed = color.trim();
@@ -668,48 +646,385 @@ function withAlpha(color, alpha) {
       const b = parseInt(expanded.slice(4, 6), 16);
       return `rgba(${r}, ${g}, ${b}, ${alpha})`;
     }
-  }
-  if (trimmed.startsWith("rgb(")) {
-    const inner = trimmed.slice(4, -1);
-    return `rgba(${inner}, ${alpha})`;
-  }
-  if (trimmed.startsWith("rgba(")) {
-    const inner = trimmed.slice(5, -1).split(",").slice(0, 3).map((value) => value.trim());
-    return `rgba(${inner.join(", ")}, ${alpha})`;
-  }
-  return color;
-}
-function getRgbFromColor(color) {
-  const trimmed = color.trim();
-  if (trimmed.startsWith("#")) {
-    const hex = trimmed.replace("#", "");
-    const expanded = hex.length === 3 ? hex.split("").map((char) => `${char}${char}`).join("") : hex;
-    if (expanded.length === 6) {
-      const r = parseInt(expanded.slice(0, 2), 16);
-      const g = parseInt(expanded.slice(2, 4), 16);
-      const b = parseInt(expanded.slice(4, 6), 16);
-      return { r, g, b };
+  }
+  if (trimmed.startsWith("rgb(")) {
+    const inner = trimmed.slice(4, -1);
+    return `rgba(${inner}, ${alpha})`;
+  }
+  if (trimmed.startsWith("rgba(")) {
+    const inner = trimmed.slice(5, -1).split(",").slice(0, 3).map((value) => value.trim());
+    return `rgba(${inner.join(", ")}, ${alpha})`;
+  }
+  return color;
+}
+function createCustomIcon(label, opacity, color) {
+  const size = 60;
+  const innerSize = 44;
+  const textStyles = getLabelTextStyles(color);
+  const safeLabel = escapeHtml(label);
+  const clampedOpacity = Math.min(1, Math.max(0.92, opacity));
+  const innerBackground = withAlpha(color, 0.9);
+  return L2.divIcon({
+    className: "zenit-label-marker",
+    iconSize: [size, size],
+    iconAnchor: [size / 2, size / 2],
+    html: `
+      <div
+        title="${safeLabel}"
+        style="
+          width:${size}px;
+          height:${size}px;
+          border-radius:9999px;
+          background:rgba(255, 255, 255, 0.95);
+          border:3px solid rgba(255, 255, 255, 1);
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          opacity:${clampedOpacity};
+          box-shadow:0 2px 6px rgba(0, 0, 0, 0.25);
+          pointer-events:none;
+        "
+      >
+        <div
+          style="
+            width:${innerSize}px;
+            height:${innerSize}px;
+            border-radius:9999px;
+            background:${innerBackground};
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            box-shadow:inset 0 0 0 1px rgba(15, 23, 42, 0.12);
+          "
+        >
+          <span
+            style="
+              color:${textStyles.color};
+              font-size:20px;
+              font-weight:800;
+              text-shadow:${textStyles.shadow};
+            "
+          >
+            ${safeLabel}
+          </span>
+        </div>
+      </div>
+    `
+  });
+}
+function createLocationIcon() {
+  return L2.divIcon({
+    className: "zenit-location-marker",
+    iconSize: [18, 18],
+    iconAnchor: [9, 9],
+    html: `
+      <div style="width:18px;height:18px;border-radius:9999px;background:#2563eb;border:2px solid #fff;box-shadow:0 0 0 4px rgba(37, 99, 235, 0.25);"></div>
+    `
+  });
+}
+
+// src/react/map/location-control.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LOCATION_STYLE_ID = "zenit-location-control-styles";
+var LOCATION_STYLES = `
+.zenit-location-control {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.zenit-location-button {
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  border: none;
+  background: #ffffff;
+  color: #0f172a;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.2);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  position: relative;
+}
+
+.zenit-location-button.zenit-location-button--tracking {
+  animation: zenitLocationPulse 1.8s infinite;
+}
+
+.zenit-location-button:hover {
+  background: #f8fafc;
+}
+
+.zenit-location-badge {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #ef4444;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
+}
+
+.zenit-location-error {
+  background: rgba(15, 23, 42, 0.92);
+  color: #f8fafc;
+  border-radius: 10px;
+  padding: 8px 10px;
+  font-size: 12px;
+  max-width: 200px;
+  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
+}
+
+@keyframes zenitLocationPulse {
+  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.35); }
+  70% { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+}
+`;
+var LocateIcon = () => /* @__PURE__ */ jsxs2("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "2", x2: "12", y2: "5" }),
+  /* @__PURE__ */ jsx2("line", { x1: "12", y1: "19", x2: "12", y2: "22" }),
+  /* @__PURE__ */ jsx2("line", { x1: "2", y1: "12", x2: "5", y2: "12" }),
+  /* @__PURE__ */ jsx2("line", { x1: "19", y1: "12", x2: "22", y2: "12" })
+] });
+var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
+  const map = useMap();
+  const controlRef = useRef2(null);
+  const hasCenteredRef = useRef2(false);
+  const { isTracking, location, error, toggleTracking, clearError } = useGeolocation();
+  useEffect2(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(LOCATION_STYLE_ID)) return;
+    const styleTag = document.createElement("style");
+    styleTag.id = LOCATION_STYLE_ID;
+    styleTag.textContent = LOCATION_STYLES;
+    document.head.appendChild(styleTag);
+  }, []);
+  useEffect2(() => {
+    const control = L3.control({ position });
+    control.onAdd = () => {
+      const container = L3.DomUtil.create("div", "zenit-location-control");
+      L3.DomEvent.disableClickPropagation(container);
+      controlRef.current = container;
+      return container;
+    };
+    control.addTo(map);
+    return () => {
+      control.remove();
+      controlRef.current = null;
+    };
+  }, [map, position]);
+  useEffect2(() => {
+    if (!location || !isTracking) return;
+    if (hasCenteredRef.current) return;
+    hasCenteredRef.current = true;
+    map.flyTo([location.lat, location.lon], zoom, { animate: true });
+  }, [isTracking, location, map, zoom]);
+  const markerIcon = useMemo(() => createLocationIcon(), []);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    controlRef.current && createPortal(
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            className: `zenit-location-button${isTracking ? " zenit-location-button--tracking" : ""}`,
+            onClick: () => {
+              if (error) {
+                clearError();
+              }
+              toggleTracking();
+            },
+            "aria-label": isTracking ? "Detener ubicaci\xF3n" : "Mostrar mi ubicaci\xF3n",
+            children: [
+              /* @__PURE__ */ jsx2(LocateIcon, {}),
+              error && /* @__PURE__ */ jsx2("span", { className: "zenit-location-badge", children: "!" })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx2("div", { className: "zenit-location-error", children: error.message || "No se pudo acceder a tu ubicaci\xF3n." })
+      ] }),
+      controlRef.current
+    ),
+    location && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(Marker, { position: [location.lat, location.lon], icon: markerIcon }),
+      /* @__PURE__ */ jsx2(
+        Circle,
+        {
+          center: [location.lat, location.lon],
+          radius: location.accuracy,
+          pathOptions: { color: "#2563eb", fillColor: "#2563eb", fillOpacity: 0.15 }
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/react/map/map-handlers.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { useMap as useMap2 } from "react-leaflet";
+function computeBBoxFromGeojson(geojson) {
+  if (!geojson || !Array.isArray(geojson.features)) return null;
+  const coords = [];
+  const collect = (candidate) => {
+    if (!Array.isArray(candidate)) return;
+    if (candidate.length === 2 && typeof candidate[0] === "number" && typeof candidate[1] === "number" && Number.isFinite(candidate[0]) && Number.isFinite(candidate[1])) {
+      coords.push([candidate[0], candidate[1]]);
+      return;
+    }
+    candidate.forEach((item) => collect(item));
+  };
+  geojson.features.forEach((feature) => {
+    collect(feature.geometry?.coordinates);
+  });
+  if (coords.length === 0) return null;
+  const [firstLon, firstLat] = coords[0];
+  const bbox = { minLon: firstLon, minLat: firstLat, maxLon: firstLon, maxLat: firstLat };
+  coords.forEach(([lon, lat]) => {
+    bbox.minLon = Math.min(bbox.minLon, lon);
+    bbox.minLat = Math.min(bbox.minLat, lat);
+    bbox.maxLon = Math.max(bbox.maxLon, lon);
+    bbox.maxLat = Math.max(bbox.maxLat, lat);
+  });
+  return bbox;
+}
+function mergeBBoxes(bboxes) {
+  const valid = bboxes.filter((bbox) => !!bbox);
+  if (valid.length === 0) return null;
+  const first = valid[0];
+  return valid.slice(1).reduce(
+    (acc, bbox) => ({
+      minLon: Math.min(acc.minLon, bbox.minLon),
+      minLat: Math.min(acc.minLat, bbox.minLat),
+      maxLon: Math.max(acc.maxLon, bbox.maxLon),
+      maxLat: Math.max(acc.maxLat, bbox.maxLat)
+    }),
+    { ...first }
+  );
+}
+var BBoxZoomHandler = ({
+  bbox,
+  geojson,
+  autoGeojson = [],
+  enabled = true
+}) => {
+  const map = useMap2();
+  const lastAppliedBBox = useRef3(null);
+  const lastUserInteracted = useRef3(false);
+  useEffect3(() => {
+    const handleInteraction = () => {
+      lastUserInteracted.current = true;
+    };
+    map.on("dragstart", handleInteraction);
+    map.on("zoomstart", handleInteraction);
+    return () => {
+      map.off("dragstart", handleInteraction);
+      map.off("zoomstart", handleInteraction);
+    };
+  }, [map]);
+  useEffect3(() => {
+    if (!enabled) return;
+    let resolvedBBox = bbox ?? null;
+    if (!resolvedBBox && geojson) {
+      resolvedBBox = computeBBoxFromGeojson(geojson);
+    }
+    if (!resolvedBBox && autoGeojson.length > 0) {
+      const bboxes = autoGeojson.map((collection) => computeBBoxFromGeojson(collection));
+      resolvedBBox = mergeBBoxes(bboxes);
     }
-  }
-  const rgbMatch = trimmed.match(/rgba?\(([^)]+)\)/i);
-  if (rgbMatch) {
-    const [r, g, b] = rgbMatch[1].split(",").map((value) => parseFloat(value.trim())).slice(0, 3);
-    if ([r, g, b].every((value) => Number.isFinite(value))) {
-      return { r, g, b };
+    if (!resolvedBBox) return;
+    const serialized = JSON.stringify(resolvedBBox);
+    if (lastAppliedBBox.current === serialized) return;
+    if (lastUserInteracted.current && !bbox && !geojson) {
+      lastUserInteracted.current = false;
+      return;
     }
-  }
+    const bounds = [
+      [resolvedBBox.minLat, resolvedBBox.minLon],
+      [resolvedBBox.maxLat, resolvedBBox.maxLon]
+    ];
+    map.fitBounds(bounds, { padding: [12, 12] });
+    lastAppliedBBox.current = serialized;
+  }, [autoGeojson, bbox, enabled, geojson, map]);
+  return null;
+};
+var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
+  const map = useMap2();
+  useEffect3(() => {
+    const handleZoom = () => {
+      onZoomChange(map.getZoom());
+    };
+    map.on("zoomend", handleZoom);
+    handleZoom();
+    return () => {
+      map.off("zoomend", handleZoom);
+    };
+  }, [map, onZoomChange]);
+  return null;
+};
+var MapInstanceBridge = ({ onReady }) => {
+  const map = useMap2();
+  useEffect3(() => {
+    onReady(map);
+  }, [map, onReady]);
   return null;
+};
+
+// src/react/ZenitMap.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_CENTER = [0, 0];
+var DEFAULT_ZOOM = 3;
+var LABELS_PANE_NAME = "zenit-labels-pane";
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function isGeoJsonFeatureCollection(value) {
+  if (!isRecord(value)) return false;
+  const features = value.features;
+  if (!Array.isArray(features)) return false;
+  const type = value.type;
+  return type === void 0 || type === "FeatureCollection";
+}
+function extractGeoJsonFeatureCollection(value) {
+  if (isRecord(value) && "data" in value) {
+    const data = value.data;
+    return isGeoJsonFeatureCollection(data) ? data : null;
+  }
+  return isGeoJsonFeatureCollection(value) ? value : null;
 }
-function getLabelTextStyles(color) {
-  const rgb = getRgbFromColor(color);
-  if (!rgb) {
-    return { color: "#0f172a", shadow: "0 1px 2px rgba(255, 255, 255, 0.6)" };
+function getFeatureLayerId(feature) {
+  const layerId = feature?.properties?.__zenit_layerId ?? feature?.properties?.layerId ?? feature?.properties?.layer_id;
+  if (layerId === void 0 || layerId === null) return null;
+  return layerId;
+}
+var DESCRIPTION_KEYS = /* @__PURE__ */ new Set(["descripcion", "description"]);
+function normalizeDescriptionValue(value) {
+  if (value === void 0 || value === null) return null;
+  if (typeof value === "string") {
+    const trimmed = value.trim();
+    return trimmed ? trimmed : null;
   }
-  const luminance = (0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b) / 255;
-  if (luminance > 0.6) {
-    return { color: "#0f172a", shadow: "0 1px 2px rgba(255, 255, 255, 0.7)" };
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
   }
-  return { color: "#ffffff", shadow: "0 1px 2px rgba(0, 0, 0, 0.4)" };
+  return null;
+}
+function extractDescriptionValue(properties) {
+  if (!properties) return null;
+  const matches = Object.entries(properties).find(
+    ([key]) => DESCRIPTION_KEYS.has(key.toLowerCase())
+  );
+  if (!matches) return null;
+  return normalizeDescriptionValue(matches[1]);
 }
 function getFeatureStyleOverrides(feature) {
   const candidate = feature?.properties?._style;
@@ -728,25 +1043,6 @@ function buildFeaturePopupHtml(feature) {
   const rendered = createPopupContent(properties);
   return rendered ? rendered : null;
 }
-var POINT_GEOMETRY_TYPES = /* @__PURE__ */ new Set(["Point", "MultiPoint"]);
-function getGeometryType(feature) {
-  const t = feature?.geometry?.type;
-  return typeof t === "string" ? t : null;
-}
-function isPointGeometry(feature) {
-  const geometryType = getGeometryType(feature);
-  return geometryType !== null && POINT_GEOMETRY_TYPES.has(geometryType);
-}
-function isNonPointGeometry(feature) {
-  const geometryType = getGeometryType(feature);
-  return geometryType !== null && !POINT_GEOMETRY_TYPES.has(geometryType);
-}
-function buildFeatureCollection(features) {
-  return {
-    type: "FeatureCollection",
-    features
-  };
-}
 function pickIntersectFeature(baseFeature, candidates) {
   if (!Array.isArray(candidates) || candidates.length === 0) return null;
   const baseId = baseFeature?.id;
@@ -773,80 +1069,6 @@ function normalizeCenterTuple(center) {
   }
   return null;
 }
-var FitToBounds = ({ bbox }) => {
-  const mapInstance = useMap();
-  const lastAppliedBBox = useRef(null);
-  useEffect(() => {
-    const targetBBox = bbox;
-    if (!targetBBox) return;
-    const serialized = JSON.stringify(targetBBox);
-    if (lastAppliedBBox.current === serialized) return;
-    const bounds = [
-      [targetBBox.minLat, targetBBox.minLon],
-      [targetBBox.maxLat, targetBBox.maxLon]
-    ];
-    mapInstance.fitBounds(bounds, { padding: [12, 12] });
-    lastAppliedBBox.current = serialized;
-  }, [bbox, mapInstance]);
-  return null;
-};
-var AutoFitToBounds = ({
-  bbox,
-  enabled = true
-}) => {
-  const mapInstance = useMap();
-  const lastAutoBBoxApplied = useRef(null);
-  const lastUserInteracted = useRef(false);
-  useEffect(() => {
-    if (!enabled) return;
-    const handleInteraction = () => {
-      lastUserInteracted.current = true;
-    };
-    mapInstance.on("dragstart", handleInteraction);
-    mapInstance.on("zoomstart", handleInteraction);
-    return () => {
-      mapInstance.off("dragstart", handleInteraction);
-      mapInstance.off("zoomstart", handleInteraction);
-    };
-  }, [enabled, mapInstance]);
-  useEffect(() => {
-    if (!enabled) return;
-    if (!bbox) return;
-    const serialized = JSON.stringify(bbox);
-    if (lastAutoBBoxApplied.current === serialized) return;
-    if (lastUserInteracted.current) {
-      lastUserInteracted.current = false;
-    }
-    const bounds = [
-      [bbox.minLat, bbox.minLon],
-      [bbox.maxLat, bbox.maxLon]
-    ];
-    mapInstance.fitBounds(bounds, { padding: [12, 12] });
-    lastAutoBBoxApplied.current = serialized;
-  }, [bbox, enabled, mapInstance]);
-  return null;
-};
-var ZoomBasedOpacityHandler = ({ onZoomChange }) => {
-  const mapInstance = useMap();
-  useEffect(() => {
-    const handleZoom = () => {
-      onZoomChange(mapInstance.getZoom());
-    };
-    mapInstance.on("zoomend", handleZoom);
-    handleZoom();
-    return () => {
-      mapInstance.off("zoomend", handleZoom);
-    };
-  }, [mapInstance, onZoomChange]);
-  return null;
-};
-var MapInstanceBridge = ({ onReady }) => {
-  const mapInstance = useMap();
-  useEffect(() => {
-    onReady(mapInstance);
-  }, [mapInstance, onReady]);
-  return null;
-};
 var ZenitMap = forwardRef(({
   client,
   mapId,
@@ -872,20 +1094,21 @@ var ZenitMap = forwardRef(({
   onZoomChange,
   onMapReady
 }, ref) => {
-  const [map, setMap] = useState(null);
-  const [layers, setLayers] = useState([]);
-  const [effectiveStates, setEffectiveStates] = useState([]);
-  const [loadingMap, setLoadingMap] = useState(false);
-  const [mapError, setMapError] = useState(null);
-  const [mapInstance, setMapInstance] = useState(null);
-  const [panesReady, setPanesReady] = useState(false);
-  const [currentZoom, setCurrentZoom] = useState(initialZoom ?? DEFAULT_ZOOM);
-  const [isMobile, setIsMobile] = useState(() => {
+  const [map, setMap] = useState2(null);
+  const [layers, setLayers] = useState2([]);
+  const [effectiveStates, setEffectiveStates] = useState2([]);
+  const [loadingMap, setLoadingMap] = useState2(false);
+  const [mapError, setMapError] = useState2(null);
+  const [mapInstance, setMapInstance] = useState2(null);
+  const [panesReady, setPanesReady] = useState2(false);
+  const [currentZoom, setCurrentZoom] = useState2(initialZoom ?? DEFAULT_ZOOM);
+  const [isPopupOpen, setIsPopupOpen] = useState2(false);
+  const [isMobile, setIsMobile] = useState2(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(max-width: 768px)").matches;
   });
-  const normalizedLayers = useMemo(() => normalizeMapLayers(map), [map]);
-  useEffect(() => {
+  const normalizedLayers = useMemo2(() => normalizeMapLayers(map), [map]);
+  useEffect4(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia("(max-width: 768px)");
     const onChange = (e) => {
@@ -903,12 +1126,37 @@ var ZenitMap = forwardRef(({
     }
     return;
   }, []);
-  useEffect(() => {
+  useEffect4(() => {
     if (featureInfoMode === "popup") {
       ensurePopupStyles();
     }
   }, [featureInfoMode]);
-  const layerStyleIndex = useMemo(() => {
+  useEffect4(() => {
+    if (featureInfoMode !== "popup") {
+      setIsPopupOpen(false);
+    }
+  }, [featureInfoMode]);
+  useEffect4(() => {
+    if (!mapInstance) return;
+    const popupPane = mapInstance.getPane("popupPane");
+    if (popupPane) {
+      popupPane.style.zIndex = "800";
+    }
+    const labelsPane = mapInstance.getPane(LABELS_PANE_NAME) ?? mapInstance.createPane(LABELS_PANE_NAME);
+    labelsPane.style.zIndex = "600";
+  }, [mapInstance]);
+  useEffect4(() => {
+    if (!mapInstance) return;
+    const handlePopupOpen = () => setIsPopupOpen(true);
+    const handlePopupClose = () => setIsPopupOpen(false);
+    mapInstance.on("popupopen", handlePopupOpen);
+    mapInstance.on("popupclose", handlePopupClose);
+    return () => {
+      mapInstance.off("popupopen", handlePopupOpen);
+      mapInstance.off("popupclose", handlePopupClose);
+    };
+  }, [mapInstance]);
+  const layerStyleIndex = useMemo2(() => {
     const index = /* @__PURE__ */ new Map();
     (map?.mapLayers ?? []).forEach((entry) => {
       const layerStyle = entry.layer?.style ?? entry.mapLayer?.layer?.style ?? entry.style ?? null;
@@ -919,7 +1167,7 @@ var ZenitMap = forwardRef(({
     });
     return index;
   }, [map]);
-  const labelKeyIndex = useMemo(() => {
+  const labelKeyIndex = useMemo2(() => {
     const index = /* @__PURE__ */ new Map();
     normalizedLayers.forEach((entry) => {
       const label = entry.layer?.label ?? entry.mapLayer?.label ?? entry.mapLayer.layerConfig?.label;
@@ -929,7 +1177,7 @@ var ZenitMap = forwardRef(({
     });
     return index;
   }, [normalizedLayers]);
-  const layerMetaIndex = useMemo(() => {
+  const layerMetaIndex = useMemo2(() => {
     const index = /* @__PURE__ */ new Map();
     normalizedLayers.forEach((entry) => {
       index.set(String(entry.layerId), {
@@ -939,7 +1187,7 @@ var ZenitMap = forwardRef(({
     });
     return index;
   }, [normalizedLayers]);
-  const overlayStyleFunction = useMemo(() => {
+  const overlayStyleFunction = useMemo2(() => {
     return (feature) => {
       const featureLayerId = getFeatureLayerId(feature);
       const featureStyleOverrides = getFeatureStyleOverrides(feature);
@@ -958,11 +1206,15 @@ var ZenitMap = forwardRef(({
       return defaultOptions;
     };
   }, [layerStyleIndex, mapLayers, overlayStyle]);
-  const [baseStates, setBaseStates] = useState([]);
-  const [mapOverrides, setMapOverrides] = useState([]);
-  const [controlOverrides, setControlOverrides] = useState([]);
-  const [uiOverrides, setUiOverrides] = useState([]);
-  useEffect(() => {
+  const overlayStyleFn = useCallback2(
+    (feature, _layerType, _baseOpacity) => overlayStyleFunction(feature),
+    [overlayStyleFunction]
+  );
+  const [baseStates, setBaseStates] = useState2([]);
+  const [mapOverrides, setMapOverrides] = useState2([]);
+  const [controlOverrides, setControlOverrides] = useState2([]);
+  const [uiOverrides, setUiOverrides] = useState2([]);
+  useEffect4(() => {
     let isMounted = true;
     setLoadingMap(true);
     setMapError(null);
@@ -985,7 +1237,7 @@ var ZenitMap = forwardRef(({
       isMounted = false;
     };
   }, [client.maps, mapId, onError, onLoadingChange]);
-  useEffect(() => {
+  useEffect4(() => {
     if (normalizedLayers.length === 0) {
       setLayers([]);
       setBaseStates([]);
@@ -1016,7 +1268,7 @@ var ZenitMap = forwardRef(({
     setMapOverrides(initialOverrides);
     setUiOverrides([]);
   }, [normalizedLayers]);
-  useEffect(() => {
+  useEffect4(() => {
     if (!layerControls) {
       setControlOverrides([]);
       return;
@@ -1028,7 +1280,7 @@ var ZenitMap = forwardRef(({
     }));
     setControlOverrides(overrides);
   }, [layerControls]);
-  useEffect(() => {
+  useEffect4(() => {
     if (layerStates) {
       return;
     }
@@ -1038,12 +1290,12 @@ var ZenitMap = forwardRef(({
       onLayerStateChange?.(reset);
     }
   }, [baseStates, effectiveStates.length, layerControls, layerStates, onLayerStateChange]);
-  useEffect(() => {
+  useEffect4(() => {
     if (layerStates) {
       setEffectiveStates(layerStates);
     }
   }, [layerStates]);
-  useEffect(() => {
+  useEffect4(() => {
     if (layerStates) {
       return;
     }
@@ -1056,11 +1308,11 @@ var ZenitMap = forwardRef(({
     setEffectiveStates(next);
     onLayerStateChange?.(next);
   }, [baseStates, controlOverrides, layerStates, mapOverrides, onLayerStateChange, uiOverrides]);
-  useEffect(() => {
+  useEffect4(() => {
     if (!Array.isArray(layerControls) || layerControls.length > 0) return;
     setUiOverrides([]);
   }, [layerControls]);
-  useEffect(() => {
+  useEffect4(() => {
     if (layerStates) {
       return;
     }
@@ -1080,18 +1332,13 @@ var ZenitMap = forwardRef(({
       return [...filtered, nextEntry];
     });
   };
-  const updateOpacityFromUi = useCallback(
+  const updateOpacityFromUi = useCallback2(
     (layerId, uiOpacity) => {
       const meta = layerMetaIndex.get(String(layerId));
-      const zoomFactor = getLayerZoomOpacityFactor(
+      const baseOpacity = clampOpacity3(uiOpacity);
+      const effectiveOpacity = calculateZoomBasedOpacity(
         currentZoom,
-        meta?.layerType,
-        meta?.geometryType
-      );
-      const baseOpacity = clampOpacity3(uiOpacity / zoomFactor);
-      const effectiveOpacity = getEffectiveLayerOpacity(
         baseOpacity,
-        currentZoom,
         meta?.layerType,
         meta?.geometryType
       );
@@ -1124,7 +1371,7 @@ var ZenitMap = forwardRef(({
     },
     [currentZoom, effectiveStates, layerMetaIndex, layerStates, onLayerStateChange]
   );
-  const center = useMemo(() => {
+  const center = useMemo2(() => {
     if (initialCenter) {
       return initialCenter;
     }
@@ -1135,36 +1382,30 @@ var ZenitMap = forwardRef(({
     return DEFAULT_CENTER;
   }, [initialCenter, map?.settings?.center]);
   const zoom = initialZoom ?? map?.settings?.zoom ?? DEFAULT_ZOOM;
-  useEffect(() => {
+  useEffect4(() => {
     setCurrentZoom(zoom);
   }, [zoom]);
-  const decoratedLayers = useMemo(() => {
+  const decoratedLayers = useMemo2(() => {
     return layers.map((layer) => ({
       ...layer,
       effective: effectiveStates.find((state) => state.layerId === layer.mapLayer.layerId),
       data: layerGeojson?.[layer.mapLayer.layerId] ?? layerGeojson?.[String(layer.mapLayer.layerId)] ?? null
     }));
   }, [effectiveStates, layerGeojson, layers]);
-  const orderedLayers = useMemo(() => {
+  const orderedLayers = useMemo2(() => {
     return [...decoratedLayers].filter((layer) => layer.effective?.visible && layer.data).sort((a, b) => a.displayOrder - b.displayOrder);
   }, [decoratedLayers]);
-  const explicitZoomBBox = useMemo(() => {
-    if (zoomToBbox) return zoomToBbox;
-    if (zoomToGeojson) return computeBBoxFromGeojson(zoomToGeojson);
-    return null;
-  }, [zoomToBbox, zoomToGeojson]);
-  const autoZoomBBox = useMemo(() => {
-    if (explicitZoomBBox) return null;
-    const visibleBBoxes = orderedLayers.map((layer) => computeBBoxFromGeojson(layer.data));
-    return mergeBBoxes(visibleBBoxes);
-  }, [explicitZoomBBox, orderedLayers]);
-  const resolveLayerStyle = useCallback(
+  const autoZoomGeojson = useMemo2(
+    () => orderedLayers.map((layer) => layer.data).filter((collection) => !!collection),
+    [orderedLayers]
+  );
+  const resolveLayerStyle = useCallback2(
     (layerId) => {
       return getStyleByLayerId(layerId, mapLayers) ?? layerStyleIndex.get(String(layerId)) ?? null;
     },
     [layerStyleIndex, mapLayers]
   );
-  const labelMarkers = useMemo(() => {
+  const labelMarkers = useMemo2(() => {
     const markers = [];
     decoratedLayers.forEach((layerState) => {
       if (!layerState.effective?.visible) return;
@@ -1174,7 +1415,14 @@ var ZenitMap = forwardRef(({
       if (!data) return;
       const resolvedStyle = resolveLayerStyle(layerState.mapLayer.layerId);
       const layerColor = resolvedStyle?.fillColor ?? resolvedStyle?.color ?? "rgba(37, 99, 235, 1)";
-      const opacity = layerState.effective?.opacity ?? 1;
+      const meta = layerMetaIndex.get(String(layerState.mapLayer.layerId));
+      const baseOpacity = layerState.effective?.baseOpacity ?? layerState.effective?.opacity ?? 1;
+      const opacity = calculateZoomBasedOpacity(
+        currentZoom,
+        baseOpacity,
+        meta?.layerType,
+        meta?.geometryType
+      );
       data.features.forEach((feature, index) => {
         const properties = feature.properties;
         const value = properties?.[labelKey];
@@ -1193,26 +1441,24 @@ var ZenitMap = forwardRef(({
       });
     });
     return markers;
-  }, [decoratedLayers, labelKeyIndex, resolveLayerStyle]);
-  const ensureLayerPanes = useCallback(
+  }, [currentZoom, decoratedLayers, labelKeyIndex, layerMetaIndex, resolveLayerStyle]);
+  const ensureLayerPanes = useCallback2(
     (targetMap, targetLayers) => {
       const baseZIndex = 400;
       targetLayers.forEach((layer) => {
         const order = Number.isFinite(layer.displayOrder) ? layer.displayOrder : 0;
+        const orderOffset = Math.max(0, Math.min(order, 150));
         const fillPaneName = `zenit-layer-${layer.layerId}-fill`;
         const pointPaneName = `zenit-layer-${layer.layerId}-points`;
-        const labelPaneName = `zenit-layer-${layer.layerId}-labels`;
         const fillPane = targetMap.getPane(fillPaneName) ?? targetMap.createPane(fillPaneName);
         const pointPane = targetMap.getPane(pointPaneName) ?? targetMap.createPane(pointPaneName);
-        const labelPane = targetMap.getPane(labelPaneName) ?? targetMap.createPane(labelPaneName);
-        fillPane.style.zIndex = String(baseZIndex + order);
-        pointPane.style.zIndex = String(baseZIndex + order + 1e3);
-        labelPane.style.zIndex = String(baseZIndex + order + 2e3);
+        fillPane.style.zIndex = String(baseZIndex + orderOffset);
+        pointPane.style.zIndex = String(baseZIndex + orderOffset + 100);
       });
     },
     []
   );
-  const handleMapReady = useCallback(
+  const handleMapReady = useCallback2(
     (instance) => {
       setPanesReady(false);
       setMapInstance(instance);
@@ -1220,7 +1466,7 @@ var ZenitMap = forwardRef(({
     },
     [onMapReady]
   );
-  useEffect(() => {
+  useEffect4(() => {
     if (!mapInstance) {
       setPanesReady(false);
       return;
@@ -1234,24 +1480,25 @@ var ZenitMap = forwardRef(({
     }));
     ensureLayerPanes(mapInstance, layerTargets);
     const first = layerTargets[0];
-    const testPane = mapInstance.getPane(`zenit-layer-${first.layerId}-labels`);
-    if (testPane) {
+    const testPane = mapInstance.getPane(`zenit-layer-${first.layerId}-fill`);
+    const labelsPane = mapInstance.getPane(LABELS_PANE_NAME);
+    if (testPane && labelsPane) {
       setPanesReady(true);
     }
   }, [mapInstance, orderedLayers, ensureLayerPanes]);
-  const overlayOnEachFeature = useMemo(() => {
+  const overlayOnEachFeature = useMemo2(() => {
     return (feature, layer) => {
       const layerId = getFeatureLayerId(feature) ?? void 0;
       const geometryType = feature?.geometry?.type;
-      const isPointFeature = geometryType === "Point" || geometryType === "MultiPoint" || layer instanceof L.CircleMarker;
-      const originalStyle = layer instanceof L.Path ? {
+      const isPointFeature = geometryType === "Point" || geometryType === "MultiPoint" || layer instanceof L4.CircleMarker;
+      const originalStyle = layer instanceof L4.Path ? {
         color: layer.options.color,
         weight: layer.options.weight,
         fillColor: layer.options.fillColor,
         opacity: layer.options.opacity,
         fillOpacity: layer.options.fillOpacity
       } : null;
-      const originalRadius = layer instanceof L.CircleMarker ? layer.getRadius() : null;
+      const originalRadius = layer instanceof L4.CircleMarker ? layer.getRadius() : null;
       if (featureInfoMode === "popup") {
         const content = buildFeaturePopupHtml(feature);
         if (content) {
@@ -1260,11 +1507,10 @@ var ZenitMap = forwardRef(({
             maxWidth,
             minWidth,
             maxHeight,
-            className: "zenit-leaflet-popup",
+            className: "custom-leaflet-popup",
             autoPan: true,
             closeButton: true,
-            keepInView: true,
-            offset: L.point(0, -24)
+            keepInView: true
           });
         }
       }
@@ -1285,7 +1531,8 @@ var ZenitMap = forwardRef(({
               id: layerId,
               geometry: feature.geometry
             }).then((response) => {
-              const candidates = response.data?.features ?? [];
+              const geo = extractGeoJsonFeatureCollection(response);
+              const candidates = geo?.features ?? [];
               const resolved = pickIntersectFeature(feature, candidates);
               if (!resolved?.properties) return;
               const mergedProperties = {
@@ -1308,7 +1555,7 @@ var ZenitMap = forwardRef(({
         onFeatureClick?.(feature, layerId);
       });
       layer.on("mouseover", () => {
-        if (layer instanceof L.Path && originalStyle) {
+        if (layer instanceof L4.Path && originalStyle) {
           layer.setStyle({
             ...originalStyle,
             weight: (originalStyle.weight ?? 2) + 1,
@@ -1316,16 +1563,16 @@ var ZenitMap = forwardRef(({
             fillOpacity: Math.min(1, (originalStyle.fillOpacity ?? 0.8) + 0.1)
           });
         }
-        if (layer instanceof L.CircleMarker && typeof originalRadius === "number") {
+        if (layer instanceof L4.CircleMarker && typeof originalRadius === "number") {
           layer.setRadius(originalRadius + 1);
         }
         onFeatureHover?.(feature, layerId);
       });
       layer.on("mouseout", () => {
-        if (layer instanceof L.Path && originalStyle) {
+        if (layer instanceof L4.Path && originalStyle) {
           layer.setStyle(originalStyle);
         }
-        if (layer instanceof L.CircleMarker && typeof originalRadius === "number") {
+        if (layer instanceof L4.CircleMarker && typeof originalRadius === "number") {
           layer.setRadius(originalRadius);
         }
       });
@@ -1337,79 +1584,19 @@ var ZenitMap = forwardRef(({
     const resolvedStyle = featureStyleOverrides ? { ...style ?? {}, ...featureStyleOverrides } : style;
     const geometryType = feature?.geometry?.type;
     const resolvedLayerType = layerType ?? geometryType;
-    const sanitizedBaseOpacity = clampOpacity3(baseOpacity);
-    const normalizedStyleFill = typeof resolvedStyle?.fillOpacity === "number" ? clampOpacity3(resolvedStyle.fillOpacity) : 0.8;
-    const effectiveOpacity = getEffectiveLayerOpacity(
-      sanitizedBaseOpacity,
-      currentZoom,
-      resolvedLayerType,
-      geometryType
-    );
-    const fillOpacity = clampOpacity3(effectiveOpacity * normalizedStyleFill);
-    const strokeOpacity = clampOpacity3(Math.max(0.35, effectiveOpacity * 0.9));
-    return {
-      color: resolvedStyle?.color ?? resolvedStyle?.fillColor ?? "#2563eb",
-      weight: resolvedStyle?.weight ?? 2,
-      fillColor: resolvedStyle?.fillColor ?? resolvedStyle?.color ?? "#2563eb",
-      opacity: strokeOpacity,
-      fillOpacity
+    return layerStyleToLeaflet({
+      baseOpacity,
+      zoom: currentZoom,
+      layerStyle: resolvedStyle,
+      geometryType,
+      layerType: resolvedLayerType
+    });
+  };
+  const makeStyleFnForLayer = (layerId) => {
+    return (feature, layerType, baseOpacity) => {
+      return buildLayerStyle(layerId, baseOpacity ?? 1, feature, layerType);
     };
   };
-  const buildLabelIcon = useCallback((label, opacity, color) => {
-    const size = 60;
-    const innerSize = 44;
-    const textStyles = getLabelTextStyles(color);
-    const safeLabel = escapeHtml(label);
-    const clampedOpacity = Math.min(1, Math.max(0.92, opacity));
-    const innerBackground = withAlpha(color, 0.9);
-    return L.divIcon({
-      className: "zenit-label-marker",
-      iconSize: [size, size],
-      iconAnchor: [size / 2, size / 2],
-      html: `
-        <div
-          title="${safeLabel}"
-          style="
-            width:${size}px;
-            height:${size}px;
-            border-radius:9999px;
-            background:rgba(255, 255, 255, 0.95);
-            border:3px solid rgba(255, 255, 255, 1);
-            display:flex;
-            align-items:center;
-            justify-content:center;
-            opacity:${clampedOpacity};
-            box-shadow:0 2px 6px rgba(0, 0, 0, 0.25);
-            pointer-events:none;
-          "
-        >
-          <div
-            style="
-              width:${innerSize}px;
-              height:${innerSize}px;
-              border-radius:9999px;
-              background:${innerBackground};
-              display:flex;
-              align-items:center;
-              justify-content:center;
-              box-shadow:inset 0 0 0 1px rgba(15, 23, 42, 0.12);
-            "
-          >
-            <span
-              style="
-                color:${textStyles.color};
-                font-size:20px;
-                font-weight:800;
-                text-shadow:${textStyles.shadow};
-              "
-            >
-              ${safeLabel}
-            </span>
-          </div>
-        </div>
-      `
-    });
-  }, []);
   useImperativeHandle(ref, () => ({
     setLayerOpacity: (layerId, opacity) => {
       upsertUiOverride(layerId, { overrideOpacity: opacity });
@@ -1460,10 +1647,10 @@ var ZenitMap = forwardRef(({
     getMapInstance: () => mapInstance
   }), [effectiveStates, mapInstance]);
   if (loadingMap) {
-    return /* @__PURE__ */ jsx("div", { style: { padding: 16, height, width }, children: "Cargando mapa..." });
+    return /* @__PURE__ */ jsx3("div", { style: { padding: 16, height, width }, children: "Cargando mapa..." });
   }
   if (mapError) {
-    return /* @__PURE__ */ jsxs("div", { style: { padding: 16, height, width, color: "red" }, children: [
+    return /* @__PURE__ */ jsxs3("div", { style: { padding: 16, height, width, color: "red" }, children: [
       "Error al cargar mapa: ",
       mapError
     ] });
@@ -1475,7 +1662,7 @@ var ZenitMap = forwardRef(({
     setCurrentZoom(zoomValue);
     onZoomChange?.(zoomValue);
   };
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       style: {
@@ -1488,88 +1675,111 @@ var ZenitMap = forwardRef(({
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsxs(
-          MapContainer,
+        /* @__PURE__ */ jsx3(
+          "div",
           {
-            center,
-            zoom,
-            style: { height: "100%", width: "100%" },
-            scrollWheelZoom: true,
-            zoomControl: false,
-            children: [
-              /* @__PURE__ */ jsx(
-                TileLayer,
-                {
-                  url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                  attribution: "\xA9 OpenStreetMap contributors"
-                }
-              ),
-              /* @__PURE__ */ jsx(ZoomControl, { position: "topright" }),
-              /* @__PURE__ */ jsx(MapInstanceBridge, { onReady: handleMapReady }),
-              /* @__PURE__ */ jsx(FitToBounds, { bbox: explicitZoomBBox ?? void 0 }),
-              /* @__PURE__ */ jsx(AutoFitToBounds, { bbox: autoZoomBBox ?? void 0, enabled: !explicitZoomBBox }),
-              /* @__PURE__ */ jsx(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
-              orderedLayers.map((layerState) => {
-                const baseOpacity = layerState.effective?.baseOpacity ?? layerState.effective?.opacity ?? 1;
-                const fillPaneName = `zenit-layer-${layerState.mapLayer.layerId}-fill`;
-                const pointsPaneName = `zenit-layer-${layerState.mapLayer.layerId}-points`;
-                const labelPaneName = `zenit-layer-${layerState.mapLayer.layerId}-labels`;
-                const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
-                const data = layerState.data?.features ?? [];
-                const fillFeatures = data.filter(isNonPointGeometry);
-                const pointFeatures = data.filter(isPointGeometry);
-                const fillData = fillFeatures.length > 0 ? buildFeatureCollection(fillFeatures) : null;
-                const pointsData = pointFeatures.length > 0 ? buildFeatureCollection(pointFeatures) : null;
-                return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                  fillData && /* @__PURE__ */ jsx(
-                    GeoJSON,
+            className: `zenit-map-shell${isPopupOpen ? " popup-open" : ""}`,
+            style: { flex: 1, position: "relative" },
+            children: /* @__PURE__ */ jsxs3(
+              MapContainer,
+              {
+                center,
+                zoom,
+                style: { height: "100%", width: "100%" },
+                scrollWheelZoom: true,
+                zoomControl: false,
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    TileLayer,
                     {
-                      data: fillData,
-                      pane: panesReady && mapInstance?.getPane(fillPaneName) ? fillPaneName : void 0,
-                      style: (feature) => buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType),
-                      onEachFeature: overlayOnEachFeature
+                      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                      attribution: "\xA9 OpenStreetMap contributors"
                     }
                   ),
-                  pointsData && /* @__PURE__ */ jsx(
-                    GeoJSON,
+                  /* @__PURE__ */ jsx3(ZoomControl, { position: "topright" }),
+                  /* @__PURE__ */ jsx3(MapInstanceBridge, { onReady: handleMapReady }),
+                  /* @__PURE__ */ jsx3(
+                    BBoxZoomHandler,
                     {
-                      data: pointsData,
-                      pane: panesReady && mapInstance?.getPane(pointsPaneName) ? pointsPaneName : void 0,
-                      pointToLayer: (feature, latlng) => L.circleMarker(latlng, {
-                        radius: isMobile ? 8 : 6,
-                        ...buildLayerStyle(layerState.mapLayer.layerId, baseOpacity, feature, layerType)
-                      }),
-                      onEachFeature: overlayOnEachFeature
+                      bbox: zoomToBbox ?? void 0,
+                      geojson: zoomToGeojson ?? void 0,
+                      autoGeojson: autoZoomGeojson
                     }
                   ),
-                  panesReady && mapInstance?.getPane(labelPaneName) ? labelMarkers.filter(
-                    (marker) => String(marker.layerId) === String(layerState.mapLayer.layerId)
-                  ).map((marker) => /* @__PURE__ */ jsx(
-                    Marker,
+                  /* @__PURE__ */ jsx3(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
+                  /* @__PURE__ */ jsx3(LocationControl, {}),
+                  orderedLayers.map((layerState) => {
+                    const baseOpacity = layerState.effective?.baseOpacity ?? layerState.effective?.opacity ?? 1;
+                    const fillPaneName = `zenit-layer-${layerState.mapLayer.layerId}-fill`;
+                    const pointsPaneName = `zenit-layer-${layerState.mapLayer.layerId}-points`;
+                    const layerType = layerState.layer?.layerType ?? layerState.mapLayer.layerType ?? void 0;
+                    const labelKey = labelKeyIndex.get(String(layerState.mapLayer.layerId));
+                    return /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+                      layerState.data && /* @__PURE__ */ jsx3(
+                        LayerGeoJson,
+                        {
+                          layerId: layerState.mapLayer.layerId,
+                          data: layerState.data,
+                          baseOpacity,
+                          isMobile,
+                          panesReady,
+                          mapInstance,
+                          fillPaneName,
+                          pointsPaneName,
+                          layerType,
+                          styleFn: makeStyleFnForLayer(layerState.mapLayer.layerId),
+                          onEachFeature: overlayOnEachFeature,
+                          onPolygonLabel: labelKey ? (feature, layer) => {
+                            const geometryType = feature?.geometry?.type;
+                            if (geometryType !== "Polygon" && geometryType !== "MultiPolygon") return;
+                            const properties = feature?.properties;
+                            const value = properties?.[labelKey];
+                            if (!value || !layer.bindTooltip) return;
+                            layer.bindTooltip(String(value), {
+                              sticky: true,
+                              direction: "center",
+                              opacity: 0.9,
+                              className: "polygon-label-tooltip"
+                            });
+                          } : void 0
+                        }
+                      ),
+                      panesReady && mapInstance?.getPane(LABELS_PANE_NAME) ? labelMarkers.filter(
+                        (marker) => String(marker.layerId) === String(layerState.mapLayer.layerId)
+                      ).map((marker) => /* @__PURE__ */ jsx3(
+                        Marker2,
+                        {
+                          position: marker.position,
+                          icon: createCustomIcon(marker.label, marker.opacity, marker.color),
+                          interactive: false,
+                          pane: LABELS_PANE_NAME
+                        },
+                        marker.key
+                      )) : null
+                    ] }, layerState.mapLayer.layerId.toString());
+                  }),
+                  overlayGeojson && /* @__PURE__ */ jsx3(
+                    LayerGeoJson,
                     {
-                      position: marker.position,
-                      icon: buildLabelIcon(marker.label, marker.opacity, marker.color),
-                      interactive: false,
-                      pane: labelPaneName
-                    },
-                    marker.key
-                  )) : null
-                ] }, layerState.mapLayer.layerId.toString());
-              }),
-              overlayGeojson && /* @__PURE__ */ jsx(
-                GeoJSON,
-                {
-                  data: overlayGeojson,
-                  style: overlayStyleFunction,
-                  onEachFeature: overlayOnEachFeature
-                },
-                "zenit-overlay-geojson"
-              )
-            ]
-          },
-          String(mapId)
-        ) }),
-        showLayerPanel && decoratedLayers.length > 0 && /* @__PURE__ */ jsxs(
+                      layerId: "overlay-geojson",
+                      data: overlayGeojson,
+                      baseOpacity: 1,
+                      isMobile,
+                      panesReady,
+                      mapInstance,
+                      fillPaneName: "zenit-overlay-fill",
+                      pointsPaneName: "zenit-overlay-points",
+                      styleFn: overlayStyleFn,
+                      onEachFeature: overlayOnEachFeature
+                    }
+                  )
+                ]
+              },
+              String(mapId)
+            )
+          }
+        ),
+        showLayerPanel && decoratedLayers.length > 0 && /* @__PURE__ */ jsxs3(
           "div",
           {
             style: {
@@ -1582,7 +1792,7 @@ var ZenitMap = forwardRef(({
               overflowY: "auto"
             },
             children: [
-              overlayGeojson && /* @__PURE__ */ jsxs(
+              overlayGeojson && /* @__PURE__ */ jsxs3(
                 "div",
                 {
                   style: {
@@ -1594,8 +1804,8 @@ var ZenitMap = forwardRef(({
                     marginBottom: 12
                   },
                   children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Overlay activo" }),
-                    /* @__PURE__ */ jsxs("div", { style: { fontSize: 13 }, children: [
+                    /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Overlay activo" }),
+                    /* @__PURE__ */ jsxs3("div", { style: { fontSize: 13 }, children: [
                       "GeoJSON externo con ",
                       (overlayGeojson.features?.length ?? 0).toLocaleString(),
                       " elementos."
@@ -1603,14 +1813,14 @@ var ZenitMap = forwardRef(({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Capas" }),
-              decoratedLayers.map((layerState) => /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsx3("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Capas" }),
+              decoratedLayers.map((layerState) => /* @__PURE__ */ jsxs3(
                 "div",
                 {
                   style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 10, marginBottom: 10 },
                   children: [
-                    /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-                      /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsxs3("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+                      /* @__PURE__ */ jsx3(
                         "input",
                         {
                           type: "checkbox",
@@ -1621,17 +1831,17 @@ var ZenitMap = forwardRef(({
                           }
                         }
                       ),
-                      /* @__PURE__ */ jsx("span", { children: layerState.layer?.name ?? `Capa ${layerState.mapLayer.layerId}` })
+                      /* @__PURE__ */ jsx3("span", { children: layerState.layer?.name ?? `Capa ${layerState.mapLayer.layerId}` })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
-                      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4 }, children: [
-                        /* @__PURE__ */ jsx("span", { style: { color: "#4a5568" }, children: "Opacidad" }),
-                        /* @__PURE__ */ jsxs("span", { children: [
+                    /* @__PURE__ */ jsxs3("div", { style: { marginTop: 8 }, children: [
+                      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4 }, children: [
+                        /* @__PURE__ */ jsx3("span", { style: { color: "#4a5568" }, children: "Opacidad" }),
+                        /* @__PURE__ */ jsxs3("span", { children: [
                           Math.round((layerState.effective?.opacity ?? 1) * 100),
                           "%"
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx3(
                         "input",
                         {
                           type: "range",
@@ -1661,13 +1871,13 @@ var ZenitMap = forwardRef(({
 ZenitMap.displayName = "ZenitMap";
 
 // src/react/ZenitLayerManager.tsx
-import React2, { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import React4, { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
 
 // src/react/icons.tsx
 import { Eye, EyeOff, ChevronLeft, ChevronRight, Layers, Upload, X, ZoomIn } from "lucide-react";
 
 // src/react/ZenitLayerManager.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var FLOAT_TOLERANCE = 1e-3;
 function areEffectiveStatesEqual(a, b) {
   if (a.length !== b.length) return false;
@@ -1707,15 +1917,15 @@ var ZenitLayerManager = ({
   layerFeatureCounts,
   mapLayers
 }) => {
-  const [map, setMap] = useState2(null);
-  const [loadingMap, setLoadingMap] = useState2(false);
-  const [mapError, setMapError] = useState2(null);
-  const [layers, setLayers] = useState2([]);
-  const [activeTab, setActiveTab] = useState2("layers");
-  const [panelVisible, setPanelVisible] = useState2(true);
-  const lastEmittedStatesRef = useRef2(null);
+  const [map, setMap] = useState3(null);
+  const [loadingMap, setLoadingMap] = useState3(false);
+  const [mapError, setMapError] = useState3(null);
+  const [layers, setLayers] = useState3([]);
+  const [activeTab, setActiveTab] = useState3("layers");
+  const [panelVisible, setPanelVisible] = useState3(true);
+  const lastEmittedStatesRef = useRef5(null);
   const isControlled = Array.isArray(layerStates) && typeof onLayerStatesChange === "function";
-  const baseStates = useMemo2(
+  const baseStates = useMemo3(
     () => initLayerStates(
       layers.map((entry) => ({
         ...entry.mapLayer,
@@ -1726,7 +1936,7 @@ var ZenitLayerManager = ({
     ),
     [layers]
   );
-  const overrideStates = useMemo2(
+  const overrideStates = useMemo3(
     () => layers.map(
       (entry) => ({
         layerId: entry.mapLayer.layerId,
@@ -1736,11 +1946,11 @@ var ZenitLayerManager = ({
     ),
     [layers]
   );
-  const effectiveStates = useMemo2(
+  const effectiveStates = useMemo3(
     () => layerStates ?? applyLayerOverrides(baseStates, overrideStates),
     [baseStates, layerStates, overrideStates]
   );
-  const layerMetaIndex = useMemo2(() => {
+  const layerMetaIndex = useMemo3(() => {
     const index = /* @__PURE__ */ new Map();
     mapLayers?.forEach((entry) => {
       const key = String(entry.layerId);
@@ -1754,7 +1964,7 @@ var ZenitLayerManager = ({
     });
     return index;
   }, [map, mapLayers]);
-  const resolveUserOpacity = React2.useCallback((state) => {
+  const resolveUserOpacity = React4.useCallback((state) => {
     if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
     if (typeof state.overrideOpacity === "string") {
       const parsed = Number.parseFloat(state.overrideOpacity);
@@ -1762,7 +1972,7 @@ var ZenitLayerManager = ({
     }
     return state.opacity ?? 1;
   }, []);
-  const resolveEffectiveOpacity = React2.useCallback(
+  const resolveEffectiveOpacity = React4.useCallback(
     (layerId, userOpacity) => {
       if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
         return userOpacity;
@@ -1778,7 +1988,7 @@ var ZenitLayerManager = ({
     },
     [autoOpacityConfig, autoOpacityOnZoom, layerMetaIndex, mapZoom]
   );
-  const effectiveStatesWithZoom = useMemo2(() => {
+  const effectiveStatesWithZoom = useMemo3(() => {
     if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
       return effectiveStates;
     }
@@ -1792,7 +2002,7 @@ var ZenitLayerManager = ({
       };
     });
   }, [autoOpacityOnZoom, effectiveStates, mapZoom, resolveEffectiveOpacity, resolveUserOpacity]);
-  useEffect2(() => {
+  useEffect5(() => {
     let cancelled = false;
     setLoadingMap(true);
     setMapError(null);
@@ -1824,12 +2034,12 @@ var ZenitLayerManager = ({
       cancelled = true;
     };
   }, [client.maps, mapId]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (!showUploadTab && activeTab === "upload") {
       setActiveTab("layers");
     }
   }, [activeTab, showUploadTab]);
-  useEffect2(() => {
+  useEffect5(() => {
     if (isControlled) return;
     if (!onLayerStatesChange) return;
     const emitStates = autoOpacityOnZoom && typeof mapZoom === "number" ? effectiveStatesWithZoom : effectiveStates;
@@ -1847,7 +2057,7 @@ var ZenitLayerManager = ({
     mapZoom,
     onLayerStatesChange
   ]);
-  const updateLayerVisible = React2.useCallback(
+  const updateLayerVisible = React4.useCallback(
     (layerId, visible) => {
       if (!onLayerStatesChange) return;
       const next = effectiveStates.map(
@@ -1857,7 +2067,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange]
   );
-  const updateLayerOpacity = React2.useCallback(
+  const updateLayerOpacity = React4.useCallback(
     (layerId, opacity) => {
       if (!onLayerStatesChange) return;
       const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
@@ -1868,7 +2078,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
   );
-  const resolveFeatureCount = React2.useCallback(
+  const resolveFeatureCount = React4.useCallback(
     (layerId, layer) => {
       const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
       if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
@@ -1877,7 +2087,7 @@ var ZenitLayerManager = ({
     },
     [layerFeatureCounts]
   );
-  const decoratedLayers = useMemo2(() => {
+  const decoratedLayers = useMemo3(() => {
     return layers.map((entry) => ({
       ...entry,
       effective: effectiveStates.find((state) => state.layerId === entry.mapLayer.layerId),
@@ -1906,7 +2116,7 @@ var ZenitLayerManager = ({
       return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
     });
   }, [effectiveStates, layers, resolveFeatureCount]);
-  const resolveLayerStyle = React2.useCallback(
+  const resolveLayerStyle = React4.useCallback(
     (layerId) => {
       const layerKey = String(layerId);
       const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
@@ -1936,10 +2146,10 @@ var ZenitLayerManager = ({
     ...height ? { height } : {}
   };
   if (loadingMap) {
-    return /* @__PURE__ */ jsx2("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
+    return /* @__PURE__ */ jsx4("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
   }
   if (mapError) {
-    return /* @__PURE__ */ jsxs2("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
+    return /* @__PURE__ */ jsxs4("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
       "Error al cargar mapa: ",
       mapError
     ] });
@@ -1957,7 +2167,7 @@ var ZenitLayerManager = ({
     boxShadow: "0 1px 0 rgba(148, 163, 184, 0.25)"
   };
   const renderLayerCards = () => {
-    return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
+    return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
       const layerId = layerState.mapLayer.layerId;
       const layerName = layerState.layerName ?? `Capa ${layerId}`;
       const visible = layerState.effective?.visible ?? false;
@@ -1967,7 +2177,7 @@ var ZenitLayerManager = ({
       const muted = !visible;
       const opacityPercent = Math.round(userOpacity * 100);
       const sliderBackground = `linear-gradient(to right, ${layerColor} 0%, ${layerColor} ${opacityPercent}%, #e5e7eb ${opacityPercent}%, #e5e7eb 100%)`;
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs4(
         "div",
         {
           className: `zlm-card${muted ? " is-muted" : ""}`,
@@ -1982,9 +2192,9 @@ var ZenitLayerManager = ({
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ jsx4(
                   "div",
                   {
                     style: {
@@ -1999,7 +2209,7 @@ var ZenitLayerManager = ({
                     title: "Color de la capa"
                   }
                 ),
-                showLayerVisibilityIcon && /* @__PURE__ */ jsx2(
+                showLayerVisibilityIcon && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -2010,11 +2220,11 @@ var ZenitLayerManager = ({
                       )
                     ),
                     "aria-label": visible ? "Ocultar capa" : "Mostrar capa",
-                    children: visible ? /* @__PURE__ */ jsx2(Eye, { size: 16 }) : /* @__PURE__ */ jsx2(EyeOff, { size: 16 })
+                    children: visible ? /* @__PURE__ */ jsx4(Eye, { size: 16 }) : /* @__PURE__ */ jsx4(EyeOff, { size: 16 })
                   }
                 ),
-                /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0, flex: 1 }, children: [
-                  /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsxs4("div", { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ jsx4(
                     "div",
                     {
                       className: "zlm-layer-name",
@@ -2032,26 +2242,26 @@ var ZenitLayerManager = ({
                       children: layerName
                     }
                   ),
-                  /* @__PURE__ */ jsxs2("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
+                  /* @__PURE__ */ jsxs4("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
                     "ID ",
                     layerId
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ jsxs2("span", { className: "zlm-badge", children: [
+              /* @__PURE__ */ jsx4("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ jsxs4("span", { className: "zlm-badge", children: [
                 featureCount.toLocaleString(),
                 " features"
               ] }) })
             ] }),
-            /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
-                /* @__PURE__ */ jsx2("span", { children: "Opacidad" }),
-                /* @__PURE__ */ jsxs2("span", { children: [
+            /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ jsxs4("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
+                /* @__PURE__ */ jsx4("span", { children: "Opacidad" }),
+                /* @__PURE__ */ jsxs4("span", { children: [
                   opacityPercent,
                   "%"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx4(
                 "input",
                 {
                   className: "zlm-range",
@@ -2089,8 +2299,8 @@ var ZenitLayerManager = ({
       );
     }) });
   };
-  return /* @__PURE__ */ jsxs2("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
-    /* @__PURE__ */ jsx2("style", { children: `
+  return /* @__PURE__ */ jsxs4("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
+    /* @__PURE__ */ jsx4("style", { children: `
           .zenit-layer-manager .zlm-card {
             transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
             box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
@@ -2185,16 +2395,16 @@ var ZenitLayerManager = ({
             outline-offset: 2px;
           }
         ` }),
-    /* @__PURE__ */ jsxs2("div", { style: headerStyle, children: [
-      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsxs2("div", { children: [
-          /* @__PURE__ */ jsx2("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
-          /* @__PURE__ */ jsxs2("div", { style: { color: "#64748b", fontSize: 12 }, children: [
+    /* @__PURE__ */ jsxs4("div", { style: headerStyle, children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsxs4("div", { children: [
+          /* @__PURE__ */ jsx4("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
+          /* @__PURE__ */ jsxs4("div", { style: { color: "#64748b", fontSize: 12 }, children: [
             "Mapa #",
             map.id
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
@@ -2202,13 +2412,13 @@ var ZenitLayerManager = ({
             className: "zlm-panel-toggle",
             "aria-label": panelVisible ? "Ocultar panel de capas" : "Mostrar panel de capas",
             children: [
-              panelVisible ? /* @__PURE__ */ jsx2(Eye, { size: 16 }) : /* @__PURE__ */ jsx2(EyeOff, { size: 16 }),
+              panelVisible ? /* @__PURE__ */ jsx4(Eye, { size: 16 }) : /* @__PURE__ */ jsx4(EyeOff, { size: 16 }),
               panelVisible ? "Ocultar" : "Mostrar"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs2(
+      /* @__PURE__ */ jsxs4(
         "div",
         {
           style: {
@@ -2221,26 +2431,26 @@ var ZenitLayerManager = ({
             background: "#f1f5f9"
           },
           children: [
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs4(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "layers" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("layers"),
                 children: [
-                  /* @__PURE__ */ jsx2(Layers, { size: 16 }),
+                  /* @__PURE__ */ jsx4(Layers, { size: 16 }),
                   "Capas"
                 ]
               }
             ),
-            showUploadTab && /* @__PURE__ */ jsxs2(
+            showUploadTab && /* @__PURE__ */ jsxs4(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "upload" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("upload"),
                 children: [
-                  /* @__PURE__ */ jsx2(Upload, { size: 16 }),
+                  /* @__PURE__ */ jsx4(Upload, { size: 16 }),
                   "Subir"
                 ]
               }
@@ -2249,15 +2459,15 @@ var ZenitLayerManager = ({
         }
       )
     ] }),
-    panelVisible && /* @__PURE__ */ jsxs2("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
+    panelVisible && /* @__PURE__ */ jsxs4("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
       activeTab === "layers" && renderLayerCards(),
-      showUploadTab && activeTab === "upload" && /* @__PURE__ */ jsx2("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
+      showUploadTab && activeTab === "upload" && /* @__PURE__ */ jsx4("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
     ] })
   ] });
 };
 
 // src/react/ZenitFeatureFilterPanel.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var ZenitFeatureFilterPanel = ({
   title = "Filtros",
   description,
@@ -2265,7 +2475,7 @@ var ZenitFeatureFilterPanel = ({
   style,
   children
 }) => {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "section",
     {
       className,
@@ -2278,22 +2488,22 @@ var ZenitFeatureFilterPanel = ({
         ...style
       },
       children: [
-        /* @__PURE__ */ jsxs3("header", { style: { marginBottom: 12 }, children: [
-          /* @__PURE__ */ jsx3("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
-          description && /* @__PURE__ */ jsx3("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
+        /* @__PURE__ */ jsxs5("header", { style: { marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsx5("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
+          description && /* @__PURE__ */ jsx5("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
         ] }),
-        /* @__PURE__ */ jsx3("div", { children })
+        /* @__PURE__ */ jsx5("div", { children })
       ]
     }
   );
 };
 
 // src/react/ai/FloatingChatBox.tsx
-import { useCallback as useCallback3, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import { createPortal } from "react-dom";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef7, useState as useState5 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 
 // src/react/hooks/use-chat.ts
-import { useCallback as useCallback2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
 
 // src/ai/chat.service.ts
 var DEFAULT_ERROR_MESSAGE = "No fue posible completar la solicitud al asistente.";
@@ -2429,9 +2639,9 @@ var createChatService = (config) => ({
 
 // src/react/hooks/use-chat.ts
 var useSendMessage = (config) => {
-  const [isLoading, setIsLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  const send = useCallback2(
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const send = useCallback3(
     async (mapId, request, options) => {
       setIsLoading(true);
       setError(null);
@@ -2449,18 +2659,18 @@ var useSendMessage = (config) => {
   return { sendMessage: send, isLoading, error };
 };
 var useSendMessageStream = (config) => {
-  const [isStreaming, setIsStreaming] = useState3(false);
-  const [streamingText, setStreamingText] = useState3("");
-  const [completeResponse, setCompleteResponse] = useState3(null);
-  const [error, setError] = useState3(null);
-  const requestIdRef = useRef3(0);
-  const reset = useCallback2(() => {
+  const [isStreaming, setIsStreaming] = useState4(false);
+  const [streamingText, setStreamingText] = useState4("");
+  const [completeResponse, setCompleteResponse] = useState4(null);
+  const [error, setError] = useState4(null);
+  const requestIdRef = useRef6(0);
+  const reset = useCallback3(() => {
     setIsStreaming(false);
     setStreamingText("");
     setCompleteResponse(null);
     setError(null);
   }, []);
-  const send = useCallback2(
+  const send = useCallback3(
     async (mapId, request, options) => {
       const requestId = requestIdRef.current + 1;
       requestIdRef.current = requestId;
@@ -2514,7 +2724,7 @@ var useSendMessageStream = (config) => {
 // src/react/components/MarkdownRenderer.tsx
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function normalizeAssistantMarkdown(text) {
   if (!text || typeof text !== "string") return "";
   let normalized = text;
@@ -2530,28 +2740,28 @@ var MarkdownRenderer = ({ content, className }) => {
   if (!normalizedContent) {
     return null;
   }
-  return /* @__PURE__ */ jsx4("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ jsx6(
     ReactMarkdown,
     {
       remarkPlugins: [remarkGfm],
       components: {
         // Headings with proper spacing
-        h1: ({ children, ...props }) => /* @__PURE__ */ jsx4("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
-        h2: ({ children, ...props }) => /* @__PURE__ */ jsx4("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
-        h3: ({ children, ...props }) => /* @__PURE__ */ jsx4("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
-        h4: ({ children, ...props }) => /* @__PURE__ */ jsx4("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
-        h5: ({ children, ...props }) => /* @__PURE__ */ jsx4("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
-        h6: ({ children, ...props }) => /* @__PURE__ */ jsx4("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
+        h1: ({ children, ...props }) => /* @__PURE__ */ jsx6("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
+        h2: ({ children, ...props }) => /* @__PURE__ */ jsx6("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
+        h3: ({ children, ...props }) => /* @__PURE__ */ jsx6("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
+        h4: ({ children, ...props }) => /* @__PURE__ */ jsx6("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
+        h5: ({ children, ...props }) => /* @__PURE__ */ jsx6("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
+        h6: ({ children, ...props }) => /* @__PURE__ */ jsx6("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
         // Paragraphs with comfortable line height
-        p: ({ children, ...props }) => /* @__PURE__ */ jsx4("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
+        p: ({ children, ...props }) => /* @__PURE__ */ jsx6("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
         // Lists with proper indentation
-        ul: ({ children, ...props }) => /* @__PURE__ */ jsx4("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
-        ol: ({ children, ...props }) => /* @__PURE__ */ jsx4("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
-        li: ({ children, ...props }) => /* @__PURE__ */ jsx4("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
+        ul: ({ children, ...props }) => /* @__PURE__ */ jsx6("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
+        ol: ({ children, ...props }) => /* @__PURE__ */ jsx6("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
+        li: ({ children, ...props }) => /* @__PURE__ */ jsx6("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
         // Code blocks
         code: ({ inline, children, ...props }) => {
           if (inline) {
-            return /* @__PURE__ */ jsx4(
+            return /* @__PURE__ */ jsx6(
               "code",
               {
                 style: {
@@ -2566,7 +2776,7 @@ var MarkdownRenderer = ({ content, className }) => {
               }
             );
           }
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx6(
             "code",
             {
               style: {
@@ -2586,9 +2796,9 @@ var MarkdownRenderer = ({ content, className }) => {
           );
         },
         // Pre (code block wrapper)
-        pre: ({ children, ...props }) => /* @__PURE__ */ jsx4("pre", { style: { margin: 0 }, ...props, children }),
+        pre: ({ children, ...props }) => /* @__PURE__ */ jsx6("pre", { style: { margin: 0 }, ...props, children }),
         // Blockquotes
-        blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx4(
+        blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx6(
           "blockquote",
           {
             style: {
@@ -2604,11 +2814,11 @@ var MarkdownRenderer = ({ content, className }) => {
           }
         ),
         // Strong/bold
-        strong: ({ children, ...props }) => /* @__PURE__ */ jsx4("strong", { style: { fontWeight: 600 }, ...props, children }),
+        strong: ({ children, ...props }) => /* @__PURE__ */ jsx6("strong", { style: { fontWeight: 600 }, ...props, children }),
         // Emphasis/italic
-        em: ({ children, ...props }) => /* @__PURE__ */ jsx4("em", { style: { fontStyle: "italic" }, ...props, children }),
+        em: ({ children, ...props }) => /* @__PURE__ */ jsx6("em", { style: { fontStyle: "italic" }, ...props, children }),
         // Horizontal rule
-        hr: (props) => /* @__PURE__ */ jsx4(
+        hr: (props) => /* @__PURE__ */ jsx6(
           "hr",
           {
             style: {
@@ -2621,7 +2831,7 @@ var MarkdownRenderer = ({ content, className }) => {
           }
         ),
         // Tables (GFM)
-        table: ({ children, ...props }) => /* @__PURE__ */ jsx4("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ jsx4(
+        table: ({ children, ...props }) => /* @__PURE__ */ jsx6("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ jsx6(
           "table",
           {
             style: {
@@ -2633,7 +2843,7 @@ var MarkdownRenderer = ({ content, className }) => {
             children
           }
         ) }),
-        th: ({ children, ...props }) => /* @__PURE__ */ jsx4(
+        th: ({ children, ...props }) => /* @__PURE__ */ jsx6(
           "th",
           {
             style: {
@@ -2647,7 +2857,7 @@ var MarkdownRenderer = ({ content, className }) => {
             children
           }
         ),
-        td: ({ children, ...props }) => /* @__PURE__ */ jsx4(
+        td: ({ children, ...props }) => /* @__PURE__ */ jsx6(
           "td",
           {
             style: {
@@ -2665,32 +2875,32 @@ var MarkdownRenderer = ({ content, className }) => {
 };
 
 // src/react/ai/FloatingChatBox.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var ChatIcon = () => /* @__PURE__ */ jsx5("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
-var CloseIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ChatIcon = () => /* @__PURE__ */ jsx7("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx7("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ jsx7("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("polyline", { points: "15 3 21 3 21 9" }),
-  /* @__PURE__ */ jsx5("polyline", { points: "9 21 3 21 3 15" }),
-  /* @__PURE__ */ jsx5("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  /* @__PURE__ */ jsx5("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var ExpandIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ jsx7("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ jsx7("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ jsx7("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var CollapseIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("polyline", { points: "4 14 10 14 10 20" }),
-  /* @__PURE__ */ jsx5("polyline", { points: "20 10 14 10 14 4" }),
-  /* @__PURE__ */ jsx5("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  /* @__PURE__ */ jsx5("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var CollapseIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("polyline", { points: "4 14 10 14 10 20" }),
+  /* @__PURE__ */ jsx7("polyline", { points: "20 10 14 10 14 4" }),
+  /* @__PURE__ */ jsx7("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  /* @__PURE__ */ jsx7("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var SendIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-  /* @__PURE__ */ jsx5("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+var SendIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ jsx7("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
 ] });
-var LayersIcon = () => /* @__PURE__ */ jsxs4("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx5("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
-  /* @__PURE__ */ jsx5("polyline", { points: "2 17 12 22 22 17" }),
-  /* @__PURE__ */ jsx5("polyline", { points: "2 12 12 17 22 12" })
+var LayersIcon = () => /* @__PURE__ */ jsxs6("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx7("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ jsx7("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ jsx7("polyline", { points: "2 12 12 17 22 12" })
 ] });
 var styles = {
   root: {
@@ -2699,8 +2909,8 @@ var styles = {
   // Floating button (closed state - wide with text, open state - circular with X)
   floatingButton: {
     position: "fixed",
-    bottom: 24,
-    right: 24,
+    bottom: 16,
+    right: 16,
     borderRadius: "999px",
     border: "none",
     cursor: "pointer",
@@ -2710,30 +2920,30 @@ var styles = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: 15,
+    fontSize: 14,
     fontWeight: 600,
     zIndex: 99999,
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
   },
   floatingButtonClosed: {
-    padding: "14px 24px",
+    padding: "12px 20px",
     gap: 8
   },
   floatingButtonOpen: {
-    width: 56,
-    height: 56,
+    width: 52,
+    height: 52,
     padding: 0
   },
   floatingButtonMobile: {
-    width: 56,
-    height: 56,
+    width: 52,
+    height: 52,
     padding: 0
   },
   // Panel (expandable)
   panel: {
     position: "fixed",
-    bottom: 92,
-    right: 24,
+    bottom: 80,
+    right: 16,
     background: "#fff",
     borderRadius: 16,
     boxShadow: "0 20px 60px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.05)",
@@ -2744,16 +2954,16 @@ var styles = {
     transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
   },
   panelNormal: {
-    width: 400,
-    height: 550
+    width: 360,
+    height: 520
   },
   panelExpanded: {
-    width: 520,
-    height: 700
+    width: 480,
+    height: 640
   },
   // Header with green gradient
   header: {
-    padding: "16px 18px",
+    padding: "14px 16px",
     background: "linear-gradient(135deg, #10b981, #059669)",
     color: "#fff",
     display: "flex",
@@ -2762,7 +2972,7 @@ var styles = {
   },
   title: {
     margin: 0,
-    fontSize: 16,
+    fontSize: 15,
     fontWeight: 600,
     letterSpacing: "-0.01em"
   },
@@ -2775,8 +2985,8 @@ var styles = {
     border: "none",
     background: "rgba(255, 255, 255, 0.15)",
     color: "#fff",
-    width: 32,
-    height: 32,
+    width: 30,
+    height: 30,
     borderRadius: 8,
     cursor: "pointer",
     display: "flex",
@@ -2787,7 +2997,7 @@ var styles = {
   // Messages area
   messages: {
     flex: 1,
-    padding: "20px 18px",
+    padding: "16px",
     overflowY: "auto",
     background: "#f8fafc",
     display: "flex",
@@ -2802,10 +3012,10 @@ var styles = {
   },
   messageBubble: {
     maxWidth: "85%",
-    padding: "12px 14px",
+    padding: "10px 12px",
     borderRadius: 16,
     lineHeight: 1.5,
-    fontSize: 14,
+    fontSize: 13,
     whiteSpace: "pre-wrap",
     wordBreak: "break-word"
   },
@@ -2919,7 +3129,7 @@ var styles = {
   // Input area
   inputWrapper: {
     borderTop: "1px solid #e2e8f0",
-    padding: "14px 16px",
+    padding: "10px 14px",
     display: "flex",
     gap: 10,
     alignItems: "flex-end",
@@ -2930,8 +3140,8 @@ var styles = {
     resize: "none",
     borderRadius: 12,
     border: "1.5px solid #cbd5e1",
-    padding: "10px 12px",
-    fontSize: 14,
+    padding: "8px 10px",
+    fontSize: 13,
     fontFamily: "inherit",
     lineHeight: 1.4,
     transition: "border-color 0.2s"
@@ -2943,18 +3153,18 @@ var styles = {
   sendButton: {
     borderRadius: 12,
     border: "none",
-    padding: "10px 14px",
+    padding: "8px 12px",
     background: "linear-gradient(135deg, #10b981, #059669)",
     color: "#fff",
     cursor: "pointer",
-    fontSize: 14,
+    fontSize: 13,
     fontWeight: 600,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     transition: "opacity 0.2s, transform 0.2s",
-    minWidth: 44,
-    height: 44
+    minWidth: 40,
+    height: 40
   },
   // Status messages
   statusNote: {
@@ -2984,42 +3194,42 @@ var FloatingChatBox = ({
   open: openProp
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = useState4(false);
+  const [internalOpen, setInternalOpen] = useState5(false);
   const open = isControlled ? openProp : internalOpen;
-  const setOpen = useCallback3((value) => {
+  const setOpen = useCallback4((value) => {
     const newValue = typeof value === "function" ? value(open) : value;
     if (!isControlled) {
       setInternalOpen(newValue);
     }
     onOpenChange?.(newValue);
   }, [isControlled, open, onOpenChange]);
-  const [expanded, setExpanded] = useState4(false);
-  const [messages, setMessages] = useState4([]);
-  const [inputValue, setInputValue] = useState4("");
-  const [conversationId, setConversationId] = useState4();
-  const [errorMessage, setErrorMessage] = useState4(null);
-  const [isFocused, setIsFocused] = useState4(false);
-  const [isMobile, setIsMobile] = useState4(false);
-  const messagesEndRef = useRef4(null);
-  const messagesContainerRef = useRef4(null);
-  const chatBoxRef = useRef4(null);
-  const chatConfig = useMemo3(() => {
+  const [expanded, setExpanded] = useState5(false);
+  const [messages, setMessages] = useState5([]);
+  const [inputValue, setInputValue] = useState5("");
+  const [conversationId, setConversationId] = useState5();
+  const [errorMessage, setErrorMessage] = useState5(null);
+  const [isFocused, setIsFocused] = useState5(false);
+  const [isMobile, setIsMobile] = useState5(false);
+  const messagesEndRef = useRef7(null);
+  const messagesContainerRef = useRef7(null);
+  const chatBoxRef = useRef7(null);
+  const chatConfig = useMemo4(() => {
     if (!baseUrl) return void 0;
     return { baseUrl, accessToken, getAccessToken };
   }, [accessToken, baseUrl, getAccessToken]);
   const { sendMessage: sendMessage2, isStreaming, streamingText, completeResponse } = useSendMessageStream(chatConfig);
   const canSend = Boolean(mapId) && Boolean(baseUrl) && inputValue.trim().length > 0 && !isStreaming;
-  useEffect3(() => {
+  useEffect6(() => {
     if (open && isMobile) {
       setExpanded(true);
     }
   }, [open, isMobile]);
-  const scrollToBottom = useCallback3(() => {
+  const scrollToBottom = useCallback4(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, []);
-  useEffect3(() => {
+  useEffect6(() => {
     if (open && messages.length === 0) {
       setMessages([
         {
@@ -3030,10 +3240,10 @@ var FloatingChatBox = ({
       ]);
     }
   }, [open, messages.length]);
-  useEffect3(() => {
+  useEffect6(() => {
     scrollToBottom();
   }, [messages, streamingText, scrollToBottom]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (!open) return;
     if (isMobile && expanded) return;
     const handleClickOutside = (event) => {
@@ -3046,7 +3256,7 @@ var FloatingChatBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, isMobile, expanded]);
-  useEffect3(() => {
+  useEffect6(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 768px)");
     const updateMobile = () => setIsMobile(mediaQuery.matches);
@@ -3064,7 +3274,7 @@ var FloatingChatBox = ({
       }
     };
   }, []);
-  useEffect3(() => {
+  useEffect6(() => {
     if (typeof document === "undefined") return;
     if (!open || !isMobile) return;
     document.body.style.overflow = "hidden";
@@ -3072,10 +3282,10 @@ var FloatingChatBox = ({
       document.body.style.overflow = "";
     };
   }, [open, isMobile]);
-  const addMessage = useCallback3((message) => {
+  const addMessage = useCallback4((message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
-  const handleSend = useCallback3(async () => {
+  const handleSend = useCallback4(async () => {
     if (!mapId) {
       setErrorMessage("Selecciona un mapa para usar el asistente.");
       return;
@@ -3110,11 +3320,11 @@ var FloatingChatBox = ({
         response
       });
     } catch (error) {
-      setErrorMessage(error instanceof Error ? error.message : "Ocurri\xF3 un error inesperado.");
+      setErrorMessage("Ocurri\xF3 un error al generar la respuesta.");
       addMessage({
         id: `error-${Date.now()}`,
         role: "assistant",
-        content: `\u274C Error: ${error instanceof Error ? error.message : "Ocurri\xF3 un error inesperado."}`
+        content: "\u274C Ocurri\xF3 un error al generar la respuesta."
       });
     }
   }, [
@@ -3128,7 +3338,7 @@ var FloatingChatBox = ({
     sendMessage2,
     userId
   ]);
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback4(
     (event) => {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
@@ -3139,20 +3349,20 @@ var FloatingChatBox = ({
     },
     [canSend, handleSend]
   );
-  const handleFollowUpClick = useCallback3((question) => {
+  const handleFollowUpClick = useCallback4((question) => {
     setInputValue(question);
   }, []);
   const renderMetadata = (response) => {
     if (!response?.metadata) return null;
     const referencedLayers = response.metadata.referencedLayers;
     if (!referencedLayers || referencedLayers.length === 0) return null;
-    return /* @__PURE__ */ jsxs4("div", { style: styles.metadataSection, children: [
-      /* @__PURE__ */ jsxs4("div", { style: styles.metadataTitle, children: [
-        /* @__PURE__ */ jsx5(LayersIcon, {}),
+    return /* @__PURE__ */ jsxs6("div", { style: styles.metadataSection, children: [
+      /* @__PURE__ */ jsxs6("div", { style: styles.metadataTitle, children: [
+        /* @__PURE__ */ jsx7(LayersIcon, {}),
         "Capas Analizadas"
       ] }),
-      /* @__PURE__ */ jsx5("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ jsxs4("li", { style: styles.metadataItem, children: [
-        /* @__PURE__ */ jsx5("strong", { children: layer.layerName }),
+      /* @__PURE__ */ jsx7("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ jsxs6("li", { style: styles.metadataItem, children: [
+        /* @__PURE__ */ jsx7("strong", { children: layer.layerName }),
         " (",
         layer.featureCount,
         " ",
@@ -3161,7 +3371,7 @@ var FloatingChatBox = ({
       ] }, index)) })
     ] });
   };
-  const handleActionClick = useCallback3((action) => {
+  const handleActionClick = useCallback4((action) => {
     if (isStreaming) return;
     setOpen(false);
     requestAnimationFrame(() => {
@@ -3170,9 +3380,9 @@ var FloatingChatBox = ({
   }, [isStreaming, setOpen, onActionClick]);
   const renderActions = (response) => {
     if (!response?.suggestedActions?.length) return null;
-    return /* @__PURE__ */ jsxs4("div", { style: styles.actionsSection, children: [
-      /* @__PURE__ */ jsx5("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
-      /* @__PURE__ */ jsx5("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs6("div", { style: styles.actionsSection, children: [
+      /* @__PURE__ */ jsx7("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
+      /* @__PURE__ */ jsx7("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -3203,9 +3413,9 @@ var FloatingChatBox = ({
   };
   const renderFollowUps = (response) => {
     if (!response?.followUpQuestions?.length) return null;
-    return /* @__PURE__ */ jsxs4("div", { style: styles.actionsSection, children: [
-      /* @__PURE__ */ jsx5("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
-      /* @__PURE__ */ jsx5("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs6("div", { style: styles.actionsSection, children: [
+      /* @__PURE__ */ jsx7("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
+      /* @__PURE__ */ jsx7("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -3234,8 +3444,8 @@ var FloatingChatBox = ({
       )) })
     ] });
   };
-  const chatContent = /* @__PURE__ */ jsxs4("div", { style: styles.root, children: [
-    /* @__PURE__ */ jsx5("style", { children: `
+  const chatContent = /* @__PURE__ */ jsxs6("div", { style: styles.root, children: [
+    /* @__PURE__ */ jsx7("style", { children: `
         @keyframes zenitBlink {
           0%, 49% { opacity: 1; }
           50%, 100% { opacity: 0; }
@@ -3278,11 +3488,13 @@ var FloatingChatBox = ({
         @media (max-width: 768px) {
           .zenit-chat-panel.zenit-chat-panel--fullscreen {
             position: fixed !important;
-            inset: 0 !important;
-            width: 100vw !important;
-            max-width: 100vw !important;
-            height: 100vh !important;
-            height: 100dvh !important;
+            left: 0 !important;
+            right: 0 !important;
+            top: 4rem !important;
+            bottom: 0 !important;
+            width: 100% !important;
+            max-width: 100% !important;
+            height: auto !important;
             border-radius: 0 !important;
             display: flex !important;
             flex-direction: column !important;
@@ -3305,7 +3517,7 @@ var FloatingChatBox = ({
           }
         }
       ` }),
-    open && /* @__PURE__ */ jsxs4(
+    open && /* @__PURE__ */ jsxs6(
       "div",
       {
         ref: chatBoxRef,
@@ -3315,10 +3527,10 @@ var FloatingChatBox = ({
           ...expanded ? styles.panelExpanded : styles.panelNormal
         },
         children: [
-          /* @__PURE__ */ jsxs4("header", { style: styles.header, children: [
-            /* @__PURE__ */ jsx5("h3", { style: styles.title, children: "Asistente Zenit AI" }),
-            /* @__PURE__ */ jsxs4("div", { style: styles.headerButtons, children: [
-              /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs6("header", { style: styles.header, children: [
+            /* @__PURE__ */ jsx7("h3", { style: styles.title, children: "Asistente Zenit AI" }),
+            /* @__PURE__ */ jsxs6("div", { style: styles.headerButtons, children: [
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -3331,10 +3543,10 @@ var FloatingChatBox = ({
                     e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
                   },
                   "aria-label": expanded ? "Contraer" : "Expandir",
-                  children: expanded ? /* @__PURE__ */ jsx5(CollapseIcon, {}) : /* @__PURE__ */ jsx5(ExpandIcon, {})
+                  children: expanded ? /* @__PURE__ */ jsx7(CollapseIcon, {}) : /* @__PURE__ */ jsx7(ExpandIcon, {})
                 }
               ),
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
@@ -3347,20 +3559,20 @@ var FloatingChatBox = ({
                     e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
                   },
                   "aria-label": "Cerrar",
-                  children: /* @__PURE__ */ jsx5(CloseIcon, {})
+                  children: /* @__PURE__ */ jsx7(CloseIcon, {})
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
-            messages.map((message) => /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs6("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
+            messages.map((message) => /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
                   ...styles.messageWrapper,
                   alignItems: message.role === "user" ? "flex-end" : "flex-start"
                 },
-                children: /* @__PURE__ */ jsxs4(
+                children: /* @__PURE__ */ jsxs6(
                   "div",
                   {
                     style: {
@@ -3368,7 +3580,7 @@ var FloatingChatBox = ({
                       ...message.role === "user" ? styles.userMessage : styles.assistantMessage
                     },
                     children: [
-                      message.role === "assistant" ? /* @__PURE__ */ jsx5(MarkdownRenderer, { content: message.content }) : message.content,
+                      message.role === "assistant" ? /* @__PURE__ */ jsx7(MarkdownRenderer, { content: message.content }) : message.content,
                       message.role === "assistant" && renderMetadata(message.response),
                       message.role === "assistant" && renderActions(message.response),
                       message.role === "assistant" && renderFollowUps(message.response)
@@ -3378,39 +3590,39 @@ var FloatingChatBox = ({
               },
               message.id
             )),
-            isStreaming && /* @__PURE__ */ jsx5(
+            isStreaming && /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
                   ...styles.messageWrapper,
                   alignItems: "flex-start"
                 },
-                children: /* @__PURE__ */ jsx5(
+                children: /* @__PURE__ */ jsx7(
                   "div",
                   {
                     style: {
                       ...styles.messageBubble,
                       ...styles.assistantMessage
                     },
-                    children: streamingText ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-                      /* @__PURE__ */ jsx5(MarkdownRenderer, { content: streamingText }),
-                      /* @__PURE__ */ jsx5("span", { style: styles.cursor })
-                    ] }) : /* @__PURE__ */ jsxs4("div", { style: styles.thinkingText, children: [
-                      /* @__PURE__ */ jsx5("span", { children: "Analizando" }),
-                      /* @__PURE__ */ jsxs4("div", { style: styles.typingIndicator, children: [
-                        /* @__PURE__ */ jsx5("div", { className: "zenit-typing-dot", style: styles.typingDot }),
-                        /* @__PURE__ */ jsx5("div", { className: "zenit-typing-dot", style: styles.typingDot }),
-                        /* @__PURE__ */ jsx5("div", { className: "zenit-typing-dot", style: styles.typingDot })
+                    children: streamingText ? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+                      /* @__PURE__ */ jsx7(MarkdownRenderer, { content: streamingText }),
+                      /* @__PURE__ */ jsx7("span", { style: styles.cursor })
+                    ] }) : /* @__PURE__ */ jsxs6("div", { style: styles.thinkingText, children: [
+                      /* @__PURE__ */ jsx7("span", { children: "Pensando" }),
+                      /* @__PURE__ */ jsxs6("div", { style: styles.typingIndicator, children: [
+                        /* @__PURE__ */ jsx7("div", { className: "zenit-typing-dot", style: styles.typingDot }),
+                        /* @__PURE__ */ jsx7("div", { className: "zenit-typing-dot", style: styles.typingDot }),
+                        /* @__PURE__ */ jsx7("div", { className: "zenit-typing-dot", style: styles.typingDot })
                       ] })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx5("div", { ref: messagesEndRef })
+            /* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
-            /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsxs6("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
+            /* @__PURE__ */ jsx7(
               "textarea",
               {
                 style: {
@@ -3427,7 +3639,7 @@ var FloatingChatBox = ({
                 disabled: !mapId || !baseUrl || isStreaming
               }
             ),
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -3436,36 +3648,38 @@ var FloatingChatBox = ({
                 onClick: () => void handleSend(),
                 disabled: !canSend,
                 "aria-label": "Enviar mensaje",
-                children: /* @__PURE__ */ jsx5(SendIcon, {})
+                children: /* @__PURE__ */ jsx7(SendIcon, {})
               }
             )
           ] }),
-          errorMessage && /* @__PURE__ */ jsx5("div", { style: styles.errorText, children: errorMessage }),
-          !mapId && !errorMessage && /* @__PURE__ */ jsx5("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
-          !baseUrl && !errorMessage && /* @__PURE__ */ jsx5("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
+          errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.errorText, children: errorMessage }),
+          isStreaming && !errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.statusNote, children: "Generando sugerencias..." }),
+          !mapId && !errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
+          !baseUrl && !errorMessage && /* @__PURE__ */ jsx7("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
         ]
       }
     ),
-    !(hideButton && !open) && /* @__PURE__ */ jsx5(
+    !(hideButton && !open) && /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
         className: `zenit-ai-button ${open ? "open" : ""}${open && isMobile ? " zenit-ai-button--hidden-mobile" : ""}`,
         style: {
           ...styles.floatingButton,
-          ...open ? styles.floatingButtonOpen : isMobile ? styles.floatingButtonMobile : styles.floatingButtonClosed
+          ...open ? styles.floatingButtonOpen : isMobile ? styles.floatingButtonMobile : styles.floatingButtonClosed,
+          zIndex: open ? 100001 : 99999
         },
         onClick: () => setOpen((prev) => !prev),
         "aria-label": open ? "Cerrar asistente" : "Abrir asistente Zenit AI",
-        children: open ? /* @__PURE__ */ jsx5(CloseIcon, {}) : /* @__PURE__ */ jsxs4(Fragment, { children: [
-          /* @__PURE__ */ jsx5(ChatIcon, {}),
-          !isMobile && /* @__PURE__ */ jsx5("span", { children: "Asistente IA" })
+        children: open ? /* @__PURE__ */ jsx7(CloseIcon, {}) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx7(ChatIcon, {}),
+          !isMobile && /* @__PURE__ */ jsx7("span", { children: "Asistente IA" })
         ] })
       }
     )
   ] });
   if (typeof document !== "undefined") {
-    return createPortal(chatContent, document.body);
+    return createPortal2(chatContent, document.body);
   }
   return chatContent;
 };
@@ -3508,4 +3722,4 @@ export {
   useSendMessageStream,
   FloatingChatBox
 };
-//# sourceMappingURL=chunk-ITF7QCUZ.mjs.map
+//# sourceMappingURL=chunk-PCTRVN4O.mjs.map