Fix Llamadas de Ambitos Para Resultados

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

@@ -7,7 +7,6 @@ import { MapaNacional } from './components/MapaNacional';
 import { PanelResultados } from './components/PanelResultados';
 import { Breadcrumbs } from './components/Breadcrumbs';
 import { MunicipioSearch } from './components/MunicipioSearch';
-// 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';
@@ -18,19 +17,9 @@ import { ImageWithFallback } from '../../../components/common/ImageWithFallback'
 import { assetBaseUrl } from '../../../apiService';
 import { useQueryClient } from '@tanstack/react-query';
 
-// --- COMPONENTE INTERNO PARA LA TARJETA DE RESULTADOS EN MÓVIL ---
-interface MobileResultsCardProps {
-  eleccionId: number;
-  ambitoId: string | null;
-  categoriaId: number;
-  ambitoNombre: string;
-  ambitoNivel: 'pais' | 'provincia' | 'municipio';
-}
-
+// --- SUB-COMPONENTE PARA UNA FILA DE RESULTADO ---
 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={styles.mobileResultRow} style={{ borderLeftColor: partido.color || '#ccc' }}>
     <div className={styles.mobileResultLogo} style={{ backgroundColor: partido.color || '#e9ecef' }}>
@@ -71,8 +60,8 @@ const MobileResultsCard = ({
   const [isExpanded, setIsExpanded] = useState(false);
 
   const { data } = useSuspenseQuery<PanelElectoralDto>({
-    queryKey: ['panelElectoral', eleccionId, ambitoId, categoriaId],
-    queryFn: () => getPanelElectoral(eleccionId, ambitoId, categoriaId),
+    queryKey: ['panelElectoral', eleccionId, ambitoId, categoriaId, ambitoNivel],
+    queryFn: () => getPanelElectoral(eleccionId, ambitoId, categoriaId, ambitoNivel),
     refetchInterval: 30000,
   });
 
@@ -86,7 +75,6 @@ const MobileResultsCard = ({
     return null;
   }
 
-  // 3. Clases condicionales también se construyen con el objeto 'styles'
   const cardClasses = [
     styles.mobileResultsCardContainer,
     isExpanded ? styles.expanded : '',
@@ -95,7 +83,6 @@ const MobileResultsCard = ({
 
   return (
     <div className={cardClasses}>
-      {/* Sección Colapsable con Resultados */}
       <div className={styles.collapsibleSection}>
         <div className={styles.mobileResultsHeader} onClick={() => setIsExpanded(!isExpanded)}>
           <div className={styles.headerInfo}>
@@ -114,8 +101,6 @@ const MobileResultsCard = ({
           )}
         </div>
       </div>
-
-      {/* Footer Fijo con Botones de Navegación */}
       <div className={styles.mobileCardViewToggle}>
         <button
           className={`${styles.toggleBtn} ${mobileView === 'mapa' ? styles.active : ''}`}
@@ -156,11 +141,11 @@ const CATEGORIAS_NACIONALES = [
 
 const PanelContenido = ({ eleccionId, ambitoActual, categoriaId }: { eleccionId: number, ambitoActual: AmbitoState, categoriaId: number }) => {
   const { data } = useSuspenseQuery<PanelElectoralDto>({
-    queryKey: ['panelElectoral', eleccionId, ambitoActual.id, categoriaId],
-    queryFn: () => getPanelElectoral(eleccionId, ambitoActual.id, categoriaId),
+    queryKey: ['panelElectoral', eleccionId, ambitoActual.id, categoriaId, ambitoActual.nivel],
+    queryFn: () => getPanelElectoral(eleccionId, ambitoActual.id, categoriaId, ambitoActual.nivel),
     refetchInterval: 30000,
   });
-  // Si la API devolvió la bandera 'sinDatos', mostramos un mensaje.
+
   if (data.sinDatos) {
     return (
       <div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
@@ -170,7 +155,7 @@ const PanelContenido = ({ eleccionId, ambitoActual, categoriaId }: { eleccionId:
       </div>
     );
   }
-  // Si no, renderizamos los resultados.
+
   return <PanelResultados resultados={data.resultadosPanel} estadoRecuento={data.estadoRecuento} />;
 };
 
@@ -185,7 +170,7 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
   const handleAmbitoSelect = (nuevoAmbitoId: string, nuevoNivel: 'provincia' | 'municipio', nuevoNombre: string) => {
     if (nuevoNivel === 'municipio') {
       toast.promise(
-        queryClient.invalidateQueries({ queryKey: ['panelElectoral', eleccionId, nuevoAmbitoId, categoriaId] }),
+        queryClient.invalidateQueries({ queryKey: ['panelElectoral', eleccionId, nuevoAmbitoId, categoriaId, nuevoNivel] }),
         {
           loading: `Cargando datos de ${nuevoNombre}...`,
           error: <b>No se pudieron cargar los datos.</b>,