Feat Botón Map URL Parámetro Widget Carousel

Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx

@@ -58,25 +58,27 @@ export const DevAppLegislativas = () => {
             <div style={sectionStyle}>
                 <h2>Widget: Carrusel de Resultados Provincias (Home)</h2>
                 <p style={descriptionStyle}>
-                    Uso: <code style={codeStyle}>&lt;HomeCarouselWidget eleccionId={2} distritoId="02" categoriaId={3} titulo="Diputados - Provincia de Buenos Aires" /&gt;</code>
+                    Uso: <code style={codeStyle}>&lt;HomeCarouselWidget eleccionId={2} distritoId="02" categoriaId={3} titulo="Diputados - Provincia de Buenos Aires" mapLinkUrl={''} /&gt;</code>
                 </p>
                 <HomeCarouselWidget
                     eleccionId={2} // Nacional
                     distritoId="02" // Buenos Aires
                     categoriaId={3} // Diputados Nacionales
                     titulo="Diputados - Provincia de Buenos Aires"
+                    mapLinkUrl={''}
                 />
             </div>
 
             <div style={sectionStyle}>
                 <h2>Widget: Carrusel de Resultados Nación (Home)</h2>
                 <p style={descriptionStyle}>
-                    Uso: <code style={codeStyle}>&lt;HomeCarouselNacionalWidget eleccionId={2} categoriaId={3} titulo="Diputados - Argentina" /&gt;</code>
+                    Uso: <code style={codeStyle}>&lt;HomeCarouselNacionalWidget eleccionId={2} categoriaId={3} titulo="Diputados - Argentina" mapLinkUrl={''} /&gt;</code>
                 </p>
                 <HomeCarouselNacionalWidget
                     eleccionId={2}
                     categoriaId={3} // 3 para Diputados, 2 para Senadores
                     titulo="Diputados - Total País"
+                    mapLinkUrl={''}
                 />
             </div>
 
@@ -88,8 +90,7 @@ export const DevAppLegislativas = () => {
                 <HomeCarouselNacionalWidget
                     eleccionId={2}
                     categoriaId={2} // 3 para Diputados, 2 para Senadores
-                    titulo="Senadores - Total País"
-                />
+                    titulo="Senadores - Total País" mapLinkUrl={''}                />
             </div>
 
             {/* --- SECCIÓN PARA EL WIDGET DE TARJETAS CON EJEMPLOS --- */}

Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselNacionalWidget.tsx

@@ -6,6 +6,7 @@ import { ImageWithFallback } from '../../../components/common/ImageWithFallback'
 import { assetBaseUrl } from '../../../apiService';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, A11y } from 'swiper/modules';
+import { FiMap } from 'react-icons/fi';
 
 // @ts-ignore
 import 'swiper/css';
@@ -17,6 +18,7 @@ interface Props {
   eleccionId: number;
   categoriaId: number;
   titulo: string;
+  mapLinkUrl: string;
 }
 
 const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
@@ -39,7 +41,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
   }
 };
 
-export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
+export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo, mapLinkUrl }: Props) => {
   const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
   const prevButtonClass = `prev-${uniqueId}`;
   const nextButtonClass = `next-${uniqueId}`;
@@ -55,7 +57,13 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }:
 
   return (
     <div className={styles.homeCarouselWidget}>
+      <div className={styles.widgetHeader}>
         <h2 className={styles.widgetTitle}>{titulo}</h2>
+        <a href={mapLinkUrl} className={styles.mapLinkButton}>
+          <FiMap />
+          <span className={styles.buttonText}>Ver Mapa</span>
+        </a>
+      </div>
 
       <div className={styles.carouselContainer}>
         <Swiper

Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.module.css

@@ -30,14 +30,55 @@
     position: relative;
 }
 
+.widgetHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin: 0 0 0.5rem 0;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
 .widgetTitle {
     font-size: 1.2rem;
     font-weight: 900;
     color: var(--primary-text);
-    margin: 0 0 0.5rem 0;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px solid var(--border-color);
+    margin: 0;
+    padding: 0;
+    border: none;
     text-align: left;
+    flex-grow: 1;
+}
+
+.mapLinkButton {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background-color: #007bff;
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.mapLinkButton svg {
+    font-size: 1rem;
+}
+
+.buttonText {
+    display: inline;
+}
+
+
+.mapLinkButton:hover {
+    background-color: #0056b3;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 .topStatsBar {
@@ -262,7 +303,26 @@
 }
 
 @media (max-width: 768px) {
-    .homeCarouselWidget .widgetTitle { text-align: center; font-size: 1.1rem; }
+    .homeCarouselWidget .widgetHeader {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .homeCarouselWidget .widgetTitle { 
+        text-align: left; 
+        font-size: 1rem; 
+    }
+    
+    .mapLinkButton {
+        padding: 0.5rem;
+    }
+
+    .buttonText {
+        display: none;
+    }
+
     .homeCarouselWidget .topStatsBar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.2rem; padding: 0.3rem; }
     .homeCarouselWidget .topStatsBar > div { padding: 0.25rem 0.5rem; border-right: none; }
     .homeCarouselWidget .topStatsBar > div:nth-child(odd) { border-right: 1px solid var(--border-color); }

Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx

@@ -6,6 +6,7 @@ import { ImageWithFallback } from '../../../components/common/ImageWithFallback'
 import { assetBaseUrl } from '../../../apiService';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Navigation, A11y } from 'swiper/modules';
+import { FiMap } from 'react-icons/fi';
 
 // @ts-ignore
 import 'swiper/css';
@@ -18,6 +19,7 @@ interface Props {
     distritoId: string;
     categoriaId: number;
     titulo: string;
+    mapLinkUrl: string;
 }
 
 const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
@@ -40,7 +42,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
     }
 };
 
-export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo }: Props) => {
+export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo, mapLinkUrl }: Props) => {
     const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
     const prevButtonClass = `prev-${uniqueId}`;
     const nextButtonClass = `next-${uniqueId}`;
@@ -56,7 +58,13 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
 
     return (
         <div className={styles.homeCarouselWidget}>
+            <div className={styles.widgetHeader}>
                 <h2 className={styles.widgetTitle}>{titulo}</h2>
+                <a href={mapLinkUrl} className={styles.mapLinkButton}>
+                    <FiMap />
+                    <span className={styles.buttonText}>Ver Mapa</span>
+                </a>
+            </div>
 
             <div className={styles.carouselContainer}>
                 <Swiper