diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
index 951783c..8fffb6a 100644
--- a/resources/js/Components/Dashboard/Maps.vue
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -1,12 +1,9 @@
 <script setup>
-import { ref, reactive, onMounted, computed, watch } from "vue";
+import { ref, reactive, onMounted, onUnmounted, computed, watch } from "vue";
 import { Loader } from "@googlemaps/js-api-loader";
 
 const props = defineProps({
-  counters: {
-    type: Object,
-    required: true,
-  },
+  counters: { type: Object, required: true },
 });
 
 const mapContainer = ref(null);
@@ -15,585 +12,327 @@ const error = ref(null);
 const map = ref(null);
 const markers = ref([]);
 const geocoder = ref(null);
+const isMounted = ref(false);
 
-// Filtros activos
 const filters = reactive({
   sin_avances: true,
   abiertas: true,
   finalizadas: true,
 });
 
-// Configuración de colores por estado
-const markerColors = {
-  sin_avances: "#EF4444", // Rojo
-  abiertas: "#F59E0B", // Amarillo
-  finalizadas: "#10B981", // Verde
-};
-
-// Estadísticas de procesamiento
-const processingStats = ref({
-  total: 0,
-  successful: 0,
-  failed: 0,
-  outOfBounds: 0,
-});
-
-// Contador de marcadores visibles
-const visibleMarkersCount = computed(() => {
-  return markers.value.filter((marker) => marker.visible).length;
-});
-
-// Coordenadas del centro de Comalcalco, Tabasco
-const COMALCALCO_CENTER = {
-  lat: 18.26,
-  lng: -93.25,
-};
-
-// Límites expandidos de Tabasco (más amplios para capturar todas las obras)
-const TABASCO_BOUNDS = {
-  north: 18.7, // Expandido hacia el norte
-  south: 17.3, // Expandido hacia el sur
-  east: -92.0, // Expandido hacia el este
-  west: -94.7, // Expandido hacia el oeste
-};
-
-// Cache para geocodificación (evitar llamadas duplicadas)
-const geocodingCache = new Map();
-
-const searchQuery = ref('');
+const searchQuery = ref("");
 const searchResults = ref([]);
 const showSearchResults = ref(false);
 const searchLoading = ref(false);
 
-const searchAddresses = async () => {
-  if (!searchQuery.value.trim()) {
-    searchResults.value = [];
-    showSearchResults.value = false;
-    return;
-  }
+const geocodingCache = new Map();
+const failedGeocodings = ref([]);
 
-  searchLoading.value = true;
-  const query = searchQuery.value.toLowerCase();
+const markerColors = {
+  sin_avances: "#EF4444",
+  abiertas: "#F59E0B",
+  finalizadas: "#10B981",
+};
+const COMALCALCO_CENTER = { lat: 18.26, lng: -93.25 };
 
-  // Buscar en las obras existentes
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map((obra) => ({
-      ...obra,
-      estado: "sin_avances",
-    })),
-    ...props.counters.abiertas.detalles.map((obra) => ({
-      ...obra,
-      estado: "abiertas",
-    })),
-    ...props.counters.finalizadas.detalles.map((obra) => ({
-      ...obra,
-      estado: "finalizadas",
-    })),
-  ];
-
-  // Filtrar obras que coincidan con la búsqueda
-  const matches = allObras.filter(obra =>
-    obra.direccion_obra?.toLowerCase().includes(query) ||
-    obra.num_proyecto?.toLowerCase().includes(query)
-  );
-
-  searchResults.value = matches.slice(0, 10); // Limitar a 10 resultados
-  showSearchResults.value = true;
-  searchLoading.value = false;
+const COMALCALCO_BOUNDS = {
+  south: 18.1,
+  west: -93.4,
+  north: 18.4,
+  east: -93.0,
 };
 
-//Función para ir a una obra específica
-const goToObra = async (obra) => {
-  searchQuery.value = '';
-  searchResults.value = [];
-  showSearchResults.value = false;
+const visibleMarkersCount = computed(
+  () => markers.value.filter((m) => m.visible).length
+);
 
-  // Buscar el marcador correspondiente
-  const markerData = markers.value.find(m =>
-    m.obras.some(o =>
-      o.num_proyecto === obra.num_proyecto &&
-      o.direccion_obra === obra.direccion_obra
-    )
-  );
+onMounted(() => {
+  isMounted.value = true;
+  initMap();
+});
 
-  if (markerData) {
-    // Centrar el mapa en el marcador
-    map.value.setCenter(markerData.marker.getPosition());
-    map.value.setZoom(16);
+onUnmounted(() => {
+  isMounted.value = false;
+});
 
-    // Abrir el InfoWindow
-    markers.value.forEach((m) => m.infoWindow?.close());
-    markerData.infoWindow.open(map.value, markerData.marker);
-  }
-};
-
-// Limpiar resultados de búsqueda
-const clearSearch = () => {
-  searchQuery.value = '';
-  searchResults.value = [];
-  showSearchResults.value = false;
-};
+watch(
+  () => props.counters,
+  () => {
+    if (map.value && geocoder.value) {
+      loadMarkers();
+    }
+  },
+  { deep: true }
+);
 
 const initMap = async () => {
   loading.value = true;
   error.value = null;
-
   try {
     const loader = new Loader({
       apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
       version: "weekly",
+      // Usar solo librerías básicas por compatibilidad
       libraries: ["places", "geometry"],
     });
+    window.google = await loader.load();
 
-    const google = await loader.load();
+    if (!isMounted.value) return;
 
-    if (!google.maps) {
-      throw new Error("Google Maps no se cargó correctamente");
-    }
-
-    // Inicializar el mapa con zoom más amplio
     map.value = new google.maps.Map(mapContainer.value, {
       center: COMALCALCO_CENTER,
-      zoom: 11, // Zoom más amplio para ver toda la región
-      restriction: {
-        latLngBounds: TABASCO_BOUNDS,
-        strictBounds: false,
-      },
+      zoom: 11,
+      // Mantener mapId pero para funcionalidad futura
+      mapId: "OBRAS_MAP_COMALCALCO",
       mapTypeControl: true,
       streetViewControl: true,
       fullscreenControl: true,
       zoomControl: true,
+      // Estilos mejorados
+      styles: [
+        {
+          featureType: "poi",
+          elementType: "labels.icon",
+          stylers: [{ visibility: "off" }],
+        },
+        {
+          featureType: "transit",
+          elementType: "labels.icon",
+          stylers: [{ visibility: "off" }],
+        },
+      ],
     });
-
     geocoder.value = new google.maps.Geocoder();
-
     await loadMarkers();
   } catch (err) {
-    console.error("Error loading Google Maps:", err);
+    if (!isMounted.value) return;
+    console.error("Error loading map:", err);
     error.value = err.message || "Error al cargar Google Maps";
   } finally {
-    loading.value = false;
+    if (isMounted.value) loading.value = false;
   }
 };
 
 const loadMarkers = async () => {
-  if (!map.value || !geocoder.value) return;
-
-  // Limpiar marcadores existentes
+  if (!map.value || !geocoder.value || !isMounted.value) return;
+  loading.value = true;
   clearMarkers();
+  failedGeocodings.value = [];
 
-  // Resetear estadísticas
-  processingStats.value = {
-    total: 0,
-    successful: 0,
-    failed: 0,
-    outOfBounds: 0,
-    duplicates: 0,
-  };
+  const allObras = getAllObras();
+  console.log("Total obras a procesar:", allObras.length);
 
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map((obra) => ({
-      ...obra,
-      estado: "sin_avances",
-    })),
-    ...props.counters.abiertas.detalles.map((obra) => ({
-      ...obra,
-      estado: "abiertas",
-    })),
-    ...props.counters.finalizadas.detalles.map((obra) => ({
-      ...obra,
-      estado: "finalizadas",
-    })),
-  ];
-
-  processingStats.value.total = allObras.length;
-
-  console.table(
-    allObras.map((obra) => ({
-      proyecto: obra.num_proyecto,
-      direccion: obra.direccion_obra,
-      estado: obra.estado,
-    }))
-  );
-
-  // Agrupar obras por grupo
-  const obrasPorGrupo = new Map();
-  allObras.forEach(obra => {
-    const clave = `${obra.direccion_obra}|${obra.estado}`;
-    if(!obrasPorGrupo.has(clave)){
-      obrasPorGrupo.set(clave, {
-        direccion: obra.direccion_obra,
-        estado: obra.estado,
-        obras: []
-      });
-    }
-    obrasPorGrupo.get(clave).obras.push(obra);
-  });
-
-  processingStats.value.total = allObras.length;
-
-  // Procesar grupos de obras por dirección en lotes
-  const grupos = Array.from(obrasPorGrupo.values());
-  const batchSize = 5;
-
-  for (let i = 0; i < grupos.length; i += batchSize) {
-    const batch = grupos.slice(i, i + batchSize);
-    const batchPromises = batch.map(grupo =>
-      createMarkerForGroup(grupo)
-    );
-
-    await Promise.allSettled(batchPromises);
-
-    if (i + batchSize < grupos.length) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-  }
-  updateMarkers();
-};
-
-const createMarkerForGroup = async (grupo) => {
-  const { direccion, obras: obrasEnGrupo } = grupo;
-  if (!direccion || !geocoder.value) {
-    processingStats.value.failed += obrasEnGrupo.length;
+  if (allObras.length === 0) {
+    if (isMounted.value) loading.value = false;
     return;
   }
 
-  // Normalización corregida de direcciones
-  let direccionNormalizada = direccion
-    .replace(/^RA\.\s*/i, "Ranchería ")
-    .replace(/CIUDAD\s+/i, "")
-    .replace(/2DA\s+SECCION/gi, "2 sección")
-    .replace(/\s+/g, " ")
-    .replace(/,\s*,/g, ",")
-    .trim();
+  const obrasPorGrupo = groupObrasByAddressAndStatus(allObras);
+  const uniqueAddresses = [
+    ...new Set(Array.from(obrasPorGrupo.values()).map((g) => g.direccion)),
+  ].filter(Boolean);
 
-  // Construir direcciones alternativas para geocodificación
-  const addresses = [
-    `${direccionNormalizada}, Comalcalco, Tabasco, México`,
-    `${direccion}, Comalcalco, Tabasco, México`,
-    `${direccionNormalizada.replace('Ranchería ', '')}, Comalcalco, Tabasco, México`,
-    `${direccion.replace('RA. ', '')}, Comalcalco, Tabasco`,
-    `Comalcalco, Tabasco, México`
-  ];
+  console.log("Direcciones únicas a geocodificar:", uniqueAddresses.length);
 
-  // Verificar cache primero
-  const cacheKey = direccion;
-  if (geocodingCache.has(cacheKey)) {
-    const cachedData = geocodingCache.get(cacheKey);
-    processingStats.value.duplicates += obrasEnGrupo.length - 1;
-    return createMarkerFromPosition(grupo, cachedData.position, cachedData.formatted_address);
-  }
+  await geocodeUniqueAddresses(uniqueAddresses);
 
-  // Intentar geocodificación con direcciones alternativas
-  for (let i = 0; i < addresses.length; i++) {
-    const address = addresses[i];
-    try {
-      const result = await geocodeAddress(address);
-      if (result.success) {
-        // Guardar en cache
-        geocodingCache.set(cacheKey, {
-          position: result.position,
-          formatted_address: result.formatted_address,
-        });
+  if (!isMounted.value) return;
 
-        return createMarkerFromPosition(grupo, result.position, result.formatted_address);
-      }
-    } catch (err) {
-      console.warn(`Error en intento ${i + 1}: ${address}`, err);
-    }
-  }
+  createMarkersFromGroups(obrasPorGrupo);
+  loading.value = false;
+  updateMarkers();
 
-  // Si todas las direcciones fallan, crear marcador fallback
-  processingStats.value.failed += obrasEnGrupo.length;
-  // Crear marcador fallback con offset aleatorio
-  const randomOffset = {
-    lat: (Math.random() - 0.5) * 0.02,
-    lng: (Math.random() - 0.5) * 0.02,
-  };
-
-  const fallbackPosition = {
-    lat: COMALCALCO_CENTER.lat + randomOffset.lat,
-    lng: COMALCALCO_CENTER.lng + randomOffset.lng,
-  };
-
-  return createMarkerFromPosition(grupo, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
+  console.log("Marcadores creados exitosamente:", markers.value.length);
 };
 
-const geocodeAddress = (address) => {
+const normalizeAddressForGeocoding = (address) => {
+  if (!address) return "";
+  return address
+    .replace(/^RA\.\s*/, "RANCHERÍA ")
+    .replace(/(\d+)\s*DA\s*SECCION/i, "$1 SECCION")
+    .replace(/\s+/g, " ")
+    .trim();
+};
+
+const geocodeAndCacheAddress = (address) => {
+  if (!address || geocodingCache.has(address)) {
+    return Promise.resolve();
+  }
+
   return new Promise((resolve) => {
+    const normalizedAddress = normalizeAddressForGeocoding(address);
+
     const request = {
-      address: address,
-      region: 'mx',
+      address: normalizedAddress,
+      componentRestrictions: {
+        country: "MX",
+        administrativeArea: "Tabasco",
+      },
       bounds: new google.maps.LatLngBounds(
-        new google.maps.LatLng(18.1, -93.4),
-        new google.maps.LatLng(18.4, -93.0)
+        { lat: COMALCALCO_BOUNDS.south, lng: COMALCALCO_BOUNDS.west },
+        { lat: COMALCALCO_BOUNDS.north, lng: COMALCALCO_BOUNDS.east }
       ),
     };
 
     geocoder.value.geocode(request, (results, status) => {
-      if (status === "OK" && results && results.length > 0) {
-        let bestResult = null;
-
-        for (let result of results) {
-          const formatted = result.formatted_address.toLowerCase();
-
-          // Priorizar resultados que mencionen Comalcalco
-          if (formatted.includes('comalcalco')) {
-            bestResult = result;
-            break;
-          }
-
-          // Si no encuentra Comalcalco, verificar distancia
-          if (!bestResult) {
-            const position = result.geometry.location;
-            const comalcalcoCenter = new google.maps.LatLng(COMALCALCO_CENTER.lat, COMALCALCO_CENTER.lng);
-            const distance = google.maps.geometry.spherical.computeDistanceBetween(position, comalcalcoCenter);
-
-            // Si está dentro de 50km de Comalcalco, considerarlo válido
-            if (distance <= 50000) {
-              bestResult = result;
-            }
-          }
-        }
-
-        if (bestResult) {
-          const position = bestResult.geometry.location;
-          const lat = position.lat();
-          const lng = position.lng();
-
-          resolve({
-            success: true,
-            position: { lat, lng },
-            formatted_address: bestResult.formatted_address,
-          });
-        } else {
-          console.warn(`No se encontró resultado válido para "${address}"`);
-          resolve({
-            success: false,
-            status: 'NO_VALID_RESULT',
-            address,
-          });
-        }
-      } else {
-        console.warn(`Geocodificación falló para "${address}": ${status}`);
-        resolve({
-          success: false,
-          status,
-          address,
+      if (status === "OK" && results?.length) {
+        // Con la búsqueda sesgada, el primer resultado es ahora mucho más confiable
+        const bestResult = results[0];
+        geocodingCache.set(address, {
+          success: true,
+          position: {
+            lat: bestResult.geometry.location.lat(),
+            lng: bestResult.geometry.location.lng(),
+          },
+          formatted_address: bestResult.formatted_address,
         });
+      } else {
+        geocodingCache.set(address, { success: false, status });
       }
+      resolve();
     });
   });
 };
 
-const createMarkerFromPosition = (grupo, position, formatted_address) => {
-  const { obras: obrasEnPosicion, estado } = grupo;
+const groupObrasByAddressAndStatus = (obras) => {
+  const grouped = new Map();
+  obras.forEach((obra) => {
+    const key = `${obra.direccion_obra}|${obra.estado}`;
+    if (!grouped.has(key)) {
+      grouped.set(key, {
+        direccion: obra.direccion_obra,
+        estado: obra.estado,
+        obras: [],
+      });
+    }
+    grouped.get(key).obras.push(obra);
+  });
+  return grouped;
+};
 
+const geocodeUniqueAddresses = async (addresses) => {
+  const geocodingPromises = addresses.map((addr) =>
+    geocodeAndCacheAddress(addr)
+  );
+  await Promise.all(geocodingPromises);
+};
+
+const createMarkersFromGroups = (obrasPorGrupo) => {
   const statusOffsets = {
-    sin_avances: { lat: 0.00008, lng: -0.00005 }, // Arriba-Izquierda
-    abiertas:    { lat: 0,       lng: 0.0001 },   // Derecha
-    finalizadas: { lat: -0.00004,lng: -0.00005 }, // Abajo-Izquierda
+    sin_avances: { lat: 0.00008, lng: -0.00005 },
+    abiertas: { lat: 0, lng: 0.0001 },
+    finalizadas: { lat: -0.00004, lng: -0.00005 },
   };
 
-  const offset = statusOffsets[estado] || { lat: 0, lng: 0 };
-  const lat = position.lat + offset.lat;
-  const lng = position.lng + offset.lng;
-
-  // Usar la primera obra para definir el marcador principal
-  const obraPrincipal = obrasEnPosicion[0];
-
-  const marker = new google.maps.Marker({
-    position: new google.maps.LatLng(lat, lng),
-    map: map.value,
-    title: obrasEnPosicion.length > 1
-    ? `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra} (${estado.replace('_', ' ')})`
-      : `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`,
-    icon: createCustomMarker(estado), // El color del marcador depende del estado del grupo.
-    visible: filters[estado],
-    animation: google.maps.Animation.DROP,
-  });
-
-  // Info window con todas las obras en esa posición
-  const infoWindow = new google.maps.InfoWindow({
-    content: createMultipleInfoWindowContent(obrasEnPosicion, formatted_address),
-  });
-
-  marker.addListener("click", () => {
-    markers.value.forEach((m) => m.infoWindow?.close());
-    infoWindow.open(map.value, marker);
-  });
-
-  markers.value.push({
-    marker,
-    infoWindow,
-    estado: obraPrincipal.estado,
-    obras: obrasEnPosicion,
-    visible: filters[obraPrincipal.estado],
-    position: { lat, lng },
-  });
-
-  processingStats.value.successful += obrasEnPosicion.length;
-};
-
-const createCustomMarker = (estado) => {
-  const color = markerColors[estado];
-
-    return {
-    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-      <svg width="24" height="36" viewBox="0 0 24 36" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 0C5.373 0 0 5.373 0 12c0 9 12 24 12 24s12-15 12-24c0-6.627-5.373-12-12-12z" fill="${color}"/>
-        <circle cx="12" cy="12" r="6" fill="white"/>
-        <circle cx="12" cy="12" r="3" fill="${color}"/>
-      </svg>
-    `)}`,
-    scaledSize: new google.maps.Size(24, 36),
-    anchor: new google.maps.Point(12, 36)
-  };
-};
-
-const createMultipleInfoWindowContent = (obras, formatted_address = null) => {
-  if (obras.length === 1) {
-    return createInfoWindowContent(obras[0], formatted_address);
+  for (const grupo of obrasPorGrupo.values()) {
+    const geocodedResult = geocodingCache.get(grupo.direccion);
+    if (geocodedResult?.success) {
+      const offset = statusOffsets[grupo.estado] || { lat: 0, lng: 0 };
+      const position = {
+        lat: geocodedResult.position.lat + offset.lat,
+        lng: geocodedResult.position.lng + offset.lng,
+      };
+      createMarker(
+        position,
+        grupo.estado,
+        grupo.obras,
+        geocodedResult.formatted_address
+      );
+    } else {
+      failedGeocodings.value.push({
+        direccion: grupo.direccion,
+        motivo: geocodedResult?.status || "NOT_FOUND",
+        obras: grupo.obras,
+      });
+    }
   }
-
-  const direccion = obras[0].direccion_obra;
-
-  let obrasHtml = '';
-  obras.forEach(obra => {
-    const estadoConfig = {
-      sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-      abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-      finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-    };
-
-    const config = estadoConfig[obra.estado];
-    const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : "N/A";
-
-    obrasHtml += `
-      <div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0">
-        <div class="flex items-center justify-between mb-2">
-          <h4 class="font-semibold text-gray-900">${obra.num_proyecto || "N/A"}</h4>
-          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}">
-            ${config.label}
-          </span>
-        </div>
-        <div class="flex items-center space-x-2">
-          <div class="flex-1 bg-gray-200 rounded-full h-1.5">
-            <div class="h-1.5 rounded-full transition-all duration-300 ${
-              obra.estado === "finalizadas" ? "bg-green-500" : obra.estado === "abiertas" ? "bg-yellow-500" : "bg-red-500"
-            }" style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
-          </div>
-          <span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span>
-        </div>
-      </div>
-    `;
-  });
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="mb-3">
-        <h3 class="font-bold text-gray-900 text-lg mb-1">${obras.length} Obras en esta ubicación</h3>
-        <p class="text-xs text-gray-600">${direccion}</p>
-        ${formatted_address ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>` : ''}
-      </div>
-      <div class="space-y-3 text-sm max-h-60 overflow-y-auto">
-        ${obrasHtml}
-      </div>
-    </div>
-  `;
 };
 
-const createInfoWindowContent = (obra, formatted_address = null) => {
-  const estadoConfig = {
-    sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-    abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-    finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-  };
+const createMarker = (position, estado, obras, formatted_address) => {
+  try {
+    const svgIcon = createSVGIcon(estado, obras.length);
 
-  const config = estadoConfig[obra.estado];
-  const cumplimiento = obra.cumplimiento_total
-    ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
-    : "N/A";
+    const marker = new google.maps.Marker({
+      position: new google.maps.LatLng(position.lat, position.lng),
+      map: map.value,
+      title: `${obras.length} obra(s) en ${obras[0].direccion_obra}`,
+      icon: {
+        url: svgIcon,
+        scaledSize: new google.maps.Size(32, 40),
+        anchor: new google.maps.Point(16, 40),
+      },
+      animation: google.maps.Animation.DROP,
+      optimized: false,
+    });
 
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-bold text-gray-900 text-lg">${
-          obra.num_proyecto || "N/A"
-        }</h3>
-        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-          config.color
-        }">
-          ${config.label}
-        </span>
-      </div>
+    const infoWindow = new google.maps.InfoWindow({
+      content: createMultipleInfoWindowContent(obras, formatted_address),
+      maxWidth: 400,
+    });
 
-      <div class="space-y-3 text-sm">
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Dirección Original:</p>
-          <p class="text-gray-600 text-xs">${obra.direccion_obra || "N/A"}</p>
-        </div>
+    marker.addListener("click", () => {
+      markers.value.forEach((m) => m.infoWindow?.close());
+      infoWindow.open(map.value, marker);
+    });
 
-        ${
-          formatted_address
-            ? `
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Ubicación Encontrada:</p>
-          <p class="text-gray-500 text-xs">${formatted_address}</p>
-        </div>
-        `
-            : ""
-        }
+    markers.value.push({
+      marker,
+      infoWindow,
+      estado,
+      obras,
+      visible: filters[estado],
+      position,
+    });
+  } catch (error) {
+    console.error("Error creando marcador:", error);
+  }
+};
 
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Cumplimiento:</p>
-          <div class="flex items-center space-x-2">
-            <div class="flex-1 bg-gray-200 rounded-full h-2">
-              <div class="h-2 rounded-full transition-all duration-300 ${
-                obra.estado === "finalizadas"
-                  ? "bg-green-500"
-                  : obra.estado === "abiertas"
-                  ? "bg-yellow-500"
-                  : "bg-red-500"
-              }"
-                   style="width: ${
-                     Number(obra.cumplimiento_total) || 0
-                   }%"></div>
-            </div>
-            <span class="text-xs font-medium text-gray-700 min-w-[40px]">${cumplimiento}</span>
-          </div>
-        </div>
-      </div>
-    </div>
+// Crear icono SVG
+const createSVGIcon = (estado, count) => {
+  const color = markerColors[estado];
+  const svg = `
+    <svg width="32" height="40" viewBox="0 0 32 40" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.3"/>
+        </filter>
+      </defs>
+      <path d="M16 0C7.163 0 0 7.163 0 16c0 12 16 24 16 24s16-12 16-24c0-8.837-7.163-16-16-16z"
+            fill="${color}"
+            stroke="white"
+            stroke-width="2"
+            filter="url(#shadow)"/>
+      <circle cx="16" cy="16" r="10" fill="white"/>
+      <circle cx="16" cy="16" r="7" fill="${color}"/>
+      <text x="16" y="21" text-anchor="middle" fill="white" font-size="10" font-weight="bold" font-family="Arial">${count}</text>
+    </svg>
   `;
+  return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
 };
 
 const updateMarkers = () => {
-  let visibleCount = 0;
-  markers.value.forEach(({ marker, estado }) => {
-    const shouldShow = filters[estado];
-    marker.setVisible(shouldShow);
-
-    if (shouldShow) visibleCount++;
-
-    // Actualizar el estado visible del marcador
-    const markerIndex = markers.value.findIndex((m) => m.marker === marker);
-    if (markerIndex !== -1) {
-      markers.value[markerIndex].visible = shouldShow;
-    }
+  markers.value.forEach((m) => {
+    const shouldShow = filters[m.estado];
+    m.marker.setVisible(shouldShow);
+    m.visible = shouldShow;
   });
+  console.log("Marcadores actualizados. Visibles:", visibleMarkersCount.value);
 };
 
 const clearMarkers = () => {
   markers.value.forEach(({ marker, infoWindow }) => {
-    infoWindow?.close();
-    marker.setMap(null);
+    try {
+      infoWindow?.close();
+      marker.setMap(null);
+    } catch (error) {
+      console.error("Error limpiando marcador:", error);
+    }
   });
   markers.value = [];
-  geocodingCache.clear(); // Limpiar cache al recargar
+  // No limpiar cache para mejorar rendimiento
 };
 
-// Función para ajustar el viewport del mapa a todos los marcadores visibles
 const fitMapToMarkers = () => {
   if (!map.value || markers.value.length === 0) return;
 
@@ -608,29 +347,116 @@ const fitMapToMarkers = () => {
 
   map.value.fitBounds(bounds);
 
-  // Asegurar zoom mínimo
   const listener = google.maps.event.addListener(map.value, "idle", () => {
     if (map.value.getZoom() > 15) map.value.setZoom(15);
     google.maps.event.removeListener(listener);
   });
 };
 
-// Recargar marcadores cuando cambien los contadores
-watch(
-  () => props.counters,
-  () => {
-    if (map.value) {
-      loadMarkers();
-    }
-  },
-  { deep: true }
-);
+const getAllObras = () => {
+  try {
+    return [
+      ...props.counters.sin_avances.detalles.map((o) => ({
+        ...o,
+        estado: "sin_avances",
+      })),
+      ...props.counters.abiertas.detalles.map((o) => ({
+        ...o,
+        estado: "abiertas",
+      })),
+      ...props.counters.finalizadas.detalles.map((o) => ({
+        ...o,
+        estado: "finalizadas",
+      })),
+    ];
+  } catch (error) {
+    console.error("Error obteniendo obras:", error);
+    return [];
+  }
+};
 
-onMounted(() => {
-  initMap();
-});
+const searchAddresses = () => {
+  if (!searchQuery.value.trim()) {
+    searchResults.value = [];
+    showSearchResults.value = false;
+    return;
+  }
+  const query = searchQuery.value.toLowerCase();
+  const allObras = getAllObras();
+  searchResults.value = allObras
+    .filter(
+      (obra) =>
+        obra.direccion_obra?.toLowerCase().includes(query) ||
+        obra.num_proyecto?.toLowerCase().includes(query)
+    )
+    .slice(0, 10);
+  showSearchResults.value = true;
+};
+
+const goToObra = (obra) => {
+  searchQuery.value = "";
+  searchResults.value = [];
+  showSearchResults.value = false;
+
+  const markerData = markers.value.find((m) =>
+    m.obras.some((o) => o.num_proyecto === obra.num_proyecto)
+  );
+
+  if (markerData) {
+    map.value.setCenter(markerData.position);
+    map.value.setZoom(16);
+    markers.value.forEach((m) => m.infoWindow?.close());
+    markerData.infoWindow.open(map.value, markerData.marker);
+  }
+};
+
+const clearSearch = () => {
+  searchQuery.value = "";
+  searchResults.value = [];
+  showSearchResults.value = false;
+};
+
+const createMultipleInfoWindowContent = (obras, formatted_address) => {
+  const direccion = obras[0].direccion_obra;
+  let obrasHtml = obras
+    .map((obra) => {
+      const estadoConfig = {
+        sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
+        abiertas: {
+          color: "bg-yellow-100 text-yellow-800",
+          label: "En proceso",
+        },
+        finalizadas: {
+          color: "bg-green-100 text-green-800",
+          label: "Finalizada",
+        },
+      };
+      const config = estadoConfig[obra.estado];
+      const cumplimiento = obra.cumplimiento_total
+        ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
+        : "N/A";
+      return `<div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0"><div class="flex items-center justify-between mb-2"><h4 class="font-semibold text-gray-900">${
+        obra.num_proyecto || "N/A"
+      }</h4><span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${
+        config.color
+      }">${
+        config.label
+      }</span></div><div class="flex items-center space-x-2"><div class="flex-1 bg-gray-200 rounded-full h-1.5"><div class="h-1.5 rounded-full" style="width: ${
+        Number(obra.cumplimiento_total) || 0
+      }%; background-color: ${
+        markerColors[obra.estado]
+      };"></div></div><span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span></div></div>`;
+    })
+    .join("");
+  return `<div class="p-4 max-w-sm"><div class="mb-3"><h3 class="font-bold text-gray-900 text-lg mb-1">${
+    obras.length
+  } Obra(s) en esta ubicación</h3><p class="text-xs text-gray-600">${direccion}</p>${
+    formatted_address
+      ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>`
+      : ""
+  }</div><div class="space-y-3 text-sm max-h-60 overflow-y-auto">${obrasHtml}</div></div>`;
+};
 </script>
-
 <template>
   <div class="bg-white rounded-lg shadow-lg overflow-hidden">
     <div
@@ -644,116 +470,95 @@ onMounted(() => {
           </p>
         </div>
 
-        <!-- Filtros por estado -->
         <div class="flex items-center space-x-4">
-          <!-- NUEVO: Buscador de direcciones -->
           <div class="relative">
-            <div class="flex items-center space-x-2">
-              <div class="relative">
-                <input
-                  v-model="searchQuery"
-                  @input="searchAddresses"
-                  @focus="searchAddresses"
-                  type="text"
-                  placeholder="Buscar obra o dirección..."
-                  class="w-64 px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
-                />
-                <div class="absolute inset-y-0 right-0 flex items-center pr-3">
-                  <svg
-                    v-if="searchLoading"
-                    class="animate-spin h-4 w-4 text-gray-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle
-                      class="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      stroke-width="4"
-                    ></circle>
-                    <path
-                      class="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                  </svg>
-                  <svg
-                    v-else-if="searchQuery"
-                    @click="clearSearch"
-                    class="h-4 w-4 text-gray-400 cursor-pointer hover:text-gray-600"
-                    fill="none"
-                    viewBox="0 0 24 24"
+            <div class="relative">
+              <input
+                v-model="searchQuery"
+                @input="searchAddresses"
+                @focus="showSearchResults = true"
+                type="text"
+                placeholder="Buscar obra o dirección..."
+                class="w-64 px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
+              />
+              <div
+                class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
+              >
+                <svg
+                  v-if="searchLoading"
+                  class="animate-spin h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
                     stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
-                  <svg
-                    v-else
-                    class="h-4 w-4 text-gray-400"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    stroke="currentColor"
-                  >
-                    <path
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      stroke-width="2"
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    />
-                  </svg>
-                </div>
+                    stroke-width="4"
+                  ></circle>
+                  <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                <svg
+                  v-else-if="searchQuery"
+                  @click="clearSearch"
+                  class="h-4 w-4 text-gray-400 cursor-pointer hover:text-gray-600 pointer-events-auto"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+                <svg
+                  v-else
+                  class="h-4 w-4 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
               </div>
             </div>
-
-            <!-- NUEVO: Resultados de búsqueda -->
             <div
               v-if="showSearchResults && searchResults.length > 0"
               class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-y-auto"
             >
               <div
                 v-for="obra in searchResults"
-                :key="`${obra.num_proyecto}-${obra.direccion_obra}`"
+                :key="obra.num_proyecto"
                 @click="goToObra(obra)"
-                class="px-3 py-2 hover:bg-gray-50 cursor-pointer border-b border-gray-100 last:border-b-0"
+                class="px-3 py-2 hover:bg-gray-50 cursor-pointer"
               >
-                <div class="flex items-center justify-between">
-                  <div class="flex-1 min-w-0">
-                    <p class="text-sm font-medium text-gray-900 truncate">
-                      {{ obra.num_proyecto || 'N/A' }}
-                    </p>
-                    <p class="text-xs text-gray-500 truncate">
-                      {{ obra.direccion_obra }}
-                    </p>
-                  </div>
-                  <div class="flex-shrink-0 ml-2">
-                    <span
-                      class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
-                      :class="{
-                        'bg-red-100 text-red-800': obra.estado === 'sin_avances',
-                        'bg-yellow-100 text-yellow-800': obra.estado === 'abiertas',
-                        'bg-green-100 text-green-800': obra.estado === 'finalizadas'
-                      }"
-                    >
-                      {{
-                        obra.estado === 'sin_avances' ? 'Sin avances' :
-                        obra.estado === 'abiertas' ? 'Abierta' : 'Finalizada'
-                      }}
-                    </span>
-                  </div>
-                </div>
+                <p class="text-sm font-medium text-gray-900 truncate">
+                  {{ obra.num_proyecto || "N/A" }}
+                </p>
+                <p class="text-xs text-gray-500 truncate">
+                  {{ obra.direccion_obra }}
+                </p>
               </div>
             </div>
-
-            <!-- NUEVO: Mensaje cuando no hay resultados -->
             <div
-              v-else-if="showSearchResults && searchResults.length === 0 && searchQuery.trim()"
+              v-else-if="
+                showSearchResults &&
+                searchResults.length === 0 &&
+                searchQuery.trim()
+              "
               class="absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg"
             >
               <div class="px-3 py-2 text-sm text-gray-500 text-center">
@@ -761,7 +566,6 @@ onMounted(() => {
               </div>
             </div>
           </div>
-
           <div class="flex items-center space-x-2">
             <input
               id="sin-avances"
@@ -778,7 +582,6 @@ onMounted(() => {
               Sin avances ({{ counters.sin_avances.count }})
             </label>
           </div>
-
           <div class="flex items-center space-x-2">
             <input
               id="abiertas"
@@ -795,7 +598,6 @@ onMounted(() => {
               Abiertas ({{ counters.abiertas.count }})
             </label>
           </div>
-
           <div class="flex items-center space-x-2">
             <input
               id="finalizadas"
@@ -814,13 +616,10 @@ onMounted(() => {
           </div>
         </div>
       </div>
-
-      <!-- Controles adicionales -->
       <div class="flex items-center justify-between mt-3">
         <div class="text-sm text-gray-600">
           Marcadores visibles: {{ visibleMarkersCount }} de {{ markers.length }}
         </div>
-
         <div class="flex items-center space-x-2">
           <button
             @click="fitMapToMarkers"
@@ -838,11 +637,10 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- Mapa -->
-    <div ref="mapContainer" class="w-full h-96 relative">
+    <div ref="mapContainer" class="w-full h-[600px] relative">
       <div
         v-if="loading"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+        class="absolute inset-0 bg-gray-100/80 flex items-center justify-center z-10 backdrop-blur-sm"
       >
         <div class="text-center">
           <div
@@ -851,37 +649,20 @@ onMounted(() => {
           <p class="mt-2 text-sm text-gray-600">
             Cargando mapa y geocodificando direcciones...
           </p>
-          <p class="mt-1 text-xs text-gray-500">
-            Esto puede tomar unos segundos
-          </p>
         </div>
       </div>
-
       <div
         v-if="error"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
+        class="absolute inset-0 bg-red-50 flex items-center justify-center z-10"
       >
         <div class="text-center">
-          <svg
-            class="mx-auto h-12 w-12 text-red-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <h3 class="mt-2 text-sm font-medium text-gray-900">
+          <h3 class="text-sm font-medium text-red-800">
             Error al cargar el mapa
           </h3>
-          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
+          <p class="mt-1 text-sm text-red-600">{{ error }}</p>
           <button
             @click="initMap"
-            class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+            class="mt-4 bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700"
           >
             Reintentar
           </button>
@@ -889,24 +670,25 @@ onMounted(() => {
       </div>
     </div>
 
-    <!-- Leyenda mejorada -->
-    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
-      <div class="flex items-center justify-between text-xs text-gray-600">
-        <div class="flex items-center space-x-4">
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
-            Sin avances
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
-            En proceso
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
-            Finalizadas
-          </span>
-        </div>
-      </div>
+    <div
+      v-if="!loading && failedGeocodings.length > 0"
+      class="px-6 py-4 bg-yellow-50 border-t border-yellow-200"
+    >
+      <h4 class="text-sm font-semibold text-yellow-800">
+        {{ failedGeocodings.flatMap((f) => f.obras).length }} obra(s) no
+        pudieron ser ubicadas
+      </h4>
+      <p class="text-xs text-yellow-700 mb-2">
+        Las siguientes direcciones no fueron encontradas o la coincidencia era
+        de baja calidad. Considera revisarlas en la base de datos.
+      </p>
+      <ul class="text-xs text-gray-700 list-disc pl-5 max-h-32 overflow-y-auto">
+        <li v-for="item in failedGeocodings" :key="item.direccion">
+          <strong>{{ item.direccion }}</strong> ({{ item.obras.length }} obra/s)
+          - Motivo:
+          <span class="font-mono text-red-600">{{ item.motivo }}</span>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
diff --git a/resources/js/Components/Dashboard/MapsCopy.vue b/resources/js/Components/Dashboard/MapsCopy.vue
deleted file mode 100644
index bc18343..0000000
--- a/resources/js/Components/Dashboard/MapsCopy.vue
+++ /dev/null
@@ -1,721 +0,0 @@
-<script setup>
-import { ref, reactive, onMounted, computed, watch } from "vue";
-import { Loader } from "@googlemaps/js-api-loader";
-
-const props = defineProps({
-  counters: {
-    type: Object,
-    required: true,
-  },
-});
-
-const mapContainer = ref(null);
-const loading = ref(true);
-const error = ref(null);
-const map = ref(null);
-const markers = ref([]);
-const geocoder = ref(null);
-
-// Filtros activos
-const filters = reactive({
-  sin_avances: true,
-  abiertas: true,
-  finalizadas: true,
-});
-
-// Configuración de colores por estado
-const markerColors = {
-  sin_avances: "#EF4444", // Rojo
-  abiertas: "#F59E0B", // Amarillo
-  finalizadas: "#10B981", // Verde
-};
-
-// Estadísticas de procesamiento
-const processingStats = ref({
-  total: 0,
-  successful: 0,
-  failed: 0,
-  outOfBounds: 0,
-});
-
-// Contador de marcadores visibles
-const visibleMarkersCount = computed(() => {
-  return markers.value.filter((marker) => marker.visible).length;
-});
-
-// Coordenadas del centro de Comalcalco, Tabasco
-const COMALCALCO_CENTER = {
-  lat: 18.2669,
-  lng: -93.2072,
-};
-
-// Límites expandidos de Tabasco (más amplios para capturar todas las obras)
-const TABASCO_BOUNDS = {
-  north: 18.7, // Expandido hacia el norte
-  south: 17.3, // Expandido hacia el sur
-  east: -92.0, // Expandido hacia el este
-  west: -94.7, // Expandido hacia el oeste
-};
-
-// Cache para geocodificación (evitar llamadas duplicadas)
-const geocodingCache = new Map();
-
-const initMap = async () => {
-  loading.value = true;
-  error.value = null;
-
-  try {
-    const loader = new Loader({
-      apiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
-      version: "weekly",
-      libraries: ["places"],
-    });
-
-    const google = await loader.load();
-
-    if (!google.maps) {
-      throw new Error("Google Maps no se cargó correctamente");
-    }
-
-    // Inicializar el mapa con zoom más amplio
-    map.value = new google.maps.Map(mapContainer.value, {
-      center: COMALCALCO_CENTER,
-      zoom: 11, // Zoom más amplio para ver toda la región
-      restriction: {
-        latLngBounds: TABASCO_BOUNDS,
-        strictBounds: false,
-      },
-      mapTypeControl: true,
-      streetViewControl: true,
-      fullscreenControl: true,
-      zoomControl: true,
-    });
-
-    geocoder.value = new google.maps.Geocoder();
-
-    await loadMarkers();
-  } catch (err) {
-    console.error("Error loading Google Maps:", err);
-    error.value = err.message || "Error al cargar Google Maps";
-  } finally {
-    loading.value = false;
-  }
-};
-
-const loadMarkers = async () => {
-  if (!map.value || !geocoder.value) return;
-
-  // Limpiar marcadores existentes
-  clearMarkers();
-
-  // Resetear estadísticas
-  processingStats.value = {
-    total: 0,
-    successful: 0,
-    failed: 0,
-    outOfBounds: 0,
-    duplicates: 0,
-  };
-
-  const allObras = [
-    ...props.counters.sin_avances.detalles.map((obra) => ({
-      ...obra,
-      estado: "sin_avances",
-    })),
-    ...props.counters.abiertas.detalles.map((obra) => ({
-      ...obra,
-      estado: "abiertas",
-    })),
-    ...props.counters.finalizadas.detalles.map((obra) => ({
-      ...obra,
-      estado: "finalizadas",
-    })),
-  ];
-
-  processingStats.value.total = allObras.length;
-
-  console.table(
-    allObras.map((obra) => ({
-      proyecto: obra.num_proyecto,
-      direccion: obra.direccion_obra,
-      estado: obra.estado,
-    }))
-  );
-
-  // Agrupar obras por dirección
-  const obrasPorDireccion = new Map();
-  allObras.forEach(obra => {
-    const direccion = obra.direccion_obra;
-    if (!obrasPorDireccion.has(direccion)) {
-      obrasPorDireccion.set(direccion, []);
-    }
-    obrasPorDireccion.get(direccion).push(obra);
-  });
-
-  processingStats.value.total = allObras.length;
-
-  // Procesar grupos de obras por dirección en lotes
-  const direcciones = Array.from(obrasPorDireccion.keys());
-  const batchSize = 5;
-
-  for (let i = 0; i < direcciones.length; i += batchSize) {
-    const batch = direcciones.slice(i, i + batchSize);
-    const batchPromises = batch.map(direccion =>
-      createMarkerForDireccion(direccion, obrasPorDireccion.get(direccion))
-    );
-
-    await Promise.allSettled(batchPromises);
-
-    if (i + batchSize < direcciones.length) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-  }
-  updateMarkers();
-};
-
-const createMarkerForDireccion = async (direccion, obrasEnDireccion) => {
-  if (!direccion || !geocoder.value) {
-    obrasEnDireccion.forEach(() => processingStats.value.failed++);
-    return;
-  }
-
-  // Construir direcciones alternativas para geocodificación
-  const addresses = [
-    `${direccion}, Comalcalco, Tabasco, México`,
-    `${direccion}, Tabasco, México`,
-    `${direccion}, México`,
-  ];
-
-  // Verificar cache primero
-  const cacheKey = direccion;
-  if (geocodingCache.has(cacheKey)) {
-    const cachedData = geocodingCache.get(cacheKey);
-    processingStats.value.duplicates += obrasEnDireccion.length - 1;
-    return createMarkerFromPosition(obrasEnDireccion, cachedData.position, cachedData.formatted_address);
-  }
-
-  // Intentar geocodificación con direcciones alternativas
-  for (const address of addresses) {
-    try {
-      const result = await geocodeAddress(address);
-      if (result.success) {
-        // Guardar en cache
-        geocodingCache.set(cacheKey, {
-          position: result.position,
-          formatted_address: result.formatted_address,
-        });
-
-        return createMarkerFromPosition(obrasEnDireccion, result.position, result.formatted_address);
-      }
-    } catch (err) {
-      console.warn(`Error geocodificando ${address}:`, err);
-    }
-  }
-
-  // Si todas las direcciones fallan, crear marcador fallback
-  processingStats.value.failed += obrasEnDireccion.length;
-
-  const randomOffset = {
-    lat: (Math.random() - 0.5) * 0.02,
-    lng: (Math.random() - 0.5) * 0.02,
-  };
-
-  const fallbackPosition = {
-    lat: COMALCALCO_CENTER.lat + randomOffset.lat,
-    lng: COMALCALCO_CENTER.lng + randomOffset.lng,
-  };
-
-  return createMarkerFromPosition(obrasEnDireccion, fallbackPosition, "Ubicación aproximada - Comalcalco, Tabasco");
-};
-
-const geocodeAddress = (address) => {
-  return new Promise((resolve, reject) => {
-    geocoder.value.geocode({ address }, (results, status) => {
-      if (status === "OK" && results[0]) {
-        const position = results[0].geometry.location;
-        const lat = position.lat();
-        const lng = position.lng();
-
-        resolve({
-          success: true,
-          position: { lat, lng },
-          formatted_address: results[0].formatted_address,
-        });
-      } else {
-        resolve({
-          success: false,
-          status,
-          address,
-        });
-      }
-    });
-  });
-};
-
-const createMarkerFromPosition = (obrasEnPosicion, position, formatted_address) => {
-  const lat = position.lat;
-  const lng = position.lng;
-
-  // Verificar límites expandidos
-  if (
-    lat < TABASCO_BOUNDS.south ||
-    lat > TABASCO_BOUNDS.north ||
-    lng < TABASCO_BOUNDS.west ||
-    lng > TABASCO_BOUNDS.east
-  ) {
-    processingStats.value.outOfBounds += obrasEnPosicion.length;
-  }
-
-  // Usar la primera obra para definir el marcador principal
-  const obraPrincipal = obrasEnPosicion[0];
-
-  const marker = new google.maps.Marker({
-    position: new google.maps.LatLng(lat, lng),
-    map: map.value,
-    title: obrasEnPosicion.length === 1
-      ? `${obraPrincipal.num_proyecto} - ${obraPrincipal.direccion_obra}`
-      : `${obrasEnPosicion.length} obras en ${obraPrincipal.direccion_obra}`,
-    icon: createCustomMarker(obraPrincipal.estado),
-    visible: filters[obraPrincipal.estado],
-    animation: google.maps.Animation.DROP,
-  });
-
-  // Info window con todas las obras en esa posición
-  const infoWindow = new google.maps.InfoWindow({
-    content: createMultipleInfoWindowContent(obrasEnPosicion, formatted_address),
-  });
-
-  marker.addListener("click", () => {
-    markers.value.forEach((m) => m.infoWindow?.close());
-    infoWindow.open(map.value, marker);
-  });
-
-  markers.value.push({
-    marker,
-    infoWindow,
-    estado: obraPrincipal.estado,
-    obras: obrasEnPosicion,
-    visible: filters[obraPrincipal.estado],
-    position: { lat, lng },
-  });
-
-  processingStats.value.successful += obrasEnPosicion.length;
-};
-
-const createCustomMarker = (estado) => {
-  const color = markerColors[estado];
-  const width = 32;
-  const height = 48;
-
-  return {
-    url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-      <svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">
-        <defs>
-          <!-- Sombra para el marcador -->
-          <filter id="dropshadow-${estado}" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)" flood-opacity="0.5"/>
-          </filter>
-
-          <!-- Gradiente para dar volumen -->
-          <radialGradient id="gradient-${estado}" cx="30%" cy="20%" r="70%">
-            <stop offset="0%" style="stop-color:white;stop-opacity:0.3" />
-            <stop offset="100%" style="stop-color:${color};stop-opacity:1" />
-          </radialGradient>
-        </defs>
-
-        <!-- Forma principal del marcador (gota/pin) -->
-        <path d="M ${width / 2} ${height - 4}
-                 C ${width / 2} ${height - 4},
-                   ${width * 0.125} ${height * 0.58},
-                   ${width * 0.125} ${height * 0.375}
-                 C ${width * 0.125} ${height * 0.167},
-                   ${width * 0.292} 2,
-                   ${width / 2} 2
-                 C ${width * 0.708} 2,
-                   ${width * 0.875} ${height * 0.167},
-                   ${width * 0.875} ${height * 0.375}
-                 C ${width * 0.875} ${height * 0.58},
-                   ${width / 2} ${height - 4},
-                   ${width / 2} ${height - 4} Z"
-              fill="url(#gradient-${estado})"
-              stroke="white"
-              stroke-width="1.5"
-              filter="url(#dropshadow-${estado})"/>
-
-        <!-- Borde interior más oscuro -->
-        <path d="M ${width / 2} ${height - 4}
-                 C ${width / 2} ${height - 4},
-                   ${width * 0.125} ${height * 0.58},
-                   ${width * 0.125} ${height * 0.375}
-                 C ${width * 0.125} ${height * 0.167},
-                   ${width * 0.292} 2,
-                   ${width / 2} 2
-                 C ${width * 0.708} 2,
-                   ${width * 0.875} ${height * 0.167},
-                   ${width * 0.875} ${height * 0.375}
-                 C ${width * 0.875} ${height * 0.58},
-                   ${width / 2} ${height - 4},
-                   ${width / 2} ${height - 4} Z"
-              fill="none"
-              stroke="${color}"
-              stroke-width="1"
-              opacity="0.8"/>
-
-        <!-- Círculo interior blanco -->
-        <circle cx="${width / 2}"
-                cy="${height * 0.375}"
-                r="${width * 0.25}"
-                fill="white"
-                stroke="${color}"
-                stroke-width="1"/>
-      </svg>
-    `)}`,
-    scaledSize: new google.maps.Size(width, height),
-    anchor: new google.maps.Point(width / 2, height - 4),
-    origin: new google.maps.Point(0, 0),
-  };
-};
-
-const createMultipleInfoWindowContent = (obras, formatted_address = null) => {
-  if (obras.length === 1) {
-    return createInfoWindowContent(obras[0], formatted_address);
-  }
-
-  const direccion = obras[0].direccion_obra;
-
-  let obrasHtml = '';
-  obras.forEach(obra => {
-    const estadoConfig = {
-      sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-      abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-      finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-    };
-
-    const config = estadoConfig[obra.estado];
-    const cumplimiento = obra.cumplimiento_total ? `${Number(obra.cumplimiento_total).toFixed(1)}%` : "N/A";
-
-    obrasHtml += `
-      <div class="border-b border-gray-200 pb-3 mb-3 last:border-b-0 last:pb-0 last:mb-0">
-        <div class="flex items-center justify-between mb-2">
-          <h4 class="font-semibold text-gray-900">${obra.num_proyecto || "N/A"}</h4>
-          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${config.color}">
-            ${config.label}
-          </span>
-        </div>
-        <div class="flex items-center space-x-2">
-          <div class="flex-1 bg-gray-200 rounded-full h-1.5">
-            <div class="h-1.5 rounded-full transition-all duration-300 ${
-              obra.estado === "finalizadas" ? "bg-green-500" : obra.estado === "abiertas" ? "bg-yellow-500" : "bg-red-500"
-            }" style="width: ${Number(obra.cumplimiento_total) || 0}%"></div>
-          </div>
-          <span class="text-xs font-medium text-gray-700 min-w-[35px]">${cumplimiento}</span>
-        </div>
-      </div>
-    `;
-  });
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="mb-3">
-        <h3 class="font-bold text-gray-900 text-lg mb-1">${obras.length} Obras en esta ubicación</h3>
-        <p class="text-xs text-gray-600">${direccion}</p>
-        ${formatted_address ? `<p class="text-xs text-gray-500 mt-1">${formatted_address}</p>` : ''}
-      </div>
-      <div class="space-y-3 text-sm max-h-60 overflow-y-auto">
-        ${obrasHtml}
-      </div>
-    </div>
-  `;
-};
-
-const createInfoWindowContent = (obra, formatted_address = null) => {
-  const estadoConfig = {
-    sin_avances: { color: "bg-red-100 text-red-800", label: "Sin avances" },
-    abiertas: { color: "bg-yellow-100 text-yellow-800", label: "En proceso" },
-    finalizadas: { color: "bg-green-100 text-green-800", label: "Finalizada" },
-  };
-
-  const config = estadoConfig[obra.estado];
-  const cumplimiento = obra.cumplimiento_total
-    ? `${Number(obra.cumplimiento_total).toFixed(1)}%`
-    : "N/A";
-
-  return `
-    <div class="p-4 max-w-sm">
-      <div class="flex items-center justify-between mb-3">
-        <h3 class="font-bold text-gray-900 text-lg">${
-          obra.num_proyecto || "N/A"
-        }</h3>
-        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-          config.color
-        }">
-          ${config.label}
-        </span>
-      </div>
-
-      <div class="space-y-3 text-sm">
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Dirección Original:</p>
-          <p class="text-gray-600 text-xs">${obra.direccion_obra || "N/A"}</p>
-        </div>
-
-        ${
-          formatted_address
-            ? `
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Ubicación Encontrada:</p>
-          <p class="text-gray-500 text-xs">${formatted_address}</p>
-        </div>
-        `
-            : ""
-        }
-
-        <div>
-          <p class="font-medium text-gray-700 mb-1">Cumplimiento:</p>
-          <div class="flex items-center space-x-2">
-            <div class="flex-1 bg-gray-200 rounded-full h-2">
-              <div class="h-2 rounded-full transition-all duration-300 ${
-                obra.estado === "finalizadas"
-                  ? "bg-green-500"
-                  : obra.estado === "abiertas"
-                  ? "bg-yellow-500"
-                  : "bg-red-500"
-              }"
-                   style="width: ${
-                     Number(obra.cumplimiento_total) || 0
-                   }%"></div>
-            </div>
-            <span class="text-xs font-medium text-gray-700 min-w-[40px]">${cumplimiento}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-};
-
-const updateMarkers = () => {
-  let visibleCount = 0;
-  markers.value.forEach(({ marker, estado }) => {
-    const shouldShow = filters[estado];
-    marker.setVisible(shouldShow);
-
-    if (shouldShow) visibleCount++;
-
-    // Actualizar el estado visible del marcador
-    const markerIndex = markers.value.findIndex((m) => m.marker === marker);
-    if (markerIndex !== -1) {
-      markers.value[markerIndex].visible = shouldShow;
-    }
-  });
-};
-
-const clearMarkers = () => {
-  markers.value.forEach(({ marker, infoWindow }) => {
-    infoWindow?.close();
-    marker.setMap(null);
-  });
-  markers.value = [];
-  geocodingCache.clear(); // Limpiar cache al recargar
-};
-
-// Función para ajustar el viewport del mapa a todos los marcadores visibles
-const fitMapToMarkers = () => {
-  if (!map.value || markers.value.length === 0) return;
-
-  const bounds = new google.maps.LatLngBounds();
-  const visibleMarkers = markers.value.filter((m) => m.visible);
-
-  if (visibleMarkers.length === 0) return;
-
-  visibleMarkers.forEach(({ position }) => {
-    bounds.extend(new google.maps.LatLng(position.lat, position.lng));
-  });
-
-  map.value.fitBounds(bounds);
-
-  // Asegurar zoom mínimo
-  const listener = google.maps.event.addListener(map.value, "idle", () => {
-    if (map.value.getZoom() > 15) map.value.setZoom(15);
-    google.maps.event.removeListener(listener);
-  });
-};
-
-// Recargar marcadores cuando cambien los contadores
-watch(
-  () => props.counters,
-  () => {
-    if (map.value) {
-      loadMarkers();
-    }
-  },
-  { deep: true }
-);
-
-onMounted(() => {
-  initMap();
-});
-</script>
-
-<template>
-  <div class="bg-white rounded-lg shadow-lg overflow-hidden">
-    <div
-      class="px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 border-b border-gray-200"
-    >
-      <div class="flex items-center justify-between">
-        <div>
-          <h3 class="text-lg font-medium text-gray-900">Mapa de Obras</h3>
-          <p class="text-sm text-gray-600 mt-1">
-            Ubicación geográfica de proyectos en Comalcalco, Tabasco
-          </p>
-        </div>
-
-        <!-- Filtros por estado -->
-        <div class="flex items-center space-x-4">
-          <div class="flex items-center space-x-2">
-            <input
-              id="sin-avances"
-              v-model="filters.sin_avances"
-              @change="updateMarkers"
-              type="checkbox"
-              class="rounded border-gray-300 text-red-600 focus:ring-red-500"
-            />
-            <label
-              for="sin-avances"
-              class="flex items-center text-sm text-gray-700"
-            >
-              <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
-              Sin avances ({{ counters.sin_avances.count }})
-            </label>
-          </div>
-
-          <div class="flex items-center space-x-2">
-            <input
-              id="abiertas"
-              v-model="filters.abiertas"
-              @change="updateMarkers"
-              type="checkbox"
-              class="rounded border-gray-300 text-yellow-600 focus:ring-yellow-500"
-            />
-            <label
-              for="abiertas"
-              class="flex items-center text-sm text-gray-700"
-            >
-              <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
-              Abiertas ({{ counters.abiertas.count }})
-            </label>
-          </div>
-
-          <div class="flex items-center space-x-2">
-            <input
-              id="finalizadas"
-              v-model="filters.finalizadas"
-              @change="updateMarkers"
-              type="checkbox"
-              class="rounded border-gray-300 text-green-600 focus:ring-green-500"
-            />
-            <label
-              for="finalizadas"
-              class="flex items-center text-sm text-gray-700"
-            >
-              <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
-              Finalizadas ({{ counters.finalizadas.count }})
-            </label>
-          </div>
-        </div>
-      </div>
-
-      <!-- Controles adicionales -->
-      <div class="flex items-center justify-between mt-3">
-        <div class="text-sm text-gray-600">
-          Marcadores visibles: {{ visibleMarkersCount }} de {{ markers.length }}
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <button
-            @click="fitMapToMarkers"
-            class="px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-          >
-            Ajustar Vista
-          </button>
-          <button
-            @click="loadMarkers"
-            class="px-3 py-1 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
-          >
-            Recargar
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Mapa -->
-    <div ref="mapContainer" class="w-full h-96 relative">
-      <div
-        v-if="loading"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
-      >
-        <div class="text-center">
-          <div
-            class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"
-          ></div>
-          <p class="mt-2 text-sm text-gray-600">
-            Cargando mapa y geocodificando direcciones...
-          </p>
-          <p class="mt-1 text-xs text-gray-500">
-            Esto puede tomar unos segundos
-          </p>
-        </div>
-      </div>
-
-      <div
-        v-if="error"
-        class="absolute inset-0 bg-gray-100 flex items-center justify-center z-10"
-      >
-        <div class="text-center">
-          <svg
-            class="mx-auto h-12 w-12 text-red-400"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            />
-          </svg>
-          <h3 class="mt-2 text-sm font-medium text-gray-900">
-            Error al cargar el mapa
-          </h3>
-          <p class="mt-1 text-sm text-gray-500">{{ error }}</p>
-          <button
-            @click="initMap"
-            class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
-          >
-            Reintentar
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Leyenda mejorada -->
-    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
-      <div class="flex items-center justify-between text-xs text-gray-600">
-        <div class="flex items-center space-x-4">
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-red-500 rounded-full mr-1"></div>
-            Sin avances
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-yellow-500 rounded-full mr-1"></div>
-            En proceso
-          </span>
-          <span class="flex items-center">
-            <div class="w-2 h-2 bg-green-500 rounded-full mr-1"></div>
-            Finalizadas
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/resources/js/Pages/App/AtencionCiudadana.vue b/resources/js/Pages/App/AtencionCiudadana.vue
index 529f8e4..77f38f9 100644
--- a/resources/js/Pages/App/AtencionCiudadana.vue
+++ b/resources/js/Pages/App/AtencionCiudadana.vue
@@ -180,15 +180,16 @@ const applyDataToComponents = (payload, includeCharts = true) => {
   const { porTipo, porGenero, porEdad, totalsShape } =
     normalizeResponse(payload);
 
-  // Actualizar totales
-  totals.value.day = totalsShape?.today ?? 0;
-  totals.value.week = totalsShape?.week ?? 0;
-  totals.value.month = totalsShape?.month ?? 0;
+  // Solo usar totales del servidor si no hay filtros activos
+  if (!selectedDepartment.value && !selectedType.value) {
+    totals.value.day = totalsShape?.today ?? 0;
+    totals.value.week = totalsShape?.week ?? 0;
+    totals.value.month = totalsShape?.month ?? 0;
+  }
 
-  // Procesar beneficiarios
+  // Procesar beneficiarios (esto también actualizará los totales filtrados)
   processBeneficiariesAsync(payload);
 
-  // Solo construir gráficas si se solicita (para evitar conflicto con DateRange)
   if (includeCharts) {
     buildTipoChart(porTipo);
     buildGeneroChart(porGenero);
@@ -230,9 +231,42 @@ const processBeneficiariesAsync = async (payload) => {
     beneficiariesList.value = beneficiariesData;
     beneficiariesByType.value = groupBeneficiariesByType(beneficiariesData);
     expandedGroups.value = new Set();
+
+    updateTotalsFromFilteredData(payload);
   }, 0);
 };
 
+const updateTotalsFromFilteredData = (payload) => {
+  const dashboardAlmacenData = payload.dashboard?.data ?? payload.dashboard ?? {};
+  const dashboardServicioData = payload.dashboard_servicio?.data ?? payload.dashboard_servicio ?? {};
+
+  // Calcular para cada período
+  const periods = ['hoy', 'semana'];
+  const totalsKeys = ['day', 'week'];
+
+  periods.forEach((periodKey, index) => {
+    const beneficiariesAlmacen = dashboardAlmacenData[periodKey] || [];
+    const beneficiariesServicio = dashboardServicioData[periodKey] || [];
+
+    let allBeneficiaries = [...beneficiariesAlmacen, ...beneficiariesServicio];
+
+    // Aplicar filtros de departamento y tipo
+    allBeneficiaries = filterBeneficiariesByDepartment(
+      allBeneficiaries,
+      selectedDepartment.value
+    );
+
+    allBeneficiaries = filterBeneficiariesByType(
+      allBeneficiaries,
+      selectedType.value
+    );
+
+    // Actualizar el total correspondiente
+    const totalKey = totalsKeys[index];
+    totals.value[totalKey] = allBeneficiaries.length;
+  });
+};
+
 const clearComponentData = () => {
   tipoChart.value = { labels: [], datasets: [] };
   generoChart.value = { labels: [], datasets: [] };
@@ -664,13 +698,6 @@ onMounted(() => {
               <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
             Entregados
-            {{
-              selectedPeriod === "hoy"
-                ? "Hoy"
-                : selectedPeriod === "semana"
-                ? "Esta Semana"
-                : "Este Mes"
-            }}
             ({{ beneficiariesList.length }})
           </h2>