mejora ui

client/src/components/EventChart.vue

@@ -245,7 +245,8 @@ function friendlyEventName(eventType: string): string {
   box-shadow: 0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.4); 
   backdrop-filter: blur(8px) saturate(120%); 
   -webkit-backdrop-filter: blur(8px) saturate(120%); 
-  transition: all 0.3s ease; 
+  transition: all 0.3s ease;
+  min-width: 160px;
 }
 
 .bar-row:hover .bar-chip { 
@@ -254,7 +255,7 @@ function friendlyEventName(eventType: string): string {
 }
 
 .event-icon { 
-  font-size: 14px; 
+  font-size: 16px; 
 }
 
 .chip-label { 
@@ -262,16 +263,18 @@ function friendlyEventName(eventType: string): string {
   color: #0f172a; 
   letter-spacing: .1px; 
   white-space: nowrap; 
-  font-size: 13px; 
+  font-size: 14px; 
+  flex: 1;
+  text-align: center;
 }
 
 .chip-count { 
-  padding: 2px 6px; 
+  padding: 3px 8px; 
   border-radius: 999px; 
   font-weight: 800; 
-  font-size: 11px; 
+  font-size: 12px; 
   box-shadow: 0 1px 3px rgba(0,0,0,0.06); 
-  margin-left: 2px; 
+  margin-left: 4px; 
 }
 
 .chip-count.global { 
@@ -306,4 +309,91 @@ function friendlyEventName(eventType: string): string {
   font-size: 12px; 
   color: #64748b; 
 }
+
+/* Responsive chip sizing */
+@media (min-width: 1200px) {
+  .bar-chip {
+    min-width: 200px;
+    padding: 6px 12px;
+    gap: 8px;
+  }
+  
+  .event-icon {
+    font-size: 16px;
+  }
+  
+  .chip-label {
+    font-size: 14px;
+  }
+  
+  .chip-count {
+    padding: 3px 8px;
+    font-size: 12px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .bar-chip {
+    min-width: 140px;
+    padding: 5px 10px;
+    gap: 6px;
+  }
+  
+  .event-icon {
+    font-size: 14px;
+  }
+  
+  .chip-label {
+    font-size: 12px;
+  }
+  
+  .chip-count {
+    padding: 2px 6px;
+    font-size: 10px;
+  }
+}
+
+@media (max-width: 767px) {
+  .bar-chip {
+    min-width: 120px;
+    padding: 4px 8px;
+    gap: 4px;
+  }
+  
+  .event-icon {
+    font-size: 12px;
+  }
+  
+  .chip-label {
+    font-size: 11px;
+  }
+  
+  .chip-count {
+    padding: 2px 4px;
+    font-size: 9px;
+    margin-left: 2px;
+  }
+}
+
+@media (max-width: 480px) {
+  .bar-chip {
+    min-width: 100px;
+    padding: 3px 6px;
+    gap: 3px;
+  }
+  
+  .event-icon {
+    font-size: 11px;
+  }
+  
+  .chip-label {
+    font-size: 10px;
+  }
+  
+  .chip-count {
+    padding: 1px 3px;
+    font-size: 8px;
+    margin-left: 1px;
+  }
+}
 </style>