diff --git a/app/Http/Controllers/Dashboard/ObrasController.php b/app/Http/Controllers/Dashboard/ObrasController.php
index 38f34bc..c8ee62f 100644
--- a/app/Http/Controllers/Dashboard/ObrasController.php
+++ b/app/Http/Controllers/Dashboard/ObrasController.php
@@ -9,17 +9,38 @@ class ObrasController extends BaseController
 {
     public function Obras(Request $request)
     {
-        $query = $request->only(['start', 'end', 'type']);
-        $query = array_merge(['type' => 'api'], $query);
+        $query = $request->only(['start', 'end', 'type', 'action']);
+        $query = array_merge($query, ['action' => 'index', 'type' => 'api'], $query);
 
         try {
-            $response = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php?action=getCounters', $query);
+            $response = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $query);
 
             if (! $response->successful()) {
                 return response()->json(['error' => 'External service error'], $response->status());
             }
 
-            return response()->json($response->json(), $response->status())
+            $mainData = $response->json();
+
+            $counterQuery = array_merge($query, ['action' => 'getCounters']);
+            $countersResponse = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $counterQuery);
+
+            $countersData = [];
+            if ($countersResponse->successful()) {
+                $countersData = $countersResponse->json();
+            }
+
+            $usersQuery = array_merge($query, ['action' => 'actionsOfSupervisors']);
+            $userResponse = Http::timeout(5)->get('https://obras-information.comalcalco.gob.mx/api/controller.php', $usersQuery);
+
+            $usersData = [];
+            if($userResponse->successful()) {
+                $usersData = $userResponse->json();
+            }
+
+            // Combinar ambas respuestas
+            $combinedData = array_merge($mainData, ['counters' => $countersData, 'users' => $usersData]);
+
+            return response()->json($combinedData, $response->status())
                 ->header('Content-Type', $response->header('Content-Type', 'application/json'));
         } catch (\Throwable $e) {
             Log::error('Proxy error: '.$e->getMessage());
diff --git a/package-lock.json b/package-lock.json
index e8c9c45..e292790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
+                "@googlemaps/js-api-loader": "^1.16.10",
                 "@inertiajs/vue3": "^1.0.0-beta.2",
                 "@soketi/soketi": "^1.6.0",
                 "@vueuse/core": "^9.6.0",
@@ -408,6 +409,12 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@googlemaps/js-api-loader": {
+            "version": "1.16.10",
+            "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.10.tgz",
+            "integrity": "sha512-c2erv2k7P2ilYzMmtYcMgAR21AULosQuUHJbStnrvRk2dG93k5cqptDrh9A8p+ZNlyhiqEOgHW7N9PAizdUM7Q==",
+            "license": "Apache-2.0"
+        },
         "node_modules/@inertiajs/core": {
             "version": "1.0.14",
             "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.14.tgz",
diff --git a/package.json b/package.json
index 1778756..3466eea 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
         "vue": "^3.2.31"
     },
     "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.10",
         "@inertiajs/vue3": "^1.0.0-beta.2",
         "@soketi/soketi": "^1.6.0",
         "@vueuse/core": "^9.6.0",
diff --git a/resources/js/Components/Dashboard/Maps.vue b/resources/js/Components/Dashboard/Maps.vue
new file mode 100644
index 0000000..022a954
--- /dev/null
+++ b/resources/js/Components/Dashboard/Maps.vue
@@ -0,0 +1,367 @@
+<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>
+    </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...</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 -->
+    <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>
+
+<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
+};
+
+// 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 aproximados de Comalcalco
+const COMALCALCO_BOUNDS = {
+  north: 18.35,
+  south: 18.18,
+  east: -93.10,
+  west: -93.30
+};
+
+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']
+    });
+
+    // Cargar Google Maps
+    const google = await loader.load();
+
+    // Verificar que google.maps esté disponible
+    if (!google.maps) {
+      throw new Error('Google Maps no se cargó correctamente');
+    }
+
+    // Inicializar el mapa centrado en Comalcalco
+    map.value = new google.maps.Map(mapContainer.value, {
+      center: COMALCALCO_CENTER,
+      zoom: 12,
+      restriction: {
+        latLngBounds: COMALCALCO_BOUNDS,
+        strictBounds: false
+      },
+      mapTypeControl: true,
+      streetViewControl: true,
+      fullscreenControl: true,
+      zoomControl: true
+    });
+
+    // Inicializar el geocodificador
+    geocoder.value = new google.maps.Geocoder();
+
+    // Cargar marcadores de obras
+    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();
+
+  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' }))
+  ];
+
+  for (const obra of allObras) {
+    try {
+      await createMarkerForObra(obra);
+    } catch (err) {
+      console.warn(`Error creating marker for obra ${obra.num_proyecto}:`, err);
+    }
+  }
+
+  updateMarkers();
+};
+
+const createMarkerForObra = async (obra) => {
+  if (!obra.direccion_obra || !geocoder.value) return;
+
+  const address = `${obra.direccion_obra}, Comalcalco, Tabasco, México`;
+
+  return new Promise((resolve, reject) => {
+    geocoder.value.geocode({ address }, (results, status) => {
+      if (status === 'OK' && results[0]) {
+        const position = results[0].geometry.location;
+
+        // Verificar que la ubicación esté dentro de los límites de Comalcalco
+        const lat = position.lat();
+        const lng = position.lng();
+
+        if (lat < COMALCALCO_BOUNDS.south || lat > COMALCALCO_BOUNDS.north ||
+            lng < COMALCALCO_BOUNDS.west || lng > COMALCALCO_BOUNDS.east) {
+          console.warn(`Obra ${obra.num_proyecto} fuera de los límites de Comalcalco`);
+          resolve();
+          return;
+        }
+
+        const marker = new google.maps.Marker({
+          position,
+          map: map.value,
+          title: `${obra.num_proyecto} - ${obra.direccion_obra}`,
+          icon: createCustomMarker(obra.estado),
+          visible: filters[obra.estado]
+        });
+
+        // Info window con detalles de la obra
+        const infoWindow = new google.maps.InfoWindow({
+          content: createInfoWindowContent(obra)
+        });
+
+        marker.addListener('click', () => {
+          // Cerrar otras ventanas abiertas
+          markers.value.forEach(m => m.infoWindow?.close());
+          infoWindow.open(map.value, marker);
+        });
+
+        markers.value.push({
+          marker,
+          infoWindow,
+          estado: obra.estado,
+          obra,
+          visible: filters[obra.estado]
+        });
+
+        resolve();
+      } else {
+        console.warn(`Geocoding failed for ${address}: ${status}`);
+        resolve();
+      }
+    });
+  });
+};
+
+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 createInfoWindowContent = (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="p-4 max-w-sm">
+      <div class="flex items-center justify-between mb-3">
+        <h3 class="font-bold text-gray-900">${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-2 text-sm">
+        <div>
+          <p class="font-medium text-gray-700">Dirección:</p>
+          <p class="text-gray-600">${obra.direccion_obra || 'N/A'}</p>
+        </div>
+
+        <div>
+          <p class="font-medium text-gray-700">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 ${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">${cumplimiento}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+};
+
+const updateMarkers = () => {
+  markers.value.forEach(({ marker, estado }) => {
+    const shouldShow = filters[estado];
+    marker.setVisible(shouldShow);
+
+    // 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 = [];
+};
+
+// Recargar marcadores cuando cambien los contadores
+watch(() => props.counters, () => {
+  if (map.value) {
+    loadMarkers();
+  }
+}, { deep: true });
+
+onMounted(() => {
+  initMap();
+});
+</script>
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
index 454b48d..287758b 100644
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -1,29 +1,1282 @@
 <script setup>
+import { ref, reactive, onMounted } from "vue";
 
+import ObrasMap from "@/Components/Dashboard/Maps.vue";
+import axios from "axios";
+
+const loading = ref(false);
+
+// Planeaciones
+const planeaciones = ref([]);
+const planeacionesCount = ref(0);
+const planeacionesError = ref(false);
+const planeacionesErrorMessage = ref("");
+
+// Estimaciones
+const estimaciones = ref([]);
+const estimacionesGrouped = reactive({});
+const estimacionesGroupedKeys = ref([]);
+const estimacionesCount = ref(0);
+const estimacionesError = ref(false);
+const estimacionesErrorMessage = ref("");
+
+//Contadores
+const counters = reactive({
+  sin_avances: { count: 0, detalles: [] },
+  finalizadas: { count: 0, detalles: [] },
+  abiertas: { count: 0, detalles: [] },
+});
+
+//Users
+const users = ref([]);
+const usersStats = reactive({
+  total_supervisores: 0,
+  supervisores_con_acciones: 0,
+  ultima_accion_estimacion: 0,
+  ultima_action_evidencia: 0,
+  sin_acciones: 0,
+});
+
+// Últimas actualizaciones
+const lastPlaneacion = ref(null);
+const lastEstimacion = ref(null);
+
+// UI
+const activeTab = ref("proyectos");
+const expandedProjects = ref(new Set());
+
+let cancelTokenSource = null;
+
+/**
+ * Carga datos (sin manejo de rango de fechas)
+ */
+const loadDashboardData = async () => {
+  loading.value = true;
+  planeacionesError.value = estimacionesError.value = false;
+  planeacionesErrorMessage.value = estimacionesErrorMessage.value = "";
 
-const fetchReport = async ({ start, end }) => {
   // cancelar petición previa
   if (cancelTokenSource) {
-    try { cancelTokenSource.cancel('cancel'); } catch (e) {}
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
   }
   cancelTokenSource = axios.CancelToken.source();
 
-  const params = {};
-  if (start) params.start = start;
-  if (end) params.end = end;
+  try {
+    const res = await axios.get("/api/reporte-obras", {
+      cancelToken: cancelTokenSource.token,
+      headers: { "X-Requested-With": "XMLHttpRequest" },
+    });
 
-  const res = await axios.get('/api/reporte-especial', {
-    params,
-    cancelToken: cancelTokenSource.token,
-    headers: { 'X-Requested-With': 'XMLHttpRequest' }
-  });
+    const data = res.data;
+    console.log("Dashboard data:", data);
+    if (!data || !data.success) {
+      planeacionesError.value = estimacionesError.value = true;
+      const msg = data?.error || "Error desconocido";
+      planeacionesErrorMessage.value = estimacionesErrorMessage.value = msg;
+      return;
+    }
 
-  // axios lanza en error si status >= 400, aquí devolvemos data directamente
-  return res.data;
+    // Planeaciones: normalizar campos
+    if (data.planeacions) {
+      planeacionesCount.value = data.planeacions.count || 0;
+      const rawPlaneaciones = Array.isArray(data.planeacions.data)
+        ? data.planeacions.data
+        : [];
+      planeaciones.value = rawPlaneaciones.map((item) => ({
+        id: item.ID ?? item.id ?? null,
+        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
+        proyecto: item.proyecto ?? null,
+        cumplimiento_total:
+          item.cumplimiento_total ?? item.cumplimiento ?? null,
+      }));
+      const lastP =
+        data.planeacions.lastUpdate ?? data.planeacions.last_update ?? null;
+      lastPlaneacion.value = lastP && (lastP.id ?? lastP.ID) ? lastP : null;
+    }
+
+    // Estimaciones: normalizar y agrupar por proyecto_id
+    if (data.estimacions) {
+      estimacionesCount.value = data.estimacions.count || 0;
+      const rawEstimaciones = Array.isArray(data.estimacions.data)
+        ? data.estimacions.data
+        : [];
+      estimaciones.value = rawEstimaciones.map((item) => ({
+        id: item.id ?? item.ID ?? null,
+        num_estimacion: item.num_estimacion ?? item.numEstimacion ?? null,
+        fecha_estimacion: item.fecha_estimacion ?? item.fechaEstimacion ?? null,
+        periodo_estimacion: item.periodo_estimacion ?? null,
+        monto_estimacion: item.monto_estimacion ?? item.montoEstimacion ?? "0",
+        monto_acumulado: item.monto_acumulado ?? item.montoAcumulado ?? "0",
+        status: item.status ?? null,
+        created_at: item.created_at ?? item.createdAt ?? null,
+        proyecto_id: String(
+          item.proyecto_id ?? item.proyectoId ?? "sin_proyecto"
+        ),
+        num_proyecto: item.num_proyecto ?? item.numProyecto ?? null,
+        proyecto: item.proyecto ?? null,
+      }));
+
+      // Agrupar
+      Object.keys(estimacionesGrouped).forEach(
+        (k) => delete estimacionesGrouped[k]
+      );
+      estimaciones.value.forEach((est) => {
+        const proyectoId = est.proyecto_id || "sin_proyecto";
+        if (!estimacionesGrouped[proyectoId]) {
+          estimacionesGrouped[proyectoId] = {
+            proyecto: {
+              num_proyecto: est.num_proyecto,
+              proyecto: est.proyecto,
+            },
+            estimaciones: [],
+          };
+        }
+        estimacionesGrouped[proyectoId].estimaciones.push(est);
+      });
+      estimacionesGroupedKeys.value = Object.keys(estimacionesGrouped);
+
+      // inicializar proyectos expandidos (todos abiertos por defecto)
+      expandedProjects.value = new Set(estimacionesGroupedKeys.value);
+
+      const lastE =
+        data.estimacions.lastUpdate ?? data.estimacions.last_update ?? null;
+      lastEstimacion.value = lastE && (lastE.id ?? lastE.ID) ? lastE : null;
+    }
+
+    // NUEVO: Procesar datos de contadores del segundo endpoint
+    if (data.counters) {
+      // Actualizar contadores sin avances
+      if (data.counters.sin_avances) {
+        counters.sin_avances.count = data.counters.sin_avances.count || 0;
+        counters.sin_avances.detalles = Array.isArray(
+          data.counters.sin_avances.detalles
+        )
+          ? data.counters.sin_avances.detalles.map((item) => ({
+              id: item.ID ?? item.id ?? null,
+              num_proyecto: item.num_proyecto ?? null,
+              direccion_obra: item.direccion_obra ?? null,
+              cumplimiento_total: item.cumplimiento_total ?? null,
+            }))
+          : [];
+      }
+
+      // Agregar contadores finalizadas (opcional, para uso futuro)
+      if (data.counters.finalizadas) {
+        counters.finalizadas = {
+          count: data.counters.finalizadas.count || 0,
+          detalles: Array.isArray(data.counters.finalizadas.detalles)
+            ? data.counters.finalizadas.detalles.map((item) => ({
+                id: item.ID ?? item.id ?? null,
+                num_proyecto: item.num_proyecto ?? null,
+                direccion_obra: item.direccion_obra ?? null,
+                cumplimiento_total: item.cumplimiento_total ?? null,
+              }))
+            : [],
+        };
+      }
+
+      // Agregar contadores abiertas (opcional, para uso futuro)
+      if (data.counters.abiertas) {
+        counters.abiertas = {
+          count: data.counters.abiertas.count || 0,
+          detalles: Array.isArray(data.counters.abiertas.detalles)
+            ? data.counters.abiertas.detalles.map((item) => ({
+                id: item.ID ?? item.id ?? null,
+                num_proyecto: item.num_proyecto ?? null,
+                direccion_obra: item.direccion_obra ?? null,
+                cumplimiento_total: item.cumplimiento_total ?? null,
+              }))
+            : [],
+        };
+      }
+    }
+
+    if (data.users && data.users.success) {
+      if (Array.isArray(data.users.supervisores)) {
+        users.value = data.users.supervisores.map((user) => ({
+          id: user.supervisor_id ?? null,
+          nombre: user.supervisor_nombre ?? "Sin nombre",
+          correo: user.supervisor_correo ?? "Sin correo",
+          ultima_accion:
+            user.supervisor_ultima_accion ?? " ",
+          fecha_accion: user.fecha_accion ?? null,
+          detalle_accion: user.detalle_accion ?? null,
+          proyecto_info: user.proyecto_info ?? null,
+        }));
+      }
+      if (data.users.estadisticas) {
+        usersStats.total_supervisores =
+          data.users.estadisticas.total_supervisores || 0;
+        usersStats.supervisores_con_acciones =
+          data.users.estadisticas.supervisores_con_acciones || 0;
+        usersStats.ultima_accion_estimacion =
+          data.users.estadisticas.ultima_accion_estimacion || 0;
+        usersStats.ultima_accion_evidencia =
+          data.users.estadisticas.ultima_accion_evidencia || 0;
+        usersStats.sin_acciones = data.users.estadisticas.sin_acciones || 0;
+      }
+    }
+  } catch (err) {
+    console.error(err);
+    // si la petición fue cancelada no sobreescribimos el error de UI
+    if (axios.isCancel && axios.isCancel(err)) return;
+    planeacionesError.value = estimacionesError.value = true;
+    planeacionesErrorMessage.value = estimacionesErrorMessage.value =
+      "Error de conexión con el servidor";
+  } finally {
+    loading.value = false;
+  }
 };
+
+const toggleProyecto = (id) => {
+  const key = String(id);
+  if (expandedProjects.value.has(key)) expandedProjects.value.delete(key);
+  else expandedProjects.value.add(key);
+  expandedProjects.value = new Set(Array.from(expandedProjects.value));
+};
+
+const selectTab = (tab) => {
+  activeTab.value = tab;
+};
+
+const badgeClass = (tab) => {
+  if (tab === "proyectos")
+    return activeTab.value === "proyectos"
+      ? "bg-blue-100 text-blue-800"
+      : "bg-gray-100 text-gray-800";
+  return activeTab.value === "estimaciones"
+    ? "bg-green-100 text-green-800"
+    : "bg-gray-100 text-gray-800";
+};
+
+const formatMoney = (amount) => {
+  return new Intl.NumberFormat("es-MX", {
+    style: "currency",
+    currency: "MXN",
+    minimumFractionDigits: 2,
+  }).format(Number(amount) || 0);
+};
+const formatDate = (s) => {
+  if (!s) return "--";
+  return new Date(s).toLocaleDateString("es-ES", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+};
+const formatDateTime = (s) => {
+  if (!s) return "--";
+  return new Date(s).toLocaleString("es-ES", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+const formatPercent = (v) => (Number(v) || 0).toFixed(1) + "%";
+const percentColor = (v) =>
+  Number(v) >= 80 ? "#16a34a" : Number(v) >= 50 ? "#f59e0b" : "#ef4444";
+const percentColorClass = (v) =>
+  Number(v) >= 80
+    ? "text-green-600"
+    : Number(v) >= 50
+    ? "text-yellow-600"
+    : "text-red-600";
+
+onMounted(() => {
+  loadDashboardData();
+  activeTab.value = "proyectos";
+});
 </script>
-
 <template>
+  <div class="min-h-screen bg-gray-50">
+    <!-- Header -->
+    <header>
+      <div class="bg-gray-100 py-2">
+        <div class="text-left container mx-auto sm:px-6 lg:px-8">
+          <span class="text-sm text-gray-700 font-bold">COMALCALCO.GOB.MX</span>
+        </div>
+      </div>
 
-  Hola
+      <div style="background-color: #621132" class="shadow-lg">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center h-28">
+            <img
+              src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+              alt="Logo Comalcalco"
+              class="h-24 w-auto object-contain"
+            />
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <!-- Loading Overlay -->
+    <div
+      v-if="loading"
+      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+    >
+      <div class="text-center">
+        <div
+          class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"
+        ></div>
+        <p class="mt-4 text-gray-600">Cargando datos...</p>
+      </div>
+    </div>
+
+    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Stats Cards Grid -->
+      <div class="mb-8 grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div
+          class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg p-6 text-white"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-lg font-medium opacity-90">Total de Proyectos</h2>
+              <p class="text-blue-100 text-sm mt-1">Proyectos en seguimiento</p>
+            </div>
+            <div
+              class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+            >
+              <span class="text-2xl font-bold text-blue-600">{{
+                planeacionesCount
+              }}</span>
+            </div>
+          </div>
+        </div>
+
+        <div
+          class="bg-gradient-to-r from-green-600 to-emerald-700 rounded-lg shadow-lg p-6 text-white"
+        >
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-lg font-medium opacity-90">
+                Total de Estimaciones
+              </h2>
+              <p class="text-green-100 text-sm mt-1">
+                Estimaciones registradas
+              </p>
+            </div>
+            <div
+              class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
+            >
+              <span class="text-2xl font-bold text-green-600">{{
+                estimacionesCount
+              }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Last Updates Grid -->
+      <div class="mb-8 grid grid-cols-1 xl:grid-cols-2 gap-6">
+        <!-- Last Planeación Update -->
+        <div>
+          <div
+            class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-blue-500"
+          >
+            <div class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50">
+              <div class="flex items-center space-x-2">
+                <svg
+                  class="w-5 h-5 text-blue-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                  ></path>
+                </svg>
+                <h3 class="text-lg font-semibold text-gray-900">
+                  Último Avance de Proyecto
+                </h3>
+              </div>
+              <p class="text-sm text-gray-600 mt-1">
+                Registro más reciente de progreso en obra
+              </p>
+            </div>
+
+            <div v-if="!lastPlaneacion" class="px-6 py-8 text-center">
+              <svg
+                class="mx-auto h-12 w-12 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+              <h4 class="mt-2 text-sm font-medium text-gray-900">
+                Sin actualizaciones recientes
+              </h4>
+              <p class="mt-1 text-sm text-gray-500">
+                No se encontraron registros de avances
+              </p>
+            </div>
+
+            <div v-else class="p-6">
+              <div class="space-y-4">
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-blue-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">
+                      Registrado por
+                    </p>
+                    <p class="text-sm text-gray-600 truncate">
+                      {{ lastPlaneacion.name }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-purple-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">Partida</p>
+                    <p class="text-sm text-gray-600">
+                      {{ lastPlaneacion.desc_partida }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-orange-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">Concepto</p>
+                    <p class="text-sm text-gray-600">
+                      <span
+                        class="font-mono text-xs bg-gray-100 px-2 py-1 rounded"
+                        >{{ lastPlaneacion.clave }}</span
+                      >
+                      <span class="ml-2">{{
+                        lastPlaneacion.desc_concepto
+                      }}</span>
+                    </p>
+                  </div>
+                </div>
+
+                <div class="bg-gray-50 rounded-lg p-4">
+                  <div class="flex items-center justify-between mb-2">
+                    <span class="text-sm font-medium text-gray-900"
+                      >Porcentaje de Cumplimiento</span
+                    >
+                    <span
+                      class="text-lg font-bold"
+                      :class="percentColorClass(lastPlaneacion.cumplimiento)"
+                      >{{ formatPercent(lastPlaneacion.cumplimiento) }}</span
+                    >
+                  </div>
+                  <div class="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      class="h-2 rounded-full transition-all duration-300"
+                      :style="{
+                        width: (Number(lastPlaneacion.cumplimiento) || 0) + '%',
+                        backgroundColor: percentColor(
+                          lastPlaneacion.cumplimiento
+                        ),
+                      }"
+                    ></div>
+                  </div>
+                </div>
+
+                <div class="bg-blue-50 rounded-lg p-4">
+                  <div class="flex items-center space-x-2 mb-2">
+                    <svg
+                      class="w-4 h-4 text-blue-600"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-3.582 8-8 8a8.959 8.959 0 01-4.906-1.459L3 21l1.459-5.094A8.959 8.959 0 013 12c0-4.418 3.582-8 8-8s8 3.582 8 8z"
+                      />
+                    </svg>
+                    <span class="text-sm font-medium text-gray-900"
+                      >Descripción del Avance</span
+                    >
+                  </div>
+                  <p class="text-sm text-gray-600 leading-relaxed">
+                    {{ lastPlaneacion.desc_evidencia }}
+                  </p>
+                </div>
+
+                <div class="flex items-center space-x-4 text-xs text-gray-500">
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    <span
+                      >Fecha:
+                      {{ formatDate(lastPlaneacion.fecha_evidencia) }}</span
+                    >
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span
+                      >Registrado:
+                      {{ formatDateTime(lastPlaneacion.created_at) }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Last Estimación Update -->
+        <div>
+          <div
+            class="bg-white rounded-lg shadow-lg overflow-hidden border-l-4 border-green-500"
+          >
+            <div class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50">
+              <div class="flex items-center space-x-2">
+                <svg
+                  class="w-5 h-5 text-green-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                  />
+                </svg>
+                <h3 class="text-lg font-semibold text-gray-900">
+                  Última Estimación Registrada
+                </h3>
+              </div>
+              <p class="text-sm text-gray-600 mt-1">
+                Estimación más reciente del proyecto
+              </p>
+            </div>
+
+            <div v-if="!lastEstimacion" class="px-6 py-8 text-center">
+              <svg
+                class="mx-auto h-12 w-12 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                />
+              </svg>
+              <h4 class="mt-2 text-sm font-medium text-gray-900">
+                Sin estimaciones recientes
+              </h4>
+              <p class="mt-1 text-sm text-gray-500">
+                No se encontraron registros de estimaciones
+              </p>
+            </div>
+
+            <div v-else class="p-6">
+              <div class="space-y-4">
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-green-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">
+                      Número de Estimación
+                    </p>
+                    <p class="text-sm text-gray-600 font-mono">
+                      {{ lastEstimacion.num_estimacion }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="flex items-start space-x-3">
+                  <div class="flex-shrink-0">
+                    <div
+                      class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-4 h-4 text-blue-600"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium text-gray-900">Proyecto</p>
+                    <p class="text-sm text-gray-600">
+                      {{
+                        lastEstimacion.num_proyecto
+                          ? `${lastEstimacion.num_proyecto} - ${lastEstimacion.proyecto}`
+                          : lastEstimacion.proyecto
+                      }}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="bg-green-50 rounded-lg p-4">
+                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                      <p class="text-sm font-medium text-gray-900">
+                        Monto Estimado
+                      </p>
+                      <p class="text-lg font-bold text-green-600">
+                        {{ formatMoney(lastEstimacion.monto_estimacion) }}
+                      </p>
+                    </div>
+                    <div>
+                      <p class="text-sm font-medium text-gray-900">
+                        Monto Acumulado
+                      </p>
+                      <p class="text-lg font-bold text-green-700">
+                        {{ formatMoney(lastEstimacion.monto_acumulado) }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="flex items-center space-x-4 text-xs text-gray-500">
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                      />
+                    </svg>
+                    <span
+                      >Periodo: {{ lastEstimacion.periodo_estimacion }}</span
+                    >
+                  </div>
+                  <div class="flex items-center space-x-1">
+                    <svg
+                      class="w-3 h-3"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                      />
+                    </svg>
+                    <span
+                      >Registrado:
+                      {{ formatDateTime(lastEstimacion.created_at) }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tabbed Interface -->
+      <div class="bg-white rounded-lg shadow-lg overflow-hidden">
+        <div class="border-b border-gray-200">
+          <nav class="flex space-x-8 px-6" aria-label="Tabs">
+            <button
+              @click="selectTab('proyectos')"
+              class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
+            >
+              <svg
+                class="w-5 h-5 inline-block mr-2 -mt-0.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                />
+              </svg>
+              Lista de Proyectos
+              <span
+                :class="badgeClass('proyectos')"
+                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
+                >{{ planeacionesCount }}</span
+              >
+            </button>
+
+            <button
+              @click="selectTab('estimaciones')"
+              class="tab-button py-4 px-1 text-sm font-medium whitespace-nowrap"
+            >
+              <svg
+                class="w-5 h-5 inline-block mr-2 -mt-0.5"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+                />
+              </svg>
+              Lista de Estimaciones
+              <span
+                :class="badgeClass('estimaciones')"
+                class="ml-2 px-2.5 py-0.5 rounded-full text-xs font-medium"
+                >{{ estimacionesCount }}</span
+              >
+            </button>
+          </nav>
+        </div>
+
+        <!-- Proyectos Tab -->
+        <div v-show="activeTab === 'proyectos'" class="tab-content">
+          <div
+            class="px-6 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-200"
+          >
+            <h3 class="text-lg font-medium text-gray-900">
+              Gestión de Proyectos
+            </h3>
+            <p class="text-sm text-gray-600 mt-1">
+              Seguimiento detallado del progreso de cada proyecto
+            </p>
+          </div>
+
+          <div v-if="planeacionesError" class="text-center py-12">
+            <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 proyectos
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              {{ planeacionesErrorMessage }}
+            </p>
+            <button
+              @click="loadDashboardData"
+              class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors"
+            >
+              Reintentar
+            </button>
+          </div>
+
+          <div
+            v-else-if="!planeaciones || !planeaciones.length"
+            class="text-center py-12"
+          >
+            <svg
+              class="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+              />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              No hay proyectos
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              Comenzar agregando un nuevo proyecto.
+            </p>
+          </div>
+
+          <div v-else class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
+                  >
+                    Número
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Proyecto
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
+                  >
+                    Progreso
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white divide-y divide-gray-200">
+                <tr
+                  v-for="(p, idx) in planeaciones"
+                  :key="p.id ?? idx"
+                  class="hover:bg-gray-50 transition-colors"
+                >
+                  <td
+                    class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-mono"
+                  >
+                    {{ p.num_proyecto || "--" }}
+                  </td>
+                  <td class="px-6 py-4 text-sm text-gray-900">
+                    <div class="max-w-md truncate" :title="p.proyecto">
+                      {{ p.proyecto || "--" }}
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm">
+                    <div class="flex items-center space-x-3">
+                      <div
+                        class="flex-1 bg-gray-200 rounded-full h-2 min-w-[100px]"
+                      >
+                        <div
+                          class="h-2 rounded-full bg-blue-600 transition-all duration-300"
+                          :style="{
+                            width: (Number(p.cumplimiento_total) || 0) + '%',
+                          }"
+                        ></div>
+                      </div>
+                      <span
+                        class="text-sm font-medium text-gray-900 min-w-[60px] text-right"
+                        >{{
+                          (Number(p.cumplimiento_total) || 0).toFixed(1)
+                        }}%</span
+                      >
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Estimaciones Tab -->
+        <div v-show="activeTab === 'estimaciones'" class="tab-content">
+          <div
+            class="px-6 py-4 bg-gradient-to-r from-green-50 to-emerald-50 border-b border-gray-200"
+          >
+            <h3 class="text-lg font-medium text-gray-900">
+              Gestión de Estimaciones
+            </h3>
+            <p class="text-sm text-gray-600 mt-1">
+              Estimaciones detalladas por proyecto, concepto y partida
+            </p>
+          </div>
+
+          <div v-if="estimacionesError" class="text-center py-12">
+            <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 estimaciones
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              {{ estimacionesErrorMessage }}
+            </p>
+            <button
+              @click="loadDashboardData"
+              class="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition-colors"
+            >
+              Reintentar
+            </button>
+          </div>
+
+          <div
+            v-else-if="!estimacionesGroupedKeys.length"
+            class="text-center py-12"
+          >
+            <svg
+              class="mx-auto h-12 w-12 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 8c-1.657 0-3-.895-3-2s1.343-2 3-2 3 .895 3 2-1.343 2-3 2zm0 0v.01M12 8v8a2 2 0 002 2h2a2 2 0 002-2V8h-6z"
+              />
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">
+              No hay estimaciones
+            </h3>
+            <p class="mt-1 text-sm text-gray-500">
+              Comenzar agregando una nueva estimación.
+            </p>
+          </div>
+
+          <div v-else class="overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+              <thead class="bg-gray-50">
+                <tr>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-16"
+                  ></th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                  >
+                    Proyecto / Estimación
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32"
+                  >
+                    Estimación
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-48"
+                  >
+                    Período
+                  </th>
+                  <th
+                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-40"
+                  >
+                    Monto
+                  </th>
+                </tr>
+              </thead>
+              <tbody class="bg-white">
+                <template
+                  v-for="proyectoId in estimacionesGroupedKeys"
+                  :key="proyectoId"
+                >
+                  <tr
+                    class="proyecto-row border-b-2 border-gray-100 hover:bg-blue-50 cursor-pointer"
+                    @click="toggleProyecto(proyectoId)"
+                  >
+                    <td class="px-6 py-4 text-center">
+                      <svg
+                        :class="{
+                          'transform rotate-180': expandedProjects.has(
+                            String(proyectoId)
+                          ),
+                        }"
+                        class="w-4 h-4 text-gray-400 transition-transform duration-200"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M19 9l-7 7-7-7"
+                        ></path>
+                      </svg>
+                    </td>
+                    <td class="px-6 py-4">
+                      <div class="font-bold text-gray-900">
+                        {{
+                          estimacionesGrouped[proyectoId].proyecto
+                            .num_proyecto || "--"
+                        }}
+                      </div>
+                      <div class="text-sm text-gray-600 mt-1 leading-tight">
+                        {{
+                          estimacionesGrouped[proyectoId].proyecto.proyecto ||
+                          "--"
+                        }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4 text-center">
+                      <div class="text-sm font-medium text-gray-700">
+                        {{
+                          estimacionesGrouped[proyectoId].estimaciones.length
+                        }}
+                        Estimación{{
+                          estimacionesGrouped[proyectoId].estimaciones.length >
+                          1
+                            ? "es"
+                            : ""
+                        }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-4"></td>
+                    <td class="px-6 py-4"></td>
+                  </tr>
+
+                  <tr
+                    v-for="(est, idx) in estimacionesGrouped[proyectoId]
+                      .estimaciones"
+                    :key="`${proyectoId}-${idx}`"
+                    v-show="expandedProjects.has(String(proyectoId))"
+                    class="estimacion-row hover:bg-gray-50 border-b border-gray-100"
+                  >
+                    <td class="px-6 py-3"></td>
+                    <td class="px-6 py-3 pl-12">
+                      <div class="text-sm text-gray-700">{{ idx + 1 }}</div>
+                      <div class="text-xs text-gray-500">
+                        {{ formatDate(est.created_at) }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-3 text-center">
+                      <div class="text-sm font-medium">{{ idx + 1 }}</div>
+                    </td>
+                    <td class="px-6 py-3">
+                      <div class="text-sm font-medium text-gray-900">
+                        {{ (est.periodo_estimacion || "--").toUpperCase() }}
+                      </div>
+                    </td>
+                    <td class="px-6 py-3">
+                      <div class="text-sm font-semibold text-gray-900">
+                        {{ formatMoney(est.monto_estimacion) }}
+                      </div>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div class="bg-white shadow rounded-lg p-6">
+          <h3 class="font-semibold text-lg">Sin avances</h3>
+          <p class="mt-2 text-gray-600">
+            Total:
+            <span class="font-bold text-red-600">{{
+              counters.sin_avances.count
+            }}</span>
+          </p>
+        </div>
+        <div class="bg-white shadow rounded-lg p-6">
+          <h3 class="font-semibold text-lg">Finalizadas</h3>
+          <p class="mt-2 text-gray-600">
+            Total:
+            <span class="font-bold text-red-600">{{
+              counters.finalizadas.count
+            }}</span>
+          </p>
+        </div>
+        <div class="bg-white shadow rounded-lg p-6">
+          <h3 class="font-semibold text-lg">Obras abiertas</h3>
+          <p class="mt-2 text-gray-600">
+            Total:
+            <span class="font-bold text-red-600">{{
+              counters.abiertas.count
+            }}</span>
+          </p>
+        </div>
+      </div>
+      <div class="mb-8">
+        <ObrasMap :counters="counters" />
+      </div>
+
+      <div class="mt-8 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">
+          <h3 class="text-lg font-medium text-gray-900">Supervisores y sus Últimas Acciones - Últimos 30 Días</h3>
+          <p class="text-sm text-gray-600 mt-1">Registro de actividad de supervisores en proyectos</p>
+        </div>
+
+        <div class="overflow-x-auto">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Supervisor
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Tipo Acción
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Detalle Acción
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Fecha
+                </th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                  Proyecto
+                </th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              <tr v-for="supervisor in users" :key="supervisor.id" class="hover:bg-gray-50 transition-colors">
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 h-10 w-10">
+                      <div class="h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
+                        <span class="text-sm font-medium text-gray-700">
+                          {{ supervisor.nombre.split(' ').map(n => n.charAt(0)).join('').substring(0, 2).toUpperCase() }}
+                        </span>
+                      </div>
+                    </div>
+                    <div class="ml-4">
+                      <div class="text-sm font-medium text-gray-900">{{ supervisor.nombre }}</div>
+                      <div class="text-sm text-gray-500">{{ supervisor.correo }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4">
+                  <div class="text-sm text-gray-900">{{ supervisor.ultima_accion }}</div>
+                  <div v-if="supervisor.ultima_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.ultima_accion">
+                    {{ supervisor.ultima_accion }}
+                  </div>
+                </td>
+                <td class="px-6 py-4">
+                  <div class="text-sm text-gray-900">{{ supervisor.detalle_accion }}</div>
+                  <div v-if="supervisor.detalle_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.detalle_accion">
+                    {{ supervisor.detalle_accion }}
+                  </div>
+                </td>
+                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                  {{ supervisor.fecha_accion ? formatDateTime(supervisor.fecha_accion) : '--' }}
+                </td>
+                <td class="px-6 py-4">
+                  <div v-if="supervisor.proyecto_info" class="text-sm text-gray-900 max-w-xs truncate" :title="supervisor.proyecto_info">
+                    {{ supervisor.proyecto_info }}
+                  </div>
+                  <div v-else class="text-sm text-gray-500">--</div>
+                </td>
+              </tr>
+
+              <!-- Empty state -->
+              <tr v-if="!users.length">
+                <td colspan="5" class="px-6 py-8 text-center">
+                  <div class="text-gray-500">No hay supervisores registrados</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/routes/api.php b/routes/api.php
index 4851d4c..5472386 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -20,7 +20,7 @@
     return $request->user();
 });
 
-Route::middleware(['throttle:60,1'])->get('/reporte-especial', [TramiteController::class, 'tramiteEspecial']);
-
-Route::middleware(['throttle:60,1'])->get('/reporte-obras', [ObrasController::class, 'Obras']);
-
+Route::middleware('api')->group(function () {
+    Route::get('/reporte-obras', [ObrasController::class, 'Obras'])->middleware(['throttle:60,1']);
+    Route::get('/reporte-especial', [TramiteController::class, 'tramiteEspecial'])->middleware(['throttle:60,1']);
+});