From 0a4623acfb65b6aa3928f286692ba9a482e51d93 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 02:42:08 -0600
Subject: [PATCH] Fix: Remover clase cata-page del header sticky para evitar
 min-height no deseada

---
 nuxt4/app/pages/cata/sesion.vue | 40 +++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index d7ae40d..041a9d7 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -24,7 +24,7 @@
     <!-- Main Content -->
     <div v-else class="sesion-container">
       <!-- Header Sticky -->
-      <div class="sesion-header sticky top-0 z-10 cata-page border-b">
+      <div class="sesion-header sticky top-0 z-10 border-b">
         <div class="container mx-auto px-4 py-4">
           <div class="flex items-center justify-between mb-4">
             <!-- Título y navegación -->
@@ -52,7 +52,14 @@
                 <UIcon name="i-lucide-download" class="w-5 h-5" />
               </button>
               <button
-                class="cata-button p-2"
+                class="cata-button p-2 flex items-center justify-center"
+                @click="toggleTheme"
+                :title="isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'"
+              >
+                <UIcon :name="isDark ? 'i-lucide-sun' : 'i-lucide-moon'" class="w-5 h-5" />
+              </button>
+              <button
+                class="cata-button p-2 flex items-center justify-center"
                 title="Menú"
                 @click="mostrarMenu = !mostrarMenu"
               >
@@ -143,14 +150,15 @@
 
           <!-- Content con FormularioMuestra -->
           <template #content="{ item }">
-            <div v-if="item && item.muestra" class="p-4">
+            <div class="p-4">
               <CataFormularioMuestra
-                :muestra="item.muestra"
+                v-if="sesionActiva && obtenerMuestraPorValue(item.value)"
+                :muestra="obtenerMuestraPorValue(item.value)!"
                 :tab-activa="tabActiva"
               />
-            </div>
-            <div v-else class="p-4 text-error">
-              Debug: item={{ JSON.stringify(item) }}
+              <div v-else class="text-error">
+                Error: No se pudo cargar la muestra (value: {{ item.value }})
+              </div>
             </div>
           </template>
         </UAccordion>
@@ -187,10 +195,19 @@ const {
 } = useCatacion()
 
 const { inicializar } = useIndexedDB()
+const colorMode = useColorMode()
 
 // Estado del menú
 const mostrarMenu = ref(false)
 
+// Estado del tema
+const isDark = computed(() => colorMode.value === 'dark')
+
+// Cambiar tema
+const toggleTheme = () => {
+  colorMode.preference = isDark.value ? 'light' : 'dark'
+}
+
 // Definición de tabs
 const tabs = [
   {
@@ -221,6 +238,15 @@ const accordionItems = computed(() => {
   }))
 })
 
+// Obtener muestra por value del accordion
+const obtenerMuestraPorValue = (value: string): Muestra | null => {
+  if (!sesionActiva.value) return null
+
+  // Extraer el ID de la muestra del value (formato: "muestra-{id}")
+  const muestraId = parseInt(value.replace('muestra-', ''))
+  return sesionActiva.value.muestras.find(m => m.muestraId === muestraId) || null
+}
+
 // Inicializar al montar
 onMounted(async () => {
   await inicializar()