Feat Mapa Tipo Modal

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

@@ -18,7 +18,6 @@ interface Props {
   eleccionId: number;
   categoriaId: number;
   titulo: string;
-  mapLinkUrl: string;
 }
 
 const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
@@ -41,7 +40,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
   }
 };
 
-export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo, mapLinkUrl }: Props) => {
+export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo }: Props) => {
   const uniqueId = `swiper-${Math.random().toString(36).substring(2, 9)}`;
   const prevButtonClass = `prev-${uniqueId}`;
   const nextButtonClass = `next-${uniqueId}`;
@@ -55,14 +54,22 @@ export const HomeCarouselNacionalWidget = ({ eleccionId, categoriaId, titulo, ma
   if (isLoading) return <div>Cargando widget...</div>;
   if (error || !data) return <div>No se pudieron cargar los datos.</div>;
 
+  const handleOpenMap = () => {
+    (window as any).EleccionesWidgets.openModal('panel-nacional', {
+      eleccionId: eleccionId.toString(),
+      // No pasamos ámbito para que muestre la vista país por defecto
+      categoriaId: categoriaId.toString()
+    });
+  };
+
   return (
     <div className={styles.homeCarouselWidget}>
       <div className={`${styles.widgetHeader} ${styles.headerSingleLine}`}>
         <h2 className={styles.widgetTitle}>{titulo}</h2>
-        <a href={mapLinkUrl} className={`${styles.mapLinkButton} noAjax`}>
+        <button onClick={handleOpenMap} className={`${styles.mapLinkButton} noAjax`}>
           <TfiMapAlt />
           <span className={styles.buttonText}>Ver Mapa</span>
-        </a>
+        </button>
       </div>
 
       <div className={styles.carouselContainer}>