From 619590adccaf010bfd39b08b08af06db942b3a20 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Thu, 28 May 2026 22:44:13 -0500
Subject: [PATCH] fix: optimize catalog mobile cart behavior and z-index
 hierarchy

- Fix cart overlay blocking header in mobile (z-index: header 900 < cart 1000)
- Add cart-is-collapsed class with translateY(calc(100% - 60px)) for bottom sheet behavior
- Ensure cart header remains visible and clickable when collapsed in mobile
- Add deep Vuetify styles for search field integration (:deep(.v-field))
- Preserve desktop sticky sidebar behavior (position: sticky, overflow-y: auto)
- Make entire cart header clickable in mobile (@click on v-card-title)
- Add visual feedback with chevron icons (mdi-chevron-up/down)
- Clean CSS organization with section comments
---
 src/components/catalog/Cart.vue |   2 +-
 src/pages/catalog.vue           | 156 +++++++++++++++++++++++++-------
 2 files changed, 125 insertions(+), 33 deletions(-)

diff --git a/src/components/catalog/Cart.vue b/src/components/catalog/Cart.vue
index aeaa2b9..5b1b234 100644
--- a/src/components/catalog/Cart.vue
+++ b/src/components/catalog/Cart.vue
@@ -7,7 +7,7 @@
     <v-card-title 
       class="d-flex align-center cart-title"
       :class="{ 'cart-header-mobile': isMobile, 'cart-header-desktop': !isMobile }"
-    >
+      @click="isMobile && $emit('toggle-collapse')">
       <!-- Icono del carrito - SIEMPRE VISIBLE -->
       <v-icon class="mr-2">mdi-cart</v-icon>
       
diff --git a/src/pages/catalog.vue b/src/pages/catalog.vue
index 1521d65..4c07e16 100644
--- a/src/pages/catalog.vue
+++ b/src/pages/catalog.vue
@@ -9,13 +9,27 @@
 
     <v-row>
       <v-col cols="12" md="9" lg="7" :class="{ 'pb-mobile-cart': isMobile }">
-        <v-sheet class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg">
-          <v-icon size="28" color="white" class="mr-2 d-sm-none">mdi-store</v-icon>
-          <v-icon size="36" color="white" class="mr-3 d-none d-sm-inline">mdi-store</v-icon>
-          <div class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4">
+        <v-sheet
+          class="page-header d-flex align-center pa-3 pa-sm-4 pa-md-6 mb-3 mb-sm-4 rounded-lg"
+        >
+          <v-icon size="28" color="white" class="mr-2 d-sm-none"
+            >mdi-store</v-icon
+          >
+          <v-icon size="36" color="white" class="mr-3 d-none d-sm-inline"
+            >mdi-store</v-icon
+          >
+          <div
+            class="d-flex flex-column flex-sm-row align-start align-sm-center w-100 ga-2 ga-sm-4"
+          >
             <div class="flex-shrink-0">
-              <h1 class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0">Catálogo</h1>
-              <p class="text-body-2 text-white text-medium-emphasis mb-0">Explora y agrega productos a tu compra</p>
+              <h1
+                class="text-h6 text-sm-h5 text-md-h4 font-weight-bold text-white mb-0"
+              >
+                Catálogo
+              </h1>
+              <p class="text-body-2 text-white text-medium-emphasis mb-0">
+                Explora y agrega productos a tu compra
+              </p>
             </div>
             <v-spacer></v-spacer>
             <v-text-field
@@ -98,7 +112,7 @@
       <v-col cols="12" md="3" lg="5">
         <div
           class="cart-sidebar"
-          :class="{ collapsed: cartCollapsed && isMobile }"
+          :class="{ 'cart-is-collapsed': cartCollapsed && isMobile }"
         >
           <Cart
             :cart-items="cartItems"
@@ -509,19 +523,24 @@ export default {
 </script>
 
 <style scoped>
+/* ============================================
+   CABECERA STICKY CON BÚSQUEDA
+   ============================================ */
 .page-header {
   position: sticky;
   top: 80px;
-  z-index: 10;
-  background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%) !important;
+  z-index: 5;
+  background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
   color: white !important;
   overflow: visible;
 }
 
+/* Mobile: Header sticky al top, z-index menor que el cart */
 @media (max-width: 959px) {
   .page-header {
     top: 0;
     border-radius: 0 !important;
+    z-index: 900;
   }
 }
 
@@ -531,16 +550,24 @@ export default {
   }
 }
 
-.page-header .search-field {
-  background: rgba(255, 255, 255, 0.15);
+/* Estilos profundos para el campo de búsqueda de Vuetify */
+.page-header :deep(.v-field) {
+  background-color: rgba(255, 255, 255, 0.15) !important;
   border-radius: 8px;
-  transition: background 0.2s;
-  width: 100%;
+  transition: background-color 0.2s ease;
 }
 
-.page-header .search-field:hover,
-.page-header .search-field:focus-within {
-  background: rgba(255, 255, 255, 0.25);
+.page-header :deep(.v-field:hover),
+.page-header :deep(.v-field--focused) {
+  background-color: rgba(255, 255, 255, 0.25) !important;
+}
+
+.page-header :deep(.v-field__input) {
+  color: white !important;
+}
+
+.page-header :deep(.v-field__input::placeholder) {
+  color: rgba(255, 255, 255, 0.7) !important;
 }
 
 @media (max-width: 559px) {
@@ -563,13 +590,87 @@ export default {
   }
 }
 
+/* ============================================
+   CARRITO FLOTANTE (MOBILE FIRST)
+   ============================================ */
+.cart-sidebar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  border-radius: 16px 16px 0 0;
+  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
+}
+
+/* Cuando está colapsado en mobile, solo muestra el header (60px) */
+.cart-sidebar.cart-is-collapsed {
+  transform: translateY(calc(100% - 60px));
+}
+
+.cart-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Espacio inferior para evitar que productos queden ocultos bajo el cart */
+.pb-mobile-cart {
+  padding-bottom: 80px !important;
+}
+
+/* ============================================
+   ITEMS DEL CATÁLOGO
+   ============================================ */
+.catalog-item {
+  padding: 0;
+  margin-bottom: 12px;
+}
+
+.catalog-item:last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 559px) {
+  .catalog-item {
+    margin-bottom: 10px;
+  }
+}
+
+@media (min-width: 560px) and (max-width: 959px) {
+  .catalog-item {
+    margin-bottom: 14px;
+  }
+}
+
+/* ============================================
+   DISEÑO DESKTOP (>= 960px)
+   ============================================ */
 @media (min-width: 960px) {
   .cart-sidebar {
     position: sticky;
-    top: 80px;
-    z-index: auto;
-    max-height: calc(100vh - 100px);
-    overflow-y: visible;
+    top: 96px;
+    z-index: 1;
+    max-height: calc(100vh - 120px);
+    overflow-y: auto;
+    box-shadow: none;
+    border-radius: 12px;
+    transform: none !important;
   }
 
   .cart-backdrop {
@@ -585,18 +686,9 @@ export default {
   }
 }
 
-@media (max-width: 559px) {
-  .catalog-item {
-    margin-bottom: 10px;
-  }
-}
-
-@media (min-width: 560px) and (max-width: 959px) {
-  .catalog-item {
-    margin-bottom: 14px;
-  }
-}
-
+/* ============================================
+   MODALES
+   ============================================ */
 .product-list-scroll {
   max-height: 400px;
   overflow-y: auto;