filtros UI/UX mejorado

client/src/components/EventFilters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="filters-container glass light">
+  <div class="filters-container" :class="{ compact }">
     <div class="filter-group">
       <label class="filter-label">Ronda:</label>
       <div class="filter-buttons">
@@ -70,9 +70,10 @@ interface Props {
   gameFilter: GameFilterMulti;
   hasActiveFilters: boolean;
   filterSummary: string;
+  compact?: boolean;
 }
 
-defineProps<Props>();
+withDefaults(defineProps<Props>(), { compact: false });
 
 defineEmits<{
   'update:roundFilter': [value: RoundFilterMulti];
@@ -82,36 +83,26 @@ defineEmits<{
 </script>
 
 <style scoped>
-.glass.light { 
-  background: rgba(255, 255, 255, 0.78); 
-  border: 1px solid rgba(229, 231, 235, 0.9); 
-  box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6); 
-  backdrop-filter: blur(18px) saturate(120%); 
-  -webkit-backdrop-filter: blur(18px) saturate(120%); 
-  border-radius: 16px; 
-}
-
 .filters-container {
   display: flex;
-  gap: 20px;
-  padding: 12px 16px;
-  margin-bottom: 14px;
+  gap: 12px;
+  padding: 0;
+  margin: 0;
   align-items: center;
   flex-wrap: wrap;
 }
 
+.filters-container.compact {
+  gap: 8px;
+}
+
 .filter-group {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.filter-label {
-  font-size: 14px;
-  font-weight: 700;
-  color: #334155;
-  min-width: 60px;
-}
+.filter-label { font-size: 13px; font-weight: 700; color: #334155; min-width: 52px; }
 
 .filter-buttons {
   display: flex;
@@ -120,13 +111,13 @@ defineEmits<{
 }
 
 .filter-btn {
-  padding: 8px 14px;
+  padding: 6px 10px;
   border-radius: 10px;
   border: 1px solid #e2e8f0;
   background: rgba(255,255,255,0.6);
   color: #64748b;
-  font-weight: 600;
-  font-size: 13px;
+  font-weight: 700;
+  font-size: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
@@ -151,18 +142,7 @@ defineEmits<{
   box-shadow: 0 6px 20px rgba(102,126,234,0.4);
 }
 
-.filter-summary {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-  border: 1px solid #0ea5e9;
-  border-radius: 999px;
-  color: #0c4a6e;
-  font-size: 13px;
-  font-weight: 600;
-}
+.filter-summary { display: none; }
 
 .summary-icon {
   font-size: 14px;
@@ -172,26 +152,7 @@ defineEmits<{
   white-space: nowrap;
 }
 
-.reset-btn {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: none;
-  background: rgba(239,68,68,0.1);
-  color: #dc2626;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 800;
-  transition: all 0.2s ease;
-}
-
-.reset-btn:hover {
-  background: rgba(239,68,68,0.2);
-  transform: scale(1.1);
-}
+.reset-btn { display: none; }
 
 @media (max-width: 768px) {
   .filters-container {