feat: version 2.17.10 -- Panel: medidor en "Avance promedio"

Ademas: sin punto suelto en 0% y letra reducida para valores largos.

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

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog - project.linkedcorp.net
 
+## [2.17.10] - 2026-10-21
+### Changed
+- Panel → "Avance promedio": medidor (verde) con el porcentaje al centro.
+### Fixed
+- Medidores del Panel: en 0% ya no aparece un punto suelto al inicio del arco, y los valores
+  largos (ej. "38.96%") usan letra más chica para no tocar el arco.
+
 ## [2.17.9] - 2026-10-21
 ### Changed
 - Panel → "Actividades vencidas": mismo modelo. Medidor con el porcentaje de vencidas sobre el

VERSION

@@ -1 +1 @@
-2.17.9
+2.17.10

backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-linkedcorp-backend",
-  "version": "2.17.9",
+  "version": "2.17.10",
   "private": true,
   "type": "module",
   "main": "src/server.js",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "project-linkedcorp-frontend",
   "private": true,
-  "version": "2.17.9",
+  "version": "2.17.10",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/KpiCard.jsx

@@ -10,13 +10,16 @@ function Gauge({ ratio, color, value, caption }) {
       <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
-          d={arc} fill="none" stroke={`rgb(var(--${color}))`} strokeWidth="9" strokeLinecap="round"
-          strokeDasharray={`${length * clamped} ${length}`}
-          style={{ transition: 'stroke-dasharray .6s ease' }}
-        />
+        {/* En 0 no se dibuja: con strokeLinecap="round" quedaria un punto suelto al inicio del arco. */}
+        {clamped > 0 && (
+          <path
+            d={arc} fill="none" stroke={`rgb(var(--${color}))`} strokeWidth="9" strokeLinecap="round"
+            strokeDasharray={`${length * clamped} ${length}`}
+            style={{ transition: 'stroke-dasharray .6s ease' }}
+          />
+        )}
       </svg>
-      <div className="kpi-gauge-value">{value}</div>
+      <div className={`kpi-gauge-value ${String(value).length > 5 ? 'long' : ''}`}>{value}</div>
       </div>
       {caption && <div className="kpi-gauge-caption">{caption}</div>}
     </div>

frontend/src/pages/Dashboard/DashboardPage.jsx

@@ -121,7 +121,11 @@ export default function DashboardPage() {
           selected={detail === 'overdueActivities'}
         />
         <KpiCard label={t('dashboard_today_activities')} value={kpis.todayActivities} />
-        <KpiCard label={t('dashboard_average_progress')} value={`${kpis.averageProgress}%`} />
+        <KpiCard
+          label={t('dashboard_average_progress')}
+          value={`${kpis.averageProgress}%`}
+          gauge={{ ratio: Number(kpis.averageProgress) / 100, color: 'success' }}
+        />
       </div>
 
       {detail === 'overdue' && (

frontend/src/styles/app.css

@@ -248,6 +248,7 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
 .kpi-gauge-dial { position: relative; }
 .kpi-gauge svg { display: block; width: 100%; }
 .kpi-gauge-value { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 1; }
+.kpi-gauge-value.long { font-size: 1.05rem; }
 .kpi-gauge-caption { text-align: center; font-size: .68rem; color: rgb(var(--muted)); margin-top: 2px; }
 .panel-card { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: var(--r-lg); padding: 16px; margin-bottom: 16px; }
 .panel-card h3 { margin: 0 0 12px; font-size: .95rem; }