diff --git a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
index 1c07354..2bbe9dd 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/DevAppLegislativas.tsx
@@ -27,7 +27,7 @@ export const DevAppLegislativas = () => {
     const sectionStyle = {
         border: '2px solid #007bff',
         borderRadius: '8px',
-        padding: '1rem 2rem',
+        padding: '2px',
         marginTop: '3rem',
         marginBottom: '3rem',
         backgroundColor: '#f8f9fa'
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css
new file mode 100644
index 0000000..07c6f50
--- /dev/null
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css
@@ -0,0 +1,282 @@
+/* src/features/legislativas/nacionales/CongresoNacionalWidget.module.css */
+
+/* --- SOLUCIÓN PARA FUENTES Y ESTILOS GLOBALES --- */
+.congresoContainer,
+.congresoContainer * {
+  font-family: "Public Sans", system-ui, sans-serif !important;
+  box-sizing: border-box;
+}
+
+.congresoContainer {
+  display: flex;
+  gap: 1.5rem;
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+  padding: 1rem;
+  border-radius: 8px;
+  max-width: 900px;
+  margin: 20px auto;
+  color: #333333;
+  --primary-accent-color: #007bff; /* Movida aquí desde :root */
+}
+
+.congresoGrafico {
+  flex: 2; 
+  min-width: 300px;
+  display: flex;
+  flex-direction: column;
+}
+
+.congresoHemicicloWrapper {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.congresoHemicicloWrapper.isHovering :global(.party-block:not(:hover)) {
+  opacity: 0.3;
+}
+
+.congresoGrafico svg {
+  width: 100%;
+  height: auto;
+  animation: fadeIn 0.8s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: scale(0.9); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.congresoFooter {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0.5rem 0 0.5rem;
+  margin-top: auto;
+  font-size: 0.8em;
+  color: #666;
+  border-top: 1px solid #eee;
+}
+
+.footerLegend {
+  display: flex;
+  gap: 1.25rem;
+  align-items: center;
+}
+
+.footerLegendItem {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 1.1em;
+}
+
+.legendIcon {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  box-sizing: border-box;
+}
+
+.legendIconSolid {
+  background-color: #888;
+  border: 1px solid #777;
+}
+
+.legendIconRing {
+  background-color: rgba(136, 136, 136, 0.3);
+  border: 1px solid #888;
+}
+
+.footerTimestamp {
+  font-weight: 500;
+  font-size: 0.75em;
+}
+
+.congresoSummary {
+  flex: 1; 
+  border-left: 1px solid #e0e0e0;
+  padding-left: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start; 
+}
+
+.congresoSummary h3 {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  font-size: 1.4em;
+  color: #212529;
+}
+
+.chamberTabs {
+  display: flex;
+  margin-bottom: 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.chamberTabs button {
+  flex: 1;
+  padding: 0.5rem 0.5rem;
+  border: none;
+  background-color: #f8f9fa;
+  color: #6c757d;
+  font-family: inherit;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.chamberTabs button:first-child {
+  border-right: 1px solid #dee2e6;
+}
+
+.chamberTabs button:hover {
+  background-color: #e9ecef;
+}
+
+.chamberTabs button.active {
+  background-color: var(--primary-accent-color);
+  color: #ffffff;
+}
+
+.summaryMetric {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 0.25rem;
+  font-size: 1.1em;
+}
+
+.summaryMetric strong {
+  font-size: 1.5em;
+  font-weight: 700;
+  color: var(--primary-accent-color);
+}
+
+.congresoSummary hr {
+  border: none;
+  border-top: 1px solid #e0e0e0;
+  margin: 1rem 0;
+}
+
+.partidoListaContainer {
+    flex-grow: 1;
+    overflow-y: auto;
+    min-height: 0;
+    padding-right: 8px;
+}
+
+.partidoLista {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.partidoLista li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.85rem;
+}
+
+.partidoColorBox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.partidoNombre {
+  flex-grow: 1;
+}
+
+.partidoBancas {
+  font-weight: 700;
+  font-size: 1.1em;
+}
+
+@media (max-width: 768px) {
+  .congresoContainer {
+    flex-direction: column;
+    padding: 0.5rem;
+    height: auto;
+    max-height: none;
+  }
+
+  .congresoSummary {
+    border-left: none;
+    padding-left: 0;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  .partidoListaContainer {
+    overflow-y: visible;
+    max-height: none;
+  }
+
+  .congresoFooter {
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 0rem;
+  }
+
+  .footerLegend {
+    gap: 0.75rem;
+  }
+
+  .footerLegendItem{
+    font-size: 1em;
+  }
+
+  .footerTimestamp {
+    font-size: 0.75em;
+  }
+}
+
+@media (min-width: 769px) {
+  .congresoContainer {
+    flex-direction: row;
+    align-items: stretch;
+    height: 500px; 
+  }
+}
+
+/* --- ESTILOS PARA TOOLTIP --- */
+/* Usamos :global() para apuntar a clases e IDs generados por la librería react-tooltip */
+:global(.seat-tooltip) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  padding: 8px;
+  background-color: white;
+}
+:global(.seat-tooltip img) {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid #ccc;
+}
+:global(.seat-tooltip p) {
+    margin: 0;
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+}
+
+:global(#seat-tooltip.react-tooltip) {
+    opacity: 1 !important;
+    background-color: white;
+}
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx
index 514af51..a8a5da3 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx
@@ -5,7 +5,8 @@ import { Tooltip } from 'react-tooltip';
 import { DiputadosNacionalesLayout } from '../../../components/common/DiputadosNacionalesLayout';
 import { SenadoresNacionalesLayout } from '../../../components/common/SenadoresNacionalesLayout';
 import { getComposicionNacional, type ComposicionNacionalData, type PartidoComposicionNacional } from '../../../apiService';
-import '../provinciales/CongresoWidget.css';
+// 1. La importación de CSS ahora se hace como un módulo
+import styles from './CongresoNacionalWidget.module.css';
 
 interface CongresoNacionalWidgetProps {
   eleccionId: number;
@@ -71,11 +72,12 @@ const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => {
     return adjustedPartyData;
   }, [partidosOrdenados, datosCamaraActual.presidenteBancada, camaraActiva]);
 
+  // 2. Todas las props 'className' ahora usan el objeto 'styles'
   return (
-    <div className="congreso-container">
-      <div className="congreso-grafico">
+    <div className={styles.congresoContainer}>
+      <div className={styles.congresoGrafico}>
         <div
-          className={`congreso-hemiciclo-wrapper ${isHovering ? 'is-hovering' : ''}`}
+          className={`${styles.congresoHemicicloWrapper} ${isHovering ? styles.isHovering : ''}`}
           onMouseEnter={() => setIsHovering(true)}
           onMouseLeave={() => setIsHovering(false)}
         >
@@ -92,53 +94,51 @@ const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => {
             />
           }
         </div>
-        <div className="congreso-footer">
-          <div className="footer-legend">
-            <div className="footer-legend-item">
-              {/* Usamos la nueva clase CSS para el círculo sólido */}
-              <span className="legend-icon legend-icon--solid"></span>
+        <div className={styles.congresoFooter}>
+          <div className={styles.footerLegend}>
+            <div className={styles.footerLegendItem}>
+              <span className={`${styles.legendIcon} ${styles.legendIconSolid}`}></span>
               <span>Bancas en juego</span>
             </div>
-            <div className="footer-legend-item">
-              {/* Reemplazamos el SVG por un span con la nueva clase para el anillo */}
-              <span className="legend-icon legend-icon--ring"></span>
+            <div className={styles.footerLegendItem}>
+              <span className={`${styles.legendIcon} ${styles.legendIconRing}`}></span>
               <span>Bancas previas</span>
             </div>
           </div>
-          <div className="footer-timestamp">
+          <div className={styles.footerTimestamp}>
             Última Actualización: {formatTimestamp(datosCamaraActual.ultimaActualizacion)}
           </div>
         </div>
       </div>
-      <div className="congreso-summary">
-        <div className="chamber-tabs">
-          <button className={camaraActiva === 'diputados' ? 'active' : ''} onClick={() => setCamaraActiva('diputados')}>
+      <div className={styles.congresoSummary}>
+        <div className={styles.chamberTabs}>
+          <button className={camaraActiva === 'diputados' ? styles.active : ''} onClick={() => setCamaraActiva('diputados')}>
             Diputados
           </button>
-          <button className={camaraActiva === 'senadores' ? 'active' : ''} onClick={() => setCamaraActiva('senadores')}>
+          <button className={camaraActiva === 'senadores' ? styles.active : ''} onClick={() => setCamaraActiva('senadores')}>
             Senadores
           </button>
         </div>
         <h3>{datosCamaraActual.camaraNombre}</h3>
-        <div className="summary-metric">
+        <div className={styles.summaryMetric}>
           <span>Total de Bancas</span>
           <strong>{datosCamaraActual.totalBancas}</strong>
         </div>
-        <div className="summary-metric">
+        <div className={styles.summaryMetric}>
           <span>Bancas en Juego</span>
           <strong>{datosCamaraActual.bancasEnJuego}</strong>
         </div>
         <hr />
-        <div className="partido-lista-container">
-          <ul className="partido-lista">
+        <div className={styles.partidoListaContainer}>
+          <ul className={styles.partidoLista}>
             {partidosOrdenados
               .filter(p => p.bancasTotales > 0)
               .map((partido: PartidoComposicionNacional) => (
                 <li key={partido.id}>
-                  <span className="partido-color-box" style={{ backgroundColor: partido.color || '#808080' }}></span>
-                  <span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
+                  <span className={styles.partidoColorBox} style={{ backgroundColor: partido.color || '#808080' }}></span>
+                  <span className={styles.partidoNombre}>{partido.nombreCorto || partido.nombre}</span>
                   <strong
-                    className="partido-bancas"
+                    className={styles.partidoBancas}
                     title={`${partido.bancasFijos} bancas previas + ${partido.bancasGanadas} ganadas`}
                   >
                     {partido.bancasTotales}
@@ -155,7 +155,7 @@ const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => {
 
 export const CongresoNacionalWidget = ({ eleccionId }: CongresoNacionalWidgetProps) => {
   return (
-    <Suspense fallback={<div className="congreso-container loading" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>Cargando composición del congreso...</div>}>
+    <Suspense fallback={<div className={`${styles.congresoContainer} ${styles.loading}`} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '400px' }}>Cargando composición del congreso...</div>}>
       <WidgetContent eleccionId={eleccionId} />
     </Suspense>
   );
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.css
deleted file mode 100644
index 9e79dfa..0000000
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.css
+++ /dev/null
@@ -1,240 +0,0 @@
-/* src/features/legislativas/nacionales/HomeCarouselWidget.css */
-
-.home-carousel-widget {
-    --primary-text: #212529;
-    --secondary-text: #6c757d;
-    --border-color: #dee2e6;
-    --background-light: #f8f9fa;
-    --background-white: #ffffff;
-    --shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
-    --font-family-sans: "Roboto", system-ui, sans-serif;
-}
-
-.home-carousel-widget {
-    font-family: var(--font-family-sans);
-    background-color: var(--background-white);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 0.75rem;
-    max-width: 1200px;
-    margin: 2rem auto;
-}
-
-.widget-title {
-    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);
-    text-align: left;
-}
-
-.top-stats-bar {
-    display: flex;
-    justify-content: space-around;
-    background-color: transparent;
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 0.3rem 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.top-stats-bar > div { 
-    display: flex;
-    align-items: baseline;
-    gap: 0.5rem;
-    border-right: 1px solid var(--border-color); 
-    padding: 0 0.5rem;
-    flex-grow: 1;
-    justify-content: center;
-}
-.top-stats-bar > div:last-child { border-right: none; }
-.top-stats-bar span { font-size: 0.9rem; color: var(--secondary-text); }
-.top-stats-bar strong { font-size: 0.9rem; font-weight: 600; color: var(--primary-text); }
-
-.candidate-card {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    background: var(--background-white);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    padding: 0.75rem;
-    box-shadow: var(--shadow);
-    height: 100%;
-    border-left: 5px solid;
-    border-left-color: var(--candidate-color, #ccc);
-    position: relative;
-}
-
-.candidate-photo-wrapper {
-    flex-shrink: 0;
-    width: 60px;
-    height: 60px;
-    border-radius: 8px;
-    overflow: hidden;
-    background-color: var(--candidate-color, #e9ecef);
-}
-
-.candidate-photo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    box-sizing: border-box;
-}
-
-.candidate-details {
-    flex-grow: 1;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-width: 0;
-}
-
-.candidate-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items:flex-start;
-    gap: 0.1rem;
-    min-width: 0;
-    margin-right: 0.75rem;
-}
-
-.candidate-name, .party-name {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: block;
-    width: 100%;
-    text-transform: uppercase;
-}
-.candidate-name {
-    font-size: 0.95rem;
-    text-align: left;
-    font-weight: 700;
-    color: var(--primary-text);
-}
-.party-name {
-    font-size: 0.8rem;
-    text-align: left;
-    text-transform: uppercase;
-    color: var(--secondary-text);
-    text-transform: uppercase;
-}
-
-.candidate-results { text-align: right; flex-shrink: 0; }
-.percentage {
-    display: block;
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: var(--primary-text);
-    line-height: 1.1;
-}
-.votes {
-    font-size: 0.75rem;
-    color: var(--secondary-text);
-    white-space: nowrap;
-}
-
-.swiper-slide:not(:last-child) .candidate-card::after {
-    content: '';
-    position: absolute;
-    right: -8px;
-    top: 20%;
-    bottom: 20%;
-    width: 1px;
-    background-color: var(--border-color);
-}
-
-.swiper-button-prev, .swiper-button-next {
-    width: 30px; height: 30px;
-    background-color: rgba(255, 255, 255, 0.9);
-    border: 1px solid var(--border-color);
-    border-radius: 50%;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-    transition: opacity 0.2s;
-    color: var(--secondary-text);
-}
-.swiper-button-prev:after, .swiper-button-next:after {
-    font-size: 18px;
-    font-weight: bold;
-}
-.swiper-button-prev { left: -10px; }
-.swiper-button-next { right: -10px; }
-.swiper-button-disabled { opacity: 0; pointer-events: none; }
-
-.widget-footer {
-  text-align: right;
-  font-size: 0.75rem;
-  color: var(--secondary-text);
-  margin-top: 0.5rem; 
-}
-
-.short-text {
-    display: none; /* Oculto por defecto en la vista de escritorio */
-}
-
-/* --- INICIO DE LA SECCIÓN DE ESTILOS PARA MÓVIL --- */
-@media (max-width: 768px) {
-    .home-carousel-widget { 
-        padding: 0.75rem; 
-    }
-
-    /* 1. Centrar el título en móvil */
-    .widget-title {
-        text-align: center;
-        font-size: 1.1rem;
-    }
-
-    /* 2. Reestructurar la barra de estadísticas a 2x2 y usar textos cortos */
-    .top-stats-bar {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 0.2rem;
-        padding: 0.3rem;
-    }
-
-    .top-stats-bar > div {
-        padding: 0.25rem 0.5rem;
-        border-right: none; /* Quitar todos los bordes derechos */
-    }
-
-    .top-stats-bar > div:nth-child(odd) {
-        border-right: 1px solid var(--border-color); /* Restablecer borde solo para la columna izquierda */
-    }
-    
-    /* Lógica de visibilidad de textos */
-    .long-text {
-        display: none; /* Ocultar el texto largo en móvil */
-    }
-    .short-text {
-        display:inline; /* Mostrar el texto corto en móvil */
-    }
-
-    /* Reducir fuentes para que quepan mejor */
-    .top-stats-bar span { font-size: 0.8rem; text-align: left; }
-    .top-stats-bar strong { font-size: 0.85rem; text-align: right;}
-
-    /* --- Botones del Carrusel (sin cambios) --- */
-    .swiper-button-prev, .swiper-button-next {
-        width: 32px;
-        height: 32px;
-        top: 45%;
-    }
-    .swiper-button-prev { left: 2px; }
-    .swiper-button-next { right: 2px; }
-
-    /* --- Ajustes en la tarjeta (sin cambios) --- */
-    .candidate-card { gap: 0.5rem; padding: 0.5rem; }
-    .candidate-photo-wrapper { width: 50px; height: 50px; }
-    .candidate-name { font-size: 0.9rem; }
-    .percentage { font-size: 1.1rem; }
-    .votes { font-size: 0.7rem; }
-
-    /* 3. Centrar el footer en móvil */
-    .widget-footer {
-        text-align: center;
-    }
-}
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.module.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.module.css
new file mode 100644
index 0000000..71615fd
--- /dev/null
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.module.css
@@ -0,0 +1,309 @@
+/* src/features/legislativas/nacionales/HomeCarouselWidget.module.css */
+
+.homeCarouselWidget {
+    --primary-text: #212529;
+    --secondary-text: #6c757d;
+    --border-color: #dee2e6;
+    --background-light: #f8f9fa;
+    --background-white: #ffffff;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
+    --font-family-sans: "Roboto", system-ui, sans-serif;
+}
+
+.homeCarouselWidget,
+.homeCarouselWidget * {
+    font-family: var(--font-family-sans) !important;
+    box-sizing: border-box;
+}
+
+.homeCarouselWidget {
+    background-color: var(--background-white);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 0.75rem;
+    max-width: 1200px;
+    margin: 2rem auto;
+    position: relative; 
+}
+
+.carouselContainer {
+    position: relative;
+}
+
+.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);
+    text-align: left;
+}
+
+.topStatsBar {
+    display: flex;
+    justify-content: space-around;
+    background-color: transparent;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 0.3rem 0.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.topStatsBar > div { 
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    border-right: 1px solid var(--border-color); 
+    padding: 0 0.5rem;
+    flex-grow: 1;
+    justify-content: center;
+}
+.topStatsBar > div:last-child { border-right: none; }
+.topStatsBar span { font-size: 0.9rem; color: var(--secondary-text); }
+.topStatsBar strong { font-size: 0.9rem; font-weight: 600; color: var(--primary-text); }
+
+.candidateCard {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: var(--background-white);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 0.75rem;
+    box-shadow: var(--shadow);
+    border-left: 5px solid;
+    border-left-color: var(--candidate-color, #ccc);
+    position: relative;
+}
+
+.candidatePhotoWrapper {
+    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: var(--candidate-color, #e9ecef);
+}
+
+.candidatePhoto {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: cover;
+    box-sizing: border-box;
+}
+
+.candidateDetails {
+    flex-grow: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 0;
+}
+
+.candidateInfo {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items:flex-start;
+    gap: 0.1rem;
+    min-width: 0;
+    margin-right: 0.75rem;
+}
+
+.candidateName, .partyName {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    width: 100%;
+    margin: 0; 
+    color: var(--primary-text);
+    text-align: left;
+}
+.candidateName {
+    font-size: 0.95rem;
+    font-weight: 700;
+}
+.partyName {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    color: var(--secondary-text);
+    font-weight: 400;
+}
+
+.candidateResults { text-align: right; flex-shrink: 0; }
+.percentage {
+    display: block;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--primary-text);
+    line-height: 1.1;
+}
+.votes {
+    font-size: 0.75rem;
+    color: var(--secondary-text);
+    white-space: nowrap;
+}
+
+/* Estilo base para ambos botones */
+.navButton {
+    width: 30px;
+    height: 30px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    transition: opacity 0.2s;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: 0;
+    z-index: 10;
+    cursor: pointer;
+}
+
+/* Usamos el pseudo-elemento ::after para mostrar el icono SVG como fondo */
+.navButton::after {
+    content: ''; /* Es necesario para que el pseudo-elemento se muestre */
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    /* Ajustamos el tamaño del icono dentro del botón */
+    background-size: 75%; 
+}
+
+/* Posición y contenido específico para cada botón */
+.navButtonPrev {
+    left: 10px;
+}
+.navButtonPrev::after {
+    /* SVG de flecha izquierda (chevron) codificado en Base64 */
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMTI1MjkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxNSA2IDkgMTIgMTUgMTgiPjwvcG9seWxpbmU+PC9zdmc+");
+}
+
+.navButtonNext {
+    right: 10px;
+}
+.navButtonNext::after {
+    /* SVG de flecha derecha (chevron) codificado en Base64 */
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyMTI1MjkiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSI5IDYgMTUgMTIgOSAxOCI+PC9wb2x5bGluZT48L3N2Zz4=");
+}
+
+/* Swiper añade esta clase al botón cuando está deshabilitado */
+.navButton.swiper-button-disabled {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.homeCarouselWidget :global(.swiper-slide) {
+    background: transparent !important;
+    color: initial !important;
+    text-align: left !important;
+    height: auto !important;
+}
+
+.homeCarouselWidget :global(.swiper-slide:not(:last-child)) .candidateCard::after {
+    content: '';
+    position: absolute;
+    right: -8px;
+    top: 20%;
+    bottom: 20%;
+    width: 1px;
+    background-color: var(--border-color);
+}
+
+/* --- INICIO DE LA MODIFICACIÓN DE FLECHAS --- */
+
+.homeCarouselWidget :global(.swiper-button-prev),
+.homeCarouselWidget :global(.swiper-button-next) {
+    width: 30px !important;
+    height: 30px !important;
+    background-color: rgba(255, 255, 255, 0.9) !important;
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+    transition: opacity 0.2s;
+    position: absolute !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    margin-top: 0 !important;
+    z-index: 10;
+}
+
+.homeCarouselWidget :global(.swiper-button-prev:after),
+.homeCarouselWidget :global(.swiper-button-next:after) {
+    display: block !important;
+    font-family: 'swiper-icons';
+    font-size: 14px !important;
+    font-weight: bold !important;
+    color: var(--primary-text) !important;
+}
+
+.homeCarouselWidget :global(.swiper-button-prev) { left: 10px !important; }
+.homeCarouselWidget :global(.swiper-button-next) { right: 10px !important; }
+
+.homeCarouselWidget :global(.swiper-button-disabled) {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+.widgetFooter {
+  text-align: right;
+  font-size: 0.75rem;
+  color: var(--secondary-text);
+  margin-top: 0.5rem; 
+}
+
+.shortText {
+    display: none;
+}
+
+@media (max-width: 768px) {
+    .homeCarouselWidget .widgetTitle { text-align: center; font-size: 1.1rem; }
+    .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); }
+    .homeCarouselWidget .longText { display: none; }
+    .homeCarouselWidget .shortText { display:inline; }
+    .homeCarouselWidget .topStatsBar span { font-size: 0.8rem; text-align: left; }
+    .homeCarouselWidget .topStatsBar strong { font-size: 0.85rem; text-align: right; }
+    
+    /* Ajustamos los botones custom en mobile */
+    .navButton {
+        width: 32px;
+        height: 32px;
+    }
+    .navButton::after {
+        line-height: 32px;
+    }
+    .navButtonPrev { left: 5px; }
+    .navButtonNext { right: 5px; }
+
+    .homeCarouselWidget .candidateCard { gap: 0.5rem; padding: 0.5rem; }
+    .homeCarouselWidget .candidatePhotoWrapper { width: 50px; height: 50px; }
+    .homeCarouselWidget .candidateName { font-size: 0.9rem; }
+    .homeCarouselWidget .percentage { font-size: 1.1rem; }
+    .homeCarouselWidget .votes { font-size: 0.7rem; }
+    .homeCarouselWidget .widgetFooter { text-align: center; }
+}
+
+/* Mantenemos estos estilos globales por si acaso */
+.homeCarouselWidget :global(.swiper-slide) {
+    background: transparent !important;
+    color: initial !important;
+    text-align: left !important;
+    height: auto !important;
+}
+
+.homeCarouselWidget :global(.swiper-slide:not(:last-child)) .candidateCard::after {
+    content: '';
+    position: absolute;
+    right: -8px;
+    top: 20%;
+    bottom: 20%;
+    width: 1px;
+    background-color: var(--border-color);
+}
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
index 10ecee8..4d9967d 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/HomeCarouselWidget.tsx
@@ -10,7 +10,7 @@ import { Navigation, A11y } from 'swiper/modules';
 import 'swiper/css';
 // @ts-ignore
 import 'swiper/css/navigation';
-import './HomeCarouselWidget.css';
+import styles from './HomeCarouselWidget.module.css';
 
 interface Props {
     eleccionId: number;
@@ -22,14 +22,12 @@ interface Props {
 const formatPercent = (num: number | null | undefined) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 const formatNumber = (num: number) => num.toLocaleString('es-AR');
 
-// --- Lógica de formateo de fecha ---
 const formatDateTime = (dateString: string | undefined | null) => {
     if (!dateString) return '...';
     try {
         const date = new Date(dateString);
-        // Verificar si la fecha es válida
         if (isNaN(date.getTime())) {
-            return dateString; // Si no se puede parsear, devolver el string original
+            return dateString;
         }
         const day = String(date.getDate()).padStart(2, '0');
         const month = String(date.getMonth() + 1).padStart(2, '0');
@@ -38,7 +36,7 @@ const formatDateTime = (dateString: string | undefined | null) => {
         const minutes = String(date.getMinutes()).padStart(2, '0');
         return `${day}/${month}/${year}, ${hours}:${minutes} hs.`;
     } catch (e) {
-        return dateString; // En caso de cualquier error, devolver el string original
+        return dateString;
     }
 };
 
@@ -52,82 +50,94 @@ export const HomeCarouselWidget = ({ eleccionId, distritoId, categoriaId, titulo
     if (error || !data) return <div>No se pudieron cargar los datos.</div>;
 
     return (
-        <div className="home-carousel-widget">
-            <h2 className="widget-title">{titulo}</h2>
+        <div className={styles.homeCarouselWidget}>
+            <h2 className={styles.widgetTitle}>{titulo}</h2>
 
-            <div className="top-stats-bar">
+            <div className={styles.topStatsBar}>
                 <div>
                     <span>Participación</span>
                     <strong>{formatPercent(data.estadoRecuento?.participacionPorcentaje)}</strong>
                 </div>
                 <div>
-                    <span className="long-text">Mesas escrutadas</span>
-                    <span className="short-text">Escrutado</span>
+                    <span className={styles.longText}>Mesas escrutadas</span>
+                    <span className={styles.shortText}>Escrutado</span>
                     <strong>{formatPercent(data.estadoRecuento?.mesasTotalizadasPorcentaje)}</strong>
                 </div>
                 <div>
-                    <span className="long-text">Votos en blanco</span>
-                    <span className="short-text">En blanco</span>
+                    <span className={styles.longText}>Votos en blanco</span>
+                    <span className={styles.shortText}>En blanco</span>
                     <strong>{formatPercent(data.votosEnBlancoPorcentaje)}</strong>
                 </div>
                 <div>
-                    <span className="long-text">Votos totales</span>
-                    <span className="short-text">Votos</span>
+                    <span className={styles.longText}>Votos totales</span>
+                    <span className={styles.shortText}>Votos</span>
                     <strong>{formatNumber(data.votosTotales)}</strong>
                 </div>
             </div>
 
-            <Swiper
-                modules={[Navigation, A11y]}
-                spaceBetween={16}
-                slidesPerView={1.15}
-                navigation
-                breakpoints={{ 640: { slidesPerView: 2 }, 1024: { slidesPerView: 3 }, 1200: { slidesPerView: 3.5 } }} // Añadir breakpoint
-            >
-                {data.resultados.map(candidato => (
-                    <SwiperSlide key={candidato.agrupacionId}>
-                        <div className="candidate-card" style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
+            <div className={styles.carouselContainer}>
+                <Swiper
+                    modules={[Navigation, A11y]}
+                    spaceBetween={16}
+                    slidesPerView={1.3}
+                    navigation={{
+                        prevEl: `.${styles.navButtonPrev}`,
+                        nextEl: `.${styles.navButtonNext}`,
+                    }}
+                    breakpoints={{
+                        320: { slidesPerView: 1.25, spaceBetween: 10 },
+                        430: { slidesPerView: 1.4, spaceBetween: 12 },
+                        640: { slidesPerView: 2.5 },
+                        1024: { slidesPerView: 3 },
+                        1200: { slidesPerView: 3.5 }
+                    }}
+                >
+                    {data.resultados.map(candidato => (
+                        <SwiperSlide key={candidato.agrupacionId}>
+                            <div className={styles.candidateCard} style={{ '--candidate-color': candidato.color || '#ccc' } as React.CSSProperties}>
 
-                            <div className="candidate-photo-wrapper">
-                                <ImageWithFallback
-                                    src={candidato.fotoUrl ?? undefined}
-                                    fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
-                                    alt={candidato.nombreCandidato ?? ''}
-                                    className="candidate-photo"
-                                />
-                            </div>
+                                <div className={styles.candidatePhotoWrapper}>
+                                    <ImageWithFallback
+                                        src={candidato.fotoUrl ?? undefined}
+                                        fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
+                                        alt={candidato.nombreCandidato ?? ''}
+                                        className={styles.candidatePhoto}
+                                    />
+                                </div>
 
-                            <div className="candidate-details">
-                                <div className="candidate-info">
-                                    {candidato.nombreCandidato ? (
-                                        // CASO 1: Hay un candidato (se muestran dos líneas)
-                                        <>
-                                            <span className="candidate-name">
-                                                {candidato.nombreCandidato}
-                                            </span>
-                                            <span className="party-name">
+                                <div className={styles.candidateDetails}>
+                                    <div className={styles.candidateInfo}>
+                                        {candidato.nombreCandidato ? (
+                                            <>
+                                                <span className={styles.candidateName}>
+                                                    {candidato.nombreCandidato}
+                                                </span>
+                                                <span className={styles.partyName}>
+                                                    {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
+                                                </span>
+                                            </>
+                                        ) : (
+                                            <span className={styles.candidateName}>
                                                 {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
                                             </span>
-                                        </>
-                                    ) : (
-                                        // CASO 2: No hay candidato (se muestra solo una línea)
-                                        <span className="candidate-name">
-                                            {candidato.nombreCortoAgrupacion || candidato.nombreAgrupacion}
-                                        </span>
-                                    )}
-                                </div>
-                                <div className="candidate-results">
-                                    <span className="percentage">{formatPercent(candidato.porcentaje)}</span>
-                                    <span className="votes">{formatNumber(candidato.votos)} votos</span>
+                                        )}
+                                    </div>
+                                    <div className={styles.candidateResults}>
+                                        <span className={styles.percentage}>{formatPercent(candidato.porcentaje)}</span>
+                                        <span className={styles.votes}>{formatNumber(candidato.votos)} votos</span>
+                                    </div>
                                 </div>
+
                             </div>
+                        </SwiperSlide>
+                    ))}
+                </Swiper>
 
-                        </div>
-                    </SwiperSlide>
-                ))}
-            </Swiper>
+                <div className={`${styles.navButton} ${styles.navButtonPrev}`}></div>
+                <div className={`${styles.navButton} ${styles.navButtonNext}`}></div>
+            </div>
 
-            <div className="widget-footer">
+            <div className={styles.widgetFooter}>
                 Última actualización: {formatDateTime(data.ultimaActualizacion)}
             </div>
         </div>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css
deleted file mode 100644
index 52bfafe..0000000
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.css
+++ /dev/null
@@ -1,920 +0,0 @@
-/* src/features/legislativas/nacionales/PanelNacional.css */
-.panel-nacional-container {
-  font-family: 'Roboto', sans-serif;
-  max-width: 1200px;
-  margin: auto;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  position: relative;
-  padding: 10px;
-}
-
-.panel-header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid #e0e0e0;
-  position: relative;
-  z-index: 20;
-  background-color: white;
-}
-
-/* Contenedor para alinear título y selector */
-.header-top-row {
-  display: flex;
-  justify-content: flex-start;
-  /* Alinea los items al inicio */
-  align-items: center;
-  gap: 2rem;
-  /* Añade un espacio de separación de 2rem entre el selector y el breadcrumb */
-}
-
-.categoria-selector {
-  min-width: 220px;
-}
-
-/* El contenedor principal del selector (la parte visible antes de hacer clic) */
-.categoria-selector__control {
-  border-radius: 8px !important;
-  border: 1px solid #e0e0e0 !important;
-  box-shadow: none !important;
-  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-}
-
-/* Estilo cuando el selector está enfocado (seleccionado) */
-.categoria-selector__control--is-focused {
-  border-color: #007bff !important;
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
-}
-
-/* El texto del valor seleccionado */
-.categoria-selector__single-value {
-  font-weight: 500;
-  color: #333;
-}
-
-/* El menú desplegable que contiene las opciones */
-.categoria-selector__menu {
-  border-radius: 8px !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
-  border: 1px solid #e0e0e0 !important;
-  margin-top: 4px !important;
-  /* Pequeño espacio entre el control y el menú */
-}
-
-/* Cada una de las opciones en la lista */
-.categoria-selector__option {
-  cursor: pointer;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-/* Estilo de una opción cuando pasas el mouse por encima (estado 'focused') */
-.categoria-selector__option--is-focused {
-  background-color: #f0f8ff;
-  /* Un azul muy claro */
-  color: #333;
-}
-
-/* Estilo de la opción que está actualmente seleccionada */
-.categoria-selector__option--is-selected {
-  background-color: #007bff;
-  color: white;
-}
-
-/* La pequeña línea vertical que separa el contenido del indicador (la flecha) */
-.categoria-selector__indicator-separator {
-  display: none;
-  /* La ocultamos para un look más limpio */
-}
-
-/* El indicador (la flecha hacia abajo) */
-.categoria-selector__indicator {
-  color: #a0a0a0;
-  transition: color 0.2s;
-}
-
-.categoria-selector__indicator:hover {
-  color: #333;
-}
-
-/* --- ESTILOS MODERNOS PARA BREADCRUMBS --- */
-
-.breadcrumbs-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  /* Espacio entre elementos */
-  font-size: 1rem;
-}
-
-.breadcrumb-item,
-.breadcrumb-item-actual {
-  display: flex;
-  align-items: center;
-  padding: 0.4rem 0.8rem;
-  border-radius: 8px;
-  /* Bordes redondeados para efecto píldora */
-  transition: background-color 0.2s ease-in-out;
-}
-
-.breadcrumb-item {
-  background-color: #f0f0f0;
-  border: 1px solid #e0e0e0;
-  color: #333;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.breadcrumb-item:hover {
-  background-color: #e0e0e0;
-  border-color: #d1d1d1;
-}
-
-.breadcrumb-item-actual {
-  background-color: transparent;
-  color: #000;
-  font-weight: 700;
-  /* Más peso para el nivel actual */
-}
-
-.breadcrumb-icon {
-  margin-right: 0.4rem;
-  font-size: 1rem;
-}
-
-.breadcrumb-separator {
-  color: #a0a0a0;
-  /* Color sutil para el separador */
-  font-size: 1.2rem;
-}
-
-.panel-main-content {
-  display: flex;
-  height: 75vh;
-  min-height: 500px;
-  transition: all 0.5s ease-in-out;
-}
-
-.mapa-column {
-  flex: 2;
-  position: relative;
-  transition: flex 0.5s ease-in-out;
-}
-
-.resultados-column {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.25rem;
-  transition: all 0.5s ease-in-out;
-  min-width: 320px;
-}
-
-/* --- AJUSTES EN FILAS DE PARTIDOS --- */
-.partido-fila {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  /* ANTES: 1rem */
-  padding: 0.75rem 0;
-  /* ANTES: 1rem 0 */
-  border-bottom: 1px solid #f0f0f0;
-  border-left: 5px solid;
-  border-radius: 12px;
-  padding-left: 1rem;
-}
-
-.partido-logo {
-  flex-shrink: 0;
-  width: 65px;
-  height: 65px;
-  border-radius: 12px;
-  box-sizing: border-box;
-}
-
-.partido-logo img {
-  width: 100%;
-  height: 100%;
-  border-radius: 12px;
-}
-
-.partido-main-content {
-  flex-grow: 1;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  align-items: center;
-  gap: 0.25rem 0.75rem;
-  /* ANTES: gap: 0.25rem 1rem */
-}
-
-.partido-top-row {
-  display: contents;
-}
-
-.partido-info-wrapper {
-  min-width: 0;
-  text-align: left;
-}
-
-.partido-nombre {
-  font-weight: 700;
-  font-size: 1rem;
-  color: #212529;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-.partido-nombre-normal {
-  font-size: 1rem;
-  color: #212529;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.2;
-  text-transform: uppercase;
-}
-
-.candidato-nombre {
-  font-size: 0.75rem;
-  /* ANTES: 0.8rem */
-  color: #6c757d;
-  text-transform: uppercase;
-  font-weight: 500;
-  line-height: 1.1;
-}
-
-.partido-stats {
-  flex-shrink: 0;
-  text-align: right;
-  padding-left: 1rem;
-}
-
-.partido-porcentaje {
-  font-size: 1.35rem;
-  /* ANTES: 1.5rem */
-  font-weight: 700;
-  display: block;
-}
-
-.partido-votos {
-  font-size: 0.9rem;
-  /* ANTES: 1rem */
-  color: #666;
-  display: block;
-}
-
-.partido-barra-background {
-  height: 12px;
-  /* ANTES: 20px */
-  background-color: #f0f0f0;
-  border-radius: 4px;
-  grid-column: 1 / 3;
-}
-
-.partido-barra-foreground {
-  height: 100%;
-  border-radius: 4px;
-  transition: width 0.5s ease-in-out;
-}
-
-/* --- AJUSTES EN CÍRCULOS DE ESTADÍSTICAS --- */
-.panel-estado-recuento {
-  display: flex;
-  justify-content: space-around;
-  padding-bottom: 1rem;
-  /* ANTES: 1.5rem */
-  margin-bottom: 1rem;
-  /* ANTES: 1.5rem */
-  border-bottom: 1px solid #e0e0e0;
-}
-
-.estado-item {
-  width: 95px;
-  /* ANTES: 100px */
-  text-align: center;
-}
-
-.estado-item span {
-  margin-top: 0.5rem;
-  font-size: 0.85rem;
-  /* ANTES: 0.9rem */
-  color: #666;
-  display: block;
-}
-
-/* --- MAPA Y ELEMENTOS ASOCIADOS --- */
-.mapa-componente-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-}
-
-.mapa-render-area {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.mapa-volver-btn {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  z-index: 10;
-  padding: 8px 12px;
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.rsm-zoomable-group {
-  transition: transform 0.75s ease-in-out;
-}
-
-/* Desactivar la transición durante el arrastre */
-.rsm-zoomable-group.panning {
-  transition: none;
-}
-
-.panel-main-content.panel-collapsed .mapa-column {
-  flex: 1 1 100%;
-}
-
-.panel-main-content.panel-collapsed .resultados-column {
-  flex-basis: 0;
-  min-width: 0;
-  max-width: 0;
-  padding: 0;
-  overflow: hidden;
-}
-
-.panel-toggle-btn {
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  z-index: 10;
-  width: 30px;
-  height: 50px;
-  border: 1px solid #ccc;
-  background-color: white;
-  border-radius: 4px 0 0 4px;
-  cursor: pointer;
-  font-size: 1.3rem;
-  font-weight: bold;
-  color: #555;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.2s;
-}
-
-.panel-toggle-btn:hover {
-  background-color: #f0f0f0;
-}
-
-.rsm-geography {
-  stroke: #000000;
-  stroke-width: 0.25px;
-  outline: none;
-  transition: filter 0.2s ease-in-out;
-}
-
-.rsm-geography:not(.selected):hover {
-  filter: brightness(1.25);
-  /* Mantenemos el brillo */
-  stroke: #ffffff;
-  /* Color del borde a blanco */
-  stroke-width: 0.25px;
-  paint-order: stroke;
-  /* Asegura que el borde se dibuje encima del relleno */
-}
-
-.rsm-geography.selected {
-  stroke: #000000;
-  stroke-width: 0.25px;
-  filter: none;
-  pointer-events: none;
-}
-
-.rsm-geography-faded,
-.rsm-geography-faded-municipality {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.caba-comuna-geography {
-  stroke: #000000;
-  stroke-width: 0.05px;
-}
-
-.caba-comuna-geography:not(.selected):hover {
-  stroke: #000000;
-  stroke-width: 0.055px;
-  filter: brightness(1.25);
-}
-
-.transition-spinner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.5);
-  z-index: 20;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.transition-spinner::after {
-  content: '';
-  width: 50px;
-  height: 50px;
-  border: 5px solid rgba(0, 0, 0, 0.2);
-  border-top-color: #007bff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.caba-magnifier-container {
-  position: absolute;
-  height: auto;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.caba-lupa-svg {
-  width: 100%;
-  height: auto;
-  pointer-events: none;
-}
-
-.caba-lupa-interactive-area {
-  pointer-events: all;
-  cursor: pointer;
-  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
-  transition: transform 0.2s ease-in-out;
-}
-
-.caba-lupa-interactive-area:hover {
-  filter: brightness(1.15);
-  stroke: #ffffff;
-  stroke-width: 0.25px;
-}
-
-.skeleton-fila div {
-  background: #f6f7f8;
-  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
-  background-repeat: no-repeat;
-  background-size: 800px 104px;
-  animation: shimmer 1s linear infinite;
-  border-radius: 4px;
-}
-
-.skeleton-logo {
-  width: 65px;
-  height: 65px;
-}
-
-.skeleton-text {
-  height: 1em;
-}
-
-.skeleton-bar {
-  height: 20px;
-  margin-top: 4px;
-}
-
-/* --- ESTILOS PARA LOS BOTONES DE ZOOM DEL MAPA --- */
-.zoom-controls-container {
-  position: absolute;
-  top: 5px;
-  right: 10px;
-  z-index: 30;
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.zoom-btn {
-  width: 40px;
-  height: 40px;
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.2rem;
-  transition: background-color 0.2s;
-}
-
-.zoom-icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.zoom-icon-wrapper svg {
-  width: 20px;
-  height: 20px;
-  color: #333;
-}
-
-.zoom-btn.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.zoom-btn:hover {
-  background-color: #f0f0f0;
-}
-
-/* --- ESTILOS DE CURSOR PARA EL ARRASTRE DEL MAPA --- */
-.map-locked .rsm-geography {
-  cursor: pointer;
-}
-
-.map-pannable .rsm-geography {
-  cursor: grab;
-}
-
-.header-bottom-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 1rem;
-  gap: 1rem;
-}
-
-.municipio-search-container {
-  min-width: 280px;
-  /* Ancho mínimo para el buscador en desktop */
-}
-
-/* --- MEDIA QUERY PARA RESPONSIVE (REFACTORIZADA) --- */
-@media (max-width: 800px) {
-
-  .panel-nacional-container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    padding: 0;
-    border: none;
-    border-radius: 0;
-  }
-
-  .panel-header {
-    flex-shrink: 0;
-    padding: 1rem;
-    border-radius: 0;
-  }
-
-  .panel-main-content {
-    flex-grow: 1;
-    position: relative;
-    height: auto;
-    min-height: 0;
-  }
-
-  .panel-toggle-btn {
-    display: none;
-  }
-
-  .header-top-row {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .categoria-selector {
-    width: 100%;
-  }
-
-  .mapa-column,
-  .resultados-column {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
-  }
-
-  .mapa-column {
-    z-index: 10;
-  }
-
-  .resultados-column {
-    padding: 1rem;
-    overflow-y: auto;
-    z-index: 15;
-  }
-
-  .panel-main-content.mobile-view-mapa .resultados-column {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  .panel-main-content.mobile-view-resultados .mapa-column {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  .resultados-column {
-    padding: 0.5rem;
-    overflow-y: auto;
-    z-index: 15;
-    padding-bottom: 50px;
-}
-
-.mapa-column .mapa-componente-container,
-.mapa-column .mapa-render-area {
-    height: 100%;
-}
-
-.panel-partidos-container {
-    padding-bottom: 0;
-}
-
-.zoom-controls-container, .mapa-volver-btn {
-    top: 15px;
-}
-
-  .header-bottom-row {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .municipio-search-container {
-    min-width: 100%;
-    /* El buscador ocupa todo el ancho en móvil */
-  }
-
-  @media (max-width: 900px) and (orientation: landscape) {
-    .panel-main-content {
-      display: flex;
-      flex-direction: row;
-      position: static;
-      height: 85vh;
-      min-height: 400px;
-    }
-
-    .mapa-column,
-    .resultados-column {
-      position: static;
-      height: auto;
-      width: auto;
-      opacity: 1;
-      visibility: visible;
-      pointer-events: auto;
-      flex: 3;
-      overflow-y: auto;
-    }
-
-    .resultados-column {
-      flex: 2;
-      min-width: 300px;
-    }
-
-    .mobile-results-card-container {
-      display: none;
-    }
-
-    .panel-toggle-btn {
-      display: flex;
-
-    }
-  }
-}
-
-/* --- ESTILOS PARA LA TARJETA DE RESULTADOS EN MÓVIL (ACTUALIZADOS) --- */
-.mobile-results-card-container {
-  position: absolute;
-  bottom: 0px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 40;
-  width: 95%;
-  max-width: 450px;
-  background-color: rgba(255, 255, 255, 0.95);
-  border-radius: 12px;
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease-in-out;
-  display: flex;
-  flex-direction: column;
-}
-
-.mobile-results-card-container.view-resultados .collapsible-section {
-  display: none;
-}
-
-.mobile-results-card-container.view-resultados .mobile-card-view-toggle {
-  border-top: none;
-}
-
-
-.collapsible-section {
-  display: flex;
-  flex-direction: column;
-}
-
-.mobile-results-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 18px;
-  cursor: pointer;
-}
-
-.mobile-results-header .header-info {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.mobile-results-header .header-info h4 {
-  margin: 0;
-  font-size: 1.2rem;
-  font-weight: 700;
-}
-
-/* SELECTOR ESPECÍFICO PARA EL TEXTO DE ACCIÓN */
-.mobile-results-header .header-info .header-action-text {
-  font-size: 0.8rem;
-  color: #6c757d;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-
-.mobile-results-header .header-toggle-icon {
-  font-size: 1.5rem;
-  color: #007bff;
-  transition: transform 0.3s;
-}
-
-.mobile-results-content {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
-  padding: 0 15px;
-  border-top: 1px solid transparent;
-}
-
-.mobile-results-card-container.expanded .mobile-results-content {
-  max-height: 500px;
-  opacity: 1;
-  padding: 5px 15px 15px 15px;
-  border-top-color: #e0e0e0;
-}
-
-.mobile-result-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 0;
-  border-bottom: 1px solid #f0f0f0;
-  border-left: 4px solid;
-  padding-left: 8px;
-}
-
-.mobile-result-row:last-child {
-  border-bottom: none;
-}
-
-.mobile-result-logo {
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  box-sizing: border-box;
-}
-
-.mobile-result-logo img {
-  width: 100%;
-  height: 100%;
-  border-radius: 8px;
-}
-
-.mobile-result-info {
-  flex-grow: 1;
-  min-width: 0;
-}
-
-.mobile-result-party-name {
-  display: block;
-  font-weight: 600;
-  font-size: 0.9rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mobile-result-candidate-name {
-  display: block;
-  font-size: 0.75rem;
-  color: #6c757d;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mobile-result-stats {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  flex-shrink: 0;
-}
-
-.mobile-result-stats strong {
-  font-size: 0.95rem;
-  font-weight: 700;
-}
-
-.mobile-result-stats span {
-  font-size: 0.7rem;
-  color: #6c757d;
-}
-
-.no-results-text {
-  padding: 1rem;
-  text-align: center;
-  color: #6c757d;
-  font-size: 0.9rem;
-}
-
-.mobile-card-view-toggle {
-  display: flex;
-  padding: 5px;
-  background-color: rgba(230, 230, 230, 0.6);
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
-}
-
-.mobile-card-view-toggle .toggle-btn {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 10px 15px;
-  /* Aumentado para pantallas más grandes */
-  border: none;
-  background-color: transparent;
-  border-radius: 25px;
-  cursor: pointer;
-  font-size: 1rem;
-  /* Mantenido para pantallas más grandes */
-  font-weight: 500;
-  color: #555;
-  transition: all 0.2s ease-in-out;
-}
-
-.mobile-card-view-toggle .toggle-btn.active {
-  background-color: #007bff;
-  color: white;
-  box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2);
-}
-
-/* Ajustes para pantallas pequeñas como el iPhone SE */
-@media (max-width: 380px) {
-  .mobile-results-header {
-    padding: 4px 10px;
-  }
-
-  .mobile-results-header .header-info h4 {
-    font-size: 0.75rem;
-    text-transform: uppercase;
-  }
-
-  .mobile-results-header .header-info .header-action-text {
-    font-size: 0.7rem;
-  }
-
-  .mobile-card-view-toggle .toggle-btn {
-    padding: 6px 10px;
-    font-size: 0.8rem;
-  }
-}
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.module.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.module.css
new file mode 100644
index 0000000..41ae60b
--- /dev/null
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.module.css
@@ -0,0 +1,539 @@
+/* src/features/legislativas/nacionales/PanelNacional.module.css */
+
+/* --- SOLUCIÓN PARA FUENTES Y ESTILOS GLOBALES --- */
+.panelNacionalContainer,
+.panelNacionalContainer * {
+    font-family: 'Roboto', sans-serif !important;
+    box-sizing: border-box;
+}
+
+.panelNacionalContainer {
+  max-width: 1200px;
+  margin: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  position: relative;
+  padding: 10px;
+}
+
+.panelHeader {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+  position: relative;
+  z-index: 20;
+  background-color: white;
+}
+
+.headerTopRow {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2rem;
+}
+
+/* --- ESTILOS PARA REACT-SELECT USANDO MÓDULOS --- */
+.categoriaSelectorContainer {
+  min-width: 220px;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__control) {
+  border-radius: 8px !important;
+  border: 1px solid #e0e0e0 !important;
+  box-shadow: none !important;
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__control--is-focused) {
+  border-color: #007bff !important;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25) !important;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__single-value) {
+  font-weight: 500;
+  color: #333;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__menu) {
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid #e0e0e0 !important;
+  margin-top: 4px !important;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__option) {
+  cursor: pointer;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__option--is-focused) {
+  background-color: #f0f8ff;
+  color: #333;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__option--is-selected) {
+  background-color: #007bff;
+  color: white;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__indicator-separator) {
+  display: none;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__indicator) {
+  color: #a0a0a0;
+  transition: color 0.2s;
+}
+
+.categoriaSelectorContainer :global(.categoriaSelector__indicator:hover) {
+  color: #333;
+}
+
+
+/* --- ESTILOS MODERNOS PARA BREADCRUMBS --- */
+.breadcrumbsContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+}
+
+.breadcrumbItem,
+.breadcrumbItemActual {
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 0.8rem;
+  border-radius: 8px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.breadcrumbItem {
+  background-color: #f0f0f0;
+  border: 1px solid #e0e0e0;
+  color: #333;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.breadcrumbItem:hover {
+  background-color: #e0e0e0;
+  border-color: #d1d1d1;
+}
+
+.breadcrumbItemActual {
+  background-color: transparent;
+  color: #000;
+  font-weight: 700;
+}
+
+.breadcrumbIcon {
+  margin-right: 0.4rem;
+  font-size: 1rem;
+}
+
+.breadcrumbSeparator {
+  color: #a0a0a0;
+  font-size: 1.2rem;
+}
+
+.panelMainContent {
+  display: flex;
+  height: 75vh;
+  min-height: 500px;
+  transition: all 0.5s ease-in-out;
+}
+
+.mapaColumn {
+  flex: 2;
+  position: relative;
+  transition: flex 0.5s ease-in-out;
+}
+
+.resultadosColumn {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem;
+  transition: all 0.5s ease-in-out;
+  min-width: 320px;
+}
+
+.partidoFila {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #f0f0f0;
+  border-left: 5px solid;
+  border-radius: 12px;
+  padding-left: 1rem;
+}
+
+.partidoLogo {
+  flex-shrink: 0;
+  width: 65px;
+  height: 65px;
+  border-radius: 12px;
+}
+
+.partidoLogo img {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+}
+
+.partidoMainContent {
+  flex-grow: 1;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  align-items: center;
+  gap: 0.25rem 0.75rem;
+}
+
+.partidoTopRow { display: contents; }
+.partidoInfoWrapper { min-width: 0; text-align: left; }
+
+.partidoNombre {
+  font-weight: 700;
+  font-size: 1rem;
+  color: #212529;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.partidoNombreNormal {
+  font-size: 1rem;
+  color: #212529;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.candidatoNombre {
+  font-size: 0.75rem;
+  color: #6c757d;
+  text-transform: uppercase;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.partidoStats { flex-shrink: 0; text-align: right; padding-left: 1rem; }
+.partidoPorcentaje { font-size: 1.35rem; font-weight: 700; display: block; }
+.partidoVotos { font-size: 0.9rem; color: #666; display: block; }
+
+.partidoBarraBackground {
+  height: 12px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  grid-column: 1 / 3;
+}
+
+.partidoBarraForeground {
+  height: 100%;
+  border-radius: 4px;
+  transition: width 0.5s ease-in-out;
+}
+
+.panelEstadoRecuento {
+  display: flex;
+  justify-content: space-around;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.estadoItem {
+  width: 95px;
+  text-align: center;
+}
+
+.estadoItem span {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: #666;
+  display: block;
+}
+
+/* --- ESTILOS PARA MAPA --- */
+/* --- INICIO DE LA CORRECCIÓN --- */
+.mapaComponenteContainer { 
+  width: 100%; 
+  height: 100%; 
+  position: relative; /* Esta línea es la que faltaba */
+  overflow: hidden; 
+}
+/* --- FIN DE LA CORRECCIÓN --- */
+
+.mapaRenderArea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+.mapaVolverBtn,
+.zoomBtn {
+  background-color: #ffffff;
+  border: 1px solid #e0e0e0; /* Borde más sutil */
+  border-radius: 8px; /* Bordes más suaves */
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada y moderna */
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out; /* Transición suave para todos los efectos */
+  color: #333;
+}
+
+.mapaVolverBtn:hover,
+.zoomBtn:hover:not(:disabled) {
+  border-color: #007bff; /* Borde de acento */
+  color: #007bff; /* Icono/texto de acento */
+  transform: translateY(-2px); /* Efecto de "levantar" */
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
+}
+
+.mapaVolverBtn:active,
+.zoomBtn:active:not(:disabled) {
+  transform: translateY(0px); /* Botón "presionado" */
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra interior */
+  background-color: #f8f9fa;
+}
+
+.mapaVolverBtn {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 10;
+  padding: 8px 12px;
+  font-weight: 500;
+}
+
+:global(.rsm-zoomable-group) { transition: transform 0.75s ease-in-out; }
+:global(.rsm-zoomable-group.panning) { transition: none; }
+
+.panelMainContent.panelCollapsed .mapaColumn { flex: 1 1 100%; }
+
+.panelMainContent.panelCollapsed .resultadosColumn {
+  flex-basis: 0;
+  min-width: 0;
+  max-width: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.panelToggleBtn {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 30px;
+  height: 50px;
+  border: 1px solid #ccc;
+  background-color: white;
+  border-radius: 4px 0 0 4px;
+  cursor: pointer;
+  font-size: 1.3rem;
+  font-weight: bold;
+  color: #555;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.2s;
+}
+
+.panelToggleBtn:hover { background-color: #f0f0f0; }
+
+:global(.rsm-geography) {
+  stroke: #000000;
+  stroke-width: 0.25px;
+  outline: none;
+  transition: filter 0.2s ease-in-out;
+}
+:global(.rsm-geography:not(.selected):hover) {
+  filter: brightness(1.25);
+  stroke: #ffffff;
+  stroke-width: 0.25px;
+  paint-order: stroke;
+}
+:global(.rsm-geography.selected) {
+  stroke: #000000;
+  stroke-width: 0.25px;
+  filter: none;
+  pointer-events: none;
+}
+:global(.rsm-geography-faded), :global(.rsm-geography-faded-municipality) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+:global(.caba-comuna-geography) {
+  stroke: #000000;
+  stroke-width: 0.05px;
+}
+:global(.caba-comuna-geography:not(.selected):hover) {
+  stroke: #000000;
+  stroke-width: 0.055px;
+  filter: brightness(1.25);
+}
+
+.transitionSpinner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.transitionSpinner::after {
+  content: '';
+  width: 50px;
+  height: 50px;
+  border: 5px solid rgba(0, 0, 0, 0.2);
+  border-top-color: #007bff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.cabaMagnifierContainer { position: absolute; height: auto; transform: translate(-50%, -50%); pointer-events: none; }
+.cabaLupaSvg { width: 100%; height: auto; pointer-events: none; }
+.cabaLupaInteractiveArea { pointer-events: all; cursor: pointer; filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25)); transition: transform 0.2s ease-in-out; }
+.cabaLupaInteractiveArea:hover { filter: brightness(1.15); stroke: #ffffff; stroke-width: 0.25px; }
+
+.skeletonFila div {
+  background: #f6f7f8;
+  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
+  background-repeat: no-repeat;
+  background-size: 800px 104px;
+  animation: shimmer 1s linear infinite;
+  border-radius: 4px;
+}
+.skeletonLogo { width: 65px; height: 65px; }
+.skeletonText { height: 1em; }
+.skeletonBar { height: 20px; margin-top: 4px; }
+
+.zoomControlsContainer {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 8px; /* Un poco más de espacio */
+}
+
+/* Estilos específicos para los botones de zoom */
+.zoomBtn {
+  width: 40px;
+  height: 40px;
+}
+
+.zoomIconWrapper svg {
+  width: 22px; /* Iconos ligeramente más grandes */
+  height: 22px;
+}
+
+/* Estilo para el botón deshabilitado */
+.zoomBtn:disabled,
+.zoomBtn.disabled { /* Cubrimos ambos casos */
+  opacity: 0.6;
+  cursor: not-allowed;
+  background-color: #f8f9fa;
+}
+
+:global(.map-locked .rsm-geography) { cursor: pointer; }
+:global(.map-pannable .rsm-geography) { cursor: grab; }
+
+.headerBottomRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1rem;
+  gap: 1rem;
+}
+.municipioSearchContainer { min-width: 280px; }
+
+@media (max-width: 800px) {
+  .panelNacionalContainer { display: flex; flex-direction: column; height: 100vh; padding: 0; border: none; border-radius: 0; }
+  .panelHeader { flex-shrink: 0; padding: 1rem; border-radius: 0; }
+  .panelMainContent { flex-grow: 1; position: relative; height: auto; min-height: 0; }
+  .panelToggleBtn { display: none; }
+  .headerTopRow { flex-direction: column; align-items: flex-start; gap: 1rem; }
+  .categoriaSelectorContainer { width: 100%; }
+  .mapaColumn,
+  .resultadosColumn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; }
+  .mapaColumn { z-index: 10; }
+  .resultadosColumn { padding: 1rem; overflow-y: auto; z-index: 15; }
+  .panelMainContent.mobile-view-mapa .resultadosColumn { opacity: 0; visibility: hidden; pointer-events: none; }
+  .panelMainContent.mobile-view-resultados .mapaColumn { opacity: 0; visibility: hidden; pointer-events: none; }
+  .resultadosColumn { padding: 0.5rem; padding-bottom: 50px; }
+  .mapaColumn .mapaComponenteContainer, .mapaColumn .mapaRenderArea { height: 100%; }
+  .panelPartidosContainer { padding-bottom: 0; }
+  .zoomControlsContainer, .mapaVolverBtn { top: 15px; }
+  .headerBottomRow { flex-direction: column; align-items: stretch; gap: 1rem; }
+  .municipioSearchContainer { min-width: 100%; }
+
+  @media (max-width: 900px) and (orientation: landscape) {
+    .panelMainContent { display: flex; flex-direction: row; position: static; height: 85vh; min-height: 400px; }
+    .mapaColumn,
+    .resultadosColumn { position: static; height: auto; width: auto; opacity: 1; visibility: visible; pointer-events: auto; flex: 3; overflow-y: auto; }
+    .resultadosColumn { flex: 2; min-width: 300px; }
+    .mobileResultsCardContainer { display: none; }
+    .panelToggleBtn { display: flex; }
+  }
+}
+
+.mobileResultsCardContainer {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 40;
+  width: 95%;
+  max-width: 450px;
+  background-color: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+}
+.mobileResultsCardContainer.view-resultados .collapsibleSection { display: none; }
+.mobileResultsCardContainer.view-resultados .mobileCardViewToggle { border-top: none; }
+.collapsibleSection { display: flex; flex-direction: column; }
+.mobileResultsHeader { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; cursor: pointer; }
+.mobileResultsHeader .headerInfo { display: flex; align-items: baseline; gap: 12px; }
+.mobileResultsHeader .headerInfo h4 { margin: 0; font-size: 1.2rem; font-weight: 700; }
+.mobileResultsHeader .headerInfo .headerActionText { font-size: 0.8rem; color: #6c757d; font-weight: 500; text-transform: uppercase; }
+.mobileResultsHeader .headerToggleIcon { font-size: 1.5rem; color: #007bff; transition: transform 0.3s; }
+.mobileResultsContent { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out; padding: 0 15px; border-top: 1px solid transparent; }
+.mobileResultsCardContainer.expanded .mobileResultsContent { max-height: 500px; opacity: 1; padding: 5px 15px 15px 15px; border-top-color: #e0e0e0; }
+.mobileResultRow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; border-left: 4px solid; padding-left: 8px; }
+.mobileResultRow:last-child { border-bottom: none; }
+.mobileResultLogo { flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; }
+.mobileResultLogo img { width: 100%; height: 100%; border-radius: 8px; }
+.mobileResultInfo { flex-grow: 1; min-width: 0; }
+.mobileResultPartyName { display: block; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mobileResultCandidateName { display: block; font-size: 0.75rem; color: #6c757d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.mobileResultStats { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
+.mobileResultStats strong { font-size: 0.95rem; font-weight: 700; }
+.mobileResultStats span { font-size: 0.7rem; color: #6c757d; }
+.noResultsText { padding: 1rem; text-align: center; color: #6c757d; font-size: 0.9rem; }
+.mobileCardViewToggle { display: flex; padding: 5px; background-color: rgba(230, 230, 230, 0.6); border-top: 1px solid rgba(0, 0, 0, 0.08); }
+.mobileCardViewToggle .toggleBtn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: none; background-color: transparent; border-radius: 25px; cursor: pointer; font-size: 1rem; font-weight: 500; color: #555; transition: all 0.2s ease-in-out; }
+.mobileCardViewToggle .toggleBtn.active { background-color: #007bff; color: white; box-shadow: 0 2px 5px rgba(0, 123, 255, 0.2); }
+
+@media (max-width: 380px) {
+  .mobileResultsHeader { padding: 4px 10px; }
+  .mobileResultsHeader .headerInfo h4 { font-size: 0.75rem; text-transform: uppercase; }
+  .mobileResultsHeader .headerInfo .headerActionText { font-size: 0.7rem; }
+  .mobileCardViewToggle .toggleBtn { padding: 6px 10px; font-size: 0.8rem; }
+}
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx
index 3ccca55..da099fc 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacionalWidget.tsx
@@ -1,3 +1,5 @@
+// src/features/legislativas/nacionales/PanelNacionalWidget.tsx
+
 import { useMemo, useState, Suspense, useEffect } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { getPanelElectoral } from '../../../apiService';
@@ -5,7 +7,8 @@ import { MapaNacional } from './components/MapaNacional';
 import { PanelResultados } from './components/PanelResultados';
 import { Breadcrumbs } from './components/Breadcrumbs';
 import { MunicipioSearch } from './components/MunicipioSearch';
-import './PanelNacional.css';
+// 1. La importación de CSS ahora se hace como un módulo
+import styles from './PanelNacional.module.css';
 import Select from 'react-select';
 import type { PanelElectoralDto, ResultadoTicker } from '../../../types/types';
 import { FiMap, FiList, FiChevronDown, FiChevronUp } from 'react-icons/fi';
@@ -26,22 +29,23 @@ interface MobileResultsCardProps {
 const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 
 // --- SUB-COMPONENTE PARA UNA FILA DE RESULTADO ---
+// 2. Todas las props 'className' ahora usan el objeto 'styles'
 const ResultRow = ({ partido }: { partido: ResultadoTicker }) => (
-    <div className="mobile-result-row" style={{ borderLeftColor: partido.color || '#ccc' }}>
-        <div className="mobile-result-logo" style={{ backgroundColor: partido.color || '#e9ecef' }}>
+    <div className={styles.mobileResultRow} style={{ borderLeftColor: partido.color || '#ccc' }}>
+        <div className={styles.mobileResultLogo} style={{ backgroundColor: partido.color || '#e9ecef' }}>
              <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
         </div>
-        <div className="mobile-result-info">
+        <div className={styles.mobileResultInfo}>
             {partido.nombreCandidato ? (
                 <>
-                    <span className="mobile-result-party-name">{partido.nombreCandidato}</span>
-                    <span className="mobile-result-candidate-name">{partido.nombreCorto || partido.nombre}</span>
+                    <span className={styles.mobileResultPartyName}>{partido.nombreCandidato}</span>
+                    <span className={styles.mobileResultCandidateName}>{partido.nombreCorto || partido.nombre}</span>
                 </>
             ) : (
-                <span className="mobile-result-party-name">{partido.nombreCorto || partido.nombre}</span>
+                <span className={styles.mobileResultPartyName}>{partido.nombreCorto || partido.nombre}</span>
             )}
         </div>
-        <div className="mobile-result-stats">
+        <div className={styles.mobileResultStats}>
             <strong>{formatPercent(partido.porcentaje)}</strong>
             <span>{partido.votos.toLocaleString('es-AR')}</span>
         </div>
@@ -80,44 +84,50 @@ const MobileResultsCard = ({
         return null;
     }
 
+    // 3. Clases condicionales también se construyen con el objeto 'styles'
+    const cardClasses = [
+        styles.mobileResultsCardContainer,
+        isExpanded ? styles.expanded : '',
+        styles[`view-${mobileView}`]
+    ].join(' ');
+
     return (
-        <div className={`mobile-results-card-container ${isExpanded ? 'expanded' : ''} view-${mobileView}`}>
+        <div className={cardClasses}>
             {/* Sección Colapsable con Resultados */}
-            <div className="collapsible-section">
-                <div className="mobile-results-header" onClick={() => setIsExpanded(!isExpanded)}>
-                    <div className="header-info">
+            <div className={styles.collapsibleSection}>
+                <div className={styles.mobileResultsHeader} onClick={() => setIsExpanded(!isExpanded)}>
+                    <div className={styles.headerInfo}>
                         <h4>{ambitoNombre}</h4>
-                        {/* Se añade una clase para estilizar este texto específicamente */}
-                        <span className="header-action-text">{isExpanded ? 'Ocultar resultados' : 'Ver top 3'}</span>
+                        <span className={styles.headerActionText}>{isExpanded ? 'Ocultar resultados' : 'Ver top 3'}</span>
                     </div>
-                    <div className="header-toggle-icon">
+                    <div className={styles.headerToggleIcon}>
                         {isExpanded ? <FiChevronDown /> : <FiChevronUp />}
                     </div>
                 </div>
-                <div className="mobile-results-content">
+                <div className={styles.mobileResultsContent}>
                     {topResults.length > 0 ? (
                         topResults.map(partido => <ResultRow key={partido.id} partido={partido} />)
                     ) : (
-                        <p className="no-results-text">No hay resultados para esta selección.</p>
+                        <p className={styles.noResultsText}>No hay resultados para esta selección.</p>
                     )}
                 </div>
             </div>
 
             {/* Footer Fijo con Botones de Navegación */}
-            <div className="mobile-card-view-toggle">
+            <div className={styles.mobileCardViewToggle}>
                 <button
-                    className={`toggle-btn ${mobileView === 'mapa' ? 'active' : ''}`}
+                    className={`${styles.toggleBtn} ${mobileView === 'mapa' ? styles.active : ''}`}
                     onClick={() => setMobileView('mapa')}
                 >
                     <FiMap />
                     <span>Mapa</span>
                 </button>
                 <button
-                    className={`toggle-btn ${mobileView === 'resultados' ? 'active' : ''}`}
+                    className={`${styles.toggleBtn} ${mobileView === 'resultados' ? styles.active : ''}`}
                     onClick={() => setMobileView('resultados')}
                 >
                     <FiList />
-                    <span>Resultados</span>
+                    <span>Detalles</span>
                 </button>
             </div>
         </div>
@@ -190,22 +200,28 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
     [categoriaId]
   );
 
+  const mainContentClasses = [
+    styles.panelMainContent,
+    !isPanelOpen ? styles.panelCollapsed : '',
+    isMobile ? styles[`mobile-view-${mobileView}`] : ''
+  ].join(' ');
+
   return (
-    <div className="panel-nacional-container">
-      <Toaster containerClassName="widget-toaster-container" />
-      <header className="panel-header">
-        <div className="header-top-row">
+    <div className={styles.panelNacionalContainer}>
+      <Toaster containerClassName={styles.widgetToasterContainer} />
+      <header className={styles.panelHeader}>
+        <div className={styles.headerTopRow}>
           <Select
             options={CATEGORIAS_NACIONALES}
             value={selectedCategoria}
             onChange={(option) => option && setCategoriaId(option.value)}
-            className="categoria-selector"
-            classNamePrefix="categoria-selector"
+            // 4. Usamos un prefijo de clase simple que se asociará con las clases del módulo CSS
+            classNamePrefix="categoriaSelector"
+            className={styles.categoriaSelectorContainer}
             isSearchable={false}
           />
         </div>
-        {/* --- 2. NUEVO CONTENEDOR PARA BREADCRUMBS Y BUSCADOR --- */}
-        <div className="header-bottom-row">
+        <div className={styles.headerBottomRow}>
             <Breadcrumbs
                 nivel={ambitoActual.nivel}
                 nombreAmbito={ambitoActual.nombre}
@@ -213,7 +229,6 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
                 onReset={handleResetToPais}
                 onVolverProvincia={handleVolverAProvincia}
             />
-            {/* --- 3. RENDERIZADO CONDICIONAL DEL BUSCADOR --- */}
             {ambitoActual.nivel === 'provincia' && ambitoActual.provinciaDistritoId && (
                 <MunicipioSearch 
                     distritoId={ambitoActual.provinciaDistritoId}
@@ -224,16 +239,16 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
             )}
         </div>
       </header>
-      <main className={`panel-main-content ${!isPanelOpen ? 'panel-collapsed' : ''} ${isMobile ? `mobile-view-${mobileView}` : ''}`}>
-        <div className="mapa-column">
-          <button className="panel-toggle-btn" onClick={() => setIsPanelOpen(!isPanelOpen)} title={isPanelOpen ? "Ocultar panel" : "Mostrar panel"}> {isPanelOpen ? '›' : '‹'} </button>
+      <main className={mainContentClasses}>
+        <div className={styles.mapaColumn}>
+          <button className={styles.panelToggleBtn} onClick={() => setIsPanelOpen(!isPanelOpen)} title={isPanelOpen ? "Ocultar panel" : "Mostrar panel"}> {isPanelOpen ? '›' : '‹'} </button>
           
-          <Suspense fallback={<div className="spinner" />}>
+          <Suspense fallback={<div className={styles.spinner} />}>
             <MapaNacional eleccionId={eleccionId} categoriaId={categoriaId} nivel={ambitoActual.nivel} nombreAmbito={ambitoActual.nombre} nombreProvinciaActiva={ambitoActual.provinciaNombre} provinciaDistritoId={ambitoActual.provinciaDistritoId ?? null} onAmbitoSelect={handleAmbitoSelect} onVolver={ambitoActual.nivel === 'municipio' ? handleVolverAProvincia : handleResetToPais} isMobileView={isMobile} />
           </Suspense>
         </div>
-        <div className="resultados-column">
-          <Suspense fallback={<div className="spinner" />}>
+        <div className={styles.resultadosColumn}>
+          <Suspense fallback={<div className={styles.spinner} />}>
             <PanelContenido eleccionId={eleccionId} ambitoActual={ambitoActual} categoriaId={categoriaId} />
           </Suspense>
         </div>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.module.css
similarity index 61%
rename from Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css
rename to Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.module.css
index 5573059..fd95daf 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.module.css
@@ -1,26 +1,28 @@
-/* src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.css */
+/* src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.module.css */
 
-/* --- Variables de Diseño --- */
-:root {
+/* --- SOLUCIÓN PARA FUENTES Y ESTILOS GLOBALES --- */
+.cardsWidgetContainer,
+.cardsWidgetContainer * {
+    font-family: "Roboto", system-ui, sans-serif !important;
+    box-sizing: border-box;
+}
+
+/* --- Contenedor Principal del Widget y Variables --- */
+.cardsWidgetContainer {
     --card-border-color: #e0e0e0;
     --card-bg-color: #ffffff;
     --card-header-bg-color: #e6f1fd;
     --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     --text-primary: #212529;
     --text-secondary: #6c757d;
-    --font-family: "Roboto", system-ui, sans-serif;
     --primary-accent-color: #007bff;
-}
-
-/* --- Contenedor Principal del Widget --- */
-.cards-widget-container {
-    font-family: var(--font-family);
+    
     width: 100%;
     max-width: 1200px;
     margin: 2rem auto;
 }
 
-.cards-widget-container h2 {
+.cardsWidgetContainer h2 {
     font-size: 1.75rem;
     color: var(--text-primary);
     margin-bottom: 1.5rem;
@@ -29,27 +31,26 @@
 }
 
 /* --- Grilla de Tarjetas --- */
-.cards-grid {
+.cardsGrid {
     display: grid;
-    /* Crea columnas flexibles que se ajustan al espacio disponible */
     grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
     gap: 1.5rem;
     align-items: start;
 }
 
 /* --- Tarjeta Individual --- */
-.provincia-card {
+.provinciaCard {
     background-color: var(--card-bg-color);
     border: 1px solid var(--card-border-color);
     border-radius: 8px;
     box-shadow: var(--card-shadow);
     display: flex;
     flex-direction: column;
-    overflow: hidden; /* Asegura que los bordes redondeados se apliquen al contenido */
+    overflow: hidden;
 }
 
 /* --- Cabecera de la Tarjeta --- */
-.card-header {
+.cardHeader {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -58,20 +59,20 @@
     border-bottom: 1px solid var(--card-border-color);
 }
 
-.header-info h3 {
+.headerInfo h3 {
     margin: 0;
     font-size: 1.2rem;
     font-weight: 700;
     color: var(--text-primary);
 }
 
-.header-info span {
+.headerInfo span {
     font-size: 0.8rem;
     color: var(--text-secondary);
     text-transform: uppercase;
 }
 
-.header-map {
+.headerMap {
     width: 90px;
     height: 90px;
     flex-shrink: 0;
@@ -79,72 +80,65 @@
     overflow: hidden;
     background-color: #f7fbff;
     padding: 0.25rem;
-    box-sizing: border-box; /* Para que el padding no aumente el tamaño total */
 }
 
-/* Contenedor del SVG para asegurar que se ajuste al espacio */
-.map-svg-container, .map-placeholder {
+.mapSvgContainer, .mapPlaceholder {
     width: 100%;
     height: 100%;
     border-radius: 16px;
 }
 
-/* Estilo para el SVG renderizado */
-.map-svg-container svg {
+.mapSvgContainer svg {
     width: 100%;
     height: 100%;
-    object-fit: contain; /* Asegura que el mapa no se deforme */
+    object-fit: contain;
 }
 
-/* Placeholder para cuando el mapa no carga */
-.map-placeholder.error {
-    background-color: #f8d7da; /* Un color de fondo rojizo para indicar un error */
+.mapPlaceholder.error {
+    background-color: #f8d7da;
 }
 
 /* --- Cuerpo de la Tarjeta --- */
-.card-body {
+.cardBody {
     padding: 0.5rem 1rem;
 }
 
-.candidato-row:last-child {
+.candidatoRow:last-child {
     border-bottom: none;
 }
 
-.candidato-row {
+.candidatoRow {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     padding: 0.75rem 0;
     border-bottom: 1px solid #f0f0f0;
-    border-left: 5px solid; /* Grosor del borde */
-    border-radius: 12px;     /* Redondeamos las esquinas para un look más suave */
-    padding-left: 0.75rem;      /* Añadimos un poco de espacio a la izquierda */
+    border-left: 5px solid;
+    border-radius: 12px;
+    padding-left: 0.75rem;
 }
 
-/* Nuevo contenedor para el logo con fondo de color */
-.candidato-foto-wrapper {
+.candidatoFotoWrapper {
     width: 60px;
     height: 60px;
     border-radius: 12px;
     flex-shrink: 0;
-    box-sizing: border-box;
-    background-color: #e9ecef; /* Color de fallback */
+    background-color: #e9ecef;
 }
 
-/* La imagen ahora llena su nuevo contenedor */
-.candidato-foto {
+.candidatoFoto {
     width: 100%;
     height: 100%;
     border-radius: 12px;
 }
 
-.candidato-data {
+.candidatoData {
     flex-grow: 1;
-    min-width: 0; /* Permite que el texto se trunque si es necesario */
+    min-width: 0;
     margin-right: 0.5rem;
 }
 
-.candidato-nombre {
+.candidatoNombre {
     font-weight: 700;
     font-size: 0.95rem;
     color: var(--text-primary);
@@ -152,7 +146,7 @@
     text-align: left;
 }
 
-.candidato-partido {
+.candidatoPartido {
     font-size: 0.75rem;
     color: var(--text-secondary);
     text-transform: uppercase;
@@ -161,20 +155,20 @@
     text-align: left;
 }
 
-.progress-bar-container {
+.progressBarContainer {
     height: 16px;
     background-color: #e9ecef;
     border-radius: 3px;
     overflow: hidden;
 }
 
-.progress-bar {
+.progressBar {
     height: 100%;
     border-radius: 3px;
     transition: width 0.5s ease-out;
 }
 
-.candidato-stats {
+.candidatoStats {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
@@ -183,18 +177,18 @@
     padding-left: 0.5rem;
 }
 
-.stats-percent {
+.statsPercent {
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--text-primary);
 }
 
-.stats-votos {
+.statsVotos {
     font-size: 0.8rem;
     color: var(--text-secondary);
 }
 
-.stats-bancas {
+.statsBancas {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -210,7 +204,7 @@
     min-width: 50px;
 }
 
-.stats-bancas span {
+.statsBancas span {
     font-size: 0.65rem;
     font-weight: 500;
     color: var(--text-secondary);
@@ -218,9 +212,8 @@
     margin-top: -4px;
 }
 
-
 /* --- Pie de la Tarjeta --- */
-.card-footer {
+.cardFooter {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     background-color: var(--card-header-bg-color);
@@ -229,21 +222,21 @@
     text-align: center;
 }
 
-.card-footer div {
+.cardFooter div {
     border-right: 1px solid var(--card-border-color);
 }
 
-.card-footer div:last-child {
+.cardFooter div:last-child {
     border-right: none;
 }
 
-.card-footer span {
+.cardFooter span {
     display: block;
     font-size: 0.75rem;
     color: var(--text-secondary);
 }
 
-.card-footer strong {
+.cardFooter strong {
     font-size: 1rem;
     font-weight: 700;
     color: var(--text-primary);
@@ -251,43 +244,39 @@
 
 /* --- Media Query para Móvil --- */
 @media (max-width: 480px) {
-    .cards-grid {
-        /* En pantallas muy pequeñas, forzamos una sola columna */
+    .cardsGrid {
         grid-template-columns: 1fr;
     }
 
-    .card-header {
+    .cardHeader {
         padding: 0.5rem;
     }
     
-    .header-info h3 {
+    .headerInfo h3 {
         font-size: 1rem;
     }
 }
 
-/* --- ESTILOS PARA EL NOMBRE DEL PARTIDO CUANDO ES EL TÍTULO PRINCIPAL --- */
-.candidato-partido.main-title {
-    font-size: 0.95rem;      /* Hacemos la fuente más grande */
-    font-weight: 700;        /* La ponemos en negrita, como el nombre del candidato */
-    color: var(--text-primary); /* Usamos el color de texto principal */
-    text-transform: none;    /* Quitamos el 'uppercase' para que se lea mejor */
+.candidatoPartido.mainTitle {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    text-transform: none;
     margin-bottom: 0.3rem;
 }
 
 /* --- ESTILOS PARA LA ESTRUCTURA MULTI-CATEGORÍA --- */
-
-.categoria-bloque {
+.categoriaBloque {
     width: 100%;
 }
 
-/* Añadimos un separador si hay más de una categoría en la misma tarjeta */
-.categoria-bloque + .categoria-bloque {
+.categoriaBloque + .categoriaBloque {
     border-top: 1px dashed var(--card-border-color);
     margin-top: 1rem;
     padding-top: 1rem;
 }
 
-.categoria-titulo {
+.categoriaTitulo {
     font-size: 0.8rem;
     color: var(--text-secondary);
     text-transform: uppercase;
@@ -295,19 +284,18 @@
     margin: 0 0 1rem 0;
 }
 
-/* Ajuste para el footer, que ahora está dentro de cada categoría */
-.categoria-bloque .card-footer {
+.categoriaBloque .cardFooter {
     grid-template-columns: repeat(3, 1fr);
-    background-color: transparent; /* Quitamos el fondo gris */
+    background-color: transparent;
     border-top: 1px solid var(--card-border-color);
     padding: 0.75rem 0;
-    margin-top: 0.75rem; /* Espacio antes del footer */
+    margin-top: 0.75rem;
     text-align: center;
 }
 
-.categoria-bloque .card-footer div {
+.categoriaBloque .cardFooter div {
     border-right: 1px solid var(--card-border-color);
 }
-.categoria-bloque .card-footer div:last-child {
+.categoriaBloque .cardFooter div:last-child {
     border-right: none;
 }
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx
index 5f82663..5fac9a6 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx
@@ -2,24 +2,23 @@
 import { useQuery } from '@tanstack/react-query';
 import { getResumenPorProvincia } from '../../../apiService';
 import { ProvinciaCard } from './components/ProvinciaCard';
-import './ResultadosNacionalesCardsWidget.css';
+// 1. La importación de CSS ahora se hace como un módulo
+import styles from './ResultadosNacionalesCardsWidget.module.css';
 
-// --- 1. AÑADIR LA PROP A LA INTERFAZ ---
 interface Props {
     eleccionId: number;
     focoDistritoId?: string;
     focoCategoriaId?: number;
     cantidadResultados?: number;
-    mostrarBancas?: boolean; // Booleano opcional
+    mostrarBancas?: boolean;
 }
 
-// --- 2. RECIBIR LA PROP Y ESTABLECER UN VALOR POR DEFECTO ---
 export const ResultadosNacionalesCardsWidget = ({ 
     eleccionId, 
     focoDistritoId, 
     focoCategoriaId, 
     cantidadResultados,
-    mostrarBancas = false // Por defecto, no se muestran las bancas
+    mostrarBancas = false
 }: Props) => {
     
     const { data, isLoading, error } = useQuery({
@@ -36,9 +35,10 @@ export const ResultadosNacionalesCardsWidget = ({
     if (error) return <div>Error al cargar los datos.</div>;
     if (!data || data.length === 0) return <div>No hay resultados para mostrar con los filtros seleccionados.</div>
 
+    // 2. Todas las props 'className' ahora usan el objeto 'styles'
     return (
-        <section className="cards-widget-container">
-            <div className="cards-grid">
+        <section className={styles.cardsWidgetContainer}>
+            <div className={styles.cardsGrid}>
                 {data?.map(provinciaData => (
                     <ProvinciaCard 
                         key={provinciaData.provinciaId} 
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/Breadcrumbs.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/Breadcrumbs.tsx
index 7cf72db..1f5f782 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/Breadcrumbs.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/Breadcrumbs.tsx
@@ -1,5 +1,7 @@
 // src/features/legislativas/nacionales/components/Breadcrumbs.tsx
 import { FiHome, FiChevronRight } from 'react-icons/fi';
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../PanelNacional.module.css';
 
 interface BreadcrumbsProps {
   nivel: 'pais' | 'provincia' | 'municipio';
@@ -10,36 +12,37 @@ interface BreadcrumbsProps {
 }
 
 export const Breadcrumbs = ({ nivel, nombreAmbito, nombreProvincia, onReset, onVolverProvincia }: BreadcrumbsProps) => {
+  // 2. Todas las props 'className' ahora usan el objeto 'styles'
   return (
-    <nav className="breadcrumbs-container">
+    <nav className={styles.breadcrumbsContainer}>
       {nivel !== 'pais' ? (
         <>
-          <button onClick={onReset} className="breadcrumb-item">
-            <FiHome className="breadcrumb-icon" />
+          <button onClick={onReset} className={styles.breadcrumbItem}>
+            <FiHome className={styles.breadcrumbIcon} />
             <span>Argentina</span>
           </button>
-          <FiChevronRight className="breadcrumb-separator" />
+          <FiChevronRight className={styles.breadcrumbSeparator} />
         </>
       ) : (
-        <div className="breadcrumb-item-actual">
-          <FiHome className="breadcrumb-icon" />
+        <div className={styles.breadcrumbItemActual}>
+          <FiHome className={styles.breadcrumbIcon} />
           <span>{nombreAmbito}</span>
         </div>
       )}
       
       {nivel === 'provincia' && (
-        <div className="breadcrumb-item-actual">
+        <div className={styles.breadcrumbItemActual}>
           <span>{nombreAmbito}</span>
         </div>
       )}
 
       {nivel === 'municipio' && nombreProvincia && (
         <>
-          <button onClick={onVolverProvincia} className="breadcrumb-item">
+          <button onClick={onVolverProvincia} className={styles.breadcrumbItem}>
             <span>{nombreProvincia}</span>
           </button>
-          <FiChevronRight className="breadcrumb-separator" />
-          <div className="breadcrumb-item-actual">
+          <FiChevronRight className={styles.breadcrumbSeparator} />
+          <div className={styles.breadcrumbItemActual}>
             <span>{nombreAmbito}</span>
           </div>
         </>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/CabaLupa.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/CabaLupa.tsx
index f787c84..73c90db 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/CabaLupa.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/CabaLupa.tsx
@@ -1,17 +1,21 @@
 // src/features/legislativas/nacionales/components/CabaLupa.tsx
 
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../PanelNacional.module.css';
+
 interface CabaLupaProps {
   fillColor: string;
   onClick: () => void;
 }
 
 export const CabaLupa = ({ fillColor, onClick }: CabaLupaProps) => {
+  // 2. Todas las props 'className' ahora usan el objeto 'styles'
   return (
-    <svg viewBox="0 0 542 256" className="caba-lupa-svg">
+    <svg viewBox="0 0 542 256" className={styles.cabaLupaSvg}>
       <g transform="translate(10, 10)">
         <g
           onClick={onClick}
-          className="caba-lupa-interactive-area"          
+          className={styles.cabaLupaInteractiveArea}          
         >
           <g transform="rotate(25.8155, 280.549, 151.582)">
             <ellipse ry="116.11771" rx="123.49187" cy="69.21453" cx="372.69183" stroke="#999" strokeWidth="2" fill="#fff" />
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx
index 138f741..c71ce5a 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaNacional.tsx
@@ -1,3 +1,4 @@
+// src/features/legislativas/nacionales/components/MapaNacional.tsx
 import axios from 'axios';
 import { Suspense, useState, useEffect, useCallback, useRef } from 'react';
 import { useSuspenseQuery } from '@tanstack/react-query';
@@ -12,6 +13,8 @@ import { CabaLupa } from './CabaLupa';
 import { BiZoomIn, BiZoomOut } from "react-icons/bi";
 import toast from 'react-hot-toast';
 import { useMediaQuery } from '../hooks/useMediaQuery';
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../PanelNacional.module.css';
 
 const DEFAULT_MAP_COLOR = '#E0E0E0';
 const FADED_BACKGROUND_COLOR = '#F0F0F0';
@@ -52,7 +55,6 @@ interface MapaNacionalProps {
   isMobileView: boolean;
 }
 
-// --- CONFIGURACIONES DEL MAPA ---
 const desktopProjectionConfig = { scale: 700, center: [-65, -40] as [number, number] };
 const mobileProjectionConfig = { scale: 1000, center: [-64, -43] as [number, number] };
 const mobileSmallProjectionConfig = { scale: 750, center: [-64, -45] as [number, number] };
@@ -123,7 +125,6 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
     }
   }, [nivel, nombreAmbito, geoDataNacional, isMobileView, isMobileSmall]);
 
-
   const resultadosNacionalesPorNombre = new Map<string, ResultadoMapaDto>(mapaDataNacional.map(d => [normalizarTexto(d.ambitoNombre), d]));
   const nombreMunicipioSeleccionado = nivel === 'municipio' ? nombreAmbito : null;
   const handleCalculatedCenter = useCallback((center: PointTuple, zoom: number) => { setPosition({ center, zoom }); }, []);
@@ -235,30 +236,31 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
   const isZoomOutDisabled =
     (nivel === 'provincia' && initialProvincePositionRef.current && position.zoom <= initialProvincePositionRef.current.zoom) ||
     (nivel === 'pais' && position.zoom <= (isMobileView ? 1.4 : 1.05));
-
-  const mapContainerClasses = panEnabled ? 'mapa-componente-container map-pannable' : 'mapa-componente-container map-locked';
+    
+  // 2. Todas las props 'className' ahora usan el objeto 'styles'
+  const mapContainerClasses = `${styles.mapaComponenteContainer} ${panEnabled ? styles.mapPannable : styles.mapLocked}`;
 
   return (
     <div className={mapContainerClasses} ref={containerRef}>
       {showZoomControls && (
-        <div className="zoom-controls-container">
-          <button onClick={handleZoomIn} className="zoom-btn" title="Acercar">
-            <span className="zoom-icon-wrapper"><BiZoomIn /></span>
+        <div className={styles.zoomControlsContainer}>
+          <button onClick={handleZoomIn} className={styles.zoomBtn} title="Acercar">
+            <span className={styles.zoomIconWrapper}><BiZoomIn /></span>
           </button>
           <button
             onClick={handleZoomOut}
-            className={`zoom-btn ${isZoomOutDisabled ? 'disabled' : ''}`}
+            className={`${styles.zoomBtn} ${isZoomOutDisabled ? styles.disabled : ''}`}
             title="Alejar"
             disabled={isZoomOutDisabled}
           >
-            <span className="zoom-icon-wrapper"><BiZoomOut /></span>
+            <span className={styles.zoomIconWrapper}><BiZoomOut /></span>
           </button>
         </div>
       )}
 
-      {nivel !== 'pais' && <button onClick={onVolver} className="mapa-volver-btn">← Volver</button>}
+      {nivel !== 'pais' && <button onClick={onVolver} className={styles.mapaVolverBtn}>← Volver</button>}
 
-      <div className="mapa-render-area">
+      <div className={styles.mapaRenderArea}>
         <ComposableMap
           projection="geoMercator"
           projectionConfig={isMobileSmall ? mobileSmallProjectionConfig : (isMobileView ? mobileProjectionConfig : desktopProjectionConfig)}
@@ -270,7 +272,7 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
             onMoveStart={() => setIsPanning(true)}
             onMoveEnd={handleMoveEnd}
             filterZoomEvent={filterInteractionEvents}
-            className={isPanning ? 'panning' : ''}
+            className={isPanning ? styles.panning : ''}
           >
             <Geographies geography={geoDataNacional}>
               {({ geographies }: { geographies: AmbitoGeography[] }) => geographies.map((geo) => {
@@ -284,6 +286,8 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
                     key={geo.rsmKey}
                     geography={geo}
                     ref={esCABA ? cabaPathRef : undefined}
+                    // 3. Las clases de react-simple-maps ahora deben ser globales o no funcionarán
+                    // Como el CSS module ya las define con :global(), no necesitamos hacer nada aquí.
                     className={`rsm-geography ${nivel !== 'pais' ? 'rsm-geography-faded' : ''}`}
                     style={{ visibility: esCABA ? 'hidden' : (esProvinciaActiva ? 'hidden' : 'visible') }}
                     fill={nivel === 'pais' ? (resultado?.colorGanador || DEFAULT_MAP_COLOR) : FADED_BACKGROUND_COLOR}
@@ -314,7 +318,7 @@ export const MapaNacional = ({ eleccionId, categoriaId, nivel, nombreAmbito, nom
       </div>
 
       {nivel === 'pais' && (
-        <div id="caba-lupa-anchor" className="caba-magnifier-container" style={lupaStyle} ref={lupaRef}>
+        <div id="caba-lupa-anchor" className={styles.cabaMagnifierContainer} style={lupaStyle} ref={lupaRef}>
           {(() => {
             const resultadoCABA = resultadosNacionalesPorNombre.get("CIUDAD AUTONOMA DE BUENOS AIRES");
             const fillColor = resultadoCABA?.colorGanador || DEFAULT_MAP_COLOR;
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaProvincial.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaProvincial.tsx
index c67e791..8e2e99f 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaProvincial.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaProvincial.tsx
@@ -7,6 +7,9 @@ import { geoCentroid } from 'd3-geo';
 import { feature } from 'topojson-client';
 import { API_BASE_URL, assetBaseUrl } from '../../../../apiService';
 import type { ResultadoMapaDto, AmbitoGeography } from '../../../../types/types';
+// 1. A diferencia de otros componentes, este no necesita importar el CSS
+// porque no tiene un contenedor propio ni clases únicas.
+// Heredará y usará las clases globales (:global) definidas en PanelNacional.module.css
 
 const DEFAULT_MAP_COLOR = '#E0E0E0';
 const normalizarTexto = (texto: string = ''): string => texto.trim().toUpperCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -42,7 +45,6 @@ export const MapaProvincial = ({ eleccionId, categoriaId, distritoId, nombreProv
     },
   });
 
-  // useEffect que calcula y exporta la posición del municipio al padre
   useEffect(() => {
     if (nivel === 'municipio' && geoData?.objects && nombreMunicipioSeleccionado) {
       const geometries = geoData.objects[Object.keys(geoData.objects)[0]].geometries;
@@ -50,7 +52,6 @@ export const MapaProvincial = ({ eleccionId, categoriaId, distritoId, nombreProv
       if (municipioGeo) {
         const municipioFeature = feature(geoData, municipioGeo);
         const centroid = geoCentroid(municipioFeature);
-        // Llama a la función del padre para que actualice la posición
         onCalculatedCenter(centroid as PointTuple, 40);
       }
     }
@@ -64,7 +65,10 @@ export const MapaProvincial = ({ eleccionId, categoriaId, distritoId, nombreProv
       {({ geographies }: { geographies: AmbitoGeography[] }) => geographies.map((geo) => {
         const resultado = resultadosPorNombre.get(normalizarTexto(geo.properties.departamento));
         const esSeleccionado = nombreMunicipioSeleccionado ? normalizarTexto(geo.properties.departamento) === normalizarTexto(nombreMunicipioSeleccionado) : false;
-
+        
+        // 2. Las clases aquí NO usan el objeto 'styles' porque son clases
+        // que react-simple-maps necesita globalmente. El archivo CSS
+        // ya se encarga de estilizarlas usando :global(.rsm-geography), etc.
         const classNames = [
           'rsm-geography',
           'mapa-provincial-geography',
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MiniMapaSvg.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MiniMapaSvg.tsx
index 04bf070..49902db 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MiniMapaSvg.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MiniMapaSvg.tsx
@@ -3,61 +3,54 @@ import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { useMemo } from 'react';
 import { assetBaseUrl } from '../../../../apiService';
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../ResultadosNacionalesCardsWidget.module.css';
 
 interface MiniMapaSvgProps {
     provinciaNombre: string;
     fillColor: string;
 }
 
-// Función para normalizar el nombre de la provincia y que coincida con el nombre del archivo SVG
 const normalizarNombreParaUrl = (nombre: string) => 
     nombre
         .toLowerCase()
-        .replace(/ /g, '_') // Reemplaza espacios con guiones bajos
-        .normalize("NFD")    // Descompone acentos para eliminarlos en el siguiente paso
-        .replace(/[\u0300-\u036f]/g, ""); // Elimina los acentos
+        .replace(/ /g, '_')
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "");
 
 export const MiniMapaSvg = ({ provinciaNombre, fillColor }: MiniMapaSvgProps) => {
     const nombreNormalizado = normalizarNombreParaUrl(provinciaNombre);
-    // Asumimos que los SVGs están en /public/maps/provincias-svg/
     const mapFileUrl = `${assetBaseUrl}/maps/provincias-svg/${nombreNormalizado}.svg`;
 
-    // Usamos React Query para fetchear el contenido del SVG como texto
     const { data: svgContent, isLoading, isError } = useQuery<string>({
         queryKey: ['svgMapa', nombreNormalizado],
         queryFn: async () => {
             const response = await axios.get(mapFileUrl, { responseType: 'text' });
             return response.data;
         },
-        staleTime: Infinity, // Estos archivos son estáticos y no cambian
+        staleTime: Infinity,
         gcTime: Infinity,
-        retry: false, // No reintentar si el archivo no existe
+        retry: false,
     });
 
-    // Usamos useMemo para modificar el SVG solo cuando el contenido o el color cambian
     const modifiedSvg = useMemo(() => {
         if (!svgContent) return '';
-
-        // Usamos una expresión regular para encontrar todas las etiquetas <path>
-        // y añadirles el atributo de relleno con el color del ganador.
-        // Esto sobrescribirá cualquier 'fill' que ya exista en la etiqueta.
         return svgContent.replace(/<path/g, `<path fill="${fillColor}"`);
     }, [svgContent, fillColor]);
 
     if (isLoading) {
-        return <div className="map-placeholder" />;
+        // 2. Usamos el objeto 'styles' para las clases
+        return <div className={styles.mapPlaceholder} />;
     }
 
     if (isError || !modifiedSvg) {
-        // Muestra un placeholder si el SVG no se encontró o está vacío
-        return <div className="map-placeholder error" />;
+        // 3. Combinamos clases del módulo para el estado de error
+        return <div className={`${styles.mapPlaceholder} ${styles.error}`} />;
     }
 
-    // Renderizamos el SVG modificado. dangerouslySetInnerHTML es seguro aquí
-    // porque el contenido proviene de nuestros propios archivos SVG estáticos.
     return (
         <div 
-            className="map-svg-container" 
+            className={styles.mapSvgContainer} 
             dangerouslySetInnerHTML={{ __html: modifiedSvg }} 
         />
     );
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MunicipioSearch.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MunicipioSearch.tsx
index 4e4832b..1c411be 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MunicipioSearch.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MunicipioSearch.tsx
@@ -4,6 +4,8 @@ import { useQuery } from '@tanstack/react-query';
 import Select, { type SingleValue } from 'react-select';
 import { getMunicipiosPorDistrito } from '../../../../apiService';
 import type { CatalogoItem } from '../../../../types/types';
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../PanelNacional.module.css';
 
 interface MunicipioSearchProps {
     distritoId: string;
@@ -15,20 +17,9 @@ interface OptionType {
     label: string;
 }
 
-const customSelectStyles = {
-    control: (base: any) => ({
-        ...base,
-        borderRadius: '8px',
-        borderColor: '#e0e0e0',
-        boxShadow: 'none',
-        '&:hover': { borderColor: '#007bff' }
-    }),
-    menu: (base: any) => ({
-        ...base,
-        borderRadius: '8px',
-        zIndex: 30
-    })
-};
+// 2. Definimos los estilos custom para react-select.
+//    Ya no son necesarios aquí porque los definimos en el CSS module.
+//    const customSelectStyles: StylesConfig<OptionType, false> = { ... };
 
 export const MunicipioSearch = ({ distritoId, onMunicipioSelect }: MunicipioSearchProps) => {
     const [selectedOption, setSelectedOption] = useState<SingleValue<OptionType>>(null);
@@ -47,12 +38,15 @@ export const MunicipioSearch = ({ distritoId, onMunicipioSelect }: MunicipioSear
     const handleChange = (selected: SingleValue<OptionType>) => {
         if (selected) {
             onMunicipioSelect(selected.value, selected.label);
-            setSelectedOption(null); // Resetea el selector para que muestre el placeholder de nuevo
+            setSelectedOption(null); 
         }
     };
 
+    // 3. Aplicamos la clase del módulo al contenedor principal
+    //    y usamos el classNamePrefix para que react-select genere clases
+    //    que podamos estilizar desde el CSS module.
     return (
-        <div className="municipio-search-container">
+        <div className={styles.municipioSearchContainer}>
             <Select
                 options={options}
                 onChange={handleChange}
@@ -61,7 +55,9 @@ export const MunicipioSearch = ({ distritoId, onMunicipioSelect }: MunicipioSear
                 placeholder="Buscar municipio..."
                 isClearable
                 isSearchable
-                styles={customSelectStyles}
+                // El prefijo se mantiene igual al del selector de categorías.
+                // Esto nos permite reutilizar los mismos estilos :global que ya definimos.
+                classNamePrefix="categoriaSelector"
                 noOptionsMessage={() => 'No se encontraron municipios'}
             />
         </div>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx
index a0575fc..ca5b9be 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx
@@ -5,6 +5,8 @@ import { assetBaseUrl } from '../../../../apiService';
 import { AnimatedNumber } from './AnimatedNumber';
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import 'react-circular-progressbar/dist/styles.css';
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../PanelNacional.module.css';
 
 const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 const formatVotes = (num: number) => Math.round(num).toLocaleString('es-AR');
@@ -30,11 +32,12 @@ interface PanelResultadosProps {
 }
 
 export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosProps) => {
+  // 2. Todas las props 'className' ahora usan el objeto 'styles'
   return (
-    <div className="panel-resultados">
+    <div className={styles.panelResultados}>
       <SvgDefs />
-      <div className="panel-estado-recuento">
-        <div className="estado-item">
+      <div className={styles.panelEstadoRecuento}>
+        <div className={styles.estadoItem}>
           <CircularProgressbar
             value={estadoRecuento.participacionPorcentaje}
             text={formatPercent(estadoRecuento.participacionPorcentaje)}
@@ -50,7 +53,7 @@ export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosP
           />
           <span>Participación</span>
         </div>
-        <div className="estado-item">
+        <div className={styles.estadoItem}>
           <CircularProgressbar
             value={estadoRecuento.mesasTotalizadasPorcentaje}
             text={formatPercent(estadoRecuento.mesasTotalizadasPorcentaje)}
@@ -68,39 +71,39 @@ export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosP
         </div>
       </div>
 
-      <div className="panel-partidos-container">
+      <div className={styles.panelPartidosContainer}>
         {resultados.map(partido => (
           <div
             key={partido.id}
-            className="partido-fila"
+            className={styles.partidoFila}
             style={{ borderLeftColor: partido.color || '#ccc' }}
           >
-            <div className="partido-logo" style={{ backgroundColor: partido.color || '#e9ecef' }}>
+            <div className={styles.partidoLogo} style={{ backgroundColor: partido.color || '#e9ecef' }}>
               <ImageWithFallback src={partido.logoUrl || undefined} fallbackSrc={`${assetBaseUrl}/default-avatar.png`} alt={partido.nombre} />
             </div>
-            <div className="partido-main-content">
-              <div className="partido-top-row">
-                <div className="partido-info-wrapper">
+            <div className={styles.partidoMainContent}>
+              <div className={styles.partidoTopRow}>
+                <div className={styles.partidoInfoWrapper}>
                   {partido.nombreCandidato ? (
                     <>
-                      <span className="candidato-nombre">{partido.nombreCandidato}</span>
-                      <span className="partido-nombre-normal">{partido.nombreCorto || partido.nombre}</span>
+                      <span className={styles.candidatoNombre}>{partido.nombreCandidato}</span>
+                      <span className={styles.partidoNombreNormal}>{partido.nombreCorto || partido.nombre}</span>
                     </>
                   ) : (
-                    <span className="partido-nombre">{partido.nombreCorto || partido.nombre}</span>
+                    <span className={styles.partidoNombre}>{partido.nombreCorto || partido.nombre}</span>
                   )}
                 </div>
-                <div className="partido-stats">
-                  <span className="partido-porcentaje">
+                <div className={styles.partidoStats}>
+                  <span className={styles.partidoPorcentaje}>
                     <AnimatedNumber value={partido.porcentaje} formatter={formatPercent} />
                   </span>
-                  <span className="partido-votos">
+                  <span className={styles.partidoVotos}>
                     <AnimatedNumber value={partido.votos} formatter={formatVotes} /> votos
                   </span>
                 </div>
               </div>
-              <div className="partido-barra-background">
-                <div className="partido-barra-foreground" style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }} />
+              <div className={styles.partidoBarraBackground}>
+                <div className={styles.partidoBarraForeground} style={{ width: `${partido.porcentaje}%`, backgroundColor: partido.color || '#888' }} />
               </div>
             </div>
           </div>
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultadosSkeleton.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultadosSkeleton.tsx
index 7534e0c..14212b3 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultadosSkeleton.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultadosSkeleton.tsx
@@ -1,21 +1,26 @@
 // src/features/legislativas/nacionales/components/PanelResultadosSkeleton.tsx
+
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../PanelNacional.module.css';
+
+// 2. Todas las props 'className' ahora usan el objeto 'styles'
 const SkeletonRow = () => (
-  <div className="partido-fila skeleton-fila">
-    <div className="skeleton-logo" />
-    <div className="partido-info-wrapper">
-      <div className="skeleton-text" style={{ width: '60%' }} />
-      <div className="skeleton-text" style={{ width: '40%', marginTop: '4px' }} />
-      <div className="skeleton-bar" />
+  <div className={`${styles.partidoFila} ${styles.skeletonFila}`}>
+    <div className={styles.skeletonLogo} />
+    <div className={styles.partidoInfoWrapper}>
+      <div className={styles.skeletonText} style={{ width: '60%' }} />
+      <div className={styles.skeletonText} style={{ width: '40%', marginTop: '4px' }} />
+      <div className={styles.skeletonBar} />
     </div>
-    <div className="partido-stats">
-      <div className="skeleton-text" style={{ width: '70%', marginBottom: '4px' }} />
-      <div className="skeleton-text" style={{ width: '50%' }} />
+    <div className={styles.partidoStats}>
+      <div className={styles.skeletonText} style={{ width: '70%', marginBottom: '4px' }} />
+      <div className={styles.skeletonText} style={{ width: '50%' }} />
     </div>
   </div>
 );
 
 export const PanelResultadosSkeleton = () => (
-  <div className="panel-resultados-skeleton">
+  <div className={styles.panelResultadosSkeleton}>
     {[...Array(5)].map((_, i) => <SkeletonRow key={i} />)}
   </div>
 );
\ No newline at end of file
diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/ProvinciaCard.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/ProvinciaCard.tsx
index 0394731..71b12ce 100644
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/ProvinciaCard.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/ProvinciaCard.tsx
@@ -3,6 +3,8 @@ import type { ResumenProvincia, CategoriaResumen } from '../../../../types/types
 import { MiniMapaSvg } from './MiniMapaSvg';
 import { ImageWithFallback } from '../../../../components/common/ImageWithFallback';
 import { assetBaseUrl } from '../../../../apiService';
+// 1. Importamos el archivo de estilos como un módulo CSS
+import styles from '../ResultadosNacionalesCardsWidget.module.css';
 
 interface CategoriaDisplayProps {
     categoria: CategoriaResumen;
@@ -17,48 +19,47 @@ interface ProvinciaCardProps {
 const formatNumber = (num: number) => num.toLocaleString('es-AR');
 const formatPercent = (num: number) => `${num.toFixed(2).replace('.', ',')}%`;
 
+// 2. Todas las props 'className' en este sub-componente ahora usan el objeto 'styles'
 const CategoriaDisplay = ({ categoria, mostrarBancas }: CategoriaDisplayProps) => {
     return (
-        <div className="categoria-bloque">
-            <h4 className="categoria-titulo">{categoria.categoriaNombre}</h4>
+        <div className={styles.categoriaBloque}>
+            <h4 className={styles.categoriaTitulo}>{categoria.categoriaNombre}</h4>
 
             {categoria.resultados.map(res => (
                 <div 
                     key={res.agrupacionId} 
-                    className="candidato-row"
+                    className={styles.candidatoRow}
                     style={{ borderLeftColor: res.color || '#ccc' }}
                 >
-                    {/* --- INICIO DE LA MODIFICACIÓN --- */}
-                    <div className="candidato-foto-wrapper" style={{ backgroundColor: res.color || '#e9ecef' }}>
+                    <div className={styles.candidatoFotoWrapper} style={{ backgroundColor: res.color || '#e9ecef' }}>
                         <ImageWithFallback
                             src={res.fotoUrl ?? undefined}
                             fallbackSrc={`${assetBaseUrl}/default-avatar.png`}
                             alt={res.nombreCandidato ?? res.nombreAgrupacion}
-                            className="candidato-foto"
+                            className={styles.candidatoFoto}
                         />
                     </div>
-                    {/* --- FIN DE LA MODIFICACIÓN --- */}
 
-                    <div className="candidato-data">
+                    <div className={styles.candidatoData}>
                         {res.nombreCandidato ? (
                             <>
-                                <span className="candidato-nombre">{res.nombreCandidato}</span>
-                                <span className="candidato-partido">{res.nombreCortoAgrupacion || res.nombreAgrupacion}</span>
+                                <span className={styles.candidatoNombre}>{res.nombreCandidato}</span>
+                                <span className={styles.candidatoPartido}>{res.nombreCortoAgrupacion || res.nombreAgrupacion}</span>
                             </>
                         ) : (
-                            <span className="candidato-nombre">{res.nombreCortoAgrupacion || res.nombreAgrupacion}</span>
+                            <span className={styles.candidatoNombre}>{res.nombreCortoAgrupacion || res.nombreAgrupacion}</span>
                         )}
-                        <div className="progress-bar-container">
-                            <div className="progress-bar" style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
+                        <div className={styles.progressBarContainer}>
+                            <div className={styles.progressBar} style={{ width: `${res.porcentaje}%`, backgroundColor: res.color || '#ccc' }} />
                         </div>
                     </div>
-                    <div className="candidato-stats">
-                        <span className="stats-percent">{formatPercent(res.porcentaje)}</span>
-                        <span className="stats-votos">{formatNumber(res.votos)} votos</span>
+                    <div className={styles.candidatoStats}>
+                        <span className={styles.statsPercent}>{formatPercent(res.porcentaje)}</span>
+                        <span className={styles.statsVotos}>{formatNumber(res.votos)} votos</span>
                     </div>
 
                     {mostrarBancas && (
-                        <div className="stats-bancas">
+                        <div className={styles.statsBancas}>
                             +{res.bancasObtenidas}
                             <span>Bancas</span>
                         </div>
@@ -66,7 +67,7 @@ const CategoriaDisplay = ({ categoria, mostrarBancas }: CategoriaDisplayProps) =
                 </div>
             ))}
 
-            <footer className="card-footer">
+            <footer className={styles.cardFooter}>
                 <div>
                     <span>Participación</span>
                     <strong>{formatPercent(categoria.estadoRecuento?.participacionPorcentaje ?? 0)}</strong>
@@ -87,17 +88,18 @@ const CategoriaDisplay = ({ categoria, mostrarBancas }: CategoriaDisplayProps) =
 export const ProvinciaCard = ({ data, mostrarBancas }: ProvinciaCardProps) => {
     const colorGanador = data.categorias[0]?.resultados[0]?.color || '#d1d1d1';
 
+    // 3. Y también las clases del componente principal
     return (
-        <div className="provincia-card">
-            <header className="card-header">
-                <div className="header-info">
+        <div className={styles.provinciaCard}>
+            <header className={styles.cardHeader}>
+                <div className={styles.headerInfo}>
                     <h3 style={{ whiteSpace: 'normal' }}>{data.provinciaNombre}</h3>
                 </div>
-                <div className="header-map">
+                <div className={styles.headerMap}>
                     <MiniMapaSvg provinciaNombre={data.provinciaNombre} fillColor={colorGanador} />
                 </div>
             </header>
-            <div className="card-body">
+            <div className={styles.cardBody}>
                 {data.categorias.map(categoria => (
                     <CategoriaDisplay
                         key={categoria.categoriaId}
diff --git a/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs b/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
index 1ea3826..6ef124d 100644
--- a/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
+++ b/Elecciones-Web/src/Elecciones.Api/obj/Debug/net9.0/Elecciones.Api.AssemblyInfo.cs
@@ -14,7 +14,7 @@ using System.Reflection;
 [assembly: System.Reflection.AssemblyCompanyAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyConfigurationAttribute("Debug")]
 [assembly: System.Reflection.AssemblyFileVersionAttribute("1.0.0.0")]
-[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+1719e79723abcbe8891a67b4d447a068c41d9e57")]
+[assembly: System.Reflection.AssemblyInformationalVersionAttribute("1.0.0+fa261ba828ec1118d196055b11685d63154ca40d")]
 [assembly: System.Reflection.AssemblyProductAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyTitleAttribute("Elecciones.Api")]
 [assembly: System.Reflection.AssemblyVersionAttribute("1.0.0.0")]