diff --git a/app/Http/Controllers/Dashboard/AtencionController.php b/app/Http/Controllers/Dashboard/AtencionController.php
new file mode 100644
index 0000000..090b263
--- /dev/null
+++ b/app/Http/Controllers/Dashboard/AtencionController.php
@@ -0,0 +1,65 @@
+<?php namespace App\Http\Controllers\Dashboard;
+
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller as BaseController;
+use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Facades\Log;
+
+class AtencionController extends BaseController
+{
+    public function Atencion(Request $request)
+    {
+        $query = $request->only(['start', 'end', 'type', 'action']);
+        $input = array_merge(['action' => 'index', 'type' => 'api'], $query);
+
+        $startDate = $input['start'] ?? date('Y-01-01');
+        $endDate = $input['end'] ?? date('Y-12-31');
+
+        $baseParams = [
+            'start_date' => $startDate,
+            'end_date' => $endDate,
+            'type' => $input['type'] ?? 'api',
+            'action' => $input['action'] ?? 'index',
+        ];
+
+        $baseUrl   = 'https://apoyos.comalcalco.gob.mx/beneficiaries/stats-by-date-range';
+        $countsUrl = 'https://apoyos.comalcalco.gob.mx/beneficiaries/counts-by-date';
+
+        try{
+          $response = Http::get($baseUrl, $baseParams);
+
+          if(!$response->successful()){
+            return response()->json(['error' => 'Error del servicio'], $response->status());
+          }
+
+          $mainData = $response->json();
+          $countsAc = [];
+          try{
+            $countsResp = Http::get($countsUrl, [
+              'start_date' => $startDate,
+              'end_date' => $endDate,
+            ]);
+
+            if($countsResp->successful()){
+              $countsAc = $countsResp->json();
+            } else {
+              Log::error('Error al obtener los conteos de atención', ['status' => $countsResp->status()]);
+            }
+          }catch (\Exception $e) {
+            Log::error('Error al obtener los conteos de atención', ['exception' => $e->getMessage()]);
+          }
+
+          $combinedData = array_merge(
+            is_array($mainData) ? $mainData : [],
+            [
+              'counts' => $countsAc,
+            ]
+          );
+          return response()->json($combinedData, 200)
+              ->header('Content-Type', 'application/json');
+        }catch (\Exception $e) {
+          Log::error('Error en la consulta de atención', ['exception' => $e->getMessage()]);
+          return response()->json(['error' => 'Error en la consulta de atención'], 500);
+        }
+    }
+}
diff --git a/resources/js/Pages/Dashboard/AtencionCiudadana.vue b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
index 36f021e..67879d4 100644
--- a/resources/js/Pages/Dashboard/AtencionCiudadana.vue
+++ b/resources/js/Pages/Dashboard/AtencionCiudadana.vue
@@ -1,278 +1,406 @@
 <script setup>
-import { ref, watch, onMounted, computed } from "vue";
+import { ref, watch, onMounted } from "vue";
+
 import axios from "axios";
 import DateRange from "@/Components/Dashboard/Form/DateRange.vue";
 import Bars from "@/Components/Dashboard/Charts/Bars.vue";
-import { data } from "autoprefixer";
+import Pie from "@/Components/Dashboard/Charts/Pie.vue";
+import Lines from "@/Components/Dashboard/Charts/Lines.vue";
 
-const dateRange = ref({
-  start: new Date().toISOString().slice(0, 10),
-  end: new Date().toISOString().slice(0, 10),
-});
+const fmtToday = () => new Date().toISOString().slice(0, 10);
+const today = fmtToday();
+
+const dateRange = ref({ start: today, end: today });
 
 const loading = ref(false);
 const error = ref(null);
-const raw = ref([]);
-
-// Toggle para usar datos falsos
-const USE_MOCK = ref(false);
-
-// Tipos de apoyo (inventados)
-const supportTypes = [
-  "Despensas",
-  "Despensas Funerarias",
-  "Laboratorio",
-  "Rayos X",
-  "USG",
-];
-
-// Distribución por defecto para mock (suman 1)
-const mockDistribution = [0.35, 0.08, 0.2, 0.22, 0.15];
-
-const buildMockCounts = (total) => {
-  const counts = supportTypes.map((_, i) =>
-    Math.round(total * (mockDistribution[i] || 0))
-  );
-  // Ajustar diferencia por redondeo
-  const diff = total - counts.reduce((s, v) => s + v, 0);
-  if (diff !== 0) counts[0] += diff;
-  return counts;
-};
-
-// helpers para sumar por rango
-const isoDate = (d) => new Date(d + "T00:00:00");
-const totalForRange = (startIso, endIso) => {
-  const s = isoDate(startIso);
-  const e = isoDate(endIso);
-  return raw.value.reduce((acc, r) => {
-    const rd = isoDate(r.date);
-    if (rd >= s && rd <= e) acc += Number(r.available || 0);
-    return acc;
-  }, 0);
-};
-
-const dayStart = (iso) => iso; // ya vienen en formato YYYY-MM-DD
-const weekStartFrom = (endIso) => {
-  const d = new Date(endIso + "T00:00:00");
-  d.setDate(d.getDate() - 6); // 7 días inclusive
-  return d.toISOString().slice(0, 10);
-};
-const monthRangeFrom = (endIso) => {
-  const d = new Date(endIso + "T00:00:00");
-  d.setDate(1);
-  return d.toISOString().slice(0, 10);
-};
-
-// Construye chartData ahora por tipos de apoyo
-const chartData = computed(() => {
-  const colors = ["#ef4444", "#3b82f6", "#f59e0b"];
-
-  if(USE_MOCK.value) {
-    const todayCounts = buildMockCounts(20);
-    const weekCounts = buildMockCounts(100);
-    const monthCounts = buildMockCounts(400);
-    return {
-      labels: supportTypes,
-      datasets: [
-        { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
-        { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
-        { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
-      ],
-    }
-  }
-  const end = dateRange.value.end;
-  const todayTotal = totalForRange(end, end);
-  const weekTotal = totalForRange(end, weekStartFrom(end));
-  const monthTotal = totalForRange(end, monthRangeFrom(end));
-
-  const todayCounts = buildMockCounts(todayTotal || 0);
-  const weekCounts = buildMockCounts(weekTotal || 0);
-  const monthCounts = buildMockCounts(monthTotal || 0);
-
-  return {
-    labels: supportTypes,
-    datasets: [
-      { label: "Hoy", data: todayCounts, backgroundColor: colors[0] },
-      { label: "Semana", data: weekCounts, backgroundColor: colors[1] },
-      { label: "Mes", data: monthCounts, backgroundColor: colors[2] },
-    ],
-  }
-});
+let debounceId = null;
+let cancelTokenSource = null;
 
+const totals = ref({ day: null, week: null, month: null });
 
+const tipoChart = ref({ labels: [], datasets: [] });
+const generoChart = ref({ labels: [], datasets: [] });
+const edadChart = ref({ labels: [], datasets: [] });
 const chartOptions = {
   responsive: true,
-  maintainAspectRatio: false,
   scales: {
-    x: { stacked: false },
+    x: { beginAtZero: true },
     y: { beginAtZero: true },
   },
 };
 
-const buildEmptyRange = (start, end) => {
-  const s = new Date(start);
-  const e = new Date(end);
-  const list = [];
-  for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
-    list.push({
-      date: new Date(d).toISOString().slice(0, 10),
-      available: 0,
-      unavailable: 0,
-    });
-  }
-  return list;
+const normalizeResponse = (res) => {
+  const main = res?.data ?? {};
+  const counts = res?.counts ?? res?.counts_ac ?? [];
+
+  const porTipo =
+    main?.por_tipo_apoyo ??
+    main?.data?.por_tipo_apoyo ??
+    counts?.data?.por_tipo_apoyo ??
+    counts?.por_tipo_apoyo ??
+    {};
+
+  const porGenero =
+    main?.por_genero ??
+    main?.data?.por_genero ??
+    counts?.data?.por_genero ??
+    {};
+  const porEdad =
+    main?.por_rango_edad ??
+    main?.data?.por_rango_edad ??
+    counts?.data?.por_rango_edad ??
+    {};
+  const totalsShape = counts?.data_ac ?? counts?.data ?? counts ?? {};
+  return {
+    porGenero,
+    porEdad,
+    porTipo,
+    totalsShape,
+  };
 };
 
-const mapApiToSeries = (items, start, end) => {
-  const base = buildEmptyRange(start, end);
-  const byDate = {};
-  (items || []).forEach((it) => {
-    const key = (it.date || it.fecha || it.day || "").slice(0, 10);
-    if (key)
-      byDate[key] = {
-        date: key,
-        available: Number(
-          it.available ?? it.disponibles ?? it.available_count ?? 0
-        ),
-      };
-  });
-  return base.map((b) => byDate[b.date] || b);
+const buildTipoChart = (porTipo) => {
+  const labels = Object.keys(porTipo || {});
+  const values = labels.map((k) => Number(porTipo[k] ?? 0));
+  tipoChart.value = {
+    labels,
+    datasets: [
+      {
+        label: "Apoyos entregados",
+        data: values,
+        backgroundColor: ["#3b82f6"],
+      },
+    ],
+  };
 };
 
-const loadData = async () => {
+const buildGeneroChart = (porGenero) => {
+  const map = {
+    hombres: porGenero?.hombres ?? porGenero?.Hombres ?? porGenero?.Hombre ?? 0,
+    mujeres: porGenero?.mujeres ?? porGenero?.Mujeres ?? porGenero?.Mujer ?? 0,
+  };
+  const labels = ["Hombres", "Mujeres"];
+  const values = [Number(map.hombres || 0), Number(map.mujeres || 0)];
+  generoChart.value = {
+    labels,
+    datasets: [
+      {
+        label: "Beneficiarios por género",
+        data: values,
+        backgroundColor: ["#3b82f6", "#fb7185"],
+      },
+    ],
+  };
+};
+
+const buildEdadChart = (porEdad) => {
+  // orden predecible para la X de la gráfica
+  const ORDER = [
+    "0-17",
+    "18-29",
+    "30-39",
+    "40-49",
+    "50-59",
+    "60-69",
+    "70+",
+    "sin_fecha",
+  ];
+  const labels = ORDER.filter((k) =>
+    Object.prototype.hasOwnProperty.call(porEdad || {}, k)
+  );
+  // si no hay claves exactamente como ORDER, fallback a keys actuales
+  const finalLabels = labels.length ? labels : Object.keys(porEdad || {});
+  const values = finalLabels.map((k) => Number(porEdad[k] ?? 0));
+  const color = "#10B981"; // verde
+  edadChart.value = {
+    labels: finalLabels,
+    datasets: [
+      {
+        label: "Beneficiarios por rango de edad",
+        data: values,
+        borderColor: color,
+        backgroundColor: "rgba(16,185,129,0.12)",
+        fill: true,
+        tension: 0.3,
+        pointRadius: 3,
+      },
+    ],
+  };
+};
+
+const load = async () => {
   loading.value = true;
   error.value = null;
+
+  if (cancelTokenSource) {
+    try {
+      cancelTokenSource.cancel("cancel");
+    } catch (e) {}
+  }
+  cancelTokenSource = axios.CancelToken.source();
+
   try {
-    const res = await axios.get("/api/atencion-ciudadana", {
-      params: {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-      },
+    const res = await axios.get("/api/reporte-atencion", {
+      params: { start: dateRange.value.start, end: dateRange.value.end },
+      cancelToken: cancelTokenSource.token,
       headers: { "X-Requested-With": "XMLHttpRequest" },
     });
-    const payload = res.data;
-    const items = payload?.data ?? payload?.items ?? payload ?? [];
-    raw.value = mapApiToSeries(
-      Array.isArray(items) ? items : [],
-      dateRange.value.start,
-      dateRange.value.end
-    );
+
+    const payload = res.data || {};
+    const { porTipo, porGenero, porEdad, totalsShape } =
+      normalizeResponse(payload);
+
+    totals.value.day = totalsShape?.today ?? totalsShape?.dia ?? null;
+    totals.value.week = totalsShape?.week ?? totalsShape?.semana ?? null;
+    totals.value.month = totalsShape?.month ?? totalsShape?.mes ?? null;
+
+    buildTipoChart(porTipo);
+    buildGeneroChart(porGenero);
+    buildEdadChart(porEdad);
   } catch (e) {
-    console.error(e);
-    error.value =
-      e.response?.data?.message || e.message || "Error al cargar datos";
-    raw.value = mapApiToSeries([], dateRange.value.start, dateRange.value.end);
+    if (!(axios.isCancel && axios.isCancel(e))) {
+      console.error(e);
+      error.value =
+        e.response?.data?.error || e.message || "Error al cargar datos";
+      tipoChart.value = { labels: [], datasets: [] };
+      generoChart.value = { labels: [], datasets: [] };
+      edadChart.value = { labels: [], datasets: [] };
+      totals.value = { day: null, week: null, month: null };
+    }
   } finally {
     loading.value = false;
   }
 };
 
-watch(dateRange, loadData, { deep: true });
-onMounted(loadData);
+watch(
+  dateRange,
+  () => {
+    clearTimeout(debounceId);
+    debounceId = setTimeout(load, 300);
+  },
+  { deep: true }
+);
+
+onMounted(load);
 </script>
 
 <template>
-  <div class="min-h-screen bg-gray-50">
-    <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 class="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+    <header class="relative">
+      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-bold text-gray-800 tracking-wide">COMALCALCO.GOB.MX</span>
+          </div>
         </div>
       </div>
 
-      <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
+        style="background: linear-gradient(135deg, #621132 0%, #7d1a42 50%, #621132 100%)"
+        class="shadow-xl relative overflow-hidden"
+      >
+        <!-- Patrón decorativo de fondo -->
+        <div class="absolute inset-0 opacity-10">
+          <div class="absolute top-0 left-0 w-full h-full"
+               style="background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);"></div>
+        </div>
+
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+          <div class="flex items-center justify-between h-32">
+            <div class="flex items-center space-x-4">
+              <img
+                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                alt="Logo Comalcalco"
+                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+              />
+              <div class="hidden md:block">
+                <h1 class="text-2xl font-bold text-white">Atención Ciudadana y DIF</h1>
+                <p class="text-blue-100 text-sm">Sistema de seguimiento de apoyos</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </header>
 
-    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
-      <div class="bg-white rounded-lg shadow p-6">
-        <h1 class="text-xl font-semibold mb-4">Atención Ciudadana</h1>
+    <!-- Loading overlay mejorado -->
+    <div
+      v-if="loading"
+      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
+    >
+      <div class="text-center">
+        <div class="relative">
+          <div class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"></div>
+        </div>
+        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
+      </div>
+    </div>
 
-        <div class="mb-4">
+    <section class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Controles mejorados -->
+      <div class="mb-8 flex flex-col sm:flex-row items-start sm:items-center gap-4 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
+        <div class="flex-1">
+          <h2 class="text-lg font-semibold text-gray-900 mb-2">Filtros de fecha</h2>
           <DateRange v-model="dateRange" :presets="true" />
-          <!-- Toggle para usar datos falsos -->
-          <label class="inline-flex items-center text-sm text-gray-600 ml-4">
-            <input type="checkbox" v-model="USE_MOCK" class="mr-2 rounded border-gray-300" />
-            Usar datos falsos
-          </label>
         </div>
 
-        <div class="mb-4 flex items-center gap-4">
-          <div v-if="loading" class="ml-auto text-sm text-gray-500">
-            Cargando...
+        <div class="flex items-center space-x-4">
+          <div v-if="loading" class="flex items-center text-blue-600">
+            <div class="animate-spin h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full mr-2"></div>
+            <span class="text-sm font-medium">Cargando...</span>
           </div>
-          <div v-if="error" class="ml-auto text-sm text-red-600">
-            {{ error }}
+          <div v-if="error" class="flex items-center text-red-600">
+            <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-sm font-medium">{{ error }}</span>
           </div>
         </div>
-
-        <div class="h-64">
-          <Bars :chartData="chartData" :chartOptions="chartOptions" />
-        </div>
       </div>
-    </section>
 
-    <section>
-      <div class="min-h-screen bg-gray-50">
-        <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <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">Apoyos Mes</h2>
-                  <span >Entregados en el mes</span>
-                </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">20</span>
+      <!-- Cards mejoradas -->
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
+        <div class="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-center space-x-2 mb-2">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+                  </svg>
+                  <h3 class="text-sm font-semibold opacity-90">Apoyos del Mes</h3>
                 </div>
+                <p class="text-3xl font-bold">{{ totals.month ?? "--" }}</p>
+                <p class="text-xs text-blue-100 mt-1">Total mensual</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
+                </svg>
               </div>
             </div>
-            <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">Apoyos Semana</h2>
-                  <span class="text-sm">Entregados en la semana</span>
-                </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">20</span>
+          </div>
+        </div>
+
+        <div class="bg-gradient-to-br from-emerald-500 to-emerald-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-center space-x-2 mb-2">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
+                  </svg>
+                  <h3 class="text-sm font-semibold opacity-90">Apoyos Semanales</h3>
                 </div>
+                <p class="text-3xl font-bold">{{ totals.week ?? "--" }}</p>
+                <p class="text-xs text-emerald-100 mt-1">Últimos 7 días</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
+                </svg>
               </div>
             </div>
-            <div
-              class="bg-gradient-to-r from-yellow-600 to-amber-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">Apoyos Hoy</h2>
-                  <span class="text-sm">Entregados hoy</span>
-                </div>
-                <div
-                  class="bg-white rounded-full w-16 h-16 flex items-center justify-center"
-                >
-                  <span class="text-2xl font-bold text-amber-600">20</span>
+          </div>
+        </div>
+
+        <div class="bg-gradient-to-br from-amber-500 to-amber-600 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+          <div class="p-6 text-white">
+            <div class="flex items-center justify-between">
+              <div>
+                <div class="flex items-center space-x-2 mb-2">
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 102 0V9a1 1 0 10-2 0v3zm2-8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
+                  </svg>
+                  <h3 class="text-sm font-semibold opacity-90">Apoyos de Hoy</h3>
                 </div>
+                <p class="text-3xl font-bold">{{ totals.day ?? "--" }}</p>
+                <p class="text-xs text-amber-100 mt-1">En el día actual</p>
+              </div>
+              <div class="bg-white/20 rounded-full p-3">
+                <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 12a1 1 0 102 0V9a1 1 0 10-2 0v3zm2-8a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
+                </svg>
               </div>
             </div>
           </div>
         </div>
       </div>
+
+      <!-- Contenedor de gráficas mejorado -->
+      <div class="max-w-7xl mx-auto">
+        <!-- Gráfica principal -->
+        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-8 mb-8 transition-all duration-300 hover:shadow-2xl">
+          <div class="text-center mb-8">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl mb-4 shadow-lg">
+              <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+              </svg>
+            </div>
+            <h2 class="text-2xl font-bold text-gray-900 mb-2">Distribución por Tipo de Apoyo</h2>
+            <p class="text-gray-600">Análisis detallado de los tipos de apoyos otorgados</p>
+          </div>
+          <div class="h-96">
+            <Bars :chartData="tipoChart" :chartOptions="chartOptions" />
+          </div>
+        </div>
+
+        <!-- Gráficas secundarias -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl">
+            <div class="text-center mb-6">
+              <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-pink-500 to-rose-600 rounded-xl mb-4 shadow-lg">
+                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-bold text-gray-900 mb-1">Distribución por Género</h3>
+              <p class="text-sm text-gray-600">Beneficiarios por género</p>
+            </div>
+            <div>
+              <Pie
+                :chartData="generoChart"
+                :chartOptions="{ responsive: true, maintainAspectRatio: false }"
+              />
+            </div>
+          </div>
+
+          <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-6 transition-all duration-300 hover:shadow-2xl">
+            <div class="text-center mb-6">
+              <div class="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-emerald-500 to-teal-600 rounded-xl mb-4 shadow-lg">
+                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                </svg>
+              </div>
+              <h3 class="text-lg font-bold text-gray-900 mb-1">Distribución por Edad</h3>
+              <p class="text-sm text-gray-600">Beneficiarios por rango etario</p>
+            </div>
+            <div class="h-64">
+              <Lines
+                :chartData="edadChart"
+                :chartOptions="{
+                  responsive: true,
+                  maintainAspectRatio: false,
+                  plugins: {
+                    legend: {
+                      position: 'bottom'
+                    }
+                  }
+                }"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
     </section>
+
+    <!-- Footer mejorado -->
+    <footer class="bg-gradient-to-r from-gray-800 to-gray-900 text-white py-8 mt-16">
+      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex flex-col md:flex-row justify-between items-center">
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
diff --git a/resources/js/Pages/Dashboard/Index.vue b/resources/js/Pages/Dashboard/Index.vue
index 9f348df..bfc6dbd 100644
--- a/resources/js/Pages/Dashboard/Index.vue
+++ b/resources/js/Pages/Dashboard/Index.vue
@@ -83,7 +83,7 @@ const logout = () => {
 
           <!-- Botón 2 -->
           <a
-            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=1&period=week&type=almacen"
+            :href="route('dashboard.api-atencion')"
             target="_blank"
             class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 active:scale-[0.99]"
             aria-label="Ir al sitio 2"
@@ -93,9 +93,9 @@ const logout = () => {
                 <GoogleIcon name="open_in_new" class="text-white" />
               </span>
               <div class="min-w-0">
-                <h2 class="font-semibold text-white">Apoyo a Beneficiarios</h2>
+                <h2 class="font-semibold text-white">Apoyo a Beneficiarios y DIF</h2>
                 <p class="text-sm text-slate-300">
-                  Dashboard de apoyo a Beneficiarios
+                 Gráficas de apoyo a Beneficiarios y DIF
                 </p>
               </div>
             </div>
@@ -141,7 +141,7 @@ const logout = () => {
 
           <!-- Botón 4 -->
           <a
-            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=3&period=week&type=almacen"
+            href="https://apoyos.comalcalco.gob.mx/beneficiaries/dashboard?department=&period=week&type=almacen"
             target="_blank"
             class="group relative overflow-hidden rounded-2xl border border-white/10 bg-white/10 p-4 sm:p-5 transition hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 active:scale-[0.99]"
             aria-label="Ir al sitio 4"
@@ -151,8 +151,8 @@ const logout = () => {
                 <GoogleIcon name="open_in_new" class="text-white" />
               </span>
               <div class="min-w-0">
-                <h2 class="font-semibold text-white">DIF</h2>
-                <p class="text-sm text-slate-300">Dashboard de DIF</p>
+                <h2 class="font-semibold text-white">Información de Apoyos a Beneficiarios y DIF</h2>
+                <p class="text-sm text-slate-300"></p>
               </div>
             </div>
             <span
diff --git a/resources/js/Pages/Dashboard/Obras.vue b/resources/js/Pages/Dashboard/Obras.vue
index c81bd37..29f287c 100644
--- a/resources/js/Pages/Dashboard/Obras.vue
+++ b/resources/js/Pages/Dashboard/Obras.vue
@@ -291,21 +291,61 @@ onMounted(() => {
 <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>
+    <header class="relative">
+      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-bold text-gray-800 tracking-wide"
+              >COMALCALCO.GOB.MX</span
+            >
+          </div>
         </div>
       </div>
 
-      <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
+        style="
+          background: linear-gradient(
+            135deg,
+            #621132 0%,
+            #7d1a42 50%,
+            #621132 100%
+          );
+        "
+        class="shadow-xl relative overflow-hidden"
+      >
+        <!-- Patrón decorativo de fondo -->
+        <div class="absolute inset-0 opacity-10">
+          <div
+            class="absolute top-0 left-0 w-full h-full"
+            style="
+              background-image: repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 35px,
+                rgba(255, 255, 255, 0.1) 35px,
+                rgba(255, 255, 255, 0.1) 70px
+              );
+            "
+          ></div>
+        </div>
+
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+          <div class="flex items-center justify-between h-32">
+            <div class="flex items-center space-x-4">
+              <img
+                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                alt="Logo Comalcalco"
+                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+              />
+              <div class="hidden md:block">
+                <h1 class="text-2xl font-bold text-white">
+                  Información de Obras
+                </h1>
+                <p class="text-blue-100 text-sm">
+                  Sistema de seguimiento de obras
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -314,13 +354,15 @@ onMounted(() => {
     <!-- Loading Overlay -->
     <div
       v-if="loading"
-      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
     >
       <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 class="relative">
+          <div
+            class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
+          ></div>
+        </div>
+        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
       </div>
     </div>
 
@@ -1198,65 +1240,116 @@ onMounted(() => {
       </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
+          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">
+                <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">
+                <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">
+                <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">
+                <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">
+                <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">
+              <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">
+                      <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() }}
+                          {{
+                            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 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 v-if="supervisor.ultima_accion" class="text-xs text-gray-500 mt-1 max-w-xs truncate" :title="supervisor.ultima_accion">
+                  <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">
+                  <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) : '--' }}
+                  {{
+                    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">
+                  <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>
@@ -1266,7 +1359,9 @@ onMounted(() => {
               <!-- 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>
+                  <div class="text-gray-500">
+                    No hay supervisores registrados
+                  </div>
                 </td>
               </tr>
             </tbody>
diff --git a/resources/js/Pages/Dashboard/Tramites.vue b/resources/js/Pages/Dashboard/Tramites.vue
index cc8394c..e9b30a5 100644
--- a/resources/js/Pages/Dashboard/Tramites.vue
+++ b/resources/js/Pages/Dashboard/Tramites.vue
@@ -176,21 +176,61 @@ const togglePie = () => (showPie.value = !showPie.value);
 
 <template>
   <div>
-    <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>
+    <header class="relative">
+      <div class="bg-gradient-to-r from-gray-100 to-gray-50 py-3 shadow-sm">
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-bold text-gray-800 tracking-wide"
+              >COMALCALCO.GOB.MX</span
+            >
+          </div>
         </div>
       </div>
 
-      <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
+        style="
+          background: linear-gradient(
+            135deg,
+            #621132 0%,
+            #7d1a42 50%,
+            #621132 100%
+          );
+        "
+        class="shadow-xl relative overflow-hidden"
+      >
+        <!-- Patrón decorativo de fondo -->
+        <div class="absolute inset-0 opacity-10">
+          <div
+            class="absolute top-0 left-0 w-full h-full"
+            style="
+              background-image: repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 35px,
+                rgba(255, 255, 255, 0.1) 35px,
+                rgba(255, 255, 255, 0.1) 70px
+              );
+            "
+          ></div>
+        </div>
+
+        <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative">
+          <div class="flex items-center justify-between h-32">
+            <div class="flex items-center space-x-4">
+              <img
+                src="https://apoyos.comalcalco.gob.mx/images/logo_blanco.png"
+                alt="Logo Comalcalco"
+                class="h-20 w-auto object-contain filter drop-shadow-lg transition-transform hover:scale-105"
+              />
+              <div class="hidden md:block">
+                <h1 class="text-2xl font-bold text-white">
+                  Reporte Especial de Trámites
+                </h1>
+                <p class="text-blue-100 text-sm">
+                  Sistema de seguimiento de trámites
+                </p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -199,13 +239,15 @@ const togglePie = () => (showPie.value = !showPie.value);
     <!-- Loading Overlay -->
     <div
       v-if="loading"
-      class="fixed inset-0 bg-white bg-opacity-90 flex items-center justify-center z-50"
+      class="fixed inset-0 bg-white/95 backdrop-blur-sm flex items-center justify-center z-50 transition-all duration-300"
     >
       <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 class="relative">
+          <div
+            class="animate-spin rounded-full h-16 w-16 border-4 border-blue-200 border-t-blue-600 mx-auto"
+          ></div>
+        </div>
+        <p class="mt-6 text-gray-700 font-medium">Cargando datos...</p>
       </div>
     </div>
     <div v-else>
diff --git a/routes/api.php b/routes/api.php
index 5472386..e4a4a92 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\Dashboard\AtencionController;
 use App\Http\Controllers\Dashboard\ObrasController;
 use App\Http\Controllers\Dashboard\TramiteController;
 use Illuminate\Http\Request;
@@ -23,4 +24,5 @@
 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']);
+    Route::get('/reporte-atencion', [AtencionController::class, 'Atencion'])->middleware(['throttle:60,1']);
 });