Fix: Cambiar accordion de multiple a single con collapsible

- Cambiar de type='multiple' a type='single' (solo un item abierto a la vez)
- Todos los accordions pueden estar cerrados (collapsible: true por defecto)
- Actualizar estado accordionAbierto de string[] a string | undefined
- Actualizar lógica toggleCollapseAll para modo single
- Agregar border-t al content del accordion para mejor separación visual
- Actualizar títulos del botón flotante: 'Abrir primera muestra' / 'Cerrar muestra abierta'

nuxt4/app/composables/useCatacion.ts

@@ -53,7 +53,7 @@ export const useCatacion = () => {
   // Estado de la UI
   const tabActiva = useState<TabCatacion>('tab-activa', () => 'organoleptica')
   const subcategoriasPorTab = useState<SubcategoriasPorTab>('subcategorias-por-tab', cargarSubcategoriasDesdeStorage)
-  const accordionAbierto = useState<string[]>('accordion-abierto', () => [])
+  const accordionAbierto = useState<string | undefined>('accordion-abierto', () => undefined)
 
   // Computed para obtener las subcategorías de la tab actual
   const subcategoriasActivas = computed(() => subcategoriasPorTab.value[tabActiva.value])
@@ -81,7 +81,7 @@ export const useCatacion = () => {
       await guardar(nuevaSesion)
       // Resetear estado de UI
       tabActiva.value = 'organoleptica'
-      accordionAbierto.value = []
+      accordionAbierto.value = undefined
       return nuevaSesion
     } catch (err) {
       console.error('Error al crear nueva sesión:', err)
@@ -308,7 +308,7 @@ export const useCatacion = () => {
     try {
       await eliminar()
       tabActiva.value = 'organoleptica'
-      accordionAbierto.value = []
+      accordionAbierto.value = undefined
     } catch (err) {
       console.error('Error al eliminar sesión:', err)
       throw err

nuxt4/app/pages/cata/sesion.vue

@@ -158,12 +158,11 @@
       <div class="muestras-container container mx-auto px-0 sm:px-4 py-4">
         <UAccordion
           v-model="accordionAbierto"
-          type="multiple"
           :items="accordionItems"
           :ui="{
             item: 'border-b border-default',
             trigger: 'accordion-trigger w-full px-4 py-3 transition-colors',
-            content: '',
+            content: 'border-t border-default',
           }"
         >
           <!-- Header personalizado con ResumenMuestra -->
@@ -196,7 +195,7 @@
         <button
           class="floating-action-button cata-button p-2 rounded-full flex items-center justify-center"
           @click="toggleCollapseAll"
-          :title="todosColapsados ? 'Expandir todas las muestras' : 'Colapsar todas las muestras'"
+          :title="todosColapsados ? 'Abrir primera muestra' : 'Cerrar muestra abierta'"
         >
           <UIcon
             :name="todosColapsados ? 'i-lucide-maximize-2' : 'i-lucide-minimize-2'"
@@ -313,17 +312,17 @@ const obtenerMuestraPorValue = (value: string): Muestra | null => {
 
 // Verificar si todos los acordiones están colapsados
 const todosColapsados = computed(() => {
-  return accordionAbierto.value.length === 0
+  return !accordionAbierto.value
 })
 
-// Colapsar o expandir todos los acordiones
+// Colapsar o expandir el primer accordion
 const toggleCollapseAll = () => {
   if (todosColapsados.value) {
-    // Expandir todos: agregar todos los values
-    accordionAbierto.value = accordionItems.value.map(item => item.value)
+    // Abrir el primero
+    accordionAbierto.value = accordionItems.value[0]?.value
   } else {
-    // Colapsar todos: vaciar el array
-    accordionAbierto.value = []
+    // Cerrar todo
+    accordionAbierto.value = undefined
   }
 }