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.
This commit is contained in:
2025-10-04 20:41:23 -03:00
parent fa261ba828
commit ce4fc52d4a
21 changed files with 1476 additions and 1479 deletions

View File

@@ -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',