Cosmetics: shared PeriodNavigator, breadcrumb, meter labels

One chevron component now drives year/month stepping in Budget and
Proyecciones (UX-03). Jumping from Proyecciones to a Budget month shows
a back affordance (UX-22). Water meters can be named (Casa, Cochera…)
via a settings-persisted dialog; the chart legend uses the names
(UX-24).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/pages/Budget.tsx

@@ -1,5 +1,6 @@
 import { useState, useCallback } from 'react';
-import { ChevronLeft, ChevronRight, Calculator, Download } from 'lucide-react';
+import { ArrowLeft, Calculator, Download } from 'lucide-react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 
@@ -9,6 +10,7 @@ import { useBudget } from '@/hooks/useBudget';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import ErrorState from '@/components/ErrorState';
+import PeriodNavigator from '@/components/PeriodNavigator';
 import MonthlyDetail from '@/components/budget/MonthlyDetail';
 import RecurringItemsManager from '@/components/budget/RecurringItemsManager';
 import TransactionList from '@/components/TransactionList';
@@ -34,6 +36,10 @@ export default function Budget() {
     refresh,
   } = useBudget(currentYear);
   const queryClient = useQueryClient();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const cameFromProyecciones =
+    (location.state as { from?: string } | null)?.from === 'proyecciones';
 
   const [subTab, setSubTab] = useState<'detail' | 'transactions'>('detail');
   const [txSearch, setTxSearch] = useState('');
@@ -103,18 +109,27 @@ export default function Budget() {
       {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
+          {cameFromProyecciones && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => navigate('/proyecciones')}
+              aria-label="Volver a Proyecciones"
+            >
+              <ArrowLeft className="w-4 h-4 mr-1" aria-hidden="true" />
+              Proyecciones
+            </Button>
+          )}
           <Calculator className="w-6 h-6 text-primary" />
           <h1 className="text-2xl font-bold tracking-tight">Presupuesto</h1>
         </div>
-        <div className="flex items-center gap-1">
-          <Button variant="outline" size="icon" disabled={year <= MIN_YEAR} onClick={() => setYear(year - 1)}>
-            <ChevronLeft className="w-4 h-4" />
-          </Button>
-          <span className="w-16 text-center font-semibold tabular-nums">{year}</span>
-          <Button variant="outline" size="icon" disabled={year >= MAX_YEAR} onClick={() => setYear(year + 1)}>
-            <ChevronRight className="w-4 h-4" />
-          </Button>
-        </div>
+        <PeriodNavigator
+          label={String(year)}
+          onPrev={() => setYear(year - 1)}
+          onNext={() => setYear(year + 1)}
+          prevDisabled={year <= MIN_YEAR}
+          nextDisabled={year >= MAX_YEAR}
+        />
       </div>
 
       <Tabs defaultValue="overview">
@@ -133,29 +148,15 @@ export default function Budget() {
                 <TabsTrigger value="detail">Detalle</TabsTrigger>
                 <TabsTrigger value="transactions">Transacciones</TabsTrigger>
               </TabsList>
-              <div className="flex items-center gap-1">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  disabled={selectedMonth <= 1}
-                  onClick={() => setSelectedMonth(selectedMonth - 1)}
-                >
-                  <ChevronLeft className="w-4 h-4" />
-                </Button>
-                <span className="text-sm font-medium w-28 text-center">
-                  {MONTH_NAMES[selectedMonth]} {year}
-                </span>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7"
-                  disabled={selectedMonth >= 12}
-                  onClick={() => setSelectedMonth(selectedMonth + 1)}
-                >
-                  <ChevronRight className="w-4 h-4" />
-                </Button>
-              </div>
+              <PeriodNavigator
+                variant="ghost"
+                label={`${MONTH_NAMES[selectedMonth]} ${year}`}
+                labelClassName="text-sm font-medium w-28 text-center"
+                onPrev={() => setSelectedMonth(selectedMonth - 1)}
+                onNext={() => setSelectedMonth(selectedMonth + 1)}
+                prevDisabled={selectedMonth <= 1}
+                nextDisabled={selectedMonth >= 12}
+              />
             </div>
 
             <TabsContent value="detail" className="space-y-6 mt-4">