#45 feat: clean catalog view on mobile devices

src/pages/catalog.vue

@@ -49,20 +49,6 @@
           </div>
         </v-sheet>
 
-        <!-- Controles de paginación superiores -->
-        <PaginationControls
-          v-if="filteredItems.length > 0"
-          :current-page="currentPage"
-          :total-pages="totalPages"
-          :items-per-page="itemsPerPage"
-          :items-per-page-options="itemsPerPageOptions"
-          :pagination-info="paginationInfo"
-          :total-visible-pages="totalVisiblePages"
-          @page-change="handlePageChange"
-          @items-per-page-change="handleItemsPerPageChange"
-          position="top"
-        />
-
         <!-- Grid de productos paginados -->
         <v-row class="product-grid" v-if="paginatedItems.length > 0">
           <v-col
@@ -82,6 +68,7 @@
               :updateQuantity="updateQuantity"
               :disabled="!isAuthenticated"
               @add-to-cart="addToCart"
+              @request-login="showLogin"
             />
           </v-col>
         </v-row>
@@ -136,7 +123,16 @@
             @update-quantity="updateCartQuantity"
             @toggle-collapse="toggleCart"
           />
-          <v-card v-else class="login-prompt-card pa-4 text-center">
+          <v-card v-else-if="!isMobile || showLoginPrompt" class="login-prompt-card pa-4 text-center">
+            <v-btn
+              icon
+              size="x-small"
+              variant="text"
+              class="login-prompt-close"
+              @click="showLoginPrompt = false"
+            >
+              <v-icon size="18">mdi-close</v-icon>
+            </v-btn>
             <v-icon size="48" color="primary" class="mb-2">mdi-cart-lock</v-icon>
             <p class="text-body-2 text-medium-emphasis mb-3">
               Inicia sesión para agregar productos al carrito y finalizar tu compra
@@ -274,7 +270,8 @@ export default {
   setup() {
     const cartStore = useCartStore();
     const authStore = useAuthStore();
-    const cartCollapsed = ref(false); // Cambiado a false para que inicie expandido en desktop
+    const cartCollapsed = ref(false);
+    const showLoginPrompt = ref(false);
     const windowWidth = ref(window.innerWidth);
 
     const isMobile = computed(() => windowWidth.value < 960); // Cambiado de 680 a 960
@@ -295,6 +292,7 @@ export default {
       cartStore,
       authStore,
       cartCollapsed,
+      showLoginPrompt,
       isMobile,
       windowWidth,
     };
@@ -553,7 +551,14 @@ export default {
     openLoginDialog() {
       this.$refs.loginDialogRef.open();
     },
+    showLogin() {
+      this.showLoginPrompt = true;
+      if (this.isMobile) {
+        this.cartCollapsed = false;
+      }
+    },
     onLoginSuccess() {
+      this.showLoginPrompt = false;
       this.api.getCurrentUser().then((user) => {
         this.authStore.setUser(user);
       });
@@ -769,6 +774,13 @@ export default {
 .login-prompt-card {
   border: 2px dashed rgba(0, 0, 0, 0.12);
   background: #fafafa !important;
+  position: relative;
+}
+
+.login-prompt-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
 }
 
 /* ============================================