From 104ba07af764c48ca08acb74e9662fbb9c8718d6 Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Thu, 23 Jul 2026 11:12:31 -0500
Subject: [PATCH] =?UTF-8?q?feat(kiosko):=20numpad=20t=C3=A1ctil=20para=20c?=
 =?UTF-8?q?ampo=20c=C3=A9dula?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- inputmode=none en inp-cedula suprime el teclado Windows
- Grid 3×4 con dígitos 0-9, C (borrar todo) y ⌫ (borrar uno)
- pointerdown + preventDefault mantiene el foco en el input
- El escáner sigue funcionando (escribe por keydown, no por IME)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 modules/turnero/views/kiosko.php | 63 +++++++++++++++++++++++++++++++-
 1 file changed, 62 insertions(+), 1 deletion(-)

diff --git a/modules/turnero/views/kiosko.php b/modules/turnero/views/kiosko.php
index 698563b..4d6d1d3 100644
--- a/modules/turnero/views/kiosko.php
+++ b/modules/turnero/views/kiosko.php
@@ -383,6 +383,32 @@ unset($p);
             flex-shrink: 0;
         }
 
+        /* ── Numpad táctil ── */
+        .numpad {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: .5rem;
+            margin: .6rem 0 1rem;
+        }
+        .np-btn {
+            padding: 1rem;
+            font-size: 1.6rem;
+            font-weight: 700;
+            border: 1.5px solid #e2e8f0;
+            border-radius: 12px;
+            background: #fff;
+            color: #1e293b;
+            cursor: pointer;
+            touch-action: manipulation;
+            -ms-touch-action: manipulation;
+            transition: background .1s, transform .08s;
+            user-select: none;
+            -webkit-user-select: none;
+        }
+        .np-btn:active { background: var(--brand-light); transform: scale(.94); }
+        .np-clear { color: #ef4444; border-color: #fca5a5; }
+        .np-back  { color: #64748b; }
+
         /* ── Responsive ── */
         @media (min-height: 800px) {
             .prioridad-grid { gap: 1.3rem; }
@@ -476,8 +502,24 @@ unset($p);
             <label for="inp-cedula">Número de cédula <span style="color:#ef4444">*</span></label>
             <input type="text" id="inp-cedula" class="form-control"
                    placeholder="Ej: 1234567890" maxlength="20"
-                   autocomplete="off" inputmode="numeric">
+                   autocomplete="off" inputmode="none">
         </div>
+        <!-- Teclado numérico táctil -->
+        <div class="numpad">
+            <button class="np-btn" data-k="1">1</button>
+            <button class="np-btn" data-k="2">2</button>
+            <button class="np-btn" data-k="3">3</button>
+            <button class="np-btn" data-k="4">4</button>
+            <button class="np-btn" data-k="5">5</button>
+            <button class="np-btn" data-k="6">6</button>
+            <button class="np-btn" data-k="7">7</button>
+            <button class="np-btn" data-k="8">8</button>
+            <button class="np-btn" data-k="9">9</button>
+            <button class="np-btn np-clear" data-k="C">C</button>
+            <button class="np-btn" data-k="0">0</button>
+            <button class="np-btn np-back" data-k="⌫"><i class="fas fa-backspace"></i></button>
+        </div>
+
         <div class="mb-3">
             <label for="inp-cel">WhatsApp
                 <span style="color:#94a3b8;font-size:.82rem;font-weight:400"> (opcional)</span>
@@ -703,6 +745,25 @@ unset($p);
 
     function setSpinner(on) { document.getElementById('spinner').classList.toggle('active', on); }
 
+    // ── Numpad táctil ─────────────────────────────────────────────────
+    document.querySelectorAll('.np-btn').forEach(btn => {
+        // pointerdown con preventDefault evita que el input pierda el foco
+        btn.addEventListener('pointerdown', e => {
+            e.preventDefault();
+            const k   = btn.dataset.k;
+            const inp = _inpCedula;
+            if (k === 'C') {
+                inp.value = '';
+            } else if (k === '⌫') {
+                inp.value = inp.value.slice(0, -1);
+            } else if (inp.value.length < 20) {
+                inp.value += k;
+            }
+            // Notificar al detector de escáner/inactividad
+            inp.dispatchEvent(new Event('input', { bubbles: true }));
+        });
+    });
+
     // ── Escape admin: tocar logo/nombre 7 veces en 4 s ───────────────
     (function() {
         let _taps = 0, _timer = null;