Inicio: hover-cards on stat tiles

Gasto del ciclo reveals the by-source breakdown, Próximas cuotas the
full active-plan list, Pensión last-period rendimientos per fund.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/stat-tile.tsx

@@ -2,6 +2,11 @@ import { Link } from "react-router-dom";
 
 import { cn } from "@/lib/utils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 import { Skeleton } from "@/components/ui/skeleton";
 
 /** Stat-tile contract (dataviz skill): label · value · optional delta ·
@@ -21,6 +26,8 @@ export interface StatTileProps {
   /** Makes the whole tile a link (adds hover border + focus ring). */
   to?: string;
   ariaLabel?: string;
+  /** Extra detail revealed on hover (HoverCard). */
+  hoverContent?: React.ReactNode;
   /** Set false for non-monetary values that shouldn't blur (counts, dates). */
   sensitive?: boolean;
   className?: string;
@@ -35,6 +42,7 @@ export function StatTile({
   children,
   to,
   ariaLabel,
+  hoverContent,
   sensitive = true,
   className,
 }: StatTileProps) {
@@ -83,8 +91,7 @@ export function StatTile({
     </Card>
   );
 
-  if (!to) return card;
-  return (
+  const wrapped = to ? (
     <Link
       to={to}
       aria-label={ariaLabel ?? label}
@@ -92,5 +99,17 @@ export function StatTile({
     >
       {card}
     </Link>
+  ) : (
+    card
+  );
+
+  if (!hoverContent) return wrapped;
+  return (
+    <HoverCard>
+      <HoverCardTrigger render={<div className="h-full" />}>
+        {wrapped}
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">{hoverContent}</HoverCardContent>
+    </HoverCard>
   );
 }