From 2d1e62f15c9a23faeb342f907eddd32bbf989dfc Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Tue, 17 Mar 2026 08:08:25 -0500
Subject: [PATCH] Refactor discover page: simplified cards and side-by-side
 dropdown filters

---
 frontend/src/views/DiscoverView.vue | 793 ++++++----------------------
 1 file changed, 160 insertions(+), 633 deletions(-)

diff --git a/frontend/src/views/DiscoverView.vue b/frontend/src/views/DiscoverView.vue
index 97d640f..a0aeeb7 100644
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@@ -37,12 +37,8 @@ function catName(cat: string) {
 function catEmoji(cat: string) {
   return CATEGORY_META[cat]?.emoji ?? '📍'
 }
-function catIcon(cat: string) {
-  return CATEGORY_META[cat]?.icon ?? 'place'
-}
 
 async function loadBusinesses(silent = false) {
-  // Modo 'silencioso': si ya tenemos datos, no mostrar spinner — solo refrescar en fondo
   if (!silent || businesses.value.length === 0) {
     isLoading.value = true
   }
@@ -51,7 +47,6 @@ async function loadBusinesses(silent = false) {
     businesses.value = await businessService.getAllBusinesses()
   } catch (e) {
     console.error('Error loading businesses:', e)
-    // Solo mostrar error si no hay datos previos
     if (businesses.value.length === 0) {
       error.value = t('discover.error')
     }
@@ -61,7 +56,6 @@ async function loadBusinesses(silent = false) {
 }
 
 function handleRefocus() {
-  // Recarga silenciosa: no congela la UI si ya hay datos visibles
   loadBusinesses(true)
 }
 
@@ -83,7 +77,8 @@ const categories = computed<string[]>(() => {
 
 const areas = computed<string[]>(() => {
   const ars = new Set(businesses.value.map(b => b.area).filter(Boolean) as string[])
-  return [...Array.from(ars)]
+  const sorted = Array.from(ars).sort()
+  return ['Todas', ...sorted]
 })
 
 const filteredBusinesses = computed(() => {
@@ -101,12 +96,10 @@ const filteredBusinesses = computed(() => {
   return list
 })
 
-// Primeros 2 para destacados cuando no hay filtro activo
 const featuredBusinesses = computed(() =>
   businesses.value.slice(0, 2)
 )
 
-// Resto del listado (sin los destacados) cuando no hay filtros
 const gridBusinesses = computed(() => {
   const hasFilter = selectedCategory.value !== 'Todas' || selectedArea.value !== 'Todas' || searchQuery.value.trim()
   if (hasFilter) return filteredBusinesses.value
@@ -127,11 +120,7 @@ function handleExplore(biz: Business) {
   router.push('/business/' + biz.id)
 }
 
-
 function resetFilters() {
-  selectedCategory.value = 'Todas'
-  selectedArea.value = t('discover.allAreas') === 'All' ? 'Todas' : 'Todas' // Simplified to keep internal logic consistent
-  // Using strings as keys for internal logic, translating only for display
   selectedCategory.value = 'Todas'
   selectedArea.value = 'Todas'
   searchQuery.value = ''
@@ -163,255 +152,143 @@ function resetFilters() {
       </div>
     </header>
 
-    <!-- ── CHIPS DE CATEGORÍA ── -->
-    <div class="cat-chips-wrap glass-effect">
-      <div class="cat-chips-scroll">
-        <button
-          v-for="cat in categories"
-          :key="cat"
-          class="cat-chip"
-          :class="{ 'cat-chip--active': selectedCategory === cat }"
-          @click="selectedCategory = cat"
-        >
-          <span class="cat-chip-inner">
-            <span class="cat-emoji">{{ catEmoji(cat) }}</span>
-            <span class="cat-text">{{ catName(cat) }}</span>
-          </span>
-        </button>
+    <!-- ── FILTROS DESPLEGABLES ── -->
+    <div class="discover-filters glass-effect">
+      <div class="filters-row">
+        <!-- Filtro Categoría -->
+        <div class="filter-select-wrap">
+          <span class="material-icons filter-icon">category</span>
+          <select v-model="selectedCategory" class="filter-select">
+            <option v-for="cat in categories" :key="cat" :value="cat">
+              {{ catEmoji(cat) }} {{ catName(cat) }}
+            </option>
+          </select>
+          <span class="material-icons select-arrow">expand_more</span>
+        </div>
+
+        <!-- Filtro Área -->
+        <div class="filter-select-wrap">
+          <span class="material-icons filter-icon">location_on</span>
+          <select v-model="selectedArea" class="filter-select">
+            <option v-for="area in areas" :key="area" :value="area">
+              {{ area === 'Todas' ? t('discover.allAreas') : area }}
+            </option>
+          </select>
+          <span class="material-icons select-arrow">expand_more</span>
+        </div>
       </div>
     </div>
 
-    <!-- ── LOADING ── -->
+    <!-- ── LOADING / ERROR ── -->
     <div v-if="isLoading" class="state-center">
-      <LoadingBranded :message="t('discover.loading', 'Cargando Lugares')" icon="storefront" />
+      <LoadingBranded :message="t('discover.loading')" icon="storefront" />
     </div>
 
-    <!-- ── ERROR ── -->
     <div v-else-if="error" class="state-center">
-      <span class="material-icons" style="font-size: 3.5rem; color: #ef4444; opacity: 0.8; margin-bottom: 0.5rem;">error_outline</span>
-      <p style="font-weight: 600; color: var(--text-secondary);">{{ error }}</p>
-      <button class="cta-btn" style="margin-top: 1rem;" @click="loadBusinesses()">
+      <span class="material-icons error-icon">error_outline</span>
+      <p class="error-text">{{ error }}</p>
+      <button class="cta-btn" @click="loadBusinesses()">
         <span class="material-icons">refresh</span>
         {{ t('common.retry') }}
       </button>
     </div>
 
     <template v-else>
-
-      <!-- ══ VISTA CON FILTRO ACTIVO ══ -->
-      <div v-if="isFiltering" class="disc-content">
-
-        <!-- Chips de área activos -->
-        <div v-if="areas.length > 0" class="area-chips">
-          <button
-            v-for="area in areas"
-            :key="area"
-            class="area-chip"
-            :class="{ 'area-chip--active': selectedArea === area }"
-            @click="selectedArea = selectedArea === area ? 'Todas' : area"
-          >
-            <span class="material-icons area-chip-icon">location_on</span>
-            {{ area }}
-          </button>
-        </div>
-
-        <!-- Contador de resultados -->
-        <div class="results-bar">
-          <span class="results-count">
-            {{ t('discover.results', { count: filteredBusinesses.length }) }}
-            <template v-if="selectedCategory !== 'Todas'"> {{ t('discover.in') }} {{ catName(selectedCategory) }}</template>
-            <template v-if="selectedArea !== 'Todas'"> · {{ selectedArea }}</template>
-          </span>
-          <button class="reset-btn" @click="resetFilters">
-            <span class="material-icons">refresh</span>
-            {{ t('common.clear') }}
-          </button>
-        </div>
-
-        <!-- CONTENIDO PROTEGIDO CON AUTHGUARD -->
-        <AuthGuard 
-          :title="t('discover.auth.title') || '¡Locales exclusivos!'"
-          :message="t('discover.auth.message') || 'Regístrate para descubrir los mejores rincones de la ciudad y ofertas directas.'"
-        >
-          <!-- Grid de resultados -->
-          <TransitionGroup v-if="filteredBusinesses.length > 0" name="fade" tag="div" class="biz-grid">
-            <div
-              v-for="biz in filteredBusinesses"
-              :key="biz.id"
-              v-memo="[biz.id]"
-              class="biz-card"
-              @click="handleExplore(biz)"
-            >
-              <div class="biz-img-wrap">
-                <img 
-                  :src="getImageUrl(biz.image_url, 'business')" 
-                  :alt="biz.name" 
-                  loading="lazy"
-                  decoding="async"
-                  class="biz-img" 
-                  @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
-                />
-                <span class="biz-cat-badge">
-                  <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ catName(biz.category || '') }}
-                </span>
-              </div>
-              <div class="biz-body">
-                <p class="biz-name">{{ biz.name }}</p>
-                <p class="biz-area">
-                  <span class="material-icons biz-area-icon">near_me</span>
-                  {{ biz.area }}
-                </p>
-              </div>
-            </div>
-          </TransitionGroup>
-
-          <!-- Vacío -->
-          <div v-else class="empty-state">
-            <span class="material-icons empty-icon">search_off</span>
-            <h2 class="empty-title">{{ t('discover.noResults') }}</h2>
-            <p class="empty-sub">{{ t('discover.noResultsDesc') }}</p>
-            <button class="cta-btn" @click="resetFilters">{{ t('discover.viewAll') }}</button>
-          </div>
-
-          <!-- CTA al final -->
-          <div v-if="filteredBusinesses.length > 0" class="more-card" @click="resetFilters">
-            <p class="more-card-title">{{ t('discover.lookingMore') }}</p>
-            <p class="more-card-sub">{{ t('discover.exploreWithoutFilters') }}</p>
-            <button class="cta-btn">{{ t('common.all') }}</button>
-          </div>
-        </AuthGuard>
-      </div>
-
-      <!-- ══ VISTA INICIO (sin filtros) ══ -->
-      <div v-else class="disc-content">
-
-        <!-- CHIPS DE ÁREA -->
-        <div v-if="areas.length > 0" class="area-section">
-          <p class="section-label">{{ t('discover.sections.byArea') }}</p>
-          <div class="area-chips">
-            <button
-              v-for="area in areas"
-              :key="area"
-              class="area-chip"
-              :class="{ 'area-chip--active': selectedArea === area }"
-              @click="selectedArea = selectedArea === area ? 'Todas' : area"
-            >
-              <span class="material-icons area-chip-icon">location_on</span>
-              {{ area }}
+      <div class="disc-content">
+        
+        <!-- Vista con Filtros -->
+        <div v-if="isFiltering">
+          <div class="results-bar">
+            <span class="results-count">
+              {{ t('discover.results', { count: filteredBusinesses.length }) }}
+            </span>
+            <button class="reset-btn" @click="resetFilters">
+              <span class="material-icons">refresh</span>
+              {{ t('common.clear') }}
             </button>
           </div>
-        </div>
 
-        <!-- DESTACADOS USANDO AUTHGUARD -->
-        <AuthGuard 
-          :title="t('discover.auth.title') || '¡Locales exclusivos!'"
-          :message="t('discover.auth.message') || 'Regístrate para descubrir los mejores rincones de la ciudad y ofertas directas.'"
-        >
-          <div v-if="featuredBusinesses.length > 0" class="featured-section">
-            <p class="section-label">{{ t('discover.sections.featured') }}</p>
-            <div class="featured-grid">
-              <div
-                v-for="biz in featuredBusinesses"
-                :key="biz.id"
-                v-memo="[biz.id]"
-                class="featured-card"
-                @click="handleExplore(biz)"
-              >
-                <img 
-                  :src="getImageUrl(biz.image_url, 'business')" 
-                  :alt="biz.name" 
-                  loading="lazy"
-                  decoding="async"
-                  class="featured-img" 
-                  @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
-                />
-                <div class="featured-gradient"></div>
-                <div class="featured-info">
-                  <span class="featured-cat">
-                    <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
-                    {{ catName(biz.category || '') }}
-                  </span>
-                  <p class="featured-name">{{ biz.name }}</p>
-                  <p class="featured-area">
-                    <span class="material-icons" style="font-size:0.875rem">near_me</span>
-                    {{ biz.area }}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- TODOS LOS LUGARES -->
-          <div v-if="gridBusinesses.length > 0" class="all-section">
-            <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
-            <TransitionGroup name="fade" tag="div" class="biz-grid">
-              <div
-                v-for="biz in gridBusinesses"
-                :key="biz.id"
-                v-memo="[biz.id]"
-                class="biz-card"
-                @click="handleExplore(biz)"
-              >
+          <AuthGuard 
+            :title="t('discover.auth.title')"
+            :message="t('discover.auth.message')"
+          >
+            <TransitionGroup v-if="filteredBusinesses.length > 0" name="fade" tag="div" class="biz-grid">
+              <div v-for="biz in filteredBusinesses" :key="biz.id" class="biz-card" @click="handleExplore(biz)">
                 <div class="biz-img-wrap">
-                  <img 
-                    :src="getImageUrl(biz.image_url, 'business')" 
-                    :alt="biz.name" 
-                    loading="lazy"
-                    decoding="async"
-                    class="biz-img" 
-                    @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')"
-                  />
-                  <span class="biz-cat-badge">
-                    <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
-                    {{ catName(biz.category || '') }}
-                  </span>
+                  <img :src="getImageUrl(biz.image_url, 'business')" :alt="biz.name" loading="lazy" class="biz-img" 
+                    @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')" />
                 </div>
                 <div class="biz-body">
                   <p class="biz-name">{{ biz.name }}</p>
-                  <p class="biz-area">
-                    <span class="material-icons biz-area-icon">near_me</span>
-                    {{ biz.area }}
-                  </p>
                 </div>
               </div>
             </TransitionGroup>
-          </div>
-        </AuthGuard>
 
-        <div v-if="businesses.length === 0" class="empty-state">
-          <span class="material-icons empty-icon">storefront</span>
-          <h2 class="empty-title">{{ t('discover.empty') }}</h2>
-          <p class="empty-sub">{{ t('discover.emptyDesc') }}</p>
+            <div v-else class="empty-state">
+              <span class="material-icons empty-icon">search_off</span>
+              <h2 class="empty-title">{{ t('discover.noResults') }}</h2>
+              <p class="empty-sub">{{ t('discover.noResultsDesc') }}</p>
+            </div>
+          </AuthGuard>
         </div>
+
+        <!-- Vista Inicio (Destacados + Todos) -->
+        <div v-else>
+          <AuthGuard 
+            :title="t('discover.auth.title')"
+            :message="t('discover.auth.message')"
+          >
+            <!-- Destacados -->
+            <div v-if="featuredBusinesses.length > 0" class="featured-section">
+              <p class="section-label">{{ t('discover.sections.featured') }}</p>
+              <div class="featured-grid">
+                <div v-for="biz in featuredBusinesses" :key="biz.id" class="featured-card" @click="handleExplore(biz)">
+                  <img :src="getImageUrl(biz.image_url, 'business')" :alt="biz.name" loading="lazy" class="featured-img" 
+                    @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')" />
+                  <div class="featured-gradient"></div>
+                  <div class="featured-info">
+                    <p class="featured-name">{{ biz.name }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Todos los lugares -->
+            <div v-if="gridBusinesses.length > 0" class="all-section">
+              <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
+              <TransitionGroup name="fade" tag="div" class="biz-grid">
+                <div v-for="biz in gridBusinesses" :key="biz.id" class="biz-card" @click="handleExplore(biz)">
+                  <div class="biz-img-wrap">
+                    <img :src="getImageUrl(biz.image_url, 'business')" :alt="biz.name" loading="lazy" class="biz-img" 
+                      @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'business')" />
+                  </div>
+                  <div class="biz-body">
+                    <p class="biz-name">{{ biz.name }}</p>
+                  </div>
+                </div>
+              </TransitionGroup>
+            </div>
+
+            <div v-if="businesses.length === 0" class="empty-state">
+              <span class="material-icons empty-icon">storefront</span>
+              <h2 class="empty-title">{{ t('discover.empty') }}</h2>
+              <p class="empty-sub">{{ t('discover.emptyDesc') }}</p>
+            </div>
+          </AuthGuard>
+        </div>
+
       </div>
     </template>
   </div>
 </template>
 
 <style scoped>
-/* ═══════════════════════════════════════════
-   BASE
- ═══════════════════════════════════════════ */
 .disc-page {
   min-height: 100vh;
   background: var(--bg-primary);
   padding-bottom: 100px;
 }
 
-.state-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 1.25rem;
-  gap: 1rem;
-  color: var(--text-secondary);
-}
-
-/* ═══════════════════════════════════════════
-   HEADER
- ═══════════════════════════════════════════ */
 .disc-header {
   padding: 1.25rem 1.25rem 0.75rem;
   background: var(--bg-secondary);
@@ -436,7 +313,6 @@ function resetFilters() {
   font-weight: 500;
 }
 
-/* Search */
 .search-wrap {
   display: flex;
   align-items: center;
@@ -450,44 +326,21 @@ function resetFilters() {
 }
 
 .search-wrap:focus-within { border-color: var(--active-color); }
-
-.search-icon { font-size: 1.25rem; color: var(--active-color); flex-shrink: 0; }
-
+.search-icon { font-size: 1.25rem; color: var(--active-color); }
 .search-input {
   flex: 1;
   border: none;
   background: transparent;
   font-size: 0.9375rem;
   color: var(--text-primary);
-  font-family: inherit;
   outline: none;
 }
+.search-clear { background: none; border: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; }
 
-.search-input::placeholder { color: var(--text-secondary); opacity: 0.7; }
-
-.search-wrap:focus-within .search-icon {
-  transform: scale(1.1);
-  color: var(--active-color);
-}
-
-.search-clear {
-  background: none;
-  border: none;
-  color: var(--text-secondary);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  padding: 0;
-}
-
-.search-clear .material-icons { font-size: 1.125rem; }
-
-/* ═══════════════════════════════════════════
-   CHIPS DE CATEGORÍA
- ═══════════════════════════════════════════ */
-.cat-chips-wrap {
+/* FILTROS */
+.discover-filters {
   background: var(--bg-secondary);
-  padding: 0.875rem 0;
+  padding: 0.75rem 1.25rem;
   border-bottom: 1px solid var(--border-color);
   position: sticky;
   top: 0;
@@ -496,79 +349,42 @@ function resetFilters() {
   -webkit-backdrop-filter: blur(16px);
 }
 
-.cat-chips-scroll {
-  display: flex;
-  gap: 0.5rem;
-  overflow-x: auto;
-  padding: 0 1.25rem;
-  scrollbar-width: none;
+.filters-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
 }
 
-.cat-chips-scroll::-webkit-scrollbar { display: none; }
-
-.cat-chip {
-  display: inline-flex;
+.filter-select-wrap {
+  position: relative;
+  display: flex;
   align-items: center;
-  padding: 0.125rem;
-  border-radius: 99px;
-  border: 1px solid var(--border-color);
   background: var(--bg-primary);
-  color: var(--text-secondary);
-  font-family: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.75rem;
+  padding: 0 0.75rem;
 }
 
-.cat-chip-inner {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem 0.5rem 0.625rem;
-}
+.filter-icon { font-size: 1.125rem; color: var(--active-color); margin-right: 0.5rem; pointer-events: none; }
 
-.cat-emoji {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  background: var(--bg-secondary);
-  border-radius: 50%;
-  font-size: 1rem;
-  transition: transform 0.3s ease;
-}
-
-.cat-text {
-  font-size: 0.875rem;
+.filter-select {
+  flex: 1;
+  border: none;
+  background: transparent;
+  padding: 0.625rem 1.5rem 0.625rem 0;
+  font-size: 0.8125rem;
   font-weight: 700;
+  color: var(--text-primary);
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.cat-chip:hover {
-  border-color: var(--active-color);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
+.select-arrow { position: absolute; right: 0.5rem; font-size: 1.125rem; color: var(--text-secondary); pointer-events: none; }
 
-.cat-chip:hover .cat-emoji {
-  transform: scale(1.1) rotate(5deg);
-}
-
-.cat-chip--active {
-  background: var(--active-color);
-  border-color: var(--active-color);
-  color: #101820;
-  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.3);
-}
-
-.cat-chip--active .cat-emoji {
-  background: rgba(0, 0, 0, 0.1);
-}
-
-/* ═══════════════════════════════════════════
-   CONTENIDO
- ═══════════════════════════════════════════ */
+/* CONTENIDO */
 .disc-content {
   padding: 1.25rem;
   display: flex;
@@ -578,333 +394,44 @@ function resetFilters() {
   margin: 0 auto;
 }
 
-/* Etiqueta de sección */
-.section-label {
-  font-size: 1rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  margin: 0 0 0.875rem;
-  letter-spacing: -0.01em;
-}
+.section-label { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.875rem; }
 
-/* ═══════════════════════════════════════════
-   CHIPS DE ÁREA
- ═══════════════════════════════════════════ */
-.area-section { display: flex; flex-direction: column; }
+/* CARDS */
+.featured-section { margin-bottom: 1.5rem; }
+.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
+.featured-card { position: relative; border-radius: 1.125rem; overflow: hidden; cursor: pointer; aspect-ratio: 16/9; background: var(--bg-secondary); }
+.featured-img { width: 100%; height: 100%; object-fit: cover; }
+.featured-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
+.featured-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.75rem; z-index: 2; }
+.featured-name { margin: 0; font-size: 0.9375rem; font-weight: 900; color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
 
-.area-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
+.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; }
+.biz-img-wrap { position: relative; aspect-ratio: 4/3; }
+.biz-img { width: 100%; height: 100%; object-fit: cover; }
+.biz-body { padding: 0.75rem; }
+.biz-name { margin: 0; font-size: 0.875rem; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
 
-.area-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  padding: 0.4rem 0.875rem;
-  border-radius: 99px;
-  border: 1.5px solid var(--border-color);
-  background: var(--bg-secondary);
-  color: var(--text-secondary);
-  font-size: 0.8125rem;
-  font-weight: 700;
-  font-family: inherit;
-  cursor: pointer;
-  transition: all 0.18s;
-}
+/* UTILS */
+.results-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
+.results-count { font-size: 0.8125rem; font-weight: 700; color: var(--text-secondary); }
+.reset-btn { display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: 1.5px solid var(--border-color); border-radius: 99px; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); cursor: pointer; }
 
-.area-chip-icon { font-size: 0.875rem; }
+.state-center { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.25rem; gap: 1rem; text-align: center; }
+.error-icon { font-size: 3.5rem; color: #ef4444; opacity: 0.8; }
+.error-text { font-weight: 600; color: var(--text-secondary); }
 
-.area-chip:hover { border-color: var(--active-color); color: var(--text-primary); }
+.empty-state { display: flex; flex-direction: column; align-items: center; padding: 3rem 1.25rem; text-align: center; }
+.empty-icon { font-size: 4rem; color: var(--text-secondary); opacity: 0.3; margin-bottom: 1rem; }
+.empty-title { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; }
+.empty-sub { font-size: 0.875rem; color: var(--text-secondary); max-width: 280px; }
 
-.area-chip--active {
-  background: var(--active-color);
-  border-color: var(--active-color);
-  color: #101820;
-}
+.cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--active-color); color: #101820; border: none; border-radius: 99px; font-size: 0.875rem; font-weight: 800; cursor: pointer; }
 
-/* ═══════════════════════════════════════════
-   SECCIÓN DESTACADOS
- ═══════════════════════════════════════════ */
-.featured-section { display: flex; flex-direction: column; }
-
-.featured-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-.featured-card {
-  position: relative;
-  border-radius: 1.125rem;
-  overflow: hidden;
-  cursor: pointer;
-  aspect-ratio: 16/9;
-  background: var(--bg-secondary);
-  transition: transform 0.2s;
-}
-
-.featured-card:hover { transform: scale(0.98); }
-
-.featured-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.featured-gradient {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgba(0,0,0,0.75) 40%, transparent 70%);
-}
-
-.featured-info {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 0.625rem 0.75rem;
-  z-index: 2;
-}
-
-.featured-cat {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.2rem;
-  background: var(--active-color);
-  color: #101820;
-  font-size: 0.6rem;
-  font-weight: 800;
-  padding: 0.125rem 0.4rem;
-  border-radius: 99px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  margin-bottom: 0.25rem;
-}
-
-.featured-name {
-  margin: 0 0 0.125rem;
-  font-size: 0.875rem;
-  font-weight: 900;
-  color: #ffffff;
-  line-height: 1.1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.featured-area {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  margin: 0;
-  font-size: 0.8rem;
-  color: rgba(255,255,255,0.75);
-  font-weight: 600;
-}
-
-/* ═══════════════════════════════════════════
-   GRID DE NEGOCIOS
- ═══════════════════════════════════════════ */
-.all-section { display: flex; flex-direction: column; }
-
-.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: transform 0.18s, border-color 0.18s;
-}
-
-.biz-card:hover {
-  transform: translateY(-6px) scale(1.02);
-  border-color: var(--active-color);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
-}
-
-.biz-img-wrap {
-  position: relative;
-  aspect-ratio: 4/3;
-  overflow: hidden;
-}
-
-.biz-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.biz-cat-badge {
-  position: absolute;
-  bottom: 0.5rem;
-  left: 0.5rem;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  background: var(--active-color);
-  color: #101820;
-  font-size: 0.625rem;
-  font-weight: 800;
-  padding: 0.15rem 0.45rem;
-  border-radius: 99px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.biz-body { padding: 0.625rem 0.75rem; }
-
-.biz-name {
-  margin: 0 0 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.biz-area {
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-  margin: 0;
-  font-size: 0.7rem;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.biz-area-icon { font-size: 0.875rem; }
-
-/* ═══════════════════════════════════════════
-   BARRA DE RESULTADOS
- ═══════════════════════════════════════════ */
-.results-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: -0.5rem;
-}
-
-.results-count {
-  font-size: 0.8125rem;
-  font-weight: 700;
-  color: var(--text-secondary);
-}
-
-.reset-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  background: none;
-  border: 1.5px solid var(--border-color);
-  border-radius: 99px;
-  padding: 0.3rem 0.75rem;
-  font-size: 0.75rem;
-  font-weight: 700;
-  font-family: inherit;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: all 0.18s;
-}
-
-.reset-btn .material-icons { font-size: 0.875rem; }
-.reset-btn:hover { border-color: var(--active-color); color: var(--text-primary); }
-
-/* ═══════════════════════════════════════════
-   TARJETA "MÁS"
- ═══════════════════════════════════════════ */
-.more-card {
-  background: var(--bg-secondary);
-  border: 1.5px dashed var(--border-color);
-  border-radius: 1rem;
-  padding: 1.25rem;
-  text-align: center;
-  cursor: pointer;
-  transition: border-color 0.2s;
-}
-
-.more-card:hover { border-color: var(--active-color); }
-
-.more-card-title {
-  margin: 0 0 0.25rem;
-  font-size: 1rem;
-  font-weight: 800;
-  color: var(--text-primary);
-}
-
-.more-card-sub {
-  margin: 0 0 1rem;
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-}
-
-/* ═══════════════════════════════════════════
-   CTA Y VACÍO
- ═══════════════════════════════════════════ */
-.cta-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--active-color);
-  color: #101820;
-  border: none;
-  border-radius: 99px;
-  font-size: 0.875rem;
-  font-weight: 800;
-  font-family: inherit;
-  cursor: pointer;
-  transition: transform 0.15s;
-}
-
-.cta-btn:active { transform: scale(0.97); }
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 3rem 1.25rem;
-  text-align: center;
-}
-
-.empty-icon {
-  font-size: 4rem;
-  color: var(--text-secondary);
-  opacity: 0.3;
-  margin-bottom: 1rem;
-}
-
-.empty-title {
-  font-size: 1.25rem;
-  font-weight: 900;
-  color: var(--text-primary);
-  margin-bottom: 0.5rem;
-}
-
-.empty-sub {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
-  max-width: 280px;
-}
-
-/* Transitions */
 .fade-enter-active, .fade-leave-active { transition: all 0.3s ease; }
 .fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(10px); }
 
-/* ═══════════════════════════════════════════
-   RESPONSIVE
- ═══════════════════════════════════════════ */
 @media (max-width: 480px) {
-  .biz-grid, .featured-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
+  .biz-grid, .featured-grid { grid-template-columns: repeat(2, 1fr); }
 }
 </style>