From 48e83d4a942355066a997a5f23696a918a057f73 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Mon, 23 Feb 2026 14:11:52 -0500
Subject: [PATCH] feat: redesign SchedulesView with visual dropdown,
 status-coded cards, day filter chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Custom visual route dropdown (replaces native select) with animation, icons, checkmark
- Schedule cards with left accent bar and status system: Departing (yellow glow), On-time (green), Upcoming (blue)
- Time shown large and bold in active-color (theme-aware)
- Pulsing 'SALIENDO' badge on most immediate departure
- Day filter chips: Hoy / Mañana / Todos
- Live green dot indicator for real-time feel
- 'Ver en mapa' shortcut button
- Empty state with SVG clock illustration before route is selected
- Full dark/light mode support via CSS variables
---
 frontend/src/views/SchedulesView.vue | 1108 ++++++++++++++++----------
 1 file changed, 705 insertions(+), 403 deletions(-)

diff --git a/frontend/src/views/SchedulesView.vue b/frontend/src/views/SchedulesView.vue
index 40b6ce1..b5bff98 100644
--- a/frontend/src/views/SchedulesView.vue
+++ b/frontend/src/views/SchedulesView.vue
@@ -1,510 +1,812 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
 import { useScheduleStore } from '@/stores/schedule'
 import { useRouteStore } from '@/stores/route'
 import { formatTo12Hour } from '@/utils/timeFormatter'
 import { analyticsService } from '@/services/analyticsService'
 import { useRouter, useRoute } from 'vue-router'
 
-const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
-
 const scheduleStore = useScheduleStore()
 const routeStore = useRouteStore()
 
+const dropdownOpen = ref(false)
+const dayFilter = ref<'all' | 'today' | 'tomorrow'>('today')
+
+// ── Tipos de día
+const DAY_TYPES: Record<string, string> = {
+  'weekday':  'Días de semana',
+  'weekend':  'Fin de semana',
+  'holiday':  'Festivo',
+}
+
+// ── Calcular estado del bus según horario
+function getBusStatus(timeStr: string): 'departing' | 'ontime' | 'upcoming' {
+  if (!timeStr) return 'upcoming'
+  const now = new Date()
+  const [h, m] = timeStr.split(':').map(Number)
+  const schedDate = new Date()
+  schedDate.setHours(h, m, 0, 0)
+  const diffMin = (schedDate.getTime() - now.getTime()) / 60000
+  if (diffMin >= 0 && diffMin <= 10) return 'departing'
+  if (diffMin > 10 && diffMin <= 60) return 'ontime'
+  return 'upcoming'
+}
+
+// ── Calcular si el horario es "hoy" o "mañana" según tipo de día
+function getScheduleDay(schedule: any): 'today' | 'tomorrow' | 'other' {
+  const now = new Date()
+  const dow = now.getDay() // 0=Dom, 6=Sab
+  const isWeekend = dow === 0 || dow === 6
+  const isTomorrow = (!isWeekend && schedule.schedule_type === 'weekend') ||
+                     (isWeekend && schedule.schedule_type === 'weekday')
+  if (isTomorrow) return 'tomorrow'
+  if (schedule.schedule_type === 'holiday') return 'other'
+  return 'today'
+}
+
+function getDayLabel(schedule: any): string {
+  const d = getScheduleDay(schedule)
+  if (d === 'today') return 'Hoy'
+  if (d === 'tomorrow') return 'Mañana'
+  return 'Próximo'
+}
+
+// ── Filtrado de horarios
+const filteredSchedules = computed(() => {
+  return scheduleStore.schedules.filter(s => {
+    if (dayFilter.value === 'all') return true
+    const d = getScheduleDay(s)
+    if (dayFilter.value === 'today') return d === 'today'
+    if (dayFilter.value === 'tomorrow') return d === 'tomorrow'
+    return true
+  })
+})
+
+// ── Seleccionar ruta
+function pickRoute(id: string, name: string) {
+  dropdownOpen.value = false
+  analyticsService.logEvent({
+    event_name: 'schedule_viewed',
+    item_id: name,
+    properties: { route_id: id }
+  })
+  routeStore.selectRoute(id, name)
+  scheduleStore.loadRouteSchedules(id)
+}
+
+function goToMap() {
+  if (routeStore.selectedRouteId) {
+    router.push({ path: '/map', query: { routeId: routeStore.selectedRouteId } })
+  }
+}
+
+// ── Cierre del dropdown al hacer clic fuera
+function handleOutsideClick(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.route-selector')) dropdownOpen.value = false
+}
+
 onMounted(async () => {
   analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Schedules' })
   await routeStore.loadRoutes()
+  document.addEventListener('click', handleOutsideClick)
 
   const queryRouteId = route.query.routeId as string
   if (queryRouteId) {
-    const foundRoute = routeStore.allRoutes.find(r => r.id === queryRouteId)
-    if (foundRoute) {
-      syncRouteSelection(foundRoute.id, foundRoute.name)
-    }
+    const found = routeStore.allRoutes.find(r => r.id === queryRouteId)
+    if (found) pickRoute(found.id, found.name)
   }
 })
 
-const unwatchQuery = watch(
+const stopWatch = watch(
   () => route.query.routeId,
-  (newRouteId) => {
-    if (newRouteId) {
-      const foundRoute = routeStore.allRoutes.find(r => r.id === newRouteId as string)
-      if (foundRoute) {
-        syncRouteSelection(foundRoute.id, foundRoute.name)
-      }
+  (newId) => {
+    if (newId) {
+      const found = routeStore.allRoutes.find(r => r.id === newId as string)
+      if (found) pickRoute(found.id, found.name)
     }
   }
 )
 
 onUnmounted(() => {
-  unwatchQuery()
+  stopWatch()
+  document.removeEventListener('click', handleOutsideClick)
 })
-
-function syncRouteSelection(routeId: string, routeName: string) {
-  routeStore.selectRoute(routeId, routeName)
-  scheduleStore.loadRouteSchedules(routeId)
-}
-
-function selectRouteAndClose(routeId: string, routeName: string) {
-  analyticsService.logEvent({ 
-    event_name: 'schedule_viewed', 
-    item_id: routeName,
-    properties: { route_id: routeId }
-  })
-  routeStore.selectRoute(routeId, routeName)
-  scheduleStore.loadRouteSchedules(routeId)
-}
-
-function goToMap() {
-  if (routeStore.selectedRouteId) {
-    router.push({ 
-      path: '/map', 
-      query: { routeId: routeStore.selectedRouteId } 
-    })
-  }
-}
 </script>
 
 <template>
-  <div class="schedules-view">
+  <div class="sch-page">
 
-    <!-- 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>
+    <!-- ── HEADER ── -->
+    <header class="sch-header">
+      <h1 class="sch-title">Horarios</h1>
+      <p class="sch-subtitle" v-if="!routeStore.hasSelectedRoute">
+        Selecciona una ruta para ver los próximos buses
+      </p>
+    </header>
 
-      <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="route-select"
-            id="route-select"
-            :value="routeStore.selectedRouteId"
-            @change="e => {
-              const target = e.target as HTMLSelectElement;
-              if (target) {
-                const selectedRoute = routeStore.allRoutes.find(r => r.id === target.value);
-                if (selectedRoute) selectRouteAndClose(target.value, selectedRoute.name);
-              }
-            }"
-          >
-            <option value="" disabled>{{ t('schedules.placeholder') || 'Elige una ruta...' }}</option>
-            <option v-for="r in routeStore.allRoutes" :key="r.id" :value="r.id">
-              {{ r.name }}
-            </option>
-          </select>
-          <span class="material-icons select-chevron">expand_more</span>
-        </div>
+    <!-- ── SELECTOR DE RUTA ── -->
+    <div class="selector-wrap">
+      <div class="route-selector" :class="{ 'route-selector--open': dropdownOpen }">
+
+        <!-- Botón disparador -->
+        <button
+          class="selector-trigger"
+          :class="{ 'selector-trigger--active': routeStore.hasSelectedRoute }"
+          @click.stop="dropdownOpen = !dropdownOpen"
+          :disabled="routeStore.isLoadingRoutes"
+        >
+          <div class="trigger-left">
+            <div class="trigger-icon">
+              <span class="material-icons">directions_bus</span>
+            </div>
+            <span class="trigger-text" :class="{ 'trigger-text--selected': routeStore.hasSelectedRoute }">
+              {{ routeStore.isLoadingRoutes ? 'Cargando rutas...' : (routeStore.selectedRouteName || 'Selecciona una ruta...') }}
+            </span>
+          </div>
+          <span class="material-icons trigger-arrow" :class="{ 'trigger-arrow--up': dropdownOpen }">
+            expand_more
+          </span>
+        </button>
+
+        <!-- Lista desplegable -->
+        <Transition name="dropdown">
+          <div v-if="dropdownOpen" class="dropdown-list">
+            <div
+              v-if="routeStore.isLoadingRoutes"
+              class="dropdown-loading"
+            >
+              <div class="spinner-sm"></div>
+              <span>Cargando rutas...</span>
+            </div>
+            <template v-else>
+              <button
+                v-for="r in routeStore.allRoutes"
+                :key="r.id"
+                class="dropdown-item"
+                :class="{ 'dropdown-item--active': r.id === routeStore.selectedRouteId }"
+                @click.stop="pickRoute(r.id, r.name)"
+              >
+                <span class="material-icons dropdown-item-icon">directions_bus</span>
+                <span class="dropdown-item-name">{{ r.name }}</span>
+                <span v-if="r.id === routeStore.selectedRouteId" class="material-icons dropdown-item-check">check</span>
+              </button>
+              <div v-if="routeStore.allRoutes.length === 0" class="dropdown-empty">
+                No hay rutas disponibles
+              </div>
+            </template>
+          </div>
+        </Transition>
       </div>
     </div>
 
-    <!-- Contenido principal -->
-    <main class="schedules-main">
+    <!-- ── ESTADO VACÍO — sin ruta seleccionada ── -->
+    <div v-if="!routeStore.hasSelectedRoute" class="empty-state">
+      <div class="empty-illustration">
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
+          <circle cx="40" cy="38" r="24" stroke="var(--active-color)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="6 4"/>
+          <line x1="40" y1="26" x2="40" y2="50" stroke="var(--active-color)" stroke-width="3.5" stroke-linecap="round"/>
+          <line x1="28" y1="38" x2="52" y2="38" stroke="var(--active-color)" stroke-width="3.5" stroke-linecap="round"/>
+          <line x1="33" y1="62" x2="47" y2="62" stroke="var(--active-color)" stroke-width="3" stroke-linecap="round"/>
+          <line x1="40" y1="56" x2="40" y2="62" stroke="var(--active-color)" stroke-width="3" stroke-linecap="round"/>
+        </svg>
+      </div>
+      <h2 class="empty-title">Aquí verás los horarios</h2>
+      <p class="empty-sub">Elige una ruta del menú de arriba para ver los próximos buses disponibles</p>
+    </div>
 
-      <!-- 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>
+    <!-- ── CONTENIDO con ruta seleccionada ── -->
+    <template v-else>
+
+      <!-- Badge EN VIVO -->
+      <div class="live-badge-wrap">
+        <div class="live-badge">
+          <span class="live-dot"></span>
+          <span>Próximas salidas</span>
+        </div>
+        <!-- Botón ver en mapa -->
+        <button class="map-btn" @click="goToMap">
+          <span class="material-icons">map</span>
+          Ver en mapa
+        </button>
       </div>
 
-      <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>
+      <!-- Chips de filtro día -->
+      <div class="day-chips">
+        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'today' }" @click="dayFilter = 'today'">Hoy</button>
+        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'tomorrow' }" @click="dayFilter = 'tomorrow'">Mañana</button>
+        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'all' }" @click="dayFilter = 'all'">Todos</button>
+      </div>
+
+      <!-- Loading -->
+      <div v-if="scheduleStore.isLoading" class="state-center">
+        <div class="spinner"></div>
+        <p>Cargando horarios...</p>
+      </div>
+
+      <!-- Sin resultados en el filtro -->
+      <div v-else-if="filteredSchedules.length === 0" class="empty-state empty-state--sm">
+        <span class="material-icons empty-cat-icon">schedule</span>
+        <p class="empty-sub">No hay horarios para este filtro</p>
+        <button class="chip-link" @click="dayFilter = 'all'">Ver todos los horarios</button>
+      </div>
+
+      <!-- Lista de horarios -->
+      <div v-else class="schedules-list">
+        <div
+          v-for="(schedule, i) in filteredSchedules"
+          :key="schedule.id"
+          class="schedule-card"
+          :class="`schedule-card--${getBusStatus(schedule.departure_time)}`"
+        >
+          <!-- Borde izquierdo decorativo -->
+          <div class="card-accent"></div>
+
+          <!-- Hora -->
+          <div class="card-time">
+            <span class="time-big">{{ formatTo12Hour(schedule.departure_time).split(' ')[0] }}</span>
+            <span class="time-ampm">{{ formatTo12Hour(schedule.departure_time).split(' ')[1] }}</span>
           </div>
-        </div>
 
-        <!-- Cargando horarios -->
-        <div v-if="scheduleStore.isLoading" class="state-row center">
-          <div class="spinner-sm"></div>
-        </div>
-
-        <!-- 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>
-
-        <!-- Lista de horarios -->
-        <div v-else class="schedules-list">
-          <div 
-            v-for="schedule in scheduleStore.schedules" 
-            :key="schedule.id" 
-            class="schedule-card"
-          >
-            <div class="schedule-left">
-              <div class="departure-time">
-                {{ formatTo12Hour(schedule.departure_time) }}
-              </div>
-              <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>
+          <!-- Info -->
+          <div class="card-info">
+            <div class="card-top-row">
+              <span class="day-tag" :class="`day-tag--${getScheduleDay(schedule)}`">
+                {{ getDayLabel(schedule) }}
+              </span>
+              <span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">SALIENDO</span>
             </div>
+            <p class="route-name">{{ routeStore.selectedRouteName }}</p>
+            <p class="card-detail">
+              <span class="material-icons card-detail-icon">schedule</span>
+              {{ DAY_TYPES[schedule.schedule_type] || schedule.schedule_type }}
+            </p>
+          </div>
 
-            <span 
-              class="schedule-type-badge"
-              :class="schedule.schedule_type === 'weekday' ? 'badge-weekday' : 'badge-other'"
-            >
-              {{ t(`schedules.types.${schedule.schedule_type}`) || schedule.schedule_type }}
+          <!-- Badge estado -->
+          <div class="status-badge" :class="`status-badge--${getBusStatus(schedule.departure_time)}`">
+            <span class="material-icons status-icon">
+              {{ getBusStatus(schedule.departure_time) === 'departing' ? 'directions_run' :
+                 getBusStatus(schedule.departure_time) === 'ontime' ? 'check_circle' : 'access_time' }}
             </span>
           </div>
         </div>
-      </template>
-    </main>
+      </div>
 
-    <!-- Botón flotante: ir al mapa -->
-    <Transition name="fab">
-      <button 
-        v-if="routeStore.selectedRouteId"
-        @click="goToMap"
-        class="fab-map"
-        title="Ver en el mapa"
-      >
-        <span class="material-icons">map</span>
-      </button>
-    </Transition>
+    </template>
   </div>
 </template>
 
 <style scoped>
-.schedules-view {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
+/* ═══════════════════════════════════════════
+   BASE
+═══════════════════════════════════════════ */
+.sch-page {
+  min-height: 100vh;
   background: var(--bg-primary);
-  color: var(--text-primary);
-  padding-bottom: 6rem;
-  position: relative;
+  padding-bottom: 100px;
 }
 
-/* ─── Selector de ruta ─── */
-.route-selector-section {
-  padding: 1rem 1.25rem 0.75rem;
+/* ═══════════════════════════════════════════
+   HEADER
+═══════════════════════════════════════════ */
+.sch-header {
+  padding: 1.5rem 1.25rem 1rem;
+  background: var(--bg-secondary);
   border-bottom: 1px solid var(--border-color);
-  background: var(--bg-primary);
-  position: sticky;
-  top: 0;
-  z-index: 10;
 }
 
-.state-row {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-}
-
-.state-row.center {
-  justify-content: center;
-  padding: 2.5rem 0;
-}
-
-.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;
+.sch-title {
+  font-size: 1.75rem;
+  font-weight: 900;
   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;
+  letter-spacing: -0.02em;
 }
 
-/* ─── Encabezado sección ─── */
-.section-header {
+.sch-subtitle {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+/* ═══════════════════════════════════════════
+   SELECTOR DE RUTA
+═══════════════════════════════════════════ */
+.selector-wrap {
+  padding: 1rem 1.25rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  position: relative;
+  z-index: 50;
+}
+
+.route-selector { position: relative; }
+
+/* Botón trigger */
+.selector-trigger {
+  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 1rem;
+  gap: 0.75rem;
+  padding: 1rem 1rem 1rem 0.875rem;
+  background: var(--bg-primary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 1rem;
+  cursor: pointer;
+  transition: border-color 0.2s;
+  font-family: inherit;
 }
 
-.section-title {
-  font-size: 0.8125rem;
-  font-weight: 700;
+.selector-trigger:hover:not(:disabled),
+.route-selector--open .selector-trigger {
+  border-color: var(--active-color);
+}
+
+.selector-trigger--active {
+  border-color: var(--active-color);
+  border-width: 2px;
+}
+
+.selector-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.trigger-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.trigger-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 0.625rem;
+  background: var(--active-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.trigger-icon .material-icons { font-size: 1.25rem; color: #101820; }
+
+.trigger-text {
+  font-size: 0.9375rem;
+  font-weight: 600;
   color: var(--text-secondary);
-  margin: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.trigger-text--selected {
+  color: var(--text-primary);
+  font-weight: 800;
+}
+
+.trigger-arrow {
+  color: var(--text-secondary);
+  transition: transform 0.25s;
+  flex-shrink: 0;
+}
+
+.trigger-arrow--up { transform: rotate(180deg); }
+
+/* Dropdown */
+.dropdown-list {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  right: 0;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
+  z-index: 100;
+}
+
+.dropdown-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1.25rem;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+.dropdown-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.9rem 1rem;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s;
+}
+
+.dropdown-item:last-child { border-bottom: none; }
+
+.dropdown-item:hover { background: var(--bg-primary); }
+
+.dropdown-item--active {
+  color: var(--active-color);
+  background: rgba(254, 231, 21, 0.06);
+}
+
+.dropdown-item-icon {
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+}
+
+.dropdown-item--active .dropdown-item-icon { color: var(--active-color); }
+
+.dropdown-item-name { flex: 1; }
+
+.dropdown-item-check {
+  font-size: 1.125rem;
+  color: var(--active-color);
+  flex-shrink: 0;
+}
+
+.dropdown-empty {
+  padding: 1.25rem;
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+}
+
+/* Animación dropdown */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+/* ═══════════════════════════════════════════
+   BADGE EN VIVO + BOTÓN MAPA
+═══════════════════════════════════════════ */
+.live-badge-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.875rem 1.25rem 0;
 }
 
 .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;
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-secondary);
 }
 
 .live-dot {
-  width: 0.4375rem;
-  height: 0.4375rem;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: var(--active-color);
-  animation: pulse 1.5s infinite;
+  background: #22c55e;
+  animation: pulse-green 1.5s ease-in-out infinite;
+  flex-shrink: 0;
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
+@keyframes pulse-green {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
+  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
 }
 
-.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;
+.map-btn {
+  display: inline-flex;
   align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 99px;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.2s;
+}
+
+.map-btn:hover { border-color: var(--active-color); }
+.map-btn .material-icons { font-size: 1rem; }
+
+/* ═══════════════════════════════════════════
+   CHIPS DÍA
+═══════════════════════════════════════════ */
+.day-chips {
+  display: flex;
   gap: 0.5rem;
+  padding: 0.75rem 1.25rem;
 }
 
-.no-schedule-icon {
-  font-size: 2.5rem;
-  color: var(--border-color);
-}
-
-.no-schedule-text {
+.day-chip {
+  padding: 0.4rem 0.875rem;
+  border-radius: 99px;
+  border: 1.5px solid var(--border-color);
+  background: var(--bg-primary);
   color: var(--text-secondary);
-  font-size: 0.875rem;
-  margin: 0;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.18s;
 }
 
-/* ─── Lista de horarios ─── */
+.day-chip:hover { border-color: var(--active-color); color: var(--text-primary); }
+
+.day-chip--active {
+  background: var(--active-color);
+  border-color: var(--active-color);
+  color: #101820;
+}
+
+/* ═══════════════════════════════════════════
+   LISTA DE HORARIOS
+═══════════════════════════════════════════ */
 .schedules-list {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.625rem;
+  padding: 0 1.25rem;
+  max-width: 640px;
+  margin: 0 auto;
 }
 
 .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(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;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 1rem;
+  padding: 1rem;
+  position: relative;
+  overflow: hidden;
   transition: transform 0.15s;
 }
 
-.fab-map:active {
-  transform: scale(0.94);
+.schedule-card:hover { transform: translateX(4px); }
+
+/* Variantes de estado */
+.schedule-card--departing {
+  border-color: var(--active-color);
+  box-shadow: 0 0 16px rgba(254, 231, 21, 0.12);
 }
 
-.fab-map .material-icons {
+.schedule-card--ontime { border-left-color: #22c55e; border-left-width: 3px; }
+.schedule-card--upcoming { border-left-color: #3b82f6; border-left-width: 3px; }
+
+/* Acento izquierdo */
+.card-accent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: 1rem 0 0 1rem;
+}
+
+.schedule-card--departing .card-accent { background: var(--active-color); }
+.schedule-card--ontime    .card-accent { background: #22c55e; }
+.schedule-card--upcoming  .card-accent { background: #3b82f6; }
+
+/* Hora */
+.card-time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 64px;
+  padding-left: 0.25rem;
+}
+
+.time-big {
   font-size: 1.5rem;
+  font-weight: 900;
+  color: var(--active-color);
+  letter-spacing: -0.03em;
+  line-height: 1;
 }
 
-/* ─── Transición FAB ─── */
-.fab-enter-active, .fab-leave-active {
-  transition: opacity 0.25s ease, transform 0.25s ease;
+.time-ampm {
+  font-size: 0.6875rem;
+  font-weight: 800;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
-.fab-enter-from, .fab-leave-to {
-  opacity: 0;
-  transform: translateY(1rem) scale(0.9);
+
+/* Info */
+.card-info { flex: 1; min-width: 0; }
+
+.card-top-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
 }
+
+.day-tag {
+  font-size: 0.6875rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 99px;
+}
+
+.day-tag--today   { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
+.day-tag--tomorrow{ background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
+.day-tag--other   { background: var(--bg-primary); color: var(--text-secondary); }
+
+.departing-pulse {
+  font-size: 0.6rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #101820;
+  background: var(--active-color);
+  padding: 0.1rem 0.5rem;
+  border-radius: 99px;
+  animation: blink 1.2s ease-in-out infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.route-name {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-detail {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin: 0.2rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--text-secondary);
+}
+
+.card-detail-icon { font-size: 0.875rem; }
+
+/* Badge estado (derecha) */
+.status-badge {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.status-badge--departing { background: rgba(254, 231, 21, 0.15); color: var(--active-color); }
+.status-badge--ontime    { background: rgba(34, 197, 94, 0.15);  color: #22c55e; }
+.status-badge--upcoming  { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
+
+.status-icon { font-size: 1.25rem; }
+
+/* ═══════════════════════════════════════════
+   ESTADO VACÍO
+═══════════════════════════════════════════ */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3.5rem 2rem;
+  text-align: center;
+  max-width: 360px;
+  margin: 1.5rem auto 0;
+}
+
+.empty-state--sm { padding: 2rem 1.25rem; }
+
+.empty-illustration {
+  width: 110px;
+  height: 110px;
+  border-radius: 50%;
+  background: var(--bg-secondary);
+  border: 1.5px dashed var(--border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+}
+
+.empty-title {
+  font-size: 1.375rem;
+  font-weight: 900;
+  color: var(--text-primary);
+  margin: 0 0 0.625rem;
+  letter-spacing: -0.02em;
+}
+
+.empty-sub {
+  font-size: 0.9375rem;
+  color: var(--text-secondary);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.empty-cat-icon {
+  font-size: 3rem;
+  color: var(--text-secondary);
+  opacity: 0.35;
+  margin-bottom: 0.75rem;
+}
+
+.chip-link {
+  margin-top: 1rem;
+  background: none;
+  border: 1.5px solid var(--active-color);
+  color: var(--active-color);
+  border-radius: 99px;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.chip-link:hover {
+  background: var(--active-color);
+  color: #101820;
+}
+
+/* ═══════════════════════════════════════════
+   SPINNERS
+═══════════════════════════════════════════ */
+.state-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 3rem 1.25rem;
+  gap: 1rem;
+  color: var(--text-secondary);
+  font-size: 0.9375rem;
+}
+
+.spinner, .spinner-sm {
+  border: 2.5px solid var(--border-color);
+  border-top-color: var(--active-color);
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+
+.spinner    { width: 2rem; height: 2rem; }
+.spinner-sm { width: 1rem; height: 1rem; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
 </style>