feat: version 2.17.9 -- Panel: medidor y detalle en "Actividades vencidas"

Base = actividades no eliminadas, no canceladas y de proyectos no cancelados;
el conteo de vencidas usa el mismo criterio (antes incluia eliminadas).

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

frontend/src/pages/Dashboard/DashboardPage.jsx

@@ -76,7 +76,9 @@ export default function DashboardPage() {
   const toggleDetail = (key) => setDetail((d) => (d === key ? null : key));
 
   if (!data) return <div className="text-muted">{t('common_loading')}</div>;
-  const { kpis, myActivities, projectsByStatus, overdueProjects, activeProjects, pendingActivities } = data;
+  const { kpis, myActivities, projectsByStatus, overdueProjects, activeProjects, pendingActivities, overdueActivities } = data;
+  const activitiesStrictTotal = Number(kpis.nonCancelledActivitiesStrict) || 0;
+  const overdueAct = ratioOf(kpis.overdueActivities, activitiesStrictTotal);
   const activitiesTotal = Number(kpis.nonCancelledActivities) || 0;
   const pending = ratioOf(kpis.pendingActivities, activitiesTotal);
   const activeTotal = Number(kpis.activeProjects) || 0;
@@ -111,7 +113,13 @@ export default function DashboardPage() {
           onClick={() => toggleDetail('pending')}
           selected={detail === 'pending'}
         />
-        <KpiCard label={t('dashboard_overdue_activities')} value={kpis.overdueActivities} />
+        <KpiCard
+          label={t('dashboard_overdue_activities')}
+          value={`${overdueAct.pct}%`}
+          gauge={{ ratio: overdueAct.ratio, color: 'danger', caption: `${kpis.overdueActivities} ${t('common_of')} ${activitiesStrictTotal}` }}
+          onClick={() => toggleDetail('overdueActivities')}
+          selected={detail === 'overdueActivities'}
+        />
         <KpiCard label={t('dashboard_today_activities')} value={kpis.todayActivities} />
         <KpiCard label={t('dashboard_average_progress')} value={`${kpis.averageProgress}%`} />
       </div>
@@ -125,6 +133,9 @@ export default function DashboardPage() {
       {detail === 'pending' && (
         <ActivitiesDetail title={t('dashboard_pending_activities_list')} activities={pendingActivities} onBack={() => setDetail(null)} />
       )}
+      {detail === 'overdueActivities' && (
+        <ActivitiesDetail title={t('dashboard_overdue_activities_list')} activities={overdueActivities} onBack={() => setDetail(null)} />
+      )}
       {!detail && (
         <div className="panel-card">
           <h3>{t('dashboard_my_activities')}</h3>