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>