mejoras de UI

client/src/components/EventChart.vue

@@ -1,6 +1,22 @@
 <template>
   <div class="panel glass">
-    <h2 class="panel-title">Eventos y comparación</h2>
+    <div class="panel-header">
+      <h2 class="panel-title">Eventos y comparación</h2>
+      <div v-if="filtersCollapsed && (activeFilters?.hasFilters || selectedPlayerUuid)" class="active-filters-summary">
+        <span class="filter-tag" v-if="activeFilters?.dataSource !== 'aggregated'">
+          {{ activeFilters.dataSource === 'active-rooms' ? '🔴 Tiempo Real' : '📁 Agregado' }}
+        </span>
+        <span class="filter-tag" v-if="activeFilters?.round !== 'all'">
+          Round {{ activeFilters.round }}
+        </span>
+        <span class="filter-tag" v-if="activeFilters?.game !== 'all'">
+          {{ activeFilters.game }}
+        </span>
+        <span class="filter-tag player-tag" v-if="selectedPlayerUuid && activeFilters?.selectedPlayer">
+          👤 {{ activeFilters.selectedPlayer }}
+        </span>
+      </div>
+    </div>
     <div v-if="loading" class="placeholder">Cargando datos…</div>
     
     <!-- Regular bars view -->
@@ -101,6 +117,14 @@ interface Props {
   playerBarGradient: string;
   viewMode: 'count' | 'percent' | 'ratio';
   loading?: boolean;
+  filtersCollapsed?: boolean;
+  activeFilters?: {
+    dataSource: string;
+    round: string;
+    game: string;
+    hasFilters: boolean;
+    selectedPlayer?: string;
+  };
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -249,11 +273,42 @@ function friendlyEventName(eventType: string): string {
   border-radius: 16px; 
 }
 
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
 .panel-title { 
-  margin: 0 0 10px; 
+  margin: 0; 
   color: #334155; 
 }
 
+.active-filters-summary {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.filter-tag {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 700;
+  box-shadow: 0 2px 6px rgba(102,126,234,0.25);
+  white-space: nowrap;
+}
+
+.filter-tag.player-tag {
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  box-shadow: 0 2px 6px rgba(16,185,129,0.25);
+}
+
 .placeholder { 
   color: #64748b; 
   padding: 12px;