Refinamiento de Funciones y Estética de Mapa

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

@@ -8,6 +8,8 @@ import { Breadcrumbs } from './components/Breadcrumbs';
 import './PanelNacional.css';
 import Select from 'react-select';
 import type { PanelElectoralDto } from '../../../types/types';
+import { FiMap, FiList } from 'react-icons/fi';
+import { useMediaQuery } from './hooks/useMediaQuery';
 
 interface PanelNacionalWidgetProps {
   eleccionId: number;
@@ -38,6 +40,9 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
   const [ambitoActual, setAmbitoActual] = useState<AmbitoState>({ id: null, nivel: 'pais', nombre: 'Argentina', provinciaDistritoId: null });
   const [categoriaId, setCategoriaId] = useState<number>(2);
   const [isPanelOpen, setIsPanelOpen] = useState(true);
+  const [mobileView, setMobileView] = useState<'mapa' | 'resultados'>('mapa');
+  // --- DETECCIÓN DE VISTA MÓVIL ---
+  const isMobile = useMediaQuery('(max-width: 800px)');
 
   const handleAmbitoSelect = (nuevoAmbitoId: string, nuevoNivel: 'provincia' | 'municipio', nuevoNombre: string) => {
     setAmbitoActual(prev => ({
@@ -76,12 +81,14 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
     <div className="panel-nacional-container">
       <header className="panel-header">
         <div className="header-top-row">
-          <h1>Resultados elecciones {ambitoActual.nombre}</h1>
+          <h1>Legislativas Argentina 2025</h1>
           <Select
             options={CATEGORIAS_NACIONALES}
             value={selectedCategoria}
             onChange={(option) => option && setCategoriaId(option.value)}
             className="categoria-selector"
+            classNamePrefix="categoria-selector"
+            isSearchable={false}
           />
         </div>
         <Breadcrumbs
@@ -92,7 +99,7 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
           onVolverProvincia={handleVolverAProvincia}
         />
       </header>
-      <main className={`panel-main-content ${!isPanelOpen ? 'panel-collapsed' : ''}`}>
+      <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 ? '›' : '‹'}
@@ -107,6 +114,7 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
               provinciaDistritoId={ambitoActual.provinciaDistritoId ?? null}
               onAmbitoSelect={handleAmbitoSelect}
               onVolver={ambitoActual.nivel === 'municipio' ? handleVolverAProvincia : handleResetToPais}
+              isMobileView={isMobile}
             />
           </Suspense>
         </div>
@@ -120,6 +128,24 @@ export const PanelNacionalWidget = ({ eleccionId }: PanelNacionalWidgetProps) =>
           </Suspense>
         </div>
       </main>
+
+      {/* --- NUEVO CONTROLADOR DE VISTA PARA MÓVIL --- */}
+      <div className="mobile-view-toggle">
+        <button
+          className={`toggle-btn ${mobileView === 'mapa' ? 'active' : ''}`}
+          onClick={() => setMobileView('mapa')}
+        >
+          <FiMap />
+          <span>Mapa</span>
+        </button>
+        <button
+          className={`toggle-btn ${mobileView === 'resultados' ? 'active' : ''}`}
+          onClick={() => setMobileView('resultados')}
+        >
+          <FiList />
+          <span>Resultados</span>
+        </button>
+      </div>
     </div>
   );
 };