{{-- MODAL COBRO --}}
<div id="modal-cobro" class="fixed inset-0 z-[100] hidden flex items-center justify-center p-4" style="background-color: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);">
    <div class="bg-white w-full max-w-6xl h-[90vh] rounded-2xl shadow-2xl border border-slate-200 relative z-10 flex overflow-hidden fade-in">
        <div class="w-full md:w-1/3 bg-slate-50 border-r border-slate-200 p-6 flex flex-col">
            <div class="mb-4 pb-4 border-b border-slate-200 flex justify-between items-center">
                <div>
                    <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Cuenta a cobrar</span>
                    <h3 class="text-2xl font-black text-[#0f172a]" id="cobro-titulo-mesa">Mesa X</h3>
                </div>
            </div>
            <div class="flex-1 overflow-y-auto space-y-4 pr-2 custom-scrollbar" id="cobro-items-list">
                {{-- Los items reales se renderizan aquí dinámicamente --}}
            </div>
            
            <div class="mt-4 pt-4 border-t border-slate-200 bg-white p-4 rounded-xl shadow-sm border border-slate-100">
                <div class="flex justify-between items-center mb-3">
                    <span class="text-xs text-slate-500 font-bold uppercase">Consumo</span>
                    <span class="text-lg font-mono font-bold text-slate-700" id="cobro-subtotal-display">S/ 0.00</span>
                </div>
                <div class="flex justify-between items-center mb-4">
                    <span class="text-xs text-slate-800 font-bold uppercase">Propina (Opcional)</span>
                    <div class="relative w-24">
                        <span class="absolute left-2 top-1/2 -translate-y-1/2 text-slate-700 font-bold text-xs">S/</span>
                        <input type="number" id="input-propina" oninput="calcularTotalConPropina()" class="w-full bg-slate-50 border-2 border-slate-300 rounded-lg pl-6 pr-2 py-1 text-sm font-mono font-bold text-black outline-none focus:border-[#194B95] transition-all placeholder:text-slate-500 text-right" placeholder="0.00">
                    </div>
                </div>
                <div class="flex justify-between items-end border-t border-slate-100 pt-3">
                    <div>
                        <p class="text-xs text-slate-400 font-bold uppercase">Total a Cobrar</p>
                    </div>
                    <span class="text-3xl font-mono font-black text-[#194B95]" id="cobro-total-display">S/ 0.00</span>
                </div>
            </div>
        </div>
        
        <div class="flex-1 flex flex-col bg-white overflow-y-auto custom-scrollbar">
            <div class="p-6 pb-2 flex justify-between items-center sticky top-0 bg-white/90 backdrop-blur z-10 border-b border-slate-100">
                <h2 class="font-black text-[#0f172a] text-xl">Detalles del Pago</h2>
                <button onclick="cerrarModalCobro()" class="p-2 bg-slate-100 rounded-full text-slate-400 hover:text-[#E21C21] hover:bg-red-50 transition-colors"><i data-lucide="x" class="w-6 h-6"></i></button>
            </div>
            
            <div class="p-6">
                <!-- COMPROBANTE -->
                <div class="mb-6 p-5 border border-slate-200 rounded-2xl bg-slate-50/50">
                    <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4 flex items-center gap-2"><i data-lucide="receipt" class="w-4 h-4 text-[#194B95]"></i> Comprobante</h3>
                    <div class="flex gap-2 mb-4">
                        <button onclick="seleccionarComprobante('NINGUNO')" id="btn-comp-NINGUNO" class="flex-1 py-2 rounded-lg border-2 border-slate-200 bg-white text-slate-500 text-xs font-bold hover:bg-slate-50 transition-all">NINGUNO</button>
                        <button onclick="seleccionarComprobante('BOLETA')" id="btn-comp-BOLETA" class="flex-1 py-2 rounded-lg border-2 border-slate-200 bg-white text-slate-500 text-xs font-bold hover:bg-slate-50 transition-all">BOLETA</button>
                        <button onclick="seleccionarComprobante('FACTURA')" id="btn-comp-FACTURA" class="flex-1 py-2 rounded-lg border-2 border-slate-200 bg-white text-slate-500 text-xs font-bold hover:bg-slate-50 transition-all">FACTURA</button>
                    </div>
                    
                    <div id="panel-comprobante" class="hidden grid grid-cols-2 gap-4 animate-fadeIn mt-4">
                        <div class="col-span-2 md:col-span-1 relative">
                            <label class="text-[11px] font-bold text-slate-800 uppercase">DNI / RUC</label>
                            <div class="relative mt-1">
                                <i data-lucide="search" id="icon-search-doc" class="absolute left-3 top-0 bottom-0 my-auto w-4 h-4 text-slate-400 transition-colors"></i>
                                <input type="text" id="input-doc" maxlength="11" class="w-full bg-white border-2 border-slate-300 rounded-lg pl-9 pr-3 py-2 text-sm font-bold text-black outline-none focus:border-[#194B95] placeholder:text-slate-400 transition-all" placeholder="Número...">
                            </div>
                        </div>
                        <div class="col-span-2 md:col-span-1">
                            <label class="text-[11px] font-bold text-slate-800 uppercase">Razón Social / Nombre</label>
                            <input type="text" id="input-nombre" class="w-full mt-1 bg-white border-2 border-slate-300 rounded-lg px-3 py-2 text-sm font-bold text-black outline-none focus:border-[#194B95] placeholder:text-slate-400 transition-all" placeholder="Público General">
                        </div>
                        <div class="col-span-2">
                            <label class="text-[11px] font-bold text-slate-800 uppercase">Dirección (Opcional)</label>
                            <input type="text" id="input-direccion" class="w-full mt-1 bg-white border-2 border-slate-300 rounded-lg px-3 py-2 text-sm font-bold text-black outline-none focus:border-[#194B95] placeholder:text-slate-400 transition-all" placeholder="Dirección...">
                        </div>
                    </div>
                </div>

                <!-- MÉTODO DE PAGO -->
                <h3 class="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Método de Pago</h3>
                <div class="grid grid-cols-3 gap-4 mb-6">
                    <button onclick="seleccionarMetodo('efectivo')" id="btn-efectivo" class="metodo-btn h-28 rounded-2xl border-2 border-slate-100 bg-white hover:border-[#194B95] flex flex-col items-center justify-center gap-2 group transition-all">
                        <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center"><i data-lucide="banknote" class="w-5 h-5 text-slate-500"></i></div>
                        <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wide">Efectivo</span>
                    </button>
                    <button onclick="seleccionarMetodo('tarjeta')" id="btn-tarjeta" class="metodo-btn h-28 rounded-2xl border-2 border-slate-100 bg-white hover:border-[#194B95] flex flex-col items-center justify-center gap-2 group transition-all">
                        <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"><i data-lucide="credit-card" class="w-5 h-5 text-[#194B95]"></i></div>
                        <span class="text-[10px] font-bold text-[#194B95] uppercase tracking-wide">Tarjeta / POS</span>
                    </button>
                    <button onclick="seleccionarMetodo('yape')" id="btn-yape" class="metodo-btn h-28 rounded-2xl border-2 border-slate-100 bg-white hover:border-fuchsia-500 flex flex-col items-center justify-center gap-2 group transition-all">
                        <div class="w-10 h-10 rounded-full bg-fuchsia-100 flex items-center justify-center"><i data-lucide="smartphone" class="w-5 h-5 text-fuchsia-600"></i></div>
                        <span class="text-[10px] font-bold text-fuchsia-700 uppercase tracking-wide">Yape / Plin</span>
                    </button>
                </div>
                
                <div id="panel-efectivo" class="flex flex-col items-center justify-center mb-6 p-6 bg-slate-50 rounded-2xl border-2 border-slate-200">
                    <label class="text-xs font-bold text-emerald-700 uppercase tracking-widest mb-3">Ingrese Monto Recibido</label>
                    <div class="relative w-full max-w-xs mb-4">
                        <span class="absolute left-6 top-1/2 -translate-y-1/2 text-slate-600 font-bold text-2xl">S/</span>
                        <input type="number" id="input-recibido" oninput="calcularVuelto()" class="w-full bg-white border-2 border-slate-400 rounded-2xl pl-14 pr-6 py-4 text-3xl font-mono font-black text-black outline-none focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/20 transition-all text-center placeholder:text-slate-400" placeholder="0.00">
                    </div>
                    <div class="bg-slate-900 text-white rounded-xl px-6 py-3 flex items-center gap-4 shadow-lg w-full max-w-xs justify-between">
                        <span class="text-xs font-bold text-slate-400 uppercase tracking-wider">Vuelto:</span>
                        <span class="text-2xl font-mono font-black text-emerald-400" id="display-vuelto">---</span>
                    </div>
                </div>

                <button onclick="procesarPago()" id="btn-procesar-pago" class="w-full bg-[#194B95] hover:bg-[#123670] text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-900/20 transition-all active:scale-[0.99] uppercase tracking-widest text-sm flex justify-center items-center gap-3 mt-4">
                    <i data-lucide="check-circle" class="w-5 h-5"></i> Procesar Pago e Imprimir
                </button>
            </div>
        </div>
    </div>
</div>