From ea118fbbed4a86518cd4241938757832ae2a2a02 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 16 Aug 2025 02:49:21 -0600
Subject: [PATCH] =?UTF-8?q?mejora=20posici=C3=B3n=20y=20texto=20del=20chec?=
 =?UTF-8?q?kbox=20modo=20QR?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Mueve checkbox a la parte inferior junto a otros botones
- Cambia texto para ser más explícito sobre función QR
- "Modo QR activo - Click para ver código" cuando activado
- "Activar modo QR para acceso rápido" cuando desactivado
- Mejora estilos con más padding y sombras sutiles
- Ajusta responsive design para nueva posición
---
 client/src/views/UuidSelector.vue | 44 ++++++++++++++++---------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/client/src/views/UuidSelector.vue b/client/src/views/UuidSelector.vue
index 30b7715..cf4d3b6 100644
--- a/client/src/views/UuidSelector.vue
+++ b/client/src/views/UuidSelector.vue
@@ -17,16 +17,6 @@
         <span class="search-icon">🔍</span>
       </div>
 
-      <!-- QR Mode Toggle -->
-      <div class="qr-mode-container">
-        <label class="qr-mode-label">
-          <input type="checkbox" v-model="qrMode" class="qr-mode-checkbox" />
-          <span class="qr-mode-text">
-            {{ qrMode ? '📱 Mostrar QR al hacer click' : '🎮 Ir al juego al hacer click' }}
-          </span>
-        </label>
-      </div>
-
       <!-- Loading State -->
       <div v-if="loading" class="loading">
         <div class="spinner"></div>
@@ -59,6 +49,16 @@
             🎛️ Dashboard Admin
           </button>
         </div>
+        
+        <!-- QR Mode Toggle -->
+        <div class="qr-mode-container">
+          <label class="qr-mode-label">
+            <input type="checkbox" v-model="qrMode" class="qr-mode-checkbox" />
+            <span class="qr-mode-text">
+              {{ qrMode ? '📱 Modo QR activo - Click para ver código' : '🔓 Activar modo QR para acceso rápido' }}
+            </span>
+          </label>
+        </div>
       </div>
       
       <!-- Context Menu -->
@@ -603,7 +603,7 @@ async function copyToClipboard() {
 
 /* QR Mode Toggle Styles */
 .qr-mode-container {
-  margin: 15px 0 25px 0;
+  margin: 20px 0 0 0;
   display: flex;
   justify-content: center;
 }
@@ -611,20 +611,22 @@ async function copyToClipboard() {
 .qr-mode-label {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   cursor: pointer;
-  padding: 12px 20px;
-  background: rgba(102, 126, 234, 0.1);
-  border-radius: 25px;
+  padding: 15px 25px;
+  background: rgba(102, 126, 234, 0.08);
+  border-radius: 30px;
   border: 2px solid transparent;
   transition: all 0.3s ease;
   user-select: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .qr-mode-label:hover {
-  background: rgba(102, 126, 234, 0.15);
-  border-color: rgba(102, 126, 234, 0.3);
-  transform: translateY(-1px);
+  background: rgba(102, 126, 234, 0.12);
+  border-color: rgba(102, 126, 234, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
 }
 
 .qr-mode-checkbox {
@@ -1007,16 +1009,16 @@ async function copyToClipboard() {
   }
   
   .qr-mode-container {
-    margin: 10px 0 20px 0;
+    margin: 15px 0 0 0;
   }
   
   .qr-mode-label {
-    padding: 10px 16px;
+    padding: 12px 20px;
     font-size: 14px;
   }
   
   .qr-mode-text {
-    font-size: 14px;
+    font-size: 13px;
   }
 
   .uuids-grid {