filtros mejorados en leaderboard

client/src/components/EventChart.vue

@@ -566,6 +566,15 @@ function friendlyEventName(eventType: string): string {
   text-align: center;
 }
 
+/* Place the group total just next to the title */
+.ratio-card .card-header {
+  justify-content: flex-start;
+  gap: 8px;
+}
+.ratio-card .group-total {
+  margin-left: 6px;
+}
+
 .ratio-bar {
   position: relative;
   height: 60px;

client/src/components/EventFilters.vue

@@ -5,8 +5,8 @@
       <div class="filter-buttons">
         <button 
           class="filter-btn" 
-          :class="{ active: roundFilter === 'all' }"
-          @click="$emit('update:roundFilter', 'all')"
+          :class="{ active: (roundFilter?.length||0) === 0 }"
+          @click="$emit('update:roundFilter', [])"
           title="Mostrar todas las rondas"
         >
           Todas
@@ -15,8 +15,8 @@
           v-for="r in [1, 2, 3]" 
           :key="r"
           class="filter-btn" 
-          :class="{ active: roundFilter === r }"
-          @click="$emit('update:roundFilter', r)"
+          :class="{ active: roundFilter?.includes(r) }"
+          @click="$emit('update:roundFilter', roundFilter?.includes(r) ? roundFilter.filter(x=>x!==r) : [...(roundFilter||[]), r])"
           :title="`Mostrar solo Round ${r}`"
         >
           R{{ r }}
@@ -29,8 +29,8 @@
       <div class="filter-buttons">
         <button 
           class="filter-btn" 
-          :class="{ active: gameFilter === 'all' }"
-          @click="$emit('update:gameFilter', 'all')"
+          :class="{ active: (gameFilter?.length||0) === 0 }"
+          @click="$emit('update:gameFilter', [])"
           title="Mostrar todas las variantes"
         >
           Todas
@@ -39,8 +39,8 @@
           v-for="g in ['G1', 'G2', 'G3', 'G4', 'G5']" 
           :key="g"
           class="filter-btn" 
-          :class="{ active: gameFilter === g }"
-          @click="$emit('update:gameFilter', g)"
+          :class="{ active: gameFilter?.includes(g) }"
+          @click="$emit('update:gameFilter', gameFilter?.includes(g) ? gameFilter.filter(x=>x!==g) : [...(gameFilter||[]), g])"
           :title="`Mostrar solo variante ${g}`"
         >
           {{ g }}
@@ -63,11 +63,11 @@
 </template>
 
 <script setup lang="ts">
-import type { RoundFilter, GameFilter } from '../composables/useEventFilters';
+import type { RoundFilterMulti, GameFilterMulti } from '../composables/useEventFilters';
 
 interface Props {
-  roundFilter: RoundFilter;
-  gameFilter: GameFilter;
+  roundFilter: RoundFilterMulti;
+  gameFilter: GameFilterMulti;
   hasActiveFilters: boolean;
   filterSummary: string;
 }
@@ -75,8 +75,8 @@ interface Props {
 defineProps<Props>();
 
 defineEmits<{
-  'update:roundFilter': [value: RoundFilter];
-  'update:gameFilter': [value: GameFilter];
+  'update:roundFilter': [value: RoundFilterMulti];
+  'update:gameFilter': [value: GameFilterMulti];
   'resetFilters': [];
 }>();
 </script>
@@ -229,4 +229,4 @@ defineEmits<{
     justify-content: center;
   }
 }
-</style>
+</style>