From 779fc7136c5f0cbc1a15ddacf781cb6ee2ed0616 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Mon, 23 Feb 2026 13:42:18 -0500
Subject: [PATCH] feat: redesign FavoritesView with card chips, type-specific
 cards, heart button

- Replace dropdown filter with horizontal scrollable chip pills (Todos/Rutas/Taxis/Negocios/Eventos)
- Differentiated cards per item type: bus routes with yellow icon, taxis with photo, businesses in 2-col grid with image, events with gradient icon
- Heart button to remove favorites (instead of X button) - more friendly UX
- Improved empty state with SVG heart illustration and 'Explorar ahora' CTA
- Full dark/light mode support via CSS variables (no hardcoded colors)
- Sticky chips row for easy filtering while scrolling
---
 frontend/src/views/FavoritesView.vue | 1119 ++++++++++++++------------
 1 file changed, 591 insertions(+), 528 deletions(-)

diff --git a/frontend/src/views/FavoritesView.vue b/frontend/src/views/FavoritesView.vue
index 659a13c..eb2d50c 100644
--- a/frontend/src/views/FavoritesView.vue
+++ b/frontend/src/views/FavoritesView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useFavoritesStore } from '@/stores/favorites'
@@ -10,587 +10,650 @@ const router = useRouter()
 const favoritesStore = useFavoritesStore()
 const selectedFilter = ref('all')
 
+const filters = [
+  { key: 'all',       label: 'Todos',    icon: 'star' },
+  { key: 'routes',    label: 'Rutas',    icon: 'directions_bus' },
+  { key: 'taxis',     label: 'Taxis',    icon: 'local_taxi' },
+  { key: 'businesses',label: 'Negocios', icon: 'store' },
+  { key: 'coupons',   label: 'Eventos',  icon: 'confirmation_number' },
+]
 
 onMounted(async () => {
-    await favoritesStore.loadFavorites()
+  await favoritesStore.loadFavorites()
 })
 
 function getImageUrl(path?: string) {
-    if (!path) return `https://ui-avatars.com/api/?name=Favorite&background=fee715&color=101820`
-    if (path.startsWith('http')) return path
-    return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
+  if (!path) return `https://ui-avatars.com/api/?name=Favorito&background=fee715&color=101820&bold=true`
+  if (path.startsWith('http')) return path
+  return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
 }
 
 async function removeFavorite(event: Event, itemType: string, itemId: string) {
-    event.stopPropagation()
-    if (confirm(t('favorites.removeConfirm'))) {
-        await favoritesStore.removeFavorite(itemType, itemId)
-    }
+  event.stopPropagation()
+  await favoritesStore.removeFavorite(itemType, itemId)
 }
 
-const navigateToItem = (item: any) => {
-    if (item.item_type === 'route') {
-        router.push('/schedules')
-    } else if (item.item_type === 'taxi') {
-        router.push('/taxi')
-    } else if (item.item_type === 'business') {
-        router.push('/business/' + item.item_id)
-    }
+function navigateToItem(item: any) {
+  if (item.item_type === 'route') router.push('/schedules')
+  else if (item.item_type === 'taxi') router.push('/taxi')
+  else if (item.item_type === 'business') router.push('/business/' + item.item_id)
 }
 
+const visibleRoutes = computed(() =>
+  (selectedFilter.value === 'all' || selectedFilter.value === 'routes') ? favoritesStore.routes : []
+)
+const visibleTaxis = computed(() =>
+  (selectedFilter.value === 'all' || selectedFilter.value === 'taxis') ? favoritesStore.taxis : []
+)
+const visibleBusinesses = computed(() =>
+  (selectedFilter.value === 'all' || selectedFilter.value === 'businesses') ? favoritesStore.businesses : []
+)
+const visibleCoupons = computed(() =>
+  (selectedFilter.value === 'all' || selectedFilter.value === 'coupons') ? favoritesStore.coupons : []
+)
+
+const totalFavorites = computed(() => favoritesStore.favorites.length)
+const hasVisibleItems = computed(() =>
+  visibleRoutes.value.length + visibleTaxis.value.length +
+  visibleBusinesses.value.length + visibleCoupons.value.length > 0
+)
 </script>
 
 <template>
-    <div class="favorites-view">
-        <!-- Hero Header -->
-        <header class="favorites-header">
-            <div class="header-overlay"></div>
-            <div class="header-content">
-                <div class="header-icon">
-                    <span class="material-icons">stars</span>
-                </div>
-                <h1>{{ t('favorites.title') }}</h1>
-                <p class="subtitle">{{ t('favorites.subtitle') }}</p>
-            </div>
-        </header>
+  <div class="fav-page">
 
-        <!-- Category Filter (igual a Descubrir) -->
-        <div class="filters-container-wrapper">
-            <div class="filters-card">
-                <div class="filter-group">
-                    <label>
-                        <span class="material-icons">filter_list</span>
-                        Filtrar favoritos
-                    </label>
-                    <div class="select-wrapper">
-                        <select v-model="selectedFilter" class="filter-select">
-                            <option value="all">Todas las categorías</option>
-                            <option v-if="favoritesStore.routes.length > 0" value="routes">Rutas ({{ favoritesStore.routes.length }})</option>
-                            <option v-if="favoritesStore.taxis.length > 0" value="taxis">Taxis ({{ favoritesStore.taxis.length }})</option>
-                            <option v-if="favoritesStore.businesses.length > 0" value="businesses">Negocios ({{ favoritesStore.businesses.length }})</option>
-                            <option v-if="favoritesStore.coupons.length > 0" value="coupons">Eventos ({{ favoritesStore.coupons.length }})</option>
-                        </select>
-                        <span class="material-icons dropdown-icon">expand_more</span>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <!-- ── Header ── -->
+    <header class="fav-header">
+      <h1 class="fav-title">Mis Favoritos</h1>
+      <p class="fav-count" v-if="totalFavorites > 0">
+        {{ totalFavorites }} guardado{{ totalFavorites !== 1 ? 's' : '' }}
+      </p>
+    </header>
 
-        <div v-if="favoritesStore.isLoading" class="loading">
-            <div class="spinner"></div>
-            <p>{{ t('common.loading') }}</p>
-        </div>
-
-        <div v-else class="dashboard-area">
-            <!-- Global Empty State -->
-            <div v-if="favoritesStore.favorites.length === 0" class="empty-state">
-                <div class="empty-icon">
-                    <span class="material-icons">favorite_border</span>
-                </div>
-                <h3>{{ t('favorites.empty.subtitle') }}</h3>
-            </div>
-
-            <div v-else class="sections-list">
-                <!-- ROUTES SECTION -->
-                <section v-if="(selectedFilter === 'all' || selectedFilter === 'routes') && favoritesStore.routes.length > 0" class="fav-section">
-                    <div class="section-header">
-                        <span class="material-icons">directions_bus</span>
-                        <h2>{{ t('favorites.tabs.routes') }}</h2>
-                    </div>
-                    <div class="compact-list">
-                        <div v-for="item in favoritesStore.routes" :key="item.id" class="list-item" @click="navigateToItem(item)">
-                            <div class="item-visual bg-yellow">
-                                <span class="material-icons">directions_bus</span>
-                            </div>
-                            <div class="item-details">
-                                <h3>{{ item.item_name }}</h3>
-                                <p>{{ t('favorites.viewSchedules') }}</p>
-                            </div>
-                            <button class="item-remove" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
-                                <span class="material-icons">close</span>
-                            </button>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- TAXIS SECTION -->
-                <section v-if="(selectedFilter === 'all' || selectedFilter === 'taxis') && favoritesStore.taxis.length > 0" class="fav-section">
-                    <div class="section-header">
-                        <span class="material-icons">local_taxi</span>
-                        <h2>{{ t('favorites.tabs.taxis') }}</h2>
-                    </div>
-                    <div class="compact-list">
-                        <div v-for="item in favoritesStore.taxis" :key="item.id" class="list-item" @click="navigateToItem(item)">
-                            <div class="item-visual thumb">
-                                <img :src="getImageUrl(item.item_image)" :alt="item.item_name">
-                            </div>
-                            <div class="item-details">
-                                <h3>{{ item.item_name }}</h3>
-                                <p>{{ t('favorites.contact') }}</p>
-                            </div>
-                            <button class="item-remove" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
-                                <span class="material-icons">close</span>
-                            </button>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- BUSINESSES SECTION -->
-                <section v-if="(selectedFilter === 'all' || selectedFilter === 'businesses') && favoritesStore.businesses.length > 0" class="fav-section">
-                    <div class="section-header">
-                        <span class="material-icons">store</span>
-                        <h2>{{ t('favorites.tabs.businesses') }}</h2>
-                    </div>
-                    <div class="horizontal-scroll">
-                        <div v-for="item in favoritesStore.businesses" :key="item.id" class="fav-card-mini" @click="navigateToItem(item)">
-                            <div class="mini-card-img">
-                                <img :src="getImageUrl(item.item_image)" :alt="item.item_name">
-                                <button class="mini-remove" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
-                                    <span class="material-icons">close</span>
-                                </button>
-                            </div>
-                            <div class="mini-card-body">
-                                <h3>{{ item.item_name }}</h3>
-                                <p>{{ t('favorites.viewDetails') }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-
-                <!-- EVENTS SECTION -->
-                <section v-if="(selectedFilter === 'all' || selectedFilter === 'coupons') && favoritesStore.coupons.length > 0" class="fav-section">
-                    <div class="section-header">
-                        <span class="material-icons">event</span>
-                        <h2>{{ t('favorites.tabs.coupons') }}</h2>
-                    </div>
-                    <div class="compact-list">
-                        <div v-for="item in favoritesStore.coupons" :key="item.id" class="list-item">
-                            <div class="item-visual thumb">
-                                <img :src="getImageUrl(item.item_image)" :alt="item.item_name">
-                            </div>
-                            <div class="item-details">
-                                <h3>{{ item.item_name }}</h3>
-                                <p>{{ t('favorites.saved') }}</p>
-                            </div>
-                            <button class="item-remove" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
-                                <span class="material-icons">close</span>
-                            </button>
-                        </div>
-                    </div>
-                </section>
-            </div>
-        </div>
+    <!-- ── Chips de filtro ── -->
+    <div class="chips-wrap">
+      <div class="chips-scroll">
+        <button
+          v-for="f in filters"
+          :key="f.key"
+          class="chip"
+          :class="{ 'chip--active': selectedFilter === f.key }"
+          @click="selectedFilter = f.key"
+        >
+          <span class="material-icons chip-icon">{{ f.icon }}</span>
+          {{ f.label }}
+        </button>
+      </div>
     </div>
+
+    <!-- ── Loading ── -->
+    <div v-if="favoritesStore.isLoading" class="state-center">
+      <div class="spinner"></div>
+      <p>Cargando favoritos...</p>
+    </div>
+
+    <template v-else>
+      <!-- ── Empty global ── -->
+      <div v-if="totalFavorites === 0" class="empty-state">
+        <div class="empty-illustration">
+          <svg width="100" height="100" viewBox="0 0 100 100" fill="none">
+            <path d="M50 80 C50 80 15 58 15 36 C15 24 24 16 34 16 C41 16 47 20 50 26 C53 20 59 16 66 16 C76 16 85 24 85 36 C85 58 50 80 50 80Z"
+              stroke="var(--active-color)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+            <line x1="50" y1="38" x2="50" y2="52" stroke="var(--active-color)" stroke-width="4" stroke-linecap="round"/>
+            <line x1="43" y1="45" x2="57" y2="45" stroke="var(--active-color)" stroke-width="4" stroke-linecap="round"/>
+          </svg>
+        </div>
+        <h2 class="empty-title">Nada guardado aún</h2>
+        <p class="empty-sub">Explora rutas, taxis y negocios para guardar tus favoritos aquí</p>
+        <button class="cta-btn" @click="router.push('/map')">
+          <span class="material-icons">explore</span>
+          Explorar ahora
+        </button>
+      </div>
+
+      <!-- ── Empty de categoría ── -->
+      <div v-else-if="!hasVisibleItems" class="empty-state empty-state--sm">
+        <span class="material-icons empty-cat-icon">search_off</span>
+        <p class="empty-sub">No tienes favoritos en esta categoría</p>
+      </div>
+
+      <!-- ── Contenido ── -->
+      <div v-else class="fav-content">
+
+        <!-- RUTAS -->
+        <section v-if="visibleRoutes.length > 0" class="fav-section">
+          <div class="section-label">
+            <span class="material-icons">directions_bus</span>
+            <span>Rutas</span>
+          </div>
+          <div class="card-list">
+            <div
+              v-for="item in visibleRoutes"
+              :key="item.id"
+              class="card card--row"
+              @click="navigateToItem(item)"
+            >
+              <div class="card-thumb card-thumb--yellow">
+                <span class="material-icons">directions_bus</span>
+              </div>
+              <div class="card-info">
+                <p class="card-name">{{ item.item_name }}</p>
+                <p class="card-sub">Toca para ver horarios</p>
+              </div>
+              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
+                <span class="material-icons">favorite</span>
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- TAXIS -->
+        <section v-if="visibleTaxis.length > 0" class="fav-section">
+          <div class="section-label">
+            <span class="material-icons">local_taxi</span>
+            <span>Taxis</span>
+          </div>
+          <div class="card-list">
+            <div
+              v-for="item in visibleTaxis"
+              :key="item.id"
+              class="card card--row"
+              @click="navigateToItem(item)"
+            >
+              <div class="card-thumb card-thumb--img">
+                <img :src="getImageUrl(item.item_image)" :alt="item.item_name" />
+              </div>
+              <div class="card-info">
+                <p class="card-name">{{ item.item_name }}</p>
+                <p class="card-sub">Taxi • Ver disponibilidad</p>
+              </div>
+              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
+                <span class="material-icons">favorite</span>
+              </button>
+            </div>
+          </div>
+        </section>
+
+        <!-- NEGOCIOS -->
+        <section v-if="visibleBusinesses.length > 0" class="fav-section">
+          <div class="section-label">
+            <span class="material-icons">store</span>
+            <span>Negocios</span>
+          </div>
+          <div class="biz-grid">
+            <div
+              v-for="item in visibleBusinesses"
+              :key="item.id"
+              class="biz-card"
+              @click="navigateToItem(item)"
+            >
+              <div class="biz-img">
+                <img :src="getImageUrl(item.item_image)" :alt="item.item_name" />
+                <button class="heart-btn heart-btn--active heart-btn--overlay" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
+                  <span class="material-icons">favorite</span>
+                </button>
+                <span class="biz-badge">Negocio</span>
+              </div>
+              <div class="biz-body">
+                <p class="card-name">{{ item.item_name }}</p>
+                <p class="card-sub">Ver detalles →</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- EVENTOS / CUPONES -->
+        <section v-if="visibleCoupons.length > 0" class="fav-section">
+          <div class="section-label">
+            <span class="material-icons">confirmation_number</span>
+            <span>Eventos</span>
+          </div>
+          <div class="card-list">
+            <div
+              v-for="item in visibleCoupons"
+              :key="item.id"
+              class="card card--row"
+            >
+              <div class="card-thumb card-thumb--event">
+                <span class="material-icons">local_activity</span>
+              </div>
+              <div class="card-info">
+                <p class="card-name">{{ item.item_name }}</p>
+                <span class="badge-avail">Disponible</span>
+              </div>
+              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
+                <span class="material-icons">favorite</span>
+              </button>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    </template>
+  </div>
 </template>
 
 <style scoped>
-.favorites-view {
-    min-height: 100vh;
-    background: var(--bg-primary);
-    padding-bottom: 80px;
-    box-sizing: border-box;
+/* ══════════════════════════════════════════
+   PÁGINA BASE
+══════════════════════════════════════════ */
+.fav-page {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  padding-bottom: 90px;
 }
 
-/* Hero Header */
-.favorites-header {
-  position: relative;
-  background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
-  color: #101820;
-  padding: 40px 20px 60px;
-  text-align: center;
-  overflow: hidden;
+/* ══════════════════════════════════════════
+   HEADER
+══════════════════════════════════════════ */
+.fav-header {
+  padding: 1.5rem 1.25rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
 }
 
-.header-overlay {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-  background: 
-    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.2) 0%, transparent 50%);
-  pointer-events: none;
-}
-
-.header-content {
-  position: relative;
-  z-index: 1;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.header-icon {
-  width: 80px;
-  height: 80px;
-  margin: 0 auto 20px;
-  background: rgba(16, 24, 32, 0.1);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  backdrop-filter: blur(10px);
-  animation: float 3s ease-in-out infinite;
-}
-
-.header-icon .material-icons {
-  font-size: 40px;
-  color: #101820;
-}
-
-@keyframes float {
-  0%, 100% { transform: translateY(0px); }
-  50% { transform: translateY(-10px); }
-}
-
-.header-content h1 {
-  font-size: 2.5rem;
+.fav-title {
+  font-size: 1.75rem;
   font-weight: 900;
-  margin-bottom: 12px;
-  color: #101820;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.02em;
 }
 
-/* Filter Card Area */
-.filters-container-wrapper {
-  max-width: 1200px;
-  margin: 30px auto 30px;
-  padding: 0 20px;
-  position: relative;
+.fav-count {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* ══════════════════════════════════════════
+   CHIPS
+══════════════════════════════════════════ */
+.chips-wrap {
+  background: var(--bg-secondary);
+  padding: 0.75rem 0 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
   z-index: 10;
 }
 
-.filters-card {
-    background: var(--card-bg);
-    border-radius: 20px;
-    padding: 20px;
-    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
-    border: 1px solid var(--active-color);
+.chips-scroll {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0 1.25rem;
+  scrollbar-width: none;
 }
 
-.filter-group {
+.chips-scroll::-webkit-scrollbar { display: none; }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 99px;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  border: 1.5px solid transparent;
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  border-color: var(--border-color);
+  transition: all 0.18s ease;
+  flex-shrink: 0;
+}
+
+.chip-icon { font-size: 1rem; }
+
+.chip:hover {
+  color: var(--text-primary);
+  border-color: var(--active-color);
+}
+
+.chip--active {
+  background: var(--active-color);
+  color: #101820;
+  border-color: var(--active-color);
+}
+
+/* ══════════════════════════════════════════
+   CONTENIDO
+══════════════════════════════════════════ */
+.fav-content {
+  padding: 1.25rem;
   display: flex;
   flex-direction: column;
-  gap: 10px;
-}
-
-.filter-group label {
-  font-weight: 700;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.filter-group label .material-icons {
-  font-size: 20px;
-  color: var(--active-color);
-}
-
-.select-wrapper {
-  position: relative;
-}
-
-.filter-select {
-  width: 100%;
-  padding: 14px 44px 14px 16px;
-  border-radius: 14px;
-  border: 2px solid var(--border-color);
-  background: var(--bg-secondary);
-  color: var(--text-primary);
-  font-size: 1rem;
-  font-weight: 700;
-  appearance: none;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.filter-select option {
-  background: var(--card-bg);
-  color: var(--text-primary);
-  padding: 10px;
-}
-
-.filter-select:focus {
-  outline: none;
-  border-color: var(--active-color);
-  box-shadow: 0 0 0 4px rgba(254, 231, 21, 0.1);
-}
-
-.dropdown-icon {
-  position: absolute;
-  right: 16px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--text-secondary);
-  pointer-events: none;
-}
-
-/* Dashboard Sections */
-.sections-list {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 48px;
-}
-
-.fav-section {
-    scroll-margin-top: 100px;
-}
-
-.section-header {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 24px;
-    color: var(--text-primary);
-}
-
-.section-header .material-icons {
-    color: var(--active-color);
-    font-size: 28px;
-}
-
-.section-header h2 {
-    font-size: 1.8rem;
-    font-weight: 900;
-    margin: 0;
-}
-
-/* Compact List Style */
-.compact-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.list-item {
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 20px;
-    padding: 16px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.list-item:hover {
-    transform: translateX(10px);
-    border-color: var(--active-color);
-    background: var(--hover-bg);
-}
-
-.item-visual {
-    width: 60px;
-    height: 60px;
-    border-radius: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    overflow: hidden;
-}
-
-.item-visual.bg-yellow {
-    background: var(--active-color);
-    color: #101820;
-}
-
-.item-visual.thumb img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.item-details {
-    flex: 1;
-}
-
-.item-details h3 {
-    margin: 0;
-    font-size: 1.15rem;
-    font-weight: 800;
-}
-
-.item-details p {
-    margin: 4px 0 0;
-    font-size: 0.9rem;
-    color: var(--text-secondary);
-}
-
-.item-remove {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.item-remove:hover {
-    background: #ff4757;
-    color: white;
-    border-color: #ff4757;
-}
-
-/* Horizontal Scroll for Businesses */
-.horizontal-scroll {
-    display: flex;
-    gap: 16px;
-    overflow-x: auto;
-    padding: 4px 4px 20px;
-    scrollbar-width: none;
-}
-
-.horizontal-scroll::-webkit-scrollbar {
-    display: none;
-}
-
-.fav-card-mini {
-    width: 240px;
-    flex-shrink: 0;
-    background: var(--card-bg);
-    border-radius: 24px;
-    border: 1px solid var(--border-color);
-    overflow: hidden;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-
-.fav-card-mini:hover {
-    transform: translateY(-8px);
-    border-color: var(--active-color);
-}
-
-.mini-card-img {
-    height: 140px;
-    position: relative;
-    overflow: hidden;
-}
-
-.mini-card-img img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.mini-remove {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background: rgba(0,0,0,0.5);
-    color: white;
-    border: none;
-    width: 28px;
-    height: 28px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    backdrop-filter: blur(4px);
-    cursor: pointer;
-}
-
-.mini-card-body {
-    padding: 16px;
-}
-
-.mini-card-body h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    font-weight: 800;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.mini-card-body p {
-    margin: 4px 0 0;
-    font-size: 0.85rem;
-    color: var(--active-color);
-    font-weight: 700;
-}
-
-/* States */
-.empty-state {
-  text-align: center;
-  padding: 40px 24px;
-  background: var(--header-bg);
-  border-radius: 30px;
-  border: 2px dashed var(--border-color);
-  max-width: 500px;
+  gap: 2rem;
+  max-width: 640px;
   margin: 0 auto;
 }
 
-.empty-icon {
-  width: 100px;
-  height: 100px;
-  margin: 0 auto 24px;
+/* ── Secciones ── */
+.fav-section { display: flex; flex-direction: column; gap: 0.75rem; }
+
+.section-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+.section-label .material-icons {
+  font-size: 1.25rem;
+  color: var(--active-color);
+}
+
+/* ══════════════════════════════════════════
+   TARJETA FILA (rutas / taxis / eventos)
+══════════════════════════════════════════ */
+.card-list { display: flex; flex-direction: column; gap: 0.625rem; }
+
+.card {
   background: var(--bg-secondary);
-  border-radius: 30px;
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  transition: border-color 0.2s, transform 0.15s;
+  cursor: pointer;
+}
+
+.card:hover {
+  border-color: var(--active-color);
+  transform: translateX(4px);
+}
+
+.card--row {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+  padding: 0.875rem;
+}
+
+/* Thumb */
+.card-thumb {
+  width: 52px;
+  height: 52px;
+  border-radius: 0.75rem;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+}
+
+.card-thumb--yellow {
+  background: var(--active-color);
+  color: #101820;
+}
+
+.card-thumb--yellow .material-icons { font-size: 1.5rem; }
+
+.card-thumb--img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-thumb--event {
+  background: linear-gradient(135deg, #FEE715, #F97316);
+  color: #101820;
+}
+
+.card-thumb--event .material-icons { font-size: 1.5rem; }
+
+/* Info */
+.card-info { flex: 1; min-width: 0; }
+
+.card-name {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-sub {
+  margin: 0.2rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.badge-avail {
+  display: inline-block;
+  margin-top: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  color: #16a34a;
+  background: rgba(22, 163, 74, 0.12);
+  border-radius: 99px;
+  padding: 0.15rem 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* ══════════════════════════════════════════
+   BOTÓN CORAZÓN
+══════════════════════════════════════════ */
+.heart-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 1.5px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+
+.heart-btn .material-icons { font-size: 1.125rem; }
+
+.heart-btn--active {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.3);
+  color: #ef4444;
+}
+
+.heart-btn--active:hover {
+  background: #ef4444;
+  border-color: #ef4444;
+  color: white;
+  transform: scale(1.1);
+}
+
+.heart-btn--overlay {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: rgba(0,0,0,0.45);
+  border-color: transparent;
+  color: white;
+  backdrop-filter: blur(4px);
+}
+
+.heart-btn--overlay:hover {
+  background: #ef4444;
+}
+
+/* ══════════════════════════════════════════
+   GRID DE NEGOCIOS
+══════════════════════════════════════════ */
+.biz-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.biz-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+}
+
+.biz-card:hover {
+  border-color: var(--active-color);
+  transform: translateY(-4px);
+}
+
+.biz-img {
+  position: relative;
+  height: 100px;
+  overflow: hidden;
+}
+
+.biz-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.biz-badge {
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  background: var(--active-color);
+  color: #101820;
+  padding: 0.15rem 0.5rem;
+  border-radius: 99px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.biz-body {
+  padding: 0.625rem 0.75rem;
+}
+
+.biz-body .card-name {
+  font-size: 0.875rem;
+}
+
+.biz-body .card-sub {
   color: var(--active-color);
-  opacity: 0.5;
+  font-weight: 700;
 }
 
-.empty-state h3 {
-  font-size: 1.5rem;
+/* ══════════════════════════════════════════
+   ESTADOS
+══════════════════════════════════════════ */
+.state-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1.25rem;
+  gap: 1rem;
+  color: var(--text-secondary);
+}
+
+.spinner {
+  width: 2rem;
+  height: 2rem;
+  border: 2.5px solid var(--border-color);
+  border-top-color: var(--active-color);
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Empty state principal */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3.5rem 2rem;
+  text-align: center;
+  max-width: 360px;
+  margin: 2rem auto 0;
+}
+
+.empty-state--sm { padding: 2rem 1.25rem; }
+
+.empty-illustration {
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  border: 1.5px dashed var(--border-color);
+}
+
+.empty-cat-icon {
+  font-size: 3rem;
+  color: var(--text-secondary);
+  opacity: 0.4;
+  margin-bottom: 0.75rem;
+}
+
+.empty-title {
+  font-size: 1.375rem;
   font-weight: 900;
-  margin-bottom: 12px;
+  color: var(--text-primary);
+  margin: 0 0 0.625rem;
+  letter-spacing: -0.02em;
 }
 
-.cta-link {
-    display: inline-flex;
-    padding: 16px 32px;
-    background: var(--active-color);
-    color: #101820;
-    text-decoration: none;
-    border-radius: 16px;
-    font-weight: 900;
-    margin-top: 24px;
+.empty-sub {
+  font-size: 0.9375rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin: 0 0 1.75rem;
 }
 
-@media (max-width: 768px) {
-    .favorites-header {
-      padding: 40px 16px 60px;
-    }
-    
-    .header-content h1 {
-      font-size: 2.1rem;
-    }
+.cta-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1.75rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 99px;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  font-family: inherit;
+  cursor: pointer;
+  box-shadow: 0 6px 20px rgba(254, 231, 21, 0.3);
+  transition: transform 0.15s, box-shadow 0.15s;
+}
 
-    .sections-list {
-        padding: 0 16px;
-        gap: 32px;
-    }
+.cta-btn .material-icons { font-size: 1.25rem; }
 
-    .section-header h2 {
-        font-size: 1.5rem;
-    }
+.cta-btn:active { transform: scale(0.97); }
 
-    .list-item {
-        padding: 12px;
-    }
+/* ══════════════════════════════════════════
+   RESPONSIVE
+══════════════════════════════════════════ */
+@media (max-width: 480px) {
+  .biz-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
-    .item-visual {
-        width: 50px;
-        height: 50px;
-    }
+  .fav-title { font-size: 1.5rem; }
+}
 
-    .item-details h3 {
-        font-size: 1rem;
-    }
-
-    .fav-card-mini {
-        width: 200px;
-    }
+@media (min-width: 640px) {
+  .biz-grid { grid-template-columns: repeat(3, 1fr); }
 }
 </style>