feat: version 2.17.6 -- Panel: "Proyectos atrasados" en porcentaje con "N de M"

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/components/KpiCard.jsx

@@ -1,12 +1,13 @@
 // Medidor semicircular (tipo odometro): arco de fondo + arco relleno segun ratio (0..1), con el
 // valor del KPI al centro. Sin libreria -- un SVG con stroke-dasharray sobre el semicirculo.
-function Gauge({ ratio, color, value }) {
+function Gauge({ ratio, color, value, caption }) {
   const r = 40;
   const length = Math.PI * r;
   const clamped = Math.max(0, Math.min(1, ratio || 0));
   const arc = `M ${50 - r} 50 A ${r} ${r} 0 0 1 ${50 + r} 50`;
   return (
     <div className="kpi-gauge">
+      <div className="kpi-gauge-dial">
       <svg viewBox="0 0 100 56" aria-hidden="true">
         <path d={arc} fill="none" stroke="rgb(var(--line))" strokeWidth="9" strokeLinecap="round" />
         <path
@@ -16,6 +17,8 @@ function Gauge({ ratio, color, value }) {
         />
       </svg>
       <div className="kpi-gauge-value">{value}</div>
+      </div>
+      {caption && <div className="kpi-gauge-caption">{caption}</div>}
     </div>
   );
 }
@@ -30,7 +33,7 @@ export function KpiCard({ label, value, gauge, onClick, selected }) {
       tabIndex={clickable ? 0 : undefined}
       onKeyDown={clickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}
     >
-      {gauge ? <Gauge ratio={gauge.ratio} color={gauge.color} value={value} /> : <div className="kpi-value">{value}</div>}
+      {gauge ? <Gauge ratio={gauge.ratio} color={gauge.color} value={value} caption={gauge.caption} /> : <div className="kpi-value">{value}</div>}
       <div className="kpi-label">{label}</div>
     </div>
   );