[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/featured-news.tsx" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { CheckCircle, Clock } from "lucide-react" export function FeaturedNews() { return (

Verificado Hace 2 horas

Cierre de casillas concluye con 67% de participación Las autoridades electorales reportan una participación histórica en las elecciones generales.

Verificado Hace 4 horas

Resultados preliminares muestran tendencia clara El conteo rápido indica una ventaja significativa para el candidato del partido Azul.

Verificado Hace 6 horas

Observadores internacionales validan proceso Misiones de observación electoral califican positivamente la transparencia del proceso.

) } [V0_FILE]typescriptreact:file="components/election-trends.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Bar, BarChart, Line, LineChart, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from "recharts" const participationData = [ { hour: "8:00", participation: 10 }, { hour: "10:00", participation: 25 }, { hour: "12:00", participation: 40 }, { hour: "14:00", participation: 52 }, { hour: "16:00", participation: 65 }, { hour: "18:00", participation: 67 }, ] const genderData = [ { gender: "Mujeres", percentage: 53 }, { gender: "Hombres", percentage: 47 }, ] const ageData = [ { age: "18-24", percentage: 15 }, { age: "25-34", percentage: 22 }, { age: "35-44", percentage: 25 }, { age: "45-54", percentage: 20 }, { age: "55-64", percentage: 12 }, { age: "65+", percentage: 6 }, ] export function ElectionTrends() { return ( Participación Género Edad Participación Ciudadana Evolución de la participación ciudadana durante la jornada electoral

} />

Paridad de Género Distribución de votantes por género

} />

Distribución por Edad Porcentaje de votantes por grupo de edad

} />

) } [V0_FILE]typescriptreact:file="components/electoral-map.tsx" "use client" import { useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export function ElectoralMap() { const [selectedRegion, setSelectedRegion] = useState(null) return (

Mapa interactivo

Presidencial Congreso Gobiernos Locales

Resultados Nacionales

Partido Azul

42.5%

Partido Rojo

38.2%

Partido Amarillo

12.8%

Partido Verde

6.5%

Avance del Conteo

Actas procesadas 72%

Última actualización: 10:45 PM

Datos del Congreso en procesamiento

Datos de Gobiernos Locales en procesamiento

) } [V0_FILE]typescriptreact:file="components/participation-chart.tsx" "use client" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Bar, BarChart, CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis } from "recharts" const participationData = [ { region: "Norte", participation: 72 }, { region: "Sur", participation: 68 }, { region: "Este", participation: 65 }, { region: "Oeste", participation: 70 }, { region: "Centro", participation: 75 }, ] const genderParityData = [ { region: "Norte", women: 52, men: 48 }, { region: "Sur", women: 54, men: 46 }, { region: "Este", women: 51, men: 49 }, { region: "Oeste", women: 53, men: 47 }, { region: "Centro", women: 55, men: 45 }, ] export function ParticipationChart() { return (

Participación por Región

} />

Paridad de Género por Región

} />

) } [V0_FILE]typescriptreact:file="components/live-data-panel.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { AlertCircle, CheckCircle, Clock, TrendingUp } from "lucide-react" export function LiveDataPanel() { const [currentTime, setCurrentTime] = useState(new Date()) useEffect(() => { const timer = setInterval(() => { setCurrentTime(new Date()) }, 1000) return () => clearInterval(timer) }, []) return (

{currentTime.toLocaleTimeString()}

En vivo

Casillas Instaladas

98.7% (148,231 de 150,185)

Participación Actual

67.2% +2.4% vs 2020

Incidencias Reportadas

342 (0.23% de casillas)

Últimas Actualizaciones

18:45

Cierre de casillas en zona Este completado.

18:30

Primeros resultados preliminares disponibles.

18:15

Participación supera el 65% a nivel nacional.

) } [V0_FILE]typescriptreact:file="components/suggested-users.tsx" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { CheckCircle } from "lucide-react" export function SuggestedUsers() { return (

Analista Electoral

@analista

Instituto de Encuestas

@encuestas

Observatorio Democrático

@observatorio

) } [V0_FILE]typescriptreact:file="components/trending-topics.tsx" import { TrendingUp } from "lucide-react" import Link from "next/link" export function TrendingTopics() { return (

Tendencia en Política

#Elecciones2025

125.4K publicaciones

Tendencia en tu país

#ResultadosEnVivo

98.2K publicaciones

Tendencia en Política

#ParticipaciónHistórica

67.5K publicaciones

Tendencia en Política

#Democracia

45.8K publicaciones

) } [V0_FILE]typescriptreact:file="components/notification-dropdown.tsx" "use client" import { useState } from "react" import { Bell } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function NotificationDropdown() { const [unreadCount, setUnreadCount] = useState(3) const markAsRead = () => { setUnreadCount(0) } return ( Notificaciones {unreadCount > 0 && ( )} OE

Organismo Electoral ha publicado los resultados preliminares de las elecciones.

Hace 2 horas

{unreadCount > 0 &&

} OB

Observador Electoral ha publicado un nuevo informe de verificación.

Hace 5 horas

{unreadCount > 0 &&

} PE

Periodista Electoral ha compartido un análisis sobre la jornada electoral.

Hace 1 día

{unreadCount > 0 &&

} Ver todas las notificaciones ) } [V0_FILE]typescriptreact:file="app/visualizacion/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/verificacion/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { FactCheckModule } from "@/components/fact-check-module" import { CandidateComparison } from "@/components/candidate-comparison" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function VerificationPage() { return (

Elex

Verificación y Análisis

Accede a información verificada sobre el proceso electoral y compara las propuestas de los candidatos.

Presidenciales 2025 Fact-checking Propuestas

Fact-Checking Comparación

Verificación de Información Consulta noticias verificadas y alertas sobre desinformación relacionada con el proceso electoral.

Comparación de Propuestas Compara las propuestas de los candidatos en diferentes temas de interés.

Fuentes de Verificación

Observatorio Electoral

Verificador independiente

Fact Check Institute

Verificador oficial

Media Verificador

Prensa verificada

) } [V0_FILE]typescriptreact:file="app/verificacion/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/fact-check-module.tsx" isFixed="true" isQuickEdit="true" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle, AlertTriangle, XCircle, ThumbsUp, Share2 } from "lucide-react" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export function FactCheckModule() { return (

Verificado

Participación histórica

La participación electoral superó el 65% a nivel nacional.

OE Organismo Electoral • 2h

Parcialmente cierto

Resultados anticipados

El candidato del partido Azul se declaró ganador antes del conteo oficial.

FC Fact Check Institute • 4h

Falso

Irregularidades masivas

Se reportan miles de casos de fraude electoral en todo el país.

OE Observatorio Electoral • 5h

Últimas Verificaciones

El sistema de conteo rápido funcionó correctamente

Oficial

Contrario a los rumores en redes sociales, el sistema de conteo rápido operó sin interrupciones técnicas significativas.

OE Hace 3 horas

Sobre la participación en zonas rurales

Verificado

La participación en zonas rurales fue alta, pero no alcanzó el 90% como se afirmó en algunos medios. Los datos oficiales muestran un 78%.

FC Hace 5 horas

) } [V0_FILE]typescriptreact:file="components/candidate-comparison.tsx" "use client" import { useState } from "react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" const topics = ["Economía", "Educación", "Salud", "Seguridad", "Medio Ambiente", "Infraestructura"] const candidates = [ { name: "Candidato A", party: "Partido Azul", color: "bg-blue-500", avatar: "/placeholder.svg?height=40&width=40", proposals: { Economía: "Reducción de impuestos para pequeñas empresas. Inversión en sectores estratégicos. Creación de zonas económicas especiales.", Educación: "Aumento del presupuesto educativo al 6% del PIB. Modernización de infraestructura escolar. Becas para estudiantes de bajos recursos.", Salud: "Cobertura universal de salud. Construcción de nuevos hospitales. Reducción de precios de medicamentos.", Seguridad: "Fortalecimiento de cuerpos policiales. Estrategia integral contra el crimen organizado. Reformas al sistema penitenciario.", "Medio Ambiente": "Transición a energías renovables. Protección de áreas naturales. Incentivos fiscales para empresas sostenibles.", Infraestructura: "Plan nacional de carreteras. Modernización de puertos y aeropuertos. Expansión de la red ferroviaria.", }, }, { name: "Candidato B", party: "Partido Rojo", color: "bg-red-500", avatar: "/placeholder.svg?height=40&width=40", proposals: { Economía: "Aumento del salario mínimo. Regulación de sectores estratégicos. Programas de apoyo a la economía social.", Educación: "Educación gratuita en todos los niveles. Capacitación docente. Revisión del currículo educativo nacional.", Salud: "Sistema único de salud pública. Producción estatal de medicamentos esenciales. Prevención como eje central.", Seguridad: "Reforma integral de la policía. Atención a causas sociales del delito. Desmilitarización de la seguridad pública.", "Medio Ambiente": "Prohibición de prácticas extractivas dañinas. Impuestos a emisiones contaminantes. Reforestación masiva.", Infraestructura: "Priorización del transporte público. Desarrollo de infraestructura social. Vivienda accesible.", }, }, { name: "Candidato C", party: "Partido Verde", color: "bg-green-500", avatar: "/placeholder.svg?height=40&width=40", proposals: { Economía: "Economía verde y circular. Impuestos a industrias contaminantes. Incentivos para empresas sostenibles.", Educación: "Educación ambiental obligatoria. Escuelas sostenibles. Formación en nuevas tecnologías verdes.", Salud: "Enfoque preventivo y medicina natural. Atención a impactos ambientales en la salud. Alimentación saludable.", Seguridad: "Justicia restaurativa. Legalización controlada de algunas drogas. Policía comunitaria.", "Medio Ambiente": "Carbono neutral para 2030. Prohibición de plásticos de un solo uso. Protección de biodiversidad.", Infraestructura: "Ciudades sostenibles. Energía 100% renovable. Transporte público eléctrico.", }, }, ] export function CandidateComparison() { const [selectedTopic, setSelectedTopic] = useState(topics[0]) return (

Selecciona un tema

{candidates.map((candidate) => (

{candidate.name.charAt(0)}

{candidate.name}

{candidate.party}

{selectedTopic}

{candidate.proposals[selectedTopic]}

))}

Análisis Comparativo

Análisis Opinión Experta

En el tema de {selectedTopic}, los candidatos presentan enfoques significativamente diferentes:

El Candidato A propone un enfoque más orientado al mercado y crecimiento económico.
El Candidato B enfatiza un mayor rol del Estado y políticas sociales.
El Candidato C prioriza la sostenibilidad ambiental en todas sus propuestas.

Las diferencias principales radican en el rol que asignan al Estado, el enfoque económico y la prioridad dada a temas ambientales.

"Las propuestas en {selectedTopic} reflejan tres visiones distintas de país. El Candidato A representa un enfoque más tradicional de desarrollo, el Candidato B una visión más social, mientras que el Candidato C introduce la variable ambiental como eje transversal."

Dra. María González

Especialista en políticas públicas

) } [V0_FILE]typescriptreact:file="app/tendencias/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ElectionTrends } from "@/components/election-trends" import { FeaturedNews } from "@/components/featured-news" import { SuggestedUsers } from "@/components/suggested-users" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function TrendsPage() { return (

Elex

Tendencias Electorales

Descubre los temas más relevantes y las tendencias de participación en el proceso electoral actual.

Elecciones 2025 Tendencias Análisis

{/* Contenido principal */}

Tendencias de Participación Análisis de la participación ciudadana durante la jornada electoral

Noticias Destacadas

Temas Más Discutidos Los temas electorales con mayor interacción en las últimas 24 horas

Resultados preliminares 42.5K menciones

Participación histórica 38.2K menciones

Observación electoral 25.7K menciones

Propuestas económicas 18.3K menciones

Seguridad en casillas 12.6K menciones

Actualizado hace 15 minutos • Fuente: Análisis de redes sociales

{/* Sidebar derecho */}

Hashtags Tendencia Los más utilizados en las últimas 24 horas

Tendencia #1

#Elecciones2025

125.4K publicaciones

Tendencia #2

#ResultadosEnVivo

98.2K publicaciones

Tendencia #3

#ParticipaciónHistórica

67.5K publicaciones

Tendencia #4

#Democracia

45.8K publicaciones

Tendencia #5

#VotoInformado

32.1K publicaciones

Analistas Recomendados Expertos en análisis electoral Comparativa Regional Participación por región

Norte 72%

Sur 68%

Este 65%

Oeste 70%

Centro 75%

Actualizado hace 30 minutos • Fuente: Organismo Electoral

) } [V0_FILE]typescriptreact:file="app/tendencias/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tendencias/elecciones2025/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ElectionFeed } from "@/components/election-feed" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function EleccionesTrendPage() { return (

Elex

#Elecciones2025

125.4K publicaciones · Tendencia en Política

Elecciones 2025 Tendencia Política

{/* Contenido principal */}

Publicaciones destacadas sobre #Elecciones2025 Las publicaciones más relevantes sobre las elecciones generales de 2025

{/* Sidebar derecho */}

Sobre esta tendencia

Las elecciones generales de 2025 son uno de los temas más comentados en la plataforma. Los usuarios están compartiendo información sobre los candidatos, propuestas y el proceso electoral.

Organismo Electoral

Fuente oficial

Tendencias relacionadas

#ResultadosEnVivo

98.2K publicaciones

#ParticipaciónHistórica

67.5K publicaciones

#Democracia

45.8K publicaciones

) } [V0_FILE]typescriptreact:file="app/tendencias/elecciones2025/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tendencias/resultadosenvivo/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ElectoralMap } from "@/components/electoral-map" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function ResultadosEnVivoPage() { return (

Elex

#ResultadosEnVivo

98.2K publicaciones · Tendencia en tu país

Resultados En vivo Conteo

{/* Contenido principal */}

Resultados Preliminares por Región Visualización en tiempo real de los resultados electorales

{/* Sidebar derecho */}

Sobre esta tendencia

Los usuarios están siguiendo en tiempo real los resultados de las elecciones a medida que se procesan las actas. El conteo preliminar muestra una participación histórica.

Organismo Electoral

Fuente oficial

Tendencias relacionadas

#Elecciones2025

125.4K publicaciones

#ParticipaciónHistórica

67.5K publicaciones

#Democracia

45.8K publicaciones

) } [V0_FILE]typescriptreact:file="app/tendencias/resultadosenvivo/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tendencias/participacionhistorica/page.tsx" isFixed="true" isQuickEdit="true" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ParticipationChart } from "@/components/participation-chart" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function ParticipacionHistoricaPage() { return (

Elex

#ParticipaciónHistórica

67.5K publicaciones · Tendencia en Política

Participación Histórica Ciudadanía

{/* Contenido principal */}

Participación Ciudadana por Región Análisis de la participación histórica en las elecciones 2025

{/* Sidebar derecho */}

Sobre esta tendencia

La participación ciudadana en estas elecciones ha alcanzado niveles históricos, superando el 67% a nivel nacional. Los usuarios están compartiendo sus experiencias en las urnas.

Observador Electoral

Verificado

Tendencias relacionadas

#Elecciones2025

125.4K publicaciones

#ResultadosEnVivo

98.2K publicaciones

#Democracia

45.8K publicaciones

) } [V0_FILE]typescriptreact:file="app/tendencias/participacionhistorica/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/tendencias/democracia/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ElectionFeed } from "@/components/election-feed" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function DemocraciaPage() { return (

Elex

#Democracia

45.8K publicaciones · Tendencia en Política

Democracia Valores Participación

{/* Contenido principal */}

Publicaciones destacadas sobre #Democracia Opiniones y análisis sobre el proceso democrático

{/* Sidebar derecho */}

Sobre esta tendencia

Los usuarios están compartiendo reflexiones sobre la importancia de la democracia y el valor del voto como herramienta de participación ciudadana.

Periodista Electoral

Prensa

Tendencias relacionadas

#Elecciones2025

125.4K publicaciones

#ResultadosEnVivo

98.2K publicaciones

#ParticipaciónHistórica

67.5K publicaciones

) } [V0_FILE]typescriptreact:file="app/tendencias/democracia/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/elecciones/presidenciales/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ElectoralMap } from "@/components/electoral-map" import { ParticipationChart } from "@/components/participation-chart" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function PresidencialesPage() { return (

Elex

Elecciones Presidenciales 2025

Resultados en vivo y análisis de las elecciones presidenciales

Presidenciales En vivo Resultados oficiales

{/* Contenido principal */}

Resultados Preliminares Distribución de votos por candidato y partido político

Candidato A - Partido Azul

42.5%

Candidato B - Partido Rojo

38.2%

Candidato C - Partido Verde

12.8%

Candidato D - Partido Amarillo

6.5%

Actualizado hace 5 minutos • 72% actas procesadas

Distribución Geográfica Resultados por región y distrito electoral Participación Ciudadana Análisis de la participación electoral por región y demografía

{/* Sidebar derecho */}

Avance del Conteo

Actas procesadas 72%

Participación estimada 67%

Última actualización: 10:45 PM

Información Oficial

Organismo Electoral

Fuente oficial

Los resultados oficiales se están procesando de acuerdo con los protocolos establecidos. El conteo preliminar muestra una tendencia clara.

Tendencias Relacionadas

#Elecciones2025

125.4K publicaciones

#ResultadosEnVivo

98.2K publicaciones

#ParticipaciónHistórica

67.5K publicaciones

) } [V0_FILE]typescriptreact:file="app/elecciones/presidenciales/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/elecciones/congreso/page.tsx" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" export default function CongresoPage() { return (

Elex

Elecciones al Congreso 2025

Resultados de las elecciones legislativas y distribución de escaños

Congreso Resultados Escaños

{/* Contenido principal */}

Distribución de Escaños Composición del nuevo Congreso por partido político

Gráfico de distribución de escaños

Partido Azul

120 escaños (40%)

Partido Rojo

105 escaños (35%)

Partido Verde

45 escaños (15%)

Partido Amarillo

30 escaños (10%)

Actualizado hace 2 horas • 100% actas procesadas

Resultados por Distrito Desglose de resultados por distrito electoral

Distrito	Escaños	Partido Azul	Partido Rojo	Partido Verde	Partido Amarillo
Distrito Norte	75	32	25	10	8
Distrito Sur	65	25	28	8	4
Distrito Este	80	30	22	18	10
Distrito Oeste	80	33	30	9	8

{/* Sidebar derecho */}

Información Clave

Total de escaños 300

Mayoría simple 151 escaños

Mayoría calificada 200 escaños

Participación 65.8%

Última actualización: 12:30 PM

Comparación con 2021

Partido Azul

+15 escaños

Partido Rojo

-8 escaños

Partido Verde

+5 escaños

Partido Amarillo

-12 escaños

Tendencias Relacionadas

#Elecciones2025

125.4K publicaciones

#NuevoCongreso

56.7K publicaciones

#ResultadosEnVivo

98.2K publicaciones

) } [V0_FILE]typescriptreact:file="app/votar/page.tsx" isQuickEdit="true" "use client" import { useState } from "react" import Link from "next/link" import { Home, Search, TrendingUp, ArrowLeft, Check, Shield, AlertTriangle, FileText, UserCheck } from "lucide-react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { NotificationDropdown } from "@/components/notification-dropdown" import { Badge } from "@/components/ui/badge" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" import { Separator } from "@/components/ui/separator" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const opcionesVoto = [ { id: "a-favor", nombre: "A favor", descripcion: "Aprueba la ley en su totalidad", color: "bg-green-500", }, { id: "en-contra", nombre: "En contra", descripcion: "Rechaza la ley en su totalidad", color: "bg-red-500", }, { id: "abstencion", nombre: "Abstención", descripcion: "No se pronuncia a favor ni en contra", color: "bg-yellow-500", }, { id: "nulo", nombre: "Voto nulo", descripcion: "Voto inválido o con marcas incorrectas", color: "bg-gray-500", }, ] const mesas = [ { id: "mesa-1", nombre: "Mesa 1 - Distrito Norte" }, { id: "mesa-2", nombre: "Mesa 2 - Distrito Norte" }, { id: "mesa-3", nombre: "Mesa 3 - Distrito Sur" }, { id: "mesa-4", nombre: "Mesa 4 - Distrito Sur" }, { id: "mesa-5", nombre: "Mesa 5 - Distrito Este" }, { id: "mesa-6", nombre: "Mesa 6 - Distrito Este" }, { id: "mesa-7", nombre: "Mesa 7 - Distrito Oeste" }, { id: "mesa-8", nombre: "Mesa 8 - Distrito Oeste" }, ] export default function VotarPage() { const [paso, setPaso] = useState(1) const [votacionCompletada, setVotacionCompletada] = useState(false) const [verificado, setVerificado] = useState(false) const [opcionSeleccionada, setOpcionSeleccionada] = useState("") const [documentoIdentidad, setDocumentoIdentidad] = useState("") const [codigoVerificacion, setCodigoVerificacion] = useState("") const [mesaSeleccionada, setMesaSeleccionada] = useState("") const [cargando, setCargando] = useState(false) const [error, setError] = useState("") const [totalVotos, setTotalVotos] = useState(0) const verificarIdentidad = () => { if (!documentoIdentidad || documentoIdentidad.length < 8) { setError("Por favor, ingrese un documento de identidad válido") return } if (!mesaSeleccionada) { setError("Por favor, seleccione su mesa electoral") return } setCargando(true) setError("") // Simulación de verificación setTimeout(() => { setCargando(false) setVerificado(true) setPaso(2) }, 1500) } const verificarCodigo = () => { if (!codigoVerificacion || codigoVerificacion.length < 6) { setError("Por favor, ingrese el código de verificación completo") return } setCargando(true) setError("") // Simulación de verificación de código setTimeout(() => { setCargando(false) setPaso(3) }, 1500) } const confirmarVoto = () => { if (!opcionSeleccionada) { setError("Por favor, seleccione una opción de voto") return } setCargando(true) setError("") // Simulación de procesamiento del voto setTimeout(() => { setCargando(false) setVotacionCompletada(true) setTotalVotos((prevTotal) => prevTotal + 1) setPaso(4) }, 2000) } const registrarNuevoVoto = () => { setOpcionSeleccionada("") setPaso(3) } return (

Elex

Registro de Votos - Mesa Electoral

Sistema para miembros de mesa electoral para registrar los votos sobre la Ley de Reforma Electoral

Acceso Restringido Mesa Electoral Referéndum 2025

{/* Sidebar izquierdo - Pasos */}

Proceso de Registro

= 1 ? "bg-blue-50 dark:bg-blue-900/20" : ""}`} >

1 ? "bg-green-500" : "bg-blue-500"} text-white`} > {paso > 1 ? : 1}

Verificación de identidad

Valida tu credencial de mesa

= 2 ? "bg-blue-50 dark:bg-blue-900/20" : ""}`} >

2 ? "bg-green-500" : paso === 2 ? "bg-blue-500" : "bg-gray-300 dark:bg-gray-600"} text-white`} > {paso > 2 ? : 2}

Código de verificación

Ingresa el código recibido

= 3 ? "bg-blue-50 dark:bg-blue-900/20" : ""}`} >

3 ? "bg-green-500" : paso === 3 ? "bg-blue-500" : "bg-gray-300 dark:bg-gray-600"} text-white`} > {paso > 3 ? : 3}

Registro de voto

Selecciona el tipo de voto

= 4 ? "bg-blue-50 dark:bg-blue-900/20" : ""}`} >

{paso === 4 ? : 4}

Confirmación

Voto registrado

{paso === 4 && (

Total votos registrados: {totalVotos}

)}

{/* Contenido principal */}

{paso === 1 && "Verificación de Identidad del Miembro de Mesa"} {paso === 2 && "Código de Verificación"} {paso === 3 && "Registro de Voto sobre la Ley de Reforma Electoral"} {paso === 4 && "Voto Registrado Exitosamente"} {paso === 1 && "Ingresa tu documento de identidad y selecciona tu mesa electoral para verificar tu acceso"} {paso === 2 && "Ingresa el código de verificación que hemos enviado a tu dispositivo móvil registrado"} {paso === 3 && "Selecciona el tipo de voto emitido por el ciudadano para la Ley de Reforma Electoral"} {paso === 4 && "El voto ha sido registrado exitosamente en el sistema"} {error && ( Error {error} )} {/* Paso 1: Verificación de identidad */} {paso === 1 && (

Acceso exclusivo para miembros de mesa

Solo personal autorizado puede registrar los votos del referéndum

Documento de identidad setDocumentoIdentidad(e.target.value)} className="mt-1" />

Ingresa tu documento sin puntos ni guiones

Mesa electoral asignada

Selecciona la mesa electoral donde estás asignado/a

)} {/* Paso 2: Código de verificación */} {paso === 2 && (

Identidad verificada

Hemos enviado un código de verificación al número terminado en ***-123

Código de verificación setCodigoVerificacion(e.target.value)} maxLength={6} className="mt-1" />

El código expira en 10 minutos

)} {/* Paso 3: Registro de voto */} {paso === 3 && (

Ley de Reforma Electoral

Referéndum sobre la aprobación de la nueva Ley de Reforma Electoral que modifica el sistema de votación y representación

Selecciona el tipo de voto emitido:

{opcionesVoto.map((opcion) => (

{opcion.nombre.charAt(0)}

{opcion.nombre}

{opcion.descripcion}

{opcionSeleccionada === opcion.id && }

))}

)} {/* Paso 4: Confirmación */} {paso === 4 && (

¡Voto registrado exitosamente!

El voto ha sido registrado de forma segura en el sistema. Puedes continuar registrando más votos o finalizar la sesión.

Comprobante de registro

ID de registro: REG-{Math.random().toString(36).substring(2, 10).toUpperCase()}

Mesa electoral: {mesas.find((m) => m.id === mesaSeleccionada)?.nombre || "Mesa Electoral"}

Fecha y hora: {new Date().toLocaleString()}

Estado: Verificado

Este comprobante confirma que has registrado un voto en el sistema. El contenido del voto se mantiene anónimo.

)} {paso < 4 && ( <> {paso > 1 && ( )} {paso === 1 && ( )} {paso === 2 && ( )} {paso === 3 && ( )} )} {paso === 4 && ( <> )} {paso < 4 && ( Información sobre el Referéndum

Ley de Reforma Electoral

La ley propone cambios en el sistema de votación, incluyendo la implementación de voto electrónico, representación proporcional y nuevos mecanismos de transparencia electoral.

Responsabilidad del miembro de mesa

Como miembro de mesa, es tu responsabilidad registrar fielmente los votos emitidos por los ciudadanos, manteniendo la integridad del proceso electoral.

Seguridad del sistema

El sistema registra cada acción realizada por los miembros de mesa para garantizar la transparencia y trazabilidad del proceso de votación.

)}

) } [V0_FILE]typescriptreact:file="app/votar/loading.tsx" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isQuickEdit="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }

[V0_FILE]typescriptreact:file="tailwind.config.js"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "#4F86F7", // Azul cielo amigable
          foreground: "#FFFFFF",
          light: "#6E9CF9",
          dark: "#3A6AD8",
        },
        secondary: {
          DEFAULT: "#FF9966", // Coral suave
          foreground: "#FFFFFF",
          light: "#FFAD85",
          dark: "#E87F4F",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        // Paleta amigable
        sky: {
          50: "#F0F7FF",
          100: "#E0EFFF",
          200: "#C2DFFF",
          300: "#A3CFFF",
          400: "#85BFFF",
          500: "#4F86F7", // Color base
          600: "#3A6AD8",
          700: "#2A4FB9",
          800: "#1A349A",
          900: "#0A1A7B",
        },
        coral: {
          50: "#FFF3EE",
          100: "#FFE7DD",
          200: "#FFCFBB",
          300: "#FFB799",
          400: "#FF9F77",
          500: "#FF9966", // Color base
          600: "#E87F4F",
          700: "#D16538",
          800: "#BA4B21",
          900: "#A3310A",
        },
        mint: {
          50: "#EDFCF6",
          100: "#DBF9ED",
          200: "#B7F3DB",
          300: "#93EDC9",
          400: "#6FE7B7",
          500: "#4BE1A5", // Color base
          600: "#32C78D",
          700: "#1AAD75",
          800: "#02935D",
          900: "#007A45",
        },
        lavender: {
          50: "#F5F0FF",
          100: "#EBE0FF",
          200: "#D7C2FF",
          300: "#C3A3FF",
          400: "#AF85FF",
          500: "#9B66FF", // Color base
          600: "#8247E5",
          700: "#6928CC",
          800: "#5009B2",
          900: "#370099",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="components/election-feed.tsx"
"use client"

import { useState } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { CheckCircle, MessageCircle, MoreHorizontal, Share2, ThumbsUp, X } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Input } from "@/components/ui/input"

// Datos de ejemplo para comentarios
const commentsData = {
  post1: [
    {
      id: "comment1",
      author: "Usuario Electoral",
      avatar: "/placeholder.svg?height=32&width=32",
      content: "¡Gran noticia! La participación ciudadana es fundamental para fortalecer nuestra democracia.",
      time: "1h",
      likes: 24,
    },
    {
      id: "comment2",
      author: "Analista Político",
      avatar: "/placeholder.svg?height=32&width=32",
      content: "Estos números superan las expectativas. Muy positivo ver este nivel de compromiso cívico.",
      time: "45m",
      likes: 18,
    },
  ],
  post2: [
    {
      id: "comment3",
      author: "Experto Electoral",
      avatar: "/placeholder.svg?height=32&width=32",
      content:
        "Los resultados preliminares son consistentes con las encuestas a boca de urna. Veremos si se mantiene esta tendencia.",
      time: "2h",
      likes: 32,
    },
  ],
  post3: [
    {
      id: "comment4",
      author: "Ciudadano Informado",
      avatar: "/placeholder.svg?height=32&width=32",
      content: "Es importante contar con observadores internacionales para garantizar la transparencia del proceso.",
      time: "30m",
      likes: 15,
    },
    {
      id: "comment5",
      author: "Periodista Independiente",
      avatar: "/placeholder.svg?height=32&width=32",
      content:
        "He estado en varios centros de votación y puedo confirmar que el proceso ha sido ordenado y transparente.",
      time: "1h",
      likes: 27,
    },
  ],
}

export function ElectionFeed() {
  const [likedPosts, setLikedPosts] = useState<Record<string, boolean>>({})
  const [likedComments, setLikedComments] = useState<Record<string, boolean>>({})
  const [showComments, setShowComments] = useState<Record<string, boolean>>({})
  const [newComments, setNewComments] = useState<Record<string, string>>({
    post1: "",
    post2: "",
    post3: "",
  })
  const { toast } = useToast()

const toggleLike = (postId: string) => {
    setLikedPosts((prev) => ({
      ...prev,
      [postId]: !prev[postId],
    }))
  }

const toggleCommentLike = (commentId: string) => {
    setLikedComments((prev) => ({
      ...prev,
      [commentId]: !prev[commentId],
    }))
  }

const toggleComments = (postId: string) => {
    setShowComments((prev) => ({
      ...prev,
      [postId]: !prev[postId],
    }))
  }

const handleShare = (postId: string) => {
    // Simular copiar al portapapeles
    navigator.clipboard
      .writeText(`https://elex.example.com/post/${postId}`)
      .then(() => {
        toast({
          description: "Enlace copiado al portapapeles",
          duration: 3000,
          className: "bottom-0 left-0 right-auto fixed mb-4 ml-4",
        })
      })
      .catch((err) => {
        console.error("Error al copiar: ", err)
      })
  }

const handleCommentChange = (postId: string, value: string) => {
    setNewComments((prev) => ({
      ...prev,
      [postId]: value,
    }))
  }

const submitComment = (postId: string) => {
    if (newComments[postId].trim() === "") return

// En una aplicación real, aquí enviaríamos el comentario al servidor
    // Por ahora solo limpiamos el campo
    setNewComments((prev) => ({
      ...prev,
      [postId]: "",
    }))

// Mostrar toast de confirmación
    toast({
      description: "Comentario publicado",
      duration: 3000,
      className: "bottom-0 left-0 right-auto fixed mb-4 ml-4",
    })
  }

return (
    <div className="space-y-4">
      {/* Post 1 - Organismo Electoral */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
        <div className="p-4">
          <div className="flex items-start gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Organismo Electoral" />
              <AvatarFallback>OE</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="font-semibold">Organismo Electoral</span>
                <Badge
                  variant="outline"
                  className="bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-200 dark:border-sky-800"
                >
                  <CheckCircle className="mr-1 h-3 w-3" /> Oficial
                </Badge>
                <span className="text-sm text-gray-500 dark:text-gray-400">@orgelectoral</span>
                <span className="text-sm text-gray-500 dark:text-gray-400">· 2h</span>
              </div>
              <p className="mt-2">
                ¡Cierre de casillas concluye con 67% de participación! Las autoridades electorales reportan una
                participación histórica en las elecciones generales. #Elecciones2025 #Democracia
              </p>
            </div>
            <Button variant="ghost" size="icon" className="rounded-full">
              <MoreHorizontal className="h-5 w-5" />
              <span className="sr-only">Más opciones</span>
            </Button>
          </div>
        </div>

<div className="p-4 pt-3 border-t border-gray-100 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <Button
              variant="ghost"
              size="sm"
              className={`rounded-full gap-2 ${likedPosts["post1"] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
              onClick={() => toggleLike("post1")}
            >
              <ThumbsUp className="h-5 w-5" />
              <span>{likedPosts["post1"] ? "1,253" : "1,252"}</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`rounded-full gap-2 ${showComments["post1"] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
              onClick={() => toggleComments("post1")}
            >
              <MessageCircle className="h-5 w-5" />
              <span>348</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="rounded-full gap-2 text-gray-500 dark:text-gray-400 hover:text-secondary"
              onClick={() => handleShare("post1")}
            >
              <Share2 className="h-5 w-5" />
              <span>Compartir</span>
            </Button>
          </div>
        </div>

{/* Sección de comentarios */}
        {showComments["post1"] && (
          <div className="p-4 pt-0">
            <div className="border-t border-gray-100 dark:border-gray-700 pt-4">
              <div className="flex items-center justify-between mb-4">
                <h4 className="font-medium text-sm">Comentarios</h4>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 rounded-full"
                  onClick={() => toggleComments("post1")}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>

<div className="space-y-4 mb-4">
                {commentsData["post1"].map((comment) => (
                  <div key={comment.id} className="flex gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={comment.avatar} alt={comment.author} />
                      <AvatarFallback>{comment.author.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="bg-sky-50 dark:bg-sky-900/20 p-3 rounded-lg">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{comment.author}</span>
                          <span className="text-xs text-gray-500 dark:text-gray-400">· {comment.time}</span>
                        </div>
                        <p className="text-sm">{comment.content}</p>
                      </div>
                      <div className="flex items-center gap-4 mt-1 ml-1">
                        <button
                          className={`text-xs flex items-center gap-1 ${likedComments[comment.id] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
                          onClick={() => toggleCommentLike(comment.id)}
                        >
                          <ThumbsUp className="h-3 w-3" />
                          <span>{likedComments[comment.id] ? comment.likes + 1 : comment.likes}</span>
                        </button>
                        <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-primary">
                          Responder
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

<div className="flex gap-3">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Tu perfil" />
                  <AvatarFallback>TU</AvatarFallback>
                </Avatar>
                <div className="flex-1 flex gap-2">
                  <Input
                    placeholder="Escribe un comentario..."
                    value={newComments["post1"]}
                    onChange={(e) => handleCommentChange("post1", e.target.value)}
                    className="flex-1 focus-visible:ring-primary"
                  />
                  <Button
                    size="sm"
                    onClick={() => submitComment("post1")}
                    disabled={!newComments["post1"].trim()}
                    className="bg-primary hover:bg-primary-light"
                  >
                    Comentar
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

{/* Post 2 - Observador Electoral */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
        <div className="p-4">
          <div className="flex items-start gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Observador Electoral" />
              <AvatarFallback>OB</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="font-semibold">Observador Electoral</span>
                <Badge
                  variant="outline"
                  className="bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-200 dark:border-sky-800"
                >
                  <CheckCircle className="mr-1 h-3 w-3" /> Oficial
                </Badge>
                <span className="text-sm text-gray-500 dark:text-gray-400">@observador</span>
                <span className="text-sm text-gray-500 dark:text-gray-400">· 4h</span>
              </div>
              <p className="mt-2">
                Resultados preliminares muestran tendencia clara. El conteo rápido indica una ventaja significativa para
                el candidato del partido Azul. Seguimos monitoreando el proceso. #Elecciones2025 #ResultadosPreliminares
              </p>
            </div>
            <Button variant="ghost" size="icon" className="rounded-full">
              <MoreHorizontal className="h-5 w-5" />
              <span className="sr-only">Más opciones</span>
            </Button>
          </div>
        </div>

<div className="px-4 py-3 bg-sky-50 dark:bg-sky-900/20 border-t border-b border-gray-100 dark:border-gray-700">
          <div className="space-y-3">
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="font-medium">Partido Azul</span>
                <span className="font-semibold">42.5%</span>
              </div>
              <div className="h-2 w-full rounded-full bg-gray-100 dark:bg-gray-700">
                <div className="h-2 rounded-full bg-primary" style={{ width: "42.5%" }}></div>
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="font-medium">Partido Rojo</span>
                <span className="font-semibold">38.2%</span>
              </div>
              <div className="h-2 w-full rounded-full bg-gray-100 dark:bg-gray-700">
                <div className="h-2 rounded-full bg-red-500" style={{ width: "38.2%" }}></div>
              </div>
            </div>
            <div>
              <div className="flex justify-between text-sm mb-1">
                <span className="font-medium">Partido Verde</span>
                <span className="font-semibold">12.8%</span>
              </div>
              <div className="h-2 w-full rounded-full bg-gray-100 dark:bg-gray-700">
                <div className="h-2 rounded-full bg-secondary" style={{ width: "12.8%" }}></div>
              </div>
            </div>
          </div>
        </div>

<div className="p-4 pt-3 border-t border-gray-100 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <Button
              variant="ghost"
              size="sm"
              className={`rounded-full gap-2 ${likedPosts["post2"] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
              onClick={() => toggleLike("post2")}
            >
              <ThumbsUp className="h-5 w-5" />
              <span>{likedPosts["post2"] ? "876" : "875"}</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`rounded-full gap-2 ${showComments["post2"] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
              onClick={() => toggleComments("post2")}
            >
              <MessageCircle className="h-5 w-5" />
              <span>215</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="rounded-full gap-2 text-gray-500 dark:text-gray-400 hover:text-secondary"
              onClick={() => handleShare("post2")}
            >
              <Share2 className="h-5 w-5" />
              <span>Compartir</span>
            </Button>
          </div>
        </div>

{/* Sección de comentarios */}
        {showComments["post2"] && (
          <div className="p-4 pt-0">
            <div className="border-t border-gray-100 dark:border-gray-700 pt-4">
              <div className="flex items-center justify-between mb-4">
                <h4 className="font-medium text-sm">Comentarios</h4>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 rounded-full"
                  onClick={() => toggleComments("post2")}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>

<div className="space-y-4 mb-4">
                {commentsData["post2"].map((comment) => (
                  <div key={comment.id} className="flex gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={comment.avatar} alt={comment.author} />
                      <AvatarFallback>{comment.author.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="bg-sky-50 dark:bg-sky-900/20 p-3 rounded-lg">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{comment.author}</span>
                          <span className="text-xs text-gray-500 dark:text-gray-400">· {comment.time}</span>
                        </div>
                        <p className="text-sm">{comment.content}</p>
                      </div>
                      <div className="flex items-center gap-4 mt-1 ml-1">
                        <button
                          className={`text-xs flex items-center gap-1 ${likedComments[comment.id] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
                          onClick={() => toggleCommentLike(comment.id)}
                        >
                          <ThumbsUp className="h-3 w-3" />
                          <span>{likedComments[comment.id] ? comment.likes + 1 : comment.likes}</span>
                        </button>
                        <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-primary">
                          Responder
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

<div className="flex gap-3">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Tu perfil" />
                  <AvatarFallback>TU</AvatarFallback>
                </Avatar>
                <div className="flex-1 flex gap-2">
                  <Input
                    placeholder="Escribe un comentario..."
                    value={newComments["post2"]}
                    onChange={(e) => handleCommentChange("post2", e.target.value)}
                    className="flex-1 focus-visible:ring-primary"
                  />
                  <Button
                    size="sm"
                    onClick={() => submitComment("post2")}
                    disabled={!newComments["post2"].trim()}
                    className="bg-primary hover:bg-primary-light"
                  >
                    Comentar
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

{/* Post 3 - Periodista Electoral */}
      <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm overflow-hidden">
        <div className="p-4">
          <div className="flex items-start gap-3">
            <Avatar className="h-10 w-10">
              <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Periodista Electoral" />
              <AvatarFallback>PE</AvatarFallback>
            </Avatar>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2">
                <span className="font-semibold">Periodista Electoral</span>
                <Badge
                  variant="outline"
                  className="bg-coral-50 text-coral-700 border-coral-200 dark:bg-coral-900/30 dark:text-coral-200 dark:border-coral-800"
                >
                  <CheckCircle className="mr-1 h-3 w-3" /> Prensa
                </Badge>
                <span className="text-sm text-gray-500 dark:text-gray-400">@periodista</span>
                <span className="text-sm text-gray-500 dark:text-gray-400">· 6h</span>
              </div>
              <p className="mt-2">
                Observadores internacionales validan proceso electoral. Las misiones de observación electoral califican
                positivamente la transparencia del proceso. Destacan la alta participación y el compromiso cívico.
                #Elecciones2025 #ObservaciónElectoral
              </p>
            </div>
            <Button variant="ghost" size="icon" className="rounded-full">
              <MoreHorizontal className="h-5 w-5" />
              <span className="sr-only">Más opciones</span>
            </Button>
          </div>
        </div>

<div className="p-4 pt-3 border-t border-gray-100 dark:border-gray-700">
          <div className="flex items-center justify-between">
            <Button
              variant="ghost"
              size="sm"
              className={`rounded-full gap-2 ${likedPosts["post3"] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
              onClick={() => toggleLike("post3")}
            >
              <ThumbsUp className="h-5 w-5" />
              <span>{likedPosts["post3"] ? "731" : "730"}</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className={`rounded-full gap-2 ${showComments["post3"] ? "text-primary dark:text-primary-light" : "text-gray-500 dark:text-gray-400"}`}
              onClick={() => toggleComments("post3")}
            >
              <MessageCircle className="h-5 w-5" />
              <span>189</span>
            </Button>
            <Button
              variant="ghost"
              size="sm"
              className="rounded-full gap-2 text-gray-500 dark:text-gray-400 hover:text-secondary"
              onClick={() => handleShare("post3")}
            >
              <Share2 className="h-5 w-5" />
              <span>Compartir</span>
            </Button>
          </div>
        </div>

{/* Sección de comentarios */}
        {showComments["post3"] && (
          <div className="p-4 pt-0">
            <div className="border-t border-gray-100 dark:border-gray-700 pt-4">
              <div className="flex items-center justify-between mb-4">
                <h4 className="font-medium text-sm">Comentarios</h4>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-8 w-8 rounded-full"
                  onClick={() => toggleComments("post3")}
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>

<div className="space-y-4 mb-4">
                {commentsData["post3"].map((comment) => (
                  <div key={comment.id} className="flex gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src={comment.avatar} alt={comment.author} />
                      <AvatarFallback>{comment.author.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div className="flex-1">
                      <div className="bg-coral-50 dark:bg-coral-900/20 p-3 rounded-lg">
                        <div className="flex items-center gap-2 mb-1">
                          <span className="font-medium text-sm">{comment.author}</span>
                          <span className="text-xs text-gray-500 dark:text-gray-400">· {comment.time}</span>
                        </div>
                        <p className="text-sm">{comment.content}</p>
                      </div>
                      <div className="flex items-center gap-4 mt-1 ml-1">
                        <button
                          className={`text-xs flex items-center gap-1 ${likedComments[comment.id] ? "text-secondary dark:text-secondary-light" : "text-gray-500 dark:text-gray-400"}`}
                          onClick={() => toggleCommentLike(comment.id)}
                        >
                          <ThumbsUp className="h-3 w-3" />
                          <span>{likedComments[comment.id] ? comment.likes + 1 : comment.likes}</span>
                        </button>
                        <button className="text-xs text-gray-500 dark:text-gray-400 hover:text-secondary">
                          Responder
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

<div className="flex gap-3">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Tu perfil" />
                  <AvatarFallback>TU</AvatarFallback>
                </Avatar>
                <div className="flex-1 flex gap-2">
                  <Input
                    placeholder="Escribe un comentario..."
                    value={newComments["post3"]}
                    onChange={(e) => handleCommentChange("post3", e.target.value)}
                    className="flex-1 focus-visible:ring-secondary"
                  />
                  <Button
                    size="sm"
                    onClick={() => submitComment("post3")}
                    disabled={!newComments["post3"].trim()}
                    className="bg-secondary hover:bg-secondary-light"
                  >
                    Comentar
                  </Button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>

<Button
        variant="outline"
        className="w-full rounded-xl py-6 border-primary text-primary hover:bg-sky-50 dark:hover:bg-sky-900/20"
      >
        Cargar más publicaciones
      </Button>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/visualizacion/page.tsx"
import Link from "next/link"
import { Home, Search, TrendingUp } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ElectoralMap } from "@/components/electoral-map"
import { ParticipationChart } from "@/components/participation-chart"
import { LiveDataPanel } from "@/components/live-data-panel"
import { NotificationDropdown } from "@/components/notification-dropdown"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"

export default function VisualizationPage() {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b shadow-sm">
        <div className="container max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center">
              <Link href="/" className="flex items-center gap-2">
                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-white">
                  <span className="text-lg font-bold">E</span>
                </div>
                <span className="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  Elex
                </span>
              </Link>
            </div>

<nav className="flex items-center gap-1 sm:gap-2">
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link href="/">
                  <Home className="h-5 w-5" />
                  <span className="sr-only">Inicio</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link href="/tendencias">
                  <TrendingUp className="h-5 w-5" />
                  <span className="sr-only">Tendencias</span>
                </Link>
              </Button>
              <Button
                variant="ghost"
                size="icon"
                className="rounded-full bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-200"
                asChild
              >
                <Link href="/visualizacion">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                    <line x1="8" y1="21" x2="16" y2="21"></line>
                    <line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
                  <span className="sr-only">Visualización</span>
                </Link>
              </Button>

<main className="container max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="flex flex-col space-y-6">
          <div className="flex flex-col space-y-2">
            <h1 className="text-2xl md:text-3xl font-bold">Visualización en Tiempo Real</h1>
            <p className="text-gray-600 dark:text-gray-300">
              Monitorea los resultados preliminares, la participación ciudadana y otros datos relevantes del proceso
              electoral.
            </p>

<div className="flex flex-wrap gap-2 mt-2">
              <Badge
                variant="outline"
                className="bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-200"
              >
                Presidenciales 2025
              </Badge>
              <Badge
                variant="outline"
                className="bg-mint-50 text-mint-700 border-mint-200 dark:bg-mint-900/30 dark:text-mint-200"
              >
                Actualizado hace 5 min
              </Badge>
              <Badge
                variant="outline"
                className="bg-lavender-50 text-lavender-700 border-lavender-200 dark:bg-lavender-900/30 dark:text-lavender-200"
              >
                72% actas procesadas
              </Badge>
            </div>
          </div>

<div className="grid gap-6 lg:grid-cols-3">
            <div className="lg:col-span-2">
              <Tabs defaultValue="map" className="w-full">
                <TabsList className="grid w-full max-w-md grid-cols-2 mb-6">
                  <TabsTrigger value="map">Mapa Electoral</TabsTrigger>
                  <TabsTrigger value="charts">Gráficas</TabsTrigger>
                </TabsList>
                <TabsContent value="map">
                  <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4">
                    <h2 className="text-xl font-semibold mb-4">Resultados Preliminares por Región</h2>
                    <ElectoralMap />
                  </div>
                </TabsContent>
                <TabsContent value="charts">
                  <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-8">
                    <h2 className="text-xl font-semibold mb-8">Participación Ciudadana</h2>
                    <div className="h-[800px] w-full">
                      <ParticipationChart />
                    </div>
                  </div>
                </TabsContent>
              </Tabs>
            </div>
            <div>
              <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 h-full">
                <h2 className="text-xl font-semibold mb-4">Datos en Vivo</h2>
                <LiveDataPanel />
              </div>
            </div>
          </div>

<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-semibold">Fuentes Oficiales</h2>
              <Button variant="outline" size="sm" className="rounded-lg">
                Ver todas
              </Button>
            </div>
            <div className="grid gap-4 md:grid-cols-3">
              <div className="flex items-center gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Organismo Electoral" />
                  <AvatarFallback>OE</AvatarFallback>
                </Avatar>
                <div>
                  <div className="flex items-center gap-1">
                    <span className="font-medium">Organismo Electoral</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                      <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                  </div>
                  <span className="text-xs text-gray-500 dark:text-gray-400">Oficial</span>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Observador Electoral" />
                  <AvatarFallback>OB</AvatarFallback>
                </Avatar>
                <div>
                  <div className="flex items-center gap-1">
                    <span className="font-medium">Observador Electoral</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-primary"
                    >
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                      <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                  </div>
                  <span className="text-xs text-gray-500 dark:text-gray-400">Oficial</span>
                </div>
              </div>
              <div className="flex items-center gap-3">
                <Avatar className="h-10 w-10">
                  <AvatarImage src="/placeholder.svg?height=40&width=40" alt="Instituto de Estadísticas" />
                  <AvatarFallback>IE</AvatarFallback>
                </Avatar>
                <div>
                  <div className="flex items-center gap-1">
                    <span className="font-medium">Instituto de Estadísticas</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="14"
                      height="14"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-secondary"
                    >
                      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                      <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                  </div>
                  <span className="text-xs text-gray-500 dark:text-gray-400">Prensa</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

<footer className="bg-white dark:bg-gray-800 border-t mt-10">
        <div className="container max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between">
            <div className="flex items-center gap-2 mb-4 md:mb-0">
              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-white">
                <span className="text-sm font-bold">E</span>
              </div>
              <span className="text-lg font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                Elex
              </span>
            </div>
            <div className="flex flex-wrap gap-4 text-sm text-gray-500 dark:text-gray-400">
              <Link href="#" className="hover:text-primary dark:hover:text-primary-light">
                Acerca de
              </Link>
              <Link href="#" className="hover:text-primary dark:hover:text-primary-light">
                Términos
              </Link>
              <Link href="#" className="hover:text-primary dark:hover:text-primary-light">
                Privacidad
              </Link>
              <Link href="#" className="hover:text-primary dark:hover:text-primary-light">
                Cookies
              </Link>
              <Link href="#" className="hover:text-primary dark:hover:text-primary-light">
                Contacto
              </Link>
              <span>© 2025 Elex</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true"
import Link from "next/link"
import { Home, Search, TrendingUp } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ElectionFeed } from "@/components/election-feed"
import { NotificationDropdown } from "@/components/notification-dropdown"
import { Badge } from "@/components/ui/badge"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <header className="sticky top-0 z-10 bg-white dark:bg-gray-800 border-b shadow-sm">
        <div className="container max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex h-16 items-center justify-between">
            <div className="flex items-center">
              <Link href="/" className="flex items-center gap-2">
                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-white">
                  <span className="text-lg font-bold">E</span>
                </div>
                <span className="text-xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
                  Elex
                </span>
              </Link>
            </div>

<nav className="flex items-center gap-1 sm:gap-2">
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link href="/">
                  <Home className="h-5 w-5" />
                  <span className="sr-only">Inicio</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link href="/tendencias">
                  <TrendingUp className="h-5 w-5" />
                  <span className="sr-only">Tendencias</span>
                </Link>
              </Button>
              <Button variant="ghost" size="icon" className="rounded-full" asChild>
                <Link href="/visualizacion">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                    <line x1="8" y1="21" x2="16" y2="21"></line>
                    <line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
                  <span className="sr-only">Visualización</span>
                </Link>
              </Button>

<main className="container max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* Sidebar izquierdo - Navegación */}
          <div className="hidden lg:block lg:col-span-3">
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 sticky top-20">
              <nav className="space-y-1">
                <Link
                  href="/"
                  className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-sky-50 text-primary dark:bg-sky-900/30 dark:text-sky-200"
                >
                  <Home className="h-5 w-5" />
                  <span>Inicio</span>
                </Link>
                <Link
                  href="/tendencias"
                  className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700/50"
                >
                  <TrendingUp className="h-5 w-5" />
                  <span>Tendencias Electorales</span>
                </Link>
                <Link
                  href="/visualizacion"
                  className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700/50"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
                    <line x1="8" y1="21" x2="16" y2="21"></line>
                    <line x1="12" y1="17" x2="12" y2="21"></line>
                  </svg>
                  <span>Visualizar votos en tiempo real</span>
                </Link>
                <Link
                  href="/verificacion"
                  className="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700/50"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="h-5 w-5"
                  >
                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                  </svg>
                  <span>Fact-Checking</span>
                </Link>
              </nav>

<div className="mt-6 pt-6 border-t">
                <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3">Elecciones Activas</h3>
                <div className="space-y-2">
                  <Link
                    href="/elecciones/presidenciales"
                    className="flex items-center justify-between px-3 py-2 text-sm font-medium rounded-lg bg-gradient-to-r from-sky-50 to-coral-50 text-primary hover:from-sky-100 hover:to-coral-100 dark:from-sky-900/20 dark:to-coral-900/20 dark:text-sky-200"
                  >
                    <span>Presidenciales 2025</span>
                    <span className="text-xs bg-primary text-white px-2 py-0.5 rounded-full dark:bg-primary dark:text-white">
                      En vivo
                    </span>
                  </Link>
                  <Link
                    href="/elecciones/congreso"
                    className="flex items-center justify-between px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700/50"
                  >
                    <span>Congreso 2025</span>
                    <span className="text-xs bg-sky-100 text-primary px-2 py-0.5 rounded-full dark:bg-sky-800 dark:text-sky-100">
                      Resultados
                    </span>
                  </Link>
                  <Link
                    href="/elecciones/locales"
                    className="flex items-center justify-between px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700/50"
                  >
                    <span>Gobiernos Locales</span>
                    <span className="text-xs bg-coral-100 text-coral-800 px-2 py-0.5 rounded-full dark:bg-coral-800 dark:text-coral-100">
                      En proceso
                    </span>
                  </Link>
                  <Link
                    href="/elecciones/anteriores"
                    className="flex items-center justify-between px-3 py-2 text-sm font-medium rounded-lg text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700/50"
                  >
                    <span>Elecciones Anteriores</span>
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-4 w-4 text-gray-400"
                    >
                      <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                  </Link>
                </div>
              </div>
            </div>
          </div>

{/* Feed central */}
          <div className="lg:col-span-6">
            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm mb-6 p-4">
              <h1 className="text-2xl font-bold mb-2">Transparencia Electoral en Tiempo Real</h1>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Accede a información verificada sobre el proceso electoral, resultados preliminares y análisis de datos.
              </p>

<div className="flex flex-wrap gap-2 mb-4">
                <Badge
                  variant="outline"
                  className="bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-200"
                >
                  Elecciones 2025
                </Badge>
                <Badge
                  variant="outline"
                  className="bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-200"
                >
                  Resultados preliminares
                </Badge>
                <Badge
                  variant="outline"
                  className="bg-coral-50 text-coral-700 border-coral-200 dark:bg-coral-900/30 dark:text-coral-200"
                >
                  Participación ciudadana
                </Badge>
              </div>

<div className="flex gap-3">
                <Button className="rounded-lg bg-primary hover:bg-primary-light">Ver resultados en vivo</Button>
                <Button variant="outline" className="rounded-lg border-primary text-primary hover:bg-sky-50">
                  Fact-checking
                </Button>
              </div>
            </div>

<div className="space-y-4">
              <div className="flex items-center justify-between bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4">
                <h2 className="text-lg font-semibold">Información Electoral Verificada</h2>
                <div className="flex gap-2">
                  <Button variant="outline" size="sm" className="rounded-full">
                    Todos
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="rounded-full bg-sky-50 text-sky-700 border-sky-200 hover:bg-sky-100 dark:bg-sky-900/20 dark:text-sky-200 dark:border-sky-800"
                  >
                    Oficiales
                  </Button>
                  <Button variant="outline" size="sm" className="rounded-full">
                    Prensa
                  </Button>
                </div>
              </div>

{/* Sidebar derecho - Tendencias y datos */}
          <div className="hidden lg:block lg:col-span-3">
            <div className="space-y-6">
              <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4">
                <h3 className="text-lg font-semibold mb-4">Tendencias Electorales</h3>
                <div className="space-y-4">
                  <div className="space-y-2">
                    <Link href="/tendencias/elecciones2025" className="block">
                      <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <TrendingUp className="h-3 w-3" />
                        <span>Tendencia en Política</span>
                      </div>
                      <div className="font-semibold">#Elecciones2025</div>
                      <div className="text-sm text-gray-500 dark:text-gray-400">125.4K publicaciones</div>
                    </Link>
                  </div>

<div className="space-y-2">
                    <Link href="/tendencias/resultadosenvivo" className="block">
                      <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <TrendingUp className="h-3 w-3" />
                        <span>Tendencia en tu país</span>
                      </div>
                      <div className="font-semibold">#ResultadosEnVivo</div>
                      <div className="text-sm text-gray-500 dark:text-gray-400">98.2K publicaciones</div>
                    </Link>
                  </div>

<div className="space-y-2">
                    <Link href="/tendencias/participacionhistorica" className="block">
                      <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <TrendingUp className="h-3 w-3" />
                        <span>Tendencia en Política</span>
                      </div>
                      <div className="font-semibold">#ParticipaciónHistórica</div>
                      <div className="text-sm text-gray-500 dark:text-gray-400">67.5K publicaciones</div>
                    </Link>
                  </div>

<div className="space-y-2">
                    <Link href="/tendencias/democracia" className="block">
                      <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                        <TrendingUp className="h-3 w-3" />
                        <span>Tendencia en Política</span>
                      </div>
                      <div className="font-semibold">#Democracia</div>
                      <div className="text-sm text-gray-500 dark:text-gray-400">45.8K publicaciones</div>
                    </Link>
                  </div>

<Link href="/tendencias" className="text-sm text-primary dark:text-primary-light font-medium">
                    Mostrar más
                  </Link>
                </div>
              </div>

{/* Modificar la sección de "Fuentes verificadas" en el sidebar derecho */}
              <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4">
                <h3 className="text-lg font-semibold mb-4">Fuentes oficiales</h3>
                <div className="space-y-3">
                  <div className="flex items-center gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Organismo Electoral" />
                      <AvatarFallback>OE</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center gap-1">
                        <span className="font-medium text-sm">Organismo Electoral</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-primary"
                        >
                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                      </div>
                      <span className="text-xs text-gray-500 dark:text-gray-400">Oficial</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Observador Electoral" />
                      <AvatarFallback>OB</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center gap-1">
                        <span className="font-medium text-sm">Observador Electoral</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-primary"
                        >
                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                      </div>
                      <span className="text-xs text-gray-500 dark:text-gray-400">Oficial</span>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    <Avatar className="h-8 w-8">
                      <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Periodista Electoral" />
                      <AvatarFallback>PE</AvatarFallback>
                    </Avatar>
                    <div>
                      <div className="flex items-center gap-1">
                        <span className="font-medium text-sm">Periodista Electoral</span>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="2"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          className="text-secondary"
                        >
                          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                          <polyline points="22 4 12 14.01 9 11.01"></polyline>
                        </svg>
                      </div>
                      <span className="text-xs text-gray-500 dark:text-gray-400">Prensa</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>