From 0656f153664e802cd16f667ba4917be144c74e84 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 03:43:15 -0600
Subject: [PATCH] =?UTF-8?q?Feat:=20Mejorar=20dise=C3=B1o=20del=20bot=C3=B3?=
 =?UTF-8?q?n=20flotante=20de=20colapsar/expandir?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reducir padding del botón de p-3 a p-2 (más compacto)
- Reducir tamaño del icono de w-6 h-6 a w-5 h-5
- Agregar flex items-center justify-center para centrar el icono
- Eliminar shadow con glow de color
- Usar fondo sólido con var(--cata-bg) en lugar de transparente
- Aplicar sombra simple con rgba (sin color del tema)
- Eliminar ajustes responsive de padding innecesarios
- Mejorar z-index para que se sobreponga correctamente a elementos
---
 nuxt4/app/pages/cata/sesion.vue | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/nuxt4/app/pages/cata/sesion.vue b/nuxt4/app/pages/cata/sesion.vue
index e0cb420..76870d5 100644
--- a/nuxt4/app/pages/cata/sesion.vue
+++ b/nuxt4/app/pages/cata/sesion.vue
@@ -181,13 +181,13 @@
       <!-- Botón flotante para colapsar/expandir -->
       <div class="floating-action">
         <button
-          class="cata-button p-3 rounded-full shadow-lg"
+          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'"
         >
           <UIcon
             :name="todosColapsados ? 'i-lucide-maximize-2' : 'i-lucide-minimize-2'"
-            class="w-6 h-6"
+            class="w-5 h-5"
           />
         </button>
       </div>
@@ -435,12 +435,14 @@ onMounted(() => {
   z-index: 20;
 }
 
-.floating-action button {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+.floating-action-button {
+  background-color: var(--cata-bg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.dark .floating-action button {
-  box-shadow: 0 4px 12px color-mix(in srgb, var(--cata-primary) 40%, transparent);
+.dark .floating-action-button {
+  background-color: var(--cata-bg);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 /* Loading spinner */
@@ -478,11 +480,6 @@ onMounted(() => {
     bottom: 1rem;
     right: 1rem;
   }
-
-  .floating-action button {
-    padding: 0.5rem 1rem;
-    font-size: 0.875rem;
-  }
 }
 
 /* Landscape mobile */