From c6b97c41887e0ec1c7ce0bfb349acf141680877e Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 22 Feb 2026 15:05:59 -0500
Subject: [PATCH] feat: redesign Schedules, Discover, and Routes views with
 SIBU Main HUD aesthetic and Tailwind v4

---
 frontend/package-lock.json           | 726 ++++++++++++++++++++++++---
 frontend/package.json                |   4 +
 frontend/src/style.css               |   4 +-
 frontend/src/views/DiscoverView.vue  | 571 ++++-----------------
 frontend/src/views/RoutesView.vue    | 457 +++++++++--------
 frontend/src/views/SchedulesView.vue | 568 +++++----------------
 frontend/vite.config.ts              |   2 +
 7 files changed, 1106 insertions(+), 1226 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c8200c2..a352903 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,6 +13,7 @@
         "@capacitor/core": "^8.0.0",
         "@capacitor/geolocation": "^8.0.0",
         "@googlemaps/js-api-loader": "^2.0.2",
+        "@tailwindcss/vite": "^4.2.0",
         "axios": "^1.13.2",
         "chart.js": "^4.5.1",
         "firebase-tools": "^15.7.0",
@@ -29,6 +30,9 @@
         "@types/node": "^24.10.1",
         "@vitejs/plugin-vue": "^6.0.1",
         "@vue/tsconfig": "^0.8.1",
+        "autoprefixer": "^10.4.24",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.2.0",
         "typescript": "~5.9.3",
         "vite": "^7.2.4",
         "vite-plugin-pwa": "^1.2.0",
@@ -1956,7 +1960,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1973,7 +1976,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1990,7 +1992,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2007,7 +2008,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2022,7 +2022,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2039,7 +2038,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2056,7 +2054,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2073,7 +2070,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2090,7 +2086,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2107,7 +2102,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2124,7 +2118,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2141,7 +2134,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2158,7 +2150,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2175,7 +2166,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2192,7 +2182,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2209,7 +2198,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2226,7 +2214,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2243,7 +2230,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2260,7 +2246,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2277,7 +2262,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2294,7 +2278,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2311,7 +2294,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2328,7 +2310,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2345,7 +2326,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2362,7 +2342,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2379,7 +2358,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3611,7 +3589,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -3622,7 +3599,6 @@
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
       "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -3642,7 +3618,7 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -3657,7 +3633,6 @@
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -4285,7 +4260,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4299,7 +4273,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4311,7 +4284,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4325,7 +4297,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4339,7 +4310,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4353,7 +4323,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4367,7 +4336,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4381,7 +4349,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4395,7 +4362,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4409,7 +4375,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4423,7 +4388,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4437,7 +4401,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4451,7 +4414,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4465,7 +4427,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4479,7 +4440,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4493,7 +4453,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4507,7 +4466,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4521,7 +4479,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4535,7 +4492,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4549,7 +4505,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4563,7 +4518,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4577,7 +4531,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4629,6 +4582,263 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.0.tgz",
+      "integrity": "sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.31.1",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.0.tgz",
+      "integrity": "sha512-AZqQzADaj742oqn2xjl5JbIOzZB/DGCYF/7bpvhA8KvjUj9HJkag6bBuwZvH1ps6dfgxNHyuJVlzSr2VpMgdTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.0",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.0",
+        "@tailwindcss/oxide-darwin-x64": "4.2.0",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.0",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.0",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.0",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.0",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.0",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.0",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.0",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.0",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.0.tgz",
+      "integrity": "sha512-F0QkHAVaW/JNBWl4CEKWdZ9PMb0khw5DCELAOnu+RtjAfx5Zgw+gqCHFvqg3AirU1IAd181fwOtJQ5I8Yx5wtw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.0.tgz",
+      "integrity": "sha512-I0QylkXsBsJMZ4nkUNSR04p6+UptjcwhcVo3Zu828ikiEqHjVmQL9RuQ6uT/cVIiKpvtVA25msu/eRV97JeNSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.0.tgz",
+      "integrity": "sha512-6TmQIn4p09PBrmnkvbYQ0wbZhLtbaksCDx7Y7R3FYYx0yxNA7xg5KP7dowmQ3d2JVdabIHvs3Hx4K3d5uCf8xg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.0.tgz",
+      "integrity": "sha512-qBudxDvAa2QwGlq9y7VIzhTvp2mLJ6nD/G8/tI70DCDoneaUeLWBJaPcbfzqRIWraj+o969aDQKvKW9dvkUizw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.0.tgz",
+      "integrity": "sha512-7XKkitpy5NIjFZNUQPeUyNJNJn1CJeV7rmMR+exHfTuOsg8rxIO9eNV5TSEnqRcaOK77zQpsyUkBWmPy8FgdSg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.0.tgz",
+      "integrity": "sha512-Mff5a5Q3WoQR01pGU1gr29hHM1N93xYrKkGXfPw/aRtK4bOc331Ho4Tgfsm5WDGvpevqMpdlkCojT3qlCQbCpA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.0.tgz",
+      "integrity": "sha512-XKcSStleEVnbH6W/9DHzZv1YhjE4eSS6zOu2eRtYAIh7aV4o3vIBs+t/B15xlqoxt6ef/0uiqJVB6hkHjWD/0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.0.tgz",
+      "integrity": "sha512-/hlXCBqn9K6fi7eAM0RsobHwJYa5V/xzWspVTzxnX+Ft9v6n+30Pz8+RxCn7sQL/vRHHLS30iQPrHQunu6/vJA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.0.tgz",
+      "integrity": "sha512-lKUaygq4G7sWkhQbfdRRBkaq4LY39IriqBQ+Gk6l5nKq6Ay2M2ZZb1tlIyRNgZKS8cbErTwuYSor0IIULC0SHw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.0.tgz",
+      "integrity": "sha512-xuDjhAsFdUuFP5W9Ze4k/o4AskUtI8bcAGU4puTYprr89QaYFmhYOPfP+d1pH+k9ets6RoE23BXZM1X1jJqoyw==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.0.tgz",
+      "integrity": "sha512-2UU/15y1sWDEDNJXxEIrfWKC2Yb4YgIW5Xz2fKFqGzFWfoMHWFlfa1EJlGO2Xzjkq/tvSarh9ZTjvbxqWvLLXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.0.tgz",
+      "integrity": "sha512-CrFadmFoc+z76EV6LPG1jx6XceDsaCG3lFhyLNo/bV9ByPrE+FnBPckXQVP4XRkN76h3Fjt/a+5Er/oA/nCBvQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.0.tgz",
+      "integrity": "sha512-da9mFCaHpoOgtQiWtDGIikTrSpUFBtIZCG3jy/u2BGV+l/X1/pbxzmIUxNt6JWm19N3WtGi4KlJdSH/Si83WOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.0",
+        "@tailwindcss/oxide": "4.2.0",
+        "tailwindcss": "4.2.0"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-2.0.0.tgz",
@@ -4670,7 +4880,6 @@
     },
     "node_modules/@types/estree": {
       "version": "1.0.8",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/fs-extra": {
@@ -5625,6 +5834,43 @@
         "node": ">= 4.0.0"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.24",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.24.tgz",
+      "integrity": "sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001766",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5756,13 +6002,16 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.8.32",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.32.tgz",
-      "integrity": "sha512-OPz5aBThlyLFgxyhdwf/s2+8ab3OvT7AdTNvKHBwpXomIYeXqpUUuT8LrdtxZSsWJ4R4CU1un4XGh5Ez3nlTpw==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
+      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/basic-auth": {
@@ -6072,9 +6321,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.28.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz",
-      "integrity": "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==",
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
       "dev": true,
       "funding": [
         {
@@ -6093,11 +6342,11 @@
       "license": "MIT",
       "peer": true,
       "dependencies": {
-        "baseline-browser-mapping": "^2.8.25",
-        "caniuse-lite": "^1.0.30001754",
-        "electron-to-chromium": "^1.5.249",
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
         "node-releases": "^2.0.27",
-        "update-browserslist-db": "^1.1.4"
+        "update-browserslist-db": "^1.2.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -6149,7 +6398,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/bundle-name": {
@@ -6362,9 +6611,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001757",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
-      "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==",
+      "version": "1.0.30001772",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001772.tgz",
+      "integrity": "sha512-mIwLZICj+ntVTw4BT2zfp+yu/AqV6GMKfJVJMx3MwPxs+uk/uj2GLl2dH8LQbjiLDX66amCga5nKFyDgRR43kg==",
       "dev": true,
       "funding": [
         {
@@ -7658,6 +7907,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/diff": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.4.tgz",
@@ -7843,6 +8101,19 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "license": "BSD-2-Clause",
@@ -8017,7 +8288,6 @@
     },
     "node_modules/esbuild": {
       "version": "0.25.12",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -8528,7 +8798,6 @@
     },
     "node_modules/fdir": {
       "version": "6.5.0",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12.0.0"
@@ -8985,6 +9254,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -10844,6 +11127,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/jju": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
@@ -11160,6 +11452,255 @@
         "libsodium": "^0.7.16"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.31.1.tgz",
+      "integrity": "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.31.1",
+        "lightningcss-darwin-arm64": "1.31.1",
+        "lightningcss-darwin-x64": "1.31.1",
+        "lightningcss-freebsd-x64": "1.31.1",
+        "lightningcss-linux-arm-gnueabihf": "1.31.1",
+        "lightningcss-linux-arm64-gnu": "1.31.1",
+        "lightningcss-linux-arm64-musl": "1.31.1",
+        "lightningcss-linux-x64-gnu": "1.31.1",
+        "lightningcss-linux-x64-musl": "1.31.1",
+        "lightningcss-win32-arm64-msvc": "1.31.1",
+        "lightningcss-win32-x64-msvc": "1.31.1"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.31.1.tgz",
+      "integrity": "sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.31.1.tgz",
+      "integrity": "sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.31.1.tgz",
+      "integrity": "sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.31.1.tgz",
+      "integrity": "sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.31.1.tgz",
+      "integrity": "sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.31.1.tgz",
+      "integrity": "sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.31.1.tgz",
+      "integrity": "sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.31.1.tgz",
+      "integrity": "sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.31.1.tgz",
+      "integrity": "sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.31.1.tgz",
+      "integrity": "sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.31.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.31.1.tgz",
+      "integrity": "sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -12829,7 +13370,6 @@
     },
     "node_modules/picomatch": {
       "version": "4.0.3",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -12905,6 +13445,8 @@
     },
     "node_modules/postcss": {
       "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -12920,6 +13462,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -12929,6 +13472,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/postgres-array": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz",
@@ -13620,7 +14170,6 @@
     },
     "node_modules/rollup": {
       "version": "4.53.3",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -14195,7 +14744,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -14206,7 +14755,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -14723,6 +15272,25 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.0.tgz",
+      "integrity": "sha512-yYzTZ4++b7fNYxFfpnberEEKu43w44aqDMNM9MHMmcKuCH7lL8jJ4yJ7LGHv7rSwiqM0nkiobF9I6cLlpS2P7Q==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tar": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
@@ -14914,7 +15482,7 @@
       "version": "5.44.1",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.1.tgz",
       "integrity": "sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -14985,7 +15553,6 @@
     },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
@@ -15450,9 +16017,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz",
-      "integrity": "sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
       "dev": true,
       "funding": [
         {
@@ -15626,7 +16193,6 @@
     },
     "node_modules/vite": {
       "version": "7.2.4",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
diff --git a/frontend/package.json b/frontend/package.json
index e89a6bc..1742de4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
     "@capacitor/core": "^8.0.0",
     "@capacitor/geolocation": "^8.0.0",
     "@googlemaps/js-api-loader": "^2.0.2",
+    "@tailwindcss/vite": "^4.2.0",
     "axios": "^1.13.2",
     "chart.js": "^4.5.1",
     "firebase-tools": "^15.7.0",
@@ -30,6 +31,9 @@
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.2.0",
     "typescript": "~5.9.3",
     "vite": "^7.2.4",
     "vite-plugin-pwa": "^1.2.0",
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 61fd53c..a60440d 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,5 +1,7 @@
+@import "tailwindcss";
+
 /* Global styles are now managed in App.vue and component-specific styles. 
-   This file has been cleared to prevent layout conflicts. */
+   Tailwind v4 handles utility classes automatically. */
 * {
   box-sizing: border-box;
 }
diff --git a/frontend/src/views/DiscoverView.vue b/frontend/src/views/DiscoverView.vue
index c542ed0..14fff30 100644
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@@ -6,6 +6,7 @@ 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';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -13,8 +14,7 @@ const businesses = ref<Business[]>([]);
 const isLoading = ref(true);
 const selectedArea = ref('Todas');
 const selectedCategory = ref('Todas');
-
-import { analyticsService } from '@/services/analyticsService';
+const searchQuery = ref('');
 
 onMounted(async () => {
   analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Discover' });
@@ -46,6 +46,15 @@ const filteredBusinesses = computed(() => {
   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;
 });
@@ -55,6 +64,11 @@ const categories = computed<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)];
+});
+
 function getImageUrl(path: string | null | undefined) {
   if (!path) return '/default-business.jpg';
   if (path.startsWith('http')) return path;
@@ -75,119 +89,108 @@ function getCategoryIcon(category: string) {
 </script>
 
 <template>
-  <div class="discover-view">
-    <!-- Compact Glass Header -->
-    <header class="premium-header">
-      <div class="header-glass-card">
-        <div class="header-icon-box">
-          <span class="material-icons">explore</span>
-          <div class="icon-pulse"></div>
-        </div>
-        <div class="header-text-box">
-          <h1 class="gradient-text">{{ t('discover.title') }}</h1>
-          <p class="subtitle">{{ t('discover.subtitle') }}</p>
-        </div>
+  <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>
 
-    <!-- Integrated High-Tech Filters -->
-    <div class="filters-panel">
-      <div class="glass-filters">
-        <div class="filter-item">
-          <div class="filter-label">
-            <span class="material-icons">location_on</span>
-            <span>Región</span>
-          </div>
-          <div class="custom-select-box">
-            <select v-model="selectedArea" class="modern-select">
-              <option value="Todas">{{ t('discover.allAreas') }}</option>
-              <option value="Boquete">Boquete</option>
-              <option value="Dolega">Dolega</option>
-              <option value="David">David</option>
-            </select>
-            <span class="material-icons">expand_more</span>
-          </div>
-        </div>
-
-        <div class="filter-divider"></div>
-
-        <div class="filter-item">
-          <div class="filter-label">
-            <span class="material-icons">category</span>
-            <span>Categoría</span>
-          </div>
-          <div class="custom-select-box">
-            <select v-model="selectedCategory" class="modern-select">
-              <option v-for="cat in categories" :key="cat" :value="cat">
-                {{ cat }}
-              </option>
-            </select>
-            <span class="material-icons">expand_more</span>
+    <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"
+          />
         </div>
       </div>
-    </div>
 
-    <!-- Main Content Area -->
-    <main class="discover-main">
-      <!-- Loading Experience -->
-      <div v-if="isLoading" class="loading-container">
-        <div class="nexus-loader">
-          <div class="nexus-dot"></div>
-          <div class="nexus-ring"></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>
-        <p class="loading-text">Sincronizando con SIBU...</p>
+        <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>
+      </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="empty-nexus">
-        <div class="empty-nexus-box">
-          <span class="material-icons">search_off</span>
-          <h3>Sin resultados</h3>
-          <p>La búsqueda no devolvió datos en esta frecuencia.</p>
-          <button class="reboot-btn" @click="selectedArea = 'Todas'; selectedCategory = 'Todas'">
+      <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
           </button>
         </div>
       </div>
 
-      <!-- Business Grid Premium -->
+      <!-- Business Grid -->
       <TransitionGroup 
         v-else 
-        name="stagger-list" 
+        name="fade" 
         tag="div" 
-        class="premium-business-grid"
+        class="grid grid-cols-2 gap-4"
       >
-        <div v-for="(biz, index) in filteredBusinesses" 
+        <div v-for="biz in filteredBusinesses" 
              :key="biz.id" 
-             class="nexus-card"
+             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)"
-             :style="{ '--order': index }"
         >
-          <div class="nexus-card-inner">
-            <div class="nexus-image-container">
-              <img :src="getImageUrl(biz.image_url)" alt="" class="nexus-img">
-              <div class="nexus-overlay-gradient"></div>
-              
-              <!-- Floating Badges -->
-              <div class="nexus-badge category">
-                <span class="material-icons">{{ getCategoryIcon(biz.category || '') }}</span>
-              </div>
-              
-              <div class="nexus-fav">
-                <FavoriteButton 
-                  item-type="business" 
-                  :item-id="biz.id" 
-                  :item-name="biz.name"
-                  :item-image="biz.image_url || undefined"
-                />
-              </div>
+          <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">
+                {{ getCategoryIcon(biz.category || '') }}
+              </span>
             </div>
-
-            <div class="nexus-card-details">
-              <h3 class="nexus-biz-name">{{ biz.name }}</h3>
-              <div class="nexus-biz-meta">
-                <span class="area"><span class="material-icons">near_me</span>{{ biz.area }}</span>
+            <div class="absolute top-3 right-3">
+              <FavoriteButton 
+                item-type="business" 
+                :item-id="biz.id" 
+                :item-name="biz.name"
+                :item-image="biz.image_url || undefined"
+              />
+            </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>
           </div>
@@ -199,390 +202,22 @@ function getCategoryIcon(category: string) {
 
 <style scoped>
 .discover-view {
-  min-height: 100vh;
-  position: relative;
-  padding: 20px 16px 150px;
-  overflow-x: hidden;
+  font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
-/* Contenido directo */
-.premium-header, 
-.filters-panel, 
-.discover-main {
-  position: relative;
-  z-index: 1;
-}
-
-/* Tarjetas nitidas */
-.header-glass-card, 
-.glass-filters,
-.nexus-card-inner {
-  background: var(--card-bg) !important;
-  backdrop-filter: none !important;
-  border: 1px solid var(--border-color) !important;
-}
-
-/* Premium Header */
-.premium-header {
-  margin-bottom: 24px;
-}
-
-.header-glass-card {
-  background: var(--card-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--border-color);
-  border-radius: 24px;
-  padding: 20px;
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
-}
-
-.header-icon-box {
-  width: 56px;
-  height: 56px;
-  background: var(--active-bg);
-  border-radius: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.header-icon-box .material-icons {
-  color: var(--active-color);
-  font-size: 28px;
-  z-index: 1;
-}
-
-.icon-pulse {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 18px;
-  border: 2px solid var(--active-color);
-  animation: pulse-out 2s infinite;
-}
-
-@keyframes pulse-out {
-  0% { transform: scale(1); opacity: 0.5; }
-  100% { transform: scale(1.5); opacity: 0; }
-}
-
-.header-text-box h1 {
-  font-size: 1.5rem;
-  font-weight: 900;
-  margin: 0;
-  letter-spacing: -0.02em;
-}
-
-.subtitle {
-  margin: 4px 0 0;
-  font-size: 0.85rem;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-/* Unified Filters */
-.filters-panel {
-  margin-bottom: 24px;
-}
-
-.glass-filters {
-  background: var(--glass-bg);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  border-radius: 20px;
-  display: flex;
-  padding: 8px;
-  gap: 8px;
-}
-
-.filter-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  padding: 8px 12px;
-}
-
-.filter-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--text-secondary);
-  margin-bottom: 4px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.filter-label .material-icons {
-  font-size: 14px;
-  color: var(--active-color);
-}
-
-.custom-select-box {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.modern-select {
-  width: 100%;
-  background: transparent;
-  border: none;
-  color: var(--text-primary);
-  font-size: 0.95rem;
-  font-weight: 700;
-  padding-right: 24px;
-  cursor: pointer;
-  outline: none;
-  appearance: none;
-}
-
-.custom-select-box .material-icons {
-  position: absolute;
-  right: 0;
-  pointer-events: none;
-  color: var(--text-secondary);
-  font-size: 18px;
-}
-
-.filter-divider {
-  width: 1px;
-  background: var(--border-color);
-  margin: 10px 0;
-}
-
-/* Premium Grid */
-.premium-business-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-}
-
-@media (max-width: 1024px) {
-  .premium-business-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-@media (max-width: 600px) {
-  .premium-business-grid {
-    grid-template-columns: repeat(2, 1fr); /* Mantenemos 2 en móvil para aprovechar el espacio nexus */
-    gap: 10px;
-  }
-}
-
-.nexus-card {
-  perspective: 1000px;
-}
-
-.nexus-card-inner {
-  background: var(--card-bg);
-  border-radius: 24px;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
+.fade-move,
+.fade-enter-active,
+.fade-leave-active {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
 }
 
-.nexus-card:hover .nexus-card-inner {
-  transform: translateY(-8px);
-  border-color: var(--active-color);
-  box-shadow: 0 15px 30px rgba(0,0,0,0.3);
-}
-
-.nexus-image-container {
-  position: relative;
-  aspect-ratio: 1;
-  overflow: hidden;
-}
-
-.nexus-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.nexus-card:hover .nexus-img {
-  transform: scale(1.1);
-}
-
-.nexus-overlay-gradient {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, transparent 60%);
-}
-
-.nexus-badge {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  width: 36px;
-  height: 36px;
-  background: var(--active-bg);
-  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--active-color);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
-}
-
-.nexus-fav {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
-.nexus-card-details {
-  padding: 16px;
-  background: var(--card-bg);
-}
-
-.nexus-biz-name {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  line-height: 1.2;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  line-clamp: 2;
-  overflow: hidden;
-}
-
-.nexus-biz-meta {
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.area {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.area .material-icons {
-  font-size: 14px;
-  color: var(--active-color);
-}
-
-/* Loading & Empty States */
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 100px 0;
-}
-
-.nexus-loader {
-  position: relative;
-  width: 60px;
-  height: 60px;
-}
-
-.nexus-dot {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 12px;
-  height: 12px;
-  background: var(--active-color);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0 20px var(--active-color);
-}
-
-.nexus-ring {
-  width: 60px;
-  height: 60px;
-  border: 4px solid var(--active-bg);
-  border-top-color: var(--active-color);
-  border-radius: 50%;
-  animation: spin 1s infinite linear;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.loading-text {
-  margin-top: 24px;
-  font-weight: 700;
-  color: var(--text-secondary);
-  letter-spacing: 1px;
-}
-
-.empty-nexus {
-  padding: 60px 0;
-  text-align: center;
-}
-
-.empty-nexus-box {
-  background: var(--card-bg);
-  border-radius: 30px;
-  padding: 40px;
-  border: 1px dashed var(--border-color);
-}
-
-.empty-nexus-box .material-icons {
-  font-size: 48px;
-  color: var(--text-secondary);
-  margin-bottom: 20px;
-}
-
-.reboot-btn {
-  margin-top: 24px;
-  background: var(--active-color);
-  color: #101820;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 12px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-/* Animations */
-.stagger-list-enter-active {
-  transition: all 0.5s ease;
-  transition-delay: calc(0.1s * var(--order));
-}
-
-.stagger-list-enter-from {
+.fade-enter-from,
+.fade-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(20px);
 }
 
-@media (max-width: 480px) {
-  .header-glass-card {
-    padding: 16px;
-    gap: 16px;
-  }
-  
-  .header-icon-box {
-    width: 44px;
-    height: 44px;
-  }
-  
-  .header-text-box h1 {
-    font-size: 1.2rem;
-  }
+.fade-leave-active {
+  position: absolute;
 }
 </style>
diff --git a/frontend/src/views/RoutesView.vue b/frontend/src/views/RoutesView.vue
index 7635d76..21ddab1 100644
--- a/frontend/src/views/RoutesView.vue
+++ b/frontend/src/views/RoutesView.vue
@@ -1,28 +1,45 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useRouteStore } from '@/stores/route'
+import { useTaxiStore } from '@/stores/taxi'
 import { analyticsService } from '@/services/analyticsService'
+import { useI18n } from 'vue-i18n'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 
+const { t } = useI18n()
 const router = useRouter()
 const routeStore = useRouteStore()
+const taxiStore = useTaxiStore()
 
+const activeTab = ref<'routes' | 'taxis'>('routes')
 const originSearch = ref('')
 const destinationSearch = ref('')
+const selectedCorregimiento = ref('')
+const englishOnly = ref(false)
 
 onMounted(async () => {
-  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Routes' })
-  await routeStore.loadRoutes()
+  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Transport' })
+  await Promise.all([
+    routeStore.loadRoutes(),
+    taxiStore.loadTaxis()
+  ])
 })
 
-const handleSearch = async () => {
+const handleBusSearch = async () => {
   await routeStore.loadRoutes({
     originCity: originSearch.value,
     destinationCity: destinationSearch.value
   })
 }
 
+const handleTaxiFilter = async () => {
+  await taxiStore.loadTaxis({
+    corregimiento: selectedCorregimiento.value || undefined,
+    english_speaking: englishOnly.value || undefined
+  })
+}
+
 const goToSchedules = (route: any) => {
   analyticsService.logEvent({ 
     event_name: 'route_selected', 
@@ -30,259 +47,239 @@ const goToSchedules = (route: any) => {
     properties: { route_id: route.id }
   })
   routeStore.selectRoute(route.id, route.name)
-  router.push('/schedules')
+  router.push({ path: '/schedules', query: { routeId: route.id } })
+}
+
+const callTaxi = (phoneNumber: string) => {
+  window.open(`tel:${phoneNumber}`)
+}
+
+const correlimientos = computed(() => {
+  const set = new Set(taxiStore.taxis.map(t => t.corregimiento).filter(Boolean))
+  return Array.from(set).sort()
+})
+
+const getStatusClass = (status: string) => {
+  if (status === 'active') return 'bg-emerald-100 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-400'
+  return 'bg-slate-100 dark:bg-zinc-800 text-slate-500 dark:text-zinc-400'
 }
 </script>
 
 <template>
-  <div class="routes-view">
-    <div class="header">
-      <h1>Búsqueda de Rutas</h1>
-      <p>Encuentra tu próximo viaje fácilmente</p>
-    </div>
-
-    <div class="search-box">
-      <div class="input-group">
-        <span class="material-icons">location_on</span>
-        <input 
-          v-model="originSearch" 
-          placeholder="Origen (Ciudad)"
-          @keyup.enter="handleSearch"
-        >
-      </div>
-      <div class="divider">
-        <span class="material-icons">swap_vert</span>
-      </div>
-      <div class="input-group">
-        <span class="material-icons">flag</span>
-        <input 
-          v-model="destinationSearch" 
-          placeholder="Destino (Ciudad)"
-          @keyup.enter="handleSearch"
-        >
-      </div>
-      <button @click="handleSearch" class="search-btn">
-        <span class="material-icons">search</span>
-        Buscar Rutas
+  <div class="transport-view bg-white dark:bg-background-dark min-h-screen text-slate-900 dark:text-white pb-32">
+    <!-- Header -->
+    <div class="px-6 pt-12 pb-4 flex items-center justify-between sticky top-0 z-50 bg-white/80 dark:bg-background-dark/80 backdrop-blur-md">
+      <button @click="router.back()" class="size-10 flex items-center justify-center rounded-full bg-slate-100 dark:bg-card-dark text-slate-600 dark:text-gray-300 active:scale-95 transition-transform">
+        <span class="material-icons text-[20px]">arrow_back</span>
       </button>
+      <h1 class="text-xl font-extrabold tracking-tight text-primary uppercase italic">SIBU</h1>
+      <div class="size-10"></div>
     </div>
 
-    <div v-if="routeStore.isLoadingRoutes" class="loading">
-      <div class="spinner"></div>
-      <p>Buscando mejores rutas...</p>
-    </div>
+    <div class="px-6 py-2 space-y-6">
+      <!-- Tabs Selector -->
+      <div class="bg-slate-50 dark:bg-card-dark rounded-[2.5rem] p-1.5 flex shadow-inner border border-slate-200 dark:border-white/5">
+        <button 
+          @click="activeTab = 'routes'"
+          class="flex-1 py-3 px-4 rounded-[2rem] flex items-center justify-center gap-2 text-sm font-bold transition-all"
+          :class="activeTab === 'routes' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
+        >
+          <span class="material-icons text-lg">directions_bus</span>
+          Rutas de Bus
+        </button>
+        <button 
+          @click="activeTab = 'taxis'"
+          class="flex-1 py-3 px-4 rounded-[2rem] flex items-center justify-center gap-2 text-sm font-bold transition-all"
+          :class="activeTab === 'taxis' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
+        >
+          <span class="material-icons text-lg">local_taxi</span>
+          Taxis Locales
+        </button>
+      </div>
 
-    <div v-else-if="routeStore.allRoutes.length === 0" class="no-results">
-        <span class="material-icons">sentiment_dissatisfied</span>
-        <p>No encontramos rutas que coincidan con tu búsqueda.</p>
-        <button @click="originSearch = ''; destinationSearch = ''; handleSearch()" class="reset-btn">Ver todas las rutas</button>
-    </div>
-
-    <div v-else class="routes-list">
-      <div 
-        v-for="route in routeStore.allRoutes" 
-        :key="route.id" 
-        class="route-card"
-        @click="goToSchedules(route)"
-      >
-        <div class="route-header">
-          <div class="route-name">
-            <span class="dot" :style="{ backgroundColor: route.color || '#fee715' }"></span>
-            <h3>{{ route.name }}</h3>
+      <!-- Search Panel -->
+      <div class="bg-slate-50 dark:bg-card-dark rounded-[2.5rem] p-6 shadow-xl border border-slate-200 dark:border-white/10">
+        <div v-if="activeTab === 'routes'" class="space-y-4">
+          <div class="relative group">
+            <div class="flex items-center gap-3 px-4 h-14 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-input-dark">
+              <span class="material-icons text-primary font-bold">location_on</span>
+              <input 
+                v-model="originSearch"
+                @keyup.enter="handleBusSearch"
+                class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full placeholder:text-slate-400 dark:placeholder:text-gray-500"
+                placeholder="Ciudad de Origen"
+              />
+            </div>
           </div>
-          <div class="route-actions">
-            <FavoriteButton 
-              item-type="route" 
-              :item-id="route.id" 
-              :item-name="route.name"
-            />
-            <span class="material-icons chevron">chevron_right</span>
+          <div class="relative group">
+            <div class="flex items-center gap-3 px-4 h-14 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-input-dark">
+              <span class="material-icons text-primary font-bold">flag</span>
+              <input 
+                v-model="destinationSearch"
+                @keyup.enter="handleBusSearch"
+                class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full placeholder:text-slate-400 dark:placeholder:text-gray-500"
+                placeholder="Ciudad de Destino"
+              />
+            </div>
           </div>
+          <button @click="handleBusSearch" class="w-full bg-primary py-4 rounded-2xl text-slate-900 font-bold uppercase tracking-widest text-xs shadow-lg active:scale-95 transition-all">
+            Buscar Rutas
+          </button>
         </div>
-        <div class="route-details">
-          <div class="city-flow">
-            <span>{{ route.origin_city }}</span>
-            <span class="material-icons">arrow_forward</span>
-            <span>{{ route.destination_city }}</span>
+
+        <div v-else class="flex gap-4">
+          <div class="flex-1 space-y-4">
+            <div class="relative">
+              <div class="flex items-center gap-3 px-4 h-14 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-input-dark">
+                <span class="material-icons text-primary font-bold">near_me</span>
+                <select 
+                  v-model="selectedCorregimiento"
+                  @change="handleTaxiFilter"
+                  class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full dark:text-gray-200 appearance-none cursor-pointer"
+                >
+                  <option value="">Todos los corregimientos</option>
+                  <option v-for="c in correlimientos" :key="c" :value="c">{{ c }}</option>
+                </select>
+                <span class="material-icons ml-auto text-gray-500 text-sm">unfold_more</span>
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col items-center justify-center px-2">
+            <span class="text-[10px] font-black text-slate-400 dark:text-gray-400 mb-2 uppercase">Inglés</span>
+            <div 
+              @click="englishOnly = !englishOnly; handleTaxiFilter()"
+              class="size-10 rounded-lg border-2 border-primary flex items-center justify-center bg-transparent cursor-pointer transition-colors"
+              :class="englishOnly ? 'bg-primary' : ''"
+            >
+              <span class="material-icons text-slate-900" v-if="englishOnly">check</span>
+            </div>
           </div>
-          <p v-if="route.distance_km" class="meta">
-            {{ route.distance_km }} km • {{ route.estimated_duration_minutes }} min aprox.
-          </p>
         </div>
       </div>
     </div>
+
+    <!-- Results Area -->
+    <div class="flex-1 px-6 pt-8 space-y-4 pb-32">
+      <h2 class="text-[11px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.15em] mb-4">
+        {{ activeTab === 'routes' ? 'Rutas Disponibles' : 'Conductores Recomendados' }}
+      </h2>
+
+      <!-- Loading Results -->
+      <div v-if="routeStore.isLoadingRoutes || taxiStore.isLoading" class="flex justify-center py-10">
+        <div class="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
+      </div>
+
+      <!-- Bus Routes List -->
+      <template v-else-if="activeTab === 'routes'">
+        <div 
+          v-for="route in routeStore.allRoutes" 
+          :key="route.id"
+          class="bg-slate-50 dark:bg-card-dark p-5 rounded-[2rem] shadow-sm border border-slate-200 dark:border-white/5 flex flex-col gap-4 active:scale-[0.98] transition-all cursor-pointer"
+          @click="goToSchedules(route)"
+        >
+          <div class="flex justify-between items-center">
+            <div class="flex items-center gap-4">
+              <div class="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary">
+                <span class="material-icons text-[32px]">directions_bus</span>
+              </div>
+              <div>
+                <div class="flex items-center gap-2">
+                  <p class="font-extrabold text-xl">{{ route.name }}</p>
+                  <span class="px-2 py-0.5 rounded-full bg-primary text-[9px] font-black uppercase tracking-wider text-slate-900">ACTIVA</span>
+                </div>
+                <p class="text-[11px] text-slate-500 dark:text-gray-400 font-bold uppercase tracking-tight">
+                  {{ route.origin_city }} → {{ route.destination_city }}
+                </p>
+              </div>
+            </div>
+            <div class="text-right">
+              <FavoriteButton 
+                item-type="route" 
+                :item-id="route.id" 
+                :item-name="route.name"
+              />
+            </div>
+          </div>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 bg-white dark:bg-input-dark px-3 py-2 rounded-xl border border-slate-200 dark:border-white/5">
+              <span class="text-[10px] font-black dark:text-gray-200">{{ route.estimated_duration_minutes }} min • {{ route.distance_km }} km</span>
+            </div>
+            <button class="bg-primary px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm hover:brightness-110 text-slate-900 transition-all">
+              Ver Horarios
+            </button>
+          </div>
+        </div>
+        <div v-if="routeStore.allRoutes.length === 0" class="text-center py-10 opacity-50 italic">
+          No se encontraron rutas para tu búsqueda.
+        </div>
+      </template>
+
+      <!-- Taxis List -->
+      <template v-else>
+        <div 
+          v-for="taxi in taxiStore.taxis" 
+          :key="taxi.id"
+          class="bg-slate-50 dark:bg-card-dark p-5 rounded-[2rem] shadow-sm border border-slate-200 dark:border-white/5 flex flex-col gap-4 active:scale-[0.98] transition-all"
+        >
+          <div class="flex justify-between items-center">
+            <div class="flex items-center gap-4">
+              <div class="size-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary overflow-hidden">
+                <img v-if="taxi.image_url" :src="taxi.image_url" class="w-full h-full object-cover">
+                <span v-else class="material-icons text-[32px]">local_taxi</span>
+              </div>
+              <div>
+                <div class="flex items-center gap-2">
+                  <p class="font-extrabold text-xl">{{ taxi.owner_name }}</p>
+                  <span class="px-2 py-0.5 rounded-full bg-primary text-[9px] font-black uppercase tracking-wider text-slate-900">PRO</span>
+                </div>
+                <p class="text-[11px] text-slate-500 dark:text-gray-400 font-bold uppercase tracking-tight">
+                  {{ taxi.corregimiento }} • {{ taxi.license_plate }}
+                </p>
+              </div>
+            </div>
+            <div class="text-right">
+              <p class="font-black text-xl text-primary">{{ taxi.shift }}</p>
+            </div>
+          </div>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2 bg-white dark:bg-input-dark px-3 py-2 rounded-xl border border-slate-200 dark:border-white/5">
+              <span class="text-[10px] font-black dark:text-gray-200">{{ taxi.rating || 5.0 }} ★</span>
+              <span v-if="taxi.english_speaking" class="text-[10px] font-black text-blue-500 uppercase">EN</span>
+            </div>
+            <button 
+              @click="callTaxi(taxi.phone_number)"
+              class="bg-primary px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm hover:brightness-110 text-slate-900 transition-all"
+            >
+              Contactar
+            </button>
+          </div>
+        </div>
+        <div v-if="taxiStore.taxis.length === 0" class="text-center py-10 opacity-50 italic">
+          No hay taxis disponibles en esta zona.
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.routes-view {
-  padding: 24px;
-  background: var(--bg-primary);
-  min-height: 100vh;
+.transport-view {
+  font-family: 'Plus Jakarta Sans', sans-serif;
 }
 
-.header {
-  margin-bottom: 32px;
+.bg-background-dark {
+  background-color: #0F1115;
 }
 
-.header h1 {
-  font-size: 28px;
-  font-weight: 800;
-  color: var(--text-primary);
-  margin-bottom: 4px;
+.bg-card-dark {
+  background-color: #1C1F26;
 }
 
-.header p {
-  color: var(--text-secondary);
-  font-size: 16px;
+.bg-input-dark {
+  background-color: #252932;
 }
 
-.search-box {
-  background: var(--card-bg);
-  border-radius: 24px;
-  padding: 24px;
-  box-shadow: 0 10px 30px var(--shadow);
-  margin-bottom: 32px;
-}
-
-.input-group {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  background: var(--bg-secondary);
-  padding: 12px 20px;
-  border-radius: 16px;
-}
-
-.input-group input {
-  border: none;
-  background: transparent;
-  width: 100%;
-  font-size: 16px;
-  font-weight: 500;
+select {
   outline: none;
 }
-
-.divider {
-  display: flex;
-  justify-content: center;
-  margin: 8px 0;
-  color: var(--text-secondary);
-}
-
-.search-btn {
-  width: 100%;
-  margin-top: 20px;
-  background: var(--header-bg);
-  color: var(--header-text);
-  border: none;
-  padding: 16px;
-  border-radius: 16px;
-  font-weight: 800;
-  font-size: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-
-.search-btn:active {
-  transform: scale(0.98);
-}
-
-.routes-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.route-card {
-  background: var(--card-bg);
-  border-radius: 20px;
-  padding: 20px;
-  cursor: pointer;
-  box-shadow: 0 4px 15px var(--shadow);
-  transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.route-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
-}
-
-.route-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.route-name {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-}
-
-.route-name h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-}
-
-.city-flow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 500;
-  color: var(--text-primary);
-  margin-bottom: 4px;
-}
-
-.route-actions {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.chevron {
-  color: #ced4da;
-}
-
-.loading, .no-results {
-  text-align: center;
-  padding: 60px 20px;
-  color: #666;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #fee715;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin: 0 auto 16px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.reset-btn {
-  margin-top: 16px;
-  background: transparent;
-  border: 1px solid #dee2e6;
-  padding: 8px 16px;
-  border-radius: 8px;
-  cursor: pointer;
-}
 </style>
diff --git a/frontend/src/views/SchedulesView.vue b/frontend/src/views/SchedulesView.vue
index 61cdc32..5b1f155 100644
--- a/frontend/src/views/SchedulesView.vue
+++ b/frontend/src/views/SchedulesView.vue
@@ -5,7 +5,6 @@ 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()
@@ -15,27 +14,14 @@ const router = useRouter()
 const scheduleStore = useScheduleStore()
 const routeStore = useRouteStore()
 
-const showRouteDropdown = ref(false)
-const routeCardRef = ref<HTMLElement | null>(null)
-
-// Close dropdown when clicking outside
-function handleClickOutside(event: MouseEvent) {
-  if (routeCardRef.value && !routeCardRef.value.contains(event.target as Node)) {
-    showRouteDropdown.value = false
-  }
-}
-
 onMounted(async () => {
   analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Schedules' })
-  document.addEventListener('click', handleClickOutside)
   await routeStore.loadRoutes()
 
-  // Point 1: Smart synchronization from MapView
   const queryRouteId = route.query.routeId as string
   if (queryRouteId) {
     const foundRoute = routeStore.allRoutes.find(r => r.id === queryRouteId)
     if (foundRoute) {
-      // FIX: Use sync function to avoid redirect loop back to map
       syncRouteSelection(foundRoute.id, foundRoute.name)
     }
   }
@@ -54,14 +40,12 @@ const unwatchQuery = watch(
 )
 
 onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
   unwatchQuery()
 })
 
 function syncRouteSelection(routeId: string, routeName: string) {
   routeStore.selectRoute(routeId, routeName)
   scheduleStore.loadRouteSchedules(routeId)
-  showRouteDropdown.value = false
 }
 
 function selectRouteAndClose(routeId: string, routeName: string) {
@@ -73,7 +57,6 @@ function selectRouteAndClose(routeId: string, routeName: string) {
   
   routeStore.selectRoute(routeId, routeName)
   scheduleStore.loadRouteSchedules(routeId)
-  showRouteDropdown.value = false
 }
 
 function goToMap() {
@@ -84,457 +67,148 @@ function goToMap() {
     })
   }
 }
-
-function clearRouteAndClose() {
-  routeStore.clearSelection()
-  scheduleStore.schedules = []
-  showRouteDropdown.value = false
-}
 </script>
 
 <template>
-  <div class="schedules-view">
-    <h1>{{ t('schedules.title') }}</h1>
-    
-    <div v-if="routeStore.isLoadingRoutes">
-      <p>{{ t('schedules.loadingRoutes') }}</p>
-    </div>
-    
-    <div v-else-if="routeStore.allRoutes.length === 0">
-      <p>{{ t('schedules.noRoutesAvailable') }}</p>
-    </div>
-    
-    <div v-else>
-      <!-- Quick Select Route Buttons (Nexus Style) -->
-      <div class="quick-routes-container">
-        <div 
-          v-for="route in routeStore.allRoutes" 
-          :key="route.id"
-          class="route-chip-nexus"
-          :class="{ 'active': route.id === routeStore.selectedRouteId }"
-          @click="selectRouteAndClose(route.id, route.name)"
-        >
-          <span class="material-icons chip-icon">directions_bus</span>
-          <span class="chip-text">{{ route.name }}</span>
-          <div v-if="route.id === routeStore.selectedRouteId" class="active-dot"></div>
-        </div>
-      </div>
-
-      <!-- Route selector card (As backup/dropdown) -->
-      <div class="route-card" ref="routeCardRef">
-        <div class="route-card-content" @click.stop="showRouteDropdown = !showRouteDropdown">
-          <span class="material-icons route-icon">search</span>
-          <div class="route-info">
-            <div v-if="routeStore.selectedRouteId && routeStore.selectedRouteName" class="route-name">
-              {{ routeStore.selectedRouteName }}
-            </div>
-            <div v-else class="route-name">Buscar otra ruta...</div>
-          </div>
-          <span class="material-icons arrow-icon" :class="{ 'rotated': showRouteDropdown }">
-            keyboard_arrow_down
-          </span>
-        </div>
-        
-        <!-- Dropdown menu -->
-        <div v-if="showRouteDropdown" class="route-dropdown" @click.stop>
-          <div
-            v-for="route in routeStore.allRoutes"
-            :key="route.id"
-            class="route-option"
-            :class="{ 'selected': route.id === routeStore.selectedRouteId }"
-            @click="selectRouteAndClose(route.id, route.name)"
-          >
-            {{ route.name }}
-          </div>
-        </div>
+  <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>
       
-      <div v-if="routeStore.selectedRouteId" class="schedules-content">
-        <div class="schedules-header">
-          <h2 v-if="routeStore.selectedRouteName">{{ routeStore.selectedRouteName }}</h2>
-          <button class="view-route-btn" @click="goToMap">
-            <span class="material-icons">map</span>
-            Ver ruta
-          </button>
-        </div>
-        
-        <div v-if="scheduleStore.isLoading" class="schedules-loading">
-          <span class="material-icons spin">refresh</span>
-          <p>Cargando horarios...</p>
-        </div>
-        
-        <div v-else-if="scheduleStore.error" class="schedules-error">
-          <p>{{ scheduleStore.error }}</p>
-        </div>
-        
-        <div v-else-if="scheduleStore.schedules.length > 0">
-          <ul class="schedule-list">
-            <li v-for="schedule in scheduleStore.schedules" :key="schedule.id" class="schedule-item">
-              <div class="schedule-item-info">
-                <span class="material-icons">schedule</span>
-                <span class="departure-time">{{ formatTo12Hour(schedule.departure_time) }}</span>
-              </div>
-              <span class="schedule-type">{{ schedule.schedule_type }}</span>
-            </li>
-          </ul>
-        </div>
-        
-        <div v-else class="schedules-empty">
-          <span class="material-icons">event_busy</span>
-          <p>No hay horarios disponibles para esta ruta.</p>
+      <!-- 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">
+          <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" 
+            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="route in routeStore.allRoutes" :key="route.id" :value="route.id">
+              {{ route.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>
         </div>
       </div>
-    </div>
+    </header>
+
+    <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>
+      </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>
+          </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>
+        </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>
+        </div>
+
+        <div v-else class="space-y-4">
+          <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"
+          >
+            <div class="flex items-center gap-4">
+              <div class="text-3xl font-extrabold tracking-tighter text-slate-900 dark:text-white">
+                {{ 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>
+            </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'"
+            >
+              {{ t(`schedules.types.${schedule.schedule_type}`) || schedule.schedule_type }}
+            </span>
+          </div>
+        </div>
+      </template>
+    </main>
+
+    <!-- Botón Flotante para ir al Mapa -->
+    <Transition name="fade">
+      <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"
+      >
+        <span class="material-icons text-3xl">map</span>
+      </button>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
-.schedules-view {
-  min-height: 100vh;
-  position: relative;
-  padding: 1.5rem 1rem 150px;
-  color: var(--text-primary);
+.schedules-view-redesign {
+  font-family: 'Plus Jakarta Sans', sans-serif;
   overflow-x: hidden;
-  background: var(--bg-primary) !important;
 }
 
-
-/* Asegurar que el contenido flote sobre el fondo */
-.schedules-view > * {
-  position: relative;
-  z-index: 1;
+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;
 }
 
-.schedules-view h1 {
-  font-size: 2.2rem;
-  font-weight: 800;
-  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
-  margin-bottom: 2rem;
-  text-align: center;
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-.quick-routes-container {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 12px;
-  margin-bottom: 24px;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
 }
 
-.route-chip-nexus {
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid var(--border-color);
-  padding: 12px 20px;
-  border-radius: 16px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  position: relative;
-  overflow: hidden;
+/* Transiciones para la lista */
+.space-y-4 > * {
+  animation: slideUp 0.4s ease-out forwards;
 }
 
-.route-chip-nexus:hover {
-  background: rgba(254, 231, 21, 0.1);
-  border-color: var(--active-color);
-  transform: translateY(-2px);
-}
-
-.route-chip-nexus.active {
-  background: var(--active-color);
-  border-color: var(--active-color);
-  color: #101820;
-  box-shadow: 0 8px 20px rgba(254, 231, 21, 0.3);
-}
-
-.chip-icon {
-  font-size: 20px;
-  color: var(--active-color);
-}
-
-.route-chip-nexus.active .chip-icon {
-  color: #101820;
-}
-
-.chip-text {
-  font-weight: 800;
-  font-size: 0.9rem;
-  letter-spacing: 0.5px;
-}
-
-.active-dot {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  width: 6px;
-  height: 6px;
-  background: #101820;
-  border-radius: 50%;
-}
-
-.route-card {
-  margin-bottom: 2rem;
-  max-width: 400px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.route-card-content {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 18px;
-  background: var(--card-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  box-shadow: var(--shadow);
-  cursor: pointer;
-  transition: transform 0.2s ease, box-shadow 0.3s ease;
-}
-
-.route-card-content:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 30px rgba(0,0,0,0.2);
-}
-
-.route-card-content:active {
-  transform: scale(0.98);
-}
-
-.route-icon {
-  color: var(--active-color);
-  font-size: 28px;
-}
-
-.route-info {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.route-name {
-  font-size: 1.1rem;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.route-stops {
-  font-size: 0.9rem;
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-
-.arrow-icon {
-  color: var(--text-secondary);
-  font-size: 24px;
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.arrow-icon.rotated {
-  transform: rotate(180deg);
-  color: var(--active-color);
-}
-
-.route-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  margin-top: 10px;
-  background: var(--card-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--border-color);
-  border-radius: 16px;
-  box-shadow: var(--shadow);
-  max-height: 250px;
-  overflow-y: auto;
-  z-index: 100;
-}
-
-.route-option {
-  padding: 14px 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border-bottom: 1px solid var(--border-color);
-  color: var(--text-primary);
-  font-weight: 500;
-}
-
-.route-option:last-child {
-  border-bottom: none;
-}
-
-.route-option:hover {
-  background-color: var(--hover-bg);
-  padding-left: 24px;
-}
-
-.route-option.selected {
-  background-color: var(--active-bg);
-  color: var(--active-color);
-  font-weight: 700;
-}
-
-.route-option.clear-option {
-  color: #ef4444; /* Rojo para limpiar */
-  font-weight: 600;
-  text-align: center;
-}
-
-.schedules-content {
-  margin-top: 1.5rem;
-  background: var(--card-bg);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  padding: 24px;
-  border: 1px solid var(--border-color);
-  border-radius: 24px;
-  box-shadow: var(--shadow);
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.schedules-content h2 {
-  text-align: center;
-  margin-bottom: 1.5rem;
-  color: var(--active-color);
-  font-size: 1.5rem;
-  font-weight: 800;
-}
-
-.schedules-loading, .schedules-empty, .schedules-error {
-  text-align: center;
-  padding: 40px 20px;
-}
-
-.spin {
-  animation: spin 1s linear infinite;
-  font-size: 3rem;
-  color: var(--active-color);
-  margin-bottom: 16px;
-  display: inline-block;
-}
-
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.schedule-list {
-  list-style: none;
-  padding: 0;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.schedule-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  background: var(--bg-secondary);
-  border-radius: 16px;
-  border: 1px solid var(--border-color);
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-}
-
-.schedule-item:hover {
-  transform: translateY(-3px) scale(1.02);
-  border-color: var(--active-color);
-  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
-}
-
-.schedule-item-info {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.schedule-item .material-icons {
-  color: var(--active-color);
-}
-
-.departure-time {
-  font-size: 1.3rem;
-  font-weight: 800;
-  color: var(--text-primary);
-  letter-spacing: -0.5px;
-}
-
-.schedule-type {
-  font-size: 0.75rem;
-  font-weight: 700;
-  padding: 5px 10px;
-  background: var(--active-bg);
-  color: var(--active-color);
-  border-radius: 8px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.schedules-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2rem;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.schedules-header h2 {
-  margin-bottom: 0 !important;
-  text-align: left !important;
-  flex: 1;
-}
-
-.view-route-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  background: #FEE715;
-  color: #101820;
-  border: none;
-  border-radius: 12px;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-}
-
-.view-route-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-  filter: brightness(1.1);
-}
-
-.view-route-btn:active {
-  transform: translateY(0);
-}
-
-@media (max-width: 600px) {
-  .schedules-header {
-    flex-direction: column;
-    text-align: center;
-  }
-  .schedules-header h2 {
-    text-align: center !important;
-  }
-  .view-route-btn {
-    width: 100%;
-    justify-content: center;
-  }
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 </style>
-
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 09fd44f..d31aa60 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -2,12 +2,14 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import { VitePWA } from 'vite-plugin-pwa'
+import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    tailwindcss(),
     VueDevTools(),
     VitePWA({
       registerType: 'autoUpdate',