mejoras de UI/UX v2

client/src/App.vue

@@ -19,6 +19,6 @@ body {
 }
 
 #app {
-  min-height: 100vh;
+  min-height: calc(var(--app-vh, 1vh) * 100);
 }
-</style>
+</style>

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);

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; }

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;

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 {
+.qa-btn:focus, .qa-btn:focus-visible { outline: none; }
-  outline: 2px solid rgba(102,126,234,0.6);
-  outline-offset: 2px;
-}
 
 .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));