Feat: Compactar inputs de valoración y mejorar filtrado restrictivo de sliders

- Reducir tamaño de iconos de 1.5rem a 1rem en SelectorIntensidad
- Reducir espaciado entre iconos y padding del contenedor
- Cambiar gap de grids de sliders de 4 a 2
- Implementar filtrado restrictivo por tipo (descriptiva/afectiva) y categoría
- Agregar computed properties individuales para cada slider
- Cuando se selecciona "Afectiva" + "Sensación en la Boca", solo se muestra ese slider específico

nuxt4/app/components/cata/FormularioMuestra.vue

@@ -72,7 +72,7 @@
     <div v-if="tabActiva === 'descriptiva-afectiva'" class="tab-content cata-fade-in">
       <!-- Sliders de Fragancia -->
       <div v-if="mostrarFraganciaSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
             <UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
             Fragancia
@@ -86,14 +86,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarFraganciaDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.fragancia.descriptiva"
             :color="getCategoryColor('fragancia')"
             @update:model-value="(v) => actualizarIntensidad('fragancia', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarFraganciaAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.fragancia.afectiva"
             :color="getCategoryColor('fragancia')"
@@ -104,7 +106,7 @@
 
       <!-- Sliders de Aroma -->
       <div v-if="mostrarAromaSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
             <UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
             Aroma
@@ -118,14 +120,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarAromaDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.aroma.descriptiva"
             :color="getCategoryColor('aroma')"
             @update:model-value="(v) => actualizarIntensidad('aroma', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarAromaAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.aroma.afectiva"
             :color="getCategoryColor('aroma')"
@@ -136,7 +140,7 @@
 
       <!-- Sliders de Sabor -->
       <div v-if="mostrarSaborSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
             <UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
             Sabor
@@ -150,14 +154,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarSaborDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.sabor.descriptiva"
             :color="getCategoryColor('sabor')"
             @update:model-value="(v) => actualizarIntensidad('sabor', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarSaborAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.sabor.afectiva"
             :color="getCategoryColor('sabor')"
@@ -168,7 +174,7 @@
 
       <!-- Sliders de Sabor Residual -->
       <div v-if="mostrarSaborResidualSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
             <UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
             Sabor Residual
@@ -182,14 +188,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarSaborResidualDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.saborResidual.descriptiva"
             :color="getCategoryColor('saborResidual')"
             @update:model-value="(v) => actualizarIntensidad('saborResidual', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarSaborResidualAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.saborResidual.afectiva"
             :color="getCategoryColor('saborResidual')"
@@ -200,7 +208,7 @@
 
       <!-- Sliders de Acidez -->
       <div v-if="mostrarAcidezSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
             <UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
             Acidez
@@ -214,14 +222,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarAcidezDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.acidez.descriptiva"
             :color="getCategoryColor('acidez')"
             @update:model-value="(v) => actualizarIntensidad('acidez', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarAcidezAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.acidez.afectiva"
             :color="getCategoryColor('acidez')"
@@ -232,7 +242,7 @@
 
       <!-- Sliders de Dulzor -->
       <div v-if="mostrarDulzorSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
             <UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
             Dulzor
@@ -246,14 +256,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarDulzorDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.dulzor.descriptiva"
             :color="getCategoryColor('dulzor')"
             @update:model-value="(v) => actualizarIntensidad('dulzor', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarDulzorAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.dulzor.afectiva"
             :color="getCategoryColor('dulzor')"
@@ -264,7 +276,7 @@
 
       <!-- Sliders de Sensación en Boca -->
       <div v-if="mostrarSensacionBocaSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
             <UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
             Sensación en la Boca
@@ -278,14 +290,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarSensacionBocaDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.sensacionBoca.descriptiva"
             :color="getCategoryColor('sensacionBoca')"
             @update:model-value="(v) => actualizarIntensidad('sensacionBoca', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarSensacionBocaAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.sensacionBoca.afectiva"
             :color="getCategoryColor('sensacionBoca')"
@@ -296,7 +310,7 @@
 
       <!-- Sliders de Impresión Global -->
       <div v-if="mostrarImpresionGlobalSlider" class="form-section">
-        <div class="flex items-center justify-between mb-3">
+        <div class="flex items-center justify-between mb-2">
           <h5 class="form-section-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
             <UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
             Impresión Global
@@ -310,14 +324,16 @@
             </UBadge>
           </div>
         </div>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
           <CataSelectorIntensidad
+            v-if="mostrarImpresionGlobalDescriptiva"
             tipo="descriptiva"
             :model-value="muestra.intensidades.impresionGlobal.descriptiva"
             :color="getCategoryColor('impresionGlobal')"
             @update:model-value="(v) => actualizarIntensidad('impresionGlobal', 'descriptiva', v)"
           />
           <CataSelectorIntensidad
+            v-if="mostrarImpresionGlobalAfectiva"
             tipo="afectiva"
             :model-value="muestra.intensidades.impresionGlobal.afectiva"
             :color="getCategoryColor('impresionGlobal')"
@@ -408,7 +424,7 @@
 
         <!-- Fragancia -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('fragancia') }">
               <UIcon :name="getCategoryIcon('fragancia')" class="w-5 h-5" />
               Fragancia
@@ -422,7 +438,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.fragancia.descriptiva"
@@ -440,7 +456,7 @@
 
         <!-- Aroma -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('aroma') }">
               <UIcon :name="getCategoryIcon('aroma')" class="w-5 h-5" />
               Aroma
@@ -454,7 +470,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.aroma.descriptiva"
@@ -472,7 +488,7 @@
 
         <!-- Sabor -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sabor') }">
               <UIcon :name="getCategoryIcon('sabor')" class="w-5 h-5" />
               Sabor
@@ -486,7 +502,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.sabor.descriptiva"
@@ -504,7 +520,7 @@
 
         <!-- Sabor Residual -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('saborResidual') }">
               <UIcon :name="getCategoryIcon('saborResidual')" class="w-5 h-5" />
               Sabor Residual
@@ -518,7 +534,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.saborResidual.descriptiva"
@@ -536,7 +552,7 @@
 
         <!-- Acidez -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('acidez') }">
               <UIcon :name="getCategoryIcon('acidez')" class="w-5 h-5" />
               Acidez
@@ -550,7 +566,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.acidez.descriptiva"
@@ -568,7 +584,7 @@
 
         <!-- Dulzor -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('dulzor') }">
               <UIcon :name="getCategoryIcon('dulzor')" class="w-5 h-5" />
               Dulzor
@@ -582,7 +598,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.dulzor.descriptiva"
@@ -600,7 +616,7 @@
 
         <!-- Sensación en Boca -->
         <div class="form-section mb-4">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('sensacionBoca') }">
               <UIcon :name="getCategoryIcon('sensacionBoca')" class="w-5 h-5" />
               Sensación en la Boca
@@ -614,7 +630,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.sensacionBoca.descriptiva"
@@ -632,7 +648,7 @@
 
         <!-- Impresión Global -->
         <div class="form-section">
-          <div class="flex items-center justify-between mb-3">
+          <div class="flex items-center justify-between mb-2">
             <h6 class="form-subsection-title cata-text flex items-center gap-2" :style="{ color: getCategoryColor('impresionGlobal') }">
               <UIcon :name="getCategoryIcon('impresionGlobal')" class="w-5 h-5" />
               Impresión Global
@@ -646,7 +662,7 @@
               </UBadge>
             </div>
           </div>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
             <CataSelectorIntensidad
               tipo="descriptiva"
               :model-value="muestra.intensidades.impresionGlobal.descriptiva"
@@ -793,21 +809,85 @@ const deberMostrarSeccion = (subcategorias: Subcategoria[]): boolean => {
   return subcategorias.some(sub => props.subcategoriasActivas?.includes(sub))
 }
 
+// Nueva función para filtrado restrictivo de sliders por tipo y categoría
+const deberMostrarSlider = (tipo: 'descriptiva' | 'afectiva', categoria: Subcategoria): boolean => {
+  // Si no hay filtros activos, mostrar todo
+  if (!props.subcategoriasActivas || props.subcategoriasActivas.length === 0) return true
+
+  // Separar filtros en tipos y categorías
+  const filtrosTipo = props.subcategoriasActivas.filter(s => s === 'descriptiva' || s === 'afectiva')
+  const filtrosCategoria = props.subcategoriasActivas.filter(s =>
+    s !== 'descriptiva' && s !== 'afectiva' && s !== null
+  )
+
+  // Si hay filtros de tipo Y filtros de categoría: verificar ambos
+  if (filtrosTipo.length > 0 && filtrosCategoria.length > 0) {
+    return filtrosTipo.includes(tipo) && filtrosCategoria.includes(categoria)
+  }
+
+  // Si solo hay filtros de tipo: verificar que el tipo coincida
+  if (filtrosTipo.length > 0 && filtrosCategoria.length === 0) {
+    return filtrosTipo.includes(tipo)
+  }
+
+  // Si solo hay filtros de categoría: verificar que la categoría coincida
+  if (filtrosCategoria.length > 0 && filtrosTipo.length === 0) {
+    return filtrosCategoria.includes(categoria)
+  }
+
+  // Si no hay filtros relevantes, mostrar
+  return true
+}
+
 // Para Organoléptica
 const mostrarFraganciaAroma = computed(() => deberMostrarSeccion(['fragancia-aroma']))
 const mostrarSaborOrganoleptica = computed(() => deberMostrarSeccion(['sabor']))
 const mostrarSensacionBocaOrganoleptica = computed(() => deberMostrarSeccion(['sensacion-boca']))
 const mostrarGustosPredominantes = computed(() => deberMostrarSeccion(['gustos-predominantes']))
 
-// Para Descriptiva/Afectiva
+// Para Descriptiva/Afectiva - por categoría (mostrar sección si al menos un slider debe mostrarse)
-const mostrarFraganciaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'fragancia']))
+const mostrarFraganciaSlider = computed(() =>
-const mostrarAromaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'aroma']))
+  deberMostrarSlider('descriptiva', 'fragancia') || deberMostrarSlider('afectiva', 'fragancia')
-const mostrarSaborSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sabor']))
+)
-const mostrarSaborResidualSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sabor-residual']))
+const mostrarAromaSlider = computed(() =>
-const mostrarAcidezSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'acidez']))
+  deberMostrarSlider('descriptiva', 'aroma') || deberMostrarSlider('afectiva', 'aroma')
-const mostrarDulzorSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'dulzor']))
+)
-const mostrarSensacionBocaSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'sensacion-boca']))
+const mostrarSaborSlider = computed(() =>
-const mostrarImpresionGlobalSlider = computed(() => deberMostrarSeccion(['descriptiva', 'afectiva', 'impresion-global']))
+  deberMostrarSlider('descriptiva', 'sabor') || deberMostrarSlider('afectiva', 'sabor')
+)
+const mostrarSaborResidualSlider = computed(() =>
+  deberMostrarSlider('descriptiva', 'sabor-residual') || deberMostrarSlider('afectiva', 'sabor-residual')
+)
+const mostrarAcidezSlider = computed(() =>
+  deberMostrarSlider('descriptiva', 'acidez') || deberMostrarSlider('afectiva', 'acidez')
+)
+const mostrarDulzorSlider = computed(() =>
+  deberMostrarSlider('descriptiva', 'dulzor') || deberMostrarSlider('afectiva', 'dulzor')
+)
+const mostrarSensacionBocaSlider = computed(() =>
+  deberMostrarSlider('descriptiva', 'sensacion-boca') || deberMostrarSlider('afectiva', 'sensacion-boca')
+)
+const mostrarImpresionGlobalSlider = computed(() =>
+  deberMostrarSlider('descriptiva', 'impresion-global') || deberMostrarSlider('afectiva', 'impresion-global')
+)
+
+// Para cada slider individual
+const mostrarFraganciaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'fragancia'))
+const mostrarFraganciaAfectiva = computed(() => deberMostrarSlider('afectiva', 'fragancia'))
+const mostrarAromaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'aroma'))
+const mostrarAromaAfectiva = computed(() => deberMostrarSlider('afectiva', 'aroma'))
+const mostrarSaborDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sabor'))
+const mostrarSaborAfectiva = computed(() => deberMostrarSlider('afectiva', 'sabor'))
+const mostrarSaborResidualDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sabor-residual'))
+const mostrarSaborResidualAfectiva = computed(() => deberMostrarSlider('afectiva', 'sabor-residual'))
+const mostrarAcidezDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'acidez'))
+const mostrarAcidezAfectiva = computed(() => deberMostrarSlider('afectiva', 'acidez'))
+const mostrarDulzorDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'dulzor'))
+const mostrarDulzorAfectiva = computed(() => deberMostrarSlider('afectiva', 'dulzor'))
+const mostrarSensacionBocaDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'sensacion-boca'))
+const mostrarSensacionBocaAfectiva = computed(() => deberMostrarSlider('afectiva', 'sensacion-boca'))
+const mostrarImpresionGlobalDescriptiva = computed(() => deberMostrarSlider('descriptiva', 'impresion-global'))
+const mostrarImpresionGlobalAfectiva = computed(() => deberMostrarSlider('afectiva', 'impresion-global'))
 
 // Estado local para otras notas
 const otrasNotasLocal = ref(props.muestra.otrasNotas)

nuxt4/app/components/cata/SelectorIntensidad.vue

@@ -123,16 +123,16 @@ const customColorStyle = computed(() => {
 
 .iconos-container {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.15rem;
   justify-content: center;
   flex-wrap: wrap;
-  padding: 0.5rem 0;
+  padding: 0.25rem 0;
 }
 
 .icono-item {
   background: transparent;
   border: none;
-  padding: 0.25rem;
+  padding: 0.15rem;
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 0.25rem;
@@ -156,8 +156,8 @@ const customColorStyle = computed(() => {
 
 /* Iconos */
 .icono {
-  width: 1.5rem;
+  width: 1rem;
-  height: 1.5rem;
+  height: 1rem;
   transition: all 0.2s ease;
 }
 
@@ -241,12 +241,12 @@ const customColorStyle = computed(() => {
 /* Responsive */
 @media (max-width: 640px) {
   .icono {
-    width: 1.25rem;
+    width: 0.875rem;
-    height: 1.25rem;
+    height: 0.875rem;
   }
 
   .iconos-container {
-    gap: 0.15rem;
+    gap: 0.125rem;
   }
 }