pix: mudança na exibição

Signed-off-by: Rodrigo Bertoldo de Sousa Martins <rodrigo.sousa.577@gmail.com>

index.html

@@ -380,9 +380,29 @@
             transform: translate3d(0, 0, 0) scale(0.98);
         }
 
+        .pix-instruction {
+            display: none;
+            margin-top: 15px;
+            text-align: center;
+            color: #32BCAD;
+            font-size: 0.95em;
+            font-weight: 600;
+            opacity: 0;
+            transform: translate3d(0, -5px, 0);
+        }
+
+        .pix-instruction.active {
+            display: block;
+            animation: fadeInUp 0.3s ease forwards 0.2s;
+        }
+
+        @keyframes fadeInUp {
+            to { opacity: 1; transform: translate3d(0, 0, 0); }
+        }
+
         .pix-code-area {
             display: none;
-            margin-top: 20px;
+            margin-top: 8px;
             padding: 15px;
             background: #f5f5f5;
             border-radius: 10px;
@@ -399,22 +419,17 @@
             contain: layout style paint;
         }
 
-        .pix-code-area::before {
-            content: '👆 Clique para copiar';
+        .pix-code-area::after {
+            content: '📋';
             position: absolute;
-            top: -8px;
+            top: 10px;
             right: 10px;
-            background: #32BCAD;
-            color: white;
-            padding: 4px 10px;
-            border-radius: 12px;
-            font-size: 0.75em;
-            font-family: 'Segoe UI', sans-serif;
-            opacity: 0;
-            transition: opacity 0.3s ease;
+            font-size: 1.3em;
+            opacity: 0.6;
+            transition: opacity 0.2s ease;
         }
 
-        .pix-code-area.active::before {
+        .pix-code-area:hover::after {
             opacity: 1;
         }
 
@@ -637,6 +652,7 @@
                 <button class="modal-button cancel" onclick="closePixModal()">Cancelar</button>
                 <button class="modal-button generate" onclick="generatePix()">Gerar PIX</button>
             </div>
+            <div class="pix-instruction" id="pixInstruction">👇 Clique no código abaixo para copiar</div>
             <div class="pix-code-area" id="pixCodeArea"></div>
             <div class="copy-notification" id="copyNotification">✓ Código copiado!</div>
         </div>
@@ -646,6 +662,7 @@
         const pixModal = document.getElementById('pixModal'),
               pixValue = document.getElementById('pixValue'),
               pixCodeArea = document.getElementById('pixCodeArea'),
+              pixInstruction = document.getElementById('pixInstruction'),
               copyNotification = document.getElementById('copyNotification'),
               modalContent = pixModal.querySelector('.modal-content');
 
@@ -671,6 +688,7 @@
                 animStyle(modalContent, '');
                 pixValue.value = '';
                 pixCodeArea.classList.remove('active');
+                pixInstruction.classList.remove('active');
                 copyNotification.classList.remove('active');
                 // Remove will-change para economizar recursos
                 modalContent.style.willChange = 'auto';
@@ -692,6 +710,7 @@
             
             pixCodeArea.textContent = pixCode;
             pixCodeArea.classList.add('active');
+            pixInstruction.classList.add('active');
             pixCodeArea.onclick = () => copyToClipboard(pixCode);
             copyToClipboard(pixCode);
         };