From 3351fb3330f3966b6ba77c0274c267eb1f248fbd Mon Sep 17 00:00:00 2001
From: esteban <estppwork123@gmail.com>
Date: Sat, 15 Aug 2026 21:11:40 -0500
Subject: [PATCH] multiple fixes, create dashboard finish table TODO:
 middleware and auth

---
 .gitignore                                    |   3 +
 .../migration.sql                             |  14 +
 prisma/schema.prisma                          |   5 +
 src/components/Header.astro                   |  21 ++
 src/components/admin/AdminDashboard.vue       | 209 +++++++++++
 src/components/admin/SearchableCombobox.vue   | 178 +++++++++
 src/components/admin/VoluntarioDetail.vue     | 284 ++++++++++++++
 src/components/admin/VoluntariosTable.vue     | 354 ++++++++++++------
 src/layouts/MainLayout.astro                  |   4 +-
 src/pages/[locale]/admin/dashboard.astro      |  30 ++
 src/pages/[locale]/admin/index.astro          |  50 ++-
 .../[locale]/admin/voluntario/[numero].astro  |  26 ++
 src/pages/api/admin/voluntarios.ts            |  44 ++-
 src/pages/api/admin/voluntarios/[numero].ts   |  97 +++++
 src/pages/api/admin/voluntarios/distinct.ts   |  56 +++
 src/pages/api/admin/voluntarios/stats.ts      | 138 +++++++
 src/pages/api/emailPostulacion/send.ts        |   5 +-
 src/pages/api/formulario/send.ts              |  17 +-
 src/pages/api/lib/emailsRegistry.ts           |  22 --
 src/pages/api/lib/formularioDb.ts             |  10 +
 src/pages/api/voluntarios/count.ts            |   4 +-
 src/styles/global.css                         |  34 ++
 22 files changed, 1413 insertions(+), 192 deletions(-)
 create mode 100644 prisma/migrations/20260815180714_add_trigram_fuzzy_indexes/migration.sql
 create mode 100644 src/components/admin/AdminDashboard.vue
 create mode 100644 src/components/admin/SearchableCombobox.vue
 create mode 100644 src/components/admin/VoluntarioDetail.vue
 create mode 100644 src/pages/[locale]/admin/dashboard.astro
 create mode 100644 src/pages/[locale]/admin/voluntario/[numero].astro
 create mode 100644 src/pages/api/admin/voluntarios/[numero].ts
 create mode 100644 src/pages/api/admin/voluntarios/distinct.ts
 create mode 100644 src/pages/api/admin/voluntarios/stats.ts
 delete mode 100644 src/pages/api/lib/emailsRegistry.ts

diff --git a/.gitignore b/.gitignore
index 3148277..291f341 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,6 +32,9 @@ opencode/
 .opencode/
 docs/
 
+# guía técnica local
+docs/GUIA-TECNICA.md
+
 # scripts de migración (locales, no en producción)
 scripts/migrate-sheets-to-db.ts
 scripts/seed-form-config.ts
diff --git a/prisma/migrations/20260815180714_add_trigram_fuzzy_indexes/migration.sql b/prisma/migrations/20260815180714_add_trigram_fuzzy_indexes/migration.sql
new file mode 100644
index 0000000..9295739
--- /dev/null
+++ b/prisma/migrations/20260815180714_add_trigram_fuzzy_indexes/migration.sql
@@ -0,0 +1,14 @@
+-- CreateIndex
+CREATE INDEX "formularios_ciudad_trgm_idx" ON "formularios" USING GIN ("ciudad" gin_trgm_ops);
+
+-- CreateIndex
+CREATE INDEX "formularios_estado_trgm_idx" ON "formularios" USING GIN ("estado" gin_trgm_ops);
+
+-- CreateIndex
+CREATE INDEX "formularios_profesion_trgm_idx" ON "formularios" USING GIN ("profesion" gin_trgm_ops);
+
+-- CreateIndex
+CREATE INDEX "formularios_nivel_academico_trgm_idx" ON "formularios" USING GIN ("nivel_academico" gin_trgm_ops);
+
+-- CreateIndex
+CREATE INDEX "formularios_nacionalidad_trgm_idx" ON "formularios" USING GIN ("nacionalidad" gin_trgm_ops);
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index b028508..6358ffc 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -60,6 +60,11 @@ model Formulario {
   @@index([telefono(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_telefono_trgm_idx")
   @@index([whatsapp(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_whatsapp_trgm_idx")
   @@index([documento_nro(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_documento_nro_trgm_idx")
+  @@index([ciudad(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_ciudad_trgm_idx")
+  @@index([estado(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_estado_trgm_idx")
+  @@index([profesion(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_profesion_trgm_idx")
+  @@index([nivel_academico(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_nivel_academico_trgm_idx")
+  @@index([nacionalidad(ops: raw("gin_trgm_ops"))], type: Gin, map: "formularios_nacionalidad_trgm_idx")
   @@map("formularios")
 }
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index f210430..679de8a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -12,6 +12,7 @@ const tl = createTranslator(Astro.currentLocale);
 const currentLocale = Astro.currentLocale;
 const currentPath = Astro.url.pathname;
 const { locale } = Astro.params;
+const isAdmin = currentPath.split("/").includes("admin");
 
 const languages = [
     { code: "es", icon: "icon_flag_es", label: "Español" },
@@ -156,6 +157,16 @@ function translatePath(newLocale: string) {
                                     </li>
                                 ))
                             }
+                            {isAdmin && (
+                                <li>
+                                    <a
+                                        class="hover:text-colorPrimary transition"
+                                        href="#"
+                                    >
+                                        Acceder
+                                    </a>
+                                </li>
+                            )}
                         </ul>
                         <div class="w-50">
                             <Button
@@ -202,6 +213,16 @@ function translatePath(newLocale: string) {
                     variant="primary"
                 />
             </div>
+            {isAdmin && (
+                <div class="hidden md:block">
+                    <Button
+                        class="px-4 py-2 uppercase"
+                        title="Acceder"
+                        url="#"
+                        variant="secondary"
+                    />
+                </div>
+            )}
             <div class="dropdown dropdown-end md:block hidden">
                 <div
                     tabindex="0"
diff --git a/src/components/admin/AdminDashboard.vue b/src/components/admin/AdminDashboard.vue
new file mode 100644
index 0000000..80fb617
--- /dev/null
+++ b/src/components/admin/AdminDashboard.vue
@@ -0,0 +1,209 @@
+<template>
+  <div class="space-y-8">
+    <div v-if="loading" class="flex justify-center py-16">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+
+    <div v-else-if="error" class="text-center py-10 text-error">{{ error }}</div>
+
+    <template v-else-if="stats">
+      <!-- Resumen -->
+      <section>
+        <h3 class="text-xs font-bold text-tertiary uppercase tracking-wide flex items-center gap-2 mb-3">
+          <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Resumen
+        </h3>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div class="stat bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box p-4">
+            <div class="stat-title text-tertiary/70 text-xs font-medium">Total voluntarios</div>
+            <div class="stat-value text-tertiary font-primary">{{ fmt(stats.total) }}</div>
+          </div>
+          <div class="stat bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box p-4">
+            <div class="stat-title text-tertiary/70 text-xs font-medium">Edad promedio</div>
+            <div class="stat-value text-tertiary font-primary">{{ stats.edad.promedio ?? "—" }} años</div>
+          </div>
+          <div class="stat bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box p-4">
+            <div class="stat-title text-tertiary/70 text-xs font-medium">Femenino</div>
+            <div class="stat-value text-tertiary font-primary">{{ fmt(sexo.f) }}</div>
+            <div class="stat-desc text-tertiary/60">{{ pct(sexo.f, sexo.total) }}% del total</div>
+          </div>
+          <div class="stat bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box p-4">
+            <div class="stat-title text-tertiary/70 text-xs font-medium">Masculino</div>
+            <div class="stat-value text-tertiary font-primary">{{ fmt(sexo.m) }}</div>
+            <div class="stat-desc text-tertiary/60">{{ pct(sexo.m, sexo.total) }}% del total</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Idiomas -->
+      <section>
+        <h3 class="text-xs font-bold text-tertiary uppercase tracking-wide flex items-center gap-2 mb-3">
+          <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Idiomas
+        </h3>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+          <div
+            v-for="lang in stats.idiomas"
+            :key="lang.value"
+            class="stat bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box p-4"
+          >
+            <div class="stat-title text-tertiary/70 text-xs font-medium">{{ lang.label }}</div>
+            <div class="stat-value text-tertiary font-primary text-2xl">{{ fmt(lang.count) }}</div>
+            <div class="stat-desc text-tertiary/60">{{ pct(lang.count, stats.total) }}% del total</div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Distribuciones -->
+      <section>
+        <h3 class="text-xs font-bold text-tertiary uppercase tracking-wide flex items-center gap-2 mb-3">
+          <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Distribuciones
+        </h3>
+        <div class="grid md:grid-cols-2 gap-4">
+          <div class="card bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box">
+            <div class="card-body p-4 sm:p-5">
+              <h4 class="card-title text-tertiary text-sm font-bold">Áreas de colaboración</h4>
+              <div class="space-y-2">
+                <div v-for="item in topAreas" :key="item.value" class="flex items-center gap-3">
+                  <span class="w-32 sm:w-44 shrink-0 text-sm text-tertiary truncate" :title="item.label">{{ item.label }}</span>
+                  <progress class="progress progress-secondary flex-1" :value="item.count" :max="areasMax"></progress>
+                  <span class="w-12 shrink-0 text-right text-sm font-semibold text-tertiary">{{ fmt(item.count) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box">
+            <div class="card-body p-4 sm:p-5">
+              <h4 class="card-title text-tertiary text-sm font-bold">Días disponibles</h4>
+              <div class="space-y-2">
+                <div v-for="item in stats.dias" :key="item.value" class="flex items-center gap-3">
+                  <span class="w-32 sm:w-44 shrink-0 text-sm text-tertiary truncate" :title="item.label">{{ item.label }}</span>
+                  <progress class="progress progress-secondary flex-1" :value="item.count" :max="diasMax"></progress>
+                  <span class="w-12 shrink-0 text-right text-sm font-semibold text-tertiary">{{ fmt(item.count) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box">
+            <div class="card-body p-4 sm:p-5">
+              <h4 class="card-title text-tertiary text-sm font-bold">Horario preferido</h4>
+              <div class="space-y-2">
+                <div v-for="item in stats.horarios" :key="item.value" class="flex items-center gap-3">
+                  <span class="w-32 sm:w-44 shrink-0 text-sm text-tertiary truncate" :title="item.label">{{ item.label }}</span>
+                  <progress class="progress progress-secondary flex-1" :value="item.count" :max="horariosMax"></progress>
+                  <span class="w-12 shrink-0 text-right text-sm font-semibold text-tertiary">{{ fmt(item.count) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box">
+            <div class="card-body p-4 sm:p-5">
+              <h4 class="card-title text-tertiary text-sm font-bold">Países</h4>
+              <div class="space-y-2">
+                <div v-for="item in stats.paises" :key="item.value" class="flex items-center gap-3">
+                  <span class="w-32 sm:w-44 shrink-0 text-sm text-tertiary truncate" :title="item.value">{{ item.value }}</span>
+                  <progress class="progress progress-secondary flex-1" :value="item.count" :max="paisesMax"></progress>
+                  <span class="w-12 shrink-0 text-right text-sm font-semibold text-tertiary">{{ fmt(item.count) }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Disponibilidad y salud -->
+      <section>
+        <h3 class="text-xs font-bold text-tertiary uppercase tracking-wide flex items-center gap-2 mb-3">
+          <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Disponibilidad y salud
+        </h3>
+        <div class="card bg-colorPrimary ring-1 ring-colorSecondary/40 rounded-box">
+          <div class="card-body p-4 sm:p-6 grid md:grid-cols-2 gap-x-8 gap-y-5">
+            <div v-for="m in condMetrics" :key="m.title" class="space-y-1.5">
+              <div class="flex justify-between text-sm text-tertiary">
+                <span class="font-medium">{{ m.title }}</span>
+                <span>Sí {{ m.pct }}% · No {{ 100 - m.pct }}%</span>
+              </div>
+              <progress class="progress progress-secondary w-full" :value="m.si" :max="m.total"></progress>
+              <p class="text-xs text-tertiary/60">
+                Sí: {{ fmt(m.si) }} · No: {{ fmt(m.no) }}
+              </p>
+            </div>
+
+            <div class="space-y-1.5">
+              <div class="flex justify-between text-sm text-tertiary">
+                <span class="font-medium">Sexo</span>
+                <span>F {{ pct(sexo.f, sexo.total) }}% · M {{ pct(sexo.m, sexo.total) }}%</span>
+              </div>
+              <div class="flex w-full h-3 rounded-none overflow-hidden bg-tertiary/15">
+                <div class="bg-tertiary h-full" :style="{ width: pct(sexo.f, sexo.total) + '%' }"></div>
+                <div class="bg-colorSecondary h-full" :style="{ width: pct(sexo.m, sexo.total) + '%' }"></div>
+              </div>
+              <p class="text-xs text-tertiary/60">
+                F: {{ fmt(sexo.f) }} · M: {{ fmt(sexo.m) }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from "vue";
+
+const loading = ref(false);
+const error = ref("");
+const stats = ref(null);
+
+const fmt = (n) => Number(n || 0).toLocaleString("es");
+const pct = (n, total) => (total ? Math.round(((n || 0) / total) * 100) : 0);
+
+const sexo = computed(() => {
+  const s = stats.value?.sexo || [];
+  const f = s.find((x) => x.value === "F")?.count || 0;
+  const m = s.find((x) => x.value === "M")?.count || 0;
+  return { f, m, total: f + m };
+});
+
+const topAreas = computed(() => (stats.value?.areas || []).slice(0, 8));
+const areasMax = computed(() => topAreas.value[0]?.count || 1);
+const diasMax = computed(() => stats.value?.dias[0]?.count || 1);
+const horariosMax = computed(() => stats.value?.horarios[0]?.count || 1);
+const paisesMax = computed(() => stats.value?.paises[0]?.count || 1);
+
+const condMetrics = computed(() => {
+  const c = stats.value?.condiciones;
+  if (!c) return [];
+  const mk = (title, key) => {
+    const si = c[key].si || 0;
+    const no = c[key].no || 0;
+    const total = si + no;
+    return { title, si, no, total, pct: total ? Math.round((si / total) * 100) : 0 };
+  };
+  return [
+    mk("Disponible fuera de ciudad", "fuera_ciudad"),
+    mk("Misiones internacionales", "misiones_internacionales"),
+    mk("Condición médica", "condicion_medica"),
+    mk("Voluntariado anterior", "voluntariado_anterior"),
+  ];
+});
+
+async function fetchStats() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const res = await fetch("/api/admin/voluntarios/stats");
+    const json = await res.json();
+    if (!json.success) throw new Error(json.message || "Error al cargar estadísticas");
+    stats.value = json;
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(fetchStats);
+</script>
diff --git a/src/components/admin/SearchableCombobox.vue b/src/components/admin/SearchableCombobox.vue
new file mode 100644
index 0000000..73a086a
--- /dev/null
+++ b/src/components/admin/SearchableCombobox.vue
@@ -0,0 +1,178 @@
+<template>
+  <div ref="rootEl" class="relative">
+    <div
+      class="combobox-input input input-sm flex flex-wrap items-center gap-1 w-full cursor-text"
+      @click="focusInput"
+    >
+      <template v-if="multiple">
+        <span
+          v-for="item in currentValue"
+          :key="item"
+          class="badge badge-sm badge-neutral gap-1"
+        >
+          {{ item }}
+          <button type="button" class="btn btn-ghost btn-xs btn-circle" @click.stop="toggle(item)">✕</button>
+        </span>
+      </template>
+      <input
+        ref="inputEl"
+        v-model="query"
+        type="text"
+        :placeholder="placeholder"
+        class="flex-1 min-w-[4rem]"
+        @input="onInput"
+        @focus="open = true"
+      />
+    </div>
+
+    <ul
+      v-if="open"
+      class="absolute z-30 mt-1 w-full max-h-64 overflow-y-auto bg-base-100 rounded-box shadow ring-1 ring-base-300"
+      @mousedown.prevent
+    >
+      <li v-if="loading" class="px-3 py-2 text-sm text-base-content/50 flex items-center gap-2">
+        <span class="loading loading-spinner loading-xs"></span> Cargando…
+      </li>
+      <li v-else-if="options.length === 0" class="px-3 py-2 text-sm text-base-content/50">
+        {{ multiple ? "Sin opciones" : "Sin sugerencias — sigue escribiendo" }}
+      </li>
+      <li v-for="opt in options" :key="opt.value">
+        <label
+          v-if="multiple"
+          class="flex items-center gap-2 px-3 py-1.5 hover:bg-base-200 cursor-pointer"
+        >
+          <input
+            type="checkbox"
+            class="checkbox checkbox-xs"
+            :checked="isSelected(opt.value)"
+            @change="toggle(opt.value)"
+          />
+          <span class="flex-1 text-sm">
+            {{ opt.value }}
+            <span class="text-xs text-base-content/50">({{ opt.count }})</span>
+          </span>
+        </label>
+        <button
+          v-else
+          type="button"
+          class="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm hover:bg-base-200"
+          @click="pick(opt.value)"
+        >
+          <span class="truncate">{{ opt.value }}</span>
+          <span class="text-xs text-base-content/50 shrink-0">({{ opt.count }})</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  field: { type: String, required: true },
+  placeholder: { type: String, default: "Escribir…" },
+  multiple: { type: Boolean, default: false },
+  limit: { type: Number, default: 25 },
+});
+
+const modelValue = defineModel({ type: [String, Array], default: "" });
+
+const rootEl = ref(null);
+const inputEl = ref(null);
+const query = ref("");
+const open = ref(false);
+const loading = ref(false);
+const options = ref([]);
+
+let fetchTimer = null;
+let fetchVersion = 0;
+
+const currentValue = () => {
+  const v = modelValue.value;
+  return Array.isArray(v) ? v : typeof v === "string" ? v : "";
+};
+
+function focusInput() {
+  inputEl.value?.focus();
+}
+
+function isSelected(v) {
+  return currentValue().includes(v);
+}
+
+function toggle(v) {
+  const arr = [...currentValue()];
+  const i = arr.indexOf(v);
+  if (i >= 0) arr.splice(i, 1);
+  else arr.push(v);
+  modelValue.value = arr;
+  query.value = "";
+  scheduleFetch();
+}
+
+function pick(v) {
+  modelValue.value = v;
+  query.value = v;
+  open.value = false;
+}
+
+function onInput() {
+  if (!props.multiple) modelValue.value = query.value;
+  scheduleFetch();
+}
+
+async function fetchOptions() {
+  loading.value = true;
+  const version = ++fetchVersion;
+  const params = new URLSearchParams();
+  params.set("field", props.field);
+  params.set("limit", String(props.limit));
+  if (query.value.trim().length >= 2) params.set("q", query.value.trim());
+  try {
+    const res = await fetch(`/api/admin/voluntarios/distinct?${params.toString()}`);
+    const json = await res.json();
+    if (version !== fetchVersion) return;
+    options.value = json.success ? json.data : [];
+  } catch {
+    if (version === fetchVersion) options.value = [];
+  } finally {
+    if (version === fetchVersion) loading.value = false;
+  }
+}
+
+function scheduleFetch() {
+  clearTimeout(fetchTimer);
+  fetchTimer = setTimeout(fetchOptions, 250);
+}
+
+watch(
+  () => modelValue.value,
+  (val) => {
+    if (!props.multiple && query.value !== val) query.value = typeof val === "string" ? val : "";
+  }
+);
+
+function onDocClick(e) {
+  if (rootEl.value && !rootEl.value.contains(e.target)) open.value = false;
+}
+
+onMounted(() => {
+  document.addEventListener("mousedown", onDocClick);
+  scheduleFetch();
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("mousedown", onDocClick);
+  clearTimeout(fetchTimer);
+});
+</script>
+
+<style scoped>
+.combobox-input {
+  height: auto;
+  min-height: 2rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+</style>
diff --git a/src/components/admin/VoluntarioDetail.vue b/src/components/admin/VoluntarioDetail.vue
new file mode 100644
index 0000000..d78acd0
--- /dev/null
+++ b/src/components/admin/VoluntarioDetail.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="space-y-4">
+    <div v-if="loading" class="flex justify-center py-16">
+      <span class="loading loading-spinner loading-lg text-primary"></span>
+    </div>
+
+    <div v-else-if="error" class="text-center py-10 text-error">{{ error }}</div>
+
+    <div v-else-if="data" class="space-y-6">
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+        <h3 class="text-lg sm:text-xl font-bold">
+          {{ data.nombre }} {{ data.segundo_nombre }} {{ data.apellido }}
+        </h3>
+        <span class="font-mono text-sm opacity-70">#{{ data.numero_voluntario }}</span>
+        <span class="badge badge-sm" :class="badgeClass(data.status)">{{ data.status }}</span>
+      </div>
+
+      <section
+        v-for="sec in sectionsWithData"
+        :key="sec.key"
+        class="rounded-box ring-1 ring-base-300 bg-base-100/60 overflow-hidden"
+      >
+        <h4 class="font-medium text-sm uppercase tracking-wide px-4 py-3 border-b border-base-200">
+          {{ sec.title }}
+        </h4>
+        <dl class="divide-y divide-base-200/70 text-sm">
+          <div
+            v-for="f in sec.fields"
+            :key="f.key"
+            class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1"
+          >
+            <dt class="text-base-content/60">{{ f.label }}</dt>
+            <dd class="min-w-0 break-words">
+              <div v-if="f.isList" :class="f.isLongList ? 'space-y-1.5' : 'flex flex-wrap gap-1.5'">
+                <div
+                  v-if="f.isLongList"
+                  v-for="(item, i) in f.displayValues"
+                  :key="'list-' + i"
+                  class="text-sm border-l-2 border-base-300 pl-2"
+                >
+                  {{ item }}
+                </div>
+                <span
+                  v-else
+                  v-for="(item, i) in f.displayValues"
+                  :key="'chip-' + i"
+                  class="badge badge-sm badge-ghost border border-base-300 whitespace-normal text-left"
+                >
+                  {{ item }}
+                </span>
+              </div>
+              <span v-else>{{ f.displayText }}</span>
+            </dd>
+          </div>
+        </dl>
+      </section>
+
+      <section
+        v-if="extraRows.length"
+        class="rounded-box ring-1 ring-base-300 bg-base-100/60 overflow-hidden"
+      >
+        <h4 class="font-medium text-sm uppercase tracking-wide px-4 py-3 border-b border-base-200">
+          Otros datos
+        </h4>
+        <dl class="divide-y divide-base-200/70 text-sm">
+          <div
+            v-for="r in extraRows"
+            :key="r.rawKey"
+            class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1"
+          >
+            <dt class="text-base-content/60">{{ r.key }}</dt>
+            <dd class="min-w-0 break-words">{{ r.value }}</dd>
+          </div>
+        </dl>
+      </section>
+
+      <section class="rounded-box ring-1 ring-base-300 bg-base-100/60 overflow-hidden">
+        <h4 class="font-medium text-sm uppercase tracking-wide px-4 py-3 border-b border-base-200">
+          Sistema
+        </h4>
+        <dl class="divide-y divide-base-200/70 text-sm">
+          <div class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1">
+            <dt class="text-base-content/60">ID</dt>
+            <dd class="font-mono break-all">{{ data.id }}</dd>
+          </div>
+          <div class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1">
+            <dt class="text-base-content/60">Versión de formulario</dt>
+            <dd>{{ data.form_version || "—" }}</dd>
+          </div>
+          <div class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1">
+            <dt class="text-base-content/60">Correo enviado</dt>
+            <dd>{{ formatDateTime(data.email_sent_at) }}</dd>
+          </div>
+          <div class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1">
+            <dt class="text-base-content/60">Registrado</dt>
+            <dd>{{ formatDateTime(data.submitted_at) }}</dd>
+          </div>
+          <div class="px-4 py-2.5 grid sm:grid-cols-[220px_1fr] gap-x-4 gap-y-1">
+            <dt class="text-base-content/60">Actualizado</dt>
+            <dd>{{ formatDateTime(data.updated_at) }}</dd>
+          </div>
+        </dl>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+
+const props = defineProps({
+  numero: { type: [Number, String], required: true },
+});
+
+const CORE_COLUMN_MAP = {
+  nombre: "nombre",
+  segundo_nombre: "segundo_nombre",
+  apellido: "apellido",
+  correo: "correo",
+  fecha_nacimiento: "fecha_nacimiento",
+  nacionalidad: "nacionalidad",
+  sexo: "sexo",
+  direccion_completa: "direccion",
+  ciudad: "ciudad",
+  estado: "estado",
+  pais: "pais",
+  postal: "codigo_postal",
+  telefono: "telefono",
+  whatsapp: "whatsapp",
+  profesion: "profesion",
+  lugar_trabajo_actual: "lugar_trabajo",
+  nivel_academico: "nivel_academico",
+};
+
+const loading = ref(false);
+const error = ref("");
+const data = ref(null);
+const sections = ref([]);
+
+function pretty(v) {
+  if (v === "si") return "Sí";
+  if (v === "no") return "No";
+  return v;
+}
+
+function fallbackLabel(key) {
+  if (key.startsWith("idioma_nivel_")) return `Nivel de ${key.slice("idioma_nivel_".length)}`;
+  if (key === "locale") return "Idioma de la solicitud";
+  return key;
+}
+
+const respuestasByKey = computed(() => {
+  const map = {};
+  for (const r of data.value?.respuestas || []) {
+    (map[r.key] ||= []).push(r.value);
+  }
+  return map;
+});
+
+function fieldTokens(field) {
+  let values;
+  if (field.key === "documentos") {
+    const s = [data.value.documento_tipo, data.value.documento_nro].filter(Boolean).join(" ");
+    values = s ? [s] : [];
+  } else if (CORE_COLUMN_MAP[field.key]) {
+    const v = data.value[CORE_COLUMN_MAP[field.key]];
+    values = v === null || v === undefined || v === "" ? [] : [String(v)];
+  } else {
+    values = respuestasByKey.value[field.key] || [];
+  }
+
+  const tokens = [];
+  for (const raw of values) {
+    for (const part of String(raw).split(",")) {
+      const tok = part.trim();
+      if (!tok) continue;
+      const opt = (field.options || []).find((o) => o.value === tok);
+      let display = (opt ? opt.label : pretty(tok)).replace(/<[^>]*>/g, "");
+      if (field.tipo === "date" || field.key === "fecha_nacimiento") {
+        const d = new Date(display);
+        if (!isNaN(d)) {
+          display = d.toLocaleDateString("es", { year: "numeric", month: "2-digit", day: "2-digit" });
+        }
+      }
+      tokens.push(display);
+    }
+  }
+  return tokens;
+}
+
+const sectionsWithData = computed(() => {
+  if (!data.value) return [];
+  return sections.value
+    .map((sec) => ({
+      ...sec,
+      fields: sec.fields
+        .map((f) => {
+          const tokens = fieldTokens(f);
+          if (!tokens.length) return null;
+          return {
+            ...f,
+            isList: f.tipo === "checkbox" && tokens.length > 1,
+            isLongList: f.tipo === "checkbox" && tokens.length > 1 && tokens.some((t) => t.length > 40),
+            displayValues: tokens,
+            displayText: tokens.join(", "),
+          };
+        })
+        .filter(Boolean),
+    }))
+    .filter((sec) => sec.fields.length);
+});
+
+const extraRows = computed(() => {
+  if (!data.value) return [];
+  const known = new Set();
+  for (const sec of sections.value) for (const f of sec.fields) known.add(f.key);
+  const rows = [];
+  for (const [key, vals] of Object.entries(respuestasByKey.value)) {
+    if (known.has(key)) continue;
+    const tokens = [];
+    for (const raw of vals) {
+      for (const part of String(raw).split(",")) {
+        const t = part.trim();
+        if (t) tokens.push(pretty(t));
+      }
+    }
+    if (!tokens.length) continue;
+    rows.push({ key: fallbackLabel(key), rawKey: key, value: tokens.join(", ") });
+  }
+  return rows;
+});
+
+async function fetchData() {
+  loading.value = true;
+  error.value = "";
+  try {
+    const res = await fetch(`/api/admin/voluntarios/${props.numero}`);
+    const json = await res.json();
+    if (!json.success) throw new Error(json.message || "Voluntario no encontrado");
+    data.value = json.data;
+    sections.value = json.form.sections;
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.numero,
+  () => {
+    data.value = null;
+    fetchData();
+  }
+);
+
+function formatDateTime(iso) {
+  if (!iso) return "—";
+  const d = new Date(iso);
+  if (isNaN(d)) return "—";
+  return d.toLocaleString("es", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+function badgeClass(s) {
+  switch (s) {
+    case "aprobado":
+      return "badge-success";
+    case "rechazado":
+      return "badge-error";
+    case "legacy":
+      return "badge-warning";
+    default:
+      return "badge-neutral";
+  }
+}
+
+onMounted(fetchData);
+</script>
diff --git a/src/components/admin/VoluntariosTable.vue b/src/components/admin/VoluntariosTable.vue
index a03e826..ef083b7 100644
--- a/src/components/admin/VoluntariosTable.vue
+++ b/src/components/admin/VoluntariosTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="space-y-4">
     <!-- Filtros -->
-    <div class="bg-base-200/60 p-4 rounded-box space-y-3">
+    <div class="bg-colorPrimary border-l-4 border-colorSecondary p-4 rounded-box space-y-3 shadow-lg shadow-tertiary/20">
       <div class="flex flex-col md:flex-row gap-3 items-end">
         <div class="flex-1 w-full">
           <label class="label py-0 text-xs font-medium">Buscar</label>
@@ -36,97 +36,76 @@
             </ul>
           </details>
         </div>
-        <div class="w-full md:w-52">
-          <label class="label py-0 text-xs font-medium">País</label>
-          <details class="dropdown w-full">
-            <summary class="btn btn-sm btn-outline w-full justify-between">
-              <span class="truncate">{{ paisLabel }}</span>
-              <span class="opacity-60">▾</span>
-            </summary>
-            <ul class="menu dropdown-content bg-base-100 rounded-box shadow ring-1 ring-base-300 z-20 w-56 max-h-64 overflow-y-auto">
-              <li v-for="p in paises" :key="p">
-                <label class="flex items-center gap-2 py-1.5">
-                  <input
-                    type="checkbox"
-                    :value="p"
-                    v-model="selectedPaises"
-                    class="checkbox checkbox-xs"
-                    @change="applyFilters"
-                  />
-                  <span>{{ p }}</span>
-                </label>
-              </li>
-            </ul>
-          </details>
-        </div>
         <div class="flex gap-2">
-          <button class="btn btn-ghost btn-sm" @click="clearFilters">Limpiar</button>
-          <button class="btn btn-outline btn-sm" @click="showFilters = !showFilters">
+          <button class="btn btn-ghost btn-sm text-tertiary" @click="clearFilters">Limpiar</button>
+          <button class="btn btn-primary btn-sm" @click="showFilters = !showFilters">
             {{ showFilters ? "Ocultar filtros" : "Filtros" }}
-            <span v-if="activeFilterCount" class="badge badge-sm badge-primary">{{ activeFilterCount }}</span>
+            <span v-if="activeFilterCount" class="badge badge-sm bg-tertiary text-colorPrimary border-0">{{ activeFilterCount }}</span>
           </button>
         </div>
       </div>
 
-      <!-- Panel avanzado -->
-      <div v-if="showFilters" class="border-t border-base-300 pt-3 space-y-4">
-        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
-          <div>
-            <label class="label py-0 text-xs font-medium">Desde</label>
-            <input v-model="desde" type="date" class="input input-bordered input-sm w-full" @change="applyFilters" />
-          </div>
-          <div>
-            <label class="label py-0 text-xs font-medium">Hasta</label>
-            <input v-model="hasta" type="date" class="input input-bordered input-sm w-full" @change="applyFilters" />
-          </div>
-          <div>
-            <label class="label py-0 text-xs font-medium">Edad mín</label>
-            <input v-model="edadMin" type="number" min="0" max="120" class="input input-bordered input-sm w-full" @change="applyFilters" />
-          </div>
-          <div>
-            <label class="label py-0 text-xs font-medium">Edad máx</label>
-            <input v-model="edadMax" type="number" min="0" max="120" class="input input-bordered input-sm w-full" @change="applyFilters" />
-          </div>
-          <div>
-            <label class="label py-0 text-xs font-medium">¿Tiene WhatsApp?</label>
-            <select v-model="hasWhatsapp" class="select select-bordered select-sm w-full" @change="applyFilters">
-              <option value="">Todos</option>
-              <option value="true">Sí</option>
-              <option value="false">No</option>
-            </select>
-          </div>
-          <div>
-            <label class="label py-0 text-xs font-medium">¿Correo enviado?</label>
-            <select v-model="emailSent" class="select select-bordered select-sm w-full" @change="applyFilters">
-              <option value="">Todos</option>
-              <option value="true">Sí</option>
-              <option value="false">No</option>
-            </select>
+      <!-- Chips de filtros activos -->
+      <div v-if="activeChips.length" class="flex flex-wrap gap-1.5">
+        <span
+          v-for="chip in activeChips"
+          :key="chip.key"
+          class="badge badge-sm bg-white gap-1 border border-colorSecondary/60 text-tertiary"
+        >
+          {{ chip.label }}
+          <button type="button" class="opacity-60 hover:opacity-100" @click="chip.remove()">✕</button>
+        </span>
+      </div>
+
+      <!-- Panel de filtros -->
+      <div v-if="showFilters" class="border-t border-colorSecondary/40 pt-3 space-y-4">
+        <div>
+          <p class="text-xs font-bold text-tertiary mb-2 uppercase tracking-wide flex items-center gap-2">
+            <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Fecha y edad
+          </p>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
+            <div>
+              <label class="label py-0 text-xs font-medium">Desde</label>
+              <input v-model="desde" type="date" class="input input-bordered input-sm w-full" @change="applyFilters" />
+            </div>
+            <div>
+              <label class="label py-0 text-xs font-medium">Hasta</label>
+              <input v-model="hasta" type="date" class="input input-bordered input-sm w-full" @change="applyFilters" />
+            </div>
+            <div>
+              <label class="label py-0 text-xs font-medium">Edad mín</label>
+              <input v-model="edadMin" type="number" min="0" max="120" class="input input-bordered input-sm w-full" @change="applyFilters" />
+            </div>
+            <div>
+              <label class="label py-0 text-xs font-medium">Edad máx</label>
+              <input v-model="edadMax" type="number" min="0" max="120" class="input input-bordered input-sm w-full" @change="applyFilters" />
+            </div>
           </div>
         </div>
 
         <div>
-          <p class="text-xs font-medium text-base-content/70 mb-2">Datos personales</p>
+          <p class="text-xs font-bold text-tertiary mb-2 uppercase tracking-wide flex items-center gap-2">
+            <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Ubicación
+          </p>
           <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
             <div>
-              <label class="label py-0 text-xs font-medium">Ciudad</label>
-              <input v-model="coreText.ciudad" type="text" class="input input-bordered input-sm w-full" @input="onSearch" />
+              <label class="label py-0 text-xs font-medium">País</label>
+              <SearchableCombobox
+                v-model="selectedPaises"
+                field="pais"
+                multiple
+                placeholder="Buscar país…"
+                @update:modelValue="applyFilters"
+              />
             </div>
             <div>
-              <label class="label py-0 text-xs font-medium">Estado</label>
-              <input v-model="coreText.estado" type="text" class="input input-bordered input-sm w-full" @input="onSearch" />
-            </div>
-            <div>
-              <label class="label py-0 text-xs font-medium">Profesión</label>
-              <input v-model="coreText.profesion" type="text" class="input input-bordered input-sm w-full" @input="onSearch" />
-            </div>
-            <div>
-              <label class="label py-0 text-xs font-medium">Nivel académico</label>
-              <input v-model="coreText.nivel_academico" type="text" class="input input-bordered input-sm w-full" @input="onSearch" />
-            </div>
-            <div>
-              <label class="label py-0 text-xs font-medium">Documento</label>
-              <input v-model="coreText.documento_nro" type="text" class="input input-bordered input-sm w-full" @input="onSearch" />
+              <label class="label py-0 text-xs font-medium">Nacionalidad</label>
+              <SearchableCombobox
+                v-model="nacionalidad"
+                field="nacionalidad"
+                placeholder="Buscar…"
+                @update:modelValue="onSearch"
+              />
             </div>
             <div>
               <label class="label py-0 text-xs font-medium">Sexo</label>
@@ -137,11 +116,52 @@
               </select>
             </div>
             <div>
-              <label class="label py-0 text-xs font-medium">Nacionalidad</label>
-              <select v-model="nacionalidad" class="select select-bordered select-sm w-full" @change="applyFilters">
-                <option value="">Todas</option>
-                <option v-for="n in nacionalidades" :key="n" :value="n">{{ n }}</option>
-              </select>
+              <label class="label py-0 text-xs font-medium">Ciudad</label>
+              <SearchableCombobox
+                v-model="coreText.ciudad"
+                field="ciudad"
+                placeholder="Buscar…"
+                @update:modelValue="onSearch"
+              />
+            </div>
+            <div>
+              <label class="label py-0 text-xs font-medium">Estado</label>
+              <SearchableCombobox
+                v-model="coreText.estado"
+                field="estado"
+                placeholder="Buscar…"
+                @update:modelValue="onSearch"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <p class="text-xs font-bold text-tertiary mb-2 uppercase tracking-wide flex items-center gap-2">
+            <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Perfil
+          </p>
+          <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
+            <div>
+              <label class="label py-0 text-xs font-medium">Profesión</label>
+              <SearchableCombobox
+                v-model="coreText.profesion"
+                field="profesion"
+                placeholder="Buscar…"
+                @update:modelValue="onSearch"
+              />
+            </div>
+            <div>
+              <label class="label py-0 text-xs font-medium">Nivel académico</label>
+              <SearchableCombobox
+                v-model="coreText.nivel_academico"
+                field="nivel_academico"
+                placeholder="Buscar…"
+                @update:modelValue="onSearch"
+              />
+            </div>
+            <div>
+              <label class="label py-0 text-xs font-medium">Documento</label>
+              <input v-model="coreText.documento_nro" type="text" class="input input-bordered input-sm w-full" @input="onSearch" />
             </div>
             <div>
               <label class="label py-0 text-xs font-medium">Versión de formulario</label>
@@ -154,7 +174,9 @@
         </div>
 
         <div>
-          <p class="text-xs font-medium text-base-content/70 mb-2">Preferencias y condiciones</p>
+          <p class="text-xs font-bold text-tertiary mb-2 uppercase tracking-wide flex items-center gap-2">
+            <span class="inline-block w-1 h-3.5 bg-colorSecondary"></span>Preferencias y condiciones
+          </p>
           <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
             <div v-for="f in responseFields" :key="f">
               <label class="label py-0 text-xs font-medium">{{ respLabels[f] }}</label>
@@ -183,21 +205,22 @@
             <th>Áreas</th>
             <th>Status</th>
             <th class="cursor-pointer select-none" @click="toggleSort('submitted_at')">Fecha</th>
+            <th class="w-20 text-right">Acción</th>
           </tr>
         </thead>
         <tbody>
           <tr v-if="loading">
-            <td colspan="10" class="text-center py-10">
+            <td colspan="11" class="text-center py-10">
               <span class="loading loading-spinner loading-md text-primary"></span>
             </td>
           </tr>
           <tr v-else-if="error">
-            <td colspan="10" class="text-center py-10 text-error">{{ error }}</td>
+            <td colspan="11" class="text-center py-10 text-error">{{ error }}</td>
           </tr>
           <tr v-else-if="rows.length === 0">
-            <td colspan="10" class="text-center py-10 text-base-content/40">Sin resultados</td>
+            <td colspan="11" class="text-center py-10 text-base-content/40">Sin resultados</td>
           </tr>
-          <tr v-for="row in rows" :key="row.id" class="hover:bg-base-200/50">
+          <tr v-for="row in rows" :key="row.id" class="hover:bg-base-200/50 cursor-pointer" @click="openDetail(row)">
             <td class="font-mono">{{ row.numero_voluntario }}</td>
             <td class="font-medium whitespace-nowrap">{{ row.nombre_completo }}</td>
             <td class="max-w-[220px] truncate">{{ row.correo }}</td>
@@ -210,6 +233,9 @@
               <span class="badge badge-sm" :class="badgeClass(row.status)">{{ row.status || "pendiente" }}</span>
             </td>
             <td class="whitespace-nowrap">{{ formatDate(row.submitted_at) }}</td>
+            <td class="text-right">
+              <button class="btn btn-ghost btn-xs" title="Ver detalle" @click.stop="openDetail(row)">Ver</button>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -217,7 +243,7 @@
 
     <!-- Paginación -->
     <div class="flex items-center justify-between flex-wrap gap-3">
-      <p class="text-sm text-base-content/60">
+      <p class="text-sm text-amber-200">
         {{ total }} registros · página {{ page }} de {{ totalPages || 1 }}
       </p>
       <div class="join">
@@ -234,11 +260,31 @@
         <button class="join-item btn btn-sm" :disabled="page >= totalPages" @click="goPage(page + 1)">»</button>
       </div>
     </div>
+
+    <!-- Modal de detalle -->
+    <Teleport v-if="detailNumero !== null" to="body">
+      <div class="fixed inset-0 z-[60] overflow-y-auto">
+        <div class="fixed inset-0 bg-black/60" @click="closeDetail"></div>
+        <div class="relative min-h-full flex items-center justify-center p-4 sm:p-6">
+          <div class="w-full max-w-3xl max-h-[85vh] overflow-y-auto rounded-box bg-base-100 shadow-2xl ring-1 ring-base-300">
+            <div class="sticky top-0 z-10 flex items-center justify-between px-4 py-3 bg-base-100 border-b border-base-200">
+              <span class="text-sm font-semibold">Detalle del voluntario</span>
+              <button class="btn btn-ghost btn-sm" @click="closeDetail">✕</button>
+            </div>
+            <div class="p-4">
+              <VoluntarioDetail :numero="detailNumero" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
+import SearchableCombobox from "./SearchableCombobox.vue";
+import VoluntarioDetail from "./VoluntarioDetail.vue";
 
 const rows = ref([]);
 const total = ref(0);
@@ -248,6 +294,38 @@ const limit = 25;
 const loading = ref(false);
 const error = ref("");
 
+const detailNumero = ref(null);
+let returnPath = "";
+
+function slugUrl(numero) {
+  const m = window.location.pathname.match(/^\/([a-z]{2})\/admin/);
+  const locale = m ? m[1] : "es";
+  return `/${locale}/admin/voluntario/${numero}`;
+}
+
+function openDetail(row) {
+  returnPath = window.location.pathname;
+  detailNumero.value = row.numero_voluntario;
+  history.pushState({ voluntario: true }, "", slugUrl(row.numero_voluntario));
+}
+
+function closeDetail() {
+  detailNumero.value = null;
+  history.replaceState(null, "", returnPath || window.location.pathname);
+}
+
+function onPopstate() {
+  if (detailNumero.value !== null) detailNumero.value = null;
+}
+
+function onKeydown(e) {
+  if (e.key === "Escape" && detailNumero.value !== null) closeDetail();
+}
+
+watch(detailNumero, (v) => {
+  document.body.style.overflow = v === null ? "" : "hidden";
+});
+
 const search = ref("");
 const selectedStatuses = ref([]);
 const selectedPaises = ref([]);
@@ -259,8 +337,6 @@ const desde = ref("");
 const hasta = ref("");
 const edadMin = ref("");
 const edadMax = ref("");
-const hasWhatsapp = ref("");
-const emailSent = ref("");
 
 const coreText = reactive({
   ciudad: "",
@@ -313,9 +389,7 @@ const respFilterOptions = {
   voluntariado_anterior: ["si", "no"],
 };
 
-const paises = ref([]);
 const statuses = ref([]);
-const nacionalidades = ref([]);
 const formVersions = ref([]);
 
 let searchTimer = null;
@@ -323,22 +397,69 @@ let searchTimer = null;
 const statusLabel = computed(() =>
   selectedStatuses.value.length ? selectedStatuses.value.join(", ") : "Todos"
 );
-const paisLabel = computed(() =>
-  selectedPaises.value.length ? selectedPaises.value.join(", ") : "Todos"
-);
 
-const activeFilterCount = computed(() => {
-  let n = 0;
-  if (search.value.trim()) n++;
-  if (selectedStatuses.value.length) n++;
-  if (selectedPaises.value.length) n++;
-  if (desde.value || hasta.value) n++;
-  if (edadMin.value || edadMax.value) n++;
-  if (hasWhatsapp.value || emailSent.value) n++;
-  if (sexo.value || nacionalidad.value || formVersion.value) n++;
-  for (const f of responseFields) if (respFilters[f]) n++;
-  for (const f of Object.keys(coreText)) if (coreText[f]) n++;
-  return n;
+const activeFilterCount = computed(() => activeChips.value.length);
+
+const activeChips = computed(() => {
+  const chips = [];
+  const add = (key, label, remove) => chips.push({ key, label, remove });
+
+  if (search.value.trim()) add("q", `Búsqueda: ${search.value.trim()}`, () => {
+    search.value = "";
+    onSearch();
+  });
+  for (const s of selectedStatuses.value) add(`status-${s}`, `Status: ${s}`, () => {
+    selectedStatuses.value = selectedStatuses.value.filter((x) => x !== s);
+    applyFilters();
+  });
+  for (const p of selectedPaises.value) add(`pais-${p}`, `País: ${p}`, () => {
+    selectedPaises.value = selectedPaises.value.filter((x) => x !== p);
+    applyFilters();
+  });
+  if (desde.value) add("desde", `Desde: ${desde.value}`, () => {
+    desde.value = "";
+    applyFilters();
+  });
+  if (hasta.value) add("hasta", `Hasta: ${hasta.value}`, () => {
+    hasta.value = "";
+    applyFilters();
+  });
+  if (edadMin.value) add("edad_min", `Edad mín: ${edadMin.value}`, () => {
+    edadMin.value = "";
+    applyFilters();
+  });
+  if (edadMax.value) add("edad_max", `Edad máx: ${edadMax.value}`, () => {
+    edadMax.value = "";
+    applyFilters();
+  });
+  for (const [k, v] of Object.entries(coreText)) {
+    if (v) {
+      const label = { ciudad: "Ciudad", estado: "Estado", profesion: "Profesión", nivel_academico: "Nivel académico", documento_nro: "Documento" }[k];
+      add(`core-${k}`, `${label}: ${v}`, () => {
+        coreText[k] = "";
+        applyFilters();
+      });
+    }
+  }
+  if (sexo.value) add("sexo", `Sexo: ${sexo.value}`, () => {
+    sexo.value = "";
+    applyFilters();
+  });
+  if (nacionalidad.value) add("nacionalidad", `Nacionalidad: ${nacionalidad.value}`, () => {
+    nacionalidad.value = "";
+    applyFilters();
+  });
+  if (formVersion.value) add("form_version", `Versión: ${formVersion.value}`, () => {
+    formVersion.value = "";
+    applyFilters();
+  });
+  for (const f of responseFields) {
+    if (respFilters[f]) add(`resp-${f}`, `${respLabels[f]}: ${respFilters[f]}`, () => {
+      respFilters[f] = "";
+      applyFilters();
+    });
+  }
+  return chips;
 });
 
 async function fetchData() {
@@ -356,9 +477,7 @@ async function fetchData() {
   if (hasta.value) params.set("hasta", hasta.value);
   if (edadMin.value) params.set("edad_min", edadMin.value);
   if (edadMax.value) params.set("edad_max", edadMax.value);
-  if (hasWhatsapp.value) params.set("has_whatsapp", hasWhatsapp.value);
-  if (emailSent.value) params.set("email_sent", emailSent.value);
-  for (const f of Object.keys(coreText)) if (coreText[f]) params.set(f, coreText[f]);
+  for (const [f, v] of Object.entries(coreText)) if (v) params.set(f, v);
   if (sexo.value) params.set("sexo", sexo.value);
   if (nacionalidad.value) params.set("nacionalidad", nacionalidad.value);
   if (formVersion.value) params.set("form_version", formVersion.value);
@@ -384,9 +503,7 @@ async function fetchOptions() {
     const res = await fetch("/api/admin/voluntarios/options");
     const json = await res.json();
     if (json.success) {
-      paises.value = json.paises;
       statuses.value = json.statuses;
-      nacionalidades.value = json.nacionalidades;
       formVersions.value = json.form_versions;
     }
   } catch {
@@ -415,8 +532,6 @@ function clearFilters() {
   hasta.value = "";
   edadMin.value = "";
   edadMax.value = "";
-  hasWhatsapp.value = "";
-  emailSent.value = "";
   Object.keys(coreText).forEach((k) => (coreText[k] = ""));
   sexo.value = "";
   nacionalidad.value = "";
@@ -478,5 +593,12 @@ function badgeClass(s) {
 onMounted(() => {
   fetchOptions();
   fetchData();
+  window.addEventListener("popstate", onPopstate);
+  window.addEventListener("keydown", onKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("popstate", onPopstate);
+  window.removeEventListener("keydown", onKeydown);
 });
 </script>
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 432452b..dbb9bce 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -8,7 +8,7 @@ import "@fontsource/poppins/700.css";
 import "@fontsource-variable/kameron";
 import ShareSticky from "../components/ShareSticky.vue";
 import { routeTranslations } from "../i18n";
-const { title, description, image, url, date, noindex } = Astro.props;
+const { title, description, image, url, date, noindex, theme } = Astro.props;
 
 const currentLocale = Astro.currentLocale ?? "es";
 const direction = currentLocale === "he" ? "rtl" : "ltr";
@@ -21,7 +21,7 @@ const isNewsPage = contentSegments.some((segment) =>
 );
 ---
 
-<html lang={currentLocale} dir={direction} class="scroll-smooth">
+<html lang={currentLocale} dir={direction} data-theme={theme ?? undefined} class="scroll-smooth">
   <BaseHead
     title={title}
     description={description}
diff --git a/src/pages/[locale]/admin/dashboard.astro b/src/pages/[locale]/admin/dashboard.astro
new file mode 100644
index 0000000..e3342f9
--- /dev/null
+++ b/src/pages/[locale]/admin/dashboard.astro
@@ -0,0 +1,30 @@
+---
+import MainLayout from "@/layouts/MainLayout.astro";
+import Header from "@/components/Header.astro";
+import AdminDashboard from "@/components/admin/AdminDashboard.vue";
+
+const { locale } = Astro.params;
+---
+
+<MainLayout theme="cdrpj" title="Dashboard de Voluntarios" noindex>
+  <div class="top-16 relative mb container mx-auto">
+    <Header />
+  </div>
+  <main class="container mx-auto px-4 py-10 mt-8">
+    <div class="flex flex-col lg:w-1/2 items-center mx-auto mb-6">
+      <h1 class="text-white text-2xl uppercase font-bold text-center mb-3 font-primary">
+        Admin
+      </h1>
+      <h2 class="text-colorPrimary text-3xl lg:text-5xl font-bold text-center font-secondary">
+        Dashboard de Voluntarios
+      </h2>
+    </div>
+    <nav class="flex justify-center gap-2 mb-10">
+      <a href={`/${locale}/admin/dashboard`} class="btn btn-primary btn-sm">Dashboard</a>
+      <a href={`/${locale}/admin`} class="btn btn-ghost btn-sm text-colorPrimary">Voluntarios</a>
+    </nav>
+    <div class="max-w-5xl mx-auto">
+      <AdminDashboard client:load />
+    </div>
+  </main>
+</MainLayout>
diff --git a/src/pages/[locale]/admin/index.astro b/src/pages/[locale]/admin/index.astro
index 6709d1b..2f17098 100644
--- a/src/pages/[locale]/admin/index.astro
+++ b/src/pages/[locale]/admin/index.astro
@@ -1,30 +1,28 @@
 ---
-import "../../../styles/global.css";
-import "@fontsource/poppins/400.css";
-import "@fontsource/poppins/500.css";
-import "@fontsource/poppins/700.css";
+import MainLayout from "@/layouts/MainLayout.astro";
+import Header from "@/components/Header.astro";
 import VoluntariosTable from "../../../components/admin/VoluntariosTable.vue";
+
+const { locale } = Astro.params;
 ---
 
-<html lang="es">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Dashboard de Voluntarios</title>
-    <meta name="robots" content="noindex" />
-  </head>
-  <body class="font-primary bg-base-200 min-h-screen">
-    <header class="bg-[#003421] text-[#EBE6D2]">
-      <div class="max-w-7xl mx-auto px-4 py-6 flex items-center justify-between">
-        <div>
-          <h1 class="text-2xl font-bold font-secondary">Dashboard de Voluntarios</h1>
-          <p class="text-sm text-white/70">Registros migrados desde Google Sheets</p>
-        </div>
-        <span class="badge badge-ghost badge-sm">sin auth</span>
-      </div>
-    </header>
-    <main class="max-w-7xl mx-auto px-4 py-8">
-      <VoluntariosTable client:load />
-    </main>
-  </body>
-</html>
+<MainLayout theme="cdrpj" title="Dashboard de Voluntarios" noindex>
+  <div class="top-16 relative mb container mx-auto">
+    <Header />
+  </div>
+  <main class="container mx-auto px-4 py-10 mt-8">
+    <div class="flex flex-col lg:w-1/2 items-center mx-auto mb-6">
+      <h1 class="text-white text-2xl uppercase font-bold text-center mb-3 font-primary">
+        Admin
+      </h1>
+      <h2 class="text-colorPrimary text-3xl lg:text-5xl font-bold text-center font-secondary">
+        Dashboard de Voluntarios
+      </h2>
+    </div>
+    <nav class="flex justify-center gap-2 mb-10">
+      <a href={`/${locale}/admin/dashboard`} class="btn btn-ghost btn-sm text-colorPrimary">Dashboard</a>
+      <a href={`/${locale}/admin`} class="btn btn-primary btn-sm">Voluntarios</a>
+    </nav>
+    <VoluntariosTable client:load />
+  </main>
+</MainLayout>
diff --git a/src/pages/[locale]/admin/voluntario/[numero].astro b/src/pages/[locale]/admin/voluntario/[numero].astro
new file mode 100644
index 0000000..82aa40d
--- /dev/null
+++ b/src/pages/[locale]/admin/voluntario/[numero].astro
@@ -0,0 +1,26 @@
+---
+import MainLayout from "@/layouts/MainLayout.astro";
+import Header from "@/components/Header.astro";
+import VoluntarioDetail from "@/components/admin/VoluntarioDetail.vue";
+
+const { numero } = Astro.params;
+---
+
+<MainLayout theme="cdrpj" title="Detalle de Voluntario" noindex>
+  <div class="top-16 relative mb container mx-auto">
+    <Header />
+  </div>
+  <main class="container mx-auto px-4 py-10 mt-8">
+    <div class="flex flex-col lg:w-1/2 items-center mx-auto mb-10">
+      <h1 class="text-white text-2xl uppercase font-bold text-center mb-3 font-primary">
+        Admin
+      </h1>
+      <h2 class="text-colorPrimary text-3xl lg:text-5xl font-bold text-center font-secondary">
+        Detalle de Voluntario
+      </h2>
+    </div>
+    <div class="max-w-3xl mx-auto">
+      <VoluntarioDetail numero={numero} client:load />
+    </div>
+  </main>
+</MainLayout>
diff --git a/src/pages/api/admin/voluntarios.ts b/src/pages/api/admin/voluntarios.ts
index 849482e..5c1c7e5 100644
--- a/src/pages/api/admin/voluntarios.ts
+++ b/src/pages/api/admin/voluntarios.ts
@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro";
 import { prisma } from "../lib/prisma";
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 
 export const prerender = false;
 
@@ -28,14 +28,17 @@ const SEARCHABLE_FIELDS = [
   "nacionalidad",
 ] as const;
 
-const CORE_TEXT_FILTERS = [
+const CORE_TEXT_FILTERS = ["documento_nro"] as const;
+
+const FUZZY_TEXT_FILTERS = [
   "ciudad",
   "estado",
   "profesion",
   "nivel_academico",
-  "documento_nro",
 ] as const;
 
+const FUZZY_THRESHOLD = 0.35;
+
 const CORE_EXACT_FILTERS = [
   "sexo",
   "nacionalidad",
@@ -120,6 +123,23 @@ function buildResponseFilter(key: string, values: string[]): Prisma.FormularioWh
   return or.length === 1 ? or[0] : { OR: or };
 }
 
+async function fuzzyIds(field: string, value: string): Promise<string[]> {
+  const col = Prisma.raw(field);
+  const rows = await prisma.$queryRaw<{ id: string }[]>`
+    SELECT id::text AS id
+    FROM formularios
+    WHERE ${col} IS NOT NULL
+      AND ${col} <> ''
+      AND length(${col}) >= 2
+      AND (
+        similarity(lower(${col}), lower(${value})) > ${FUZZY_THRESHOLD}
+        OR ${col} ILIKE ${`%${value}%`}
+      )
+    LIMIT 5000
+  `;
+  return rows.map((r) => r.id);
+}
+
 export const GET: APIRoute = async ({ url }) => {
   try {
     const sp = url.searchParams;
@@ -149,6 +169,14 @@ export const GET: APIRoute = async ({ url }) => {
       if (v) conditions.push({ [field]: { contains: v, mode: "insensitive" } });
     }
 
+    for (const field of FUZZY_TEXT_FILTERS) {
+      const v = (sp.get(field) || "").trim();
+      if (v) {
+        const ids = await fuzzyIds(field, v);
+        conditions.push(ids.length ? { id: { in: ids } } : { id: { in: [] } });
+      }
+    }
+
     for (const field of CORE_EXACT_FILTERS) {
       const v = (sp.get(field) || "").trim();
       if (v) conditions.push({ [field]: { in: splitList(v) } });
@@ -159,16 +187,6 @@ export const GET: APIRoute = async ({ url }) => {
       if (v) conditions.push(buildResponseFilter(key, splitList(v)));
     }
 
-    const hasWhatsapp = (sp.get("has_whatsapp") || "").trim();
-    if (hasWhatsapp) {
-      conditions.push(hasWhatsapp === "true" ? { whatsapp: { not: null } } : { whatsapp: null });
-    }
-
-    const emailSent = (sp.get("email_sent") || "").trim();
-    if (emailSent) {
-      conditions.push(emailSent === "true" ? { email_sent_at: { not: null } } : { email_sent_at: null });
-    }
-
     const where: Prisma.FormularioWhereInput = conditions.length ? { AND: conditions } : {};
 
     const [total, rows] = await Promise.all([
diff --git a/src/pages/api/admin/voluntarios/[numero].ts b/src/pages/api/admin/voluntarios/[numero].ts
new file mode 100644
index 0000000..03ddc48
--- /dev/null
+++ b/src/pages/api/admin/voluntarios/[numero].ts
@@ -0,0 +1,97 @@
+import type { APIRoute } from "astro";
+import { prisma } from "../../lib/prisma";
+import { t, type I18nKey } from "../../../../i18n";
+
+export const prerender = false;
+
+export const GET: APIRoute = async ({ params }) => {
+  try {
+    const numero = Number(params.numero);
+    if (!Number.isInteger(numero) || numero <= 0) {
+      return Response.json(
+        { success: false, message: "Número de voluntario inválido" },
+        { status: 404 }
+      );
+    }
+
+    const [voluntario, secciones] = await Promise.all([
+      prisma.formulario.findUnique({
+        where: { numero_voluntario: numero },
+        include: { respuestas: { orderBy: { created_at: "asc" } } },
+      }),
+      prisma.seccion.findMany({
+        orderBy: { orden: "asc" },
+        include: { campos: { orderBy: { orden: "asc" } } },
+      }),
+    ]);
+
+    if (!voluntario) {
+      return Response.json(
+        { success: false, message: "Voluntario no encontrado" },
+        { status: 404 }
+      );
+    }
+
+    const sections = secciones.map((s) => ({
+      key: s.title_key.replace(/^form\./, ""),
+      title: t("es", s.title_key as I18nKey),
+      fields: s.campos.map((c) => ({
+        key: c.key,
+        label: t("es", c.label_key as I18nKey),
+        tipo: c.tipo,
+        options: Array.isArray(c.options)
+          ? (c.options as { value?: string; label?: string }[])
+              .filter((o) => o && typeof o === "object")
+              .map((o) => ({
+                value: o.value ?? "",
+                label: o.label ? t("es", o.label as I18nKey) : o.value ?? "",
+              }))
+          : [],
+      })),
+    }));
+
+    return Response.json({
+      success: true,
+      data: {
+        id: voluntario.id,
+        numero_voluntario: voluntario.numero_voluntario,
+        nombre: voluntario.nombre,
+        segundo_nombre: voluntario.segundo_nombre,
+        apellido: voluntario.apellido,
+        documento_nro: voluntario.documento_nro,
+        documento_tipo: voluntario.documento_tipo,
+        correo: voluntario.correo,
+        fecha_nacimiento: voluntario.fecha_nacimiento,
+        nacionalidad: voluntario.nacionalidad,
+        sexo: voluntario.sexo,
+        direccion: voluntario.direccion,
+        ciudad: voluntario.ciudad,
+        estado: voluntario.estado,
+        pais: voluntario.pais,
+        codigo_postal: voluntario.codigo_postal,
+        telefono: voluntario.telefono,
+        whatsapp: voluntario.whatsapp,
+        profesion: voluntario.profesion,
+        lugar_trabajo: voluntario.lugar_trabajo,
+        nivel_academico: voluntario.nivel_academico,
+        status: voluntario.status,
+        form_version: voluntario.form_version,
+        email_sent_at: voluntario.email_sent_at,
+        submitted_at: voluntario.submitted_at,
+        updated_at: voluntario.updated_at,
+        respuestas: voluntario.respuestas.map((r) => ({
+          seccion: r.seccion,
+          key: r.key,
+          value: r.value,
+        })),
+      },
+      form: { sections },
+    });
+  } catch (error) {
+    console.error("Error en /api/admin/voluntarios/[numero]:", error);
+    return Response.json(
+      { success: false, message: "Error al obtener el voluntario" },
+      { status: 500 }
+    );
+  }
+};
diff --git a/src/pages/api/admin/voluntarios/distinct.ts b/src/pages/api/admin/voluntarios/distinct.ts
new file mode 100644
index 0000000..c62b3df
--- /dev/null
+++ b/src/pages/api/admin/voluntarios/distinct.ts
@@ -0,0 +1,56 @@
+import type { APIRoute } from "astro";
+import { prisma } from "../../lib/prisma";
+import { Prisma } from "@prisma/client";
+
+export const prerender = false;
+
+const DISTINCT_FIELDS = new Set([
+  "ciudad",
+  "estado",
+  "profesion",
+  "nivel_academico",
+  "nacionalidad",
+  "pais",
+]);
+
+const SIMILARITY_THRESHOLD = 0.35;
+
+export const GET: APIRoute = async ({ url }) => {
+  try {
+    const sp = url.searchParams;
+    const field = (sp.get("field") || "").trim();
+    const q = (sp.get("q") || "").trim();
+    const limit = Math.min(100, Math.max(1, parseInt(sp.get("limit") || "25", 10)));
+
+    if (!DISTINCT_FIELDS.has(field)) {
+      return Response.json(
+        { success: false, message: "Campo no permitido" },
+        { status: 400 }
+      );
+    }
+
+    const col = Prisma.raw(field);
+
+    const rows = await prisma.$queryRaw<{ value: string; count: number }[]>`
+      SELECT ${col} AS value, COUNT(*)::int AS count
+      FROM formularios
+      WHERE ${col} IS NOT NULL AND ${col} <> ''
+        ${q.length >= 2 ? Prisma.sql`AND (similarity(lower(${col}), lower(${q})) > ${SIMILARITY_THRESHOLD} OR ${col} ILIKE ${`%${q}%`})` : Prisma.empty}
+      GROUP BY ${col}
+      ORDER BY count DESC
+      LIMIT ${limit}
+    `;
+
+    return Response.json({
+      success: true,
+      field,
+      data: rows.map((r) => ({ value: r.value, count: r.count })),
+    });
+  } catch (error) {
+    console.error("Error en /api/admin/voluntarios/distinct:", error);
+    return Response.json(
+      { success: false, message: "Error al obtener valores" },
+      { status: 500 }
+    );
+  }
+};
diff --git a/src/pages/api/admin/voluntarios/stats.ts b/src/pages/api/admin/voluntarios/stats.ts
new file mode 100644
index 0000000..67d2466
--- /dev/null
+++ b/src/pages/api/admin/voluntarios/stats.ts
@@ -0,0 +1,138 @@
+import type { APIRoute } from "astro";
+import { prisma } from "../../lib/prisma";
+import { t, type I18nKey } from "../../../../i18n";
+
+export const prerender = false;
+
+const OPTION_FIELDS = [
+  "idioma",
+  "areas_colaborar",
+  "dias_disponibles",
+  "horario_preferido",
+  "sexo",
+  "fuera_ciudad",
+  "misiones_internacionales",
+  "condicion_medica",
+  "voluntariado_anterior",
+] as const;
+
+async function multiValueDist(key: string): Promise<{ value: string; count: number }[]> {
+  const rows = await prisma.$queryRaw<{ v: string; cnt: number }[]>`
+    SELECT trim(unnest(string_to_array(value, ','))) AS v, count(DISTINCT formulario_id)::int AS cnt
+    FROM respuestas
+    WHERE key = ${key} AND btrim(value) <> ''
+    GROUP BY v
+    ORDER BY cnt DESC
+  `;
+  return rows.map((r) => ({ value: r.v, count: r.cnt }));
+}
+
+async function valueDist(key: string): Promise<{ value: string; count: number }[]> {
+  const rows = await prisma.respuesta.groupBy({
+    by: ["value"],
+    where: { key, value: { not: "" } },
+    _count: { _all: true },
+  });
+  return rows
+    .filter((r) => r.value !== null)
+    .map((r) => ({ value: r.value!, count: r._count._all }))
+    .sort((a, b) => b.count - a.count);
+}
+
+export const GET: APIRoute = async () => {
+  try {
+    const campos = await prisma.campo.findMany({
+      where: { key: { in: OPTION_FIELDS as unknown as string[] } },
+    });
+
+    const optionMaps: Record<string, Record<string, string>> = {};
+    for (const c of campos) {
+      optionMaps[c.key] = {};
+      if (Array.isArray(c.options)) {
+        for (const o of c.options as { value?: string; label?: string }[]) {
+          if (o && o.value) {
+            optionMaps[c.key][o.value] = o.label ? t("es", o.label as I18nKey) : o.value;
+          }
+        }
+      }
+    }
+
+    const withLabels = (
+      dist: { value: string; count: number }[],
+      key: string
+    ): { value: string; label: string; count: number }[] =>
+      dist.map((d) => ({
+        value: d.value,
+        label: optionMaps[key]?.[d.value] || d.value,
+        count: d.count,
+      }));
+
+    const [total, statuses, sexo, paises, [idiomas, areas, dias, horarios], condiciones, edad] =
+      await Promise.all([
+        prisma.formulario.count(),
+        prisma.formulario.groupBy({ by: ["status"], _count: { _all: true } }),
+        prisma.formulario.groupBy({ by: ["sexo"], _count: { _all: true } }),
+        prisma.formulario.groupBy({
+          by: ["pais"],
+          _count: { _all: true },
+          where: { pais: { not: null } },
+          orderBy: { _count: { pais: "desc" } },
+          take: 12,
+        }),
+        Promise.all([
+          multiValueDist("idioma"),
+          multiValueDist("areas_colaborar"),
+          multiValueDist("dias_disponibles"),
+          multiValueDist("horario_preferido"),
+        ]),
+        Promise.all(
+          ["fuera_ciudad", "misiones_internacionales", "condicion_medica", "voluntariado_anterior"].map(
+            (k) => valueDist(k)
+          )
+        ),
+        prisma.$queryRaw<{ promedio: number | null }[]>`
+          SELECT round(avg(extract(epoch from (now() - fecha_nacimiento)) / 31557600), 1) AS promedio
+          FROM formularios
+          WHERE fecha_nacimiento IS NOT NULL
+        `,
+      ]);
+
+    const condKeys = [
+      "fuera_ciudad",
+      "misiones_internacionales",
+      "condicion_medica",
+      "voluntariado_anterior",
+    ] as const;
+    const condicionesObj: Record<string, Record<string, number>> = {};
+    condKeys.forEach((k, i) => {
+      condicionesObj[k] = Object.fromEntries(condiciones[i].map((c) => [c.value, c.count]));
+    });
+
+    const formatPais = paises
+      .filter((p) => p.pais !== null)
+      .map((p) => ({ value: p.pais!, count: p._count._all }));
+
+    return Response.json({
+      success: true,
+      total,
+      edad: { promedio: edad[0]?.promedio ?? null },
+      idiomas: withLabels(idiomas, "idioma"),
+      areas: withLabels(areas, "areas_colaborar"),
+      dias: withLabels(dias, "dias_disponibles"),
+      horarios: withLabels(horarios, "horario_preferido"),
+      sexo: withLabels(
+        sexo.filter((s) => s.sexo !== null).map((s) => ({ value: s.sexo!, count: s._count._all })),
+        "sexo"
+      ),
+      paises: formatPais,
+      statuses: statuses.map((s) => ({ value: s.status, count: s._count._all })),
+      condiciones: condicionesObj,
+    });
+  } catch (error) {
+    console.error("Error en /api/admin/voluntarios/stats:", error);
+    return Response.json(
+      { success: false, message: "Error al obtener estadísticas" },
+      { status: 500 }
+    );
+  }
+};
diff --git a/src/pages/api/emailPostulacion/send.ts b/src/pages/api/emailPostulacion/send.ts
index d89e270..e7fcd3f 100644
--- a/src/pages/api/emailPostulacion/send.ts
+++ b/src/pages/api/emailPostulacion/send.ts
@@ -1,7 +1,8 @@
 import type { APIRoute } from "astro";
-import { appendToSheet, emailExists } from "../lib/googleSheets";
+import { appendToSheet } from "../lib/googleSheets";
 import { sendEmailCf } from "../lib/email";
 import { prisma } from "../lib/prisma";
+import { emailExistsInDb } from "../lib/formularioDb";
 export const prerender = false;
 
 export const POST: APIRoute = async ({ request }) => {
@@ -23,7 +24,7 @@ export const POST: APIRoute = async ({ request }) => {
       return Response.redirect("/?error=datos", 303);
     }
 
-    const exists = await emailExists(email);
+    const exists = await emailExistsInDb(email);
     if (exists) {
       return Response.json({
         success: false,
diff --git a/src/pages/api/formulario/send.ts b/src/pages/api/formulario/send.ts
index da9484c..b33c10d 100644
--- a/src/pages/api/formulario/send.ts
+++ b/src/pages/api/formulario/send.ts
@@ -1,7 +1,7 @@
 import type { APIRoute } from "astro";
 import { appendRegistrationToSheet } from "../lib/googleSheets";
 import { sendEmailCf } from "../lib/email";
-import { saveFormularioToSupabase } from "../lib/formularioDb";
+import { saveFormularioToSupabase, emailExistsInDb } from "../lib/formularioDb";
 export const prerender = false;
 
 const COLUMNS = [
@@ -102,17 +102,19 @@ export const POST: APIRoute = async ({ request }) => {
       timeZone: "America/Puerto_Rico",
     });
 
-    const form = await saveFormularioToSupabase(
-      formData,
-      body.responses || []
-    );
-    if (emailExistsInRegistry(formData.correo)) {
+    const exists = await emailExistsInDb(formData.correo);
+    if (exists) {
       return Response.json(
         { success: false, message: "Este correo ya está registrado. No se permiten 2 registros." },
         { status: 409 }
       );
     }
 
+    const form = await saveFormularioToSupabase(
+      formData,
+      body.responses || []
+    );
+
     const row = COLUMNS.map((key) => flattenValue(formData[key]));
     row.push(timestamp);
 
@@ -127,9 +129,6 @@ export const POST: APIRoute = async ({ request }) => {
       ...result,
       numero_voluntario: form.numero_voluntario,
     });
-    addEmailToRegistry(formData.correo);
-
-    return Response.json(result);
   } catch (error) {
     console.error("Error en /api/formulario/send:", error);
     return Response.json(
diff --git a/src/pages/api/lib/emailsRegistry.ts b/src/pages/api/lib/emailsRegistry.ts
deleted file mode 100644
index a4e4c4b..0000000
--- a/src/pages/api/lib/emailsRegistry.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import fs from "node:fs";
-import path from "node:path";
-
-const REGISTRY_PATH = path.resolve(process.cwd(), "data", "emails.txt");
-
-export function emailExistsInRegistry(email: string): boolean {
-  try {
-    if (!fs.existsSync(REGISTRY_PATH)) return false;
-    const content = fs.readFileSync(REGISTRY_PATH, "utf-8");
-    return content.split("\n").some((line) => line.trim().toLowerCase() === email.trim().toLowerCase());
-  } catch {
-    return false;
-  }
-}
-
-export function addEmailToRegistry(email: string): void {
-  const dir = path.dirname(REGISTRY_PATH);
-  if (!fs.existsSync(dir)) {
-    fs.mkdirSync(dir, { recursive: true });
-  }
-  fs.appendFileSync(REGISTRY_PATH, email.trim().toLowerCase() + "\n");
-}
diff --git a/src/pages/api/lib/formularioDb.ts b/src/pages/api/lib/formularioDb.ts
index ea9ffec..6fa7131 100644
--- a/src/pages/api/lib/formularioDb.ts
+++ b/src/pages/api/lib/formularioDb.ts
@@ -35,6 +35,16 @@ function isBlank(v: unknown): boolean {
   return v === undefined || v === null || v === "";
 }
 
+export async function emailExistsInDb(email: string): Promise<boolean> {
+  const normalized = (email || "").trim().toLowerCase();
+  if (!normalized) return false;
+  const found = await prisma.formulario.findFirst({
+    where: { correo: { equals: normalized, mode: "insensitive" } },
+    select: { id: true },
+  });
+  return Boolean(found);
+}
+
 export async function saveFormularioToSupabase(
   formData: FormData,
   responses: RespuestaPayload[]
diff --git a/src/pages/api/voluntarios/count.ts b/src/pages/api/voluntarios/count.ts
index 4cc10b3..5b5bed7 100644
--- a/src/pages/api/voluntarios/count.ts
+++ b/src/pages/api/voluntarios/count.ts
@@ -1,11 +1,11 @@
 import type { APIRoute } from "astro";
-import { getVolunteerCount } from "../lib/googleSheets";
+import { prisma } from "../lib/prisma";
 
 export const prerender = false;
 
 export const GET: APIRoute = async () => {
   try {
-    const count = await getVolunteerCount();
+    const count = await prisma.formulario.count();
 
     return Response.json(
       { success: true, count },
diff --git a/src/styles/global.css b/src/styles/global.css
index 5073308..ae6376b 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,6 +2,40 @@
 @plugin '@tailwindcss/typography';
 @plugin "daisyui";
 
+@plugin "daisyui/theme" {
+    name: "cdrpj";
+    default: false;
+    color-scheme: light;
+    --color-base-100: #ffffff;
+    --color-base-200: #ebe6d2;
+    --color-base-300: #d8d1b9;
+    --color-base-content: #003421;
+    --color-primary: #cba16a;
+    --color-primary-content: #003421;
+    --color-secondary: #003421;
+    --color-secondary-content: #ebe6d2;
+    --color-accent: #22523f;
+    --color-accent-content: #ebe6d2;
+    --color-neutral: #22523f;
+    --color-neutral-content: #ebe6d2;
+    --color-info: #22523f;
+    --color-info-content: #ebe6d2;
+    --color-success: #4a8c6f;
+    --color-success-content: #ffffff;
+    --color-warning: #cba16a;
+    --color-warning-content: #003421;
+    --color-error: #b03a2e;
+    --color-error-content: #ffffff;
+    --radius-selector: 0rem;
+    --radius-field: 0rem;
+    --radius-box: 0rem;
+    --size-selector: .25rem;
+    --size-field: .25rem;
+    --border: 1px;
+    --depth: 1;
+    --noise: 0;
+}
+
 @theme {
     --font-primary: "Poppins", sans-serif;
     --font-secondary: "Kameron Variable", sans-serif;