From d64083e8312eefdb77ff28e9f50e8cf33f41935f Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 18 Oct 2025 16:39:33 -0600
Subject: [PATCH] Feat: Compactar checkboxes de SelectorFamilia y optimizar
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hacer TODOS los checkboxes mucho más compactos:
  * Categorías: min-height 36px → 32px móvil, padding reducido
  * Subcategorías: min-height 32px → 28px móvil, padding reducido
  * Iconos: 1.25rem → 1rem → 0.875rem móvil
  * Texto: 0.875rem → 0.75rem → 0.6875rem móvil
  * Gaps y espaciados reducidos en toda la UI

- Cambiar layout de categorías (padres):
  * Móvil (<= 640px): flex wrap (como subcategorías)
  * Desktop (>= 768px): grid 3 columnas
  * Permite mejor uso del espacio horizontal

- Mantener subcategorías con flex wrap (ya estaba así)
- Ajustar touch-friendly para mantener usabilidad táctil
---
 nuxt4/app/components/cata/SelectorFamilia.vue | 91 ++++++++++---------
 1 file changed, 48 insertions(+), 43 deletions(-)

diff --git a/nuxt4/app/components/cata/SelectorFamilia.vue b/nuxt4/app/components/cata/SelectorFamilia.vue
index 5b0798e..6a57c84 100644
--- a/nuxt4/app/components/cata/SelectorFamilia.vue
+++ b/nuxt4/app/components/cata/SelectorFamilia.vue
@@ -279,9 +279,9 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
 
 /* Grid de categorías */
 .categorias-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
 }
 
 .categoria-item {
@@ -289,8 +289,8 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-height: 50px;
-  padding: 0.75rem;
+  min-height: 36px;
+  padding: 0.5rem 0.625rem;
 }
 
 .categoria-item:focus {
@@ -305,13 +305,13 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
 .categoria-content {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   flex: 1 1 0%;
 }
 
 .categoria-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   flex-shrink: 0;
   opacity: 0.7;
   transition: opacity 0.2s ease;
@@ -323,36 +323,33 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
 }
 
 .categoria-text {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 500;
   text-align: left;
 }
 
 .categoria-check {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   color: var(--cata-primary);
   flex-shrink: 0;
-  margin-left: 0.5rem;
+  margin-left: 0.375rem;
 }
 
 /* Grid de subcategorías */
 .subcategorias-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
 .subcategoria-item {
   position: relative;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  min-height: 44px;
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+  min-height: 32px;
 }
 
 .subcategoria-item:focus {
@@ -365,12 +362,12 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
 }
 
 .subcategoria-text {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 }
 
 .subcategoria-check {
-  width: 1rem;
-  height: 1rem;
+  width: 0.875rem;
+  height: 0.875rem;
   color: var(--cata-primary);
 }
 
@@ -392,57 +389,65 @@ watch(() => props.modelValue.notaEspecifica, (newVal) => {
 
 /* Responsive */
 @media (max-width: 640px) {
-  .categorias-grid {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-    gap: 0.375rem;
-  }
-
   .categoria-item {
-    min-height: 48px;
-    padding: 0.625rem;
+    min-height: 32px;
+    padding: 0.375rem 0.5rem;
   }
 
   .categoria-content {
-    gap: 0.375rem;
+    gap: 0.25rem;
   }
 
   .categoria-icon {
-    width: 1rem;
-    height: 1rem;
+    width: 0.875rem;
+    height: 0.875rem;
   }
 
   .categoria-text {
-    font-size: 0.75rem;
+    font-size: 0.6875rem;
+  }
+
+  .categoria-check {
+    width: 0.875rem;
+    height: 0.875rem;
+    margin-left: 0.25rem;
   }
 
   .subcategoria-item {
-    min-height: 42px;
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+    min-height: 28px;
+    padding: 0.25rem 0.375rem;
   }
 
   .subcategoria-text {
-    font-size: 0.75rem;
+    font-size: 0.6875rem;
+  }
+
+  .subcategoria-check {
+    width: 0.75rem;
+    height: 0.75rem;
   }
 }
 
-@media (min-width: 641px) {
+@media (min-width: 768px) {
   .categorias-grid {
+    display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0.5rem;
   }
 
   .categoria-item {
-    min-height: 55px;
+    min-height: 40px;
   }
 }
 
 /* Touch-friendly */
 @media (hover: none) and (pointer: coarse) {
-  .categoria-item,
+  .categoria-item {
+    min-height: 40px;
+  }
+
   .subcategoria-item {
-    min-height: 50px;
+    min-height: 36px;
   }
 }
 </style>