From 27fc9fbee76c194d1ba63e9f18add57349a1ca03 Mon Sep 17 00:00:00 2001
From: josemi1189 <jose1189@gmail.com>
Date: Tue, 7 Apr 2026 17:34:11 +0200
Subject: [PATCH] fix(style): layout from reservoirs by province

---
 .../embalse-provincia.component.tsx           | 37 ++++++++++---------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/front/src/pods/embalse-provincia/embalse-provincia.component.tsx b/front/src/pods/embalse-provincia/embalse-provincia.component.tsx
index 4f6bc7d..6f65f1f 100644
--- a/front/src/pods/embalse-provincia/embalse-provincia.component.tsx
+++ b/front/src/pods/embalse-provincia/embalse-provincia.component.tsx
@@ -11,23 +11,26 @@ interface Props {
 export const EmbalseProvincia: React.FC<Props> = (props) => {
   const { nombreProvincia, embalses } = props;
   return (
-    <Card>
-      {embalses.length === 0 ? (
-        <h2>No se encontraron embalses para {nombreProvincia}</h2>
-      ) : (
-        <h2>Embalses de {nombreProvincia}</h2>
-      )}
-
-      {embalses.map(({ id, name }) => (
-        <Link key={id} href={`/embalse/${id}`} className="link-accessible">
-          {name}
-        </Link>
-      ))}
-      <img
-        className="mt-4 w-full rounded-xl sm:w-1/2 lg:w-1/3"
-        src="/images/embalse-generico.jpg"
-        alt={`Mapa de ubicación de embalses de ${nombreProvincia}`}
-      />
+    <Card className="mx-auto w-full pt-6 pr-4 pb-6 pl-4 md:max-w-225 md:p-8">
+      <div className="bg-base-100 rounded-2xl p-6">
+        {embalses.length === 0 ? (
+          <h2>No se encontraron embalses para {nombreProvincia}</h2>
+        ) : (
+          <h2>Embalses de {nombreProvincia}</h2>
+        )}
+        <div className="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 md:grid-cols-3">
+          {embalses.map(({ id, name }) => (
+            <Link key={id} href={`/embalse/${id}`} className="link-accessible">
+              {name}
+            </Link>
+          ))}
+        </div>
+        <img
+          className="mt-4 w-full rounded-xl md:aspect-434/171"
+          src="/images/embalse-generico.jpg"
+          alt={`Mapa de ubicación de embalses de ${nombreProvincia}`}
+        />
+      </div>
     </Card>
   );
 };