From 1c03149bbd04af54d5adaee3ab9f9a6392787a0b Mon Sep 17 00:00:00 2001
From: Resistencia Dev <dev@resistencia.local>
Date: Mon, 22 Dec 2025 17:08:07 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Mejorar=20dise=C3=B1o=20del=20bot=C3=B3n?=
 =?UTF-8?q?=20de=20logout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cambiar icono a power button (Heroicons)
- Mover botón debajo del nombre del agente en el lobby
- Hacer botón más compacto (circular)
- Mejorar layout del header del lobby
---
 client/src/app/page.tsx                | 12 +++++-----
 client/src/components/LogoutButton.tsx | 31 +++++++++++++-------------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index a5f073e..b7130fe 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -220,16 +220,16 @@ export default function Home() {
                     </h1>
                 </div>
                 {view === 'lobby' && (
-                    <div className="flex items-center gap-4 bg-black/50 px-4 py-2 rounded border border-white/10">
-                        <span className="text-sm text-gray-400">AGENTE:</span>
-                        <span className="font-bold text-yellow-500">{fullPlayerName}</span>
+                    <div className="flex items-center gap-3 bg-black/50 px-4 py-2 rounded border border-white/10">
+                        <div className="flex flex-col">
+                            <span className="text-xs text-gray-400">AGENTE:</span>
+                            <span className="font-bold text-yellow-500">{fullPlayerName}</span>
+                        </div>
+                        <LogoutButton onClick={handleLogout} />
                     </div>
                 )}
             </div>
 
-            {/* Botón de Logout - solo en lobby */}
-            {view === 'lobby' && <LogoutButton onClick={handleLogout} />}
-
             <div className="z-10 w-full flex-1 flex flex-col items-center justify-center p-4">
                 <AnimatePresence mode="wait">
 
diff --git a/client/src/components/LogoutButton.tsx b/client/src/components/LogoutButton.tsx
index 85d62a3..b11a32a 100644
--- a/client/src/components/LogoutButton.tsx
+++ b/client/src/components/LogoutButton.tsx
@@ -10,24 +10,23 @@ export default function LogoutButton({ onClick }: LogoutButtonProps) {
             onClick={onClick}
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
-            className="fixed top-4 left-4 z-50 bg-red-900/80 hover:bg-red-800 text-white p-3 rounded-lg border border-red-700/50 backdrop-blur-sm shadow-lg transition-all group"
+            className="fixed top-4 left-4 z-50 bg-red-900/80 hover:bg-red-800 text-white p-2 rounded-full border border-red-700/50 backdrop-blur-sm shadow-lg transition-all"
             title="Salir del juego"
         >
-            <div className="flex items-center gap-2">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    className="h-5 w-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                >
-                    <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 00-1 1v4a1 1 0 001 1h4a1 1 0 001-1V8a1 1 0 00-1-1H8z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-                <span className="text-xs font-bold uppercase tracking-wider hidden md:inline">Salir</span>
-            </div>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2.5}
+                stroke="currentColor"
+                className="w-5 h-5"
+            >
+                <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M5.636 5.636a9 9 0 1012.728 0M12 3v9"
+                />
+            </svg>
         </motion.button>
     );
 }