{{-- Modal Multi-Ticket: Mesa Pago Adelantado — Pedidos Anidados Independientes --}}
<div id="despacho-tickets-modal"
     class="despacho-tickets-modal"
     role="dialog"
     aria-modal="true"
     aria-labelledby="despacho-tickets-modal-title"
     aria-hidden="true"
     style="display: none;">

    <div class="despacho-tickets-panel">

        {{-- Header --}}
        <header class="despacho-tickets-header">
            <div class="despacho-tickets-title-group">
                <span class="despacho-tickets-icon" aria-hidden="true">💳</span>
                <div>
                    <h2 class="despacho-tickets-title" id="despacho-tickets-modal-title">Pago Adelantado</h2>
                    <p class="despacho-tickets-subtitle">Pedidos rápidos con cobro inmediato independiente</p>
                </div>
            </div>
            <div class="despacho-tickets-header-actions">
                {{-- Píldora de estado (Pago Adelantado) --}}
                <div class="status-pill active amber"
                     id="despacho-modal-state-pill"
                     data-state="pago_adelantado"
                     data-tone="amber"
                     title="Pago Adelantado"
                     aria-label="Estado: Pago Adelantado">
                    <span class="state-dot amber">●</span>
                    <span class="state-label">Pago Adelantado</span>
                </div>
                <button type="button"
                        class="despacho-tickets-close"
                        id="btn-close-despacho-tickets-modal"
                        aria-label="Cerrar panel">
                    &times;
                </button>
            </div>
        </header>

        {{-- Barra de Búsqueda Rápida y Filtros de Modal --}}
        <div class="despacho-modal-search-bar" style="padding: 10px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;">
            <div style="position: relative; flex: 1; min-width: 220px;">
                <span style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px;">⌕</span>
                <input type="search" id="input-search-despacho-modal" 
                       placeholder="Búsqueda rápida por mesa, ticket, mesero o comanda..." 
                       oninput="filtrarContenidoDespachoModal()"
                       style="width: 100%; padding: 7px 12px 7px 30px; font-size: 12px; background: #ffffff; border: 1.5px solid #cbd5e1; border-radius: 10px; outline: none; color: #1e293b;">
            </div>
            <div style="display: flex; align-items: center; gap: 6px;" id="despacho-modal-filter-tabs">
                <button type="button" class="btn-subfilter-tab active" data-subfilter="all" onclick="cambiarSubfiltroDespacho('all')" style="padding: 5px 12px; font-size: 11px; font-weight: 700; border-radius: 8px; border: 1px solid #f59e0b; background: #f59e0b; color: #ffffff; cursor: pointer;">
                    Todos (<span id="count-modal-subfilter-all">0</span>)
                </button>
                <button type="button" class="btn-subfilter-tab" data-subfilter="mesas" onclick="cambiarSubfiltroDespacho('mesas')" style="padding: 5px 12px; font-size: 11px; font-weight: 700; border-radius: 8px; border: 1px solid #cbd5e1; background: #ffffff; color: #475569; cursor: pointer;">
                    ⚡ Mesas P. Adelantado (<span id="count-modal-subfilter-mesas">0</span>)
                </button>
            </div>
        </div>

        {{-- Body: Grid de tickets --}}
        <div class="despacho-tickets-body">
            <div class="despacho-tickets-grid" id="despacho-tickets-grid">
                {{-- Se renderiza dinámicamente desde dashboard.js --}}
            </div>
        </div>

        {{-- Footer: Totales y nueva orden --}}
        <footer class="despacho-tickets-footer">
            <div class="despacho-tickets-summary">
                <span class="despacho-summary-label">PENDIENTE DE COBRO</span>
                <strong class="despacho-summary-total" id="despacho-tickets-pending-total">S/ 0.00</strong>
            </div>
            <div class="despacho-tickets-footer-info">
                <span class="despacho-footer-hint" id="despacho-tickets-count-info">0 pedidos activos</span>
            </div>
        </footer>

    </div>
</div>