refactor: Migra todos los widgets nacionales a CSS Modules para encapsular estilos

Esta refactorización modifica la forma en que los widgets manejan sus estilos para prevenir conflictos con los CSS de los sitios anfitriones donde se incrustan.

Se ha migrado el sistema de estilos de CSS global a CSS Modules para todos los componentes principales y sus hijos, asegurando que todas las clases sean únicas y estén aisladas.

Cambios principales:
- Se actualizan los componentes .tsx para importar y usar los módulos de estilos (`import styles from ...`).
- Se renombran los archivos `.css` a `.module.css`.
- Se añade una regla en cada módulo para proteger la `font-family` y el `box-sizing` del widget, evitando que sean sobreescritos por estilos externos.
- Se ajustan los selectores para librerías de terceros (react-select, react-simple-maps) usando `:global()` para mantener la compatibilidad.
- Se mueven las variables CSS de `:root` a las clases principales de cada widget para evitar colisiones en el scope global.

Como resultado, los widgets (`HomeCarouselWidget`, `PanelNacionalWidget`, `ResultadosNacionalesCardsWidget`, `CongresoNacionalWidget`) son ahora más robustos, portátiles y visualmente consistentes en cualquier entorno.

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>