<?php
date_default_timezone_set($_SESSION["zona_horaria"]);
setlocale(LC_ALL, "es_ES@euro", "es_ES", "esp");
$fecha = date("Y-m-d");
$hora = date("H:i:s");
$codigo_anular_venta = Session::get('cod_seg');
$mozosDisponibles = isset($this->Mozo) && is_array($this->Mozo) ? $this->Mozo : [];
$usuarioActualId = (string) Session::get('usuid');
$usuarioActualNombre = trim((string) Session::get('nombres') . ' ' . (string) Session::get('apellidos'));

if ((int) Session::get('rol') === 5) {
    $mozosDisponibles = array_values(array_filter($mozosDisponibles, function ($mozo) use ($usuarioActualId) {
        return isset($mozo['id_usu']) && (string) $mozo['id_usu'] === $usuarioActualId;
    }));
}

?>
<input type="hidden" id="url" value="<?php echo URL; ?>" />
<input type="hidden" id="rol_usr" value="<?php echo Session::get('rol'); ?>" />
<input type="hidden" id="fecha" value="<?php echo $fecha; ?>" />
<input type="hidden" id="hora" value="<?php echo $hora; ?>" />
<input type="hidden" id="cod_ape" value="<?php echo Session::get('aperturaIn'); ?>" />
<input type="hidden" id="moneda" value="<?php echo Session::get('moneda'); ?>" />
<input type="hidden" id="pc_ip" value="<?php echo Session::get('pc_ip'); ?>" />
<input type="hidden" id="pc_name" value="<?php echo Session::get('pc_name'); ?>" />
<input type="hidden" id="print_com" value="<?php echo Session::get('print_com'); ?>" />
<input type="hidden" id="print_cpe" value="<?php echo Session::get('print_cpe'); ?>" />
<input type="hidden" id="tribAcr" value="<?php echo Session::get('tribAcr'); ?>" />
<input type="hidden" id="diAcr" value="<?php echo Session::get('diAcr'); ?>" />
<input type="hidden" id="api_wsp" value="<?php echo Session::get('api_wsp'); ?>" />
<input type="hidden" id="usuario_actual_id" value="<?php echo htmlspecialchars($usuarioActualId, ENT_QUOTES); ?>" />
<input type="hidden" id="usuario_actual_nombre" value="<?php echo htmlspecialchars($usuarioActualNombre, ENT_QUOTES); ?>" />
<input type="hidden" name="codtipoped" id="codtipoped" value="1" />
<input type="hidden" name="codpagina" id="codpagina" value="1" />
<input type="hidden" id="codpestdelivery" value="" />
<input type="hidden" id="codsalonorigen" value="" />
<input type="hidden" id="codmesaorigen" value="" />
<input type="hidden" id="codigo_anular_venta" value="<?php echo $codigo_anular_venta; ?>" />
<input type="hidden" id="direccion_comanda" value="<?= Session::get('direccion_comanda') ?>" />
<input type="hidden" id="pedido_comanda" value="<?= Session::get('pedido_comanda') ?>" />
<input type="hidden" id="mostrar_precio_comanda" value="<?= Session::get('mostrar_precio_comanda') ?: 0 ?>" />
<input type="hidden" id="imp_icbper" value="<?php echo Session::get('imp_val_bol'); ?>" />
<input type="hidden" id="verpdf" value="<?php echo Session::get('verpdf'); ?>" />
<input type="hidden" id="limits_invoices" value="<?php echo $this->Invoice['limits']['total_invoices']; ?>" />
<input type="hidden" id="current_invoices" value="<?php echo $this->Invoice['current']['total_invoices']; ?>" />
<input type="hidden" id="locked_invoices" value="<?php echo $this->Invoice['locked_invoices']; ?>" />
<input type="hidden" id="id_pedido" value=0 />
<input type="hidden" id="codrepartidor" value="1" />
<input type="hidden" id="codimpcomandamesa" value="<?php echo Session::get('opc_03'); ?>" />
<input type="hidden" id="mozos_data" value='<?= json_encode($mozosDisponibles) ?>'>
<input type="hidden" id="dato_usuario" value="<?= Session::get('nombres') ?>" />
<input type="hidden" id="permisoEditarPrecio" value="<?= Session::get('editarprecio') ?>" />
<input type="hidden" id="config_comision_tarjeta" value="<?= Session::get('comision_tarjeta') ?>" />
<input type="hidden" id="impresion_automatica_comanda" value="<?= Session::get('impresion_automatica_comanda') ?>" />
<input type="hidden" id="salon" value="" />
<input type="hidden" id="mesa" value="" />
<input type="hidden" id="id_salon" value="" />
<?php
$documentos = isset($this->TipoDocumento) && is_array($this->TipoDocumento)
    ? $this->TipoDocumento
    : [];

$result     = array_filter($documentos, function($d) { return (int)$d['defecto'] === 1; });
$porDefecto = reset($result) ?: [];
$defaultId  = $porDefecto['id_tipo_doc'] ?? '';
?>
<input
  type="hidden"
  id="tipo_doc_defecto"
  value="<?= htmlspecialchars($defaultId, ENT_QUOTES) ?>"
/>

<div class="p-15"></div>

<div id="loading-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:9999; text-align:center; padding-top:200px; font-size:24px;">
  <i class="fas fa-spinner fa-spin"></i> Procesando venta...
</div>
<!-- Contenedor para el toast -->
<div aria-live="polite" id = "viewLivetoast" aria-atomic="true" style="display:none; position: fixed; top: 90px; right: 1rem; z-index: 20000; min-width: 320px;">
  <div id="liveToast" class="toast" role="alert" data-delay="3000">
    <div class="toast-header">
      <strong class="mr-auto text-success">&Eacute;xito</strong>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body"></div>
  </div>
</div>

<style>
/* === VARIABLES CSS === */
:root {
    --primary-color: #5664d2;
    --success-color: #1bc943;
    --warning-color: #f4a100;
    --danger-color: #e74c3c;
    --info-color: #3498db;
    --dark-color: #2c3e50;
    --light-bg: #f8f9fa;
    --card-shadow: 0 4px 20px rgba(0,0,0,0.05);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* === FEEDBACK WHATSAPP === */
.wsp-feedback {
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    animation: fadeInUp 0.18s ease-out;
}

.wsp-feedback-success {
    background: #e9f9ef;
    border: 1px solid #b8ebc9;
    color: #177245;
}

.wsp-feedback-error {
    background: #fdecec;
    border: 1px solid #f6c4c4;
    color: #8f2d2d;
}

.wsp-feedback-info {
    background: #eaf2fb;
    border: 1px solid #bfd6f0;
    color: #1f4f78;
}

.wsp-status-dot-wrap {
    background: #ffffff;
    border-color: #d9e2ef;
    min-width: 38px;
    justify-content: center;
}

.wsp-status-dot-wrap i {
    font-size: 12px;
}

/* === CARD MODERN === */
.card-modern {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    background: white;
    transition: var(--transition);
}

.card-modern:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* === TABS MODERN === */
.nav-tabs.customtab {
    border-bottom: 2px solid #f0f0f0;
}

.nav-tabs.customtab .nav-link {
    border: none;
    color: #6c757d;
    font-weight: 500;
    padding: 1rem 1.5rem;
    transition: var(--transition);
    border-radius: 0;
}

.nav-tabs.customtab .nav-link:hover {
    color: var(--primary-color);
    background: rgba(86, 100, 210, 0.05);
}

.nav-tabs.customtab .nav-link.active {
    color: var(--primary-color);
    background: white;
    border-bottom: 3px solid var(--primary-color);
}

/* === LISTA MESAS MODERN === */
.list-salones .nav-link.zonas {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    margin-right: 10px;
    color: #555;
    padding: 0.5rem 1.2rem;
    transition: var(--transition);
}

.list-salones .nav-link.zonas.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(86, 100, 210, 0.3);
}

/* === BUTTONS MODERN === */
.btn-primary-modern {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(86, 100, 210, 0.3);
    color: white;
}

.btn-success-modern {
    background: linear-gradient(135deg, var(--success-color) 0%, #0ea332 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(27, 201, 67, 0.3);
    color: white;
}

/* === TABLES MODERN === */
.table-modern thead th {
    background: #f8f9fa;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    border-bottom: 2px solid #e9ecef;
}

.table-modern tbody td {
    vertical-align: middle;
    border-bottom: 1px solid #f8f9fa;
}

.table-modern tbody tr:hover {
    background-color: #f8f9fa;
}

/* === SEARCH INPUT MODERN === */
.form-control-modern {
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: 1.2rem 1.5rem;
    background: #f8f9fa;
}

.form-control-modern:focus {
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-color: var(--primary-color);
}

/* === TABLE CARDS MODERN (HIGH IMPACT) === */
/* Green gradient for available tables */
.btn.btn-secondary.btn-block.disponible_1 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35) !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.btn.btn-secondary.btn-block.disponible_1:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
}

/* Red gradient for occupied tables */
.btn.btn-secondary.btn-block.ocupado_2 {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.35) !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.btn.btn-secondary.btn-block.ocupado_2:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.45) !important;
}

/* Modern icon styling within table cards */
.btn.btn-secondary.btn-block i {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* === ORDER HEADER GRADIENT (HIGH IMPACT) === */
.po-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%) !important;
    box-shadow: 0 4px 15px rgba(86, 100, 210, 0.3) !important;
}

/* === EMPTY STATE MODERN === */
.cont01 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.cont01::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.08) 0%, transparent 50%);
    pointer-events: none;
}

.cont01-1, .cont01-2 {
    position: relative;
    z-index: 1;
}

.cont01-1 h2 i, .cont01-2 h2 i {
    font-size: 48px;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.cont01-1 h4, .cont01-2 h4 {
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.cont01-1 h6, .cont01-2 h6 {
    opacity: 0.95;
    font-weight: 400;
    font-size: 0.95rem;
}

/* === STATUS HEADERS MODERN === */
/* Orange header - waiting confirmation */
.bg-warning, [style*="background:#fb9678"], [style*="background: #fb9678"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

/* Blue header - in preparation */  
.bg-info, [style*="background:#03a9f3"], [style*="background: #03a9f3"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* Green header - in transit */
.bg-success, [style*="background:#00c292"], [style*="background: #00c292"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
}

/* Purple header - delivered */
.bg-purple, [style*="background:#7460ee"], [style*="background: #7460ee"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

/* === OPTIONAL: SEGMENTED CONTROLS (DOC TYPE) === */
.btn-group.btn-group-toggle {
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 50px; /* Pill shape container */
    border: 1px solid #e2e8f0;
}

.btn-group.btn-group-toggle .btn {
    border-radius: 50px !important; /* Pill shape buttons */
    border: none;
    font-weight: 500;
    color: #64748b;
    background-color: transparent;
    transition: all 0.3s ease;
    margin: 0;
}

.btn-group.btn-group-toggle .btn.active {
    background: white !important;
    color: var(--primary-color) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    font-weight: 600;
}

.btn-group.btn-group-toggle .btn:not(.active):hover {
    background-color: rgba(255,255,255,0.5);
}

/* === OPTIONAL: PAYMENT INPUTS MODERN === */
#content_pagos .input-group {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

#content_pagos .input-group:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
}

/* Hide default borders to blend input and addon */
#content_pagos .input-group-text, 
#content_pagos .form-control {
    border: none !important;
    background: transparent !important;
}

#content_pagos .input-group-text small {
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    letter-spacing: 0.5px;
}

#content_pagos .form-control {
    font-weight: 600;
    color: #1e293b;
    text-align: right; 
    font-size: 1.1rem !important;
}

/* === CRITICAL FIXES FOR TABLES & LISTS === */

/* 1. MESA BUTTONS - OVERRIDE LEGACY CLASSES */
.btn-green, .btn.btn-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
    color: white !important;
    opacity: 1 !important;
}

.btn-blue, .btn-primary, .btn.btn-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
}

.btn-reed, .btn-danger, .btn.btn-reed {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
}

/* Remove 3D dim effects if they conflict */
.dim, .btn-large-dim {
    box-shadow: none; /* Let our custom shadows take over */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.dim:hover, .btn-large-dim:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
}

/* 2. STATUS HEADERS (Delivery/Mostrador) */
/* Force override inline styles using attribute selectors */
[style*="background: #ffcb91"], [style*="background:#ffcb91"], .tab-pane .b-b[style*="background"] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    border-radius: 8px 8px 0 0;
    padding: 15px !important;
}

[style*="background: #ffefa1"], [style*="background:#ffefa1"] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

[style*="background: #6ddccf"], [style*="background:#6ddccf"] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

[style*="background: #ff7675"], [style*="background:#ff7675"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
}

.tab-pane .b-b h6 {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

</style>
<style>
/* === FINAL REFINED STYLES === */

/* 1. STATUS HEADER GRADIENTS (Fixed) */
/* Explicitly target the tab panes to ensure gradients apply, resolving white-on-white issue */
#mostrador01 .modern-status-header, #delivery01 .modern-status-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; /* Amber/Orange */
    color: white !important;
}
#mostrador02 .modern-status-header, #delivery02 .modern-status-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; /* Blue */
    color: white !important;
}
#mostrador03 .modern-status-header, #delivery03 .modern-status-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; /* Emerald */
    color: white !important;
}
#delivery04 .modern-status-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; /* Emerald */
    color: white !important;
}

/* Ensure text inside headers is white and bold */
.modern-status-header h6 {
    color: white !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin: 0;
    padding: 10px;
}

/* 2. ELEGANT TABLE STYLES (Match Reference) */
.table-modern {
    border-collapse: separate !important;
    border-spacing: 0 0px !important; /* No gaps for continuous look, or small gap */
    background: transparent !important;
    width: 100%;
}

.table-modern thead th {
    background-color: #5664d2 !important; /* Solid Primary Blue from Reference */
    color: #ffffff !important; /* White text */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.05em;
    border: none !important;
    padding: 15px 15px !important;
}

/* Rounded corners for the header bar */
.table-modern thead tr:first-child th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.table-modern thead tr:first-child th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }

.table-modern tbody tr {
    background: white !important;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
}

.table-modern tbody tr:hover {
    background-color: #f8fafc !important; /* Subtle hover */
    transform: none !important; /* Remove lift for this specific flat style */
    box-shadow: none !important;
}

.table-modern tbody td {
    padding: 18px 15px !important;
    vertical-align: middle !important;
    color: #475569 !important;
    font-weight: 500;
    border-top: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 0.9rem;
}

/* 3. ORDER COUNTERS (Refined) */
.pedidos-mostrador-total, .pedidos-total {
    background: -webkit-linear-gradient(45deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
    font-size: 3.5rem !important; /* Larger */
    display: block;
    margin-bottom: 0px !important;
    white-space: nowrap; 
    line-height: 1.1;
    overflow: visible !important;
    padding-bottom: 5px; /* Visual breathing room */
}

/* 4. NEW ORDER BUTTON (Refined) */
.cont01-2 .btn-nuevo-pedido {
    margin: 0 auto 15px auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 75px !important;
    height: 75px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.4) !important; /* Glow */
    transition: transform 0.2s ease;
}
.cont01-2 .btn-nuevo-pedido:hover {
    transform: scale(1.05);
}

/* 5. DELIVERY & GLOBAL BACKGROUNDS */
/* Remove the "yellow" from the main container panel */
.cont02, .display-tipo-entrega, .display-tipo-entrega .btn-group, .tab-pane {
    background: transparent !important; /* Let body bg shine or use white card */
    box-shadow: none !important;
}

/* Override global gray background */
body, .content-wrapper, .container-fluid {
    background-color: #f8fafc !important; /* Cool white */
}

/* Make specific content cards white */
.card-body, .tab-pane .card-body {
    background: white;
    border-radius: 12px;
}

.cont02 .row {
    background: white !important;
    border-radius: 12px;
    padding: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); 
}

/* Fix "Tipo de entrega" buttons */
.btn-tipo-entrega-1.active, .btn-tipo-entrega-2.active {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%) !important;
    color: white !important;
    border: none;
    box-shadow: 0 4px 10px rgba(86, 100, 210, 0.3);
}

.btn-tipo-entrega-1, .btn-tipo-entrega-2 {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50px !important;
    margin: 0 5px;
}

/* 7. MOBILE VISUAL POLISH (Mesas & Products) */
@media (max-width: 768px) {
    /* MESAS: Compact Grid */
    .list-mesas {
        display: grid;
        grid-template-columns: repeat(3, 1fr) !important; /* Force 3 columns */
        gap: 8px !important;
        padding: 5px !important;
        width: 100% !important;
    }

    .list-mesas .btn-large-dim {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1/0.8; /* Make them wider, less tall */
        margin: 0 !important;
        font-size: 1rem !important; /* Smaller text */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 5px !important;
    }


    .list-mesas .btn-large-dim img {
        width: 20px !important; /* Smaller icon */
        height: 20px !important;
        margin-top: 2px;
    }
    
}



/* GLOBAL STYLES (moved outside media query) */
/* FINAL TABLITA LAYOUT - PRECISE MATCH */
.multiprice-wrapper {
    width: 100%;
    background: #fff;
    /* Frame it like the reference, but use Theme Purple instead of Orange */
    border: 1px solid #7460ee; 
    border-radius: 8px;
    padding: 2px;
    margin-top: 5px;
    overflow: hidden;
}

.product-prices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    padding: 0;
    width: 100%;
    align-items: stretch;
}

.price-item {
    border: none;
    background: transparent;
    border-radius: 0;
    padding: 6px 2px; /* Very tight padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
    min-height: auto;
    /* Separator */
    border-right: 1px solid #e2e8f0;
}

.price-item:last-child {
    border-right: none;
}

.price-item .price-label {
    font-size: 0.75rem;
    color: #334155;
    margin-bottom: 4px;
    font-weight: 700;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/* BUTTONS - BLOCK STYLE (Like Reference) */
.price-item button.agregar-precio {
    width: 95%;
    margin: 0 auto;
    font-size: 0.9rem;
    padding: 4px 0;
    border-radius: 4px; /* Sharper corners like ref */
    font-weight: 700;
}

/* Base Price: Theme Color */
.price-item .btn-outline-primary {
    color: #7460ee;
    border: 1px solid #7460ee;
    background: #fff;
}
.price-item .btn-outline-primary:hover {
    background-color: #7460ee !important;
    color: #fff !important;
}

/* Extras: Solid Light Grey (Visible Block) */
.price-item .btn-secondary {
    background-color: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}




/* === GRID DE PRODUCTOS RESPONSIVE === */
.section-list {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 columna */
  gap: .5rem;
  height: 100%;
  overflow: auto;
}

/* Tablet pequeño: 2 columnas */
@media (min-width: 600px) and (max-width: 767px) {
  .section-list {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas fijas */
    gap: 0.75rem;
  }
}

/* Tablet grande (iPad 768px+): 3 COLUMNAS */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-list {
    grid-template-columns: repeat(3, 1fr); /* 3 columnas fijas */
    gap: 0.75rem;
  }
}

/* Desktop: Auto-fit flexible */
@media (min-width: 1025px) {
  .section-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
  }
}


/* Ensure wrappers fill grid cell */
.section-list .card-menu-wrapper {
  width: 100% !important;
}

/* View Mode Toggles */
.section-list.list-view {
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem;
}

.section-list.grid-view {
  display: grid !important;
}
</style>



<!-- inicio: CAMBIO PRINCIPAL -->
<div class="row u4-2">
    <div class="col-lg-7 u4 u4-2-1">
        <div class="card card-modern m-b-5">
            <!-- Nav tabs -->
            <?php if (Session::get('rol') != 5): ?>
                <ul class="nav nav-tabs customtab" role="tablist">
                    <li class="nav-item tab01"><a class="nav-link active" data-toggle="tab" href="#tabp-1" role="tab"><span class="hidden-sm-up">Mesas</span><span class="hidden-xs-down">Mesas</span></a></li>
                    <li class="nav-item tab02"><a class="nav-link" data-toggle="tab" href="#tabp-2" role="tab" onclick="mostrador()"><span class="hidden-sm-up">Para llevar</span><span class="hidden-xs-down">Para llevar</span></a></li>
                    <?php if (Session::get('rol') <> 10) { ?>
                        <li class="nav-item tab03"><a class="nav-link" data-toggle="tab" href="#tabp-3" role="tab" onclick="delivery()"><span class="hidden-sm-up">Delivery</span><span class="hidden-xs-down">Delivery <span class="label label-rounded label-inverse pedidos-total-1">0</span></span></a></li>
                    <?php } ?>
                </ul>
            <?php else: ?>
                <div class="c-mozo-title">
                    <h2>mesas</h2>

                </div>

            <?php endif; ?>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane p-0 active" id="tabp-1" role="tabpanel">
                    <div class="d-flex justify-content-between pl-2 pr-2 align-items-end">
                        <ul class="nav nav-tabs tabs-horizontal" role="tablist">
                            <?php $cont = 1;
                            $cont_salon = 0;
                            foreach ($this->Salon as $key => $value): ?>
                                <li class="nav-item list-salones m-t-10">
                                    <a class="nav-link zonas" data-toggle="tab" href="#tab-<?php echo $value['id_salon']; ?>" role="tab" id="tab<?php echo $cont++; ?>" onclick="mesa_list(<?php echo $value['id_salon']; ?>)">
                                        <!-- <span class="hidden-sm-up"><?php $cont_salon = $cont_salon + 1;
                                                                        echo 'SA' . $cont_salon; ?></span> -->
                                        <span class="font-14"><?php echo $value['descripcion']; ?></span>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                        <div class="">
                            <div class="d-flex m-t-10 justify-content-end">

                                <div class="d-flex m-l-10">
                                    <form method="post" enctype="multipart/form-data" action="<?php echo URL; ?>venta/refrescar_mesas">
                                        <button class="btn btn-sm btn-primary-modern" type="submit" data-original-title="Refrescar mesas" data-toggle="tooltip" data-placement="left"><i class="fas fa-sync-alt"></i></button>
                                    </form>
                                    &nbsp;&nbsp;
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a class="dropdown-item opc-cambiar-mesa" href="#modal-cambiar-mesa" data-toggle="modal">Cambiar mesa</a>
                                            <a class="dropdown-item opc-mover-pedidos" href="#modal-mover-pedidos" data-toggle="modal">Mover pedidos</a>
                                        </div>
                                    </div>
                                    &nbsp;&nbsp;
                                    <button type="button" class="btn btn-sm btn-info btn-health-check" data-toggle="tooltip" data-placement="left" data-original-title="Health Check de impresi?n">
                                        <i class="fas fa-heartbeat"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="vtabs customvtab w-100">
                        <ul class="nav nav-tabs tabs-vertical hidden-xs-down d-none" role="tablist">
                            <?php $cont = 1;
                            $cont_salon = 0;
                            foreach ($this->Salon as $key => $value): ?>
                                <li class="nav-item list-salones m-t-10">
                                    <a class="nav-link" data-toggle="tab" href="#tab-<?php echo $value['id_salon']; ?>" role="tab" id="tab<?php echo $cont++; ?>" onclick="mesa_list(<?php echo $value['id_salon']; ?>)">
                                        <!-- <span class="hidden-sm-up"><?php $cont_salon = $cont_salon + 1;
                                                                        echo 'SA' . $cont_salon; ?></span> -->
                                        <span class="hidden-xs-down font-14"><?php echo $value['descripcion']; ?></span>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                        <div class="tab-content w-100" style="padding-bottom: 10px;">
                            <?php if (Session::get('rol') != 5): ?>
                                <div class="card-body display-estado-mesa p-t-10 p-b-0 mb-3 hidden-sm-down">
                                    <div class="row">
                                        <div class="m-t-5 ml-auto pr-1">
                                            <small class="label mesas-disponibles" style="background: #79df9d;" data-original-title="Mesa libre" data-toggle="tooltip" data-placement="right"><span id="mesa_libre">&nbsp;</span></small>
                                            <small class="label mesas-pago" style="background: #5a9bf3;" data-original-title="En proceso de pago" data-toggle="tooltip" data-placement="right"><span id="mesa_proceso">&nbsp;</span></small>
                                            <small class="label mesas-ocupadas" style="background: #e7444c;" data-original-title="Mesa ocupada" data-toggle="tooltip" data-placement="right"><span id="mesa_ocupada">&nbsp;</span></small>
                                        </div>
                                    </div>
                                </div>
                            <?php endif; ?>
                            <?php $cont = 1;
                            $co = 0;
                            foreach ($this->Salon as $key => $value): ?>
                                <div class="tab-pane tp<?php echo $cont++; ?>" id="tab-<?php echo $value['id_salon']; ?>" role="tabpanel">
                                    <div class="row">
                                        <div class="col-sm-12 scroll_mesas" data-toggle="buttons">
                                            <div class="list-mesas"></div>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tabp-2" role="tabpanel">
                    <ul class="nav nav-tabs customtab" role="tablist">
                        <li class="nav-item mostrador01" data-toggle="tooltip" data-placement="bottom" data-original-title="Esperando confirmaci&oacute;n"> <a class="nav-link active" data-toggle="tab" href="#mostrador01" role="tab"><span class="hidden-sm-up"><i class="fas fa-bullhorn"></i></span><span class="hidden-xs-down"><i class="fas fa-bullhorn font-20"></i></span></a> </li>
                        <li class="nav-item mostrador02" data-toggle="tooltip" data-placement="bottom" data-original-title="Pedidos en preparaci&oacute;n"> <a class="nav-link" data-toggle="tab" href="#mostrador02" role="tab"><span class="hidden-sm-up"><i class="fas fa-diagnoses"></i></span><span class="hidden-xs-down"><i class="fas fa-diagnoses font-20"></i></span></a> </li>
                        <li class="nav-item mostrador03" data-toggle="tooltip" data-placement="bottom" data-original-title="Pedidos entregados"> <a class="nav-link" data-toggle="tab" href="#mostrador03" role="tab"><span class="hidden-sm-up"><i class="fas fa-hands-helping"></i></span><span class="hidden-xs-down"><i class="fas fa-hands-helping font-20"></i></span></a> </li>
                    </ul>
                    <!-- Tab panes -->
                     
                    <div class="tab-content">
                        <div class="tab-pane m-b-10 active" id="mostrador01" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b modern-status-header" style="display: flex;">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ESPERANDO CONFIRMACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-mostrador-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_e" id="search_filter_e" autocomplete="off" placeholder="Buscar pedido">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-mostrador-confirmacion" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="60%">Cliente</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="mostrador02" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b modern-status-header" style="display: flex;">
                                    <h6 class="text-inverse font-medium"><i class="ti-more"></i> EN PREPARACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-mostrador-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_f" id="search_filter_f" autocomplete="off" placeholder="Buscar pedido">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-mostrador-preparacion" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="20%">Tiempo</th>
                                                <th width="45%">Cliente</th>
                                                <th width="35%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="mostrador03" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b modern-status-header" style="display: flex;">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ENTREGADOS</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-mostrador-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_g" id="search_filter_g" autocomplete="off" placeholder="Buscar pedido">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-mostrador-entregados" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="45%">Cliente</th>
                                                
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tabp-3" role="tabpanel">
                    <div class="card-body display-estado-pedidos p-t-10 p-b-0">
                        <div class="row">
                            <div class="col-md-5 col-8 align-self-center m-t-5">
                                <small class="label label-warning" data-original-title="Pedido para atenci&oacute;n" data-toggle="tooltip" data-placement="right">&nbsp;</small>
                                <small class="label label-primary" data-original-title="Pedido programado" data-toggle="tooltip" data-placement="right">&nbsp;</small>
                            </div>
                            <div class="col-md-7 col-4 align-self-center">
                                <div class="d-flex m-t-10 justify-content-end">
                                    <div class="d-flex m-l-10">
                                        <button class="btn btn-sm btn-primary-modern" onclick="list_categorias_menu();"><i class="fas fa-clipboard-list"></i> Lista de productos</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="m-b-0 display-estado-pedidos">
                    <ul class="nav nav-tabs customtab" role="tablist">
                        <li class="nav-item delivery01" data-toggle="tooltip" data-placement="top" data-original-title="Esperando confirmaci&oacute;n"> <a class="nav-link active" data-toggle="tab" href="#delivery01" role="tab"><span class="hidden-sm-up"><i class="fas fa-bullhorn"></i></span><span class="hidden-xs-down"><i class="fas fa-bullhorn font-20"></i> <span class="label label-rounded label-inverse pedidos-total-1">0</span></span></a> </li>
                        <li class="nav-item delivery02" data-toggle="tooltip" data-placement="top" data-original-title="Pedidos en preparaci&oacute;n"> <a class="nav-link" data-toggle="tab" href="#delivery02" role="tab"><span class="hidden-sm-up"><i class="fas fa-diagnoses"></i></span><span class="hidden-xs-down"><i class="fas fa-diagnoses font-20"></i></span></a> </li>
                        <?php if (Session::get('rol') <> 5) { ?>
                            <li class="nav-item delivery03" data-toggle="tooltip" data-placement="top" data-original-title="Pedidos en camino"> <a class="nav-link" data-toggle="tab" href="#delivery03" role="tab"><span class="hidden-sm-up"><i class="fas fa-motorcycle"></i></span><span class="hidden-xs-down"><i class="fas fa-motorcycle font-20"></i></span></a> </li>
                            <li class="nav-item delivery04" data-toggle="tooltip" data-placement="top" data-original-title="Pedidos entregados"> <a class="nav-link" data-toggle="tab" href="#delivery04" role="tab"><span class="hidden-sm-up"><i class="fas fa-hands-helping"></i></span><span class="hidden-xs-down"><i class="fas fa-hands-helping font-20"></i></span></a> </li>
                        <?php } ?>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane m-b-10 active" id="delivery01" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #ffcb91;">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ESPERANDO CONFIRMACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_a" id="search_filter_a" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-confirmacion" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="delivery02" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #ffefa1;">
                                    <h6 class="text-inverse font-medium"><i class="ti-more"></i> EN PREPARACION</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_b" id="search_filter_b" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-preparacion" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="delivery03" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #94ebcd;">
                                    <h6 class="text-inverse font-medium"><i class="ti-more"></i> EN CAMINO |&nbsp;Nota:&nbsp;<h6 class="text-black font-italic">Todos los pedidos de esta lista, faltan entregar el dinero.</h6>
                                    </h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_c" id="search_filter_c" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-enviados" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane m-b-10" id="delivery04" role="tabpanel">
                            <div class="p-0">
                                <div class="p-l-10 p-t-10 b-b" style="display: flex; background: #6ddccf;">
                                    <h6 class="text-white font-medium"><i class="ti-more"></i> ENTREGADOS</h6>
                                </div>
                                <div class="card-body p-0">
                                    <div class="row floating-labels m-t-30">
                                        <div class="col-5 col-sm-3 col-lg-3">
                                            <div class="row text-center m-t-0 p-l-10 p-r-10">
                                                <div class="col-lg-12 col-md-12 col-sm-12 m-b-20">
                                                    <h5 class="m-b-5 font-30 font-normal text-warning pedidos-total"></h5>
                                                    <h6 class="font-bold">Pedidos</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-9 col-lg-9">
                                            <div class="row">
                                                <div class="form-group col-12 m-b-20">
                                                    <input type="text" class="form-control form-control-modern search_filter_d" id="search_filter_d" autocomplete="off" placeholder="Buscar pedido">
                                                    <span class="bar"></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive">
                                    <table id="list-delivery-entregados" class="table table-modern table-condensed table-hover stylish-table b-t" cellspacing="0" width="100%">
                                        <thead class="table-head">
                                            <tr>
                                                <th width="10%">Pedido</th>
                                                <th width="15%">Tiempo</th>
                                                <th width="30%">Cliente</th>
                                                <th width="15%">Entrega</th>
                                                <th width="15%">Pago</th>
                                                <th width="15%" class="text-right">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody class="tb-st"></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-5 u4">
        <div class="card card_height m-b-0" style="background:rgb(80, 80, 80);">
            <form id="form-nuevo-pedido" method="post" enctype="multipart/form-data" class="form-nuevo-pedido">
                <input type="hidden" class="id-mesa" name="id_mesa" id="id_mesa">

                <!-- aside_inicio: lista de pedidos por mesa -->

                <div class="card-header card-body-right p-b-10 custom-bg-primary rounded-top" style="display: none">
                    <div class="d-flex flex-wrap align-items-center" style="gap:.5rem">
                        <div>
                            <h4 class="card-title m-b-0" style="font-weight: 600; color: #6a6a6a">
                                <span class="pedido-numero-icono"></span>
                                <span class="pedido-numero text-white">Detalle</span>
                                <input type="hidden" id="nombre_mozo" value="" />
                            </h4>
                        </div>

                        <div class="ml-auto pedido-mozo text-white" style="display: none;">
                            <div class="d-flex align-items-center" style="gap:1rem">
                                <span>
                                    <i class="fa fa-user font-16 pedido-mozo" data-original-title="" data-toggle="tooltip" data-placement="top"></i>
                                </span>
                                <button class="btn btn-xs btn-primary hidden-xs-down imprimir_precuenta">
                                    <span>
                                        <i class="fas fa-print font-16" data-original-title="" data-toggle="tooltip" data-placement="top"></i>
                                    </span>
                                </button>
                                <div class="dropdown">
                                    <button class="btn btn-warning dropdown-toggle" type="button" id="btnDropdownComandas"
                                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fas fa-print"></i>
                                    </button>

                                    <div class="dropdown-menu" id="imprimir_comandas" aria-labelledby="btnDropdownComandas">
                                        <!-- Aquí se llenará la lista -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="ml-auto ticket_reparto text-white" >
                            <div class="d-flex align-items-center" style="gap:1rem">
                                <button class="btn btn-xs btn-primary hidden-xs-down imprimir_ticket_reparto">
                                    <span>
                                        <i class="fas fa-print font-16" data-original-title="" data-toggle="tooltip" data-placement="top"></i>
                                    </span>
                                </button>
                                
                            </div>
                        </div>

                        <div class="ml-auto display-pedido-programado" style="display: none;">
                            <div class="col-md-12">
                                <input type="checkbox" name="pedido_programado" id="pedido_programado" class="chk-col-red pedido_programado" value="0" />
                                <label for="pedido_programado" class="m-b-0">Programado</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Actualizaciones fuertes de la UI -->
                <div class="card-settings card-body-right flex-column" style="display: none; padding: 4px 8px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1);">
                    <div class="d-flex justify-content-between align-items-center sale-top-controls">
                        <div>
                            <div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
                                <?php
                                // Inicializar la variable antes del foreach
                                $tdoc_defecto = null;

                                // Buscar el documento por defecto antes de generar los botones
                                foreach ($this->TipoDocumento as $key) {
                                    if ($key['defecto'] == '1') {
                                        $tdoc_defecto = $key['id_tipo_doc'];
                                        break; // Detener la búsqueda en cuanto lo encontramos
                                    }
                                }

                                // Ahora recorrer nuevamente para generar los botones
                                foreach ($this->TipoDocumento as $key):
                                ?>
                                    <label class="btn btn-secondary btn-tipo-doc-<?php echo $key['id_tipo_doc']; ?> <?php echo ($key['id_tipo_doc'] == $tdoc_defecto) ? 'active' : ''; ?>" style="font-size:12px; align-content:center">
                                        <input type="radio" name="tipo_doc" value="<?php echo $key['id_tipo_doc']; ?>" autocomplete="off" <?php echo ($key['id_tipo_doc'] == $tdoc_defecto) ? 'checked' : ''; ?>>
                                        <?php echo ($key['id_tipo_doc'] == 1) ? 'BOLETA' : $key['descripcion']; ?>
                                    </label>
                                <?php endforeach; ?>
                            </div>
                        </div>

                        <button type="button" class="btn btn-outline-secondary btn-sm mobile-config-toggle" id="btnToggleOpcionesVentaMobile" aria-expanded="false">
                            <i class="fas fa-sliders-h mr-1"></i> Opciones
                        </button>

                        <div class="d-flex sale-extra-controls" id="saleExtraControls" style="gap:.5rem">
                            <div class="display_venta_por_consumo">
                                <input type="checkbox" name="venta_por_consumo" id="venta_por_consumo" class="lever switch-col-light-green venta_por_consumo" />
                                <label for="venta_por_consumo" style="color:black;font-size:12px;padding: 0 0 0 26px;margin:0">POR CONSUMO</label>
                            </div>
                            <div class="display_venta_por_consumo">
                                <input type="checkbox" name="comision_tarjeta_venta" id="comision_tarjeta_venta" class="lever switch-col-light-green comision_tarjeta_venta" />
                                <label for="comision_tarjeta_venta" style="color:black;font-size:12px;padding: 0 0 0 26px;margin:0">COM TARJETA</label>
                            </div>
                            <select class="selectpicker" name="tipo_pago" id="tipo_pago" data-style="form-control btn-secondary" data-width="50%" data-size="4" data-live-search-style="begins" data-live-search="true" autocomplete="off">
                                <?php foreach ($this->TipoPago as $key => $value): ?>
                                    <option style="font-size:12px" label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="d-flex justify-content-around" style="margin:0">
                        <div style="width:100%">
                            <input type="hidden" name="cliente_id" id="cliente_id" value="1" />
                            <input type="hidden" name="cliente_documento" id="cliente_documento" value="" />
                            <input type="hidden" name="cliente_tipo" id="cliente_tipo" value="1" />
                            <label class="font-10">BUSCAR CLIENTE</label>
                            <div class="input-group">
                                <div class="opcion-cliente input-group-prepend"></div>

                                <input type="text" class="form-control" name="buscar_cliente" id="buscar_cliente" autocomplete="off">
                                <a class="input-group-append" href="javascript:void(0)" id="btnClienteLimpiar" data-original-title="Limpiar datos" data-toggle="tooltip" data-placement="top">
                                    <span class="input-group-text bg-header">
                                        <small><i class="fas fa-times link-danger"></i></small>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body p-0 min-height-0" style="overflow-y: scroll">
                    <!-- NEW TOP INPUTS -->


                    <div class="scroll_pedidos">
                        <div class="cont01 justify-center" style="height: 100%;">
                            <div class="text-center cont01-1">
                                <h2 class="text-white"><i class="ti ti-arrow-circle-left"></i></h2>
                                <h4 class="text-white">Seleccione <b class="nomPed">una mesa</b></h4>
                                <h6 class="text-white text-center">para ingresar o visualizar pedidos</h6>
                            </div>
                            <div class="text-center cont01-2" style="display: none;">
                                <!-- Botón para agregar nuevo delivery -->
                                <h2 class="text-white"><button type="button" class="btn btn-circle btn-lg btn-primary-modern waves-effect waves-dark btn-nuevo-pedido"><i class="ti-plus"></i></button></h2>
                                <h4 class="text-white m-b-0">Nuevo pedido</h4>
                            </div>
                        </div>

                        <!-- INICIO: Contenedor para los DELIVERY -->
                        <div class="cont02 m-t-20" style="display: none;">
                            <div class="row p-t-0 p-l-20 p-r-20 p-b-10">
                                <div class="col-md-12 m-b-40 display-tipo-entrega" style="display: none;">
                                    <label class="font-13 text-inverse">Tipo de entrega</label>
                                    <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                        <label class="btn waves-effect waves-light btn-tipo-entrega-1 btn-secondary active">
                                            <input type="radio" name="tipo_entrega" id="tipo_entrega_1" value="1" autocomplete="off" checked> A DOMICILIO
                                        </label>
                                        <label class="btn waves-effect waves-light btn-tipo-entrega-2 btn-secondary">
                                            <input type="radio" name="tipo_entrega" id="tipo_entrega_2" value="2" autocomplete="off"> POR RECOGER
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6 display-hora-entrega floating-labels" style="display: none;">
                                    <div class="form-group m-b-40">
                                        <select class="selectpicker form-control bg-t" name="hora_entrega" id="hora_entrega" data-style="form-control btn-default" title="Seleccionar" data-live-search="true" autocomplete="off" data-size="5" required>
                                            <optgroup>
                                                <option value="10:00:00">10:00 AM</option>
                                                <option value="10:30:00">10:30 AM</option>
                                                <option value="11:00:00">11:00 AM</option>
                                                <option value="11:30:00">11:30 AM</option>
                                                <option value="12:00:00">12:00 AM</option>
                                                <option value="12:30:00">12:30 AM</option>
                                                <option value="13:00:00">01:00 PM</option>
                                                <option value="13:30:00">01:30 PM</option>
                                                <option value="14:00:00">02:00 PM</option>
                                                <option value="14:30:00">02:30 PM</option>
                                                <option value="15:00:00">03:00 PM</option>
                                                <option value="15:30:00">03:30 PM</option>
                                                <option value="16:00:00">04:00 PM</option>
                                                <option value="16:30:00">04:30 PM</option>
                                                <option value="17:00:00">05:00 PM</option>
                                                <option value="17:30:00">05:30 PM</option>
                                                <option value="18:00:00">06:00 PM</option>
                                                <option value="18:30:00">06:30 PM</option>
                                                <option value="19:00:00">07:00 PM</option>
                                                <option value="19:30:00">07:30 PM</option>
                                                <option value="20:00:00">08:00 PM</option>
                                                <option value="20:30:00">08:30 PM</option>
                                                <option value="21:00:00">09:00 PM</option>
                                                <option value="21:30:00">09:30 PM</option>
                                                <option value="22:00:00">10:00 PM</option>
                                                <option value="22:30:00">10:30 PM</option>
                                            </optgroup>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="hora_entrega">Hora de entrega</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-telefono-cliente floating-labels" style="display: none;">
                                    <div class="form-group m-b-20">
                                        <input type="text" class="form-control bg-t" name="telefono_cliente" id="telefono_cliente" autocomplete="off" required />
                                        <label for="telefono_cliente">Teléfono</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-nombre floating-labels" style="display: none;">
                                    <div class="form-group letMayMin m-t-20 m-b-40">
                                        <input type="text" class="form-control input-mayus bg-t" name="nomb_cliente" id="nomb_cliente" autocomplete="off" required />
                                        <label for="nomb_cliente">Nombre cliente</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-4 display-nombre floating-labels" style="display: none;">
                                    <div class="form-group letMayMin m-t-20 m-b-40">
                                        <select class="selectpicker form-control bg-t" name="id_tdoc" id="id_tdoc" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true">
                                            <option value="1" selected="">DNI</option>
                                            <option value="2">RUC</option>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="nomb_cliente"> Tipo Documento</label>
                                    </div>
                                </div>
                                <div class="col-12 col-md-8 display-nombre floating-labels" style="display: none;">
                                    <div class="form-group tdocInput m-t-20 m-b-40">
                                        <input type="text" class="form-control bg-t" name="num_cliente" id="num_cliente" autocomplete="off" />
                                        <span class="bar"></span>
                                        <label for="num_cliente">Número</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-direccion-cliente floating-labels" style="display: none;">
                                    <div class="form-group m-b-40">
                                        <input type="text" class="form-control input-mayus bg-t" name="direccion_cliente" id="direccion_cliente" autocomplete="off" required />
                                        <label for="direccion_cliente">Dirección</label>
                                    </div>
                                </div>
                                <div class="col-md-12 display-referencia-cliente floating-labels" style="display: none;">
                                    <div class="form-group m-b-0">
                                        <input type="text" class="form-control input-mayus bg-t" name="referencia_cliente" id="referencia_cliente" autocomplete="off" required />
                                        <label for="referencia_cliente">Referencia</label>
                                    </div>
                                </div>
                                <div class="col-sm-12 display-repartidor floating-labels" style="display: none;">
                                    <div class="form-group m-t-40 m-b-0">
                                        <select class="selectpicker form-control bg-t" name="id_repartidor" id="id_repartidor" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                            <?php foreach ($this->Repartidor as $key => $value): ?>
                                                <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                            <?php endforeach; ?>
                                            <?php if (Session::get('opc_01') == 1) { ?>
                                                <optgroup>
                                                    <option value="2222">DIDI FOOD</option>
                                                    <!-- <option value="3333">UBER</option> -->
                                                    <option value="4444">PEDIDOS YA</option>
                                                </optgroup>
                                            <?php } ?>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="id_repartidor">Repartidor</label>
                                    </div>
                                </div>
                                <div class="col-sm-12 display-personas floating-labels" style="display: none;">
                                    <div class="form-group m-t-20 m-b-40">
                                        <input id="tch3" name="nro_personas" type="text" value="1" class="form-control text-center bg-t numero-personas" style="border-bottom: 1px solid #d9d9d9;" readonly />
                                        <label form="tch3">Nro de personas</label>
                                    </div>
                                </div>
                                <div class="col-sm-12 display-mozo floating-labels" style="display: none;">
                                    <div class="form-group m-b-40">
                                        <select class="selectpicker form-control bg-t" name="id_mozo" id="id_mozo" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true">
                                            <?php foreach ($mozosDisponibles as $key => $value): ?>
                                                <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                        <span class="bar"></span>
                                        <label for="id_mozo">Mozo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- FIN: Contenedor para los DELIVERY -->

                        <div class="cont03 comment-widgets m-t-4 d-flex flex-column g-medio h-100 overflow-auto" id="list-pedidos" style="display: none;height: 80%;"></div>

                        <div class="cont04 m-t-5" style="display: none;">
                            <div class="p-l-20 p-r-20">
                                <table class="table browser no-border">
                                    <tbody>
                                        <tr>
                                            <td class="text-muted" width="120px;">Cliente</td>
                                            <td class="text-left font-medium pedido-cliente"></td>
                                        </tr>
                                        <tr class="display-delivery" style="display: none;">
                                            <td class="text-muted">Tel&eacute;fono</td>
                                            <td class="text-left pedido-telefono"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-email" style="display: none;">
                                            <td class="text-muted">Email</td>
                                            <td class="text-left pedido-email"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-direccion" style="display: none;">
                                            <td class="text-muted">Direcci&oacute;n</td>
                                            <td class="text-left pedido-direccion"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-referencia" style="display: none;">
                                            <td class="text-muted">Referencia</td>
                                            <td class="text-left pedido-referencia"></td>
                                        </tr>
                                        <tr class="display-delivery" style="display: none;">
                                            <td class="text-muted" width="120px;">Entrega</td>
                                            <td class="text-left font-medium pedido-tipo-entrega"></td>
                                        </tr>
                                        <tr class="display-delivery display-hora-entrega" style="display: none;">
                                            <td class="text-muted" width="120px;">Hora</td>
                                            <td class="text-left font-medium pedido-hora-entrega"></td>
                                        </tr>
                                        <tr class="display-delivery display-pedido-repartidor" style="display: none;">
                                            <td class="text-muted">Repartidor</td>
                                            <td class="text-left pedido-repartidor"></td>
                                        </tr>
                                        <!-- <tr class="display-delivery display-pedido-pago" style="display: none;">
                                            <td class="text-muted">Tipo pago</td>
                                            <td class="text-left pedido-pago"></td>
                                        </tr> -->
                                        <tr class="display-pedido-monto">
                                            <td class="text-muted">Monto total</td>
                                            <td class="text-left pedido-total"></td>
                                        </tr>
                                        <!-- <tr class="display-delivery display-pedido-total-amortizado" style="display: none;">
                                            <td class="text-muted">Monto amortizado</td>
                                            <td class="text-left pedido-total-amortizado"></td>
                                        </tr> -->
                                    </tbody>
                                </table>
                            </div>
                            <div class="p-l-10 p-t-10 b-b b-t bg-light-inverse" style="display: flex;">
                                <h6 class="text-inverse font-medium">Productos</h6>
                            </div>
                            <div class="comment-widgets m-t-0" id="list-pedidos-detalle"></div>
                        </div>
                    </div>
                    <div id="static-list-pedidos" style="display: none;">
                        <div class="comment-widgets m-t-4 d-flex flex-column g-medio h-100 overflow-auto" style="display: none">
                            <div class="d-flex flex-row comment-list por_consumo">
                                <div class="w-100 d-flex justify-content-between align-items-end r-order-item">
                                    <div class="r-details">
                                        
                                        <p class="order-name mb-0" id="order-name-por_consumo">
                                            POR CONSUMOs
                                        </p>
                                        
                                        <input type="text" id="input_por_consumo" style="display: none; width: 100%;" value="POR CONSUMO" placeholder="Escribe tu comentario...">
                                        <p class="order-units m-b-0 font-13">
                                            1 Unidad(es)
                                        </p>
                                    </div>
                                    <div class="price">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- NEW LOCATION FOR PAYMENT INPUTS - FIXED ABOVE FOOTER -->
                <style>
                /* Responsive Grid for Payment Inputs */
                #payment-inputs-top .d-flex.flex-wrap {
                    display: grid !important;
                    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
                    gap: 10px !important;
                }
                
                #payment-inputs-top .input-group {
                    flex: unset !important;
                    min-width: unset !important;
                    width: 100% !important;
                    margin-bottom: 0 !important;
                }
                </style>
                <div id="payment-inputs-top" style="padding: 10px; background: #fff; border-top: 1px solid #ddd; display: none;">
                    
                    <!-- Quick Cash Buttons (Single Row) -->
                    <div id="fast-cash-container" class="d-flex flex-nowrap mb-1 align-items-center text-center" style="gap: 2px; display: none; overflow-x: auto;">
                        <button type="button" class="btn btn-sm btn-outline-info btn-fast-cash py-1 px-1 flex-fill" data-amount="exact" style="font-weight: bold; font-size: 9px; white-space: nowrap;">EXACTO</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary btn-fast-cash py-1 px-1 flex-fill" data-amount="10" style="font-size: 10px;">S/ 10</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary btn-fast-cash py-1 px-1 flex-fill" data-amount="20" style="font-size: 10px;">S/ 20</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary btn-fast-cash py-1 px-1 flex-fill" data-amount="50" style="font-size: 10px;">S/ 50</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary btn-fast-cash py-1 px-1 flex-fill" data-amount="100" style="font-size: 10px;">S/ 100</button>
                        <button type="button" class="btn btn-sm btn-outline-secondary btn-fast-cash py-1 px-1 flex-fill" data-amount="200" style="font-size: 10px;">S/ 200</button>
                    </div>

                     <div class="d-flex flex-wrap" style="gap: 10px;">
                            <?php
                            // Configuración de colores y etiquetas basada en ID
                            $paymentConfig = [
                                1 => ['id' => 'pago_efe',  'label' => 'EFE',   'color' => '#28a745', 'show' => true],
                                2 => ['id' => 'pago_tar',  'label' => 'TAR',   'color' => '#17a2b8', 'show' => true],
                                // 3 (Mixto) y 4 (Culqi) se saltan
                                5 => ['id' => 'pago_yape', 'label' => 'YAPE',  'color' => '#6f42c1', 'show' => true],
                                7 => ['id' => 'pago_tran', 'label' => 'TRANS', 'color' => '#6f42c1', 'show' => true],
                                8 => ['id' => 'pago_plin', 'label' => 'PLIN',  'color' => '#6f42c1', 'show' => true]
                            ];

                            foreach ($this->TipoPago as $tipo) {
                                $dbId = (int)$tipo['id_tipo_pago'];
                                
                                // Saltamos Mixto (3) y Culqi (4)
                                if ($dbId == 3 || $dbId == 4) continue;

                                // Determinar configuración (usar mapa o por defecto)
                                $config = isset($paymentConfig[$dbId]) ? $paymentConfig[$dbId] : [
                                    'id' => 'pago_gen_' . $dbId,
                                    'label' => strtoupper(substr($tipo['descripcion'], 0, 4)),
                                    'color' => '#6c757d', // Gris por defecto
                                    'show' => true
                                ];
                                ?>
                                
                                <div class="input-group display-pago-<?php echo ($dbId == 1) ? 'efectivo' : 'tarjeta'; ?>" 
                                     style="flex: 1; min-width: 120px;">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text text-white" 
                                              style="background-color: <?php echo $config['color']; ?>; border-color: <?php echo $config['color']; ?>; font-weight: bold; padding: 0 10px;">
                                            <?php echo $config['label']; ?>
                                        </span>
                                    </div>
                                    <input type="text" 
                                           class="form-control <?php echo ($dbId == 1) ? 'display-pago-efectivo' : 'display-pago-tarjeta'; ?> doble_clic" 
                                           style="text-align: right; font-weight: bold;" 
                                           name="<?php echo $config['id']; ?>" 
                                           id="<?php echo $config['id']; ?>" 
                                           value="<?php echo ($dbId == 1) ? '' : '0.00'; ?>"
                                           autocomplete="off">
                                </div>

                            <?php } ?>
                            
                                <!-- Voucher input always present, logic handled by JS -->
                                <div class="input-group display-codigo-operacion" style="flex: 1; min-width: 150px;">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-white" id="label-voucher" style="font-size: 11px; font-weight: bold;">COD OP</span>
                                </div>
                                <input type="text" class="form-control" name="cod_voucher" id="cod_voucher_new" autocomplete="off" placeholder="Ingrese código...">
                            </div>

                    </div>
                </div>

                <div class="card-footer card-footer-right m-t-4" style="display: none; padding: .6rem .5rem">
                    <div style="display: flex; width: 100%; justify-content: space-between; gap: 1rem">
                        <div class="d-flex flex-column" style="gap: .5rem; width: 100%">
                            <div class="d-flex justify-content-around">
                                <div style="width:100%">
                                    <div class="mensaje-pago" style="display: none;"></div>

                                    <div id="content_pagos" style="display: none; width: 100%;">
    


                                        <!-- Totals Section - Responsive Grid Layout -->
                                        <div class="d-flex flex-wrap justify-content-between align-items-center w-100 p-2 footer-sales-summary" style="background: transparent; border-top: 1px solid #dee2e6;">
                                            
                                            <!-- Sub Total -->
                                            <div class="text-center flex-fill" style="min-width: 80px;">
                                                <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">SUB TOTAL</small>
                                                <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> <span class="SubtotalPedido">0.00</span></span>
                                            </div>

                                            <!-- Descuento -->
                                            <div class="text-center flex-fill display-descuento" style="min-width: 80px;">
                                                <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">DESCUENTO</small>
                                                <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> <span class="totalDescuento">0.00</span></span>
                                            </div>

                                            <!-- Delivery -->
                                            <div class="text-center flex-fill display-delivery" style="min-width: 80px;">
                                                <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">DELIVERY</small>
                                                <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> <span class="totalDelivery">0.00</span></span>
                                            </div>
                                            
                                            <!-- Comision (Hidden by default) -->
                                            <div class="text-center flex-fill view_comision_tarjeta" style="display: none; min-width: 80px;">
                                                <small class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">COMISIÓN</small>
                                                <span class="font-bold text-dark font-14"><?php echo Session::get('moneda'); ?> <span class="comisionTarjeta">0.00</span></span>
                                            </div>

                                            <!-- Total (Primary) -->
                                            <div class="text-center flex-fill" style="min-width: 90px;">
                                                <small class="text-muted font-bold d-block" style="font-size: 11px; text-transform: uppercase; color: #000;">TOTAL</small>
                                                <span class="font-bold text-success font-16">
                                                    <?php echo Session::get('moneda'); ?> <span class="totalPedidoMenosTarjeta">0.00</span>
                                                </span>
                                            </div>

                                            <!-- Vuelto -->
                                            <div class="text-center flex-fill" style="min-width: 80px;">
                                                <small id="label-vuelto" class="text-muted font-bold d-block" style="font-size: 10px; text-transform: uppercase;">VUELTO</small>
                                                <span class="font-bold text-info font-14"><?php echo Session::get('moneda'); ?> <span id="vuelto">0.00</span></span>
                                            </div>
                                            
                                            <!-- Hidden Inputs for Calculation & Form Submission -->
                                            <input type="hidden" name="descuento_monto_hidden" id="descuento_monto_hidden" class="descuento" value="0.00">
                                            <input type="hidden" name="descuento_tipo_hidden" id="descuento_tipo_hidden" value="">
                                            <input type="hidden" name="descuento_motivo_hidden" id="descuento_motivo_hidden" value="">
                                            <input type="hidden" name="descuento_personal_hidden" id="descuento_personal_hidden" value="">
                                            <input type="hidden" name="comision_delivery" id="comision_delivery" class="comision_delivery" value="0.00">
                                            <input type="hidden" name="comision_tarjeta" id="comision_tarjeta" class="comision_tarjeta" value="0.00">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-between" style="justify-content: space-between;">
                                <div>
                                    <span class="btn-agregar-productos" data-toggle="tooltip" data-placement="top" data-original-title="Agregar platos"></span>
                                    <button type="button" class="btn btn-secondary btn-cancelar-pedido" data-toggle="tooltip" data-placement="top" data-original-title="Regresar"><i class="fas fa-undo-alt"></i></button>
                                    <button type="button" id="openDialog" class="btn btn-secondary openDialogBtn" data-toggle="tooltip" data-placement="top" data-original-title="Descuento y comisión" style="background:#fdbf79; color:#5f5f5f;border:none"><i class="fas fa-gift"></i></button>
                                    <div class="btn-group display-opciones-pedido" style="display: none;">
                                        <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <div class="dropdown-menu">
                                            <a href="javascript:void(0);" class="dropdown-item opc-ticket-pedido"><i class="fa fa-list"></i> Ticket reparto</a>
                                            <a href="javascript:void(0);" class="dropdown-item opc-whatsapp-pedido"><i class="fab fa-whatsapp"></i> Enviar mensaje</a>
                                            <div class="opc-editar-pedido"></div>
                                            <div class="opc-facturar-pedido"></div>
                                            <div class="opc-print-pedido"></div>
                                            <a href="javascript:void(0);" class="dropdown-item opc-anular-pedido"><i class="fas fa-trash"></i> Anular pedido</a>
                                        </div>
                                    </div>
                                    <button type="button" id="openDialogDelivery" class="btn btn-secondary openDialogBtnDelivery" data-toggle="tooltip" data-placement="top" data-original-title="Delivery" style="background:#ffa9a3;border:none;display:none"><i class=" fas fa-shipping-fast"></i></button>
                                </div>

                                <div>
                                    <span class="btn_cancelar_pedido" data-toggle="tooltip" data-placement="top" data-original-title="Cancelar pedido"></span>
                                    <span class="btn-submit-dividir-cuenta" data-toggle="tooltip" data-placement="top" data-original-title="Dividir cuenta"></span>
                                    <!-- BOTÓN DE COBRAR (verde) QUE SE HA REEMPLAZADO -->
                                    <span class="btn-submit-cobrar" data-toggle="tooltip" data-placement="top" data-original-title="Realizar pago"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Inicio: modal de descuentos por consumo -->
                        <dialog class="dialogBtn modern-dialog">

                            <table class="table table-condensed modal-discount-table">
                                <thead>
                                    <tr class="display-icbpr">
                                        <th class="p-b-5">Impuesto a la bolsa - ICBPER</th>
                                        <th class="text-right p-b-5">
                                        <div class="input-group input-group-sm">
                                                
                                                <input
                                                type="text"
                                                id="impuesto_bolsa"
                                                class="form-control decimal-only"
                                                placeholder="0.00"
                                                pattern="^\d*(\.\d*)?$"
                                                >
                                                <span class="input-group-text">S/</span>
                                            </div>
                                        </th>
                                    </tr>
                                    
                                    <tr class="display-descuento">
                                        <th class="p-b-5"><a href="javascript:void(0);" onclick="descuento_factura()" class="link">Cortes&iacute;a / Descuento <i class="ti-info-alt text-warning font-10" data-original-title="Puede generar una cortesia o ingresar un descuento por aquí" data-toggle="tooltip" data-placement="top"></i></a></th>
                                        <th class="text-right p-b-5">
                                            <span><?php echo Session::get('moneda'); ?>
                                                <span class="descuento">0.00</span>
                                            </span>
                                        </th>
                                    </tr>
                                    <tr class="display-descuento">
                                        <th class="p-b-5">Tipo</th>
                                        <th class="text-right p-b-5">
                                        <select id="tipo_descuento_select" class="form-control">
                                            <option value="0" selected>Seleccionar</option>
                                            <option value="1">Cortesía</option>
                                            <option value="2">Descuento</option>
                                            <option value="3">Crédito Personal</option>
                                        </select>
                                        </th>
                                    </tr>

                                    <tr class="display-personal" style="display: none;">
                                        <th class="p-b-5">Personal</th>
                                        <th class="text-right p-b-5">
                                        <select id="personal_descuento" class="form-control">
                                            
                                        </select>
                                        </th>
                                    </tr>

                                    <tr class="display-descuento-monto" style="display: none;">
                                        <th class="p-b-5">Monto</th>
                                        <th class="text-right p-b-5">
                                            <div class="d-flex flex-column align-items-end gap-1">
                                            <!-- Control % -->
                                            <div class="input-group input-group-sm" >
                                                <input
                                                type="number"
                                                id="descuento_porcentaje"
                                                class="form-control"
                                                placeholder="0"
                                                >
                                                <span class="input-group-text">%</span>
                                            </div>
                                            <!-- Control S/ -->
                                            <div class="input-group input-group-sm">
                                                
                                                <input
                                                type="text"
                                                id="descuento_monto_fijo"
                                                class="form-control decimal-only"
                                                placeholder="0.00"
                                                pattern="^\d*(\.\d*)?$"
                                                >
                                                <span class="input-group-text">S/</span>
                                            </div>
                                            </div>
                                        </th>
                                    </tr>

                                    
                                    <!-- 3) Motivo -->
                                    <tr id="fila_motivo_descuento" >
                                        <th class="p-b-5">Motivo</th>
                                        <th class="text-right p-b-5">
                                        <textarea id="descuento_motivo" class="form-control" rows="2" placeholder="Escribe el motivo…"></textarea>
                                        </th>
                                    </tr>
                                    
                                    <tr class="display-comision-delivery">
                                        <th class="p-b-5">Comision delivery</th>
                                        <th class="text-right p-b-5">
                                        <div class="input-group input-group-sm">
                                                
                                                <input
                                                type="text"
                                                id="comision_delivery_input"
                                                class="form-control decimal-only"
                                                placeholder="0.00"
                                                pattern="^\d*(\.\d*)?$"
                                                >
                                                <span class="input-group-text">S/</span>
                                            </div>
                                        </th>
                                    </tr>

                                    <tr id="fila_observacion" >
                                        <th class="p-b-5">Observación</th>
                                        <th class="text-right p-b-5">
                                        <textarea id="observacion_dialog" class="form-control" rows="2" placeholder="Escribe la observación"></textarea>
                                        </th>
                                    </tr>
                                    
                                </thead>
                            </table>

                            <div class="dialog-actions">
                                <button type="button" class="btn btn-secondary closeDialogBtn">Cancelar</button>
                                <button type="button" id="btn_descuentos" class="btn btn-success-modern">Aceptar</button>
                            </div>
                        </dialog>
                        <!-- Fin: modal de descuentos por consumo -->

                        <!-- Inicio: modal de delivery -->
                        <dialog class="dialogBtnDelivery col-md-6 col-sm-11" style="background: #fcf8ec;place-items:end;border:none;border-radius:8px;filter:drop-shadow(0 0 8px gray);">
                            <div class="row p-3">
                                <div class="col-md-12 m-b-40">
                                <label class="font-13 text-inverse">Tipo de entrega</label>
                                <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                    <label class="btn waves-effect waves-light btn-tipo-entrega-1 btn-secondary active">
                                    <input type="radio" name="tipo_entrega_modal" id="tipo_entrega_1_modal" value="1" autocomplete="off" checked> A DOMICILIO
                                    </label>
                                    <label class="btn waves-effect waves-light btn-tipo-entrega-2 btn-secondary">
                                    <input type="radio" name="tipo_entrega_modal" id="tipo_entrega_2_modal" value="2" autocomplete="off"> POR RECOGER
                                    </label>
                                </div>
                                </div>

                                <div class="col-md-7 floating-labels">
                                <div class="form-group m-b-40">
                                    <select class="selectpicker form-control bg-t" name="hora_entrega_modal" id="hora_entrega_modal" data-style="form-control btn-default" title="Seleccionar" data-live-search="true" autocomplete="off" data-size="5" required>
                                    <optgroup>
                                        <!-- Opciones de hora -->
                                        <option value="10:00:00">10:00 AM</option>
                                        <option value="10:30:00">10:30 AM</option>
                                        <option value="11:00:00">11:00 AM</option>
                                        <option value="11:30:00">11:30 AM</option>
                                        <option value="12:00:00">12:00 AM</option>
                                        <option value="12:30:00">12:30 AM</option>
                                        <option value="13:00:00">01:00 PM</option>
                                        <option value="13:30:00">01:30 PM</option>
                                        <option value="14:00:00">02:00 PM</option>
                                        <option value="14:30:00">02:30 PM</option>
                                        <option value="15:00:00">03:00 PM</option>
                                        <option value="15:30:00">03:30 PM</option>
                                        <option value="16:00:00">04:00 PM</option>
                                        <option value="16:30:00">04:30 PM</option>
                                        <option value="17:00:00">05:00 PM</option>
                                        <option value="17:30:00">05:30 PM</option>
                                        <option value="18:00:00">06:00 PM</option>
                                        <option value="18:30:00">06:30 PM</option>
                                        <option value="19:00:00">07:00 PM</option>
                                        <option value="19:30:00">07:30 PM</option>
                                        <option value="20:00:00">08:00 PM</option>
                                        <option value="20:30:00">08:30 PM</option>
                                        <option value="21:00:00">09:00 PM</option>
                                        <option value="21:30:00">09:30 PM</option>
                                        <option value="22:00:00">10:00 PM</option>
                                        <option value="22:30:00">10:30 PM</option>
                                    </optgroup>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="hora_entrega_modal">Hora de entrega</label>
                                </div>
                                </div>

                                <div class="col-md-5 floating-labels">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control form-control-modern input-mayus" name="comision_delivery_modal" id="comision_delivery_modal" autocomplete="off" />
                                    <span class="bar"></span>
                                    <label for="comision_delivery_modal">Comisión delivery</label>
                                </div>
                                </div>

                                <div class="col-md-7 floating-labels">
                                <div class="form-group letMayMin m-b-20">
                                    <input type="text" class="form-control form-control-modern input-mayus bg-t" name="nomb_cliente_modal" id="nomb_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="nomb_cliente_modal">Nombre cliente</label>
                                </div>
                                </div>

                                <div class="col-md-5 floating-labels">
                                <div class="form-group m-b-20">
                                    <input type="text" class="form-control form-control-modern bg-t" name="telefono_cliente_modal" id="telefono_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="telefono_cliente_modal">Teléfono</label>
                                </div>
                                </div>

                                <div class="col-4 floating-labels">
                                <div class="form-group letMayMin m-t-20 m-b-40">
                                    <select class="selectpicker form-control bg-t" name="id_tdoc_modal" id="id_tdoc_modal" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true">
                                    <option value="1">DNI</option>
                                    <option value="2">RUC</option>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="id_tdoc_modal">Tipo Doc.</label>
                                </div>
                                </div>

                                <div class="col-8 floating-labels">
                                <div class="form-group tdocInput m-t-20 m-b-40">
                                    <input type="text" class="form-control form-control-modern bg-t" name="num_cliente_modal" id="num_cliente_modal" autocomplete="off" />
                                    <span class="bar"></span>
                                    <label for="num_cliente_modal">Número</label>
                                </div>
                                </div>

                                <div class="col-md-12 floating-labels">
                                <div class="form-group m-b-40">
                                    <input type="text" class="form-control form-control-modern input-mayus bg-t" name="direccion_cliente_modal" id="direccion_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="direccion_cliente_modal">Dirección</label>
                                </div>
                                </div>

                                <div class="col-md-12 floating-labels">
                                <div class="form-group m-b-20">
                                    <input type="text" class="form-control form-control-modern input-mayus bg-t" name="referencia_cliente_modal" id="referencia_cliente_modal" autocomplete="off" required />
                                    <span class="bar"></span>
                                    <label for="referencia_cliente_modal">Referencia</label>
                                </div>
                                </div>

                                <div class="col-sm-12 floating-labels">
                                <div class="form-group m-t-20 m-b-20">
                                    <select class="selectpicker form-control bg-t" name="id_repartidor_modal" id="id_repartidor_modal" data-style="form-control btn-default" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Repartidor as $key => $value): ?>
                                        <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                    <?php endforeach; ?>
                                    <?php if (Session::get('opc_01') == 1) { ?>
                                        <optgroup>
                                        <option value="2222">DIDI FOOD</option>
                                        <option value="4444">PEDIDOS YA</option>
                                        </optgroup>
                                    <?php } ?>
                                    </select>
                                    <span class="bar"></span>
                                    <label for="id_repartidor_modal">Repartidor</label>
                                </div>
                                </div>
                            </div>

                            <div>
                            <button type="button" class="btn btn-secondary closeDialogBtnDelivery">Cancelar</button>
                            <button type="button" id="btnActualizarDataDelivery" class="btn btn-success-modern">Aceptar</button>
                        </div>
                        </dialog>

                        <!-- Fin: modal de delivery -->
                    </div>
                </div>
                <!-- aside_fin: lista de pedidos por mesa -->
            </form>
        </div>
    </div>
</div>
<!-- fin: CAMBIO PRINCIPAL -->

<div id="card2"></div>
<div class="">
    <button class="waves-effect waves-light btn-inverse btn btn-circle btn-sm btn-up" style="bottom: 50px"><i class="ti-arrow-circle-up text-white"></i></button>
    <button class="waves-effect waves-light btn-inverse btn btn-circle btn-sm btn-down" style="bottom: 10px"><i class="ti-arrow-circle-down text-white"></i></button>
</div>

<style>
/* === MODAL MODERN === */
.modal-content-modern {
    border-radius: 15px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.modal-content-modern .modal-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 1.5rem;
}

.modal-content-modern .modal-title {
    font-weight: 600;
}

.modal-content-modern .close {
    color: white;
    opacity: 0.8;
    text-shadow: none;
}

.modal-content-modern .close:hover {
    opacity: 1;
}

.modal-content-modern .modal-body {
    padding: 2rem;
}

.modal-content-modern .modal-footer {
    border-top: 1px solid #f0f0f0;
    padding: 1.5rem;
}

/* Mejor contraste para panel Destino en modales de movimiento de mesa/pedidos */
#modal-cambiar-mesa .bg-header,
#modal-mover-pedidos .bg-header {
    background: linear-gradient(180deg, #2f5b8d 0%, #274f7f 100%) !important;
    color: #eaf2ff;
}

#modal-cambiar-mesa .bg-header h5,
#modal-mover-pedidos .bg-header h5,
#modal-cambiar-mesa .bg-header label,
#modal-mover-pedidos .bg-header label {
    color: #eaf2ff !important;
}

#modal-cambiar-mesa .bg-header .form-control,
#modal-mover-pedidos .bg-header .form-control,
#modal-cambiar-mesa .bg-header .bootstrap-select > .dropdown-toggle,
#modal-mover-pedidos .bg-header .bootstrap-select > .dropdown-toggle {
    color: #f7fbff !important;
    border-bottom-color: rgba(234, 242, 255, 0.45) !important;
    background-color: transparent !important;
}

#modal-cambiar-mesa .bg-header .bootstrap-select > .dropdown-toggle .filter-option,
#modal-mover-pedidos .bg-header .bootstrap-select > .dropdown-toggle .filter-option,
#modal-cambiar-mesa .bg-header .bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
#modal-mover-pedidos .bg-header .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
    color: #f7fbff !important;
}

#modal-cambiar-mesa .bg-header .bootstrap-select .bs-caret .caret,
#modal-mover-pedidos .bg-header .bootstrap-select .bs-caret .caret {
    border-top-color: #f7fbff !important;
}

#modal-cambiar-mesa .bg-header .bar:before,
#modal-cambiar-mesa .bg-header .bar:after,
#modal-mover-pedidos .bg-header .bar:before,
#modal-mover-pedidos .bg-header .bar:after {
    background: #f7fbff !important;
}
/* === SALES SUMMARY FOOTER SEPARATORS === */
.footer-sales-summary {
    border-bottom: 1px solid #dee2e6 !important;
}
.footer-sales-summary > div.flex-fill {
    border-right: 1px solid #dee2e6 !important;
    border-radius: 0 !important; /* Ensure square corners for separators if needed */
}
.footer-sales-summary > div.flex-fill:last-of-type {
    border-right: none !important;
}
</style>

<div class="modal inmodal" id="modal-cambiar-mesa" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <form id="form-cambiar-mesa" method="post" enctype="multipart/form-data" action="<?php echo URL; ?>venta/CambiarMesa">
                <div class="modal-header">
                    <h4 class="modal-title">Cambiar Mesa</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row floating-labels" style="margin-left: 0px; margin-right: 0px;">
                        <div class="col-sm-6 bg-light-inverse">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-down"></i> Origen</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_origen_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_origen_opc01">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_origen_opc01" id="cod_mesa_origen_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_origen_opc01">Mesa</label>
                            </div>
                        </div>
                        <div class="col-sm-6 bg-header b-l">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-up"></i> Destino</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_destino_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_destino_opc01">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_destino_opc01" id="cod_mesa_destino_opc01" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_destino_opc01">Mesa</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success-modern">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-mover-pedidos" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <form id="form-mover-pedidos" method="post" enctype="multipart/form-data" action="<?php echo URL; ?>venta/MoverPedidos">
                <div class="modal-header">
                    <h4 class="modal-title">Mover Pedidos</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                </div>
                <div class="modal-body p-0">
                    <div class="row floating-labels" style="margin-left: 0px; margin-right: 0px;">
                        <div class="col-sm-6 bg-light-inverse">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-down"></i> Origen</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_origen_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_origen_opc02">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_origen_opc02" id="cod_mesa_origen_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_origen_opc02">Mesa</label>
                            </div>
                        </div>
                        <div class="col-sm-6 bg-header b-l">
                            <h5 class="m-t-30 m-b-40"><i class="ti-angle-double-up"></i> Destino</h5>
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" id="cod_salon_destino_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" required>
                                    <?php foreach ($this->Salon as $key => $value): ?>
                                        <option value="<?php echo $value['id_salon']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_salon_destino_opc02">Sal&oacute;n</label>
                            </div>
                            <div class="form-group m-b-30">
                                <select class="selectpicker form-control" name="cod_mesa_destino_opc02" id="cod_mesa_destino_opc02" data-style="form-control btn-default bg-transparent" title="Seleccionar" data-live-search-style="begins" data-live-search="true" title="Seleccionar" required="required" data-size="5">
                                    <option value="0"></option>
                                </select>
                                <span class="bar"></span>
                                <label for="cod_mesa_destino_opc02">Mesa</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success-modern">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-lista-menu" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <div class="modal-header">
                <h4 class="modal-title">Lista de productos</h4>
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
            </div>
            <div class="modal-body p-0">
                <!-- Nav tabs -->
                <div class="vtabs customvtab">
                    <ul class="nav nav-tabs tabs-vertical bg-header list_categorias_menu" role="tablist" style="min-width: 200px;"></ul>
                    <!-- Tab panes -->
                    <div class="tab-content w-100 p-0">
                        <div class="justify-center m-t-40 categoriamenu">
                            <div class="text-center">
                                <h2><i class="ti ti-arrow-circle-left"></i></h2>
                                <h4 class="">Seleccione una categor&iacute;a</b></h4>
                                <h6 class="text-center">para visualizar sus productos</h6>
                            </div>
                        </div>
                        <div class="tab-pane active" id="categoriamenu" role="tabpanel" style="display: none">
                            <div class="card-body p-0">
                                <div class="row floating-labels m-t-30">
                                    <div class="col-lg-7 offset-lg-5">
                                        <div class="row">
                                            <div class="form-group col-12 m-b-20">
                                                <input type="text" class="form-control form-control-modern search_filter_menu" id="search_filter_menu" autocomplete="off" placeholder="Buscar producto">
                                                <span class="bar"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="p-0">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="table-responsive p-b-10">
                                            <table class="table table-modern table-condensed table-hover b-t" id="list_platos_menu" width="100%">
                                                <thead class="table-head">
                                                    <tr>
                                                        <th>Nombre</th>
                                                        <th class="text-right">Estado</th>
                                                    </tr>
                                                </thead>
                                                <tbody class="tb-st"></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success-modern" data-dismiss="modal">Aceptar</button>
            </div>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-editar-pedido" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <form id="form-editar-pedido" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_pedido" id="id_pedido" />
                <div class="modal-header">
                    <h4 class="modal-title">Confirmar pedido</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                </div>
                <div class="modal-body">
                    <div class="row floating-labels m-t-40">
                        <div class="col-md-12 display-pedido-repartidor-edit" style="display: block;">
                            <div class="form-group m-b-40 cbu">
                                <select class="selectpicker form-control p-0" name="id_repartidor_edit" id="id_repartidor_edit" data-style="form-control btn-default" title="Seleccionar" data-size="5" data-live-search-style="begins" data-live-search="true" autocomplete="off">
                                    <?php foreach ($this->Repartidor as $key => $value): ?>
                                        <option value="<?php echo $value['id_usu']; ?>"><?php echo $value['nombres'] . ' ' . $value['ape_paterno'] . ' ' . $value['ape_materno']; ?></option>
                                    <?php endforeach; ?>
                                    <optgroup>
                                        <option value="2222">DIDI FOOD</option>
                                        <!-- <option value="3333">UBER</option> -->
                                        <option value="4444">PEDIDOS YA</option>
                                    </optgroup>
                                </select>
                                <span class="bar"></span>
                                <label for="id_repartidor_edit">Repartidor</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-entrega-programada floating-labels" style="display: block;">
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" name="hora_entrega_edit" id="hora_entrega_edit" data-style="form-control btn-default" title="Seleccionar" data-live-search="true" autocomplete="off" data-size="5">
                                    <optgroup>
                                        <option value="10:00:00">10:00 AM</option>
                                        <option value="10:30:00">10:30 AM</option>
                                        <option value="11:00:00">11:00 AM</option>
                                        <option value="11:30:00">11:30 AM</option>
                                        <option value="12:00:00">12:00 AM</option>
                                        <option value="12:30:00">12:30 AM</option>
                                        <option value="13:00:00">01:00 PM</option>
                                        <option value="13:30:00">01:30 PM</option>
                                        <option value="14:00:00">02:00 PM</option>
                                        <option value="14:30:00">02:30 PM</option>
                                        <option value="15:00:00">03:00 PM</option>
                                        <option value="15:30:00">03:30 PM</option>
                                        <option value="16:00:00">04:00 PM</option>
                                        <option value="16:30:00">04:30 PM</option>
                                        <option value="17:00:00">05:00 PM</option>
                                        <option value="17:30:00">05:30 PM</option>
                                        <option value="18:00:00">06:00 PM</option>
                                        <option value="18:30:00">06:30 PM</option>
                                        <option value="19:00:00">07:00 PM</option>
                                        <option value="19:30:00">07:30 PM</option>
                                        <option value="20:00:00">08:00 PM</option>
                                        <option value="20:30:00">08:30 PM</option>
                                        <option value="21:00:00">09:00 PM</option>
                                        <option value="21:30:00">09:30 PM</option>
                                        <option value="22:00:00">10:00 PM</option>
                                        <option value="22:30:00">10:30 PM</option>
                                    </optgroup>
                                </select>
                                <span class="bar"></span>
                                <label for="hora_entrega_edit">Hora de entrega</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-comision-delivery floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control input-mayus" name="comision_delivery" id="comision_delivery" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="comision_delivery">Comisi&oacute;n delivery</label>
                            </div>
                        </div>
                        <div class="col-sm-12 display-tipo-pago floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" name="id_tipo_pago" id="id_tipo_pago" data-style="form-control btn-default" data-live-search-style="begins" data-live-search="true">
                                    <?php foreach ($this->TipoPago as $key => $value): ?>
                                        <option label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="id_tipo_pago">Tipo pago</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-paga-con floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control input-mayus" name="total_pagar" id="total_pagar" autocomplete="off" />
                                <input type="hidden" class="form-control input-mayus" name="total_pagar_" id="total_pagar_" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="paga_con">Total a pagar</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-paga-con floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <input type="text" class="form-control input-mayus" name="paga_con" id="paga_con" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="paga_con">Paga con</label>
                            </div>
                        </div>
                        <div class="col-md-12 display-entrega-programada floating-labels" style="display: block;">
                            <div class="form-group m-b-40 dec">
                                <input type="text" class="form-control" name="amortizacion" id="amortizacion" autocomplete="off" />
                                <span class="bar"></span>
                                <label for="amortizacion">Amortizar - <?php echo Session::get('moneda'); ?></label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer b-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success-modern">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-editar-venta-pago" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <form id="form-editar-venta-pago" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_venta" id="id_venta" />
                <input type="hidden" name="id_venta_tipopago" id="id_venta_tipopago" />
                <div class="modal-header">
                    <h4 class="modal-title">Editar tipo de pago</h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cerrar</span></button>
                </div>
                <div class="modal-body">
                    <div class="row floating-labels m-t-40">
                        <div class="col-sm-12 display-tipo-pago floating-labels" style="display: block">
                            <div class="form-group m-b-40">
                                <select class="selectpicker form-control" name="id_tipo_pago_v" id="id_tipo_pago_v" data-style="form-control btn-default" data-live-search-style="begins" data-live-search="true">
                                    <?php foreach ($this->TipoPago as $key => $value): ?>
                                        <option label="<?php echo $value['id_pago']; ?>" value="<?php echo $value['id_tipo_pago']; ?>"><?php echo $value['descripcion']; ?></option>
                                    <?php endforeach; ?>
                                </select>
                                <span class="bar"></span>
                                <label for="id_tipo_pago_v">Tipo pago</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer b-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-success-modern">Aceptar</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal inmodal" id="modal-cliente" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-content-modern animated bounceInTop">
            <form id="form-cliente" method="post" enctype="multipart/form-data">
                <input type="hidden" name="id_cliente" id="id_cliente">
                <input type="hidden" name="tipo_cliente" id="tipo_cliente">
                <div class="modal-header justify-center">
                    <h4 class="modal-title-cliente">Nuevo Cliente</h4>

                    <?php if (0 == 1) { ?>
                        <div class="ml-auto m-t-10">
                            <input name="tipo_cli" type="radio" value="1" id="td_dni" class="with-gap radio-col-light-green" />
                            <label for="td_dni"><?php echo Session::get('diAcr'); ?></label>
                            <input name="tipo_cli" type="radio" value="2" id="td_ruc" class="with-gap radio-col-light-green" />
                            <label for="td_ruc"><?php echo Session::get('tribAcr'); ?></label>
                        </div>
                    <?php } else { ?>
                        <div class="ml-auto m-t-10"></div>
                    <?php } ?>

                </div>
                <div class="modal-body p-0 floating-labels">
                    <div class="row" style="margin-left: 0px; margin-right: 0px;">
                        <!-- Column -->
                        <div class="col-lg-6 b-r">
                            <div class="row card-body p-0">
                                <div class="col-md-12 p-l-10 p-t-10 b-t b-b m-b-40 bg-light-info" style="display: flex;">
                                    <h6 class="font-medium">Información personal</h6>
                                </div>
                                <div class="col-md-6 block01" style="display: block;">
                                    <div class="form-group ent m-b-40">
                                        <input type="text" class="form-control dni" name="dni" id="dni" minlength="<?php echo Session::get('diCar'); ?>" maxlength="<?php echo Session::get('diCar'); ?>" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="dni" class="c-dni"><?php echo Session::get('diAcr'); ?></label>
                                    </div>
                                </div>
                                <div class="col-md-6 block02" style="display: none;">
                                    <div class="form-group ent m-b-40">
                                        <input type="text" class="form-control ruc" name="ruc" id="ruc" minlength="<?php echo Session::get('tribCar'); ?>" maxlength="<?php echo Session::get('tribCar'); ?>" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="ruc" class="c-ruc"><?php echo Session::get('tribAcr'); ?></label>
                                    </div>
                                </div>
                                <div class="col-md-12 block07" style="display: none;">
                                    <div class="form-group letNumMayMin m-b-40">
                                        <input type="text" class="form-control ruc input-mayus" name="razon_social" id="razon_social" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="razon_social">Raz&oacute;n Social</label>
                                    </div>
                                </div>
                                <div class="col-md-12 block03" style="display: block;">
                                    <div class="form-group letMayMin m-b-40">
                                        <input type="text" class="form-control dni input-mayus" name="nombres" id="nombres" value="" autocomplete="off" required="required" />
                                        <span class="bar"></span>
                                        <label for="nombres">Nombre completo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Column -->
                        <div class="col-lg-6">
                            <div class="row card-body bg-header p-0">
                                <div class="col-md-12 p-l-10 p-t-10 b-t b-b m-b-40 bg-light-inverse" style="display: flex;">
                                    <h6 class="font-medium">Contacto</h6>
                                </div>
                                <div class="col-md-6 block05" style="display: block;">
                                    <div class="form-group m-b-40">
                                        <input type="text" class="form-control bg-transparent dni input-mayus" name="fecha_nac" id="fecha_nac" value="" autocomplete="off" data-mask="99-99-9999" />
                                        <span class="bar"></span>
                                        <label for="fecha_nac">Fecha de Nacimiento</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group ent m-b-40">
                                        <input type="text" class="form-control bg-transparent" name="telefono" id="telefono" value="" autocomplete="off" />
                                        <span class="bar"></span>
                                        <label for="telefono">Tel&eacute;fono</label>
                                    </div>
                                </div>
                                <div class="col-md-12 block06" style="display: block;">
                                    <div class="form-group m-b-40">
                                        <input type="text" class="form-control bg-transparent dni" name="correo" id="correo" value="" autocomplete="off" />
                                        <span class="bar"></span>
                                        <label for="correo">Correo electr&oacute;nico</label>
                                    </div>
                                </div>

                                <?php if (0 == 1) { ?>
                                    <div class="col-md-12 block08" style="display: none;">
                                    <?php } else { ?>
                                        <div class="col-md-12">
                                        <?php } ?>

                                        <div class="form-group m-b-40">
                                            <input type="text" class="form-control bg-transparent" name="direccion" id="direccion" value="-" autocomplete="off" required="required" />
                                            <span class="bar"></span>
                                            <label for="direccion">Direcci&oacute;n</label>
                                        </div>
                                        </div>
                                        <div class="col-md-12">
                                            <div class="form-group m-b-40">
                                                <input type="text" class="form-control bg-transparent input-mayus" name="referencia" id="referencia" value="" autocomplete="off" />
                                                <span class="bar"></span>
                                                <label for="referencia">Referencia</label>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Volver</button>
                        <button type="submit" class="btn btn-success-modern">Aceptar</button>
                    </div>
            </form>
        </div>
    </div>
</div>

<!-- menu modal-->

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true" id="modal-super-test">
    <div class="modal-dialog custom-modal" style="margin:auto">
        <div class="modal-content">
            <div class="card mb-0 c-bg-gray">
                <div class="card-body bg-menu-panel c-title-color slice-wraper">
                    <div class="row">
                        <div class="col-xs-12 col-md-7 modal-order-left">
                            <div class="hidden-md-up mb-2 modal-mobile-close">
                                <button type="button" class="btn btn-outline-secondary w-100" id="btn_close_modal_mobile">
                                    <i class="fas fa-times mr-1"></i> Cerrar
                                </button>
                            </div>
                            <div class="menu bg-white c-small-font-size card mb-0">
                                <div class="section-date" style="display:none;">
                                    <div class="lb-btn">
                                        <span class="icon"><i class="far fa-calendar"></i></span>
                                        <span>Mier 9 May 2024</span>
                                    </div>
                                    <span>-</span>
                                    <div class="lb-btn">
                                        <span class="icon"><i class="far fa-clock"></i></span>
                                        <span>07:59 AM</span>
                                    </div>
                                    <div class="ml-auto">
                                        <button class="btn btn-primary-modern">
                                            <span>
                                                <i class="fas fa-sync-alt"></i>
                                            </span>
                                        </button>
                                    </div>
                                </div>
                                <div class="section-category">
                                    
                                    <div class="list-categories">

                                    </div>
                                </div>
                                <div class="section-search">
                                    <div class="search-input">
                                        <input type="text" class="form-control form-control-modern" id="input-buscar-carta" placeholder="Buscar dentro de la carta">
                                        <span>
                                            <i class="fa fa-search" aria-hidden="true"></i>
                                        </span>
                                    </div>
                                    <div class="change-mode btn-group">
                                        <button class="btn btn-primary-modern"><span><i class="fas fa-th"></i></span></button>
                                        <button class="btn btn-secondary"><span><i class="fas fa-list-ul"></i></span></button>
                                    </div>
                                </div>
                                <div class="section-list">

                                </div>
                                
                                <div class="hidden-md-up modal-mobile-products-footer">
                                    <button class="btn btn-primary-modern w-100" id="ver_seleccionados" style="padding:1rem;">ver seleccionados</button>
                                </div>
                            </div>
                        </div>

                        <!-- Agregar JS para mostrar aside-right del modal de pedidos, en mobile -->
                        <div class="col-xs-12 col-md-5 modal-order-right">
                            <div class="place-order c-small-font-size card">
                                <div class="po-header text-white">
                                    <div class="icon">
                                        <!-- Botón para ocultar el aside-right en mobile -->
                                        <button onclick="closeModalOrder()"><i class="fas fa-arrow-left"></i></button>
                                    </div>
                                    <div class="info">
                                        <span id="info_mesa"></span>
                                        <span>Orden #000</span>
                                    </div>
                                <div class="d-flex align-items-center gap-2">

                                    <?php if (Session::get('rol') == 5): ?>
                                        
                                        <!-- Botón cancelar pedido -->
                                        <button
                                        id="btn_cancelar_pedido_mozo" 
                                        type="button" 
                                        class="btn btn-sm btn-outline-light"
                                        title="Cancelar el pedido">
                                        <i class="fas fa-ban"></i>
                                        </button>

                                        <!-- Botón dropdown para imprimir comandas -->
                                        <div class="dropdown">
                                        <button
                                            class="btn btn-sm btn-outline-light dropdown-toggle"
                                            type="button"
                                            id="btn_dropdown_comandas_mozo"
                                            data-toggle="dropdown"
                                            aria-haspopup="true"
                                            aria-expanded="false"
                                            title="Imprimir comandas">
                                            <i class="fas fa-print"></i>
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="btn_dropdown_comandas_mozo" id="imprimir_comandas_mozo">
                                            <!-- Aquí se inyectarán las opciones desde listarComandas(...) -->
                                        </div>
                                        </div>

                                    <?php endif; ?>
                                    <!-- Botón cerrar -->
                                    <button 
                                        type="button" 
                                        class="btn btn-sm btn-outline-light" 
                                        id="btn_close_aside"
                                        title="Cerrar">
                                        &times;
                                    </button>

                                </div>
                                </div>
                                <div class="po-filters">
                                    
                                        <div>
                                            <input type="hidden" name="cliente_pedido_id" id="cliente_pedido_id" value="0" />
                                            <input type="hidden" name="cliente_pedido_tipo" id="cliente_pedido_tipo" value="0" />
                                            <div class="input-group">
                                                <div class="opcion-cliente-pedido input-group-prepend">
                                                    <a class="input-group-prepend" href="javascript:void(0)" data-original-title="Registrar nuevo cliente" data-toggle="tooltip" data-placement="top">
                                                        <span class="input-group-text bg-header">
                                                            <small>
                                                            <i class="fas fa-user-plus"></i>
                                                        </small>
                                                    </span>
                                                </a>
                                            </div>
                
                                                <input type="text" class="form-control" name="buscar_cliente_pedido" id="buscar_cliente_pedido" autocomplete="off">
                                                <a class="input-group-append" href="javascript:void(0)" id="btnClientePedidoLimpiar" data-original-title="Limpiar datos" data-toggle="tooltip" data-placement="top">
                                                    <span class="input-group-text bg-header">
                                                        <small><i class="fas fa-times link-danger"></i></small>
                                                    </span>
                                                </a>
                                            </div>
                                        </div>
                                    
                                    <div class="c-custom-select" id="select_mozo">

                                    </div>
                                </div>
                                <div class="po-items">

                                </div>
                                <div class="sub-total">
                                    <div>
                                        <span>Subtotal</span>
                                        <span>S/0.00</span>
                                    </div>
                                    <div>
                                        <span>igv 10%</span>
                                        <span>S/0.00</span>
                                    </div>
                                </div>
                                <div class="total">
                                    <span>Total</span>
                                    <span>S/0.00</span>
                                </div>
                                <div class="po-confirm">
                                    <!-- Botón para mostrar el aside-right en mobile -->
                                    <button class="btn btn-primary-modern" id="btn_registrar_pedido">realizar pedido</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php require_once('views/venta/compartido.php'); ?>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#restau').addClass("active");
        $('#tab1').addClass("active");
        $('.tp1').addClass("active");
    });

    var id_mozo_ = <?php echo json_encode((Session::get('rol') == 5) ? $usuarioActualId : (isset($mozosDisponibles[0]['id_usu']) ? (string) $mozosDisponibles[0]['id_usu'] : '')); ?>;
    var id_repartidor_ = $("#id_repartidor option:first-child").val()
</script>
<?php if (Session::get('rol') <> 0) { ?>
    <style type="text/css">
        /* Inicio: Collapsible styles */
        .collapsible {
            background-color: #fff;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 13px;
            color: #515562;

            &:hover {
                background-color: #f5f5f5;
            }
        }

        .selected {
            background-color: #e0f7fa;
            border: 1px solid #00acc1;
        }

        .demo-checkbox {

            border-radius: 4px;
            padding: 1rem;

        }

        .content {
            padding: 0px 0px 3px 0px;
            display: none;
            overflow: hidden;
            background-color: darkorange;
        }

        /* Fin: Collapsible styles */

        .btn-up {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 25px;
        }

        .btn-down {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 25px;
        }

        .dropdown-toggle::after {
            display: none;
        }

        .btnCobrar {
            color: white;
        }

        .btnDividirCuenta {
            color: white;
        }

        .totalPagar {
            flex: 1;
            font-weight: bold;
        }

        .c-mozo-title {
            padding-left: 1rem;
            padding-right: 1rem;
            display: flex;
            align-items: center;
        }

        .c-mozo-title h2 {
            color: #0f172a;
            font-weight: 400;
            font-size: 1rem;
            text-transform: capitalize;
        }

        .c-mozo-title .state-tables {
            margin-left: auto;
        }

        .list-mesas {
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            padding-top: .5rem;
            padding-bottom: .5rem;
            justify-content: center
        }

        #form-nuevo-pedido {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .r-order-item .r-details {

            display: flex;
            flex-direction: column;
            gap: .5rem;
        }

        .r-order-item .r-details .order-name {
            font-size: 14px;
            color: #607d8b;
            font-weight: 500;

        }

        .r-order-type-label {
            border-radius: 12px;
            padding: .1rem .4rem;
            font-size: 0.7rem;
            text-transform: lowercase;
            color: rgba(39, 68, 175, 0.6);
            border: 1px solid#3555c7;
        }

        .g-medio {
            gap: .5rem !important;
        }

        :root {
            --custom-primary-color: #4f46e5;
            --custom-alert-color: #ef4444;
            --c-gray-color: #f3f4fa;
            --c-blue-light-color: #e4eafe;
            --c-font-size-small: 14px;
            --c-title-color: #607d8b;
            --c-text-color: red;
            --c-low-gray-color: #c6c9d3;
            --c-mid-gray-color: #7d8296;
            --c-hight-gray-color: #515562;
            --c-gray-other: #585c6b;
        }

        .custom-bg-primary {
            background: var(--custom-primary-color) !important;
        }

        .custom-bg-alert {
            background: var(--custom-alert-color) !important;
        }

        .custom-text-alert {
            color: var(--custom-alert-color) !important;
        }

        /*utilidades */

        .min-height-0 {
            min-height: 0 !important;
        }

        .c-bg-gray {
            background: var(--c-gray-color) !important;
        }

        .c-small-font-size {
            font-size: var(--c-font-size-small);
        }

        .c-title-color {
            color: var(--c-hight-gray-color);
        }

        /* mesas*/

        .menu {

            height: 750px;
            display: grid;
            grid-template-rows: auto auto auto minmax(auto, 1fr);
            gap: 1rem;
            overflow: hidden;
            padding: 0.3rem;
        }

        .section-date {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        /* button */
        .lb-btn {
            padding: .5rem .5rem;
            background-color: var(--c-gray-color);
            border-radius: .5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            padding-right: 2rem;
            border: 1px solid var(--c-low-gray-color);
        }

        .lb-btn .icon {
            display: flex;
            padding: .5rem;
            background-color: white;
            border-radius: 50%;
        }

        .lb-btn.secondary {
            background-color: var(--c-gray-color);
            padding-right: .5rem;
            padding-left: 2rem;
        }

        .lb-btn.secondary .icon {
            background-color: white;
            margin-left: auto;
        }

        .btn-reload-menu {
            margin-left: auto;
            background: #0f172a;
            padding: .75rem;
            color: white;
            border-radius: .5rem;
            text-transform: uppercase;
            cursor: pointer;
        }

        /** quick search*/

        .custom-quick-search {
            position: relative
        }

        .custom-quick-search::after {
            content: "\f00d";
            font-family: "Font Awesome 5 Free";
            /* Icono de la "X" */
            font-weight: 900;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 14px;
            color: var(--c-mid-gray-color);
            /* display: none; */
        }

        .custom-quick-search input {
            border: 1px solid var(--c-mid-gray-color);
            padding: .375rem .75rem;
            border-radius: .25rem;
        }

        .custom-quick-search input::placeholder {
            color: var(--c-low-gray-color);
        }

        .custom-quick-search input:focus {
            border: 1px solid var(--c-blue-light-color);
            padding: .375rem .75rem;
            border-radius: .25rem;
            border-color: var(--custom-primary-color);
            box-shadow: 0 0 0 3px rgba(121, 82, 179, 0.25);
        }

        .custom-quick-search .result {
            height: 200px;
            width: 200px;
            position: absolute;
            border: 1px solid var(--c-low-gray-color);
            box-shadow: 0 0.5rem 1rem rgba(37, 56, 139, 0.175);
            background-color: white;
            border-radius: 4px;
            padding: .75rem 0 !important;
            margin-top: 4px;
            display: flex;
            flex-direction: column;
            right: 0;
            z-index: 9999;
        }

        .custom-quick-search .result ul {
            padding: 0rem;
            list-style: none;
            flex-grow: 1;
            overflow-y: scroll;
        }

        .custom-quick-search .result ul li {
            padding: 0rem;
            border-bottom: 1px dashed var(--c-low-gray-color);
            padding: .55rem .75rem;
            text-transform: capitalize;
        }

        .custom-quick-search .result ul li:hover {
            background: #e0e7ff;
        }

        .custom-quick-search .result .cq-footer {
            text-align: center;
            font-size: 10px;
            padding: .5rem;
            background: var(--c-gray-color);
        }

        /** cards*/

        /**start category */

.section-category {
  width: 100%;
  overflow-x: auto;               /* Scroll horizontal si se desborda */
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  scroll-behavior: smooth;
  height: auto;                   /* Altura para 2 filas aprox */
}

.list-categories {
  display: grid;
  grid-auto-flow: column;        /* ✅ Llena primero hacia abajo (dos filas), luego crea columnas hacia la derecha */
  grid-template-rows: repeat(3, auto);  /* ✅ 2 filas automáticas */
  gap: 0.5rem;
}

/* Estilo de cada tarjeta (como antes, con altura más baja) */
.card-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background-color: #fff;
  cursor: pointer;
  font-size: 13px;
  height: 38px;
  white-space: nowrap;
  transition: all 0.2s ease;
  width: auto;
}


.card-category.selected {
  background-color: #7460ee;
  color: #fff;
  border-color: #7460ee;
}

.card-category .icon i {
  font-size: 16px;
}

.card-category .title {
  font-weight: 500;
}

.card-category .badge {
  background-color: #eee;
  padding: 1px 6px;
  border-radius: 12px;
  font-size: 12px;
  color: #333;
}

.card-category.selected .badge {
  background-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.card-category .close {
  color: red;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
}

/* Scrollbar opcional */
.section-category::-webkit-scrollbar {
  height: 6px;
}
.section-category::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

       
/**end category */
        /** search*/
        .section-search {
        display: flex;
        align-items: center;
        gap: .5rem;          /* separa buscador y botones */
        overflow: hidden;
        flex-wrap: nowrap;   /* todo en una sola fila */
        }

        .section-search .search-input {
        flex: 1 1 auto;      /* que ocupe el espacio restante */
        min-width: 0;        /* permite que encoja en pantallas pequeñas */
        display: flex;
        border-radius: .3rem;
        background-color: white;
        padding: .25rem .35rem;
        border: 1px solid var(--c-mid-gray-color);
        }

        .section-search .search-input input {
        flex-grow: 1;
        border: none;
        background: none;
        }

        .section-search .change-mode {
        flex: 0 0 auto;      /* no se encoje */
        display: inline-flex;
        gap: .25rem;
        }

        .section-search .change-mode .btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        }

        /* Ajuste opcional para pantallas muy pequeñas */
        

        /* .section-search .change-mode{
            font-size: 21px;
            border: 1px solid var(--c-low-gray-color);
            display: flex;
            border-radius: .5rem;
            margin-left: 1rem;
        }
        .section-search .change-mode span{
            padding: .45rem .75rem;
        }
        .section-search .change-mode span:not(:first-child){
            border-left: 1px solid var(--c-low-gray-color);
            color: var(--custom-primary-color);
            background : #eff0f6;
        } */
        /** menu list*/

        .section-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(auto, 1fr));
            gap: .5rem;
            height: 100%;
            overflow: scroll;
            /* Firefox */
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

            /* Chrome, Safari, Edge */
            &::-webkit-scrollbar {
                width: 8px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }
        }

        .section-list-table {
            display: flex;
            flex-direction: column;
        }

        .section-list-table .content-table {
            flex-grow: 1;
        }

        .section-list-table .navigation .page-link {
            border: 1px solid var(--c-low-gray-color);
        }

        .card-menu img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: left;
        }

        .card-menu {
            padding: .5rem;
            background-color: white;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            gap: .5rem;
            border: 1px solid var(--c-low-gray-color);
            transition: all .5s ease;
        }

        .card-menu:hover {
            border: 1px solid var(--custom-primary-color);
        }

        .card-menu .card-menu-header {
                width: 100%;
                height: 120px;       /* Alto fijo para todas las imágenes */
                overflow: hidden;    /* Oculta partes que sobresalgan */
                border-radius: .3rem;
                background: var(--c-gray-color);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .card-menu .card-menu-header img {
                width: 100%;
                height: 100%;
                object-fit: cover;   /* Recorta para llenar todo el espacio */
                object-position: center; /* Centra la imagen en el recorte */
                display: block;
            }

        .card-menu .menu-category {
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .card-menu .menu-category .name {
            background-color: #e0e7ff;
            font-size: 10px;
            padding: .5rem .7rem;
            border-radius: .5rem;
            color: #0f172a;
            border: 1px solid #21388b1c;
        }

        /*payment order*/
        .place-order {
            background-color: white;
            height: 750px;
            display: flex;
            flex-direction: column;
        }

        .po-header {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.1);
            background: var(--custom-primary-color);
        }

        .po-header .info {
            margin-left: auto;
            margin-right: auto;
            display: flex;
            flex-direction: column;
            text-align: center;
        }

        .po-header .icon span {

            display: flex;
            padding: 1rem;
            border-radius: 50%;
            font-size: 16px;
        }

        .po-header .action span {
            /* background-color: var(--c-gray-color); */
            display: flex;
            padding: 1rem;
            border-radius: .5rem;
            border: 2px solid white;
        }

        .po-filters {
            display: flex;
            padding: .5rem;
            box-shadow: inset 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
            gap: .5rem;
        }

        .po-filters .c-custom-select {
            
            border: none;
            border-radius: .5rem;
            flex-grow: 1;
            border: 1px solid var(--c-low-gray-color);
            display: flex;
            border-radius: .5rem;
        
        }

        .po-filters .c-custom-select select {

            background: inherit;
            width: 100%;
            font-size: 14px;
            margin-left: auto;
            color: var(--c-mid-gray-color);
            border: none;
        }

        .po-items {
            flex-grow: 1;
            overflow-y: scroll;
            /* Firefox */
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.2) transparent;

            /* Chrome, Safari, Edge */
            &::-webkit-scrollbar {
                width: 8px;
            }

            &::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }
        }

        .po-items .empty-items {
            min-height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-bottom: 1px dashed var(--c-gray-color);
            text-transform: capitalize;
        }

        .po-items .po-item {
            display: flex;
            padding: .7rem;
            gap: .5rem;
            border-bottom: 1px dashed var(--c-low-gray-color);
        }

        .po-items .po-item .img {
            background-color: var(--c-gray-color);
            padding: .5rem;
            border-radius: .5rem;
        }

        .po-items .po-item .img img {
            width: 100%;
            max-width: 80px;
        }

        .po-items .po-item .description {
            flex-grow: 1;
        }

        .po-items .po-item .description .info {
            display: flex;
            flex-direction: column;
            gap: .2rem;
            margin-bottom: .2rem
        }

        .po-items .po-item .description .info .price {
            color: var(--text-paragrap-color);
        }

        .po-items .po-item .description .actions {
            display: flex;
            justify-content: space-between;
        }

        .po-items .po-item .description .actions .quantity {
            background-color: var(--c-gray-color);
            display: flex;
            gap: .5rem;
            padding: 0rem .5rem;
            border-radius: .75rem;
        }

        .sub-total div {
            display: flex;
            justify-content: space-between;
        }

        .sub-total {
            padding: .7rem;
            box-shadow: 0 -4px 6px -3px rgba(0, 0, 0, 0.1);
            border: 1px solid var(--c-blue-light-color)
        }

        .total {
            display: flex;
            justify-content: space-between;
            padding: .7rem;
        }

        .po-actions {
            padding: 1rem;
            display: flex;
            gap: 1rem;
        }

        .po-actions>span {
            flex-grow: 1;
        }

        .po-confirm button {
            width: 100%;
            font-size: 15px;
            height: 5rem;
            text-transform: capitalize;
            background-color: var(--custom-primary-color);
            border: none;
        }

        .slice-wraper {
            transition: all 1s ease;
        }

        .bg-menu-panel {
            background: none !important;
        }

        @media (min-width: 767px) {
            .section-category .list-categories {
                justify-content: start;
            }

            .card-category {
                
                padding: 1rem;
                
            }

            .section-search .search-input {
                padding-left: 2rem;
            }

            .section-list {
                grid-template-columns: repeat(4, minmax(auto, 1fr));
                gap: 1rem;
            }


            .bg-menu-panel {
                background: var(--c-gray-color) !important;
            }
        }

        @media (max-width: 767px) {
            .list-mesas {
                gap: 0rem !important;
            }

            /* INICIO: estilos que ocultan en sidebar-right del modal de pedidos */
            .slice-wraper .modal-order-right {
                display: none;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0;
            }
        }


        .custom-modal {
            max-width: 90%;
            width: 90%;
        }

        .card-category.selected {
            border-color: #007bff;
            /* Borde azul para la categoría seleccionada */
        }
        .po-item-wrapper.new-item {
        background-color: #e6f7ff;  /* un azul muy suave */
        transition: background-color 0.3s ease;
        }

        /* Si quieres que sólo el header cambie */
        .po-item-wrapper.new-item .po-item {
        background-color: #e6f7ff;
        }

        .section-list.list-view {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        }

        .section-list.grid-view {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        }

        .section-list.grid-view .card-menu-wrapper {
        width: calc(33.333% - 1rem); /* 3 por fila */
        }





    /* FINAL MOBILE OVERRIDES */
    @media (max-width: 768px) {
        /* MESAS: Force 2 Columns as requested */
        div.list-mesas { 
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 10px !important;
            padding: 10px !important;
            width: 100% !important;
        }

        .list-mesas .btn-large-dim {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 1.5/1 !important; /* Rectangular (wider) */
            margin: 0 !important;
            float: none !important; /* Disable interference */
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
        }
        
        .list-mesas .btn-large-dim img {
            width: 32px !important; 
            height: 32px !important;
            margin-bottom: 5px;
        }

        /* PRODUCTS: Square/Grid Layout */
        .product-prices-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 8px !important;
        }
    }

    /* TABLET OVERRIDES (769px - 1280px) */
    @media (min-width: 769px) and (max-width: 1280px) {
        
        /* 1. MESAS: 4 Columns (Better than full width) */
        div.list-mesas { 
            display: grid !important;
            grid-template-columns: repeat(4, 1fr) !important;
            gap: 10px !important;
            padding: 10px !important;
            width: 100% !important;
        }

        .list-mesas .btn-large-dim {
            width: 100% !important;
            height: auto !important;
            aspect-ratio: 1.5/1 !important;
            margin: 0 !important;
            float: none !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            font-size: 0.9rem !important;
        }

        /* 2. ORDER PANEL TOP: Wrap content */
        .card-settings .d-flex.justify-content-between.align-items-center {
            flex-wrap: wrap !important;
            gap: 10px;
        }
        
        /* Force Document Type group to top */
        .card-settings .d-flex.justify-content-between.align-items-center > div:first-child {
            width: 100%;
            margin-bottom: 5px;
        }
        
        .card-settings .btn-group {
             display: flex;
             width: 100%;
        }
        
        .card-settings .btn-group .btn {
            flex: 1; /* Distribute evenly */
        }

        /* 3. TOTALS PANEL BOTTOM: Grid Layout */
        #content_pagos {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important; /* 3 cols: COD | EFE | TAR */
            gap: 5px !important;
            height: auto !important;
        }
        
        #content_pagos .input-group-prepend, 
        #content_pagos .input-group-append,
        #content_pagos input {
            height: 48px !important;
            width: 100% !important;
            border: 1px solid #ced4da !important; /* Restore borders for grid items */
            border-radius: 4px !important;
        }
        
        /* Specific tweaks for grid items */
        .display-cod-voucher, .display-pago-efectivo, .display-pago-tarjeta {
            /* Let them take natural flow in grid */
             display: flex !important;
        }

        /* Subtotal, Descuento, Total -> Make them stand out or span if needed */
        .display-pago-default {
            border: none !important;
        }
    }


    /* SMALL MOBILE OVERRIDES (360px - 480px) */
    @media (max-width: 480px) {
        
        /* 1. TOP PANEL: Vertical Stack */
        .card-settings .d-flex.justify-content-between.align-items-center {
            flex-direction: column !important;
            align-items: flex-start !important;
        }

        .card-settings .d-flex.justify-content-between.align-items-center > div {
            width: 100% !important;
            margin-bottom: 8px !important;
        }
        
        /* Ensure "Por Consumo" wrapper wraps internally if needed */
        .card-settings .d-flex[style*="gap:.5rem"] {
            flex-wrap: wrap !important;
            gap: 5px !important;
            justify-content: space-between !important;
        }
        
        /* Reduce font size slightly for document labels */
        .card-settings .btn-group label.btn {
            font-size: 11px !important; 
            padding: 4px 6px !important;
        }



        /* 2. TOTALS BOTTOM: Compact Flex Wrap with "Intuitive" Inputs */
        #content_pagos {
            display: flex !important;
            flex-wrap: wrap !important;
            width: 100% !important;
            border: 1px solid #adb5bd !important; /* Darker border for visibility */
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
        }

        /* Allow items to share row */
        #content_pagos .input-group-prepend, 
        #content_pagos .input-group-append {
           height: 48px !important;
           flex: 0 0 auto !important;
           width: auto !important;
        }
        
        #content_pagos input {
            height: 48px !important;
            flex: 1 1 80px !important; /* Min 80px */
            width: auto !important;
            min-width: 80px !important;
            border-left: 1px solid #adb5bd !important;
            border-right: 1px solid #adb5bd !important;
            border-top: 0 !important;
            border-bottom: 0 !important;
            text-align: center;
        }
        
        /* INTERACTIVE INPUTS: Make them stand out */
        #pago_efe, #pago_tar, #pago_yape {
            background-color: #fffae6 !important; /* Very subtle yellow tint */
            font-weight: bold !important;
            color: #333 !important;
        }
        
        #pago_efe:focus, #pago_tar:focus, #pago_yape:focus {
            background-color: #fff !important;
            box-shadow: inset 0 0 5px rgba(255, 165, 0, 0.5) !important;
        }

        /* Adjust specific visual blocks to look like input group items */
         .display-cod-voucher, .display-pago-efectivo, .display-pago-tarjeta {
             display: flex; /* Remove !important to allow JS hide() to work */
             align-items: center;
        }
        
        /* Force hide if inline style is display: none (Backup safety) */
        .display-cod-voucher[style*="none"], 
        .display-pago-efectivo[style*="none"], 
        .display-pago-tarjeta[style*="none"] {
            display: none !important;
        }
        
        /* Labels inside prepends */
        .input-group-prepend span.input-group-text,
        .input-group-append span.input-group-text {
            height: 100% !important;
            border: none !important;
            border-right: 1px solid #adb5bd !important; /* Visible separator */
            border-radius: 0 !important;
            display: flex;
            align-items: center;
            background-color: #f8f9fa !important; /* Distinct header bg */
            font-weight: 600;
        }
        
        /* Remove borders for seamless look between segments */
        .display-pago-default {
            border-left: 1px solid #adb5bd !important;
        }
    }
    </style>
<?php } ?>


<style>
/* [BUTTON REPOSITIONING] Move Scroll Buttons Up on Mobile to avoid overlaps */
@media (max-width: 480px) {
    .btn-up, .btn-down, .btn-categ {
        right: 15px !important; 
        transform: scale(0.8) !important;
        opacity: 0.9;
        z-index: 1050; 
    }
    
    /* Stack them nicely above the bottom panel (calculated approx 150px) */
    .btn-down { bottom: 180px !important; }
    .btn-up   { bottom: 240px !important; }
    .btn-categ { bottom: 300px !important; }

    /* MOBILE TOTALS GRID FIX (Subtotal, Descuento, etc.) */
    .modal-body .col-md-5 .table-modern[style*="fcf8ec"] thead {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important; /* Sub | Desc | Del | Total */
        width: 100% !important;
        border: 1px solid #adb5bd !important;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 5px !important;
    }
    
    .modal-body .col-md-5 .table-modern[style*="fcf8ec"] thead tr {
         display: contents !important; 
    }

    /* Cells Become Flex Columns (Label over Value) */
    .modal-body .col-md-5 .table-modern[style*="fcf8ec"] thead th {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 4px !important;
        border: none !important;
        border-right: 1px solid #adb5bd !important; 
        background: #fff !important; 
        font-size: 10px !important; 
        height: auto !important;
        width: auto !important;
    }
    
    .modal-body .col-md-5 .table-modern[style*="fcf8ec"] thead th:last-child {
        border-right: none !important;
    }

    .display-icbper, .display-comision-tarjeta { display: none; }

    .modal-body .col-md-5 .table-modern[style*="fcf8ec"] thead th span {
        font-size: 11px !important;
        font-weight: bold;
        color: #333;
    }
    
    .modal-body .col-md-5 .table-modern[style*="fcf8ec"] thead tr:last-child th {
        background: #fff !important;
    }
}

/* [MODERN DIALOG REDESIGN] */
.modern-dialog {
    padding: 24px !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.02) !important;
    width: 380px;
    max-width: 90vw;
    color: #334155;
    animation: dialog-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modern-dialog::backdrop {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
}

.modern-dialog .table {
    margin-bottom: 20px;
}

.modern-dialog .table th {
    border: none !important;
    padding: 10px 0 !important;
    vertical-align: middle;
}

.modern-dialog .table th:first-child {
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
    width: 45%;
    padding-right: 15px !important;
}

/* Modern Inputs in Dialog */
.modern-dialog .form-control,
.modern-dialog select.form-control {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    transition: all 0.2s;
    color: #1e293b;
    height: auto !important;
}

.modern-dialog .form-control:focus,
.modern-dialog select.form-control:focus {
    background: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(86, 100, 210, 0.1);
    outline: none;
}

/* Input Group Polishing */
.modern-dialog .input-group-text {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-left: none;
    color: #64748b;
    border-radius: 0 8px 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.modern-dialog .input-group .form-control {
    border-radius: 8px 0 0 8px !important;
}

/* Buttons Container */
.modern-dialog div:last-child {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.modern-dialog .btn-secondary {
    background: white;
    border: 1px solid #e2e8f0;
    color: #64748b;
    box-shadow: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
}

.modern-dialog .btn-secondary:hover {
    background: #e2e8f0 !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
}

/* Specific text tweaks */
.modern-dialog .link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.modern-dialog .link:hover {
    text-decoration: underline;
}

.modern-dialog .modal-discount-table {
    margin-bottom: 14px;
}

.modern-dialog .modal-discount-table thead {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.modern-dialog .modal-discount-table thead tr:not([style*="display:none"]):not([style*="display: none"]) {
    display: block !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px;
}

.modern-dialog .modal-discount-table thead tr.display-descuento-monto,
.modern-dialog .modal-discount-table thead tr#fila_motivo_descuento,
.modern-dialog .modal-discount-table thead tr#fila_observacion {
    grid-column: span 2;
}

.modern-dialog .modal-discount-table thead th {
    width: 100% !important;
    display: block;
    border: none !important;
    padding: 0 !important;
}

.modern-dialog .modal-discount-table thead th:first-child {
    color: #334e68;
    font-size: 0.86rem;
    font-weight: 700;
    margin-bottom: 8px;
    padding-right: 0 !important;
}

.modern-dialog .modal-discount-table .input-group {
    width: 100%;
}

.modern-dialog .modal-discount-table textarea.form-control {
    min-height: 72px;
}

.modern-dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #e9eef5;
}

@media (max-width: 767px) {
    .modern-dialog {
        width: min(96vw, 540px);
        max-height: 88vh;
        overflow-y: auto;
    }

    .modern-dialog .modal-discount-table thead {
        grid-template-columns: 1fr;
    }

    .modern-dialog .modal-discount-table thead tr.display-descuento-monto,
    .modern-dialog .modal-discount-table thead tr#fila_motivo_descuento,
    .modern-dialog .modal-discount-table thead tr#fila_observacion {
        grid-column: span 1;
    }

    .modern-dialog .dialog-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin-left: -24px;
        margin-right: -24px;
        padding: 12px 24px 0;
    }
}

@keyframes dialog-pop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* [MOBILE COMPACT LAYOUT] Give priority to products and item visibility */
.mobile-config-toggle {
    display: none;
}

@media (max-width: 768px) {
    .u4-2 {
        margin-left: -4px;
        margin-right: -4px;
    }

    .u4-2 > [class*="col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }

    .u4-2-1 .section-category {
        margin-bottom: 0.25rem;
        padding-bottom: 0.15rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .u4-2-1 .list-categories {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem !important;
        width: max-content;
        min-width: 100%;
    }

    .u4-2-1 .card-category {
        height: 34px;
        padding: 0.35rem 0.65rem;
        font-size: 12px;
    }

    .u4-2-1 .section-search {
        gap: 0.35rem;
        margin-bottom: 0.35rem;
    }

    .u4-2-1 .section-search .search-input {
        min-height: 34px;
        padding: 0.2rem 0.4rem;
    }

    .u4-2-1 .section-search .change-mode .btn {
        width: 32px;
        height: 32px;
    }

    .u4-2-1 .section-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        min-height: 42vh;
    }

    .u4-2-1 .card-menu {
        padding: 0.4rem;
        gap: 0.3rem;
    }

    .u4-2-1 .card-menu .card-menu-header {
        height: 88px !important;
    }

    .u4-2-1 .card-menu .menu-name {
        font-size: 0.93rem;
        line-height: 1.2;
        min-height: 2.2em;
    }

    .u4-2-1 .card-menu .menu-category.prices-list {
        padding: 3px 6px !important;
        border-color: #2f6fa0 !important;
        background: linear-gradient(135deg, #2f6fa0 0%, #3b78ac 100%) !important;
    }

    .u4 .card.card_height {
        min-height: calc(100vh - 102px);
        min-height: calc(100dvh - 102px);
        display: flex;
        flex-direction: column;
    }

    #form-nuevo-pedido {
        min-height: calc(100vh - 110px);
        min-height: calc(100dvh - 110px);
    }

    #form-nuevo-pedido .card-settings {
        padding: 6px !important;
        border-bottom: 1px solid #dbe3ef;
        box-shadow: none !important;
    }

    #form-nuevo-pedido .card-settings .d-flex.justify-content-between.align-items-center {
        gap: 6px !important;
    }

    #form-nuevo-pedido .card-settings .mobile-config-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        min-height: 34px;
        border-radius: 10px;
        border-color: #c7d5e6;
        color: #2f5f8a;
        background: #f8fbff;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    #form-nuevo-pedido .card-settings .mobile-config-toggle.is-open {
        color: #ffffff;
        border-color: #2f6fa0;
        background: linear-gradient(135deg, #2f6fa0 0%, #3b78ac 100%);
    }

    #form-nuevo-pedido .card-settings .btn-group.btn-group-toggle {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding: 3px;
    }

    #form-nuevo-pedido .card-settings .btn-group.btn-group-toggle .btn {
        flex: 0 0 auto;
        min-width: 92px;
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    #form-nuevo-pedido .card-settings .sale-extra-controls {
        width: 100%;
        display: none !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px !important;
        align-items: center;
    }

    #form-nuevo-pedido .card-settings .sale-extra-controls.is-open {
        display: grid !important;
    }

    #form-nuevo-pedido .card-settings .sale-extra-controls .bootstrap-select {
        grid-column: 1 / -1;
    }

    #form-nuevo-pedido .card-settings label.font-10 {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    #form-nuevo-pedido .card-settings .bootstrap-select {
        width: 100% !important;
    }

    #form-nuevo-pedido .card-settings .bootstrap-select .btn {
        min-height: 36px;
        padding: 6px 10px !important;
    }

    #form-nuevo-pedido .card-settings .input-group .form-control {
        min-height: 36px;
        padding: 6px 10px;
    }

    #form-nuevo-pedido > .card-body {
        flex: 1 1 auto;
        overflow: hidden !important;
    }

    #form-nuevo-pedido .scroll_pedidos {
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #list-pedidos {
        flex: 1 1 auto;
        min-height: 180px;
        height: auto !important;
        overflow-y: auto !important;
        margin-top: 4px !important;
    }

    #list-pedidos .comment-list {
        padding: 6px 8px;
    }

    #list-pedidos .order-name {
        font-size: 15px !important;
        line-height: 1.2;
    }

    #list-pedidos .order-units {
        font-size: 11px !important;
        line-height: 1.2;
    }

    #payment-inputs-top {
        padding: 6px !important;
        border-top: 1px solid #dbe3ef !important;
    }

    #fast-cash-container {
        gap: 4px !important;
        margin-bottom: 6px !important;
        padding-bottom: 2px;
    }

    #fast-cash-container .btn-fast-cash {
        min-width: 56px;
        font-size: 11px !important;
        padding: 4px 6px !important;
    }

    #payment-inputs-top .d-flex.flex-wrap {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    #payment-inputs-top .input-group {
        min-width: 0 !important;
    }

    #payment-inputs-top .input-group .input-group-text {
        min-width: 52px;
        justify-content: center;
        font-size: 12px;
    }

    #payment-inputs-top .input-group .form-control {
        min-height: 38px;
        font-size: 18px !important;
    }

    .card-footer-right {
        position: sticky;
        bottom: 0;
        z-index: 50;
        background: #ffffff !important;
        border-top: 1px solid #dbe3ef;
        margin-top: 0 !important;
        padding: 6px !important;
    }

    .card-footer-right .d-flex.justify-between {
        flex-wrap: wrap;
        gap: 8px;
    }

    .card-footer-right .d-flex.justify-between > div {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .card-footer-right .btn-agregar-productos .btn,
    .card-footer-right .btn_cancelar_pedido .btn,
    .card-footer-right .btn-submit-dividir-cuenta .btn {
        min-width: 40px;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .card-footer-right .btn-submit-cobrar .btn {
        min-height: 38px;
        padding: 0 14px;
        font-weight: 700;
        border-radius: 12px;
    }
}

@media (max-width: 390px) {
    #form-nuevo-pedido .card-settings .mobile-config-toggle {
        font-size: 10px;
        padding: 4px 8px !important;
    }

    #form-nuevo-pedido .card-settings .btn-group.btn-group-toggle .btn {
        min-width: 84px;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    #payment-inputs-top .input-group .form-control {
        font-size: 16px !important;
    }
}

/* [MOBILE MODAL PRODUCT LIST] Compact spacing + sticky CTA (only venta modal) */
@media (max-width: 768px) {
    #modal-super-test .modal-dialog.custom-modal {
        width: min(100vw - 12px, 460px) !important;
        max-width: min(100vw - 12px, 460px) !important;
        margin: 0.35rem auto !important;
    }

    #modal-super-test .modal-content,
    #modal-super-test .card.c-bg-gray {
        height: calc(100dvh - 0.75rem);
        max-height: calc(100dvh - 0.75rem);
        overflow: hidden;
    }

    #modal-super-test .slice-wraper {
        position: relative;
        overflow: hidden;
        padding: 0.4rem !important;
        height: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    #modal-super-test .slice-wraper > .row {
        flex: 1 1 auto;
        min-height: 0;
        margin-left: 0;
        margin-right: 0;
    }

    #modal-super-test .modal-order-left {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #modal-super-test .modal-order-right {
        position: absolute !important;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        z-index: 18;
    }

    #modal-super-test .modal-order-right .place-order {
        height: calc(100dvh - 0.75rem) !important;
        min-height: calc(100dvh - 0.75rem) !important;
        max-height: calc(100dvh - 0.75rem) !important;
        border-radius: 0.7rem;
    }

    #modal-super-test .modal-order-right .po-items {
        min-height: 0;
        overflow-y: auto !important;
    }

    #modal-super-test .modal-order-right .po-confirm {
        position: sticky;
        bottom: 0;
        z-index: 4;
        padding: 0.55rem;
        background: #fff;
        border-top: 1px solid #dbe3ef;
    }

    #modal-super-test .modal-order-right .po-confirm .btn {
        width: 100%;
        min-height: 50px;
        height: auto;
        border-radius: 0.7rem;
    }

    #modal-super-test.mobile-order-right-open .modal-order-left {
        visibility: hidden;
        pointer-events: none;
    }

    #modal-super-test.mobile-order-right-open .modal-mobile-products-footer {
        display: none !important;
    }

    #modal-super-test .modal-order-left .menu {
        height: 100% !important;
        min-height: 0;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        padding: 0.35rem;
        overflow: hidden;
    }

    #modal-super-test .modal-order-left .section-category {
        margin-bottom: 0.2rem;
        padding-bottom: 0.1rem;
        flex: 0 0 auto;
        position: relative;
        z-index: 3;
        background: #fff;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #modal-super-test .modal-order-left .section-category::-webkit-scrollbar {
        display: none;
    }

    #modal-super-test .modal-order-left .list-categories {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.35rem;
        align-content: start;
        width: max-content;
        min-width: 100%;
    }

    #modal-super-test .modal-order-left .card-category {
        flex: 0 0 auto;
        height: 30px;
        max-width: 128px;
        padding: 0.28rem 0.5rem;
        font-size: 11px;
        border-radius: 0.4rem;
        gap: 4px;
    }

    #modal-super-test .modal-order-left .card-category .title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #modal-super-test .modal-order-left .card-category .icon {
        flex: 0 0 auto;
        font-size: 11px;
    }

    #modal-super-test .modal-order-left .card-category .badge {
        flex: 0 0 auto;
        padding: 1px 5px;
        font-size: 10px;
        line-height: 1.2;
    }

    #modal-super-test .modal-order-left .card-category .close {
        display: none;
    }

    #modal-super-test .modal-order-left .section-search {
        flex: 0 0 auto;
        position: relative;
        z-index: 3;
        background: #fff;
        margin-bottom: 0.1rem;
        gap: 0.35rem;
    }

    #modal-super-test .modal-order-left .section-search .search-input {
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        padding: 0.15rem 0.35rem;
    }

    #modal-super-test .modal-order-left .section-search .search-input input {
        min-width: 0;
        font-size: 13px;
    }

    #modal-super-test .modal-order-left .section-search .search-input span {
        flex: 0 0 auto;
    }

    #modal-super-test .modal-order-left .section-search .change-mode {
        flex: 0 0 auto;
    }

    #modal-super-test .modal-order-left .section-search .change-mode .btn {
        width: 30px;
        height: 30px;
    }

    #modal-super-test .modal-order-left .section-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        position: relative;
        z-index: 1;
        gap: 0.45rem !important;
        padding-bottom: 0.25rem;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #modal-super-test .modal-order-left .card-menu {
        padding: 0.4rem;
        gap: 0.35rem;
    }

    #modal-super-test .modal-order-left .card-menu .card-menu-header {
        height: 84px !important;
    }

    #modal-super-test .modal-order-left .card-menu .menu-name {
        min-height: 2.1em;
        font-size: 0.92rem;
        line-height: 1.15;
    }

    #modal-super-test .modal-mobile-close {
        margin-bottom: 0.35rem !important;
    }

    #modal-super-test .modal-mobile-close .btn {
        padding: 0.55rem 0.75rem;
        border-radius: 0.6rem;
        font-weight: 600;
    }

    #modal-super-test .modal-mobile-products-footer {
        position: sticky;
        bottom: 0;
        z-index: 8;
        margin-top: auto;
        padding-top: 0.35rem;
        padding-bottom: 0.2rem;
        padding-bottom: max(0.2rem, env(safe-area-inset-bottom));
        background: linear-gradient(to top, #ffffff 78%, rgba(255, 255, 255, 0));
    }

    #modal-super-test #ver_seleccionados {
        padding: 0.78rem !important;
        border-radius: 0.7rem;
        font-size: 0.95rem;
        font-weight: 700;
        box-shadow: 0 8px 18px rgba(39, 82, 121, 0.2);
    }
}
</style>
<script>
// [INTERACTION POLISH] Auto-select input content on click/focus
$(document).on("click focus", ".doble_clic", function() {
    var val = $(this).val();
    if (val == 0 || val == "0.00" || val == "0") {
        $(this).select();
    }
});

// [MOBILE UX] Collapse optional controls to free vertical space
$(function () {
    var $toggle = $("#btnToggleOpcionesVentaMobile");
    var $panel = $("#saleExtraControls");
    if (!$toggle.length || !$panel.length) return;

    function isSmallMobile() {
        return window.matchMedia("(max-width: 576px)").matches;
    }

    function closePanel() {
        $panel.removeClass("is-open");
        $toggle.removeClass("is-open").attr("aria-expanded", "false");
    }

    function openPanel() {
        $panel.addClass("is-open");
        $toggle.addClass("is-open").attr("aria-expanded", "true");
        if ($("#tipo_pago").length && typeof $("#tipo_pago").selectpicker === "function") {
            $("#tipo_pago").selectpicker("refresh");
        }
    }

    function syncLayoutByViewport() {
        if (isSmallMobile()) {
            closePanel();
        } else {
            openPanel();
        }
    }

    $toggle.on("click", function (e) {
        e.preventDefault();
        if (!isSmallMobile()) return;
        if ($panel.hasClass("is-open")) {
            closePanel();
            return;
        }
        openPanel();
    });

    $(window).on("resize", syncLayoutByViewport);
    syncLayoutByViewport();
});
</script>

