From 269691c900c0e40a4f4764d773f04ed3968ddd6b Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 22 Mar 2026 10:38:53 -0500
Subject: [PATCH] =?UTF-8?q?Refactor(transporte):=20remover=20=C3=ADconos?=
 =?UTF-8?q?=20de=20filtros=20y=20hacerlos=20m=C3=A1s=20compactos=20lado=20?=
 =?UTF-8?q?a=20lado?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/transporte/TaxisLocales.vue     | 47 +++++--------------
 .../src/views/transporte/ViajesTuristicos.vue | 39 ++++-----------
 2 files changed, 20 insertions(+), 66 deletions(-)

diff --git a/frontend/src/views/transporte/TaxisLocales.vue b/frontend/src/views/transporte/TaxisLocales.vue
index 3a7e20b..86e3675 100644
--- a/frontend/src/views/transporte/TaxisLocales.vue
+++ b/frontend/src/views/transporte/TaxisLocales.vue
@@ -116,9 +116,6 @@ function getShiftLabel(shift: string) {
         <div class="filter-card glass-effect">
           <div class="selectors-side">
             <div class="select-group-premium">
-              <div class="group-icon">
-                <span class="material-icons">location_on</span>
-              </div>
               <div class="group-content">
                 <label>{{ t('taxi.allZones') }}</label>
                 <select v-model="selectedZone">
@@ -128,9 +125,6 @@ function getShiftLabel(shift: string) {
               </div>
             </div>
             <div class="select-group-premium">
-              <div class="group-icon">
-                <span class="material-icons">schedule</span>
-              </div>
               <div class="group-content">
                 <label>{{ t('taxi.shift') }}</label>
                 <select v-model="selectedShift">
@@ -249,13 +243,13 @@ function getShiftLabel(shift: string) {
 }
 
 .filter-card {
-  border-radius: 1.5rem;
-  padding: 1.25rem;
+  border-radius: 1rem;
+  padding: 0.75rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
+  gap: 0.75rem;
   border: 1px solid var(--border-color);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   background: var(--card-bg);
 }
 
@@ -270,24 +264,18 @@ function getShiftLabel(shift: string) {
 .selectors-side {
   flex: 1;
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-}
-
-@media (min-width: 480px) {
-  .selectors-side {
-    grid-template-columns: 1fr 1fr;
-  }
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
 }
 
 .select-group-premium {
   display: flex;
   align-items: center;
-  gap: 0.875rem;
+  gap: 0.5rem;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  padding: 0.625rem 0.875rem;
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.75rem;
   transition: all 0.3s ease;
 }
 
@@ -296,17 +284,6 @@ function getShiftLabel(shift: string) {
   box-shadow: 0 0 0 3px rgba(254, 231, 21, 0.1);
 }
 
-.group-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  background: var(--bg-secondary);
-  border-radius: 0.75rem;
-  color: var(--active-color);
-}
-
 .group-content {
   flex: 1;
   display: flex;
@@ -338,11 +315,11 @@ function getShiftLabel(shift: string) {
 .lang-pill {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1.25rem;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 1rem;
+  border-radius: 0.75rem;
   font-weight: 700;
   font-size: 0.875rem;
   color: var(--text-secondary);
diff --git a/frontend/src/views/transporte/ViajesTuristicos.vue b/frontend/src/views/transporte/ViajesTuristicos.vue
index c9359c4..727f7a3 100644
--- a/frontend/src/views/transporte/ViajesTuristicos.vue
+++ b/frontend/src/views/transporte/ViajesTuristicos.vue
@@ -66,9 +66,6 @@ onUnmounted(() => {
         <div class="selectors-side">
           <!-- Ruta Select -->
           <div class="select-group-premium">
-            <div class="group-icon">
-              <span class="material-icons">route</span>
-            </div>
             <div class="group-content">
               <label>{{ t('shuttle.category') || 'Categoría' }}</label>
               <select v-model="shuttleCategoryFilter">
@@ -81,9 +78,6 @@ onUnmounted(() => {
 
           <!-- Tipo de Viaje Select -->
           <div class="select-group-premium">
-            <div class="group-icon">
-              <span class="material-icons">sync_alt</span>
-            </div>
             <div class="group-content">
               <label>{{ t('shuttle.tripType') }}</label>
               <select v-model="shuttleTypeFilter">
@@ -192,33 +186,27 @@ onUnmounted(() => {
 }
 
 .filter-card {
-  border-radius: 1.5rem;
-  padding: 1.25rem;
+  border-radius: 1rem;
+  padding: 0.75rem 1rem;
   border: 1px solid var(--border-color);
   background: var(--card-bg);
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }
 
 .selectors-side {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 1rem;
-}
-
-@media (min-width: 640px) {
-  .selectors-side {
-    grid-template-columns: 1fr 1fr;
-  }
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
 }
 
 .select-group-premium {
   display: flex;
   align-items: center;
-  gap: 0.875rem;
+  gap: 0.5rem;
   background: var(--bg-primary);
   border: 1px solid var(--border-color);
-  border-radius: 1rem;
-  padding: 0.625rem 0.875rem;
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.75rem;
   transition: all 0.3s ease;
 }
 
@@ -226,17 +214,6 @@ onUnmounted(() => {
   border-color: var(--active-color);
 }
 
-.group-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  background: var(--bg-secondary);
-  border-radius: 0.75rem;
-  color: var(--active-color);
-}
-
 .group-content {
   flex: 1;
   display: flex;