update friendly embalse and title

Co-authored-by: Copilot <copilot@github.com>

Author: brauliodiez

front/src/app/embalse/[embalse]/page.tsx

@@ -12,6 +12,7 @@ import {
   mapEmbalseToReservoirData,
   mapHistoricalReservoirToViewModel,
 } from "@/pods/embalse/embalse.mapper";
+import { formatEmbalseDisplayName } from "@/pods/embalse/embalse-name.helper";
 
 export const revalidate = 300; // ISR: regenerar cada 5 minutos
 
@@ -20,7 +21,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const embalseSlug = await getEmbalseBySlugCached(embalse);
 
   return {
-    title: embalseSlug.nombre,
+    title: `Embalse de ${formatEmbalseDisplayName(embalseSlug.nombre)}`,
     alternates: { canonical: `/embalse/${embalse}` },
   };
 }

front/src/pods/embalse/components/reservoir-card-gauge.tsx

@@ -9,6 +9,7 @@ import { GaugeChart } from "./reservoir-gauge";
 import { GaugeLegend } from "./reservoir-gauge/gauge-chart/components/gauge-legend.component";
 import { HistoryChart } from "./chart";
 import { useIsMobile } from "./useIsMobile";
+import { formatEmbalseDisplayName } from "../embalse-name.helper";
 interface Props {
   name: string;
   reservoirData: ReservoirData;
@@ -38,7 +39,7 @@ export const ReservoirCardGauge: React.FC<Props> = (props) => {
       aria-labelledby="gauge-title"
     >
       <h2 id="gauge-title" className="text-center">
-        {name}
+        {formatEmbalseDisplayName(name)}
       </h2>
       {isMobile && (
         <div className="join">

front/src/pods/embalse/embalse-name.helper.spec.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { formatEmbalseDisplayName } from "./embalse-name.helper";
+
+describe("formatEmbalseDisplayName", () => {
+  it("flips comma-inverted El", () => {
+    expect(formatEmbalseDisplayName("Atazar, El")).toBe("El Atazar");
+    expect(formatEmbalseDisplayName("Pardo, El")).toBe("El Pardo");
+    expect(formatEmbalseDisplayName("Villar, El")).toBe("El Villar");
+  });
+
+  it("flips comma-inverted La", () => {
+    expect(formatEmbalseDisplayName("Jarosa, La")).toBe("La Jarosa");
+  });
+
+  it("handles compound suffix with hyphen and parens", () => {
+    expect(formatEmbalseDisplayName("Vellón,El-(Pedrezuela)")).toBe(
+      "El Vellón (Pedrezuela)",
+    );
+  });
+
+  it("leaves untouched names without inverted article", () => {
+    expect(formatEmbalseDisplayName("Navacerrada")).toBe("Navacerrada");
+    expect(formatEmbalseDisplayName("Entrepeñas")).toBe("Entrepeñas");
+    expect(formatEmbalseDisplayName("Cáceres - Guadiloba")).toBe(
+      "Cáceres - Guadiloba",
+    );
+    expect(formatEmbalseDisplayName("Gabriel y Galán")).toBe("Gabriel y Galán");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(formatEmbalseDisplayName("")).toBe("");
+  });
+});

front/src/pods/embalse/embalse-name.helper.ts

@@ -0,0 +1,12 @@
+const INVERTED_ARTICLE_PATTERN = /^(.+?),\s*(El|La|Los|Las)\b\s*(.*)$/;
+
+export const formatEmbalseDisplayName = (rawName: string): string => {
+  if (!rawName) return "";
+  const match = rawName.match(INVERTED_ARTICLE_PATTERN);
+  if (!match) return rawName.trim();
+
+  const [, baseName, article, rest] = match;
+  const cleanedRest = rest.replace(/^[-\s]+/, "").trim();
+  const tail = cleanedRest ? ` ${cleanedRest}` : "";
+  return `${article} ${baseName.trim()}${tail}`.replace(/\s+/g, " ").trim();
+};