{{-- Modal Multi-Ticket: Mesa Despacho — 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">Despacho</h2>
                    <p class="despacho-tickets-subtitle">Pedidos independientes — cada uno con cobro propio</p>
                </div>
            </div>
            <div class="despacho-tickets-header-actions">
                {{-- Píldora de estado (Para llevar / Mostrador) — espejo del pill de la tarjeta --}}
                <button type="button"
                        class="btn-despacho-state status-pill active amber"
                        id="despacho-modal-state-pill"
                        data-state="para_llevar"
                        data-tone="amber"
                        title="Clic para cambiar a Mostrador"
                        aria-label="Estado despacho: Para llevar. Clic para alternar.">
                    <span class="state-dot amber">●</span>
                    <span class="state-label">Para llevar</span>
                    <span class="state-swap-icon" aria-hidden="true">⇄</span>
                </button>
                <button type="button"
                        class="despacho-tickets-close"
                        id="btn-close-despacho-tickets-modal"
                        aria-label="Cerrar panel de despacho">
                    &times;
                </button>
            </div>
        </header>

        {{-- Body: Grid de tickets --}}
        <div class="despacho-tickets-body">
            <div class="despacho-tickets-grid" id="despacho-tickets-grid">
                {{-- Se renderiza dinámicamente desde cashier.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>