From 1ce67d7e42fe37510cf2180fb4cb313bd2aca605 Mon Sep 17 00:00:00 2001
From: David Ascanio <daviddeveloper24@outlook.com>
Date: Mon, 25 May 2026 12:20:06 -0300
Subject: [PATCH] Generic component

---
 ...nsenseDetail.vue => PublicationDetail.vue} |  11 +-
 app/components/searchPanel/SearchPanel.vue    | 728 ++++++++++++++++
 app/pages/conferencias.vue                    | 793 +----------------
 app/pages/estudios-biblicos.vue               | 814 +-----------------
 4 files changed, 754 insertions(+), 1592 deletions(-)
 rename app/components/{estudiosTypensense/EstudiosTypensenseDetail.vue => PublicationDetail.vue} (98%)
 create mode 100644 app/components/searchPanel/SearchPanel.vue

diff --git a/app/components/estudiosTypensense/EstudiosTypensenseDetail.vue b/app/components/PublicationDetail.vue
similarity index 98%
rename from app/components/estudiosTypensense/EstudiosTypensenseDetail.vue
rename to app/components/PublicationDetail.vue
index 36e2a12..7f79b34 100644
--- a/app/components/estudiosTypensense/EstudiosTypensenseDetail.vue
+++ b/app/components/PublicationDetail.vue
@@ -64,12 +64,15 @@ const props = defineProps<{
   query?: string
   selectedHit?: TypesenseParagraphHit | null
   selectedMatchingHits?: TypesenseParagraphHit[] | null
+  accentColor?: 'green' | 'blue'
 }>()
 
 const emits = defineEmits(['close'])
 
 const { locale } = useI18n()
 const favorites = useFavoritesStore()
+
+const iconColor = computed(() => props.accentColor === 'blue' ? 'text-carpablue' : 'text-carpagreen')
 const history = useHistoryStore()
 const { showParagraphNumbers } = storeToRefs(useSettingsStore())
 const toast = useToast()
@@ -783,15 +786,15 @@ function highlightTextNodes(root: HTMLElement, terms: string[]): number {
             {{ $t('search.draft') }}
           </p>
           <p v-if="safeDate()" class="text-sm text-highlighted flex items-center gap-1.5 shrink-0">
-            <UIcon name="ph:calendar" class="size-4 text-green-600" />
+            <UIcon name="ph:calendar" :class="['size-4', iconColor]" />
             {{ safeDate() }}
           </p>
           <p v-if="document?.activity" class="text-sm flex items-center gap-1.5 text-muted shrink-0">
-            <UIcon name="ph:hash" class="size-4 text-green-600 shrink-0" />
+            <UIcon name="ph:hash" :class="['size-4 shrink-0', iconColor]" />
             {{ $t('search.publication') }} {{ document.activity }}
           </p>
           <p v-if="safeLocation()" class="text-sm flex items-center gap-1.5 text-muted min-w-0">
-            <UIcon name="ph:map-pin" class="size-4 text-green-600 shrink-0" />
+            <UIcon name="ph:map-pin" :class="['size-4 shrink-0', iconColor]" />
             <span class="truncate max-w-55">{{ safeLocation() }}</span>
           </p>
         </div>
@@ -854,7 +857,7 @@ function highlightTextNodes(root: HTMLElement, terms: string[]): number {
                   variant="ghost"
                   @click="copyToClipboard(hit.document.text, hit.document.type)"
                   class="text-gray-300 hover:text-white"
-                  :class="(hit.document.type=='activities'?'hover:bg-carpagreen':'hover:bg-carpablue')"
+                  :class="accentColor === 'blue' ? 'hover:bg-carpablue' : 'hover:bg-carpagreen'"
                 />
               </div>
               <div class="">
diff --git a/app/components/searchPanel/SearchPanel.vue b/app/components/searchPanel/SearchPanel.vue
new file mode 100644
index 0000000..9ba2adb
--- /dev/null
+++ b/app/components/searchPanel/SearchPanel.vue
@@ -0,0 +1,728 @@
+<script setup lang="ts">
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { breakpointsTailwind, useDebounce } from '@vueuse/core'
+import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
+import { useSettingsStore } from '~/stores/settings'
+
+interface Props {
+  paragraphsCollection: string
+  mainCollection: string
+  groupByField: string
+  favoritesCollection: string
+  panelId: string
+  navTitleKey: string
+  accentColor: 'green' | 'blue'
+  emptyDetailText: string
+  showDraft?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showDraft: false
+})
+
+const QUERY_BY = 'text'
+
+const { $i18n } = useNuxtApp()
+const t = $i18n.t
+const { locale } = useI18n()
+
+const filterBy = computed(() => `locale:=${locale.value}`)
+const REQUEST_TIMEOUT_MS = 15000
+
+const settings = useSettingsStore()
+
+// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
+const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
+
+const query = ref(q0)
+const debouncedQuery = useDebounce(query, 150)
+const loading = ref(false)
+const loadingMore = ref(false)
+const errorMsg = ref<string | null>(null)
+
+// ---- Types ----------------------------------------------------------------
+
+interface ParagraphDoc {
+  id?: string
+  document_id: string
+  text: string
+  number: number
+  locale: string
+  type: string
+}
+
+interface DocMeta {
+  id: string
+  title: string
+  date?: string
+  timestamp?: number
+  place?: string
+  city?: string
+  state?: string
+  country?: string
+  type?: string
+  slug?: string
+  draft?: string
+}
+
+interface DocumentDoc extends DocMeta {
+  code: string
+  locale: string
+  files?: {
+    youtube?: string
+    video?: string
+    audio?: string
+    booklet?: string
+    simple?: string
+  }
+  body?: string
+  [key: string]: unknown
+}
+
+interface TypesenseHighlight {
+  field?: string
+  snippet?: string
+  value?: string
+  matched_tokens?: string[]
+}
+
+interface TypesenseParagraphHit {
+  document: ParagraphDoc
+  highlights?: TypesenseHighlight[]
+  highlight?: Record<string, { snippet?: string, value?: string }>
+  text_match?: number
+}
+
+interface TypesenseGroupedHit {
+  groupKey: string[]
+  hits: TypesenseParagraphHit[]
+}
+
+interface TypesenseSearchResponse {
+  found: number
+  groupedHits?: TypesenseGroupedHit[]
+}
+
+interface SearchGroup {
+  docId: string
+  firstHit: TypesenseParagraphHit
+  allHits: TypesenseParagraphHit[]
+}
+
+interface BrowseItem {
+  docId: string
+  meta: DocMeta
+}
+
+interface DisplayGroup {
+  docId: string
+  meta: DocMeta | undefined
+  firstHit: TypesenseParagraphHit | null
+}
+
+// ---- Colors ----------------------------------------------------------------
+
+const colors = computed(() => {
+  if (props.accentColor === 'green') {
+    return {
+      selectedItem: 'border-carpagreen bg-carpagreen/10',
+      hoverItem: 'border-gray-200 hover:border-carpagreen hover:bg-carpagreen/5',
+      icon: 'text-carpagreen',
+    }
+  }
+  return {
+    selectedItem: 'border-carpablue bg-carpablue/10',
+    hoverItem: 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5',
+    icon: 'text-carpablue',
+  }
+})
+
+// ---- State ----------------------------------------------------------------
+
+const groupedHits = ref<SearchGroup[]>([])
+const total = ref(0)
+const currentPage = ref(1)
+
+const hasMore = computed(() =>
+  settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
+)
+
+const visibleGroupCount = ref(10)
+
+const visibleGroups = computed(() =>
+  settings.paginationType === 'infinite_scroll'
+    ? groupedHits.value.slice(0, visibleGroupCount.value)
+    : groupedHits.value
+)
+
+const hasMoreVisible = computed(() =>
+  settings.paginationType === 'infinite_scroll' &&
+  visibleGroupCount.value < groupedHits.value.length
+)
+
+const browseItems = ref<BrowseItem[]>([])
+const browseTotal = ref(0)
+const browsePage = ref(1)
+
+const hasMoreBrowse = computed(() =>
+  settings.paginationType === 'infinite_scroll'
+    ? browseItems.value.length < browseTotal.value
+    : false
+)
+
+const displayGroups = computed((): DisplayGroup[] => {
+  if (!debouncedQuery.value.trim()) {
+    return browseItems.value.map(item => ({
+      docId: item.docId,
+      meta: item.meta,
+      firstHit: null
+    }))
+  }
+  return visibleGroups.value.map(g => ({
+    docId: g.docId,
+    meta: docCache.value[g.docId],
+    firstHit: g.firstHit
+  }))
+})
+
+const activePage = ref(p0)
+
+const displayTotal = computed(() =>
+  debouncedQuery.value.trim() ? total.value : browseTotal.value
+)
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
+)
+
+const docCache = ref<Record<string, DocMeta>>({})
+
+const { documentsApi } = useTypesenseApi()
+
+// ---- Batch fetch de metadatos ---------------------------------------------
+
+async function fetchDocumentMeta(docIds: string[]) {
+  const unique = docIds.filter(id => id && !(id in docCache.value))
+  if (!unique.length) return
+  try {
+    const res = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: props.mainCollection,
+          q: '*',
+          queryBy: 'title',
+          filterBy: `id:=[${unique.join(',')}]`,
+          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug,draft',
+          perPage: unique.length,
+          page: 1
+        }]
+      }
+    })
+    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
+    for (const hit of docHits) {
+      if (hit.document.id) docCache.value[hit.document.id] = hit.document
+    }
+  } catch (err) {
+    console.error('Error fetching document metadata', err)
+  }
+}
+
+// ---- Búsqueda de párrafos (con query) -------------------------------------
+
+let searchSeq = 0
+let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+async function runSearch(q: string, page = 1, append = false) {
+  const seq = ++searchSeq
+  if (append) loadingMore.value = true
+  else loading.value = true
+  errorMsg.value = null
+
+  if (timeoutId) clearTimeout(timeoutId)
+  timeoutId = setTimeout(() => {
+    if (seq === searchSeq) {
+      loading.value = false
+      loadingMore.value = false
+      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
+    }
+  }, REQUEST_TIMEOUT_MS)
+
+  const isInfinite = settings.paginationType === 'infinite_scroll'
+  const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
+
+  try {
+    const multi = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: props.paragraphsCollection,
+          q: q || '*',
+          queryBy: QUERY_BY,
+          filterBy: filterBy.value,
+          perPage: settings.pageSize,
+          page: typePage,
+          highlightFullFields: QUERY_BY,
+          highlightFields: QUERY_BY,
+          highlightStartTag: '<mark class="search-match">',
+          highlightEndTag: '</mark>',
+          highlightAffixNumTokens: 30,
+          groupBy: props.groupByField
+        }]
+      }
+    })
+    if (seq !== searchSeq) return
+
+    const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
+    const rawGroups = res?.groupedHits ?? []
+    const newGroups: SearchGroup[] = rawGroups.map(g => ({
+      docId: g.groupKey[0]!,
+      firstHit: g.hits[0]!,
+      allHits: g.hits
+    }))
+
+    if (!append) docCache.value = {}
+    await fetchDocumentMeta(newGroups.map(g => g.docId).filter(Boolean))
+
+    if (seq !== searchSeq) return
+
+    groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
+    total.value = res?.found ?? groupedHits.value.length
+    currentPage.value = typePage
+    if (!append) activePage.value = page
+  } catch (err: unknown) {
+    if (seq !== searchSeq) return
+    console.error('Typesense error', err)
+    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
+    if (!append) { groupedHits.value = []; total.value = 0 }
+  } finally {
+    if (seq === searchSeq) {
+      if (timeoutId) clearTimeout(timeoutId)
+      loading.value = false
+      loadingMore.value = false
+    }
+  }
+}
+
+// ---- Exploración por fecha (sin query) ------------------------------------
+
+async function runBrowse(page = 1, append = false) {
+  const seq = ++searchSeq
+  if (append) loadingMore.value = true
+  else loading.value = true
+  errorMsg.value = null
+
+  if (timeoutId) clearTimeout(timeoutId)
+  timeoutId = setTimeout(() => {
+    if (seq === searchSeq) {
+      loading.value = false
+      loadingMore.value = false
+      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
+    }
+  }, REQUEST_TIMEOUT_MS)
+
+  const isInfinite = settings.paginationType === 'infinite_scroll'
+  const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
+
+  try {
+    const multi = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: props.mainCollection,
+          q: '*',
+          queryBy: 'title',
+          filterBy: filterBy.value,
+          sortBy: 'timestamp:desc',
+          perPage: settings.pageSize,
+          page: typePage,
+          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug,draft'
+        }]
+      }
+    })
+
+    if (seq !== searchSeq) return
+    const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
+    const newItems = (result?.hits ?? []).map(h => ({ docId: h.document.id!, meta: h.document }))
+
+    browseItems.value = append ? browseItems.value.concat(newItems) : newItems
+    browseTotal.value = result?.found ?? browseItems.value.length
+    browsePage.value = typePage
+    if (!append) activePage.value = page
+  } catch (err: unknown) {
+    if (seq !== searchSeq) return
+    console.error('Typesense error', err)
+    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
+    if (!append) { browseItems.value = []; browseTotal.value = 0 }
+  } finally {
+    if (seq === searchSeq) {
+      if (timeoutId) clearTimeout(timeoutId)
+      loading.value = false
+      loadingMore.value = false
+    }
+  }
+}
+
+function loadMore() {
+  if (settings.paginationType !== 'infinite_scroll') return
+  if (loadingMore.value || loading.value || !hasMore.value) return
+  runSearch(query.value, currentPage.value, true)
+}
+
+function goToPage(p: number) {
+  activePage.value = p
+  if (!debouncedQuery.value.trim()) {
+    browseItems.value = []
+    runBrowse(p, false)
+  } else {
+    groupedHits.value = []
+    runSearch(query.value, p, false)
+  }
+}
+
+const listContainer = ref<HTMLElement | null>(null)
+
+function onListScroll() {
+  if (settings.paginationType !== 'infinite_scroll') return
+  const el = listContainer.value
+  if (!el) return
+  if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
+    if (!debouncedQuery.value.trim()) {
+      if (hasMoreBrowse.value && !loadingMore.value && !loading.value) runBrowse(browsePage.value, true)
+    } else {
+      if (hasMoreVisible.value) visibleGroupCount.value += 10
+      else if (hasMore.value && !loadingMore.value && !loading.value) loadMore()
+    }
+  }
+}
+
+function retry() {
+  if (!query.value.trim()) runBrowse(activePage.value, false)
+  else runSearch(query.value, activePage.value, false)
+}
+
+onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
+
+watch(debouncedQuery, (q) => {
+  activePage.value = 1
+  if (!q.trim()) {
+    groupedHits.value = []; total.value = 0; currentPage.value = 1; visibleGroupCount.value = 10
+    browseItems.value = []; browseTotal.value = 0; browsePage.value = 1
+    runBrowse(1, false)
+  } else {
+    browseItems.value = []; browseTotal.value = 0; browsePage.value = 1
+    groupedHits.value = []; total.value = 0; currentPage.value = 1; visibleGroupCount.value = 10
+    runSearch(q, 1, false)
+  }
+})
+
+// ---- Selección y carga del detalle ----------------------------------------
+
+const selectedDocId = ref<string | null>(null)
+const selectedDocument = ref<DocumentDoc | null>(null)
+const documentLoading = ref(false)
+const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
+const paragraphsLoading = ref(false)
+const selectedHit = ref<TypesenseParagraphHit | null>(null)
+const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
+
+async function fetchDocumentWithParagraphs(docId: string) {
+  documentLoading.value = true
+  paragraphsLoading.value = true
+  selectedDocument.value = null
+  selectedParagraphs.value = []
+  try {
+    console.log(`[fetchDocumentWithParagraphs] Fetching document with paragraphs. collection=${props.mainCollection} docId=${docId}`)
+    const res = await documentsApi.multiSearch({
+      multiSearchParameters: {},
+      multiSearchSearchesParameter: {
+        searches: [{
+          collection: props.mainCollection,
+          q: '*',
+          queryBy: 'title',
+          filterBy: `id:=${docId} && $${props.paragraphsCollection}(id: *)`,
+          includeFields: `*, $${props.paragraphsCollection}(*)`
+        }]
+      }
+    })
+    console.log(`[fetchDocumentWithParagraphs] collection=${props.mainCollection} docId=${docId}`, JSON.stringify(res?.results?.[0], null, 2))
+    const hit = (res?.results?.[0] as { hits?: Array<{ document: Record<string, unknown> }> })?.hits?.[0]
+    if (hit) {
+      const docRaw = { ...hit.document }
+      const rawParagraphs = (docRaw[props.paragraphsCollection] as ParagraphDoc[] | undefined) ?? []
+      delete docRaw[props.paragraphsCollection]
+      selectedDocument.value = docRaw as unknown as DocumentDoc
+      selectedParagraphs.value = [...rawParagraphs]
+        .sort((a, b) => (a.number ?? 0) - (b.number ?? 0))
+        .map(p => ({ document: p }))
+    }
+  } catch (err) {
+    console.error('Error fetching document with paragraphs', err)
+    selectedDocument.value = null
+    selectedParagraphs.value = []
+  } finally {
+    documentLoading.value = false
+    paragraphsLoading.value = false
+  }
+}
+
+async function selectGroup(group: DisplayGroup) {
+  selectedDocId.value = group.docId
+  selectedHit.value = group.firstHit
+  selectedMatchingHits.value = groupedHits.value.find(g => g.docId === group.docId)?.allHits ?? []
+  fetchDocumentWithParagraphs(group.docId)
+}
+
+const isPanelOpen = computed({
+  get() { return !!selectedDocId.value },
+  set(v: boolean) {
+    if (!v) {
+      selectedDocId.value = null
+      selectedDocument.value = null
+      selectedParagraphs.value = []
+      selectedHit.value = null
+      selectedMatchingHits.value = []
+    }
+  }
+})
+
+watch(groupedHits, () => {
+  if (!selectedDocId.value || !debouncedQuery.value.trim()) return
+  if (!groupedHits.value.find(g => g.docId === selectedDocId.value)) {
+    selectedDocId.value = null
+    selectedDocument.value = null
+    selectedParagraphs.value = []
+    selectedHit.value = null
+    selectedMatchingHits.value = []
+  }
+})
+
+const selectedId = computed(() => selectedDocId.value)
+
+useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
+
+onMounted(async () => {
+  if (q0.trim()) await runSearch(q0, p0, false)
+  else await runBrowse(p0, false)
+
+  restoreScrollPosition(listContainer.value, s0)
+
+  if (sid0) {
+    const group = displayGroups.value.find(g => g.docId === sid0)
+    if (group) selectGroup(group)
+    else {
+      selectedDocId.value = sid0
+      fetchDocumentWithParagraphs(sid0)
+    }
+  }
+})
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const isMobile = breakpoints.smaller('lg')
+
+useDetailHistory(isPanelOpen, isMobile)
+
+// ---- Helpers de presentación ----------------------------------------------
+
+function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
+  const fromArr = hit.highlights?.find(h => h.field === field)
+  if (fromArr?.snippet) return fromArr.snippet
+  if (fromArr?.value) return fromArr.value
+  const fromObj = hit.highlight?.[field]
+  if (fromObj?.snippet) return fromObj.snippet
+  if (fromObj?.value) return fromObj.value
+  return null
+}
+
+function metaDate(meta: DocMeta | undefined): string {
+  if (!meta) return ''
+  const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
+  if (!ts) return meta.date || ''
+  return formatDate(ts)
+}
+
+function metaLocation(meta: DocMeta | undefined): string {
+  if (!meta) return ''
+  return formatLocation({
+    id: meta.id, date: meta.timestamp ?? 0, slug: meta.slug ?? '',
+    type: meta.type ?? '', place: meta.place ?? '', city: meta.city ?? '',
+    state: meta.state ?? '', country: meta.country ?? '', thumbnail: ''
+  })
+}
+</script>
+
+<template>
+  <UDashboardPanel
+    :id="panelId"
+    :default-size="32"
+    :min-size="24"
+    :max-size="45"
+    resizable
+  >
+    <UDashboardNavbar :title="t(navTitleKey)">
+      <template #leading>
+        <UDashboardSidebarCollapse />
+      </template>
+      <template #trailing>
+        <UBadge :label="displayTotal" variant="subtle" />
+      </template>
+    </UDashboardNavbar>
+
+    <div class="px-4 sm:px-6 py-3 border-b border-default">
+      <UInput
+        v-model="query"
+        icon="i-lucide-search"
+        :placeholder="t('search.placeholder')"
+        :loading="loading"
+        size="md"
+        class="w-full"
+      />
+    </div>
+
+    <UAlert
+      v-if="errorMsg"
+      :title="errorMsg"
+      color="error"
+      variant="subtle"
+      icon="i-lucide-triangle-alert"
+      class="mx-4 my-2"
+      :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
+    />
+
+    <div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
+      <div
+        v-if="loading && !displayGroups.length"
+        class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
+      >
+        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
+        Buscando...
+      </div>
+
+      <div
+        v-else-if="!displayGroups.length"
+        class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
+      >
+        <UIcon name="i-lucide-inbox" class="size-10" />
+        <p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
+      </div>
+
+      <div
+        v-for="group in displayGroups"
+        :key="group.docId"
+        class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
+        :class="selectedDocId === group.docId ? colors.selectedItem : colors.hoverItem"
+        @click="selectGroup(group)"
+      >
+        <div class="mb-1">
+          <p class="text-sm font-semibold line-clamp-2 text-highlighted">
+            <UTooltip
+              v-if="showDraft && group.meta?.draft"
+              :text="$t('search.draft')"
+              color="error"
+            >
+              <UIcon name="ph-file-dashed" class="bg-carpared" />
+            </UTooltip>
+            {{ group.meta?.title || group.docId }}
+          </p>
+        </div>
+
+        <p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted justify-between">
+          <span v-if="metaDate(group.meta)" class="flex items-center gap-1">
+            <UIcon name="ph:calendar" :class="['size-4', colors.icon]" />
+            {{ metaDate(group.meta) }}
+          </span>
+          <span v-if="metaLocation(group.meta)" class="flex items-center gap-1 truncate">
+            <UIcon name="ph:map-pin" :class="['size-4 shrink-0', colors.icon]" />
+            <span class="truncate">{{ metaLocation(group.meta) }}</span>
+          </span>
+        </p>
+
+        <div
+          v-if="group.firstHit"
+          class="snippet-html text-sm text-dimmed"
+          v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
+        />
+      </div>
+
+      <div
+        v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
+        class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
+      >
+        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
+        Cargando más...
+      </div>
+
+      <div
+        v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
+        class="py-3 text-center text-xs text-dimmed"
+      >
+        No hay más resultados
+      </div>
+    </div>
+
+    <div
+      v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
+      class="px-4 py-3 border-t border-default flex justify-center shrink-0"
+    >
+      <UPagination
+        :page="activePage"
+        :total="displayTotal"
+        :items-per-page="settings.pageSize"
+        size="sm"
+        @update:page="goToPage"
+      />
+    </div>
+  </UDashboardPanel>
+
+  <!-- Panel de detalle (escritorio) -->
+  <EstudiosTypensenseDetail
+    v-if="selectedDocId && !isMobile"
+    :document="selectedDocument"
+    :document-loading="documentLoading"
+    :paragraphs="selectedParagraphs"
+    :paragraphs-loading="paragraphsLoading"
+    :collection="favoritesCollection"
+    :query="debouncedQuery"
+    :selected-hit="selectedHit"
+    :selected-matching-hits="selectedMatchingHits"
+    :accent-color="accentColor"
+    @close="isPanelOpen = false"
+  />
+  <div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
+    <div class="flex flex-col items-center gap-2 text-dimmed">
+      <UIcon name="i-lucide-search" class="size-16" />
+      <p class="text-sm">{{ emptyDetailText }}</p>
+    </div>
+  </div>
+
+  <!-- Panel de detalle (móvil) -->
+  <ClientOnly>
+    <USlideover v-if="isMobile" v-model:open="isPanelOpen">
+      <template #content>
+        <EstudiosTypensenseDetail
+          v-if="selectedDocId"
+          :document="selectedDocument"
+          :document-loading="documentLoading"
+          :paragraphs="selectedParagraphs"
+          :paragraphs-loading="paragraphsLoading"
+          :collection="favoritesCollection"
+          :query="debouncedQuery"
+          :selected-hit="selectedHit"
+          :selected-matching-hits="selectedMatchingHits"
+          :accent-color="accentColor"
+          @close="isPanelOpen = false"
+        />
+      </template>
+    </USlideover>
+  </ClientOnly>
+</template>
+
+<style scoped>
+.snippet-html :deep(p) {
+  display: inline;
+  margin: 0;
+}
+.snippet-html :deep(br) {
+  display: none;
+}
+</style>
diff --git a/app/pages/conferencias.vue b/app/pages/conferencias.vue
index 20998b6..092454e 100644
--- a/app/pages/conferencias.vue
+++ b/app/pages/conferencias.vue
@@ -1,787 +1,12 @@
-<script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import { breakpointsTailwind, useDebounce } from '@vueuse/core'
-import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
-import { useSettingsStore } from '~/stores/settings'
-
-const PARAGRAPHS_COLLECTION = 'conferences_paragraphs'
-const CONFERENCES_COLLECTION = 'conferences'
-const QUERY_BY = 'text'
-const FAVORITES_COLLECTION = 'conferences-ts'
-
-const { $i18n } = useNuxtApp()
-const t = $i18n.t
-const { locale } = useI18n()
-
-const filterBy = computed(() => `locale:=${locale.value} && type:=conferences`)
-const REQUEST_TIMEOUT_MS = 15000
-
-const settings = useSettingsStore()
-
-// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
-const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
-
-const query = ref(q0)
-const debouncedQuery = useDebounce(query, 150)
-const loading = ref(false)
-const loadingMore = ref(false)
-const errorMsg = ref<string | null>(null)
-
-// ---- Types ----------------------------------------------------------------
-
-interface ParagraphDoc {
-  id?: string
-  document_id: string
-  text: string
-  number: number
-  locale: string
-  type: string
-}
-
-interface DocMeta {
-  id: string
-  title: string
-  date?: string
-  timestamp?: number
-  place?: string
-  city?: string
-  state?: string
-  country?: string
-  type?: string
-  slug?: string
-}
-
-export interface DocumentDoc extends DocMeta {
-  code: string
-  locale: string
-  files?: {
-    youtube?: string
-    video?: string
-    audio?: string
-    booklet?: string
-    simple?: string
-  }
-  body?: string
-  [key: string]: unknown
-}
-
-interface TypesenseHighlight {
-  field?: string
-  snippet?: string
-  value?: string
-  matched_tokens?: string[]
-}
-
-export interface TypesenseParagraphHit {
-  document: ParagraphDoc
-  highlights?: TypesenseHighlight[]
-  highlight?: Record<string, { snippet?: string, value?: string }>
-  text_match?: number
-}
-
-interface TypesenseGroupedHit {
-  group_key: string[]
-  hits: TypesenseParagraphHit[]
-}
-
-interface TypesenseSearchResponse {
-  found: number
-  grouped_hits?: TypesenseGroupedHit[]
-}
-
-interface SearchGroup {
-  docId: string
-  firstHit: TypesenseParagraphHit
-  allHits: TypesenseParagraphHit[]
-}
-
-interface BrowseItem {
-  docId: string
-  meta: DocMeta
-}
-
-interface DisplayGroup {
-  docId: string
-  meta: DocMeta | undefined
-  firstHit: TypesenseParagraphHit | null
-}
-
-// ---- State ----------------------------------------------------------------
-
-// Modo búsqueda (con query): grupos devueltos por Typesense
-const groupedHits = ref<SearchGroup[]>([])
-const total = ref(0)
-const currentPage = ref(1)
-
-const hasMore = computed(() =>
-  settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
-)
-
-// Progressive display (sólo en scroll infinito)
-const visibleGroupCount = ref(10)
-
-const visibleGroups = computed(() =>
-  settings.paginationType === 'infinite_scroll'
-    ? groupedHits.value.slice(0, visibleGroupCount.value)
-    : groupedHits.value
-)
-
-const hasMoreVisible = computed(() =>
-  settings.paginationType === 'infinite_scroll' &&
-  visibleGroupCount.value < groupedHits.value.length
-)
-
-// Modo exploración (sin query): documentos ordenados por fecha
-const browseItems = ref<BrowseItem[]>([])
-const browseTotal = ref(0)
-const browsePage = ref(1)
-
-const hasMoreBrowse = computed(() =>
-  settings.paginationType === 'infinite_scroll'
-    ? browseItems.value.length < browseTotal.value
-    : false
-)
-
-// Grupo unificado para el template
-const displayGroups = computed((): DisplayGroup[] => {
-  if (!debouncedQuery.value.trim()) {
-    return browseItems.value.map(item => ({
-      docId: item.docId,
-      meta: item.meta,
-      firstHit: null
-    }))
-  }
-  return visibleGroups.value.map(g => ({
-    docId: g.docId,
-    meta: docCache.value[g.docId],
-    firstHit: g.firstHit
-  }))
-})
-
-// Paginación activa (compartida entre browse y search)
-const activePage = ref(p0)
-
-const displayTotal = computed(() =>
-  debouncedQuery.value.trim() ? total.value : browseTotal.value
-)
-
-const totalPages = computed(() =>
-  Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
-)
-
-// Cache de metadatos por document_id (sólo modo búsqueda)
-const docCache = ref<Record<string, DocMeta>>({})
-
-const { documentsApi } = useTypesenseApi()
-
-// ---- Batch fetch de metadatos de documentos -------------------------------
-
-async function fetchDocumentMeta(docIds: string[]) {
-  const unique = docIds.filter(id => id && !(id in docCache.value))
-  console.log('Fetching metadata for documents', unique)
-  try {
-    const res = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: CONFERENCES_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: `id:=[${unique.join(',')}]`,
-          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug',
-          perPage: unique.length,
-          page: 1
-        }]
-      }
-    })
-    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
-    for (const hit of docHits) {
-      if (hit.document.id) {
-        docCache.value[hit.document.id] = hit.document
-      }
-    }
-  } catch (err) {
-    console.error('Error fetching document metadata', err)
-  }
-}
-
-// ---- Búsqueda de párrafos (con query) -------------------------------------
-
-let searchSeq = 0
-let timeoutId: ReturnType<typeof setTimeout> | null = null
-
-async function runSearch(q: string, page = 1, append = false) {
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  if (timeoutId) clearTimeout(timeoutId)
-  timeoutId = setTimeout(() => {
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
-    }
-  }, REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
-
-  try {
-    const multi = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: PARAGRAPHS_COLLECTION,
-          q: q || '*',
-          queryBy: QUERY_BY,
-          filterBy: filterBy.value,
-          perPage: settings.pageSize,
-          page: typePage,
-          highlightFullFields: QUERY_BY,
-          highlightFields: QUERY_BY,
-          highlightStartTag: '<mark class="search-match">',
-          highlightEndTag: '</mark>',
-          highlightAffixNumTokens: 30,
-          groupBy: 'document_id'
-        }]
-      }
-    })
-
-    if (seq !== searchSeq) return
-
-    const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
-    const rawGroups = res?.groupedHits ?? []
-
-    console.log('Raw groups', rawGroups)
-    const newGroups: SearchGroup[] = rawGroups.map(g => ({
-      docId: g.groupKey[0]!,
-      firstHit: g.hits[0]!,
-      allHits: g.hits
-    }))
-
-    if (!append) docCache.value = {}
-    const newDocIds = newGroups.map(g => g.docId).filter(Boolean)
-    await fetchDocumentMeta(newDocIds)
-
-    if (seq !== searchSeq) return
-
-    groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
-    total.value = res?.found ?? groupedHits.value.length
-    currentPage.value = typePage
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    if (seq !== searchSeq) return
-    console.error('Typesense error', err)
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      groupedHits.value = []
-      total.value = 0
-    }
-  } finally {
-    if (seq === searchSeq) {
-      if (timeoutId) clearTimeout(timeoutId)
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-// ---- Exploración por fecha (sin query) ------------------------------------
-
-async function runBrowse(page = 1, append = false) {
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  if (timeoutId) clearTimeout(timeoutId)
-  timeoutId = setTimeout(() => {
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
-    }
-  }, REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
-
-  try {
-    const multi = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: CONFERENCES_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: filterBy.value,
-          sortBy: 'timestamp:desc',
-          perPage: settings.pageSize,
-          page: typePage,
-          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug'
-        }]
-      }
-    })
-
-    if (seq !== searchSeq) return
-
-    const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
-    const newItems = (result?.hits ?? []).map(h => ({
-      docId: h.document.id!,
-      meta: h.document
-    }))
-
-    browseItems.value = append ? browseItems.value.concat(newItems) : newItems
-    browseTotal.value = result?.found ?? browseItems.value.length
-    browsePage.value = typePage
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    if (seq !== searchSeq) return
-    console.error('Typesense error', err)
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      browseItems.value = []
-      browseTotal.value = 0
-    }
-  } finally {
-    if (seq === searchSeq) {
-      if (timeoutId) clearTimeout(timeoutId)
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-function loadMore() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  if (loadingMore.value || loading.value || !hasMore.value) return
-  runSearch(query.value, currentPage.value, true)
-}
-
-function goToPage(p: number) {
-  activePage.value = p
-  if (!debouncedQuery.value.trim()) {
-    browseItems.value = []
-    runBrowse(p, false)
-  } else {
-    groupedHits.value = []
-    runSearch(query.value, p, false)
-  }
-}
-
-const listContainer = ref<HTMLElement | null>(null)
-
-function onListScroll() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  const el = listContainer.value
-  if (!el) return
-  if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
-    if (!debouncedQuery.value.trim()) {
-      if (hasMoreBrowse.value && !loadingMore.value && !loading.value) {
-        runBrowse(browsePage.value, true)
-      }
-    } else {
-      if (hasMoreVisible.value) {
-        visibleGroupCount.value += 10
-      } else if (hasMore.value && !loadingMore.value && !loading.value) {
-        loadMore()
-      }
-    }
-  }
-}
-
-function retry() {
-  if (!query.value.trim()) {
-    runBrowse(activePage.value, false)
-  } else {
-    runSearch(query.value, activePage.value, false)
-  }
-}
-
-onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
-
-watch(debouncedQuery, (q) => {
-  activePage.value = 1
-  if (!q.trim()) {
-    groupedHits.value = []
-    total.value = 0
-    currentPage.value = 1
-    visibleGroupCount.value = 10
-    browseItems.value = []
-    browseTotal.value = 0
-    browsePage.value = 1
-    runBrowse(1, false)
-  } else {
-    browseItems.value = []
-    browseTotal.value = 0
-    browsePage.value = 1
-    groupedHits.value = []
-    total.value = 0
-    currentPage.value = 1
-    visibleGroupCount.value = 10
-    runSearch(q, 1, false)
-  }
-})
-
-// ---- Selección y carga del detalle ----------------------------------------
-
-const selectedDocId = ref<string | null>(null)
-const selectedDocument = ref<DocumentDoc | null>(null)
-const documentLoading = ref(false)
-const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
-const paragraphsLoading = ref(false)
-
-const selectedHit = ref<TypesenseParagraphHit | null>(null)
-const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
-
-async function fetchFullDocument(docId: string) {
-  documentLoading.value = true
-  selectedDocument.value = null
-  try {
-    const res = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: CONFERENCES_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: `id:=${docId}`,
-          perPage: 1,
-          page: 1
-        }]
-      }
-    })
-    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocumentDoc }> })?.hits ?? []
-    selectedDocument.value = docHits[0]?.document ?? null
-  } catch (err) {
-    console.error('Error fetching document', err)
-    selectedDocument.value = null
-  } finally {
-    documentLoading.value = false
-  }
-}
-
-async function fetchDocumentParagraphs(docId: string) {
-  paragraphsLoading.value = true
-  selectedParagraphs.value = []
-  const PER_PAGE = 250
-  let page = 1
-  let totalParagraphs = 0
-  const all: Array<{ document: ParagraphDoc }> = []
-  try {
-    do {
-      const res = await documentsApi.multiSearch({
-        multiSearchParameters: {},
-        multiSearchSearchesParameter: {
-          searches: [{
-            collection: PARAGRAPHS_COLLECTION,
-            q: '*',
-            queryBy: '',
-            filterBy: `document_id:=${docId} && ${filterBy.value}`,
-            perPage: PER_PAGE,
-            page,
-            sortBy: 'number:asc'
-          }]
-        }
-      })
-      const result = (res?.results?.[0] as { found?: number, hits?: Array<{ document: ParagraphDoc }> } | undefined)
-      if (!result) break
-      if (page === 1) totalParagraphs = result.found ?? 0
-      all.push(...(result.hits ?? []))
-      page++
-    } while (all.length < totalParagraphs)
-    selectedParagraphs.value = all.map(h => ({ document: h.document }))
-  } catch (err) {
-    console.error('Error fetching paragraphs', err)
-    selectedParagraphs.value = []
-  } finally {
-    paragraphsLoading.value = false
-  }
-}
-
-async function selectGroup(group: DisplayGroup) {
-  selectedDocId.value = group.docId
-  selectedHit.value = group.firstHit
-  const searchGroup = groupedHits.value.find(g => g.docId === group.docId)
-  selectedMatchingHits.value = searchGroup?.allHits ?? []
-  fetchFullDocument(group.docId)
-  fetchDocumentParagraphs(group.docId)
-}
-
-const isPanelOpen = computed({
-  get() { return !!selectedDocId.value },
-  set(v: boolean) {
-    if (!v) {
-      selectedDocId.value = null
-      selectedDocument.value = null
-      selectedParagraphs.value = []
-      selectedHit.value = null
-      selectedMatchingHits.value = []
-    }
-  }
-})
-
-watch(groupedHits, () => {
-  if (!selectedDocId.value || !debouncedQuery.value.trim()) return
-  const still = groupedHits.value.find(g => g.docId === selectedDocId.value)
-  if (!still) {
-    selectedDocId.value = null
-    selectedDocument.value = null
-    selectedParagraphs.value = []
-    selectedHit.value = null
-    selectedMatchingHits.value = []
-  }
-})
-
-// ID del documento seleccionado para sincronizar con la URL
-const selectedId = computed(() => selectedDocId.value)
-
-// ── Sincronización con URL ─────────────────────────────────────────────────
-useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
-
-// ── Ciclo de vida ──────────────────────────────────────────────────────────
-onMounted(async () => {
-  // Carga inicial: browse si no hay query, search si hay query
-  if (q0.trim()) {
-    await runSearch(q0, p0, false)
-  } else {
-    await runBrowse(p0, false)
-  }
-
-  // Restaurar scroll
-  restoreScrollPosition(listContainer.value, s0)
-
-  // Restaurar documento seleccionado
-  if (sid0) {
-    const group = displayGroups.value.find(g => g.docId === sid0)
-    if (group) {
-      selectGroup(group)
-    } else {
-      selectedDocId.value = sid0
-      fetchFullDocument(sid0)
-      fetchDocumentParagraphs(sid0)
-    }
-  }
-})
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isMobile = breakpoints.smaller('lg')
-
-useDetailHistory(isPanelOpen, isMobile)
-
-// ---- Helpers de presentación ----------------------------------------------
-
-function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
-  const fromArr = hit.highlights?.find(h => h.field === field)
-  if (fromArr?.snippet) return fromArr.snippet
-  if (fromArr?.value) return fromArr.value
-  const fromObj = hit.highlight?.[field]
-  if (fromObj?.snippet) return fromObj.snippet
-  if (fromObj?.value) return fromObj.value
-  return null
-}
-
-function metaDate(meta: DocMeta | undefined): string {
-  if (!meta) return ''
-  const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
-  if (!ts) return meta.date || ''
-  return formatDate(ts)
-}
-
-function metaLocation(meta: DocMeta | undefined): string {
-  if (!meta) return ''
-  return formatLocation({
-    id: meta.id,
-    date: meta.timestamp ?? 0,
-    slug: meta.slug ?? '',
-    type: meta.type ?? '',
-    place: meta.place ?? '',
-    city: meta.city ?? '',
-    state: meta.state ?? '',
-    country: meta.country ?? '',
-    thumbnail: ''
-  })
-}
-</script>
-
 <template>
-  <UDashboardPanel
-    id="conferencias-ts-list"
-    :default-size="32"
-    :min-size="24"
-    :max-size="45"
-    resizable
-  >
-    <UDashboardNavbar :title="t('nav.conferences_ts')">
-      <template #leading>
-        <UDashboardSidebarCollapse />
-      </template>
-      <template #trailing>
-        <UBadge :label="displayTotal" variant="subtle" />
-      </template>
-    </UDashboardNavbar>
-
-    <div class="px-4 sm:px-6 py-3 border-b border-default">
-      <UInput
-        v-model="query"
-        icon="i-lucide-search"
-        :placeholder="t('search.placeholder')"
-        :loading="loading"
-        size="md"
-        class="w-full"
-      />
-    </div>
-
-    <UAlert
-      v-if="errorMsg"
-      :title="errorMsg"
-      color="error"
-      variant="subtle"
-      icon="i-lucide-triangle-alert"
-      class="mx-4 my-2"
-      :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
-    />
-
-    <div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
-      <div
-        v-if="loading && !displayGroups.length"
-        class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
-        Buscando...
-      </div>
-
-      <div
-        v-else-if="!displayGroups.length"
-        class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
-      >
-        <UIcon name="i-lucide-inbox" class="size-10" />
-        <p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
-      </div>
-
-      <div
-        v-for="group in displayGroups"
-        :key="group.docId"
-        class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
-        :class="[
-          selectedDocId === group.docId
-            ? 'border-carpablue bg-carpablue/10'
-            : 'border-gray-200 hover:border-carpablue hover:bg-carpablue/5'
-        ]"
-        @click="selectGroup(group)"
-      >
-        <div class="mb-1">
-          <p class="text-sm font-semibold line-clamp-2 text-highlighted">
-            {{ group.meta?.title || group.docId }}
-          </p>
-        </div>
-
-        <p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted">
-          <span
-            v-if="metaDate(group.meta)"
-            class="flex items-center gap-1"
-          >
-            <UIcon name="ph:calendar" class="size-4 text-carpablue" />
-            {{ metaDate(group.meta) }}
-          </span>
-          <span
-            v-if="metaLocation(group.meta)"
-            class="flex items-center gap-1 truncate"
-          >
-            <UIcon name="ph:map-pin" class="size-4 text-carpablue shrink-0" />
-            <span class="truncate">{{ metaLocation(group.meta) }}</span>
-          </span>
-        </p>
-
-        <!-- Snippet con highlight: solo en modo búsqueda -->
-        <div
-          v-if="group.firstHit"
-          class="snippet-html text-sm text-dimmed"
-          v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
-        />
-      </div>
-
-      <!-- Infinite scroll: cargando más -->
-      <div
-        v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
-        class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
-        Cargando más...
-      </div>
-
-      <div
-        v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
-        class="py-3 text-center text-xs text-dimmed"
-      >
-        No hay más resultados
-      </div>
-    </div>
-
-    <!-- Paginación numerada -->
-    <div
-      v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
-      class="px-4 py-3 border-t border-default flex justify-center shrink-0"
-    >
-      <UPagination
-        :page="activePage"
-        :total="displayTotal"
-        :items-per-page="settings.pageSize"
-        size="sm"
-        @update:page="goToPage"
-      />
-    </div>
-  </UDashboardPanel>
-
-  <!-- Panel de detalle (escritorio) -->
-  <EstudiosTypensenseDetail
-    v-if="selectedDocId && !isMobile"
-    :document="selectedDocument"
-    :document-loading="documentLoading"
-    :paragraphs="selectedParagraphs"
-    :paragraphs-loading="paragraphsLoading"
-    :collection="FAVORITES_COLLECTION"
-    :query="debouncedQuery"
-    :selected-hit="selectedHit"
-    :selected-matching-hits="selectedMatchingHits"
-    @close="isPanelOpen = false"
+  <SearchPanel
+    paragraphs-collection="conferences_paragraphs"
+    main-collection="conferences"
+    group-by-field="conferences_id"
+    favorites-collection="conferences-ts"
+    panel-id="conferencias-ts-list"
+    nav-title-key="nav.conferences_ts"
+    accent-color="blue"
+    empty-detail-text="Selecciona una conferencia para ver el detalle"
   />
-  <div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
-    <div class="flex flex-col items-center gap-2 text-dimmed">
-      <UIcon name="i-lucide-search" class="size-16" />
-      <p class="text-sm">Selecciona una conferencia para ver el detalle</p>
-    </div>
-  </div>
-
-  <!-- Panel de detalle (móvil) -->
-  <ClientOnly>
-    <USlideover v-if="isMobile" v-model:open="isPanelOpen">
-      <template #content>
-        <EstudiosTypensenseDetail
-          v-if="selectedDocId"
-          :document="selectedDocument"
-          :document-loading="documentLoading"
-          :paragraphs="selectedParagraphs"
-          :paragraphs-loading="paragraphsLoading"
-          :collection="FAVORITES_COLLECTION"
-          :query="debouncedQuery"
-          :selected-hit="selectedHit"
-          :selected-matching-hits="selectedMatchingHits"
-          @close="isPanelOpen = false"
-        />
-      </template>
-    </USlideover>
-  </ClientOnly>
 </template>
-
-<style scoped>
-.snippet-html :deep(p) {
-  display: inline;
-  margin: 0;
-}
-.snippet-html :deep(br) {
-  display: none;
-}
-</style>
diff --git a/app/pages/estudios-biblicos.vue b/app/pages/estudios-biblicos.vue
index ff49fac..afcc9ac 100644
--- a/app/pages/estudios-biblicos.vue
+++ b/app/pages/estudios-biblicos.vue
@@ -1,807 +1,13 @@
-<script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue'
-import { breakpointsTailwind, useDebounce } from '@vueuse/core'
-import EstudiosTypensenseDetail from '~/components/estudiosTypensense/EstudiosTypensenseDetail.vue'
-import { useSettingsStore } from '~/stores/settings'
-
-const PARAGRAPHS_COLLECTION = 'activities_paragraphs'
-const ACTIVITIES_COLLECTION = 'activities'
-const QUERY_BY = 'text'
-const FAVORITES_COLLECTION = 'bible-studies-ts'
-
-const { $i18n } = useNuxtApp()
-const t = $i18n.t
-const { locale } = useI18n()
-
-const filterBy = computed(() => `locale:=${locale.value} && type:=activities`)
-const REQUEST_TIMEOUT_MS = 15000
-
-const settings = useSettingsStore()
-
-// ── Restaurar estado desde URL antes de crear los refs ─────────────────────
-const { query: q0, page: p0, scroll: s0, selectedId: sid0 } = useSearchUrlState()
-
-const query = ref(q0)
-const debouncedQuery = useDebounce(query, 150)
-const loading = ref(false)
-const loadingMore = ref(false)
-const errorMsg = ref<string | null>(null)
-
-// ---- Types ----------------------------------------------------------------
-
-interface ParagraphDoc {
-  id?: string
-  document_id: string
-  text: string
-  number: number
-  locale: string
-  type: string
-}
-
-interface DocMeta {
-  id: string
-  title: string
-  date?: string
-  timestamp?: number
-  place?: string
-  city?: string
-  state?: string
-  country?: string
-  type?: string
-  slug?: string
-  draft?: string
-}
-
-export interface DocumentDoc extends DocMeta {
-  code: string
-  locale: string
-  files?: {
-    youtube?: string
-    video?: string
-    audio?: string
-    booklet?: string
-    simple?: string
-  }
-  body?: string
-  [key: string]: unknown
-}
-
-interface TypesenseHighlight {
-  field?: string
-  snippet?: string
-  value?: string
-  matched_tokens?: string[]
-}
-
-export interface TypesenseParagraphHit {
-  document: ParagraphDoc
-  highlights?: TypesenseHighlight[]
-  highlight?: Record<string, { snippet?: string, value?: string }>
-  text_match?: number
-}
-
-interface TypesenseGroupedHit {
-  groupKey: string[]
-  hits: TypesenseParagraphHit[]
-}
-
-interface TypesenseSearchResponse {
-  found: number
-  groupedHits?: TypesenseGroupedHit[]
-}
-
-interface SearchGroup {
-  docId: string
-  firstHit: TypesenseParagraphHit
-  allHits: TypesenseParagraphHit[]
-}
-
-interface BrowseItem {
-  docId: string
-  meta: DocMeta
-}
-
-interface DisplayGroup {
-  docId: string
-  meta: DocMeta | undefined
-  firstHit: TypesenseParagraphHit | null
-}
-
-// ---- State ----------------------------------------------------------------
-
-// Modo búsqueda (con query): grupos devueltos por Typesense
-const groupedHits = ref<SearchGroup[]>([])
-const total = ref(0)
-const currentPage = ref(1)
-
-const hasMore = computed(() =>
-  settings.paginationType === 'infinite_scroll' ? groupedHits.value.length < total.value : false
-)
-
-// Progressive display (sólo en scroll infinito)
-const visibleGroupCount = ref(10)
-
-const visibleGroups = computed(() =>
-  settings.paginationType === 'infinite_scroll'
-    ? groupedHits.value.slice(0, visibleGroupCount.value)
-    : groupedHits.value
-)
-
-const hasMoreVisible = computed(() =>
-  settings.paginationType === 'infinite_scroll' &&
-  visibleGroupCount.value < groupedHits.value.length
-)
-
-// Modo exploración (sin query): documentos ordenados por fecha
-const browseItems = ref<BrowseItem[]>([])
-const browseTotal = ref(0)
-const browsePage = ref(1)
-
-const hasMoreBrowse = computed(() =>
-  settings.paginationType === 'infinite_scroll'
-    ? browseItems.value.length < browseTotal.value
-    : false
-)
-
-// Grupo unificado para el template
-const displayGroups = computed((): DisplayGroup[] => {
-  if (!debouncedQuery.value.trim()) {
-    return browseItems.value.map(item => ({
-      docId: item.docId,
-      meta: item.meta,
-      firstHit: null
-    }))
-  }
-  return visibleGroups.value.map(g => ({
-    docId: g.docId,
-    meta: docCache.value[g.docId],
-    firstHit: g.firstHit
-  }))
-})
-
-// Paginación activa (compartida entre browse y search)
-const activePage = ref(p0)
-
-const displayTotal = computed(() =>
-  debouncedQuery.value.trim() ? total.value : browseTotal.value
-)
-
-const totalPages = computed(() =>
-  Math.max(1, Math.ceil(displayTotal.value / settings.pageSize))
-)
-
-// Cache de metadatos por document_id (sólo modo búsqueda)
-const docCache = ref<Record<string, DocMeta>>({})
-
-const { documentsApi } = useTypesenseApi()
-
-// ---- Batch fetch de metadatos de documentos -------------------------------
-
-async function fetchDocumentMeta(docIds: string[]) {
-  const unique = docIds.filter(id => id && !(id in docCache.value))
-  console.log('Fetching metadata for documents', unique)
-  try {
-    const res = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: ACTIVITIES_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: `id:=[${unique.join(',')}]`,
-          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug,draft',
-          perPage: unique.length,
-          page: 1
-        }]
-      }
-    })
-    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocMeta }> })?.hits ?? []
-    for (const hit of docHits) {
-      if (hit.document.id) {
-        docCache.value[hit.document.id] = hit.document
-      }
-    }
-  } catch (err) {
-    console.error('Error fetching document metadata', err)
-  }
-}
-
-// ---- Búsqueda de párrafos (con query) -------------------------------------
-
-let searchSeq = 0
-let timeoutId: ReturnType<typeof setTimeout> | null = null
-
-async function runSearch(q: string, page = 1, append = false) {
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  if (timeoutId) clearTimeout(timeoutId)
-  timeoutId = setTimeout(() => {
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
-    }
-  }, REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const typePage = isInfinite ? (append ? currentPage.value + 1 : 1) : page
-
-  try {
-    const multi = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: PARAGRAPHS_COLLECTION,
-          q: q || '*',
-          queryBy: QUERY_BY,
-          filterBy: filterBy.value,
-          perPage: settings.pageSize,
-          page: typePage,
-          highlightFullFields: QUERY_BY,
-          highlightFields: QUERY_BY,
-          highlightStartTag: '<mark class="search-match">',
-          highlightEndTag: '</mark>',
-          highlightAffixNumTokens: 30,
-          groupBy: 'document_id'
-        }]
-      }
-    })
-    console.log('Search response', multi)
-    if (seq !== searchSeq) return
-
-    const res = (multi?.results?.[0] ?? {}) as TypesenseSearchResponse
-    const rawGroups = res?.groupedHits ?? []
-
-    console.log('Raw groups', rawGroups)
-    const newGroups: SearchGroup[] = rawGroups.map(g => ({
-      docId: g.groupKey[0]!,
-      firstHit: g.hits[0]!,
-      allHits: g.hits
-    }))
-
-    if (!append) docCache.value = {}
-    const newDocIds = newGroups.map(g => g.docId).filter(Boolean)
-    await fetchDocumentMeta(newDocIds)
-
-    if (seq !== searchSeq) return
-
-    groupedHits.value = append ? groupedHits.value.concat(newGroups) : newGroups
-    total.value = res?.found ?? groupedHits.value.length
-    currentPage.value = typePage
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    if (seq !== searchSeq) return
-    console.error('Typesense error', err)
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      groupedHits.value = []
-      total.value = 0
-    }
-  } finally {
-    if (seq === searchSeq) {
-      if (timeoutId) clearTimeout(timeoutId)
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-// ---- Exploración por fecha (sin query) ------------------------------------
-
-async function runBrowse(page = 1, append = false) {
-  const seq = ++searchSeq
-  if (append) loadingMore.value = true
-  else loading.value = true
-  errorMsg.value = null
-
-  if (timeoutId) clearTimeout(timeoutId)
-  timeoutId = setTimeout(() => {
-    if (seq === searchSeq) {
-      loading.value = false
-      loadingMore.value = false
-      errorMsg.value = 'La búsqueda tardó demasiado. Inténtalo de nuevo.'
-    }
-  }, REQUEST_TIMEOUT_MS)
-
-  const isInfinite = settings.paginationType === 'infinite_scroll'
-  const typePage = isInfinite ? (append ? browsePage.value + 1 : 1) : page
-
-  try {
-    const multi = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: ACTIVITIES_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: filterBy.value,
-          sortBy: 'timestamp:desc',
-          perPage: settings.pageSize,
-          page: typePage,
-          includeFields: 'id,title,date,timestamp,place,city,state,country,type,slug,draft'
-        }]
-      }
-    })
-
-    if (seq !== searchSeq) return
-    const result = (multi?.results?.[0] as { found?: number, hits?: Array<{ document: DocMeta }> } | undefined)
-    const newItems = (result?.hits ?? []).map(h => ({
-      docId: h.document.id!,
-      meta: h.document
-    }))
-
-    browseItems.value = append ? browseItems.value.concat(newItems) : newItems
-    browseTotal.value = result?.found ?? browseItems.value.length
-    browsePage.value = typePage
-    if (!append) activePage.value = page
-  } catch (err: unknown) {
-    if (seq !== searchSeq) return
-    console.error('Typesense error', err)
-    errorMsg.value = (err as Error)?.message || 'Error al buscar.'
-    if (!append) {
-      browseItems.value = []
-      browseTotal.value = 0
-    }
-  } finally {
-    if (seq === searchSeq) {
-      if (timeoutId) clearTimeout(timeoutId)
-      loading.value = false
-      loadingMore.value = false
-    }
-  }
-}
-
-function loadMore() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  if (loadingMore.value || loading.value || !hasMore.value) return
-  runSearch(query.value, currentPage.value, true)
-}
-
-function goToPage(p: number) {
-  activePage.value = p
-  if (!debouncedQuery.value.trim()) {
-    browseItems.value = []
-    runBrowse(p, false)
-  } else {
-    groupedHits.value = []
-    runSearch(query.value, p, false)
-  }
-}
-
-const listContainer = ref<HTMLElement | null>(null)
-
-function onListScroll() {
-  if (settings.paginationType !== 'infinite_scroll') return
-  const el = listContainer.value
-  if (!el) return
-  if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
-    if (!debouncedQuery.value.trim()) {
-      if (hasMoreBrowse.value && !loadingMore.value && !loading.value) {
-        runBrowse(browsePage.value, true)
-      }
-    } else {
-      if (hasMoreVisible.value) {
-        visibleGroupCount.value += 10
-      } else if (hasMore.value && !loadingMore.value && !loading.value) {
-        loadMore()
-      }
-    }
-  }
-}
-
-function retry() {
-  if (!query.value.trim()) {
-    runBrowse(activePage.value, false)
-  } else {
-    runSearch(query.value, activePage.value, false)
-  }
-}
-
-onBeforeUnmount(() => { if (timeoutId) clearTimeout(timeoutId) })
-
-watch(debouncedQuery, (q) => {
-  activePage.value = 1
-  if (!q.trim()) {
-    groupedHits.value = []
-    total.value = 0
-    currentPage.value = 1
-    visibleGroupCount.value = 10
-    browseItems.value = []
-    browseTotal.value = 0
-    browsePage.value = 1
-    runBrowse(1, false)
-  } else {
-    browseItems.value = []
-    browseTotal.value = 0
-    browsePage.value = 1
-    groupedHits.value = []
-    total.value = 0
-    currentPage.value = 1
-    visibleGroupCount.value = 10
-    runSearch(q, 1, false)
-  }
-})
-
-// ---- Selección y carga del detalle ----------------------------------------
-
-const selectedDocId = ref<string | null>(null)
-const selectedDocument = ref<DocumentDoc | null>(null)
-const documentLoading = ref(false)
-const selectedParagraphs = ref<TypesenseParagraphHit[]>([])
-const paragraphsLoading = ref(false)
-
-const selectedHit = ref<TypesenseParagraphHit | null>(null)
-const selectedMatchingHits = ref<TypesenseParagraphHit[]>([])
-
-async function fetchFullDocument(docId: string) {
-  documentLoading.value = true
-  selectedDocument.value = null
-  try {
-    const res = await documentsApi.multiSearch({
-      multiSearchParameters: {},
-      multiSearchSearchesParameter: {
-        searches: [{
-          collection: ACTIVITIES_COLLECTION,
-          q: '*',
-          queryBy: 'title',
-          filterBy: `id:=${docId}`,
-          perPage: 1,
-          page: 1
-        }]
-      }
-    })
-    const docHits = (res?.results?.[0] as { hits?: Array<{ document: DocumentDoc }> })?.hits ?? []
-    selectedDocument.value = docHits[0]?.document ?? null
-  } catch (err) {
-    console.error('Error fetching document', err)
-    selectedDocument.value = null
-  } finally {
-    documentLoading.value = false
-  }
-}
-
-async function fetchDocumentParagraphs(docId: string) {
-  paragraphsLoading.value = true
-  selectedParagraphs.value = []
-  const PER_PAGE = 250
-  let page = 1
-  let totalParagraphs = 0
-  const all: Array<{ document: ParagraphDoc }> = []
-  try {
-    do {
-      const res = await documentsApi.multiSearch({
-        multiSearchParameters: {},
-        multiSearchSearchesParameter: {
-          searches: [{
-            collection: PARAGRAPHS_COLLECTION,
-            q: '*',
-            queryBy: '',
-            filterBy: `document_id:=${docId} && ${filterBy.value}`,
-            perPage: PER_PAGE,
-            page,
-            sortBy: 'number:asc'
-          }]
-        }
-      })
-      const result = (res?.results?.[0] as { found?: number, hits?: Array<{ document: ParagraphDoc }> } | undefined)
-      if (!result) break
-      if (page === 1) totalParagraphs = result.found ?? 0
-      all.push(...(result.hits ?? []))
-      page++
-    } while (all.length < totalParagraphs)
-    selectedParagraphs.value = all.map(h => ({ document: h.document }))
-  } catch (err) {
-    console.error('Error fetching paragraphs', err)
-    selectedParagraphs.value = []
-  } finally {
-    paragraphsLoading.value = false
-  }
-}
-
-async function selectGroup(group: DisplayGroup) {
-  selectedDocId.value = group.docId
-  selectedHit.value = group.firstHit
-  const searchGroup = groupedHits.value.find(g => g.docId === group.docId)
-  selectedMatchingHits.value = searchGroup?.allHits ?? []
-  fetchFullDocument(group.docId)
-  fetchDocumentParagraphs(group.docId)
-}
-
-const isPanelOpen = computed({
-  get() { return !!selectedDocId.value },
-  set(v: boolean) {
-    if (!v) {
-      selectedDocId.value = null
-      selectedDocument.value = null
-      selectedParagraphs.value = []
-      selectedHit.value = null
-      selectedMatchingHits.value = []
-    }
-  }
-})
-
-watch(groupedHits, () => {
-  if (!selectedDocId.value || !debouncedQuery.value.trim()) return
-  const still = groupedHits.value.find(g => g.docId === selectedDocId.value)
-  if (!still) {
-    selectedDocId.value = null
-    selectedDocument.value = null
-    selectedParagraphs.value = []
-    selectedHit.value = null
-    selectedMatchingHits.value = []
-  }
-})
-
-// ID del documento seleccionado para sincronizar con la URL
-const selectedId = computed(() => selectedDocId.value)
-
-// ── Sincronización con URL ─────────────────────────────────────────────────
-useSearchUrlSync({ query, page: activePage, selectedId, scrollEl: listContainer })
-
-// ── Ciclo de vida ──────────────────────────────────────────────────────────
-onMounted(async () => {
-  // Carga inicial: browse si no hay query, search si hay query
-  if (q0.trim()) {
-    await runSearch(q0, p0, false)
-  } else {
-    await runBrowse(p0, false)
-  }
-
-  // Restaurar scroll
-  restoreScrollPosition(listContainer.value, s0)
-
-  // Restaurar documento seleccionado
-  if (sid0) {
-    const group = displayGroups.value.find(g => g.docId === sid0)
-    if (group) {
-      selectGroup(group)
-    } else {
-      // El documento puede no estar en la lista visible (p.ej. browse con paginación)
-      // Lo cargamos directamente por ID
-      selectedDocId.value = sid0
-      fetchFullDocument(sid0)
-      fetchDocumentParagraphs(sid0)
-    }
-  }
-})
-
-const breakpoints = useBreakpoints(breakpointsTailwind)
-const isMobile = breakpoints.smaller('lg')
-
-useDetailHistory(isPanelOpen, isMobile)
-
-// ---- Helpers de presentación ----------------------------------------------
-
-function highlightedFor(hit: TypesenseParagraphHit, field: string): string | null {
-  const fromArr = hit.highlights?.find(h => h.field === field)
-  if (fromArr?.snippet) return fromArr.snippet
-  if (fromArr?.value) return fromArr.value
-  const fromObj = hit.highlight?.[field]
-  if (fromObj?.snippet) return fromObj.snippet
-  if (fromObj?.value) return fromObj.value
-  return null
-}
-
-function metaDate(meta: DocMeta | undefined): string {
-  if (!meta) return ''
-  const ts = meta.timestamp || (meta.date ? Math.floor(new Date(meta.date).getTime() / 1000) : null)
-  if (!ts) return meta.date || ''
-  return formatDate(ts)
-}
-
-function metaLocation(meta: DocMeta | undefined): string {
-  if (!meta) return ''
-  return formatLocation({
-    id: meta.id,
-    date: meta.timestamp ?? 0,
-    slug: meta.slug ?? '',
-    type: meta.type ?? '',
-    place: meta.place ?? '',
-    city: meta.city ?? '',
-    state: meta.state ?? '',
-    country: meta.country ?? '',
-    thumbnail: ''
-  })
-}
-</script>
-
 <template>
-  <UDashboardPanel
-    id="estudios-ts-list"
-    :default-size="32"
-    :min-size="24"
-    :max-size="45"
-    resizable
-  >
-    <UDashboardNavbar :title="t('nav.bible_studies_ts')">
-      <template #leading>
-        <UDashboardSidebarCollapse />
-      </template>
-      <template #trailing>
-        <UBadge :label="displayTotal" variant="subtle" />
-      </template>
-    </UDashboardNavbar>
-
-    <div class="px-4 sm:px-6 py-3 border-b border-default">
-      <UInput
-        v-model="query"
-        icon="i-lucide-search"
-        :placeholder="t('search.placeholder')"
-        :loading="loading"
-        size="md"
-        class="w-full"
-      />
-    </div>
-
-    <UAlert
-      v-if="errorMsg"
-      :title="errorMsg"
-      color="error"
-      variant="subtle"
-      icon="i-lucide-triangle-alert"
-      class="mx-4 my-2"
-      :actions="[{ label: 'Reintentar', color: 'neutral', variant: 'outline', onClick: retry }]"
-    />
-
-    <div ref="listContainer" class="overflow-y-auto divide-y divide-default flex-1" @scroll="onListScroll">
-      <div
-        v-if="loading && !displayGroups.length"
-        class="flex items-center justify-center gap-2 py-16 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
-        Buscando...
-      </div>
-
-      <div
-        v-else-if="!displayGroups.length"
-        class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-sm"
-      >
-        <UIcon name="i-lucide-inbox" class="size-10" />
-        <p>{{ query ? `Sin coincidencias para "${query}"` : 'Sin resultados' }}</p>
-      </div>
-
-      <div
-        v-for="group in displayGroups"
-        :key="group.docId"
-        class="p-4 sm:px-6 text-sm cursor-pointer border-b-2 transition-colors"
-        :class="[
-          selectedDocId === group.docId
-            ? 'border-carpagreen bg-carpagreen/10 '
-            : `border-gray-200 hover:border-carpagreen hover:bg-carpagreen/5`
-        ]"
-        @click="selectGroup(group)"
-      >
-        <div class="mb-1">
-          <p class="text-sm font-semibold line-clamp-2 text-highlighted ">
-            <UTooltip
-              :text="$t('search.draft')"
-              color="error"
-            >
-              <UIcon
-                name="ph-file-dashed"
-                v-if="group.meta?.draft"
-                class="bg-carpared"
-              />
-            <!-- <UBadge
-              v-if="group.meta?.draft"
-              label="borrador"
-              variant="solid"
-              color="error"
-              size="xs"
-              class="text-white bg-carpared uppercase font-bold text-xs text-[10px]"
-            /> -->
-            </UTooltip>
-            {{ group.meta?.title || group.docId }}
-          </p>
-        </div>
-
-        <p class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-xs mb-2 text-muted justify-between">
-          <span
-            v-if="metaDate(group.meta)"
-            class="flex items-center gap-1"
-          >
-            <UIcon name="ph:calendar" class="size-4 text-carpagreen" />
-            {{ metaDate(group.meta) }}
-          </span>
-          <span
-            v-if="metaLocation(group.meta)"
-            class="flex items-center gap-1 truncate"
-          >
-            <UIcon name="ph:map-pin" class="size-4 text-carpagreen shrink-0" />
-            <span class="truncate">{{ metaLocation(group.meta) }}</span>
-          </span>
-        </p>
-
-        <!-- Snippet con highlight: solo en modo búsqueda -->
-        <div
-          v-if="group.firstHit"
-          class="snippet-html text-sm text-dimmed"
-          v-html="highlightedFor(group.firstHit, 'text') || group.firstHit.document.text"
-        />
-      </div>
-
-      <!-- Infinite scroll: cargando más -->
-      <div
-        v-if="settings.paginationType === 'infinite_scroll' && loadingMore"
-        class="flex items-center justify-center gap-2 py-4 text-sm text-muted"
-      >
-        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />
-        Cargando más...
-      </div>
-
-      <div
-        v-else-if="settings.paginationType === 'infinite_scroll' && displayGroups.length && !hasMoreBrowse && !hasMoreVisible && !hasMore && !loading"
-        class="py-3 text-center text-xs text-dimmed"
-      >
-        No hay más resultados
-      </div>
-    </div>
-
-    <!-- Paginación numerada -->
-    <div
-      v-if="settings.paginationType === 'numbered' && totalPages > 1 && !loading"
-      class="px-4 py-3 border-t border-default flex justify-center shrink-0"
-    >
-      <UPagination
-        :page="activePage"
-        :total="displayTotal"
-        :items-per-page="settings.pageSize"
-        size="sm"
-        @update:page="goToPage"
-      />
-    </div>
-  </UDashboardPanel>
-
-  <!-- Panel de detalle (escritorio) -->
-  <EstudiosTypensenseDetail
-    v-if="selectedDocId && !isMobile"
-    :document="selectedDocument"
-    :document-loading="documentLoading"
-    :paragraphs="selectedParagraphs"
-    :paragraphs-loading="paragraphsLoading"
-    :collection="FAVORITES_COLLECTION"
-    :query="debouncedQuery"
-    :selected-hit="selectedHit"
-    :selected-matching-hits="selectedMatchingHits"
-    @close="isPanelOpen = false"
+  <SearchPanel
+    paragraphs-collection="activities_paragraphs"
+    main-collection="activities"
+    group-by-field="activities_id"
+    favorites-collection="bible-studies-ts"
+    panel-id="estudios-ts-list"
+    nav-title-key="nav.bible_studies_ts"
+    accent-color="green"
+    empty-detail-text="Selecciona una actividad para ver el detalle"
+    :show-draft="true"
   />
-  <div v-else-if="!isMobile" class="hidden lg:flex flex-1 items-center justify-center">
-    <div class="flex flex-col items-center gap-2 text-dimmed">
-      <UIcon name="i-lucide-search" class="size-16" />
-      <p class="text-sm">Selecciona una actividad para ver el detalle</p>
-    </div>
-  </div>
-
-  <!-- Panel de detalle (móvil) -->
-  <ClientOnly>
-    <USlideover v-if="isMobile" v-model:open="isPanelOpen">
-      <template #content>
-        <EstudiosTypensenseDetail
-          v-if="selectedDocId"
-          :document="selectedDocument"
-          :document-loading="documentLoading"
-          :paragraphs="selectedParagraphs"
-          :paragraphs-loading="paragraphsLoading"
-          :collection="FAVORITES_COLLECTION"
-          :query="debouncedQuery"
-          :selected-hit="selectedHit"
-          :selected-matching-hits="selectedMatchingHits"
-          @close="isPanelOpen = false"
-        />
-      </template>
-    </USlideover>
-  </ClientOnly>
 </template>
-
-<style scoped>
-.snippet-html :deep(p) {
-  display: inline;
-  margin: 0;
-}
-.snippet-html :deep(br) {
-  display: none;
-}
-</style>