zenit-sdk 0.0.7 → 0.0.9

package/dist/react/index.js

@@ -58,9 +58,9 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/ZenitMap.tsx
-var import_react = __toESM(require("react"));
-var import_react_leaflet = require("react-leaflet");
-var import_leaflet = __toESM(require("leaflet"));
+var import_react4 = __toESM(require("react"));
+var import_react_leaflet4 = require("react-leaflet");
+var import_leaflet4 = __toESM(require("leaflet"));
 
 // src/maps/helpers.ts
 function toNumber(value) {
@@ -253,9 +253,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
@@ -292,302 +292,215 @@ function getEffectiveLayerOpacity(baseOpacity, zoom, layerType, geometryType, op
   return clampNumber(effective, settings.minOpacity, settings.maxOpacity);
 }
 
-// src/react/ZenitMap.tsx
+// src/react/map/layer-geojson.tsx
+var import_react_leaflet = require("react-leaflet");
+var import_leaflet = __toESM(require("leaflet"));
 var import_jsx_runtime = require("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;
+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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_react_leaflet.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__ */ (0, import_jsx_runtime.jsx)(
+      import_react_leaflet.GeoJSON,
+      {
+        data: pointsData,
+        pane: panesReady && mapInstance?.getPane(pointsPaneName) ? pointsPaneName : void 0,
+        pointToLayer: (feature, latlng) => import_leaflet.default.circleMarker(latlng, {
+          radius: isMobile ? 8 : 6,
+          ...styleFn(feature, layerType, baseOpacity)
+        }),
+        onEachFeature
+      },
+      `points-${layerId}`
+    )
+  ] });
+};
+
+// src/react/map/location-control.tsx
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var import_react_leaflet2 = require("react-leaflet");
+var import_leaflet3 = __toESM(require("leaflet"));
+
+// src/react/hooks/use-geolocation.ts
+var import_react = require("react");
+function useGeolocation(options) {
+  const [isTracking, setIsTracking] = (0, import_react.useState)(false);
+  const [location, setLocation] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const watchIdRef = (0, import_react.useRef)(null);
+  const stopTracking = (0, import_react.useCallback)(() => {
+    if (watchIdRef.current !== null && typeof navigator !== "undefined" && navigator.geolocation) {
+      navigator.geolocation.clearWatch(watchIdRef.current);
+    }
+    watchIdRef.current = null;
+    setIsTracking(false);
+  }, []);
+  const startTracking = (0, import_react.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 = (0, import_react.useCallback)(() => {
+    if (isTracking) {
+      stopTracking();
+    } else {
+      startTracking();
+    }
+  }, [isTracking, startTracking, stopTracking]);
+  const clearError = (0, import_react.useCallback)(() => setError(null), []);
+  (0, import_react.useEffect)(() => {
+    return () => {
+      stopTracking();
+    };
+  }, [stopTracking]);
+  return {
+    isTracking,
+    location,
+    error,
+    startTracking,
+    stopTracking,
+    toggleTracking,
+    clearError
+  };
+}
+
+// src/react/map/map-utils.ts
+var import_leaflet2 = __toESM(require("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;
+.custom-leaflet-popup .leaflet-popup-content::-webkit-scrollbar-thumb {
+  background: rgba(148, 163, 184, 0.5);
+  border-radius: 999px;
 }
 
-.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);
-}
-
-/* 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;
@@ -602,7 +515,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;
@@ -612,47 +541,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;
+  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 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;
-}
-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;
@@ -664,99 +598,480 @@ 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 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);
-    rowsHtml += `
-      <div class="zenit-popup-row zenit-popup-description">
-        <div class="zenit-popup-label">${label}</div>
-        <div class="zenit-popup-value">${valueHtml}</div>
+    return `
+        <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>${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();
+  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 `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 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 import_leaflet2.default.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 import_leaflet2.default.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
+var import_jsx_runtime2 = require("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__ */ (0, import_jsx_runtime2.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "19", x2: "12", y2: "22" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "2", y1: "12", x2: "5", y2: "12" }),
+  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "19", y1: "12", x2: "22", y2: "12" })
+] });
+var LocationControl = ({ position = "bottomleft", zoom = 16 }) => {
+  const map = (0, import_react_leaflet2.useMap)();
+  const controlRef = (0, import_react2.useRef)(null);
+  const hasCenteredRef = (0, import_react2.useRef)(false);
+  const { isTracking, location, error, toggleTracking, clearError } = useGeolocation();
+  (0, import_react2.useEffect)(() => {
+    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);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const control = import_leaflet3.default.control({ position });
+    control.onAdd = () => {
+      const container = import_leaflet3.default.DomUtil.create("div", "zenit-location-control");
+      import_leaflet3.default.DomEvent.disableClickPropagation(container);
+      controlRef.current = container;
+      return container;
+    };
+    control.addTo(map);
+    return () => {
+      control.remove();
+      controlRef.current = null;
+    };
+  }, [map, position]);
+  (0, import_react2.useEffect)(() => {
+    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 = (0, import_react2.useMemo)(() => createLocationIcon(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    controlRef.current && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          "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__ */ (0, import_jsx_runtime2.jsx)(LocateIcon, {}),
+              error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "zenit-location-badge", children: "!" })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "zenit-location-error", children: error.message || "No se pudo acceder a tu ubicaci\xF3n." })
+      ] }),
+      controlRef.current
+    ),
+    location && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_leaflet2.Marker, { position: [location.lat, location.lon], icon: markerIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_leaflet2.Circle,
+        {
+          center: [location.lat, location.lon],
+          radius: location.accuracy,
+          pathOptions: { color: "#2563eb", fillColor: "#2563eb", fillOpacity: 0.15 }
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/react/map/map-handlers.tsx
+var import_react3 = require("react");
+var import_react_leaflet3 = require("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 = (0, import_react_leaflet3.useMap)();
+  const lastAppliedBBox = (0, import_react3.useRef)(null);
+  const lastUserInteracted = (0, import_react3.useRef)(false);
+  (0, import_react3.useEffect)(() => {
+    const handleInteraction = () => {
+      lastUserInteracted.current = true;
+    };
+    map.on("dragstart", handleInteraction);
+    map.on("zoomstart", handleInteraction);
+    return () => {
+      map.off("dragstart", handleInteraction);
+      map.off("zoomstart", handleInteraction);
+    };
+  }, [map]);
+  (0, import_react3.useEffect)(() => {
+    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);
+    }
+    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 = (0, import_react_leaflet3.useMap)();
+  (0, import_react3.useEffect)(() => {
+    const handleZoom = () => {
+      onZoomChange(map.getZoom());
+    };
+    map.on("zoomend", handleZoom);
+    handleZoom();
+    return () => {
+      map.off("zoomend", handleZoom);
+    };
+  }, [map, onZoomChange]);
+  return null;
+};
+var MapInstanceBridge = ({ onReady }) => {
+  const map = (0, import_react_leaflet3.useMap)();
+  (0, import_react3.useEffect)(() => {
+    onReady(map);
+  }, [map, onReady]);
+  return null;
+};
+
+// src/react/ZenitMap.tsx
+var import_jsx_runtime3 = require("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;
   }
-  rowsHtml += otherEntries.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>
-      `;
-  }).join("");
-  return `<div class="zenit-popup-card">${rowsHtml}</div>`;
+  return isGeoJsonFeatureCollection(value) ? value : null;
 }
-function withAlpha(color, alpha) {
-  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 `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 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 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 };
-    }
+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 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 (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
   }
   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 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;
@@ -775,25 +1090,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;
@@ -820,81 +1116,7 @@ function normalizeCenterTuple(center) {
   }
   return null;
 }
-var FitToBounds = ({ bbox }) => {
-  const mapInstance = (0, import_react_leaflet.useMap)();
-  const lastAppliedBBox = (0, import_react.useRef)(null);
-  (0, import_react.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 = (0, import_react_leaflet.useMap)();
-  const lastAutoBBoxApplied = (0, import_react.useRef)(null);
-  const lastUserInteracted = (0, import_react.useRef)(false);
-  (0, import_react.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]);
-  (0, import_react.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 = (0, import_react_leaflet.useMap)();
-  (0, import_react.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 = (0, import_react_leaflet.useMap)();
-  (0, import_react.useEffect)(() => {
-    onReady(mapInstance);
-  }, [mapInstance, onReady]);
-  return null;
-};
-var ZenitMap = (0, import_react.forwardRef)(({
+var ZenitMap = (0, import_react4.forwardRef)(({
   client,
   mapId,
   height = "500px",
@@ -919,20 +1141,21 @@ var ZenitMap = (0, import_react.forwardRef)(({
   onZoomChange,
   onMapReady
 }, ref) => {
-  const [map, setMap] = (0, import_react.useState)(null);
-  const [layers, setLayers] = (0, import_react.useState)([]);
-  const [effectiveStates, setEffectiveStates] = (0, import_react.useState)([]);
-  const [loadingMap, setLoadingMap] = (0, import_react.useState)(false);
-  const [mapError, setMapError] = (0, import_react.useState)(null);
-  const [mapInstance, setMapInstance] = (0, import_react.useState)(null);
-  const [panesReady, setPanesReady] = (0, import_react.useState)(false);
-  const [currentZoom, setCurrentZoom] = (0, import_react.useState)(initialZoom ?? DEFAULT_ZOOM);
-  const [isMobile, setIsMobile] = (0, import_react.useState)(() => {
+  const [map, setMap] = (0, import_react4.useState)(null);
+  const [layers, setLayers] = (0, import_react4.useState)([]);
+  const [effectiveStates, setEffectiveStates] = (0, import_react4.useState)([]);
+  const [loadingMap, setLoadingMap] = (0, import_react4.useState)(false);
+  const [mapError, setMapError] = (0, import_react4.useState)(null);
+  const [mapInstance, setMapInstance] = (0, import_react4.useState)(null);
+  const [panesReady, setPanesReady] = (0, import_react4.useState)(false);
+  const [currentZoom, setCurrentZoom] = (0, import_react4.useState)(initialZoom ?? DEFAULT_ZOOM);
+  const [isPopupOpen, setIsPopupOpen] = (0, import_react4.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react4.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia("(max-width: 768px)").matches;
   });
-  const normalizedLayers = (0, import_react.useMemo)(() => normalizeMapLayers(map), [map]);
-  (0, import_react.useEffect)(() => {
+  const normalizedLayers = (0, import_react4.useMemo)(() => normalizeMapLayers(map), [map]);
+  (0, import_react4.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia("(max-width: 768px)");
     const onChange = (e) => {
@@ -950,12 +1173,37 @@ var ZenitMap = (0, import_react.forwardRef)(({
     }
     return;
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (featureInfoMode === "popup") {
       ensurePopupStyles();
     }
   }, [featureInfoMode]);
-  const layerStyleIndex = (0, import_react.useMemo)(() => {
+  (0, import_react4.useEffect)(() => {
+    if (featureInfoMode !== "popup") {
+      setIsPopupOpen(false);
+    }
+  }, [featureInfoMode]);
+  (0, import_react4.useEffect)(() => {
+    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]);
+  (0, import_react4.useEffect)(() => {
+    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 = (0, import_react4.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     (map?.mapLayers ?? []).forEach((entry) => {
       const layerStyle = entry.layer?.style ?? entry.mapLayer?.layer?.style ?? entry.style ?? null;
@@ -966,7 +1214,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     });
     return index;
   }, [map]);
-  const labelKeyIndex = (0, import_react.useMemo)(() => {
+  const labelKeyIndex = (0, import_react4.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     normalizedLayers.forEach((entry) => {
       const label = entry.layer?.label ?? entry.mapLayer?.label ?? entry.mapLayer.layerConfig?.label;
@@ -976,7 +1224,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     });
     return index;
   }, [normalizedLayers]);
-  const layerMetaIndex = (0, import_react.useMemo)(() => {
+  const layerMetaIndex = (0, import_react4.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     normalizedLayers.forEach((entry) => {
       index.set(String(entry.layerId), {
@@ -986,7 +1234,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     });
     return index;
   }, [normalizedLayers]);
-  const overlayStyleFunction = (0, import_react.useMemo)(() => {
+  const overlayStyleFunction = (0, import_react4.useMemo)(() => {
     return (feature) => {
       const featureLayerId = getFeatureLayerId(feature);
       const featureStyleOverrides = getFeatureStyleOverrides(feature);
@@ -1005,11 +1253,15 @@ var ZenitMap = (0, import_react.forwardRef)(({
       return defaultOptions;
     };
   }, [layerStyleIndex, mapLayers, overlayStyle]);
-  const [baseStates, setBaseStates] = (0, import_react.useState)([]);
-  const [mapOverrides, setMapOverrides] = (0, import_react.useState)([]);
-  const [controlOverrides, setControlOverrides] = (0, import_react.useState)([]);
-  const [uiOverrides, setUiOverrides] = (0, import_react.useState)([]);
-  (0, import_react.useEffect)(() => {
+  const overlayStyleFn = (0, import_react4.useCallback)(
+    (feature, _layerType, _baseOpacity) => overlayStyleFunction(feature),
+    [overlayStyleFunction]
+  );
+  const [baseStates, setBaseStates] = (0, import_react4.useState)([]);
+  const [mapOverrides, setMapOverrides] = (0, import_react4.useState)([]);
+  const [controlOverrides, setControlOverrides] = (0, import_react4.useState)([]);
+  const [uiOverrides, setUiOverrides] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
     let isMounted = true;
     setLoadingMap(true);
     setMapError(null);
@@ -1032,7 +1284,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
       isMounted = false;
     };
   }, [client.maps, mapId, onError, onLoadingChange]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (normalizedLayers.length === 0) {
       setLayers([]);
       setBaseStates([]);
@@ -1063,7 +1315,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     setMapOverrides(initialOverrides);
     setUiOverrides([]);
   }, [normalizedLayers]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!layerControls) {
       setControlOverrides([]);
       return;
@@ -1075,7 +1327,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     }));
     setControlOverrides(overrides);
   }, [layerControls]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (layerStates) {
       return;
     }
@@ -1085,12 +1337,12 @@ var ZenitMap = (0, import_react.forwardRef)(({
       onLayerStateChange?.(reset);
     }
   }, [baseStates, effectiveStates.length, layerControls, layerStates, onLayerStateChange]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (layerStates) {
       setEffectiveStates(layerStates);
     }
   }, [layerStates]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (layerStates) {
       return;
     }
@@ -1103,11 +1355,11 @@ var ZenitMap = (0, import_react.forwardRef)(({
     setEffectiveStates(next);
     onLayerStateChange?.(next);
   }, [baseStates, controlOverrides, layerStates, mapOverrides, onLayerStateChange, uiOverrides]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!Array.isArray(layerControls) || layerControls.length > 0) return;
     setUiOverrides([]);
   }, [layerControls]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (layerStates) {
       return;
     }
@@ -1127,18 +1379,13 @@ var ZenitMap = (0, import_react.forwardRef)(({
       return [...filtered, nextEntry];
     });
   };
-  const updateOpacityFromUi = (0, import_react.useCallback)(
+  const updateOpacityFromUi = (0, import_react4.useCallback)(
     (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
       );
@@ -1171,7 +1418,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     },
     [currentZoom, effectiveStates, layerMetaIndex, layerStates, onLayerStateChange]
   );
-  const center = (0, import_react.useMemo)(() => {
+  const center = (0, import_react4.useMemo)(() => {
     if (initialCenter) {
       return initialCenter;
     }
@@ -1182,36 +1429,30 @@ var ZenitMap = (0, import_react.forwardRef)(({
     return DEFAULT_CENTER;
   }, [initialCenter, map?.settings?.center]);
   const zoom = initialZoom ?? map?.settings?.zoom ?? DEFAULT_ZOOM;
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     setCurrentZoom(zoom);
   }, [zoom]);
-  const decoratedLayers = (0, import_react.useMemo)(() => {
+  const decoratedLayers = (0, import_react4.useMemo)(() => {
     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 = (0, import_react.useMemo)(() => {
+  const orderedLayers = (0, import_react4.useMemo)(() => {
     return [...decoratedLayers].filter((layer) => layer.effective?.visible && layer.data).sort((a, b) => a.displayOrder - b.displayOrder);
   }, [decoratedLayers]);
-  const explicitZoomBBox = (0, import_react.useMemo)(() => {
-    if (zoomToBbox) return zoomToBbox;
-    if (zoomToGeojson) return computeBBoxFromGeojson(zoomToGeojson);
-    return null;
-  }, [zoomToBbox, zoomToGeojson]);
-  const autoZoomBBox = (0, import_react.useMemo)(() => {
-    if (explicitZoomBBox) return null;
-    const visibleBBoxes = orderedLayers.map((layer) => computeBBoxFromGeojson(layer.data));
-    return mergeBBoxes(visibleBBoxes);
-  }, [explicitZoomBBox, orderedLayers]);
-  const resolveLayerStyle = (0, import_react.useCallback)(
+  const autoZoomGeojson = (0, import_react4.useMemo)(
+    () => orderedLayers.map((layer) => layer.data).filter((collection) => !!collection),
+    [orderedLayers]
+  );
+  const resolveLayerStyle = (0, import_react4.useCallback)(
     (layerId) => {
       return getStyleByLayerId(layerId, mapLayers) ?? layerStyleIndex.get(String(layerId)) ?? null;
     },
     [layerStyleIndex, mapLayers]
   );
-  const labelMarkers = (0, import_react.useMemo)(() => {
+  const labelMarkers = (0, import_react4.useMemo)(() => {
     const markers = [];
     decoratedLayers.forEach((layerState) => {
       if (!layerState.effective?.visible) return;
@@ -1221,7 +1462,14 @@ var ZenitMap = (0, import_react.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];
@@ -1240,26 +1488,24 @@ var ZenitMap = (0, import_react.forwardRef)(({
       });
     });
     return markers;
-  }, [decoratedLayers, labelKeyIndex, resolveLayerStyle]);
-  const ensureLayerPanes = (0, import_react.useCallback)(
+  }, [currentZoom, decoratedLayers, labelKeyIndex, layerMetaIndex, resolveLayerStyle]);
+  const ensureLayerPanes = (0, import_react4.useCallback)(
     (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 = (0, import_react.useCallback)(
+  const handleMapReady = (0, import_react4.useCallback)(
     (instance) => {
       setPanesReady(false);
       setMapInstance(instance);
@@ -1267,7 +1513,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     },
     [onMapReady]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!mapInstance) {
       setPanesReady(false);
       return;
@@ -1281,24 +1527,25 @@ var ZenitMap = (0, import_react.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 = (0, import_react.useMemo)(() => {
+  const overlayOnEachFeature = (0, import_react4.useMemo)(() => {
     return (feature, layer) => {
       const layerId = getFeatureLayerId(feature) ?? void 0;
       const geometryType = feature?.geometry?.type;
-      const isPointFeature = geometryType === "Point" || geometryType === "MultiPoint" || layer instanceof import_leaflet.default.CircleMarker;
-      const originalStyle = layer instanceof import_leaflet.default.Path ? {
+      const isPointFeature = geometryType === "Point" || geometryType === "MultiPoint" || layer instanceof import_leaflet4.default.CircleMarker;
+      const originalStyle = layer instanceof import_leaflet4.default.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 import_leaflet.default.CircleMarker ? layer.getRadius() : null;
+      const originalRadius = layer instanceof import_leaflet4.default.CircleMarker ? layer.getRadius() : null;
       if (featureInfoMode === "popup") {
         const content = buildFeaturePopupHtml(feature);
         if (content) {
@@ -1307,11 +1554,10 @@ var ZenitMap = (0, import_react.forwardRef)(({
             maxWidth,
             minWidth,
             maxHeight,
-            className: "zenit-leaflet-popup",
+            className: "custom-leaflet-popup",
             autoPan: true,
             closeButton: true,
-            keepInView: true,
-            offset: import_leaflet.default.point(0, -24)
+            keepInView: true
           });
         }
       }
@@ -1332,7 +1578,8 @@ var ZenitMap = (0, import_react.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 = {
@@ -1355,7 +1602,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
         onFeatureClick?.(feature, layerId);
       });
       layer.on("mouseover", () => {
-        if (layer instanceof import_leaflet.default.Path && originalStyle) {
+        if (layer instanceof import_leaflet4.default.Path && originalStyle) {
           layer.setStyle({
             ...originalStyle,
             weight: (originalStyle.weight ?? 2) + 1,
@@ -1363,16 +1610,16 @@ var ZenitMap = (0, import_react.forwardRef)(({
             fillOpacity: Math.min(1, (originalStyle.fillOpacity ?? 0.8) + 0.1)
           });
         }
-        if (layer instanceof import_leaflet.default.CircleMarker && typeof originalRadius === "number") {
+        if (layer instanceof import_leaflet4.default.CircleMarker && typeof originalRadius === "number") {
           layer.setRadius(originalRadius + 1);
         }
         onFeatureHover?.(feature, layerId);
       });
       layer.on("mouseout", () => {
-        if (layer instanceof import_leaflet.default.Path && originalStyle) {
+        if (layer instanceof import_leaflet4.default.Path && originalStyle) {
           layer.setStyle(originalStyle);
         }
-        if (layer instanceof import_leaflet.default.CircleMarker && typeof originalRadius === "number") {
+        if (layer instanceof import_leaflet4.default.CircleMarker && typeof originalRadius === "number") {
           layer.setRadius(originalRadius);
         }
       });
@@ -1384,80 +1631,20 @@ var ZenitMap = (0, import_react.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 = (0, import_react.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 import_leaflet.default.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>
-      `
-    });
-  }, []);
-  (0, import_react.useImperativeHandle)(ref, () => ({
+  (0, import_react4.useImperativeHandle)(ref, () => ({
     setLayerOpacity: (layerId, opacity) => {
       upsertUiOverride(layerId, { overrideOpacity: opacity });
     },
@@ -1507,10 +1694,10 @@ var ZenitMap = (0, import_react.forwardRef)(({
     getMapInstance: () => mapInstance
   }), [effectiveStates, mapInstance]);
   if (loadingMap) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, height, width }, children: "Cargando mapa..." });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { padding: 16, height, width }, children: "Cargando mapa..." });
   }
   if (mapError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, height, width, color: "red" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { padding: 16, height, width, color: "red" }, children: [
       "Error al cargar mapa: ",
       mapError
     ] });
@@ -1522,7 +1709,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
     setCurrentZoom(zoomValue);
     onZoomChange?.(zoomValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       style: {
@@ -1535,88 +1722,111 @@ var ZenitMap = (0, import_react.forwardRef)(({
         boxSizing: "border-box"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          import_react_leaflet.MapContainer,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
           {
-            center,
-            zoom,
-            style: { height: "100%", width: "100%" },
-            scrollWheelZoom: true,
-            zoomControl: false,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_react_leaflet.TileLayer,
-                {
-                  url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
-                  attribution: "\xA9 OpenStreetMap contributors"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_leaflet.ZoomControl, { position: "topright" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MapInstanceBridge, { onReady: handleMapReady }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FitToBounds, { bbox: explicitZoomBBox ?? void 0 }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AutoFitToBounds, { bbox: autoZoomBBox ?? void 0, enabled: !explicitZoomBBox }),
-              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_react.default.Fragment, { children: [
-                  fillData && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.GeoJSON,
+            className: `zenit-map-shell${isPopupOpen ? " popup-open" : ""}`,
+            style: { flex: 1, position: "relative" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+              import_react_leaflet4.MapContainer,
+              {
+                center,
+                zoom,
+                style: { height: "100%", width: "100%" },
+                scrollWheelZoom: true,
+                zoomControl: false,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_react_leaflet4.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__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.GeoJSON,
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_leaflet4.ZoomControl, { position: "topright" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MapInstanceBridge, { onReady: handleMapReady }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    BBoxZoomHandler,
                     {
-                      data: pointsData,
-                      pane: panesReady && mapInstance?.getPane(pointsPaneName) ? pointsPaneName : void 0,
-                      pointToLayer: (feature, latlng) => import_leaflet.default.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__ */ (0, import_jsx_runtime.jsx)(
-                    import_react_leaflet.Marker,
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ZoomBasedOpacityHandler, { onZoomChange: handleZoomChange }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(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__ */ (0, import_jsx_runtime3.jsxs)(import_react4.default.Fragment, { children: [
+                      layerState.data && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                        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__ */ (0, import_jsx_runtime3.jsx)(
+                        import_react_leaflet4.Marker,
+                        {
+                          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__ */ (0, import_jsx_runtime3.jsx)(
+                    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__ */ (0, import_jsx_runtime.jsx)(
-                import_react_leaflet.GeoJSON,
-                {
-                  data: overlayGeojson,
-                  style: overlayStyleFunction,
-                  onEachFeature: overlayOnEachFeature
-                },
-                "zenit-overlay-geojson"
-              )
-            ]
-          },
-          String(mapId)
-        ) }),
-        showLayerPanel && decoratedLayers.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
           {
             style: {
@@ -1629,7 +1839,7 @@ var ZenitMap = (0, import_react.forwardRef)(({
               overflowY: "auto"
             },
             children: [
-              overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              overlayGeojson && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
                   style: {
@@ -1641,8 +1851,8 @@ var ZenitMap = (0, import_react.forwardRef)(({
                     marginBottom: 12
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Overlay activo" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 13 }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Overlay activo" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { fontSize: 13 }, children: [
                       "GeoJSON externo con ",
                       (overlayGeojson.features?.length ?? 0).toLocaleString(),
                       " elementos."
@@ -1650,14 +1860,14 @@ var ZenitMap = (0, import_react.forwardRef)(({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Capas" }),
-              decoratedLayers.map((layerState) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { fontWeight: 600, marginBottom: 12 }, children: "Capas" }),
+              decoratedLayers.map((layerState) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
                   style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 10, marginBottom: 10 },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "input",
                         {
                           type: "checkbox",
@@ -1668,17 +1878,17 @@ var ZenitMap = (0, import_react.forwardRef)(({
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: layerState.layer?.name ?? `Capa ${layerState.mapLayer.layerId}` })
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: layerState.layer?.name ?? `Capa ${layerState.mapLayer.layerId}` })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 8 }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4 }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#4a5568" }, children: "Opacidad" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { marginTop: 8 }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 4 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { color: "#4a5568" }, children: "Opacidad" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                           Math.round((layerState.effective?.opacity ?? 1) * 100),
                           "%"
                         ] })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                         "input",
                         {
                           type: "range",
@@ -1708,13 +1918,13 @@ var ZenitMap = (0, import_react.forwardRef)(({
 ZenitMap.displayName = "ZenitMap";
 
 // src/react/ZenitLayerManager.tsx
-var import_react2 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/react/icons.tsx
 var import_lucide_react = require("lucide-react");
 
 // src/react/ZenitLayerManager.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var FLOAT_TOLERANCE = 1e-3;
 function areEffectiveStatesEqual(a, b) {
   if (a.length !== b.length) return false;
@@ -1754,15 +1964,15 @@ var ZenitLayerManager = ({
   layerFeatureCounts,
   mapLayers
 }) => {
-  const [map, setMap] = (0, import_react2.useState)(null);
-  const [loadingMap, setLoadingMap] = (0, import_react2.useState)(false);
-  const [mapError, setMapError] = (0, import_react2.useState)(null);
-  const [layers, setLayers] = (0, import_react2.useState)([]);
-  const [activeTab, setActiveTab] = (0, import_react2.useState)("layers");
-  const [panelVisible, setPanelVisible] = (0, import_react2.useState)(true);
-  const lastEmittedStatesRef = (0, import_react2.useRef)(null);
+  const [map, setMap] = (0, import_react5.useState)(null);
+  const [loadingMap, setLoadingMap] = (0, import_react5.useState)(false);
+  const [mapError, setMapError] = (0, import_react5.useState)(null);
+  const [layers, setLayers] = (0, import_react5.useState)([]);
+  const [activeTab, setActiveTab] = (0, import_react5.useState)("layers");
+  const [panelVisible, setPanelVisible] = (0, import_react5.useState)(true);
+  const lastEmittedStatesRef = (0, import_react5.useRef)(null);
   const isControlled = Array.isArray(layerStates) && typeof onLayerStatesChange === "function";
-  const baseStates = (0, import_react2.useMemo)(
+  const baseStates = (0, import_react5.useMemo)(
     () => initLayerStates(
       layers.map((entry) => ({
         ...entry.mapLayer,
@@ -1773,7 +1983,7 @@ var ZenitLayerManager = ({
     ),
     [layers]
   );
-  const overrideStates = (0, import_react2.useMemo)(
+  const overrideStates = (0, import_react5.useMemo)(
     () => layers.map(
       (entry) => ({
         layerId: entry.mapLayer.layerId,
@@ -1783,11 +1993,11 @@ var ZenitLayerManager = ({
     ),
     [layers]
   );
-  const effectiveStates = (0, import_react2.useMemo)(
+  const effectiveStates = (0, import_react5.useMemo)(
     () => layerStates ?? applyLayerOverrides(baseStates, overrideStates),
     [baseStates, layerStates, overrideStates]
   );
-  const layerMetaIndex = (0, import_react2.useMemo)(() => {
+  const layerMetaIndex = (0, import_react5.useMemo)(() => {
     const index = /* @__PURE__ */ new Map();
     mapLayers?.forEach((entry) => {
       const key = String(entry.layerId);
@@ -1801,7 +2011,7 @@ var ZenitLayerManager = ({
     });
     return index;
   }, [map, mapLayers]);
-  const resolveUserOpacity = import_react2.default.useCallback((state) => {
+  const resolveUserOpacity = import_react5.default.useCallback((state) => {
     if (typeof state.overrideOpacity === "number") return state.overrideOpacity;
     if (typeof state.overrideOpacity === "string") {
       const parsed = Number.parseFloat(state.overrideOpacity);
@@ -1809,7 +2019,7 @@ var ZenitLayerManager = ({
     }
     return state.opacity ?? 1;
   }, []);
-  const resolveEffectiveOpacity = import_react2.default.useCallback(
+  const resolveEffectiveOpacity = import_react5.default.useCallback(
     (layerId, userOpacity) => {
       if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
         return userOpacity;
@@ -1825,7 +2035,7 @@ var ZenitLayerManager = ({
     },
     [autoOpacityConfig, autoOpacityOnZoom, layerMetaIndex, mapZoom]
   );
-  const effectiveStatesWithZoom = (0, import_react2.useMemo)(() => {
+  const effectiveStatesWithZoom = (0, import_react5.useMemo)(() => {
     if (!autoOpacityOnZoom || typeof mapZoom !== "number") {
       return effectiveStates;
     }
@@ -1839,7 +2049,7 @@ var ZenitLayerManager = ({
       };
     });
   }, [autoOpacityOnZoom, effectiveStates, mapZoom, resolveEffectiveOpacity, resolveUserOpacity]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     let cancelled = false;
     setLoadingMap(true);
     setMapError(null);
@@ -1871,12 +2081,12 @@ var ZenitLayerManager = ({
       cancelled = true;
     };
   }, [client.maps, mapId]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!showUploadTab && activeTab === "upload") {
       setActiveTab("layers");
     }
   }, [activeTab, showUploadTab]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (isControlled) return;
     if (!onLayerStatesChange) return;
     const emitStates = autoOpacityOnZoom && typeof mapZoom === "number" ? effectiveStatesWithZoom : effectiveStates;
@@ -1894,7 +2104,7 @@ var ZenitLayerManager = ({
     mapZoom,
     onLayerStatesChange
   ]);
-  const updateLayerVisible = import_react2.default.useCallback(
+  const updateLayerVisible = import_react5.default.useCallback(
     (layerId, visible) => {
       if (!onLayerStatesChange) return;
       const next = effectiveStates.map(
@@ -1904,7 +2114,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange]
   );
-  const updateLayerOpacity = import_react2.default.useCallback(
+  const updateLayerOpacity = import_react5.default.useCallback(
     (layerId, opacity) => {
       if (!onLayerStatesChange) return;
       const adjustedOpacity = resolveEffectiveOpacity(layerId, opacity);
@@ -1915,7 +2125,7 @@ var ZenitLayerManager = ({
     },
     [effectiveStates, onLayerStatesChange, resolveEffectiveOpacity]
   );
-  const resolveFeatureCount = import_react2.default.useCallback(
+  const resolveFeatureCount = import_react5.default.useCallback(
     (layerId, layer) => {
       const resolvedFeatureCount = layerFeatureCounts?.[layerId] ?? layerFeatureCounts?.[String(layerId)];
       if (typeof resolvedFeatureCount === "number") return resolvedFeatureCount;
@@ -1924,7 +2134,7 @@ var ZenitLayerManager = ({
     },
     [layerFeatureCounts]
   );
-  const decoratedLayers = (0, import_react2.useMemo)(() => {
+  const decoratedLayers = (0, import_react5.useMemo)(() => {
     return layers.map((entry) => ({
       ...entry,
       effective: effectiveStates.find((state) => state.layerId === entry.mapLayer.layerId),
@@ -1953,7 +2163,7 @@ var ZenitLayerManager = ({
       return String(a.mapLayer.layerId).localeCompare(String(b.mapLayer.layerId));
     });
   }, [effectiveStates, layers, resolveFeatureCount]);
-  const resolveLayerStyle = import_react2.default.useCallback(
+  const resolveLayerStyle = import_react5.default.useCallback(
     (layerId) => {
       const layerKey = String(layerId);
       const fromProp = mapLayers?.find((entry) => String(entry.layerId) === layerKey)?.style;
@@ -1983,10 +2193,10 @@ var ZenitLayerManager = ({
     ...height ? { height } : {}
   };
   if (loadingMap) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: panelStyle, children: "Cargando capas\u2026" });
   }
   if (mapError) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className, style: { ...panelStyle, color: "#c53030" }, children: [
       "Error al cargar mapa: ",
       mapError
     ] });
@@ -2004,7 +2214,7 @@ var ZenitLayerManager = ({
     boxShadow: "0 1px 0 rgba(148, 163, 184, 0.25)"
   };
   const renderLayerCards = () => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: decoratedLayers.map((layerState) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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;
@@ -2014,7 +2224,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__ */ (0, import_jsx_runtime2.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           className: `zlm-card${muted ? " is-muted" : ""}`,
@@ -2029,9 +2239,9 @@ var ZenitLayerManager = ({
             width: "100%"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: 10, alignItems: "flex-start", minWidth: 0, flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "div",
                   {
                     style: {
@@ -2046,7 +2256,7 @@ var ZenitLayerManager = ({
                     title: "Color de la capa"
                   }
                 ),
-                showLayerVisibilityIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                showLayerVisibilityIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "button",
                   {
                     type: "button",
@@ -2057,11 +2267,11 @@ var ZenitLayerManager = ({
                       )
                     ),
                     "aria-label": visible ? "Ocultar capa" : "Mostrar capa",
-                    children: visible ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeOff, { size: 16 })
+                    children: visible ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Eye, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.EyeOff, { size: 16 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                     "div",
                     {
                       className: "zlm-layer-name",
@@ -2079,26 +2289,26 @@ var ZenitLayerManager = ({
                       children: layerName
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: muted ? "#94a3b8" : "#64748b", fontSize: 12 }, children: [
                     "ID ",
                     layerId
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "zlm-badge", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", alignItems: "flex-start", gap: 6, flexShrink: 0 }, children: typeof featureCount === "number" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "zlm-badge", children: [
                 featureCount.toLocaleString(),
                 " features"
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Opacidad" }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 6, color: "#64748b", fontSize: 12 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Opacidad" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
                   opacityPercent,
                   "%"
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "input",
                 {
                   className: "zlm-range",
@@ -2136,8 +2346,8 @@ var ZenitLayerManager = ({
       );
     }) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: `
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: ["zenit-layer-manager", className].filter(Boolean).join(" "), style: panelStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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);
@@ -2232,16 +2442,16 @@ var ZenitLayerManager = ({
             outline-offset: 2px;
           }
         ` }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { color: "#64748b", fontSize: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: headerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { fontWeight: 800, fontSize: 16, color: "#0f172a" }, children: "Gesti\xF3n de Capas" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { color: "#64748b", fontSize: 12 }, children: [
             "Mapa #",
             map.id
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "button",
           {
             type: "button",
@@ -2249,13 +2459,13 @@ var ZenitLayerManager = ({
             className: "zlm-panel-toggle",
             "aria-label": panelVisible ? "Ocultar panel de capas" : "Mostrar panel de capas",
             children: [
-              panelVisible ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Eye, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.EyeOff, { size: 16 }),
+              panelVisible ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Eye, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.EyeOff, { size: 16 }),
               panelVisible ? "Ocultar" : "Mostrar"
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           style: {
@@ -2268,26 +2478,26 @@ var ZenitLayerManager = ({
             background: "#f1f5f9"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "layers" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("layers"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Layers, { size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Layers, { size: 16 }),
                   "Capas"
                 ]
               }
             ),
-            showUploadTab && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            showUploadTab && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "button",
               {
                 type: "button",
                 className: `zlm-tab${activeTab === "upload" ? " is-active" : ""}`,
                 onClick: () => setActiveTab("upload"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Upload, { size: 16 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.Upload, { size: 16 }),
                   "Subir"
                 ]
               }
@@ -2296,15 +2506,15 @@ var ZenitLayerManager = ({
         }
       )
     ] }),
-    panelVisible && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
+    panelVisible && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { padding: "12px 10px 18px", overflowY: "auto", flex: 1, minHeight: 0 }, children: [
       activeTab === "layers" && renderLayerCards(),
-      showUploadTab && activeTab === "upload" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
+      showUploadTab && activeTab === "upload" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { color: "#475569", fontSize: 13 }, children: "Pr\xF3ximamente podr\xE1s subir capas desde este panel." })
     ] })
   ] });
 };
 
 // src/react/ZenitFeatureFilterPanel.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ZenitFeatureFilterPanel = ({
   title = "Filtros",
   description,
@@ -2312,7 +2522,7 @@ var ZenitFeatureFilterPanel = ({
   style,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "section",
     {
       className,
@@ -2325,22 +2535,22 @@ var ZenitFeatureFilterPanel = ({
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { style: { marginBottom: 12 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { style: { marginBottom: 12 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: { margin: 0, fontSize: 16 }, children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { margin: "6px 0 0", color: "#475569", fontSize: 13 }, children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { children })
       ]
     }
   );
 };
 
 // src/react/ai/FloatingChatBox.tsx
-var import_react4 = require("react");
-var import_react_dom = require("react-dom");
+var import_react7 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/react/hooks/use-chat.ts
-var import_react3 = require("react");
+var import_react6 = require("react");
 
 // src/ai/chat.service.ts
 var DEFAULT_ERROR_MESSAGE = "No fue posible completar la solicitud al asistente.";
@@ -2472,9 +2682,9 @@ var sendMessageStream = async (mapId, request, callbacks = {}, options, config)
 
 // src/react/hooks/use-chat.ts
 var useSendMessage = (config) => {
-  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const send = (0, import_react3.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const send = (0, import_react6.useCallback)(
     async (mapId, request, options) => {
       setIsLoading(true);
       setError(null);
@@ -2492,18 +2702,18 @@ var useSendMessage = (config) => {
   return { sendMessage: send, isLoading, error };
 };
 var useSendMessageStream = (config) => {
-  const [isStreaming, setIsStreaming] = (0, import_react3.useState)(false);
-  const [streamingText, setStreamingText] = (0, import_react3.useState)("");
-  const [completeResponse, setCompleteResponse] = (0, import_react3.useState)(null);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const requestIdRef = (0, import_react3.useRef)(0);
-  const reset = (0, import_react3.useCallback)(() => {
+  const [isStreaming, setIsStreaming] = (0, import_react6.useState)(false);
+  const [streamingText, setStreamingText] = (0, import_react6.useState)("");
+  const [completeResponse, setCompleteResponse] = (0, import_react6.useState)(null);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const requestIdRef = (0, import_react6.useRef)(0);
+  const reset = (0, import_react6.useCallback)(() => {
     setIsStreaming(false);
     setStreamingText("");
     setCompleteResponse(null);
     setError(null);
   }, []);
-  const send = (0, import_react3.useCallback)(
+  const send = (0, import_react6.useCallback)(
     async (mapId, request, options) => {
       const requestId = requestIdRef.current + 1;
       requestIdRef.current = requestId;
@@ -2557,7 +2767,7 @@ var useSendMessageStream = (config) => {
 // src/react/components/MarkdownRenderer.tsx
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function normalizeAssistantMarkdown(text) {
   if (!text || typeof text !== "string") return "";
   let normalized = text;
@@ -2573,28 +2783,28 @@ var MarkdownRenderer = ({ content, className }) => {
   if (!normalizedContent) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: { wordBreak: "break-word" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default],
       components: {
         // Headings with proper spacing
-        h1: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
-        h2: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
-        h3: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
-        h4: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
-        h5: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
-        h6: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
+        h1: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { style: { fontSize: "1.5em", fontWeight: 700, marginTop: "1em", marginBottom: "0.5em" }, ...props, children }),
+        h2: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h2", { style: { fontSize: "1.3em", fontWeight: 700, marginTop: "0.9em", marginBottom: "0.45em" }, ...props, children }),
+        h3: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { style: { fontSize: "1.15em", fontWeight: 600, marginTop: "0.75em", marginBottom: "0.4em" }, ...props, children }),
+        h4: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { style: { fontSize: "1.05em", fontWeight: 600, marginTop: "0.6em", marginBottom: "0.35em" }, ...props, children }),
+        h5: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h5", { style: { fontSize: "1em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
+        h6: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h6", { style: { fontSize: "0.95em", fontWeight: 600, marginTop: "0.5em", marginBottom: "0.3em" }, ...props, children }),
         // Paragraphs with comfortable line height
-        p: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
+        p: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { marginTop: "0.5em", marginBottom: "0.5em", lineHeight: 1.6 }, ...props, children }),
         // Lists with proper indentation
-        ul: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
-        ol: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
-        li: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
+        ul: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
+        ol: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ol", { style: { paddingLeft: "1.5em", marginTop: "0.5em", marginBottom: "0.5em" }, ...props, children }),
+        li: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { style: { marginTop: "0.25em", marginBottom: "0.25em" }, ...props, children }),
         // Code blocks
         code: ({ inline, children, ...props }) => {
           if (inline) {
-            return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "code",
               {
                 style: {
@@ -2609,7 +2819,7 @@ var MarkdownRenderer = ({ content, className }) => {
               }
             );
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "code",
             {
               style: {
@@ -2629,9 +2839,9 @@ var MarkdownRenderer = ({ content, className }) => {
           );
         },
         // Pre (code block wrapper)
-        pre: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("pre", { style: { margin: 0 }, ...props, children }),
+        pre: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("pre", { style: { margin: 0 }, ...props, children }),
         // Blockquotes
-        blockquote: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        blockquote: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "blockquote",
           {
             style: {
@@ -2647,11 +2857,11 @@ var MarkdownRenderer = ({ content, className }) => {
           }
         ),
         // Strong/bold
-        strong: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { style: { fontWeight: 600 }, ...props, children }),
+        strong: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { style: { fontWeight: 600 }, ...props, children }),
         // Emphasis/italic
-        em: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("em", { style: { fontStyle: "italic" }, ...props, children }),
+        em: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("em", { style: { fontStyle: "italic" }, ...props, children }),
         // Horizontal rule
-        hr: (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        hr: (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "hr",
           {
             style: {
@@ -2664,7 +2874,7 @@ var MarkdownRenderer = ({ content, className }) => {
           }
         ),
         // Tables (GFM)
-        table: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        table: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: { overflowX: "auto", marginTop: "0.5em", marginBottom: "0.5em" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "table",
           {
             style: {
@@ -2676,7 +2886,7 @@ var MarkdownRenderer = ({ content, className }) => {
             children
           }
         ) }),
-        th: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        th: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "th",
           {
             style: {
@@ -2690,7 +2900,7 @@ var MarkdownRenderer = ({ content, className }) => {
             children
           }
         ),
-        td: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        td: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "td",
           {
             style: {
@@ -2708,32 +2918,32 @@ var MarkdownRenderer = ({ content, className }) => {
 };
 
 // src/react/ai/FloatingChatBox.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var ChatIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ChatIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "15 3 21 3 21 9" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "9 21 3 21 3 15" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "4 14 10 14 10 20" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "20 10 14 10 14 4" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "4 14 10 14 10 20" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "20 10 14 10 14 4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
 ] });
-var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
+var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
 ] });
-var LayersIcon = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "2 17 12 22 22 17" }),
-  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("polyline", { points: "2 12 12 17 22 12" })
+var LayersIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "2 12 12 17 22 12" })
 ] });
 var styles = {
   root: {
@@ -2742,8 +2952,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",
@@ -2753,30 +2963,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)",
@@ -2787,16 +2997,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",
@@ -2805,7 +3015,7 @@ var styles = {
   },
   title: {
     margin: 0,
-    fontSize: 16,
+    fontSize: 15,
     fontWeight: 600,
     letterSpacing: "-0.01em"
   },
@@ -2818,8 +3028,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",
@@ -2830,7 +3040,7 @@ var styles = {
   // Messages area
   messages: {
     flex: 1,
-    padding: "20px 18px",
+    padding: "16px",
     overflowY: "auto",
     background: "#f8fafc",
     display: "flex",
@@ -2845,10 +3055,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"
   },
@@ -2962,7 +3172,7 @@ var styles = {
   // Input area
   inputWrapper: {
     borderTop: "1px solid #e2e8f0",
-    padding: "14px 16px",
+    padding: "10px 14px",
     display: "flex",
     gap: 10,
     alignItems: "flex-end",
@@ -2973,8 +3183,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"
@@ -2986,18 +3196,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: {
@@ -3027,42 +3237,42 @@ var FloatingChatBox = ({
   open: openProp
 }) => {
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
+  const [internalOpen, setInternalOpen] = (0, import_react7.useState)(false);
   const open = isControlled ? openProp : internalOpen;
-  const setOpen = (0, import_react4.useCallback)((value) => {
+  const setOpen = (0, import_react7.useCallback)((value) => {
     const newValue = typeof value === "function" ? value(open) : value;
     if (!isControlled) {
       setInternalOpen(newValue);
     }
     onOpenChange?.(newValue);
   }, [isControlled, open, onOpenChange]);
-  const [expanded, setExpanded] = (0, import_react4.useState)(false);
-  const [messages, setMessages] = (0, import_react4.useState)([]);
-  const [inputValue, setInputValue] = (0, import_react4.useState)("");
-  const [conversationId, setConversationId] = (0, import_react4.useState)();
-  const [errorMessage, setErrorMessage] = (0, import_react4.useState)(null);
-  const [isFocused, setIsFocused] = (0, import_react4.useState)(false);
-  const [isMobile, setIsMobile] = (0, import_react4.useState)(false);
-  const messagesEndRef = (0, import_react4.useRef)(null);
-  const messagesContainerRef = (0, import_react4.useRef)(null);
-  const chatBoxRef = (0, import_react4.useRef)(null);
-  const chatConfig = (0, import_react4.useMemo)(() => {
+  const [expanded, setExpanded] = (0, import_react7.useState)(false);
+  const [messages, setMessages] = (0, import_react7.useState)([]);
+  const [inputValue, setInputValue] = (0, import_react7.useState)("");
+  const [conversationId, setConversationId] = (0, import_react7.useState)();
+  const [errorMessage, setErrorMessage] = (0, import_react7.useState)(null);
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const [isMobile, setIsMobile] = (0, import_react7.useState)(false);
+  const messagesEndRef = (0, import_react7.useRef)(null);
+  const messagesContainerRef = (0, import_react7.useRef)(null);
+  const chatBoxRef = (0, import_react7.useRef)(null);
+  const chatConfig = (0, import_react7.useMemo)(() => {
     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;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (open && isMobile) {
       setExpanded(true);
     }
   }, [open, isMobile]);
-  const scrollToBottom = (0, import_react4.useCallback)(() => {
+  const scrollToBottom = (0, import_react7.useCallback)(() => {
     if (messagesEndRef.current) {
       messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
     }
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (open && messages.length === 0) {
       setMessages([
         {
@@ -3073,10 +3283,10 @@ var FloatingChatBox = ({
       ]);
     }
   }, [open, messages.length]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     scrollToBottom();
   }, [messages, streamingText, scrollToBottom]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open) return;
     if (isMobile && expanded) return;
     const handleClickOutside = (event) => {
@@ -3089,7 +3299,7 @@ var FloatingChatBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [open, isMobile, expanded]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQuery = window.matchMedia("(max-width: 768px)");
     const updateMobile = () => setIsMobile(mediaQuery.matches);
@@ -3107,7 +3317,7 @@ var FloatingChatBox = ({
       }
     };
   }, []);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (typeof document === "undefined") return;
     if (!open || !isMobile) return;
     document.body.style.overflow = "hidden";
@@ -3115,10 +3325,10 @@ var FloatingChatBox = ({
       document.body.style.overflow = "";
     };
   }, [open, isMobile]);
-  const addMessage = (0, import_react4.useCallback)((message) => {
+  const addMessage = (0, import_react7.useCallback)((message) => {
     setMessages((prev) => [...prev, message]);
   }, []);
-  const handleSend = (0, import_react4.useCallback)(async () => {
+  const handleSend = (0, import_react7.useCallback)(async () => {
     if (!mapId) {
       setErrorMessage("Selecciona un mapa para usar el asistente.");
       return;
@@ -3153,11 +3363,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."
       });
     }
   }, [
@@ -3171,7 +3381,7 @@ var FloatingChatBox = ({
     sendMessage2,
     userId
   ]);
-  const handleKeyDown = (0, import_react4.useCallback)(
+  const handleKeyDown = (0, import_react7.useCallback)(
     (event) => {
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
@@ -3182,20 +3392,20 @@ var FloatingChatBox = ({
     },
     [canSend, handleSend]
   );
-  const handleFollowUpClick = (0, import_react4.useCallback)((question) => {
+  const handleFollowUpClick = (0, import_react7.useCallback)((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__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.metadataSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.metadataTitle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LayersIcon, {}),
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.metadataSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.metadataTitle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LayersIcon, {}),
         "Capas Analizadas"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { style: styles.metadataItem, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: layer.layerName }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { style: styles.metadataList, children: referencedLayers.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { style: styles.metadataItem, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: layer.layerName }),
         " (",
         layer.featureCount,
         " ",
@@ -3204,7 +3414,7 @@ var FloatingChatBox = ({
       ] }, index)) })
     ] });
   };
-  const handleActionClick = (0, import_react4.useCallback)((action) => {
+  const handleActionClick = (0, import_react7.useCallback)((action) => {
     if (isStreaming) return;
     setOpen(false);
     requestAnimationFrame(() => {
@@ -3213,9 +3423,9 @@ var FloatingChatBox = ({
   }, [isStreaming, setOpen, onActionClick]);
   const renderActions = (response) => {
     if (!response?.suggestedActions?.length) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.actionsSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.actionsSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.sectionLabel, children: "Acciones Sugeridas" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.actionsGrid, children: response.suggestedActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -3246,9 +3456,9 @@ var FloatingChatBox = ({
   };
   const renderFollowUps = (response) => {
     if (!response?.followUpQuestions?.length) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.actionsSection, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.actionsSection, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.sectionLabel, children: "Preguntas Relacionadas" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: response.followUpQuestions.map((question, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "button",
         {
           type: "button",
@@ -3277,8 +3487,8 @@ var FloatingChatBox = ({
       )) })
     ] });
   };
-  const chatContent = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("style", { children: `
+  const chatContent = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: `
         @keyframes zenitBlink {
           0%, 49% { opacity: 1; }
           50%, 100% { opacity: 0; }
@@ -3321,11 +3531,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;
@@ -3348,7 +3560,7 @@ var FloatingChatBox = ({
           }
         }
       ` }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         ref: chatBoxRef,
@@ -3358,10 +3570,10 @@ var FloatingChatBox = ({
           ...expanded ? styles.panelExpanded : styles.panelNormal
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("header", { style: styles.header, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: styles.title, children: "Asistente Zenit AI" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.headerButtons, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("header", { style: styles.header, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: styles.title, children: "Asistente Zenit AI" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.headerButtons, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3374,10 +3586,10 @@ var FloatingChatBox = ({
                     e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
                   },
                   "aria-label": expanded ? "Contraer" : "Expandir",
-                  children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandIcon, {})
+                  children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ExpandIcon, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "button",
                 {
                   type: "button",
@@ -3390,20 +3602,20 @@ var FloatingChatBox = ({
                     e.currentTarget.style.background = "rgba(255, 255, 255, 0.15)";
                   },
                   "aria-label": "Cerrar",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {})
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
-            messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: messagesContainerRef, className: "zenit-ai-body", style: styles.messages, children: [
+            messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 style: {
                   ...styles.messageWrapper,
                   alignItems: message.role === "user" ? "flex-end" : "flex-start"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "div",
                   {
                     style: {
@@ -3411,7 +3623,7 @@ var FloatingChatBox = ({
                       ...message.role === "user" ? styles.userMessage : styles.assistantMessage
                     },
                     children: [
-                      message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { content: message.content }) : message.content,
+                      message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownRenderer, { content: message.content }) : message.content,
                       message.role === "assistant" && renderMetadata(message.response),
                       message.role === "assistant" && renderActions(message.response),
                       message.role === "assistant" && renderFollowUps(message.response)
@@ -3421,39 +3633,39 @@ var FloatingChatBox = ({
               },
               message.id
             )),
-            isStreaming && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            isStreaming && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 style: {
                   ...styles.messageWrapper,
                   alignItems: "flex-start"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     style: {
                       ...styles.messageBubble,
                       ...styles.assistantMessage
                     },
-                    children: streamingText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MarkdownRenderer, { content: streamingText }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles.cursor })
-                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.thinkingText, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Analizando" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles.typingIndicator, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot }),
-                        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot })
+                    children: streamingText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MarkdownRenderer, { content: streamingText }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: styles.cursor })
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.thinkingText, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Pensando" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: styles.typingIndicator, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "zenit-typing-dot", style: styles.typingDot })
                       ] })
                     ] })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: messagesEndRef })
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: messagesEndRef })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "zenit-ai-input-area", style: styles.inputWrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "textarea",
               {
                 style: {
@@ -3470,7 +3682,7 @@ var FloatingChatBox = ({
                 disabled: !mapId || !baseUrl || isStreaming
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "button",
               {
                 type: "button",
@@ -3479,36 +3691,38 @@ var FloatingChatBox = ({
                 onClick: () => void handleSend(),
                 disabled: !canSend,
                 "aria-label": "Enviar mensaje",
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SendIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SendIcon, {})
               }
             )
           ] }),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.errorText, children: errorMessage }),
-          !mapId && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
-          !baseUrl && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.errorText, children: errorMessage }),
+          isStreaming && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.statusNote, children: "Generando sugerencias..." }),
+          !mapId && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.statusNote, children: "Selecciona un mapa para usar el asistente" }),
+          !baseUrl && !errorMessage && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: styles.statusNote, children: "Configura la baseUrl del SDK" })
         ]
       }
     ),
-    !(hideButton && !open) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    !(hideButton && !open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "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__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ChatIcon, {}),
-          !isMobile && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Asistente IA" })
+        children: open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CloseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatIcon, {}),
+          !isMobile && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "Asistente IA" })
         ] })
       }
     )
   ] });
   if (typeof document !== "undefined") {
-    return (0, import_react_dom.createPortal)(chatContent, document.body);
+    return (0, import_react_dom2.createPortal)(chatContent, document.body);
   }
   return chatContent;
 };