From ea0d08c32188c36798007278e67c0d6fee93b65f Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 28 Aug 2025 14:08:03 -0600
Subject: [PATCH] mejoras de UI/UX v2

---
 client/src/App.vue                |  4 ++--
 client/src/main.ts                | 11 +++++++++++
 client/src/views/DemoGame.vue     |  2 +-
 client/src/views/Lobby.vue        |  2 +-
 client/src/views/UuidSelector.vue | 24 ++++++++++++++----------
 5 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index b07292f..55e51a0 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -19,6 +19,6 @@ body {
 }
 
 #app {
-  min-height: 100vh;
+  min-height: calc(var(--app-vh, 1vh) * 100);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/main.ts b/client/src/main.ts
index 2960887..441ebd1 100644
--- a/client/src/main.ts
+++ b/client/src/main.ts
@@ -16,3 +16,14 @@ if ('serviceWorker' in navigator && import.meta.env.PROD) {
     });
   });
 }
+
+// Ajuste de altura dinámica para móviles (evita espacios en blanco por 100vh)
+function setAppVhVar() {
+  try {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--app-vh', `${vh}px`);
+  } catch {}
+}
+setAppVhVar();
+window.addEventListener('resize', setAppVhVar);
+window.addEventListener('orientationchange', setAppVhVar);
diff --git a/client/src/views/DemoGame.vue b/client/src/views/DemoGame.vue
index b892cbe..8be6eb7 100644
--- a/client/src/views/DemoGame.vue
+++ b/client/src/views/DemoGame.vue
@@ -451,7 +451,7 @@ async function leaveGame() {
 </script>
 
 <style scoped>
-.game { min-height: 100vh; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display:flex; align-items:center; justify-content:center; padding:20px; }
+.game { min-height: calc(var(--app-vh, 1vh) * 100); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display:flex; align-items:center; justify-content:center; padding:20px; }
 .game-container { background: white; border-radius: 20px; padding: 24px; max-width: 1000px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
 .game-header { display:flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
 .game-header h1 { margin: 0; font-size: 20px; }
diff --git a/client/src/views/Lobby.vue b/client/src/views/Lobby.vue
index 127af15..c87b9b0 100644
--- a/client/src/views/Lobby.vue
+++ b/client/src/views/Lobby.vue
@@ -467,7 +467,7 @@ function startEditName() {
 
 <style scoped>
 .lobby {
-  min-height: 100vh;
+  min-height: calc(var(--app-vh, 1vh) * 100);
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   padding: 20px;
   overflow-y: auto;
diff --git a/client/src/views/UuidSelector.vue b/client/src/views/UuidSelector.vue
index 0daed3f..89aa148 100644
--- a/client/src/views/UuidSelector.vue
+++ b/client/src/views/UuidSelector.vue
@@ -29,13 +29,13 @@
       <!-- Acciones rápidas (arriba, estilo más sutil) -->
       <div class="quick-actions top">
         <button @click="selectRandom" class="qa-btn">
-          Seleccionar Aleatorio
+          🎲 Seleccionar Aleatorio
         </button>
         <button @click="goToDashboard" class="qa-btn">
-          Panel de Adminstración
+          🎛️ Panel de Adminstración
         </button>
         <button @click="goToLeaderboard" class="qa-btn">
-          Estadísticas
+          📈 Estadísticas
         </button>
       </div>
 
@@ -769,7 +769,7 @@ async function copyToClipboard() {
 
 <style scoped>
 .uuid-selector-container {
-  min-height: 100vh;
+  min-height: calc(var(--app-vh, 1vh) * 100);
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
   align-items: center;
@@ -871,6 +871,8 @@ async function copyToClipboard() {
   transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
   box-shadow: 0 6px 18px rgba(102,126,234,0.12);
   user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
 }
 
 .qa-btn:hover {
@@ -883,10 +885,7 @@ async function copyToClipboard() {
   box-shadow: 0 2px 8px rgba(0,0,0,0.12);
 }
 
-.qa-btn:focus-visible {
-  outline: 2px solid rgba(102,126,234,0.6);
-  outline-offset: 2px;
-}
+.qa-btn:focus, .qa-btn:focus-visible { outline: none; }
 
 .search-input {
   width: 100%;
@@ -914,14 +913,19 @@ async function copyToClipboard() {
 
 /* QR Mode Toggle Styles */
 .qr-mode-container { margin: 16px 0 0 0; display: flex; justify-content: center; }
-.qr-mode-label { display:flex; align-items:center; gap: 10px; cursor: pointer; user-select:none; }
+.qr-mode-label { display:flex; align-items:center; gap: 10px; cursor: pointer; user-select:none; -webkit-tap-highlight-color: transparent; outline: none; }
 .qr-mode-checkbox { position:absolute; opacity:0; width:0; height:0; }
-.qr-toggle { width: 48px; height: 26px; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.35)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,0.6); border-radius: 999px; position: relative; transition: background 0.25s ease, border-color 0.25s ease; box-shadow: inset 0 2px 6px rgba(0,0,0,0.08); }
+.qr-toggle { width: 48px; height: 26px; background: linear-gradient(180deg, rgba(246,247,250,0.95), rgba(226,229,235,0.85)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(0,0,0,0.18); border-radius: 999px; position: relative; transition: background 0.25s ease, border-color 0.25s ease; box-shadow: inset 0 2px 6px rgba(0,0,0,0.14); }
+.qr-toggle:hover { border-color: rgba(0,0,0,0.24); }
 .qr-toggle::after { content: ''; width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 3px 8px rgba(0,0,0,0.18); }
 .qr-mode-checkbox:checked + .qr-toggle { background: linear-gradient(135deg, rgba(102,126,234,0.6) 0%, rgba(118,75,162,0.6) 100%); border-color: rgba(255,255,255,0.7); }
 .qr-mode-checkbox:checked + .qr-toggle::after { transform: translateX(22px); }
 .qr-mode-text { font-size: 14px; font-weight: 600; color: #374151; }
 
+/* Remove distracting tap highlight / outlines on touch for cards */
+.uuid-card { -webkit-tap-highlight-color: transparent; outline: none; }
+.uuid-card:focus, .uuid-card:focus-visible { outline: none; }
+
 .uuids-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));