Repository: Alejop27/iqscore-front
Pull request #20: ESTE Y YA
Author: login: JHAYCO9
Created: 2025-05-13T03:08:03Z | Merged: 2025-05-13T03:08:09Z

## Summary by Sourcery

Centralize API URLs via new MONGO_URI and MYSQL_URI config entries, replace hard-coded endpoints in auth and search flows, and integrate Sonner toast notifications across login, password reset, and registration. Harmonize responsive breakpoints (768px → 1000px) to standardize mobile/desktop layouts, refine UI/UX in Login and ResetPassword forms, and hide or reveal decorative panels based on screen width. Enhance TopScorersCard with a tabbed interface to toggle annual and monthly leaders, refactor MatchEvents to accept dynamic props and icons, and swap BettingOdds for MatchEvents in the Game view. Strengthen Navbar responsiveness using window width state, adjust mobile bottom navigation, and enrich the ChatIA component with reusable redirect buttons and a footer. Add a site favicon in index.html.

Enhancements:
- Replace hard-coded API endpoints with MONGO_URI and MYSQL_URI config values
- Integrate Sonner toast notifications and loading states across auth (Login, ResetPassword, Registro) workflows
- Standardize responsive breakpoints from 768px to 1000px and conditionally hide/show UI panels
- Add tabbed filtering in TopScorersCard to switch between annual and monthly scorer lists
- Refactor MatchEvents to accept event props, sort by minute, and map types to icons
- Leverage window width state in Navbar for custom mobile/desktop layouts and bottom navigation
- Swap BettingOdds for MatchEvents in the Game view to display dynamic match events
- Redesign ChatIA component with a reusable ButtonRedirect, link buttons, header, and footer

Chores:
- Add Toaster configuration for consistent toast styling
- Include site favicon in index.html


Diff:
diff --git a/index.html b/index.html
index 74a8fda..4dd55a6 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="es">
   <head>
+    <link rel="icon" type="image/png" href="./public/images/LogoIQ.png" />
+
     <!-- NAVBAR -->
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/src/Router/AppRouter.tsx b/src/Router/AppRouter.tsx
index f60a2ae..816722a 100644
--- a/src/Router/AppRouter.tsx
+++ b/src/Router/AppRouter.tsx
@@ -84,14 +84,14 @@ export const router = createBrowserRouter([
             </ProtectedRoute>
         )
     },
-    {
-        path: '/game',
-        element: (
-            <ProtectedRoute>
-                <Game />
-            </ProtectedRoute>
-        )
-    },
+{
+  path: '/game',
+  element: (
+    <ProtectedRoute>
+      <Game />
+    </ProtectedRoute>
+  )
+},
     {
         path: '/player/:playerId',
         element: (
diff --git a/src/components/common/Buttons/ChatIA.tsx b/src/components/common/Buttons/ChatIA.tsx
index c680019..e1be874 100644
--- a/src/components/common/Buttons/ChatIA.tsx
+++ b/src/components/common/Buttons/ChatIA.tsx
@@ -1,9 +1,25 @@
 import React, { useState } from "react";
-import ButtonRedirect from "./ButtonRedirect";
+
+interface ButtonRedirectProps {
+  to: string;
+  children: React.ReactNode;
+  bgColor: string;
+  hoverClass: string;
+}
+
+const ButtonRedirect: React.FC<ButtonRedirectProps> = ({ to, children, bgColor, hoverClass }) => (
+  <a
+    href={to}
+    target="_blank"
+    rel="noopener noreferrer"
+    className={`w-full py-3 px-4 ${bgColor} text-white font-medium rounded-lg flex items-center justify-center gap-2 transition-all duration-300 shadow-md hover:${hoverClass} transform hover:scale-105`}
+  >
+    {children}
+  </a>
+);
 
 const ChatIA: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
-
   const toggleChat = () => setIsOpen(!isOpen);
 
   return (
@@ -12,12 +28,12 @@ const ChatIA: React.FC = () => {
       style={{
         bottom: "5%",
         right: isOpen ? 0 : "0",
-        transition: "right 0.3s",
+        transition: "all 0.3s ease",
       }}
     >
       {/* Botón de abrir/cerrar */}
       <div
-        className={`w-[60px] h-[70px] bg-[#8400FF] flex flex-col items-center justify-center text-[18px] tracking-[8px] cursor-pointer rounded-l-[10px] shadow-[ -3px_0_8px_rgba(0,0,0,0.2)] transition-all duration-300 z-[999] font-bold font-sans hover:bg-[rgb(82,0,159)]`}
+        className={`w-16 h-16 bg-[#8400FF] flex items-center justify-center cursor-pointer rounded-l-lg shadow-lg transition-all duration-300 z-50 hover:bg-[#6d00cc]`}
         onClick={toggleChat}
         style={{
           borderTopRightRadius: isOpen ? 0 : "10px",
@@ -27,33 +43,84 @@ const ChatIA: React.FC = () => {
         <img
           src="./images/chatbot.png"
           alt="Chat Icon"
-          className="w-[40px] h-[40px]"
+          className="w-10 h-10 object-contain"
         />
       </div>
 
       {/* Contenedor del chat */}
       {isOpen && (
         <div
-          className="w-[450px] bg-[#CFCFCF] dark:bg-[#181818] shadow-lg flex flex-col rounded-bl-[10px] overflow-hidden z-[998] border border-[#878787] dark:border-gray-700"
+          className="w-80 md:w-96 bg-white dark:bg-gray-900 shadow-2xl flex flex-col rounded-l-lg overflow-hidden z-40 border border-gray-200 dark:border-gray-700"
           style={{
             height: "auto",
             maxHeight: "550px",
-            transition: "transform 0.3s",
+            transition: "transform 0.3s ease",
           }}
         >
-          {/* Botones de redirección */}
-          <div className="flex flex-col gap-2 p-4 border-t border-gray-300">
-            <ButtonRedirect to="https://drive.google.com/drive/folders/1STriAXHdyfbfyPmL0DT4bn7S63WSMmVm?usp=sharing "  hoverClass="bg-[#6d00cc]">Drive</ButtonRedirect>
-            <ButtonRedirect to="http://98.81.211.250:8501/" hoverClass="bg-[#6d00cc]">Chat IA 1</ButtonRedirect>
-            <ButtonRedirect to="http://54.163.197.215:8501"  hoverClass="bg-[#6d00cc]">Chat IA 2</ButtonRedirect>
+          {/* Encabezado */}
+          <div className="bg-gradient-to-r from-[#8400FF] to-[#6d00cc] px-4 py-3">
+            <h3 className="text-white font-semibold text-lg">Asistentes Virtuales</h3>
           </div>
-          <div>
 
+          {/* Botones de redirección */}
+          <div className="flex flex-col gap-3 p-4">
+            <ButtonRedirect 
+              to="https://drive.google.com/drive/folders/1STriAXHdyfbfyPmL0DT4bn7S63WSMmVm?usp=sharing" 
+              bgColor="bg-[#1FA463]" 
+              hoverClass="bg-[#0f8c53]"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 87.3 78" fill="currentColor">
+                <path d="M6.6 66.85l3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3 1.4.8 2.9 1.2 4.5 1.2h50.4c1.6 0 3.1-.4 4.5-1.2 1.35-.8 2.5-1.9 3.3-3.3l3.85-6.65-73.7 0z" fill="#0066da"/>
+                <path d="M45.1 13.2L41.25 6.55C40.45 5.15 39.3 4.05 37.95 3.25c-1.4-.8-2.9-1.2-4.5-1.2H18.25c-1.6 0-3.1.45-4.5 1.25-1.35.8-2.5 1.95-3.3 3.25L6.6 13.2H45.1z" fill="#00ac47"/>
+                <path d="M45.1 13.2H6.6v53.65h73.7V13.2H45.1z" fill="#ffba00"/>
+                <path d="M68.65 0H45.1v78h23.55c1.6 0 3.1-.4 4.5-1.2 1.35-.8 2.5-1.9 3.3-3.3l10.45-18.1V18.2L76.45 3.3C75.65 1.95 74.5.85 73.15.05c-1.4-.8-2.9-1.2-4.5-.05z" fill="#ffffff" fillOpacity=".2"/>
+                <path d="M68.65 0H45.1v78h23.55c1.6 0 3.1-.4 4.5-1.2 1.35-.8 2.5-1.9 3.3-3.3l10.45-18.1V18.2L76.45 3.3C75.65 1.95 74.5.85 73.15.05c-1.4-.8-2.9-1.2-4.5-.05z" fill="#EA4335"/>
+              </svg>
+              Drive
+            </ButtonRedirect>
+            
+            <ButtonRedirect 
+              to="http://ia.iqscore.space:8501/" 
+              bgColor="bg-[#8400FF]" 
+              hoverClass="bg-[#6d00cc]"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+              </svg>
+              Chat IA
+            </ButtonRedirect>
+            
+            <ButtonRedirect 
+              to="http://ia.iqscore.space:8502" 
+              bgColor="bg-[#6C3483]" 
+              hoverClass="bg-[#5B2C6F]"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
+              </svg>
+              IA Predicciones
+            </ButtonRedirect>
+            
+            <ButtonRedirect 
+              to="https://t.me/IqscoreAsistenteFutbol_bot" 
+              bgColor="bg-[#0088cc]" 
+              hoverClass="bg-[#0077b3]"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/>
+              </svg>
+              Telegram Bot
+            </ButtonRedirect>
+          </div>
+          
+          {/* Footer */}
+          <div className="mt-auto bg-gray-100 dark:bg-gray-800 p-3 text-center text-xs text-gray-500 dark:text-gray-400">
+            © 2025 IQ Score - Todos los derechos reservados
           </div>
         </div>
       )}
     </div>
   );
-};//bg-[#ff6347]
+};
 
-export default ChatIA;
+export default ChatIA;
\ No newline at end of file
diff --git a/src/components/common/Cards/GoalsYear/Goals.tsx b/src/components/common/Cards/GoalsYear/Goals.tsx
index f26bc9b..7b4f9b0 100644
--- a/src/components/common/Cards/GoalsYear/Goals.tsx
+++ b/src/components/common/Cards/GoalsYear/Goals.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 
 interface Goleador {
-  "#": string;
+  "#"?: string;
   JUGADOR: string;
   PAÍS: string;
   EQUIPO: string;
-  GOLES: string;
+  GOLES?: string;
   PJ: string;
   PROMEDIO: string;
 }
@@ -13,26 +13,26 @@ interface Goleador {
 interface GoleadoresData {
   scraped_at: string;
   source_url: string;
-  data: {
-    overall_2025: Goleador[];
-    monthly: {
-      enero: any[];
-      febrero: any[];
-    };
-  };
-  errors: any[];
-  debug_info: any;
+  goleadores_anuales: Goleador[];
+  goleadores_enero: Goleador[];
+  goleadores_febrero: Goleador[];
+  goleadores_marzo: Goleador[];
+  error: any;
 }
 
 const TopScorersCard: React.FC = () => {
   const [scorersData, setScorersData] = useState<GoleadoresData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [activeTab, setActiveTab] = useState<'anual' | 'enero' | 'febrero' | 'marzo'>('anual');
 
   useEffect(() => {
     const fetchScorersData = async () => {
       try {
         const response = await fetch("https://scrapgoals-production.up.railway.app/scrape");
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
         const data: GoleadoresData = await response.json();
         setScorersData(data);
       } catch (err) {
@@ -47,7 +47,6 @@ const TopScorersCard: React.FC = () => {
   }, []);
 
   const renderCountryFlag = (country: string) => {
-    // Aquí podrías implementar lógica para mostrar banderas según el país
     return (
       <span className="text-xs text-gray-500 dark:text-gray-400">
         {country}
@@ -55,6 +54,43 @@ const TopScorersCard: React.FC = () => {
     );
   };
 
+  const renderScorersTable = (scorers: Goleador[], showRanking: boolean) => {
+    return (
+      <div className="relative bg-white dark:bg-[#1B1D20] p-6 pt-0 rounded-b-lg shadow-lg border border-gray-200 dark:border-gray-700">
+        {scorers
+          .filter((scorer) => scorer.JUGADOR !== "JUGADOR") // Excluye el encabezado
+          .map((scorer, index) => (
+            <div
+              key={`${scorer.JUGADOR}-${index}`}
+              className="grid grid-cols-[0.5fr_2fr_1fr_1fr_1fr_1fr] items-center py-3 px-6 border-b border-gray-200 dark:border-gray-700 text-sm last:border-b-0"
+            >
+              <div className="font-medium text-gray-400">
+                {showRanking ? scorer["#"] || index + 1 : index + 1}
+              </div>
+              <div>
+                <div className="font-medium text-black dark:text-white">
+                  {scorer.JUGADOR}
+                </div>
+                {renderCountryFlag(scorer.PAÍS)}
+              </div>
+              <div className="text-center text-black dark:text-white">
+                {scorer.EQUIPO}
+              </div>
+              <div className="text-center font-bold text-black dark:text-white">
+                {scorer.GOLES}
+              </div>
+              <div className="text-center text-black dark:text-white">
+                {scorer.PJ}
+              </div>
+              <div className="text-center font-bold text-[#8400FF] dark:text-purple-300">
+                {scorer.PROMEDIO}
+              </div>
+            </div>
+          ))}
+      </div>
+    );
+  };
+
   if (loading) {
     return (
       <div className="text-center text-black dark:text-white mt-10 font-nunito">
@@ -71,12 +107,48 @@ const TopScorersCard: React.FC = () => {
     );
   }
 
+  if (!scorersData) {
+    return (
+      <div className="text-center text-red-500 dark:text-red-400 mt-10 font-nunito">
+        No se encontraron datos de goleadores
+      </div>
+    );
+  }
+
   return (
     <div className="max-w-full mx-auto text-black dark:text-white font-nunito">
       <h3 className="font-bold text-lg text-black dark:text-white uppercase mb-4">
         Top Goleadores 2025
       </h3>
 
+      {/* Tabs */}
+      <div className="flex mb-4 border-b border-gray-200 dark:border-gray-700">
+        <button
+          className={`py-2 px-4 font-medium ${activeTab === 'anual' ? 'text-[#8400FF] border-b-2 border-[#8400FF]' : 'text-gray-500'}`}
+          onClick={() => setActiveTab('anual')}
+        >
+          Anual
+        </button>
+        <button
+          className={`py-2 px-4 font-medium ${activeTab === 'enero' ? 'text-[#8400FF] border-b-2 border-[#8400FF]' : 'text-gray-500'}`}
+          onClick={() => setActiveTab('enero')}
+        >
+          Enero
+        </button>
+        <button
+          className={`py-2 px-4 font-medium ${activeTab === 'febrero' ? 'text-[#8400FF] border-b-2 border-[#8400FF]' : 'text-gray-500'}`}
+          onClick={() => setActiveTab('febrero')}
+        >
+          Febrero
+        </button>
+        <button
+          className={`py-2 px-4 font-medium ${activeTab === 'marzo' ? 'text-[#8400FF] border-b-2 border-[#8400FF]' : 'text-gray-500'}`}
+          onClick={() => setActiveTab('marzo')}
+        >
+          Marzo
+        </button>
+      </div>
+
       {/* Encabezado */}
       <div className="grid grid-cols-[0.5fr_2fr_1fr_1fr_1fr_1fr] items-center py-3 px-6 bg-[#8400FF] text-white font-semibold text-sm rounded-t-lg">
         <div>#</div>
@@ -87,38 +159,19 @@ const TopScorersCard: React.FC = () => {
         <div className="text-center">Prom.</div>
       </div>
 
-      {/* Contenido */}
-      <div className="relative bg-white dark:bg-[#1B1D20] p-6 pt-0 rounded-b-lg shadow-lg border border-gray-200 dark:border-gray-700">
-        {scorersData?.data.overall_2025.map((scorer) => (
-          <div
-            key={scorer.JUGADOR}
-            className="grid grid-cols-[0.5fr_2fr_1fr_1fr_1fr_1fr] items-center py-3 px-6 border-b border-gray-200 dark:border-gray-700 text-sm last:border-b-0"
-          >
-            <div className="font-medium text-gray-400">{scorer["#"]}</div>
-            <div>
-              <div className="font-medium text-black dark:text-white">
-                {scorer.JUGADOR}
-              </div>
-              {renderCountryFlag(scorer.PAÍS)}
-            </div>
-            <div className="text-center text-black dark:text-white">
-              {scorer.EQUIPO}
-            </div>
-            <div className="text-center font-bold text-black dark:text-white">
-              {scorer.GOLES}
-            </div>
-            <div className="text-center text-black dark:text-white">
-              {scorer.PJ}
-            </div>
-            <div className="text-center font-bold text-[#8400FF] dark:text-purple-300">
-              {scorer.PROMEDIO}
-            </div>
-          </div>
-        ))}
-      </div>
+      {/* Tabla según pestaña activa */}
+      {activeTab === 'anual' && renderScorersTable(scorersData.goleadores_anuales, true)}
+      {activeTab === 'enero' && renderScorersTable(scorersData.goleadores_enero, false)}
+      {activeTab === 'febrero' && renderScorersTable(scorersData.goleadores_febrero, true)}
+      {activeTab === 'marzo' && renderScorersTable(scorersData.goleadores_marzo, true)}
       
       <div className="text-xs text-gray-500 dark:text-gray-400 mt-2">
-        Actualizado: {new Date(scorersData?.scraped_at || '').toLocaleString()}
+        Actualizado: {new Date(scorersData.scraped_at).toLocaleString()}
+        {scorersData.source_url && (
+          <span className="ml-2">
+            | Fuente: <a href={scorersData.source_url} target="_blank" rel="noopener noreferrer" className="text-[#8400FF]">El Gráfico</a>
+          </span>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/common/Game/Odds.tsx b/src/components/common/Game/Odds.tsx
index f088ac8..2143447 100644
--- a/src/components/common/Game/Odds.tsx
+++ b/src/components/common/Game/Odds.tsx
@@ -1,64 +1,72 @@
 import React from "react";
 
-const MatchEvents: React.FC = () => {
-  const events = [
-    {
-      id: 1,
-      type: "goal",
-      team: "Local",
-      minute: 12,
-      player: "Juan Pérez",
-      icon: "⚽️",
-    },
-    {
-      id: 2,
-      type: "yellow_card",
-      team: "Visitante",
-      minute: 28,
-      player: "Carlos Gómez",
-      icon: "🟨",
-    },
-    {
-      id: 3,
-      type: "substitution",
-      team: "Local",
-      minute: 55,
-      playerOut: "Andrés Ríos",
-      playerIn: "Luis Díaz",
-      icon: "🔁",
-    },
-    {
-      id: 4,
-      type: "red_card",
-      team: "Visitante",
-      minute: 78,
-      player: "Miguel Torres",
-      icon: "🟥",
-    },
-  ];
+interface Event {
+  id?: number;
+  type: string;
+  team: string;
+  minute: number;
+  player?: string;
+  playerOut?: string;
+  playerIn?: string;
+  assist?: string;
+  icon?: string;
+} 
+interface Props {
+  events?: Event[];  // <-- El `?` la hace opcional
+}
+
+const MatchEvents: React.FC<Props> = ({ events = [] }) => { 
+  // Mapear tipos de eventos a íconos
+  const getEventIcon = (type: string) => {
+    switch (type) {
+      case 'goal':
+        return '⚽️';
+      case 'yellow_card':
+        return '🟨';
+      case 'red_card':
+        return '🟥';
+      case 'substitution':
+        return '🔁';
+      default:
+        return '🔵';
+    }
+  };
+
+  // Ordenar eventos por minuto
+  const sortedEvents = [...events].sort((a, b) => a.minute - b.minute);
 
   return (
     <div className="max-w-[1240px] mx-auto font-nunito text-black dark:text-white">
       <h3 className="text-[18px] font-bold uppercase mb-4">Acontecimientos del partido</h3>
       <div className="relative bg-white dark:bg-[#1B1D20] p-6 rounded-lg shadow-lg border border-[#ccc] dark:border-[#333]">
-        {events.map((event) => (
-          <div key={event.id} className="flex items-center mb-4 last:mb-0">
-            <div className="text-2xl mr-4">{event.icon}</div>
-            <div className="flex flex-col">
-              <span className="text-sm font-semibold">
-                {event.minute}' - {event.team}
-              </span>
-              <span className="text-sm">
-                {event.type === "substitution"
-                  ? `Cambio: Sale ${event.playerOut}, entra ${event.playerIn}`
-                  : `${event.type === "goal" ? "Gol de" : event.type === "yellow_card" ? "Tarjeta amarilla para" : "Tarjeta roja para"} ${event.player}`}
-              </span>
+        {sortedEvents.length > 0 ? (
+          sortedEvents.map((event, index) => (
+            <div key={index} className="flex items-center mb-4 last:mb-0">
+              <div className="text-2xl mr-4">{getEventIcon(event.type)}</div>
+              <div className="flex flex-col">
+                <span className="text-sm font-semibold">
+                  {event.minute}' - {event.team === 'home' ? 'Local' : 'Visitante'}
+                </span>
+                <span className="text-sm">
+                  {event.type === 'substitution'
+                    ? `Cambio: Sale ${event.playerOut}, entra ${event.playerIn}`
+                    : event.type === 'goal'
+                    ? `Gol de ${event.player}${event.assist ? ` (Asistencia: ${event.assist})` : ''}`
+                    : event.type === 'yellow_card'
+                    ? `Tarjeta amarilla para ${event.player}`
+                    : event.type === 'red_card'
+                    ? `Tarjeta roja para ${event.player}`
+                    : `${event.player ? `${event.player} - ` : ''}${event.type}`}
+                </span>
+              </div>
             </div>
-          </div>
-        ))}
+          ))
+        ) : (
+          <p className="text-sm text-gray-500 dark:text-gray-400">No hay eventos registrados</p>
+        )}
       </div>
     </div>
   );
 };
 
-export default MatchEvents;
+export default MatchEvents;
\ No newline at end of file
diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx
index 1a17f76..4688b64 100644
--- a/src/components/common/Navbar/Navbar.tsx
+++ b/src/components/common/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { FaUser, FaCog, FaSearch, FaList, FaSignOutAlt } from "react-icons/fa";
 import { useNavigate } from "react-router-dom";
 import { useAuth } from "../../../context/AuthContext"; // Asegúrate de que la ruta sea correcta
+import { MYSQL_URI } from "../../../config/config";
 
 interface Resultado {
   resultado: string;
@@ -48,6 +49,25 @@ const Navbar: React.FC = () => {
   const [loadingSearch, setLoadingSearch] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
+  // State to track window width for custom responsiveness
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 0
+  );
+
+  // Effect to handle window resize
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  // Check if we should show mobile view (less than 1000px)
+  const isMobile = windowWidth < 1000;
 
   useEffect(() => {
     const html = document.querySelector("html");
@@ -75,7 +95,8 @@ const Navbar: React.FC = () => {
 
     setLoadingSearch(true);
     try {
-      const response = await fetch(`http://3.92.147.63:3001/api/buscar/${encodeURIComponent(search)}`);
+      
+      const response = await fetch(`${MYSQL_URI}/api/buscar/${encodeURIComponent(search)}`);
       const data = await response.json();
       
       console.log("Datos recibidos:", data);
@@ -162,6 +183,7 @@ const Navbar: React.FC = () => {
   return (
     <>
       {/* Top Navigation Bar */}
+      
       <div className="fixed top-0 left-0 right-0 bg-[#2c3ec4] dark:bg-[#1B1D20] w-full z-50">
         <nav className="font-sans font-semibold text-white px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between h-20 max-w-[1280px] w-full mx-auto">
           
@@ -175,7 +197,7 @@ const Navbar: React.FC = () => {
               />
             </a>
 
-            <div className="relative flex-grow hidden md:block">
+            <div className={`relative flex-grow ${isMobile ? 'hidden' : 'block'}`}>
               <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-[#EAEAEA]">
                 <FaSearch />
               </div>
@@ -235,7 +257,7 @@ const Navbar: React.FC = () => {
           </div>
 
           {/* Right side */}
-          <div className="hidden md:flex items-center gap-4 lg:gap-6">
+          <div className={`${isMobile ? 'hidden' : 'flex'} items-center gap-4 lg:gap-6`}>
             <a href="/Leagues" className="text-white hover:bg-gray-400 dark:hover:bg-[#2a2a2a] px-2 py-1 rounded-md transition duration-200 ease-in-out hover:shadow-sm">
               LIGAS
             </a>
@@ -249,24 +271,24 @@ const Navbar: React.FC = () => {
 
             {/* Usuario autenticado o botón INICIAR */}
 
-{user ? (
-  <div className="flex items-center gap-3">
-    <div className="w-8 h-8 rounded-full bg-[#8400FF] flex items-center justify-center text-white font-bold">
-      {user.email.charAt(0).toUpperCase()}
-    </div>
-    <button
-      onClick={handleLogout}
-      className="flex items-center gap-1 text-white hover:text-gray-300 transition-colors text-sm font-medium"
-      title="Cerrar sesión"
-    >
-      <FaSignOutAlt />
-    </button>
-  </div>
-) : (
-  <a href="/iniciar" className="bg-[#EAEAEA] py-2 px-4 rounded-md flex items-center gap-2 text-[#1D1B20] font-bold hover:bg-[#d6d6d6] transition text-sm sm:text-base">
-    <FaUser /> <span>INICIAR</span>
-  </a>
-)}
+            {user ? (
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 rounded-full bg-[#8400FF] flex items-center justify-center text-white font-bold">
+                  {user.email.charAt(0).toUpperCase()}
+                </div>
+                <button
+                  onClick={handleLogout}
+                  className="flex items-center gap-1 text-white hover:text-gray-300 transition-colors text-sm font-medium"
+                  title="Cerrar sesión"
+                >
+                  <FaSignOutAlt />
+                </button>
+              </div>
+            ) : (
+              <a href="/iniciar" className="bg-[#EAEAEA] py-2 px-4 rounded-md flex items-center gap-2 text-[#1D1B20] font-bold hover:bg-[#d6d6d6] transition text-sm sm:text-base">
+                <FaUser /> <span>INICIAR</span>
+              </a>
+            )}
 
 
             {/* Cog and Theme Menu */}
@@ -292,7 +314,7 @@ const Navbar: React.FC = () => {
           </div>
 
           {/* Settings icon for mobile */}
-          <div className="md:hidden flex items-center">
+          <div className={`${isMobile ? 'flex' : 'hidden'} items-center`}>
             <button
               className="text-white hover:text-gray-300 transition text-xl"
               onClick={() => setMenuOpen(!menuOpen)}
@@ -316,7 +338,7 @@ const Navbar: React.FC = () => {
 
       {/* Mobile Search Panel */}
       {searchOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center md:hidden">
+        <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
           <div className="bg-white dark:bg-[#1B1D20] w-11/12 mx-auto rounded-lg p-4">
             <div className="relative mb-4">
               <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-[#EAEAEA]">
@@ -390,42 +412,44 @@ const Navbar: React.FC = () => {
       )}
       
       {/* Bottom Navigation for Mobile */}
-      <div className="md:hidden fixed bottom-0 left-0 right-0 bg-[#2c3ec4] dark:bg-[#1B1D20] text-white z-50 shadow-lg">
-        <div className="grid grid-cols-3 h-16">
-          <a href="/Leagues" className="flex flex-col items-center justify-center">
-            <FaList className="text-xl" />
-            <span className="text-xs mt-1">Ligas</span>
-          </a>
-          
-          <button onClick={toggleSearch} className="flex flex-col items-center justify-center">
-            <FaSearch className="text-xl" />
-            <span className="text-xs mt-1">Buscar</span>
-          </button>
-          
-{user ? (
-  <button
-    onClick={handleLogout}
-    className="flex flex-col items-center justify-center"
-    title="Cerrar sesión"
-  >
-    <div className="w-8 h-8 rounded-full bg-[#8400FF] flex items-center justify-center text-white font-bold mb-1">
-      {user.email.charAt(0).toUpperCase()}
-    </div>
-    <span className="text-[10px] text-[#8400FF]">Salir</span>
-  </button>
-) : (
-  <a href="/cuenta" className="flex flex-col items-center justify-center">
-    <FaUser className="text-xl" />
-    <span className="text-xs mt-1">Perfil</span>
-  </a>
-)}
+      {isMobile && (
+        <div className="fixed bottom-0 left-0 right-0 bg-[#2c3ec4] dark:bg-[#1B1D20] text-white z-50 shadow-lg">
+          <div className="grid grid-cols-3 h-16">
+            <a href="/Leagues" className="flex flex-col items-center justify-center">
+              <FaList className="text-xl" />
+              <span className="text-xs mt-1">Ligas</span>
+            </a>
+            
+            <button onClick={toggleSearch} className="flex flex-col items-center justify-center">
+              <FaSearch className="text-xl" />
+              <span className="text-xs mt-1">Buscar</span>
+            </button>
+            
+            {user ? (
+              <button
+                onClick={handleLogout}
+                className="flex flex-col items-center justify-center"
+                title="Cerrar sesión"
+              >
+                <div className="w-8 h-8 rounded-full bg-[#8400FF] flex items-center justify-center text-white font-bold mb-1">
+                  {user.email.charAt(0).toUpperCase()}
+                </div>
+                <span className="text-[10px] text-[#8400FF]">Salir</span>
+              </button>
+            ) : (
+              <a href="/cuenta" className="flex flex-col items-center justify-center">
+                <FaUser className="text-xl" />
+                <span className="text-xs mt-1">Perfil</span>
+              </a>
+            )}
+          </div>
         </div>
-      </div>
+      )}
       
       {/* Add padding to the bottom on mobile to prevent content from being hidden behind the bottom nav */}
-      <div className="md:hidden h-16"></div>
+      {isMobile && <div className="h-16"></div>}
     </>
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/config/config.tsx b/src/config/config.tsx
index da5dde9..ab1a966 100644
--- a/src/config/config.tsx
+++ b/src/config/config.tsx
@@ -1,3 +1,3 @@
 // config.ts
-export const MONGO_URI = "https://iqscorebackend2025pi.loca.lt";
-export const MYSQL_URI = "http://3.92.147.63:3001";
\ No newline at end of file
+export const MONGO_URI = "http://35.170.118.153:3005";
+export const MYSQL_URI = "http://3.216.26.185:3001";
\ No newline at end of file
diff --git a/src/views/404.tsx b/src/views/404.tsx
index 4d60517..31ed7dd 100644
--- a/src/views/404.tsx
+++ b/src/views/404.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PageWithLayout from '../components/PageWithLayout';
 
 const breakpoints = {
-  mobile: '768px',
+  mobile: '1000px',
 };
 
 const Container = styled.div`
diff --git a/src/views/Account.tsx b/src/views/Account.tsx
index 121dd3e..24b187e 100644
--- a/src/views/Account.tsx
+++ b/src/views/Account.tsx
@@ -7,7 +7,7 @@ import AccountData from "../components/common/Usuario/AccountData";
 import PremiumPlanCard from "../components/common/Usuario/PremiumPlanCard";
 
 const breakpoints = {
-  mobile: '768px',
+  mobile: '1000px',
 };
 
 const Container = styled.div`
diff --git a/src/views/Cuotas.tsx b/src/views/Cuotas.tsx
index 334ef72..932075d 100644
--- a/src/views/Cuotas.tsx
+++ b/src/views/Cuotas.tsx
@@ -9,7 +9,7 @@ import TransfermarktOdds from '../components/common/Cards/ODDS/Transfermarket';
 
 // Breakpoints for media queries
 const breakpoints = {
-  mobile: '768px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
+  mobile: '1000px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
 };
 
 const Container = styled.div`
diff --git a/src/views/Game.tsx b/src/views/Game.tsx
index 010536e..2e4a37b 100644
--- a/src/views/Game.tsx
+++ b/src/views/Game.tsx
@@ -3,12 +3,12 @@ import styled from 'styled-components';
 import PageWithLayout from '../components/PageWithLayout';
 import AD1 from '../components/common/Cards/ADS/Ad1';
 import MatchInfo from '../components/common/Game/InfoGame';
-import BettingOdds from '../components/common/Game/Odds';
+import MatchEvents from '../components/common/Game/Odds';
 import StartingLineup from '../components/common/Game/Headlines';
 import Ad3 from '../components/common/Cards/ADS/Ad3';
 
 const breakpoints = {
-  mobile: '768px',
+  mobile: '1000px',
 };
 
 const Container = styled.div`
@@ -87,7 +87,7 @@ const Game: React.FC = () => {
             <MatchInfo />
           </div>
           <div>
-            <BettingOdds />
+            <MatchEvents />
           </div>
           <div>
             <StartingLineup />
@@ -111,7 +111,7 @@ const Game: React.FC = () => {
 
           <RightColumn>
             <div>
-              <BettingOdds />
+              <MatchEvents />
             </div>
             <div>
               <Ad3 />
diff --git a/src/views/League.tsx b/src/views/League.tsx
index 115f27c..be59eb5 100644
--- a/src/views/League.tsx
+++ b/src/views/League.tsx
@@ -11,7 +11,7 @@ import NoticiasRelevo from '../components/common/Cards/TOPS/Noticias';
 
 // Breakpoints for media queries
 const breakpoints = {
-  mobile: '768px',
+  mobile: '1000px',
 };
 
 const Container = styled.div`
diff --git a/src/views/Leagues.tsx b/src/views/Leagues.tsx
index 79105c1..4e67599 100644
--- a/src/views/Leagues.tsx
+++ b/src/views/Leagues.tsx
@@ -10,7 +10,7 @@ import TopScorersCard from '../components/common/Cards/GoalsYear/Goals';
 
 // Breakpoints for media queries
 const breakpoints = {
-  mobile: '768px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
+  mobile: '1000px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
 };
 
 const Container = styled.div`
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index fa87fa2..df68ac1 100644
--- a/src/views/Login.tsx
+++ b/src/views/Login.tsx
@@ -2,10 +2,11 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
 import ReCAPTCHA from "react-google-recaptcha";
-import { toast, Toaster } from "sonner"; // Importamos Sonner
+import { toast, Toaster } from "sonner";
 import { GoogleOAuthProvider, GoogleLogin } from '@react-oauth/google';
 import { CredentialResponse } from '@react-oauth/google';
 import { useAuth } from "../context/AuthContext";
+import { MONGO_URI } from "../config/config";
 
 const Login: React.FC = () => {
   const navigate = useNavigate();
@@ -14,14 +15,14 @@ const Login: React.FC = () => {
   const [password, setPassword] = useState("");
   const [rememberMe, setRememberMe] = useState(false);
   const [captchaValue, setCaptchaValue] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false); // Estado para manejar carga
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
 
     try {
-      const response = await fetch("http://54.234.36.48:3005/api/login", {
+      const response = await fetch(`${MONGO_URI}/api/login`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -69,7 +70,7 @@ const Login: React.FC = () => {
     }
   };
 
-  const GOOGLE_CLIENT_ID = "656521501617-pr273c84j029tuhau1nveu3tu08gsn54.apps.googleusercontent.com";
+  const GOOGLE_CLIENT_ID = "656521501617-pr273c84j029tuhau1nveu3tu08gsn54.apps.googleusercontent.com ";
 
   function parseJwt(token: string) {
     try {
@@ -82,7 +83,7 @@ const Login: React.FC = () => {
   const handleGoogleSuccess = async (response: CredentialResponse) => {
     setIsLoading(true);
     try {
-      const res = await fetch("http://54.234.36.48:3005/api/auth/google-login", {
+      const res = await fetch(`${MONGO_URI}/api/auth/google-login`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         credentials: "include",
@@ -126,8 +127,7 @@ const Login: React.FC = () => {
 
   return (
     <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
-
-            <Toaster 
+      <Toaster 
         position="top-center"
         richColors
         closeButton
@@ -142,234 +142,252 @@ const Login: React.FC = () => {
         }}
       />
 
-    <div className="min-h-screen flex flex-col md:flex-row bg-[#1B1D20] relative overflow-hidden">
-      {/* Efectos de fondo */}
-      <div className="absolute inset-0 overflow-hidden">
-        {/* Campo de fútbol estilizado */}
-        <div className="absolute inset-0 bg-[#1B1D20]">
-          <div className="absolute top-0 left-0 right-0 bottom-0">
-            {/* Líneas del campo */}
-            <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-[#354AED]/10 transform -translate-x-1/2"></div>
-            <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-[#354AED]/10 transform -translate-y-1/2"></div>
-            <div className="absolute top-1/2 left-1/2 w-32 h-32 border-2 border-[#354AED]/10 rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
-            <div className="absolute top-0 left-0 right-0 bottom-0 border-2 border-[#354AED]/10 m-10 rounded-xl"></div>
-          </div>
-        </div>
-        
-        {/* Efectos de luz */}
-        <div className="absolute -top-10 -left-10 w-96 h-96 bg-[#354AED] opacity-20 rounded-full filter blur-3xl"></div>
-        <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-[#8400FF] opacity-20 rounded-full filter blur-3xl"></div>
-      </div>
-
-      {/* Panel izquierdo - Contenido de fútbol */}
-      <div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center items-center relative z-10">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="max-w-lg"
-        >
-          {/* Logo y título */}
-          <div className="flex flex-col items-center mb-10">
-            <div className="w-24 h-24 rounded-full bg-[#354AED] flex items-center justify-center mb-6">
-              <svg viewBox="0 0 24 24" className="w-12 h-12 text-white" fill="currentColor">
-                <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M16.9,8.57l-2.3,2.32c-0.07,0.07-0.13,0.16-0.16,0.26l-0.93,2.98c-0.21,0.67-1.13,0.71-1.42,0.07l-0.82-1.84c-0.07-0.16-0.2-0.29-0.36-0.36l-1.84-0.82c-0.64-0.29-0.6-1.2,0.07-1.42l2.98-0.93c0.1-0.03,0.19-0.09,0.26-0.16l2.32-2.3C15.31,6.34,18.02,6.58,16.9,8.57z" />
-              </svg>
+      <div className="min-h-screen flex flex-col lg:flex-row bg-[#1B1D20] relative overflow-hidden">
+        {/* Efectos de fondo */}
+        <div className="absolute inset-0 overflow-hidden">
+          {/* Campo de fútbol estilizado */}
+          <div className="absolute inset-0 bg-[#1B1D20]">
+            <div className="absolute top-0 left-0 right-0 bottom-0">
+              {/* Líneas del campo */}
+              <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-[#354AED]/10 transform -translate-x-1/2"></div>
+              <div className="absolute top-1/2 left-0 right-0 h-0.5 bg-[#354AED]/10 transform -translate-y-1/2"></div>
+              <div className="absolute top-1/2 left-1/2 w-32 h-32 border-2 border-[#354AED]/10 rounded-full transform -translate-x-1/2 -translate-y-1/2"></div>
+              <div className="absolute top-0 left-0 right-0 bottom-0 border-2 border-[#354AED]/10 m-10 rounded-xl"></div>
             </div>
-            <h1 className="text-5xl font-bold text-white mb-2 tracking-tight">IQScore</h1>
-            <p className="text-xl text-white/70">Análisis Predictivo de Fútbol</p>
           </div>
+          
+          {/* Efectos de luz */}
+          <div className="absolute -top-10 -left-10 w-96 h-96 bg-[#354AED] opacity-20 rounded-full filter blur-3xl"></div>
+          <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-[#8400FF] opacity-20 rounded-full filter blur-3xl"></div>
+        </div>
 
-          {/* Características */}
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
-              <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+        {/* Panel izquierdo - Contenido de fútbol (Oculto en pantallas < 1000px) */}
+        <div className="w-full lg:w-1/2 p-6 lg:p-12 flex-col justify-center items-center relative z-10 hidden lg:flex">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="max-w-lg"
+          >
+            {/* Logo y título */}
+            <div className="flex flex-col items-center mb-8 lg:mb-10">
+              <div className="w-20 h-20 lg:w-24 lg:h-24 rounded-full bg-[#354AED] flex items-center justify-center mb-4 lg:mb-6">
+                <svg viewBox="0 0 24 24" className="w-10 h-10 lg:w-12 lg:h-12 text-white" fill="currentColor">
+                  <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M16.9,8.57l-2.3,2.32c-0.07,0.07-0.13,0.16-0.16,0.26l-0.93,2.98c-0.21,0.67-1.13,0.71-1.42,0.07l-0.82-1.84c-0.07-0.16-0.2-0.29-0.36-0.36l-1.84-0.82c-0.64-0.29-0.6-1.2,0.07-1.42l2.98-0.93c0.1-0.03,0.19-0.09,0.26-0.16l2.32-2.3C15.31,6.34,18.02,6.58,16.9,8.57z" />
                 </svg>
               </div>
-              <h3 className="text-white text-lg font-medium mb-1">Estadísticas Avanzadas</h3>
-              <p className="text-white/60 text-sm">Análisis completo del rendimiento de equipos y jugadores</p>
+              <h1 className="text-4xl lg:text-5xl font-bold text-white mb-2 tracking-tight">IQScore</h1>
+              <p className="text-lg lg:text-xl text-white/70">Análisis Predictivo de Fútbol</p>
             </div>
-            
-            <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
-              <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-                </svg>
+
+            {/* Características */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
+              <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-4 lg:p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
+                <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
+                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                  </svg>
+                </div>
+                <h3 className="text-white text-lg font-medium mb-1">Estadísticas Avanzadas</h3>
+                <p className="text-white/60 text-sm">Análisis completo del rendimiento de equipos y jugadores</p>
               </div>
-              <h3 className="text-white text-lg font-medium mb-1">Predicciones en Vivo</h3>
-              <p className="text-white/60 text-sm">Pronósticos en tiempo real basados en IA</p>
-            </div>
-            
-            <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
-              <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
+              
+              <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-4 lg:p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
+                <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
+                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                  </svg>
+                </div>
+                <h3 className="text-white text-lg font-medium mb-1">Predicciones en Vivo</h3>
+                <p className="text-white/60 text-sm">Pronósticos en tiempo real basados en IA</p>
               </div>
-              <h3 className="text-white text-lg font-medium mb-1">Alertas Personalizadas</h3>
-              <p className="text-white/60 text-sm">Recibe notificaciones para tus equipos favoritos</p>
-            </div>
-            
-            <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
-              <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
-                <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
+              
+              <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-4 lg:p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
+                <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
+                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <h3 className="text-white text-lg font-medium mb-1">Alertas Personalizadas</h3>
+                <p className="text-white/60 text-sm">Recibe notificaciones para tus equipos favoritos</p>
+              </div>
+              
+              <div className="bg-[#1B1D20]/80 backdrop-blur-lg p-4 lg:p-5 rounded-xl border border-[#354AED]/20 hover:border-[#354AED]/40 transition-all">
+                <div className="w-10 h-10 bg-[#8400FF] rounded-lg flex items-center justify-center mb-3">
+                  <svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                  </svg>
+                </div>
+                <h3 className="text-white text-lg font-medium mb-1">Historial Completo</h3>
+                <p className="text-white/60 text-sm">Acceso a datos históricos de todas las ligas</p>
               </div>
-              <h3 className="text-white text-lg font-medium mb-1">Historial Completo</h3>
-              <p className="text-white/60 text-sm">Acceso a datos históricos de todas las ligas</p>
             </div>
-          </div>
-        </motion.div>
-      </div>
+          </motion.div>
+        </div>
+
+        {/* Logo compacto para móvil (Visible solo en pantallas < 1000px) */}
+        <div className="w-full p-6 flex justify-center items-center lg:hidden relative z-10">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+            className="flex flex-col items-center"
+          >
+            <div className="w-20 h-20 rounded-full bg-[#354AED] flex items-center justify-center mb-4">
+              <svg viewBox="0 0 24 24" className="w-10 h-10 text-white" fill="currentColor">
+                <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M16.9,8.57l-2.3,2.32c-0.07,0.07-0.13,0.16-0.16,0.26l-0.93,2.98c-0.21,0.67-1.13,0.71-1.42,0.07l-0.82-1.84c-0.07-0.16-0.2-0.29-0.36-0.36l-1.84-0.82c-0.64-0.29-0.6-1.2,0.07-1.42l2.98-0.93c0.1-0.03,0.19-0.09,0.26-0.16l2.32-2.3C15.31,6.34,18.02,6.58,16.9,8.57z" />
+              </svg>
+            </div>
+            <h1 className="text-3xl font-bold text-white mb-1 tracking-tight">IQScore</h1>
+            <p className="text-lg text-white/70">Análisis Predictivo de Fútbol</p>
+          </motion.div>
+        </div>
 
-      {/* Panel derecho - Formulario de login */}
-        <div className="w-full md:w-1/2 p-8 flex items-center justify-center relative z-10">
+        {/* Panel derecho - Formulario de login */}
+        <div className="w-full lg:w-1/2 px-6 py-4 lg:p-8 flex items-center justify-center relative z-10">
           <motion.div 
             initial={{ opacity: 0, x: 20 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ duration: 0.8, delay: 0.2 }}
             className="w-full max-w-md"
           >
-
-            <div className="bg-[#1B1D20]/80 backdrop-blur-xl p-8 rounded-2xl border border-[#354AED]/30 shadow-xl shadow-[#8400FF]/5 relative overflow-hidden">            {/* Efectos decorativos */}
-            <div className="absolute top-0 right-0 w-32 h-32 bg-[#354AED] opacity-10 rounded-full filter blur-3xl"></div>
-            <div className="absolute bottom-0 left-0 w-32 h-32 bg-[#8400FF] opacity-10 rounded-full filter blur-3xl"></div>
-            
-            <h2 className="text-2xl font-bold text-white mb-2">Bienvenido</h2>
-            <p className="text-white/60 mb-6">Ingresa tus credenciales para acceder a tu cuenta.</p>
-            
-            <form onSubmit={handleSubmit} className="space-y-4">
-              <div>
-                <label className="block text-sm text-white/70 mb-2">Correo electrónico o usuario</label>
-                <input
-                  type="text"
-                  value={emailOrUsername}
-                  onChange={(e) => setEmailOrUsername(e.target.value)}
-                  className="w-full bg-[#1B1D20] border border-[#354AED]/40 rounded-lg px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-[#8400FF] transition-all"
-                  placeholder="Correo o usuario"
-                  required
-                />
-              </div>
+            <div className="bg-[#1B1D20]/80 backdrop-blur-xl p-6 lg:p-8 rounded-2xl border border-[#354AED]/30 shadow-xl shadow-[#8400FF]/5 relative overflow-hidden">
+              {/* Efectos decorativos */}
+              <div className="absolute top-0 right-0 w-32 h-32 bg-[#354AED] opacity-10 rounded-full filter blur-3xl"></div>
+              <div className="absolute bottom-0 left-0 w-32 h-32 bg-[#8400FF] opacity-10 rounded-full filter blur-3xl"></div>
               
-              <div>
-                <div className="flex justify-between items-center mb-2">
-                  <label className="text-sm text-white/70">Contraseña</label>
-                  <a href="/Reestablecer" className="text-xs text-[#8400FF] hover:text-[#354AED] transition-colors">¿Olvidaste tu contraseña?</a>
-                </div>
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full bg-[#1B1D20] border border-[#354AED]/40 rounded-lg px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-[#8400FF] transition-all"
-                  placeholder="••••••••"
-                  required
-                />
-              </div>
-              
-              <div className="flex items-center">
-              <input
-                type="checkbox"
-                id="remember"
-                checked={rememberMe}
-                onChange={(e) => setRememberMe(e.target.checked)}
-                className="rounded border-[#354AED]/40 text-[#8400FF] focus:ring-[#8400FF] mr-2"
-              />
-
-                <label htmlFor="remember" className="text-sm text-white/70">Mantener sesión iniciada</label>
-              </div>
+              <h2 className="text-2xl font-bold text-white mb-2">Bienvenido</h2>
+              <p className="text-white/60 mb-6">Ingresa tus credenciales para acceder a tu cuenta.</p>
               
-<ReCAPTCHA
-  sitekey="6LeIJzIrAAAAACcwY43S_9iX_V1biscHsOcDOEvM" // 👈 Usa aquí el site key real de Google
-  onChange={(value) => {
-    console.log("Captcha value:", value);
-    setCaptchaValue(value);
-  }}
-  theme="dark" // Opcional, se verá mejor con tu diseño oscuro
-/>
-
-
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <div>
+                  <label className="block text-sm text-white/70 mb-2">Correo electrónico o usuario</label>
+                  <input
+                    type="text"
+                    value={emailOrUsername}
+                    onChange={(e) => setEmailOrUsername(e.target.value)}
+                    className="w-full bg-[#1B1D20] border border-[#354AED]/40 rounded-lg px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-[#8400FF] transition-all"
+                    placeholder="Correo o usuario"
+                    required
+                  />
+                </div>
+                
+                <div>
+                  <div className="flex justify-between items-center mb-2">
+                    <label className="text-sm text-white/70">Contraseña</label>
+                    <a href="/Reestablecer" className="text-xs text-[#8400FF] hover:text-[#354AED] transition-colors">¿Olvidaste tu contraseña?</a>
+                  </div>
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full bg-[#1B1D20] border border-[#354AED]/40 rounded-lg px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-[#8400FF] transition-all"
+                    placeholder="••••••••"
+                    required
+                  />
+                </div>
+                
+                <div className="flex items-center">
+                  <input
+                    type="checkbox"
+                    id="remember"
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                    className="rounded border-[#354AED]/40 text-[#8400FF] focus:ring-[#8400FF] mr-2"
+                  />
+                  <label htmlFor="remember" className="text-sm text-white/70">Mantener sesión iniciada</label>
+                </div>
+                
+                <div className="transform scale-90 origin-left">
+                  <ReCAPTCHA
+                    sitekey="6LeIJzIrAAAAACcwY43S_9iX_V1biscHsOcDOEvM"
+                    onChange={(value) => {
+                      console.log("Captcha value:", value);
+                      setCaptchaValue(value);
+                    }}
+                    theme="dark"
+                  />
+                </div>
 
-              <button
-                type="submit"
-                className={`w-full ${isLoading ? 'bg-[#354AED]/70' : 'bg-[#354AED]'} text-white py-3 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-[#8400FF]/20 focus:outline-none focus:ring-2 focus:ring-[#8400FF]/50 flex items-center justify-center`}
-                disabled={isLoading}
-              >
-                {isLoading ? (
-                  <>
-                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                    </svg>
-                    Procesando...
-                  </>
-                ) : (
-                  "Iniciar sesión"
-                )}
-              </button>
-              
-              <div className="relative flex items-center my-6">
-                <div className="flex-grow border-t border-white/10"></div>
-                <span className="flex-shrink mx-4 text-white/40 text-sm">o continúa con</span>
-                <div className="flex-grow border-t border-white/10"></div>
-              </div>
-              
-              <GoogleLogin
-          onSuccess={handleGoogleSuccess}
-          onError={() => alert("Error al iniciar sesión con Google")}
-        />
-              
-              <p className="text-center text-white/60 text-sm mt-6">
-                ¿No tienes una cuenta?{" "}
                 <button
-                  type="button"
-                  onClick={() => navigate("/registro")}
-                  className="text-[#8400FF] hover:text-[#354AED] transition-colors font-medium"
+                  type="submit"
+                  className={`w-full ${isLoading ? 'bg-[#354AED]/70' : 'bg-[#354AED]'} text-white py-3 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-[#8400FF]/20 focus:outline-none focus:ring-2 focus:ring-[#8400FF]/50 flex items-center justify-center`}
+                  disabled={isLoading}
                 >
-                  Regístrate
+                  {isLoading ? (
+                    <>
+                      <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                      </svg>
+                      Procesando...
+                    </>
+                  ) : (
+                    "Iniciar sesión"
+                  )}
                 </button>
-              </p>
-            </form>
-          </div>
+                
+                <div className="relative flex items-center my-4 lg:my-6">
+                  <div className="flex-grow border-t border-white/10"></div>
+                  <span className="flex-shrink mx-4 text-white/40 text-sm">o continúa con</span>
+                  <div className="flex-grow border-t border-white/10"></div>
+                </div>
+                
+                <div className="flex justify-center">
+                  <GoogleLogin
+                    onSuccess={handleGoogleSuccess}
+                    onError={() => alert("Error al iniciar sesión con Google")}
+                  />
+                </div>
+                
+                <p className="text-center text-white/60 text-sm mt-6">
+                  ¿No tienes una cuenta?{" "}
+                  <button
+                    type="button"
+                    onClick={() => navigate("/registro")}
+                    className="text-[#8400FF] hover:text-[#354AED] transition-colors font-medium"
+                  >
+                    Regístrate
+                  </button>
+                </p>
+              </form>
+            </div>
+
+            {/* Emblema de ligas */}
+            <div className="flex justify-center space-x-4 mt-6">
+              <div className="w-6 h-6 lg:w-8 lg:h-8 bg-white/10 rounded-full"></div>
+              <div className="w-6 h-6 lg:w-8 lg:h-8 bg-white/10 rounded-full"></div>
+              <div className="w-6 h-6 lg:w-8 lg:h-8 bg-white/10 rounded-full"></div>
+              <div className="w-6 h-6 lg:w-8 lg:h-8 bg-white/10 rounded-full hidden sm:block"></div>
+              <div className="w-6 h-6 lg:w-8 lg:h-8 bg-white/10 rounded-full hidden sm:block"></div>
+            </div>
+          </motion.div>
+        </div>
 
-          {/* Emblema de ligas */}
-          <div className="flex justify-center space-x-4 mt-6">
-            <div className="w-8 h-8 bg-white/10 rounded-full"></div>
-            <div className="w-8 h-8 bg-white/10 rounded-full"></div>
-            <div className="w-8 h-8 bg-white/10 rounded-full"></div>
-            <div className="w-8 h-8 bg-white/10 rounded-full"></div>
-            <div className="w-8 h-8 bg-white/10 rounded-full"></div>
+        {/* Pelota animada */}
+        <motion.div
+          className="absolute z-10 hidden lg:block"
+          initial={{ x: "-10vw", y: "40vh" }}
+          animate={{ 
+            x: ["0vw", "60vw", "80vw", "20vw", "0vw"],
+            y: ["40vh", "10vh", "50vh", "80vh", "40vh"],
+            rotate: [0, 180, 360, 720, 1080]
+          }}
+          transition={{ 
+            duration: 35, 
+            ease: "linear", 
+            repeat: Infinity,
+          }}
+        >
+          <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg">
+            <svg className="w-6 h-6 text-[#1B1D20]" fill="currentColor" viewBox="0 0 24 24">
+              <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,4c1.5,0,2.9,0.35,4.14,0.97l-2.25,2.25 C13.3,7.07,12.66,7,12,7s-1.3,0.07-1.89,0.22L7.86,4.97C9.1,4.35,10.5,4,12,4z M4.97,7.86l2.25,2.25C7.07,10.7,7,11.34,7,12 s0.07,1.3,0.22,1.89l-2.25,2.25C4.35,14.9,4,13.5,4,12C4,10.5,4.35,9.1,4.97,7.86z M12,20c-1.5,0-2.9-0.35-4.14-0.97l2.25-2.25 C10.7,16.93,11.34,17,12,17s1.3-0.07,1.89-0.22l2.25,2.25C14.9,19.65,13.5,20,12,20z M12,15c-1.66,0-3-1.34-3-3s1.34-3,3-3 s3,1.34,3,3S13.66,15,12,15z M19.03,16.14l-2.25-2.25C16.93,13.3,17,12.66,17,12s-0.07-1.3-0.22-1.89l2.25-2.25 C19.65,9.1,20,10.5,20,12C20,13.5,19.65,14.9,19.03,16.14z"/>
+            </svg>
           </div>
         </motion.div>
       </div>
-
-      {/* Pelota animada */}
-      <motion.div
-        className="absolute z-10"
-        initial={{ x: "-10vw", y: "40vh" }}
-        animate={{ 
-          x: ["0vw", "60vw", "80vw", "20vw", "0vw"],
-          y: ["40vh", "10vh", "50vh", "80vh", "40vh"],
-          rotate: [0, 180, 360, 720, 1080]
-        }}
-        transition={{ 
-          duration: 35, 
-          ease: "linear", 
-          repeat: Infinity,
-        }}
-      >
-        <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-lg">
-          <svg className="w-6 h-6 text-[#1B1D20]" fill="currentColor" viewBox="0 0 24 24">
-            <path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,4c1.5,0,2.9,0.35,4.14,0.97l-2.25,2.25 C13.3,7.07,12.66,7,12,7s-1.3,0.07-1.89,0.22L7.86,4.97C9.1,4.35,10.5,4,12,4z M4.97,7.86l2.25,2.25C7.07,10.7,7,11.34,7,12 s0.07,1.3,0.22,1.89l-2.25,2.25C4.35,14.9,4,13.5,4,12C4,10.5,4.35,9.1,4.97,7.86z M12,20c-1.5,0-2.9-0.35-4.14-0.97l2.25-2.25 C10.7,16.93,11.34,17,12,17s1.3-0.07,1.89-0.22l2.25,2.25C14.9,19.65,13.5,20,12,20z M12,15c-1.66,0-3-1.34-3-3s1.34-3,3-3 s3,1.34,3,3S13.66,15,12,15z M19.03,16.14l-2.25-2.25C16.93,13.3,17,12.66,17,12s-0.07-1.3-0.22-1.89l2.25-2.25 C19.65,9.1,20,10.5,20,12C20,13.5,19.65,14.9,19.03,16.14z"/>
-          </svg>
-        </div>
-      </motion.div>
-    </div>
     </GoogleOAuthProvider>
-
   );
 }
 
-export default Login;
+export default Login;
\ No newline at end of file
diff --git a/src/views/Player.tsx b/src/views/Player.tsx
index 17d3b33..6ef99f5 100644
--- a/src/views/Player.tsx
+++ b/src/views/Player.tsx
@@ -7,7 +7,7 @@ import PlayerTrajectory from '../components/common/Player/TeamsPlayer';
 import Statistics from '../components/common/Player/statistics';
 
 const breakpoints = {
-  mobile: '768px',
+  mobile: '1000px',
 };
 
 const Container = styled.div`
diff --git a/src/views/Registro.tsx b/src/views/Registro.tsx
index 65b0c64..86ad7fa 100644
--- a/src/views/Registro.tsx
+++ b/src/views/Registro.tsx
@@ -1,20 +1,20 @@
 import { useState } from "react"; 
 import { motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
+import { toast, Toaster } from "sonner";
+import { MONGO_URI } from "../config/config";
 
 const Registro = () => {
   const navigate = useNavigate();
-  const today = new Date().toISOString().split('T')[0]; // Formato YYYY-MM-DD
+  const today = new Date().toISOString().split('T')[0];
 
   const [step, setStep] = useState(1);
   const [loading, setLoading] = useState(false);
   const [form, setForm] = useState({
-    // Datos de cuenta
     username: "",
     email: "",
     password: "",
     confirmPassword: "",
-    // Datos personales
     firstName: "",
     lastName: "",
     age: 18,
@@ -23,44 +23,68 @@ const Registro = () => {
     city: "",
     birthDate: "",
     cedula: "",
-    roleName: 'Usuario', // Rol predeterminado
+    roleName: 'Usuario',
     registrationDate: today,
-    status: 'active', // Estado predeterminado
-
+    status: 'active',
   });
-  const [error, setError] = useState("");
-  const [apiError, setApiError] = useState("");
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
     setForm({ ...form, [e.target.name]: e.target.value });
-    // Clear errors when user starts typing again
-    setError("");
-    setApiError("");
   };
   
   const nextStep = () => {
-    // Validate first step
     if (!form.username) {
-      setError("El nombre de usuario es obligatorio");
+      toast.error("El nombre de usuario es obligatorio", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        classNames: {
+          title: 'text-white',
+          description: 'text-white/70'
+        }
+      });
       return;
     }
     
     if (!form.email) {
-      setError("El email es obligatorio");
+      toast.error("El email es obligatorio", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
       return;
     }
     
     if (!form.password) {
-      setError("La contraseña es obligatoria");
+      toast.error("La contraseña es obligatoria", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
       return;
     }
     
     if (form.password !== form.confirmPassword) {
-      setError("Las contraseñas no coinciden");
+      toast.error("Las contraseñas no coinciden", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        action: {
+          label: 'Entendido',
+          onClick: () => {}
+        }
+      });
       return;
     }
     
-    setError("");
     setStep(2);
   };
 
@@ -69,15 +93,26 @@ const Registro = () => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
   
-    // Validate if age is greater than or equal to 18
     if (form.age < 18) {
-      setError("Debes ser mayor de 18 años");
+      toast.error("Debes ser mayor de 18 años", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
       return;
     }
   
-    // Validate other required fields (can be split into separate functions)
     if (!form.firstName || !form.lastName || !form.cedula) {
-      setError("Todos los campos son obligatorios");
+      toast.error("Todos los campos son obligatorios", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: 'Por favor completa todos los campos del formulario'
+      });
       return;
     }
   
@@ -85,7 +120,7 @@ const Registro = () => {
       username: form.username,
       email: form.email,
       password: form.password,
-      confirmPassword: form.confirmPassword, // 👈 añade esto
+      confirmPassword: form.confirmPassword,
       firstName: form.firstName,
       lastName: form.lastName,
       age: form.age,
@@ -99,46 +134,86 @@ const Registro = () => {
       status: form.status,
     };
     
-  
     try {
       setLoading(true);
-      const response = await fetch('http://54.234.36.48:3005/api/register', {
+      toast.loading("Registrando tu cuenta...", {
+        id: 'register',
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      }); 
+
+      const response = await fetch(`${MONGO_URI}api/register`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
         },
         body: JSON.stringify(userData)
       });
-  
+
       const data = await response.json();
-  
+
       if (!response.ok) {
         throw new Error(data.message || "Error al registrarse");
       }
       
       if (data.id) {
-        // ✅ Redirige a la página de pago con el userId en la URL
-        navigate(`/pagar?userId=${data.id}`);
+        toast.success("¡Registro exitoso!", {
+          id: 'register',
+          style: {
+            background: '#1B1D20',
+            border: '1px solid #354AED/40',
+            color: 'white'
+          },
+          description: "Redirigiendo a la página de pago...",
+          duration: 2000,
+          onAutoClose: () => navigate(`/pagar?userId=${data.id}`)
+        });
       } else {
         throw new Error("No se recibió el userId desde el servidor");
       }
       
     } catch (error) {
-      if (error instanceof Error) {
-        setApiError(error.message);
-      } else {
-        setApiError("Ocurrió un error inesperado");
-      }
+      toast.error("Error en el registro", {
+        id: 'register',
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: error instanceof Error ? error.message : "Ocurrió un error inesperado",
+        action: {
+          label: 'Reintentar',
+          onClick: () => handleSubmit(e as any)
+        }
+      });
     } finally {
       setLoading(false);
     }
   };
   
-
-  
   return (
-    <div className="min-h-screen flex flex-col md:flex-row bg-[#1B1D20] relative overflow-hidden">
-      {/* Efectos de fondo */}
+    <div className="min-h-screen flex flex-col md:flex-row bg-[#1B1D20] relative overflow-hidden">      {/* Efectos de fondo */}
+            <Toaster 
+        position="top-center"
+        richColors
+        closeButton
+        toastOptions={{
+          style: { 
+            background: '#1B1D20', 
+            border: '1px solid #354AED/40',
+            color: 'white'
+          },
+          classNames: {
+            title: 'text-white',
+            description: 'text-white/70',
+            actionButton: 'bg-[#354AED] hover:bg-[#354AED]/90',
+            closeButton: 'text-white/50 hover:text-white',
+          },
+        }}
+      />
       <div className="absolute inset-0 overflow-hidden">
         {/* Campo de fútbol estilizado */}
         <div className="absolute inset-0 bg-[#1B1D20]">
@@ -247,12 +322,7 @@ const Registro = () => {
                 </div>
               ))}
             </div>
-            
-            {apiError && (
-              <div className="bg-red-500/20 border border-red-500/50 text-red-100 p-3 rounded-lg mb-4">
-                {apiError}
-              </div>
-            )}
+
             
             <form onSubmit={handleSubmit} className="space-y-4">
               {step === 1 ? (
@@ -424,7 +494,6 @@ const Registro = () => {
                 </>
               )}
               
-              {error && <p className="text-red-500 text-sm">{error}</p>}
               
               <div className="flex space-x-4 pt-4">
                 {step === 2 && (
diff --git a/src/views/ResetPassword.tsx b/src/views/ResetPassword.tsx
index c7e0c77..d09330c 100644
--- a/src/views/ResetPassword.tsx
+++ b/src/views/ResetPassword.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { motion } from "framer-motion";
+import { toast, Toaster } from "sonner";
+import { MONGO_URI } from "../config/config";
 
 const ResetPassword: React.FC = () => {
   const navigate = useNavigate();
@@ -8,117 +10,225 @@ const ResetPassword: React.FC = () => {
   const [verificationCode, setVerificationCode] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
-  const [error, setError] = useState("");
-  const [step, setStep] = useState(1); // 1: Email, 2: Verification Code, 3: New Password
+  const [step, setStep] = useState(1);
   const [isCodeSent, setIsCodeSent] = useState(false);
   const [cedula, setCedula] = useState("");
 
+  const handleEmailSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-const handleEmailSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-  e.preventDefault();
+    if (!email.includes("@") || !email.includes(".")) {
+      toast.error("Por favor ingresa un correo electrónico válido", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
+      return;
+    }
 
-  if (!email.includes("@") || !email.includes(".")) {
-    setError("Por favor ingresa un correo electrónico válido.");
-    return;
-  }
+    try {
+      const toastId = toast.loading("Enviando código de verificación...", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
 
-  try {
-    const res = await fetch("http://54.234.36.48:3005/api/forgot-password", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email, cedula }),
-    });
+      const res = await fetch(`${MONGO_URI}/api/forgot-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, cedula }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.detail || "Error al enviar el código");
+      }
 
-    if (!res.ok) {
-      const data = await res.json();
-      throw new Error(data.detail || "Error al enviar el código");
+      toast.success("Código enviado con éxito", {
+        id: toastId,
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: "Revisa tu correo electrónico"
+      });
+
+      setIsCodeSent(true);
+      setTimeout(() => setStep(2), 1000);
+    } catch (err: any) {
+      toast.error("Error al enviar el código", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: err.message,
+        action: {
+          label: 'Reintentar',
+          onClick: () => handleEmailSubmit(e)
+        }
+      });
     }
+  };
 
-    setError("");
-    setIsCodeSent(true);
-    console.log("Código enviado a:", email);
-    setTimeout(() => setStep(2), 1000);
-  } catch (err: any) {
-    setError(err.message);
-  }
-};
-
-
-const handleCodeSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-  e.preventDefault();
-
-  if (verificationCode.length !== 6 || !/^\d+$/.test(verificationCode)) {
-    setError("El código debe contener 6 dígitos numéricos.");
-    return;
-  }
-
-  try {
-    const res = await fetch("http://54.234.36.48:3005/api/verify-reset-token", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email, resetToken: verificationCode }),
-    });
+  const handleCodeSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-    if (!res.ok) {
-      const data = await res.json();
-      throw new Error(data.detail || "Código inválido");
+    if (verificationCode.length !== 6 || !/^\d+$/.test(verificationCode)) {
+      toast.error("Código inválido", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: "El código debe contener 6 dígitos numéricos"
+      });
+      return;
     }
 
-    setError("");
-    console.log("Código verificado:", verificationCode);
-    setStep(3);
-  } catch (err: any) {
-    setError(err.message);
-  }
-};
-
-
-const handlePasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-  e.preventDefault();
-
-  if (password.length < 6) {
-    setError("La contraseña debe tener al menos 6 caracteres.");
-    return;
-  }
-
-  if (password !== confirmPassword) {
-    setError("Las contraseñas no coinciden.");
-    return;
-  }
-
-  try {
-    const res = await fetch("http://54.234.36.48:3005/api/reset-password", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        email,
-        resetToken: verificationCode,
-        newPassword: password,
-      }),
-    });
+    try {
+      const toastId = toast.loading("Verificando código...", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
+
+      const res = await fetch(`${MONGO_URI}/api/verify-reset-token`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, resetToken: verificationCode }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.detail || "Código inválido");
+      }
+
+      toast.success("Código verificado", {
+        id: toastId,
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
+
+      setStep(3);
+    } catch (err: any) {
+      toast.error("Error al verificar el código", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: err.message,
+        action: {
+          label: 'Reintentar',
+          onClick: () => handleCodeSubmit(e)
+        }
+      });
+    }
+  };
+
+  const handlePasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (password.length < 6) {
+      toast.error("Contraseña muy corta", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: "La contraseña debe tener al menos 6 caracteres"
+      });
+      return;
+    }
 
-    if (!res.ok) {
-      const data = await res.json();
-      throw new Error(data.detail || "Error al cambiar la contraseña");
+    if (password !== confirmPassword) {
+      toast.error("Las contraseñas no coinciden", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
+      return;
     }
 
-    setError("");
-    console.log("Contraseña cambiada:", password);
-    setStep(4);
-    setTimeout(() => navigate("/iniciar"), 2000);
-  } catch (err: any) {
-    setError(err.message);
-  }
-};
+    try {
+      const toastId = toast.loading("Actualizando contraseña...", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        }
+      });
 
+      const res = await fetch(`${MONGO_URI}/api/reset-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email,
+          resetToken: verificationCode,
+          newPassword: password,
+        }),
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.detail || "Error al cambiar la contraseña");
+      }
+
+      toast.success("Contraseña actualizada", {
+        id: toastId,
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: "Redirigiendo al inicio de sesión..."
+      });
+
+      setStep(4);
+      setTimeout(() => navigate("/iniciar"), 2000);
+    } catch (err: any) {
+      toast.error("Error al actualizar la contraseña", {
+        style: {
+          background: '#1B1D20',
+          border: '1px solid #354AED/40',
+          color: 'white'
+        },
+        description: err.message,
+        action: {
+          label: 'Reintentar',
+          onClick: () => handlePasswordSubmit(e)
+        }
+      });
+    }
+  };
 
   const resendCode = () => {
-    console.log("Reenviando código a:", email);
+    toast.info("Reenviando código de verificación...", {
+      style: {
+        background: '#1B1D20',
+        border: '1px solid #354AED/40',
+        color: 'white'
+      }
+    });
+    
     // Aquí llamarías a tu API para reenviar el código
     setIsCodeSent(true);
     setTimeout(() => {
       setIsCodeSent(false);
-    }, 30000); // Deshabilitar reenvío por 30 segundos
+    }, 30000);
   };
 
   const renderStepTitle = () => {
@@ -201,12 +311,6 @@ const handlePasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
             </div>
 
             
-            {error && (
-              <div className="bg-red-500/20 border border-red-500/40 text-white/90 px-4 py-2 rounded-lg text-sm">
-                {error}
-              </div>
-            )}
-            
             <button
               type="submit"
               className="w-full bg-[#354AED] text-white py-3 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-[#8400FF]/20 focus:outline-none focus:ring-2 focus:ring-[#8400FF]/50"
@@ -242,12 +346,7 @@ const handlePasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
                 Enviado a {email.substring(0, 3)}...{email.substring(email.indexOf('@'))}
               </p>
             </div>
-            
-            {error && (
-              <div className="bg-red-500/20 border border-red-500/40 text-white/90 px-4 py-2 rounded-lg text-sm">
-                {error}
-              </div>
-            )}
+
             
             <button
               type="submit"
@@ -301,11 +400,6 @@ const handlePasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
               />
             </div>
             
-            {error && (
-              <div className="bg-red-500/20 border border-red-500/40 text-white/90 px-4 py-2 rounded-lg text-sm">
-                {error}
-              </div>
-            )}
             
             <button
               type="submit"
@@ -336,6 +430,25 @@ const handlePasswordSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 
   return (
     <div className="min-h-screen flex flex-col md:flex-row bg-[#1B1D20] relative overflow-hidden">
+      {/* Configuración de Sonner */}
+      <Toaster 
+        position="top-center"
+        richColors
+        closeButton
+        toastOptions={{
+          style: { 
+            background: '#1B1D20', 
+            border: '1px solid #354AED/40',
+            color: 'white'
+          },
+          classNames: {
+            title: 'text-white',
+            description: 'text-white/70',
+            actionButton: 'bg-[#354AED] hover:bg-[#354AED]/90',
+            closeButton: 'text-white/50 hover:text-white',
+          },
+        }}
+      />
       {/* Efectos de fondo */}
       <div className="absolute inset-0 overflow-hidden">
         {/* Campo de fútbol estilizado */}
diff --git a/src/views/Team.tsx b/src/views/Team.tsx
index fa26c63..3572906 100644
--- a/src/views/Team.tsx
+++ b/src/views/Team.tsx
@@ -9,7 +9,7 @@ import { useParams } from 'react-router-dom';
 import NoticiasRelevo from '../components/common/Cards/TOPS/Noticias';
 
 const breakpoints = {
-  mobile: '768px',
+  mobile: '1000px',
 };
 
 const Container = styled.div`
diff --git a/src/views/Teams.tsx b/src/views/Teams.tsx
index 76aad4b..1a44103 100644
--- a/src/views/Teams.tsx
+++ b/src/views/Teams.tsx
@@ -11,7 +11,7 @@ import TopScorersCard from '../components/common/Cards/GoalsYear/Goals';
 
 // Breakpoints for media queries
 const breakpoints = {
-  mobile: '768px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
+  mobile: '1000px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
 };
 
 const Container = styled.div`
diff --git a/src/views/home.tsx b/src/views/home.tsx
index d668542..72d0bac 100644
--- a/src/views/home.tsx
+++ b/src/views/home.tsx
@@ -12,7 +12,7 @@
 
   // Breakpoints for media queries
   const breakpoints = {
-    mobile: '768px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
+    mobile: '1000px', // Standard md: breakpoint in Tailwind, matching the navbar's responsiveness
   };
 
   const Container = styled.div`


Reviews:
user: login: sourcery-ai[bot]
body: Hey @JHAYCO9 - I've reviewed your changes - here's some feedback:

- I noticed you’re repeating the same Sonner toast styles in multiple components—consider centralizing your toast configuration (e.g. via a custom provider or hook) to DRY up those declarations.
- In Registro.tsx the fetch uses `${MONGO_URI}api/register` (missing a slash) which will produce a malformed URL—add the missing '/' before `api`.
- You’ve hard-coded the ‘1000px’ breakpoint in many view files—extract that into a shared constant or theme value to keep your responsive breakpoints consistent and easier to update.

<details>
<summary>Here's what I looked at during the review</summary>

- 🟡 **General issues**: 4 issues found
- 🟢 **Security**: all looks good
- 🟢 **Testing**: all looks good
- 🟢 **Documentation**: all looks good
</details>

***

<details>
<summary>Sourcery is free for open source - if you like our reviews please consider sharing them ✨</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20got%20an%20instant%20code%20review%20from%20%40SourceryAI%2C%20and%20it%20was%20brilliant%21%20It%27s%20free%20for%20open%20source%20and%20has%20a%20free%20trial%20for%20private%20code.%20Check%20it%20out%20https%3A//sourcery.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https://sourcery.ai)
- [Facebook](https://www.facebook.com/sharer/sharer.php?u=https://sourcery.ai)

</details>

<sub>
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
</sub>
state: COMMENTED
author_association: NONE
submitted_at: 2025-05-13T03:15:25Z

Review comments:
diff_hunk: @@ -1,3 +1,3 @@
 // config.ts
-export const MONGO_URI = "https://iqscorebackend2025pi.loca.lt";
-export const MYSQL_URI = "http://3.92.147.63:3001";
\ No newline at end of file
+export const MONGO_URI = "http://35.170.118.153:3005";
path: src/config/config.tsx
user: login: sourcery-ai[bot]
body: **issue (bug_risk):** MONGO_URI missing trailing slash may lead to malformed URLs

Without a trailing slash, `${MONGO_URI}api/...` yields malformed routes. Either add `/` to `MONGO_URI` or include it in your fetch URLs.
created_at: 2025-05-13T03:15:25Z
author_association: NONE
diff_hunk: @@ -69,7 +70,7 @@ const Login: React.FC = () => {
     }
   };
 
-  const GOOGLE_CLIENT_ID = "656521501617-pr273c84j029tuhau1nveu3tu08gsn54.apps.googleusercontent.com";
+  const GOOGLE_CLIENT_ID = "656521501617-pr273c84j029tuhau1nveu3tu08gsn54.apps.googleusercontent.com ";
path: src/views/Login.tsx
user: login: sourcery-ai[bot]
body: **issue (bug_risk):** Trailing whitespace in GOOGLE_CLIENT_ID constant

Remove the trailing space; it may cause authorization failures.
created_at: 2025-05-13T03:15:25Z
author_association: NONE
diff_hunk: @@ -12,12 +28,12 @@ const ChatIA: React.FC = () => {
       style={{
         bottom: "5%",
         right: isOpen ? 0 : "0",
-        transition: "right 0.3s",
+        transition: "all 0.3s ease",
path: src/components/common/Buttons/ChatIA.tsx
user: login: sourcery-ai[bot]
body: **suggestion:** Ternary for `right` always resolves to zero

Since both branches produce the same zero value, the panel won’t slide. Use transform or distinct offset values instead to enable animation.

```suggestion
        right: 0,
        transform: isOpen ? "translateX(0)" : "translateX(100%)",
        transition: "transform 0.3s ease",
```
created_at: 2025-05-13T03:15:25Z
author_association: NONE
diff_hunk: @@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="es">
   <head>
+    <link rel="icon" type="image/png" href="./public/images/LogoIQ.png" />
path: index.html
user: login: sourcery-ai[bot]
body: **issue (bug_risk):** Favicon path likely incorrect

Use `/images/LogoIQ.png` as the favicon href since `index.html` is served from the public root.
created_at: 2025-05-13T03:15:25Z
author_association: NONE

PR comments:
user: login: vercel[bot]
created_at: 2025-05-13T03:08:07Z
body: [vc]: #ZyCdW4bW8epI2C0oKwt6F0hDqzB4oFqfvMX7BLGqC/s=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJpcXNjb3JlLWZyb250Iiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2FsZWpvcDI3cy1wcm9qZWN0cy9pcXNjb3JlLWZyb250LzhHOUN1dERMc1p0NUEzajVEUHpBQ1NiNG9jYmMiLCJwcmV2aWV3VXJsIjoiaXFzY29yZS1mcm9udC1naXQtanVhbmRhdmlkLWFsZWpvcDI3cy1wcm9qZWN0cy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkciLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiaXFzY29yZS1mcm9udC1naXQtanVhbmRhdmlkLWFsZWpvcDI3cy1wcm9qZWN0cy52ZXJjZWwuYXBwIn19LHsibmFtZSI6Imlxc2NvcmUtZnJvbnQtNWtkcCIsInJvb3REaXJlY3RvcnkiOm51bGwsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9hbGVqb3AyN3MtcHJvamVjdHMvaXFzY29yZS1mcm9udC01a2RwLzhMRktLZDRVQlZCd0NVVmtjN29oTDRLUDNlaFYiLCJwcmV2aWV3VXJsIjoiaXFzY29yZS1mcm9udC01a2RwLWdpdC1qdWFuZGF2aWQtYWxlam9wMjdzLXByb2plY3RzLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJpcXNjb3JlLWZyb250LTVrZHAtZ2l0LWp1YW5kYXZpZC1hbGVqb3AyN3MtcHJvamVjdHMudmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **iqscore-front** | 🔄 Building ([Inspect](https://vercel.com/alejop27s-projects/iqscore-front/8G9CutDLsZt5A3j5DPzACSb4ocbc)) | [Visit Preview](https://iqscore-front-git-juandavid-alejop27s-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/iqscore-front-git-juandavid-alejop27s-projects.vercel.app?via=pr-comment-feedback-link) | May 13, 2025 3:08am |
| **iqscore-front-5kdp** | 🔄 Building ([Inspect](https://vercel.com/alejop27s-projects/iqscore-front-5kdp/8LFKKd4UBVBwCUVkc7ohL4KP3ehV)) | [Visit Preview](https://iqscore-front-5kdp-git-juandavid-alejop27s-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/iqscore-front-5kdp-git-juandavid-alejop27s-projects.vercel.app?via=pr-comment-feedback-link) | May 13, 2025 3:08am |



author_association: NONE
user: login: sourcery-ai[bot]
created_at: 2025-05-13T03:08:09Z
body: <!-- Generated by sourcery-ai[bot]: start review_guide -->

## Reviewer's Guide

This PR centralizes API configuration, replaces hardcoded endpoints with config constants, and refactors authentication flows to use Sonner toast notifications, while enhancing responsiveness, reorganizing several UI components (Login, ResetPassword, Registro, Navbar, Game events, goals card, chat button) for better modularity and user feedback.

### File-Level Changes

| Change | Details | Files |
| ------ | ------- | ----- |
| Centralize API URIs and replace hardcoded endpoints with config values | <ul><li>Added MONGO_URI and MYSQL_URI exports in config</li><li>Replaced literal URLs in fetch calls across Login, ResetPassword, Registro, Navbar</li><li>Removed direct IP-based endpoints and switched to template strings</li></ul> | `src/config/config.tsx`<br/>`src/views/Login.tsx`<br/>`src/views/ResetPassword.tsx`<br/>`src/views/Registro.tsx`<br/>`src/components/common/Navbar/Navbar.tsx` |
| Integrate Sonner toast notifications into auth flows | <ul><li>Imported toast and Toaster in Login, ResetPassword, Registro</li><li>Wrapped components with <Toaster> and configured toastOptions</li><li>Replaced error state and inline messages with toast.error/toast.success/toast.loading calls</li></ul> | `src/views/Login.tsx`<br/>`src/views/ResetPassword.tsx`<br/>`src/views/Registro.tsx` |
| Improve responsive layouts and breakpoint logic | <ul><li>Updated tailwind breakpoints from `md` to `lg` and CSS media values from '768px' to '1000px'</li><li>Used conditional rendering (`hidden lg:flex`, `lg:hidden`) in Login panels</li><li>Added windowWidth state and isMobile flag in Navbar to toggle desktop vs mobile views</li></ul> | `src/views/Login.tsx`<br/>`src/components/common/Navbar/Navbar.tsx`<br/>`multiple src/views/*.tsx` |
| Refactor match events component for event-driven display | <ul><li>Renamed BettingOdds to MatchEvents and updated imports</li><li>Created Props interface with optional events and default value</li><li>Sorted events, mapped types to icons, and handled empty state</li></ul> | `src/components/common/Game/Odds.tsx`<br/>`src/views/Game.tsx` |
| Enhance TopScorers card with tabs and new data shape | <ul><li>Updated GoleadoresData type to separate annual/monthly arrays</li><li>Added activeTab state and tab buttons for Anual, Enero, Febrero, Marzo</li><li>Extracted renderScorersTable helper for reusable table rendering</li></ul> | `src/components/common/Cards/GoalsYear/Goals.tsx` |
| Refactor ChatIA button and chat modal for consistency | <ul><li>Extracted ButtonRedirect component with typed props</li><li>Updated chat container styles, header, action buttons and footer</li><li>Replaced inline styles with Tailwind utility classes and transitions</li></ul> | `src/components/common/Buttons/ChatIA.tsx` |

---

<details>
<summary>Tips and commands</summary>

#### Interacting with Sourcery

- **Trigger a new review:** Comment `@sourcery-ai review` on the pull request.
- **Continue discussions:** Reply directly to Sourcery's review comments.
- **Generate a GitHub issue from a review comment:** Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with `@sourcery-ai issue` to create an issue from it.
- **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull
  request title to generate a title at any time. You can also comment
  `@sourcery-ai title` on the pull request to (re-)generate the title at any time.
- **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment `@sourcery-ai summary` on the pull request to
  (re-)generate the summary at any time.
- **Generate reviewer's guide:** Comment `@sourcery-ai guide` on the pull
  request to (re-)generate the reviewer's guide at any time.
- **Resolve all Sourcery comments:** Comment `@sourcery-ai resolve` on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
- **Dismiss all Sourcery reviews:** Comment `@sourcery-ai dismiss` on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  `@sourcery-ai review` to trigger a new review!

#### Customizing Your Experience

Access your [dashboard](https://app.sourcery.ai) to:
- Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
- Change the review language.
- Add, remove or edit custom review instructions.
- Adjust other review settings.

#### Getting Help

- [Contact our support team](mailto:support@sourcery.ai) for questions or feedback.
- Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information.
- Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

</details>

<!-- Generated by sourcery-ai[bot]: end review_guide -->
author_association: NONE