From f884117a558c3239c522ae49fcd664cbda615609 Mon Sep 17 00:00:00 2001
From: Marco Gallegos <marco.gallegos@outlook.com>
Date: Tue, 9 Sep 2025 16:48:16 -0600
Subject: [PATCH] feat: Add visual clear form tip with OS detection
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added visible tip in interface showing correct keyboard shortcut:
- Automatically detects Mac vs Windows/Linux
- Shows 'Cmd + Shift + R' on Mac
- Shows 'Ctrl + Shift + R' on Windows/Linux
- Clean, non-intrusive design with blue accent
- Positioned below 'Generar Venta' button

Technical implementation:
- CSS styling for clear-form-tip class
- JavaScript OS detection using navigator.platform
- Dynamic content update based on detected OS
- Updated cache-busting version for immediate loading

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app.js     | 18 +++++++++++++++++-
 index.html |  9 ++++++++-
 styles.css | 28 ++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index 9dcd195..487e36e 100644
--- a/app.js
+++ b/app.js
@@ -3195,4 +3195,20 @@ function addAnticipo() {
 }
 
 
-document.addEventListener('DOMContentLoaded', initializeApp);
+// Detectar sistema operativo y mostrar shortcut correcto
+function setCorrectClearShortcut() {
+    const shortcutElement = document.getElementById('clear-shortcut');
+    if (shortcutElement) {
+        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+        if (isMac) {
+            shortcutElement.textContent = 'Cmd + Shift + R';
+        } else {
+            shortcutElement.textContent = 'Ctrl + Shift + R';
+        }
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    initializeApp();
+    setCorrectClearShortcut();
+});
diff --git a/index.html b/index.html
index d1c2618..eeb9db0 100644
--- a/index.html
+++ b/index.html
@@ -343,6 +343,13 @@
                   <span>Generar Venta</span>
                 </button>
               </div>
+              
+              <!-- Tip para limpiar formulario -->
+              <div class="clear-form-tip">
+                <small>💡 <strong>Para limpiar:</strong> 
+                  <span id="clear-shortcut">Ctrl + Shift + R</span>
+                </small>
+              </div>
             </form>
 
           </div> <!-- fin checkout-panel -->
@@ -768,6 +775,6 @@
   <div id="printArea" class="no-print"></div>
 
   <script src="https://cdn.jsdelivr.net/npm/qrcode@1/build/qrcode.min.js"></script>
-  <script type="module" src="app.js?v=1757462000"></script>
+  <script type="module" src="app.js?v=1757470000"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 028b1fc..734cfc7 100644
--- a/styles.css
+++ b/styles.css
@@ -1927,6 +1927,34 @@ table tbody tr:hover {
     font-size: 12px;
 }
 
+/* Tip para limpiar formulario */
+.clear-form-tip {
+    text-align: center;
+    margin-top: 12px;
+    padding: 8px 12px;
+    background: #f8f9fa;
+    border-left: 3px solid #007bff;
+    border-radius: 4px;
+    color: #495057;
+    font-size: 12px;
+}
+
+.clear-form-tip strong {
+    color: #212529;
+}
+
+#clear-shortcut {
+    display: inline-block;
+    background: #e9ecef;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-weight: bold;
+    color: #343a40;
+    border: 1px solid #ced4da;
+    margin-left: 4px;
+}
+
 /* --- Checkout Panel --- */
 .checkout-panel {
     background: #fff;