From a1ba74cd49b94c0d106c82b2e1f2db5366c8a936 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 22 Feb 2026 17:41:50 -0500
Subject: [PATCH] fix: remove duplicate headers, fix i18n keys, unify theme
 colors in Discover and Schedules views

- DiscoverView: removed internal header (duplicate of AppHeader), replaced Tailwind hardcoded colors with CSS theme variables (--bg-primary, --active-color, etc.)
- SchedulesView: removed internal header (duplicate of AppHeader), replaced Tailwind hardcoded colors with CSS theme variables
- es.json: add missing keys discover.searchPlaceholder, schedules.placeholder, schedules.upcoming, schedules.noSchedules, schedules.types
- en.json: same missing keys added for English
---
 frontend/src/i18n/locales/en.json    |  11 +-
 frontend/src/i18n/locales/es.json    |  11 +-
 frontend/src/views/DiscoverView.vue  | 446 +++++++++++++++++++++-----
 frontend/src/views/SchedulesView.vue | 448 ++++++++++++++++++++++-----
 4 files changed, 760 insertions(+), 156 deletions(-)

diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 0a6c5d5..5b0bc64 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -70,10 +70,18 @@
     "loadingRoutes": "Loading routes...",
     "noRoutesAvailable": "No routes available",
     "selectRoute": "Select a route",
+    "placeholder": "Choose a route...",
+    "upcoming": "Upcoming departures",
+    "noSchedules": "No departures scheduled for today",
     "route": "Route",
     "schedules": "schedules",
     "schedule": "schedule",
-    "departureTime": "Departure time"
+    "departureTime": "Departure time",
+    "types": {
+      "weekday": "Weekday",
+      "weekend": "Weekend",
+      "holiday": "Holiday"
+    }
   },
   "coupons": {
     "title": "Offers",
@@ -134,6 +142,7 @@
   "discover": {
     "title": "Discover",
     "subtitle": "Explore the best places in Chiriqui",
+    "searchPlaceholder": "Explore the best places in Chiriqui",
     "filterLabel": "Filter by area:",
     "allAreas": "All",
     "loading": "Searching for treasures...",
diff --git a/frontend/src/i18n/locales/es.json b/frontend/src/i18n/locales/es.json
index 0600133..cd0bf6e 100644
--- a/frontend/src/i18n/locales/es.json
+++ b/frontend/src/i18n/locales/es.json
@@ -71,10 +71,18 @@
     "loadingRoutes": "Cargando rutas...",
     "noRoutesAvailable": "No hay rutas disponibles",
     "selectRoute": "Seleccionar una ruta",
+    "placeholder": "Elige una ruta...",
+    "upcoming": "Próximas salidas",
+    "noSchedules": "No hay salidas programadas para hoy",
     "route": "Ruta",
     "schedules": "horarios",
     "schedule": "horario",
-    "departureTime": "Hora de salida"
+    "departureTime": "Hora de salida",
+    "types": {
+      "weekday": "Entre semana",
+      "weekend": "Fin de semana",
+      "holiday": "Festivo"
+    }
   },
   "coupons": {
     "title": "Ofertas",
@@ -135,6 +143,7 @@
   "discover": {
     "title": "Descubrir",
     "subtitle": "Explora los mejores lugares de Chiriquí",
+    "searchPlaceholder": "Explora los mejores lugares en Chiriquí",
     "filterLabel": "Filtrar por área:",
     "allAreas": "Todas",
     "loading": "Buscando tesoros...",
diff --git a/frontend/src/views/DiscoverView.vue b/frontend/src/views/DiscoverView.vue
index 14fff30..68655f0 100644
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@@ -89,94 +89,92 @@ function getCategoryIcon(category: string) {
 </script>
 
 <template>
-  <div class="discover-view bg-white dark:bg-zinc-950 text-slate-900 dark:text-gray-200 min-h-screen pb-32">
-    <!-- Header Area -->
-    <header class="bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md px-6 pt-12 pb-4 sticky top-0 z-50 border-b border-slate-100 dark:border-zinc-800">
-      <div class="flex justify-between items-center mb-2">
-        <button @click="router.back()" class="material-icons text-3xl font-bold cursor-pointer dark:text-white">arrow_back</button>
-        <h1 class="text-2xl font-extrabold tracking-tighter dark:text-white uppercase italic">SIBU</h1>
-        <div class="w-8"></div>
-      </div>
-    </header>
+  <div class="discover-view">
 
-    <main class="px-5 pt-6">
-      <!-- Search Bar -->
-      <div class="mb-6">
-        <div class="relative flex items-center bg-slate-50 dark:bg-zinc-900 rounded-2xl shadow-sm p-1 border border-slate-100 dark:border-zinc-800">
-          <div class="p-3">
-            <span class="material-icons text-slate-400 dark:text-gray-500">search</span>
-          </div>
-          <input 
-            v-model="searchQuery"
-            class="w-full bg-transparent border-none focus:ring-0 text-slate-900 dark:text-gray-200 font-medium placeholder:text-slate-400 dark:placeholder:text-gray-500 text-[15px]" 
-            :placeholder="t('discover.searchPlaceholder') || 'Explora los mejores lugares en Chiriquí'" 
-            type="text"
-          />
+    <!-- Barra de búsqueda -->
+    <div class="search-section">
+      <div class="search-bar">
+        <span class="material-icons search-icon-inner">search</span>
+        <input 
+          v-model="searchQuery"
+          class="search-input"
+          :placeholder="t('discover.searchPlaceholder')"
+          type="text"
+        />
+        <button v-if="searchQuery" class="clear-search-btn" @click="searchQuery = ''">
+          <span class="material-icons">close</span>
+        </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>
 
-      <!-- Region & Category Selectors -->
-      <div class="flex gap-3 mb-8">
-        <div class="flex-1 bg-slate-50 dark:bg-zinc-900 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col gap-1">
-          <div class="flex items-center gap-2">
-            <span class="material-icons text-blue-500 text-[18px] font-bold">location_on</span>
-            <span class="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">Región</span>
-          </div>
-          <select v-model="selectedArea" class="bg-transparent border-none focus:ring-0 p-0 font-bold text-slate-900 dark:text-white text-sm appearance-none cursor-pointer">
-            <option value="Todas">{{ t('discover.allAreas') }}</option>
-            <option v-for="area in areas" :key="area" :value="area">{{ area }}</option>
-          </select>
-        </div>
-        <div class="flex-1 bg-slate-50 dark:bg-zinc-900 p-4 rounded-2xl shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col gap-1">
-          <div class="flex items-center gap-2">
-            <span class="material-icons text-blue-500 text-[18px] font-bold">category</span>
-            <span class="text-[10px] font-bold text-slate-400 dark:text-gray-500 uppercase tracking-widest">Categoría</span>
-          </div>
-          <select v-model="selectedCategory" class="bg-transparent border-none focus:ring-0 p-0 font-bold text-slate-900 dark:text-white text-sm appearance-none cursor-pointer">
-            <option v-for="cat in categories" :key="cat" :value="cat">{{ cat }}</option>
-          </select>
+      <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>
+    </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>
 
-      <!-- Loading State -->
-      <div v-if="isLoading" class="flex flex-col items-center justify-center py-20">
-        <div class="w-10 h-10 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin mb-4"></div>
-        <p class="text-slate-500 dark:text-gray-400 font-bold tracking-widest uppercase text-xs">Sincronizando con SIBU...</p>
-      </div>
-
-      <!-- Empty State -->
-      <div v-else-if="filteredBusinesses.length === 0" class="text-center py-20">
-        <div class="bg-slate-50 dark:bg-zinc-900 rounded-[2rem] p-10 border border-dashed border-slate-200 dark:border-zinc-800">
-          <span class="material-icons text-slate-300 dark:text-gray-600 text-5xl mb-4">search_off</span>
-          <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">Sin resultados</h3>
-          <p class="text-slate-500 dark:text-gray-400 mb-6">La búsqueda no devolvió datos en esta frecuencia.</p>
-          <button @click="selectedArea = 'Todas'; selectedCategory = 'Todas'; searchQuery = ''" class="bg-blue-500 text-white px-8 py-3 rounded-xl font-black uppercase text-xs tracking-widest active:scale-95 transition-all">
-            REINICIAR SENSORES
+      <!-- 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"
+          >
+            REINICIAR FILTROS
           </button>
         </div>
       </div>
 
-      <!-- Business Grid -->
+      <!-- Grid de negocios -->
       <TransitionGroup 
         v-else 
         name="fade" 
         tag="div" 
-        class="grid grid-cols-2 gap-4"
+        class="business-grid"
       >
-        <div v-for="biz in filteredBusinesses" 
-             :key="biz.id" 
-             class="bg-slate-50 dark:bg-zinc-900 rounded-[2rem] overflow-hidden shadow-sm border border-slate-100 dark:border-zinc-800 flex flex-col active:scale-95 transition-all cursor-pointer"
-             @click="handleExplore(biz)"
+        <div 
+          v-for="biz in filteredBusinesses" 
+          :key="biz.id" 
+          class="business-card"
+          @click="handleExplore(biz)"
         >
-          <div class="relative h-44">
-            <img :src="getImageUrl(biz.image_url)" alt="" class="w-full h-full object-cover">
-            <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-transparent"></div>
-            <div class="absolute top-3 left-3 bg-black/60 backdrop-blur-md p-1.5 rounded-xl border border-white/10">
-              <span class="material-icons text-blue-400 text-[18px] flex items-center justify-center">
+          <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 || '') }}
               </span>
             </div>
-            <div class="absolute top-3 right-3">
+            <div class="card-favorite-btn">
               <FavoriteButton 
                 item-type="business" 
                 :item-id="biz.id" 
@@ -185,13 +183,11 @@ function getCategoryIcon(category: string) {
               />
             </div>
           </div>
-          <div class="p-4 flex flex-col flex-grow">
-            <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-tight mb-2">{{ biz.name }}</h3>
-            <div class="mt-auto flex items-center justify-between">
-              <div class="flex items-center gap-1">
-                <span class="material-icons text-blue-400 text-[14px]">near_me</span>
-                <span class="text-xs font-semibold text-slate-500 dark:text-gray-500">{{ biz.area }}</span>
-              </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>
             </div>
           </div>
         </div>
@@ -202,19 +198,313 @@ function getCategoryIcon(category: string) {
 
 <style scoped>
 .discover-view {
-  font-family: 'Plus Jakarta Sans', sans-serif;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  padding-bottom: 6rem;
 }
 
+/* ─── Búsqueda ─── */
+.search-section {
+  padding: 1rem 1.25rem 0.5rem;
+}
+
+.search-bar {
+  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;
+  transition: border-color 0.2s;
+}
+
+.search-bar:focus-within {
+  border-color: var(--active-color);
+}
+
+.search-icon-inner {
+  color: var(--text-secondary);
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  font-family: inherit;
+}
+
+.search-input::placeholder {
+  color: var(--text-secondary);
+}
+
+.clear-search-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+/* ─── Filtros ─── */
+.filters-row {
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+}
+
+.filter-card {
+  flex: 1;
+  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;
+}
+
+.filter-label-row {
+  display: 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;
+  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-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0;
+  width: 100%;
+}
+
+.filter-select option {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+/* ─── Estados ─── */
+.discover-main {
+  flex: 1;
+  padding: 0 1.25rem;
+}
+
+.state-container {
+  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;
+  gap: 0.5rem;
+}
+
+.empty-icon {
+  font-size: 3rem;
+  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;
+  cursor: pointer;
+  transition: transform 0.15s;
+}
+
+.reset-btn:active { transform: scale(0.97); }
+
+/* ─── Grid ─── */
+.business-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.875rem;
+  padding-bottom: 1rem;
+}
+
+.business-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1.25rem;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.business-card:active {
+  transform: scale(0.97);
+}
+
+.card-image-wrapper {
+  position: relative;
+  height: 10rem;
+}
+
+.card-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 50%);
+}
+
+.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 {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+}
+
+.card-body {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  flex: 1;
+}
+
+.card-name {
+  font-size: 0.9rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-top: auto;
+}
+
+.card-meta-icon {
+  font-size: 0.875rem;
+  color: var(--active-color);
+}
+
+.card-area {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* ─── Transiciones ─── */
 .fade-move,
 .fade-enter-active,
 .fade-leave-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
-  transform: translateY(20px);
+  transform: translateY(16px);
 }
 
 .fade-leave-active {
diff --git a/frontend/src/views/SchedulesView.vue b/frontend/src/views/SchedulesView.vue
index 5b1f155..40b6ce1 100644
--- a/frontend/src/views/SchedulesView.vue
+++ b/frontend/src/views/SchedulesView.vue
@@ -54,7 +54,6 @@ function selectRouteAndClose(routeId: string, routeName: string) {
     item_id: routeName,
     properties: { route_id: routeId }
   })
-  
   routeStore.selectRoute(routeId, routeName)
   scheduleStore.loadRouteSchedules(routeId)
 }
@@ -70,23 +69,20 @@ function goToMap() {
 </script>
 
 <template>
-  <div class="schedules-view-redesign bg-slate-50 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 min-h-screen">
-    <!-- Header Sticky con Blur -->
-    <header class="sticky top-0 z-50 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md px-6 pt-10 pb-4 border-b border-slate-200 dark:border-zinc-800">
-      <div class="flex items-center justify-between mb-6">
-        <button @click="router.back()" class="w-10 h-10 flex items-center justify-center -ml-2 rounded-full active:bg-slate-100 dark:active:bg-zinc-800 transition-colors">
-          <span class="material-icons text-2xl">arrow_back</span>
-        </button>
-        <h1 class="text-xl font-bold tracking-tight">{{ t('schedules.title') }}</h1>
-        <div class="w-10"></div> 
+  <div class="schedules-view">
+
+    <!-- Selector de Línea -->
+    <div class="route-selector-section">
+      <div v-if="routeStore.isLoadingRoutes" class="state-row">
+        <div class="spinner-sm"></div>
+        <span class="state-label">{{ t('schedules.loadingRoutes') }}</span>
       </div>
-      
-      <!-- Selector de Línea -->
-      <div class="relative group" v-if="!routeStore.isLoadingRoutes && routeStore.allRoutes.length > 0">
-        <label class="block text-[10px] font-bold text-slate-400 dark:text-zinc-500 uppercase tracking-widest mb-1.5 ml-1">{{ t('schedules.selectRoute') || 'Seleccionar Línea' }}</label>
-        <div class="relative">
+
+      <div v-else-if="routeStore.allRoutes.length > 0" class="selector-wrapper">
+        <label class="selector-label">{{ t('schedules.selectRoute') || 'Seleccionar Línea' }}</label>
+        <div class="select-container">
           <select 
-            class="w-full pl-4 pr-12 py-4 bg-slate-50 dark:bg-zinc-800 border-2 border-transparent focus:border-primary focus:ring-0 rounded-2xl text-lg font-bold transition-all cursor-pointer appearance-none" 
+            class="route-select"
             id="route-select"
             :value="routeStore.selectedRouteId"
             @change="e => {
@@ -98,67 +94,66 @@ function goToMap() {
             }"
           >
             <option value="" disabled>{{ t('schedules.placeholder') || 'Elige una ruta...' }}</option>
-            <option v-for="route in routeStore.allRoutes" :key="route.id" :value="route.id">
-              {{ route.name }}
+            <option v-for="r in routeStore.allRoutes" :key="r.id" :value="r.id">
+              {{ r.name }}
             </option>
           </select>
-          <span class="material-icons absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none">expand_more</span>
+          <span class="material-icons select-chevron">expand_more</span>
         </div>
       </div>
-    </header>
+    </div>
 
-    <main class="flex-1 px-6 pt-6 pb-32">
-      <div v-if="routeStore.isLoadingRoutes" class="flex flex-col items-center justify-center py-20">
-        <div class="w-12 h-12 border-4 border-primary/20 border-t-primary rounded-full animate-spin mb-4"></div>
-        <p class="text-slate-500 dark:text-zinc-400 font-medium">{{ t('schedules.loadingRoutes') }}</p>
+    <!-- Contenido principal -->
+    <main class="schedules-main">
+
+      <!-- Sin ruta seleccionada -->
+      <div v-if="!routeStore.selectedRouteId && !routeStore.isLoadingRoutes" class="empty-state">
+        <span class="material-icons empty-icon">route</span>
+        <p class="empty-text">Selecciona una ruta para ver sus horarios</p>
       </div>
 
-      <div v-else-if="!routeStore.selectedRouteId" class="flex flex-col items-center justify-center py-20 text-center">
-        <span class="material-icons text-6xl text-slate-200 dark:text-zinc-800 mb-4">route</span>
-        <p class="text-slate-500 dark:text-zinc-400 font-medium italic">Selecciona una ruta para ver sus horarios</p>
-      </div>
-
-      <template v-else>
-        <!-- Estado Próximas Salidas -->
-        <div class="flex items-center justify-between mb-6">
-          <h2 class="text-sm font-semibold text-slate-500 dark:text-zinc-400">{{ t('schedules.upcoming') || 'Próximas salidas' }}</h2>
-          <div class="flex items-center gap-1.5 px-2.5 py-1 bg-[#fee715]/10 rounded-full">
-            <span class="w-1.5 h-1.5 rounded-full bg-[#fee715] animate-pulse"></span>
-            <span class="text-[10px] font-bold text-slate-700 dark:text-[#fee715] tracking-wide">EN VIVO</span>
+      <template v-else-if="routeStore.selectedRouteId">
+        <!-- Encabezado de sección -->
+        <div class="section-header">
+          <h2 class="section-title">{{ t('schedules.upcoming') || 'Próximas salidas' }}</h2>
+          <div class="live-badge">
+            <span class="live-dot"></span>
+            <span class="live-text">EN VIVO</span>
           </div>
         </div>
 
-        <!-- Listado de Horarios -->
-        <div v-if="scheduleStore.isLoading" class="flex justify-center py-10">
-          <div class="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin"></div>
+        <!-- Cargando horarios -->
+        <div v-if="scheduleStore.isLoading" class="state-row center">
+          <div class="spinner-sm"></div>
         </div>
 
-        <div v-else-if="scheduleStore.schedules.length === 0" class="bg-white dark:bg-zinc-800/50 p-8 rounded-2xl border border-slate-100 dark:border-zinc-800 text-center">
-          <span class="material-icons text-slate-300 dark:text-zinc-700 text-4xl mb-2">event_busy</span>
-          <p class="text-slate-500 dark:text-zinc-400">{{ t('schedules.noSchedules') || 'No hay salidas programadas para hoy' }}</p>
+        <!-- Sin horarios -->
+        <div v-else-if="scheduleStore.schedules.length === 0" class="no-schedules-card">
+          <span class="material-icons no-schedule-icon">event_busy</span>
+          <p class="no-schedule-text">{{ t('schedules.noSchedules') || 'No hay salidas programadas para hoy' }}</p>
         </div>
 
-        <div v-else class="space-y-4">
+        <!-- Lista de horarios -->
+        <div v-else class="schedules-list">
           <div 
             v-for="schedule in scheduleStore.schedules" 
             :key="schedule.id" 
-            class="p-4 bg-white dark:bg-zinc-800/50 border border-slate-100 dark:border-zinc-800 rounded-2xl flex items-center justify-between hover:border-primary/50 transition-all shadow-sm"
+            class="schedule-card"
           >
-            <div class="flex items-center gap-4">
-              <div class="text-3xl font-extrabold tracking-tighter text-slate-900 dark:text-white">
+            <div class="schedule-left">
+              <div class="departure-time">
                 {{ formatTo12Hour(schedule.departure_time) }}
               </div>
-              <div class="h-8 w-px bg-slate-200 dark:bg-zinc-700"></div>
-              <div>
-                <p class="text-[10px] font-medium text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Línea</p>
-                <p class="font-bold text-slate-900 dark:text-white leading-tight">
-                  {{ routeStore.selectedRouteName }}
-                </p>
+              <div class="divider-v"></div>
+              <div class="schedule-info">
+                <p class="schedule-label">Línea</p>
+                <p class="schedule-route-name">{{ routeStore.selectedRouteName }}</p>
               </div>
             </div>
+
             <span 
-              class="px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-full"
-              :class="schedule.schedule_type === 'weekday' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : 'bg-slate-100 dark:bg-zinc-700 text-slate-500 dark:text-zinc-400'"
+              class="schedule-type-badge"
+              :class="schedule.schedule_type === 'weekday' ? 'badge-weekday' : 'badge-other'"
             >
               {{ t(`schedules.types.${schedule.schedule_type}`) || schedule.schedule_type }}
             </span>
@@ -167,48 +162,349 @@ function goToMap() {
       </template>
     </main>
 
-    <!-- Botón Flotante para ir al Mapa -->
-    <Transition name="fade">
+    <!-- Botón flotante: ir al mapa -->
+    <Transition name="fab">
       <button 
         v-if="routeStore.selectedRouteId"
         @click="goToMap"
-        class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-slate-900 rounded-full shadow-2xl flex items-center justify-center active:scale-95 transition-all z-40"
+        class="fab-map"
+        title="Ver en el mapa"
       >
-        <span class="material-icons text-3xl">map</span>
+        <span class="material-icons">map</span>
       </button>
     </Transition>
   </div>
 </template>
 
 <style scoped>
-.schedules-view-redesign {
-  font-family: 'Plus Jakarta Sans', sans-serif;
-  overflow-x: hidden;
+.schedules-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  padding-bottom: 6rem;
+  position: relative;
 }
 
-select {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 1rem center;
-  background-size: 1.25rem;
+/* ─── Selector de ruta ─── */
+.route-selector-section {
+  padding: 1rem 1.25rem 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-primary);
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease, transform 0.3s ease;
+.state-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
 }
 
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
+.state-row.center {
+  justify-content: center;
+  padding: 2.5rem 0;
 }
 
-/* Transiciones para la lista */
-.space-y-4 > * {
-  animation: slideUp 0.4s ease-out forwards;
+.state-label {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.selector-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.selector-label {
+  font-size: 0.625rem;
+  font-weight: 800;
+  color: var(--text-secondary);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding-left: 0.25rem;
+}
+
+.select-container {
+  position: relative;
+}
+
+.route-select {
+  width: 100%;
+  padding: 0.875rem 3rem 0.875rem 1rem;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 1rem;
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  appearance: none;
+  transition: border-color 0.2s;
+  outline: none;
+}
+
+.route-select:focus {
+  border-color: var(--active-color);
+}
+
+.route-select option {
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+}
+
+.select-chevron {
+  position: absolute;
+  right: 0.875rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+/* ─── Contenido ─── */
+.schedules-main {
+  flex: 1;
+  padding: 1rem 1.25rem;
+}
+
+/* ─── Estado vacío ─── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 5rem 1rem;
+  gap: 0.75rem;
+  text-align: center;
+}
+
+.empty-icon {
+  font-size: 4rem;
+  color: var(--border-color);
+}
+
+.empty-text {
+  color: var(--text-secondary);
+  font-size: 0.9375rem;
+  font-style: italic;
+  margin: 0;
+}
+
+/* ─── Encabezado sección ─── */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.section-title {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.live-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: rgba(254, 231, 21, 0.1);
+  border-radius: 999px;
+  padding: 0.25rem 0.625rem;
+}
+
+.live-dot {
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  background: var(--active-color);
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.live-text {
+  font-size: 0.625rem;
+  font-weight: 900;
+  color: var(--active-color);
+  letter-spacing: 0.08em;
+}
+
+/* ─── Sin horarios ─── */
+.no-schedules-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 2rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.no-schedule-icon {
+  font-size: 2.5rem;
+  color: var(--border-color);
+}
+
+.no-schedule-text {
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+/* ─── Lista de horarios ─── */
+.schedules-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.schedule-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: border-color 0.2s;
+  animation: slideUp 0.35s ease-out both;
+}
+
+.schedule-card:hover {
+  border-color: var(--active-color);
 }
 
 @keyframes slideUp {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.schedule-left {
+  display: flex;
+  align-items: center;
+  gap: 0.875rem;
+}
+
+.departure-time {
+  font-size: 1.75rem;
+  font-weight: 900;
+  color: var(--text-primary);
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.divider-v {
+  width: 1px;
+  height: 2rem;
+  background: var(--border-color);
+}
+
+.schedule-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.schedule-label {
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0;
+}
+
+.schedule-route-name {
+  font-size: 0.9375rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+  line-height: 1.2;
+}
+
+/* ─── Badge tipo de horario ─── */
+.schedule-type-badge {
+  padding: 0.25rem 0.625rem;
+  border-radius: 999px;
+  font-size: 0.625rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+}
+
+.badge-weekday {
+  background: rgba(74, 222, 128, 0.12);
+  color: #4ade80;
+}
+
+.badge-other {
+  background: var(--border-color);
+  color: var(--text-secondary);
+}
+
+/* ─── Spinner ─── */
+.spinner-sm {
+  width: 2rem;
+  height: 2rem;
+  border: 2.5px 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); } }
+
+/* ─── FAB mapa ─── */
+.fab-map {
+  position: fixed;
+  bottom: 5.5rem;
+  right: 1.25rem;
+  width: 3.5rem;
+  height: 3.5rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 50%;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 40;
+  transition: transform 0.15s;
+}
+
+.fab-map:active {
+  transform: scale(0.94);
+}
+
+.fab-map .material-icons {
+  font-size: 1.5rem;
+}
+
+/* ─── Transición FAB ─── */
+.fab-enter-active, .fab-leave-active {
+  transition: opacity 0.25s ease, transform 0.25s ease;
+}
+.fab-enter-from, .fab-leave-to {
+  opacity: 0;
+  transform: translateY(1rem) scale(0.9);
 }
 </style>