From 68dc26b2b0a705170f8b5fc53e7520267c28ed0a Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Mon, 23 Feb 2026 14:44:55 -0500
Subject: [PATCH] feat: redesign DiscoverView with friendly UX, sections and
 filter chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Friendly header with 'Explora Chiriquí!' greeting and prominent search bar
- Horizontal category chips with emojis (Restaurante, Hotel, Cafe, etc.)
- Sticky chips row for quick filtering while scrolling
- 'Destacados' section: 2 large portrait cards with image, gradient overlay, category badge
- 'Por Area' chips: David, Boquete, Volcan, etc. — click to filter
- 'Todos los lugares' 2-col grid with image, cat badge, area label
- When filtering: results counter, reset button, 'no results' empty state
- 'Busca algo mas' CTA card at bottom of filtered results
- Full dark/light mode via CSS variables
---
 frontend/src/views/DiscoverView.vue | 1055 +++++++++++++++++----------
 1 file changed, 683 insertions(+), 372 deletions(-)

diff --git a/frontend/src/views/DiscoverView.vue b/frontend/src/views/DiscoverView.vue
index 68655f0..f4dd331 100644
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@@ -1,513 +1,824 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { businessService } from '@/services/businessService';
-import { API_URL } from '@/services/apiClient';
-import type { Business } from '@/types';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import FavoriteButton from '@/components/FavoriteButton.vue';
-import { analyticsService } from '@/services/analyticsService';
+import { ref, onMounted, computed } from 'vue'
+import { businessService } from '@/services/businessService'
+import { API_URL } from '@/services/apiClient'
+import type { Business } from '@/types'
+import { useRouter } from 'vue-router'
+import FavoriteButton from '@/components/FavoriteButton.vue'
+import { analyticsService } from '@/services/analyticsService'
 
-const { t } = useI18n();
-const router = useRouter();
-const businesses = ref<Business[]>([]);
-const isLoading = ref(true);
-const selectedArea = ref('Todas');
-const selectedCategory = ref('Todas');
-const searchQuery = ref('');
+const router = useRouter()
+const businesses  = ref<Business[]>([])
+const isLoading   = ref(true)
+const searchQuery = ref('')
+const selectedCategory = ref('Todas')
+const selectedArea     = ref('Todas')
+
+// ── Categorías con emoji e ícono material
+const CATEGORY_META: Record<string, { emoji: string; icon: string }> = {
+  'Todas':       { emoji: '✨', icon: 'apps' },
+  'Restaurante': { emoji: '🍽️', icon: 'restaurant' },
+  'Hotel':       { emoji: '🏨', icon: 'hotel' },
+  'Café':        { emoji: '☕', icon: 'local_cafe' },
+  'Comercio':    { emoji: '🏪', icon: 'store' },
+  'Turismo':     { emoji: '🌄', icon: 'landscape' },
+  'Bebidas':     { emoji: '🍹', icon: 'local_bar' },
+}
+
+function catEmoji(cat: string) {
+  return CATEGORY_META[cat]?.emoji ?? '📍'
+}
+function catIcon(cat: string) {
+  return CATEGORY_META[cat]?.icon ?? 'place'
+}
 
 onMounted(async () => {
-  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Discover' });
+  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Discover' })
   try {
-    businesses.value = await businessService.getAllBusinesses();
-  } catch (error) {
-    console.error('Error loading tourist spots:', error);
+    businesses.value = await businessService.getAllBusinesses()
+  } catch (e) {
+    console.error('Error loading businesses:', e)
   } finally {
-    isLoading.value = false;
+    isLoading.value = false
   }
-});
-
-function handleExplore(biz: Business) {
-  analyticsService.logEvent({ 
-    event_name: 'promo_click', 
-    item_id: biz.name,
-    properties: { business_id: biz.id }
-  });
-  router.push('/business/' + biz.id);
-}
-
-const filteredBusinesses = computed(() => {
-  let filtered = businesses.value;
-  
-  if (selectedArea.value !== 'Todas') {
-    filtered = filtered.filter(b => b.area === selectedArea.value);
-  }
-  
-  if (selectedCategory.value !== 'Todas') {
-    filtered = filtered.filter(b => b.category === selectedCategory.value);
-  }
-
-  if (searchQuery.value.trim() !== '') {
-    const query = searchQuery.value.toLowerCase();
-    filtered = filtered.filter(b => 
-      b.name.toLowerCase().includes(query) || 
-      (b.area && b.area.toLowerCase().includes(query)) ||
-      (b.category && b.category.toLowerCase().includes(query))
-    );
-  }
-  
-  return filtered;
-});
+})
 
+// ── Computados
 const categories = computed<string[]>(() => {
-  const cats = new Set(businesses.value.map(b => b.category).filter(Boolean) as string[]);
-  return ['Todas', ...Array.from(cats)];
-});
+  const cats = new Set(businesses.value.map(b => b.category).filter(Boolean) as string[])
+  return ['Todas', ...Array.from(cats)]
+})
 
 const areas = computed<string[]>(() => {
-  const ars = new Set(businesses.value.map(b => b.area).filter(Boolean) as string[]);
-  return ['Todas', ...Array.from(ars)];
-});
+  const ars = new Set(businesses.value.map(b => b.area).filter(Boolean) as string[])
+  return [...Array.from(ars)]
+})
 
-function getImageUrl(path: string | null | undefined) {
-  if (!path) return '/default-business.jpg';
-  if (path.startsWith('http')) return path;
-  return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`;
+const filteredBusinesses = computed(() => {
+  let list = businesses.value
+  if (selectedCategory.value !== 'Todas')
+    list = list.filter(b => b.category === selectedCategory.value)
+  if (selectedArea.value !== 'Todas')
+    list = list.filter(b => b.area === selectedArea.value)
+  if (searchQuery.value.trim())
+    list = list.filter(b =>
+      b.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+      (b.area && b.area.toLowerCase().includes(searchQuery.value.toLowerCase())) ||
+      (b.category && b.category.toLowerCase().includes(searchQuery.value.toLowerCase()))
+    )
+  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
+  return businesses.value.slice(2)
+})
+
+const isFiltering = computed(() =>
+  selectedCategory.value !== 'Todas' || selectedArea.value !== 'Todas' || searchQuery.value.trim() !== ''
+)
+
+function handleExplore(biz: Business) {
+  analyticsService.logEvent({ event_name: 'promo_click', item_id: biz.name, properties: { business_id: biz.id } })
+  router.push('/business/' + biz.id)
 }
 
-function getCategoryIcon(category: string) {
-  const icons: Record<string, string> = {
-    'Restaurante': 'restaurant',
-    'Turismo': 'landscape',
-    'Bebidas': 'local_bar',
-    'Comercio': 'store',
-    'Hotel': 'hotel',
-    'Café': 'local_cafe'
-  };
-  return icons[category] || 'place';
+function getImageUrl(path?: string | null) {
+  if (!path) return `https://ui-avatars.com/api/?name=Negocio&background=fee715&color=101820&size=200&bold=true`
+  if (path.startsWith('http')) return path
+  return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
+}
+
+function resetFilters() {
+  selectedCategory.value = 'Todas'
+  selectedArea.value = 'Todas'
+  searchQuery.value = ''
 }
 </script>
 
 <template>
-  <div class="discover-view">
+  <div class="disc-page">
 
-    <!-- Barra de búsqueda -->
-    <div class="search-section">
-      <div class="search-bar">
-        <span class="material-icons search-icon-inner">search</span>
-        <input 
+    <!-- ── HEADER ── -->
+    <header class="disc-header">
+      <div class="header-body">
+        <h1 class="disc-title">¡Explora Chiriquí! 🌿</h1>
+        <p class="disc-sub">Descubre los mejores lugares cerca de ti</p>
+      </div>
+
+      <!-- Búsqueda -->
+      <div class="search-wrap">
+        <span class="material-icons search-icon">search</span>
+        <input
           v-model="searchQuery"
-          class="search-input"
-          :placeholder="t('discover.searchPlaceholder')"
           type="text"
+          class="search-input"
+          placeholder="Buscar restaurantes, hoteles..."
         />
-        <button v-if="searchQuery" class="clear-search-btn" @click="searchQuery = ''">
+        <button v-if="searchQuery" class="search-clear" @click="searchQuery = ''">
           <span class="material-icons">close</span>
         </button>
       </div>
+    </header>
+
+    <!-- ── CHIPS DE CATEGORÍA ── -->
+    <div class="cat-chips-wrap">
+      <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"
+        >
+          {{ catEmoji(cat) }} {{ cat }}
+        </button>
+      </div>
     </div>
 
-    <!-- Filtros de Región y Categoría -->
-    <div class="filters-row">
-      <div class="filter-card">
-        <div class="filter-label-row">
-          <span class="material-icons filter-icon">location_on</span>
-          <span class="filter-label-text">REGIÓN</span>
-        </div>
-        <select v-model="selectedArea" class="filter-select">
-          <option value="Todas">{{ t('discover.allAreas') }}</option>
-          <option v-for="area in areas" :key="area" :value="area">{{ area }}</option>
-        </select>
-      </div>
-
-      <div class="filter-card">
-        <div class="filter-label-row">
-          <span class="material-icons filter-icon">category</span>
-          <span class="filter-label-text">CATEGORÍA</span>
-        </div>
-        <select v-model="selectedCategory" class="filter-select">
-          <option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
-        </select>
-      </div>
+    <!-- ── LOADING ── -->
+    <div v-if="isLoading" class="state-center">
+      <div class="spinner"></div>
+      <p>Cargando lugares...</p>
     </div>
 
-    <main class="discover-main">
-      <!-- Loading -->
-      <div v-if="isLoading" class="state-container">
-        <div class="spinner"></div>
-        <p class="state-text">Sincronizando con SIBU...</p>
-      </div>
+    <template v-else>
 
-      <!-- Vacío -->
-      <div v-else-if="filteredBusinesses.length === 0" class="state-container">
-        <div class="empty-box">
-          <span class="material-icons empty-icon">search_off</span>
-          <h3 class="empty-title">Sin resultados</h3>
-          <p class="empty-desc">La búsqueda no devolvió resultados.</p>
-          <button 
-            @click="selectedArea = 'Todas'; selectedCategory = 'Todas'; searchQuery = ''" 
-            class="reset-btn"
+      <!-- ══ 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"
           >
-            REINICIAR FILTROS
+            <span class="material-icons area-chip-icon">location_on</span>
+            {{ area }}
           </button>
         </div>
-      </div>
 
-      <!-- Grid de negocios -->
-      <TransitionGroup 
-        v-else 
-        name="fade" 
-        tag="div" 
-        class="business-grid"
-      >
-        <div 
-          v-for="biz in filteredBusinesses" 
-          :key="biz.id" 
-          class="business-card"
-          @click="handleExplore(biz)"
-        >
-          <div class="card-image-wrapper">
-            <img :src="getImageUrl(biz.image_url)" :alt="biz.name" class="card-img" />
-            <div class="card-gradient"></div>
-            <div class="card-category-badge">
-              <span class="material-icons category-badge-icon">
-                {{ getCategoryIcon(biz.category || '') }}
+        <!-- Contador de resultados -->
+        <div class="results-bar">
+          <span class="results-count">
+            {{ filteredBusinesses.length }}
+            {{ filteredBusinesses.length === 1 ? 'lugar' : 'lugares' }}
+            <template v-if="selectedCategory !== 'Todas'"> en {{ selectedCategory }}</template>
+            <template v-if="selectedArea !== 'Todas'"> · {{ selectedArea }}</template>
+          </span>
+          <button class="reset-btn" @click="resetFilters">
+            <span class="material-icons">refresh</span>
+            Limpiar
+          </button>
+        </div>
+
+        <!-- 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"
+            class="biz-card"
+            @click="handleExplore(biz)"
+          >
+            <div class="biz-img-wrap">
+              <img :src="getImageUrl(biz.image_url)" :alt="biz.name" class="biz-img" />
+              <div class="biz-fav">
+                <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
+              </div>
+              <span class="biz-cat-badge">
+                <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
+                {{ biz.category }}
               </span>
             </div>
-            <div class="card-favorite-btn">
-              <FavoriteButton 
-                item-type="business" 
-                :item-id="biz.id" 
-                :item-name="biz.name"
-                :item-image="biz.image_url || undefined"
-              />
+            <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>
-          <div class="card-body">
-            <h3 class="card-name">{{ biz.name }}</h3>
-            <div class="card-meta">
-              <span class="material-icons card-meta-icon">near_me</span>
-              <span class="card-area">{{ biz.area }}</span>
+        </TransitionGroup>
+
+        <!-- Vacío -->
+        <div v-else class="empty-state">
+          <span class="material-icons empty-icon">search_off</span>
+          <h2 class="empty-title">Sin resultados</h2>
+          <p class="empty-sub">No encontramos lugares con ese filtro.</p>
+          <button class="cta-btn" @click="resetFilters">Ver todos los lugares</button>
+        </div>
+
+        <!-- CTA al final -->
+        <div v-if="filteredBusinesses.length > 0" class="more-card" @click="resetFilters">
+          <p class="more-card-title">¿Buscas algo más?</p>
+          <p class="more-card-sub">Explora sin filtros para descubrir todo</p>
+          <button class="cta-btn">Ver todo</button>
+        </div>
+      </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">🗺️ Por Área</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 }}
+            </button>
+          </div>
+        </div>
+
+        <!-- DESTACADOS -->
+        <div v-if="featuredBusinesses.length > 0" class="featured-section">
+          <p class="section-label">✨ Destacados</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)" :alt="biz.name" class="featured-img" />
+              <div class="featured-gradient"></div>
+              <div class="featured-fav">
+                <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
+              </div>
+              <div class="featured-info">
+                <span class="featured-cat">
+                  <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
+                  {{ 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>
-      </TransitionGroup>
-    </main>
+
+        <!-- TODOS LOS LUGARES -->
+        <div v-if="gridBusinesses.length > 0" class="all-section">
+          <p class="section-label">🏙️ Todos los lugares</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)" :alt="biz.name" class="biz-img" />
+                <div class="biz-fav">
+                  <FavoriteButton item-type="business" :item-id="biz.id" :item-name="biz.name" :item-image="biz.image_url || undefined" />
+                </div>
+                <span class="biz-cat-badge">
+                  <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
+                  {{ 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>
+        </div>
+
+        <div v-if="businesses.length === 0" class="empty-state">
+          <span class="material-icons empty-icon">storefront</span>
+          <h2 class="empty-title">Sin lugares aún</h2>
+          <p class="empty-sub">Pronto habrá negocios y lugares turísticos disponibles aquí.</p>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
-.discover-view {
+/* ═══════════════════════════════════════════
+   BASE
+═══════════════════════════════════════════ */
+.disc-page {
+  min-height: 100vh;
+  background: var(--bg-primary);
+  padding-bottom: 100px;
+}
+
+/* ═══════════════════════════════════════════
+   HEADER
+═══════════════════════════════════════════ */
+.disc-header {
+  padding: 1.25rem 1.25rem 0.75rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
   display: flex;
   flex-direction: column;
-  min-height: 100%;
-  background: var(--bg-primary);
+  gap: 0.875rem;
+}
+
+.disc-title {
+  font-size: 1.625rem;
+  font-weight: 900;
   color: var(--text-primary);
-  padding-bottom: 6rem;
+  margin: 0;
+  letter-spacing: -0.02em;
 }
 
-/* ─── Búsqueda ─── */
-.search-section {
-  padding: 1rem 1.25rem 0.5rem;
+.disc-sub {
+  margin: 0.2rem 0 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  font-weight: 500;
 }
 
-.search-bar {
+/* Search */
+.search-wrap {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  padding: 0.5rem 0.75rem;
+  gap: 0.625rem;
+  background: var(--bg-primary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.875rem;
+  padding: 0.75rem 1rem;
   transition: border-color 0.2s;
 }
 
-.search-bar:focus-within {
-  border-color: var(--active-color);
-}
+.search-wrap:focus-within { border-color: var(--active-color); }
 
-.search-icon-inner {
-  color: var(--text-secondary);
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
+.search-icon { font-size: 1.25rem; color: var(--active-color); flex-shrink: 0; }
 
 .search-input {
   flex: 1;
-  background: transparent;
   border: none;
-  outline: none;
-  color: var(--text-primary);
+  background: transparent;
   font-size: 0.9375rem;
-  font-weight: 500;
+  color: var(--text-primary);
   font-family: inherit;
+  outline: none;
 }
 
-.search-input::placeholder {
-  color: var(--text-secondary);
-}
+.search-input::placeholder { color: var(--text-secondary); }
 
-.clear-search-btn {
+.search-clear {
   background: none;
   border: none;
-  cursor: pointer;
   color: var(--text-secondary);
+  cursor: pointer;
   display: flex;
   align-items: center;
   padding: 0;
 }
 
-/* ─── Filtros ─── */
-.filters-row {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.75rem 1.25rem;
-}
+.search-clear .material-icons { font-size: 1.125rem; }
 
-.filter-card {
-  flex: 1;
+/* ═══════════════════════════════════════════
+   CHIPS DE CATEGORÍA
+═══════════════════════════════════════════ */
+.cat-chips-wrap {
   background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  padding: 0.875rem 1rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  cursor: pointer;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border-color);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
-.filter-label-row {
+.cat-chips-scroll {
   display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  padding: 0 1.25rem;
+  scrollbar-width: none;
+}
+
+.cat-chips-scroll::-webkit-scrollbar { display: none; }
+
+.cat-chip {
+  display: inline-flex;
   align-items: center;
-  gap: 0.375rem;
-}
-
-.filter-icon {
-  font-size: 1rem;
-  color: var(--active-color);
-}
-
-.filter-label-text {
-  font-size: 0.625rem;
-  font-weight: 800;
+  gap: 0.25rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 99px;
+  border: 1.5px solid var(--border-color);
+  background: var(--bg-primary);
   color: var(--text-secondary);
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.filter-select {
-  background: transparent;
-  border: none;
-  outline: none;
-  color: var(--text-primary);
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 700;
   font-family: inherit;
   cursor: pointer;
-  padding: 0;
-  width: 100%;
+  white-space: nowrap;
+  flex-shrink: 0;
+  transition: all 0.18s;
 }
 
-.filter-select option {
-  background: var(--bg-secondary);
+.cat-chip:hover { border-color: var(--active-color); color: var(--text-primary); }
+
+.cat-chip--active {
+  background: var(--active-color);
+  border-color: var(--active-color);
+  color: #101820;
+}
+
+/* ═══════════════════════════════════════════
+   CONTENIDO
+═══════════════════════════════════════════ */
+.disc-content {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
+  max-width: 720px;
+  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;
 }
 
-/* ─── Estados ─── */
-.discover-main {
-  flex: 1;
-  padding: 0 1.25rem;
-}
+/* ═══════════════════════════════════════════
+   CHIPS DE ÁREA
+═══════════════════════════════════════════ */
+.area-section { display: flex; flex-direction: column; }
 
-.state-container {
+.area-chips {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 5rem 1rem;
-  gap: 1rem;
-}
-
-.spinner {
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 3px solid var(--border-color);
-  border-top-color: var(--active-color);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin { to { transform: rotate(360deg); } }
-
-.state-text {
-  color: var(--text-secondary);
-  font-weight: 700;
-  font-size: 0.75rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-}
-
-.empty-box {
-  background: var(--bg-secondary);
-  border: 1.5px dashed var(--border-color);
-  border-radius: 1.5rem;
-  padding: 2.5rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
-.empty-icon {
-  font-size: 3rem;
+.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);
-  opacity: 0.4;
-  margin-bottom: 0.5rem;
-}
-
-.empty-title {
-  font-size: 1.125rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  margin: 0;
-}
-
-.empty-desc {
-  color: var(--text-secondary);
-  font-size: 0.875rem;
-  margin: 0;
-}
-
-.reset-btn {
-  margin-top: 0.75rem;
-  background: var(--active-color);
-  color: #101820;
-  border: none;
-  border-radius: 0.75rem;
-  padding: 0.625rem 1.5rem;
-  font-weight: 900;
-  font-size: 0.75rem;
-  letter-spacing: 0.1em;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: inherit;
   cursor: pointer;
-  transition: transform 0.15s;
+  transition: all 0.18s;
 }
 
-.reset-btn:active { transform: scale(0.97); }
+.area-chip-icon { font-size: 0.875rem; }
 
-/* ─── Grid ─── */
-.business-grid {
+.area-chip:hover { border-color: var(--active-color); color: var(--text-primary); }
+
+.area-chip--active {
+  background: var(--active-color);
+  border-color: var(--active-color);
+  color: #101820;
+}
+
+/* ═══════════════════════════════════════════
+   SECCIÓN DESTACADOS
+═══════════════════════════════════════════ */
+.featured-section { display: flex; flex-direction: column; }
+
+.featured-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.875rem;
-  padding-bottom: 1rem;
+  gap: 0.75rem;
 }
 
-.business-card {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border-color);
-  border-radius: 1.25rem;
+.featured-card {
+  position: relative;
+  border-radius: 1.125rem;
   overflow: hidden;
   cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.15s, box-shadow 0.15s;
+  aspect-ratio: 3/4;
+  background: var(--bg-secondary);
+  transition: transform 0.2s;
 }
 
-.business-card:active {
-  transform: scale(0.97);
-}
+.featured-card:hover { transform: scale(0.98); }
 
-.card-image-wrapper {
-  position: relative;
-  height: 10rem;
-}
-
-.card-img {
+.featured-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-.card-gradient {
+.featured-gradient {
   position: absolute;
   inset: 0;
-  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 50%);
+  background: linear-gradient(to top, rgba(0,0,0,0.75) 40%, transparent 70%);
 }
 
-.card-category-badge {
-  position: absolute;
-  top: 0.625rem;
-  left: 0.625rem;
-  background: rgba(0,0,0,0.55);
-  backdrop-filter: blur(8px);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 0.625rem;
-  padding: 0.3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.category-badge-icon {
-  font-size: 1rem;
-  color: var(--active-color);
-}
-
-.card-favorite-btn {
+.featured-fav {
   position: absolute;
   top: 0.625rem;
   right: 0.625rem;
+  z-index: 2;
 }
 
-.card-body {
-  padding: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  flex: 1;
+.featured-info {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.875rem;
+  z-index: 2;
 }
 
-.card-name {
-  font-size: 0.9rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  margin: 0;
-  line-height: 1.3;
-}
-
-.card-meta {
-  display: flex;
+.featured-cat {
+  display: inline-flex;
   align-items: center;
   gap: 0.25rem;
-  margin-top: auto;
+  background: var(--active-color);
+  color: #101820;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  padding: 0.15rem 0.5rem;
+  border-radius: 99px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.375rem;
 }
 
-.card-meta-icon {
-  font-size: 0.875rem;
-  color: var(--active-color);
+.featured-name {
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 900;
+  color: #ffffff;
+  line-height: 1.2;
 }
 
-.card-area {
-  font-size: 0.75rem;
+.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(-4px);
+  border-color: var(--active-color);
+}
+
+.biz-img-wrap {
+  position: relative;
+  aspect-ratio: 16/10;
+  overflow: hidden;
+}
+
+.biz-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.biz-fav {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}
+
+.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.75rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.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);
 }
 
-/* ─── Transiciones ─── */
-.fade-move,
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+.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;
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-  transform: translateY(16px);
+.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;
 }
 
-.fade-leave-active {
-  position: absolute;
+.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: 3.5rem;
+  color: var(--text-secondary);
+  opacity: 0.3;
+  margin-bottom: 1rem;
+}
+
+.empty-title {
+  font-size: 1.25rem;
+  font-weight: 900;
+  color: var(--text-primary);
+  margin: 0 0 0.5rem;
+}
+
+.empty-sub {
+  font-size: 0.9375rem;
+  color: var(--text-secondary);
+  margin: 0 0 1.5rem;
+  line-height: 1.5;
+}
+
+/* ═══════════════════════════════════════════
+   LOADING / SPINNER
+═══════════════════════════════════════════ */
+.state-center {
+  display: flex;
+  flex-direction: column;
+  align-items: 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); } }
+
+/* ═══════════════════════════════════════════
+   TRANSICIÓN DE TARJETAS
+═══════════════════════════════════════════ */
+.fade-enter-active { transition: opacity 0.25s ease, transform 0.25s ease; }
+.fade-enter-from   { opacity: 0; transform: translateY(8px); }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE
+═══════════════════════════════════════════ */
+@media (min-width: 560px) {
+  .biz-grid { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 360px) {
+  .featured-grid { grid-template-columns: 1fr; }
+  .featured-card { aspect-ratio: 4/3; }
 }
 </style>