{{-- MODAL COBRO TÁCTIL (Diseño Front-PIT con Lógica Real) --}}
<style>
#modal-cobro.active,
#modal-cobro:not(.hidden) {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}
#modal-cobro.hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
</style>
<div id="modal-cobro" class="payment-modal-backdrop fixed inset-0 z-[999999] hidden flex items-center justify-center p-2 sm:p-4 bg-slate-900/60 backdrop-blur-sm transition-all duration-200">
    <div class="payment-modal payment-modal-v2 bg-white rounded-3xl shadow-2xl w-full max-w-5xl max-h-[95vh] flex flex-col overflow-hidden border border-slate-100 animate-in fade-in zoom-in-95 duration-200" role="dialog" aria-modal="true">
        
        <!-- Header del Modal -->
        <div class="payment-modal-header px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-blue-600/10 text-blue-600 flex items-center justify-center font-bold text-lg">
                    🖩
                </div>
                <div>
                    <div class="flex items-center gap-2">
                        <h2 class="text-lg font-black text-slate-800 tracking-tight" id="modal-cobro-header-title">Detalles del Pago</h2>
                        <span class="px-2.5 py-0.5 rounded-full text-xs font-black uppercase bg-blue-50 text-blue-600 border border-blue-200/60" id="cobro-titulo-mesa">Mesa X</span>
                    </div>
                    <p class="text-xs font-semibold text-slate-400">Terminal POS · Cobro en Operación</p>
                </div>
            </div>
            <button type="button" onclick="cerrarModalCobro()" class="w-9 h-9 rounded-xl bg-slate-100 hover:bg-red-50 hover:text-red-500 text-slate-400 flex items-center justify-center transition-colors" aria-label="Cerrar modal">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>

        <!-- Cuerpo del Modal (2 Columnas) -->
        <div class="payment-modal-body grid grid-cols-1 lg:grid-cols-12 flex-1 overflow-y-auto">
            
            <!-- Columna Izquierda: Cuenta a Cobrar (Comanda) -->
            <div class="payment-bill-column lg:col-span-5 bg-slate-50/70 border-r border-slate-100 p-6 flex flex-col justify-between">
                <div>
                    <div class="flex items-center justify-between mb-3">
                        <span class="text-[11px] font-black tracking-wider text-slate-400 uppercase">CUENTA A COBRAR</span>
                    </div>

                    <!-- Cabecera de ítems -->
                    <div class="grid grid-cols-12 text-[10px] font-black text-slate-400 uppercase tracking-widest pb-2 border-b border-slate-200/80 mb-3">
                        <span class="col-span-2">CANT</span>
                        <span class="col-span-7">DESCRIPCIÓN</span>
                        <span class="col-span-3 text-right">TOTAL</span>
                    </div>

                    <!-- Lista dinámica de productos -->
                    <div class="space-y-2.5 overflow-y-auto max-h-[300px] pr-1" id="cobro-items-list">
                        {{-- Inyectado dinámicamente por cobro.js --}}
                    </div>
                </div>

                <!-- Desglose de Totales & Propina -->
                <div class="bg-white rounded-2xl p-4 border border-slate-200/70 shadow-sm mt-4 space-y-3">
                    <div class="flex justify-between items-center text-xs font-bold text-slate-600">
                        <span>CONSUMO</span>
                        <strong class="text-sm font-black text-slate-800" id="cobro-subtotal-display">S/ 0.00</strong>
                    </div>

                    <!-- Propina con selector rápido -->
                    <div class="pt-2 border-t border-slate-100">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-wider">PROPINA (OPCIONAL)</span>
                            <div class="relative w-28">
                                <span class="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-xs">S/</span>
                                <input type="number" step="0.50" min="0" id="input-propina" oninput="calcularTotalConPropina()" class="w-full bg-slate-50 border border-slate-200 rounded-lg pl-7 pr-2 py-1 text-xs font-black text-right outline-none focus:border-blue-500" placeholder="0.00">
                            </div>
                        </div>
                        <div class="grid grid-cols-4 gap-1.5" id="quick-tip-pills">
                            <button type="button" onclick="aplicarPropinaPorcentaje(0)" class="py-1 rounded-md text-[10px] font-black border border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 active:bg-blue-50 active:text-blue-600">0%</button>
                            <button type="button" onclick="aplicarPropinaPorcentaje(5)" class="py-1 rounded-md text-[10px] font-black border border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 active:bg-blue-50 active:text-blue-600">5%</button>
                            <button type="button" onclick="aplicarPropinaPorcentaje(10)" class="py-1 rounded-md text-[10px] font-black border border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100 active:bg-blue-50 active:text-blue-600">10%</button>
                            <button type="button" onclick="document.getElementById('input-propina').focus()" class="py-1 rounded-md text-[10px] font-black border border-slate-200 bg-slate-50 text-slate-600 hover:bg-slate-100">Libre</button>
                        </div>
                    </div>

                    <!-- Total destacado -->
                    <div class="pt-3 border-t border-slate-100 flex items-baseline justify-between">
                        <div>
                            <span class="block text-xs font-black uppercase text-slate-800 tracking-wider">TOTAL A COBRAR</span>
                            <small class="text-[10px] text-slate-400 font-semibold">Soles (PEN)</small>
                        </div>
                        <strong class="text-3xl font-black text-blue-600 tracking-tight" id="cobro-total-display">S/ 0.00</strong>
                    </div>
                </div>
            </div>

            <!-- Columna Derecha: Formulario & Métodos & Teclado POS -->
            <div class="payment-form-column lg:col-span-7 p-6 flex flex-col justify-between space-y-4">
                
                <!-- SECCIÓN 1: COMPROBANTE -->
                <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80">
                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-2">1. COMPROBANTE DE PAGO</span>
                    <div class="grid grid-cols-3 gap-2">
                        <button type="button" onclick="seleccionarComprobante('NINGUNO')" id="btn-comp-NINGUNO" class="py-2.5 rounded-xl border-2 font-black text-xs transition-all border-blue-600 bg-blue-600 text-white shadow-sm">
                            NINGUNO
                        </button>
                        <button type="button" onclick="seleccionarComprobante('BOLETA')" id="btn-comp-BOLETA" class="py-2.5 rounded-xl border-2 font-black text-xs transition-all border-slate-200 bg-white text-slate-600 hover:border-slate-300">
                            BOLETA
                        </button>
                        <button type="button" onclick="seleccionarComprobante('FACTURA')" id="btn-comp-FACTURA" class="py-2.5 rounded-xl border-2 font-black text-xs transition-all border-slate-200 bg-white text-slate-600 hover:border-slate-300">
                            FACTURA
                        </button>
                    </div>

                    <!-- Campos Condicionales Boleta/Factura -->
                    <div id="panel-comprobante" class="hidden mt-3 pt-3 border-t border-slate-200 space-y-2.5">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
                            <div>
                                <label class="block text-[10px] font-black text-slate-600 uppercase mb-1" id="lbl-input-doc">DNI / RUC</label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">
                                        <i data-lucide="search" id="icon-search-doc" class="w-4 h-4"></i>
                                    </span>
                                    <input type="text" id="input-doc" maxlength="11" class="w-full pl-9 pr-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-800 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10" placeholder="Número de doc...">
                                </div>
                            </div>
                            <div>
                                <label class="block text-[10px] font-black text-slate-600 uppercase mb-1">RAZÓN SOCIAL / NOMBRE</label>
                                <input type="text" id="input-nombre" class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-800 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10" placeholder="Público General">
                            </div>
                        </div>
                        <div>
                            <label class="block text-[10px] font-black text-slate-600 uppercase mb-1">DIRECCIÓN (OPCIONAL)</label>
                            <input type="text" id="input-direccion" class="w-full px-3 py-2 bg-white border border-slate-200 rounded-xl text-xs font-bold text-slate-800 outline-none focus:border-blue-600 focus:ring-2 focus:ring-blue-600/10" placeholder="Dirección fiscal...">
                        </div>
                    </div>
                </div>

                <!-- SECCIÓN 2: MÉTODO DE PAGO -->
                <div>
                    <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block mb-2">2. MÉTODO DE PAGO</span>
                    <div class="grid grid-cols-3 gap-2">
                        <!-- Efectivo -->
                        <button type="button" onclick="seleccionarMetodo('efectivo')" id="btn-efectivo" class="metodo-btn p-3 rounded-2xl border-2 border-emerald-500 bg-emerald-500 text-white flex flex-col items-center justify-center gap-1.5 shadow-sm transition-all">
                            <i data-lucide="banknote" class="w-5 h-5"></i>
                            <span class="text-xs font-black uppercase">EFECTIVO</span>
                        </button>

                        <!-- Tarjeta -->
                        <button type="button" onclick="seleccionarMetodo('tarjeta')" id="btn-tarjeta" class="metodo-btn p-3 rounded-2xl border-2 border-slate-200 bg-white text-slate-600 hover:border-slate-300 flex flex-col items-center justify-center gap-1.5 transition-all">
                            <i data-lucide="credit-card" class="w-5 h-5"></i>
                            <span class="text-xs font-black uppercase">TARJETA</span>
                        </button>

                        <!-- Yape / Plin -->
                        <button type="button" onclick="seleccionarMetodo('yape')" id="btn-yape" class="metodo-btn p-3 rounded-2xl border-2 border-slate-200 bg-white text-slate-600 hover:border-slate-300 flex flex-col items-center justify-center gap-1.5 transition-all">
                            <i data-lucide="smartphone" class="w-5 h-5"></i>
                            <span class="text-xs font-black uppercase">YAPE / PLIN</span>
                        </button>
                    </div>
                </div>

                <!-- SECCIÓN 3: EFECTIVO, BILLETES Y TECLADO TÁCTIL POS -->
                <div id="panel-efectivo" class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 space-y-3">
                    
                    <!-- Billetes Rápidos Sugeridos -->
                    <div class="flex items-center justify-between">
                        <span class="text-[10px] font-black text-slate-400 uppercase tracking-wider">BILLETES SUGERIDOS:</span>
                        <div class="flex gap-1.5">
                            <button type="button" onclick="establecerMontoRecibido('exacto')" class="px-2.5 py-1 rounded-lg text-xs font-black bg-white border border-slate-200 text-slate-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all">Exacto</button>
                            <button type="button" onclick="establecerMontoRecibido(50)" class="px-2.5 py-1 rounded-lg text-xs font-black bg-white border border-slate-200 text-slate-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all">S/ 50</button>
                            <button type="button" onclick="establecerMontoRecibido(100)" class="px-2.5 py-1 rounded-lg text-xs font-black bg-white border border-slate-200 text-slate-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all">S/ 100</button>
                            <button type="button" onclick="establecerMontoRecibido(200)" class="px-2.5 py-1 rounded-lg text-xs font-black bg-white border border-slate-200 text-slate-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all">S/ 200</button>
                        </div>
                    </div>

                    <!-- Displays de Monto Recibido y Vuelto -->
                    <div class="grid grid-cols-2 gap-3">
                        <div class="p-3 bg-white rounded-xl border border-slate-200">
                            <span class="block text-[10px] font-black text-slate-400 uppercase">MONTO RECIBIDO</span>
                            <div class="flex items-baseline gap-1 mt-1">
                                <span class="text-sm font-black text-slate-400">S/</span>
                                <input type="number" step="0.01" min="0" id="input-recibido" onfocus="this.select()" oninput="calcularVuelto()" class="w-full text-2xl font-black text-slate-800 outline-none bg-transparent" placeholder="0.00">
                            </div>
                        </div>

                        <div class="p-3 bg-slate-900 text-white rounded-xl flex flex-col justify-between">
                            <span class="block text-[10px] font-black text-slate-400 uppercase tracking-wider">VUELTO A ENTREGAR</span>
                            <strong class="text-2xl font-black text-emerald-400 tracking-tight" id="display-vuelto">S/ 0.00</strong>
                        </div>
                    </div>

                    <!-- Teclado Numérico POS Táctil -->
                    <div class="grid grid-cols-6 gap-1.5 pt-1">
                        <button type="button" onclick="teclearNumero('1')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">1</button>
                        <button type="button" onclick="teclearNumero('2')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">2</button>
                        <button type="button" onclick="teclearNumero('3')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">3</button>
                        <button type="button" onclick="teclearNumero('4')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">4</button>
                        <button type="button" onclick="teclearNumero('5')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">5</button>
                        <button type="button" onclick="teclearNumero('6')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">6</button>
                        <button type="button" onclick="teclearNumero('7')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">7</button>
                        <button type="button" onclick="teclearNumero('8')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">8</button>
                        <button type="button" onclick="teclearNumero('9')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">9</button>
                        <button type="button" onclick="teclearNumero('00')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">00</button>
                        <button type="button" onclick="teclearNumero('0')" class="py-2.5 rounded-xl bg-white border border-slate-200 font-black text-sm text-slate-700 hover:bg-slate-100 active:scale-95 transition-all">0</button>
                        <button type="button" onclick="teclearNumero('borrar')" class="py-2.5 rounded-xl bg-red-50 border border-red-200 font-black text-sm text-red-600 hover:bg-red-100 active:scale-95 transition-all">⌫</button>
                    </div>
                </div>

                <!-- Botón de Procesar Pago -->
                <button type="button" onclick="procesarPago()" id="btn-procesar-pago" class="w-full py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-black text-sm tracking-wider uppercase shadow-lg shadow-blue-600/30 flex items-center justify-center gap-2 active:scale-[0.99] transition-all">
                    <i data-lucide="check-circle" class="w-5 h-5"></i>
                    <span>PROCESAR PAGO E IMPRIMIR</span>
                </button>
            </div>
        </div>

        <!-- Footer con Atajos -->
        <div class="px-6 py-2.5 bg-slate-100 border-t border-slate-200/80 flex items-center justify-between text-[11px] font-bold text-slate-500">
            <div class="flex items-center gap-3">
                <span><kbd class="px-1.5 py-0.5 bg-white border border-slate-300 rounded shadow-xs">F1</kbd> Efectivo</span>
                <span><kbd class="px-1.5 py-0.5 bg-white border border-slate-300 rounded shadow-xs">F2</kbd> Tarjeta</span>
                <span><kbd class="px-1.5 py-0.5 bg-white border border-slate-300 rounded shadow-xs">Esc</kbd> Cancelar</span>
            </div>
            <div class="flex items-center gap-1.5 text-emerald-600">
                <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
                <span>Terminal POS Conectado</span>
            </div>
        </div>
    </div>
</div>