{{-- Modal: Configuración de Paleta de Colores & Botones de Mesas (Caja POS) --}}
<div id="pos-settings-modal-backdrop" class="pos-settings-modal-backdrop" aria-hidden="true" style="display: none;">
    <div class="pos-settings-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="pos-settings-modal-title">

        {{-- Header del Modal --}}
        <div class="pos-settings-modal-header">
            <div class="pos-settings-header-title-group">
                <div class="pos-settings-header-badge" aria-hidden="true">
                    ⚙
                </div>
                <div>
                    <h2 class="pos-settings-modal-title" id="pos-settings-modal-title">Configuración de Apariencia &amp; POS</h2>
                    <p class="pos-settings-modal-subtitle">Personaliza los colores del sistema y los botones de mesas en tiempo real.</p>
                </div>
            </div>
            <button type="button" class="pos-settings-modal-close" id="btn-close-pos-settings-modal" aria-label="Cerrar configuración">×</button>
        </div>

        {{-- Body con scroll suave --}}
        <div class="pos-settings-modal-body">

            {{-- 1. Paleta de Colores del Layout & POS --}}
            <div class="pos-theme-card">
                <div class="pos-theme-card-header">
                    <div>
                        <h3 class="pos-theme-title">Paleta de Colores del Layout &amp; POS</h3>
                        <p class="pos-theme-subtitle">Selecciona o personaliza el tono principal de la interfaz, botones, estados activos e identidad de marca.</p>
                    </div>
                    <span class="pos-theme-badge-current" id="pos-current-theme-label">Tema Activo: Esmeralda POS</span>
                </div>

                {{-- Grid de 7 Presets Gastronómicos de Restaurante --}}
                <div class="pos-theme-presets-grid" id="pos-theme-presets-grid">
                    <!-- Preset 0: Color Oficial de la Sucursal (Predeterminado de la BD) -->
                    <div class="pos-theme-preset-card is-active" data-theme="owner" data-owner-hex="{{ $primaryColor ?? '#ea580c' }}" tabindex="0" role="button" aria-label="Color Oficial de la Sucursal">
                        <div class="pos-theme-swatch" style="background: {{ $primaryColor ?? '#ea580c' }}; border: 1.5px solid rgba(255,255,255,0.7); box-shadow: 0 1px 3px rgba(0,0,0,0.15);"></div>
                        <div class="pos-theme-preset-info">
                            <div style="display:flex;align-items:center;gap:6px;">
                                <strong style="color:var(--theme-primary, {{ $primaryColor ?? '#ea580c' }});">Color Oficial de Sucursal</strong>
                                <span style="background:rgba(16,185,129,0.15);color:#059669;font-size:9.5px;padding:1px 6px;border-radius:10px;font-weight:800;border:1px solid rgba(16,185,129,0.3);letter-spacing:0.02em;">PREDETERMINADO BD</span>
                            </div>
                            <span>Color corporativo oficial configurado por el dueño de la sucursal en el sistema.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>

                    <!-- Preset 1: Esmeralda Clásico (Saludable / Verde) -->
                    <div class="pos-theme-preset-card" data-theme="emerald" tabindex="0" role="button" aria-label="Tema Esmeralda Clásico">
                        <div class="pos-theme-swatch" style="background: linear-gradient(135deg, #059669, #047857);"></div>
                        <div class="pos-theme-preset-info">
                            <strong>Esmeralda Clásico</strong>
                            <span>Equilibrado y fresco. Ideal para comida gourmet, vegetariana y turnos continuos.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>

                    <!-- Preset 2: Terracota & Brasas -->
                    <div class="pos-theme-preset-card" data-theme="terracotta" tabindex="0" role="button" aria-label="Tema Terracota & Brasas">
                        <div class="pos-theme-swatch" style="background: linear-gradient(135deg, #c2410c, #9a3412);"></div>
                        <div class="pos-theme-preset-info">
                            <strong>Terracota &amp; Brasas</strong>
                            <span>Cálido y apetecible. Ideal para parrillas, cortes, bistrós y hornos de leña.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>

                    <!-- Preset 3: Azul Marino & Cevichería -->
                    <div class="pos-theme-preset-card" data-theme="ocean" tabindex="0" role="button" aria-label="Tema Azul Marino & Cevichería">
                        <div class="pos-theme-swatch" style="background: linear-gradient(135deg, #0284c7, #0369a1);"></div>
                        <div class="pos-theme-preset-info">
                            <strong>Azul Marino &amp; Cevichería</strong>
                            <span>Fresco y nítido. Diseñado para cevicherías, marisquerías y cocina de costa.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>

                    <!-- Preset 4: Vino & Cocina de Autor -->
                    <div class="pos-theme-preset-card" data-theme="burgundy" tabindex="0" role="button" aria-label="Tema Vino & Cocina de Autor">
                        <div class="pos-theme-swatch" style="background: linear-gradient(135deg, #9f1239, #881337);"></div>
                        <div class="pos-theme-preset-info">
                            <strong>Vino &amp; Cocina de Autor</strong>
                            <span>Elegante y refinado para pastas, carnes selectas, cocina criolla y cenas.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>

                    <!-- Preset 5: Cacao & Café Espresso -->
                    <div class="pos-theme-preset-card" data-theme="coffee" tabindex="0" role="button" aria-label="Tema Cacao & Café Espresso">
                        <div class="pos-theme-swatch" style="background: linear-gradient(135deg, #b45309, #78350f);"></div>
                        <div class="pos-theme-preset-info">
                            <strong>Cacao &amp; Café Espresso</strong>
                            <span>Tonos tostados para cafeterías, pastelerías, brunch y panadería artesanal.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>

                    <!-- Preset 6: Zafiro & Coctelería -->
                    <div class="pos-theme-preset-card" data-theme="indigo" tabindex="0" role="button" aria-label="Tema Zafiro & Coctelería">
                        <div class="pos-theme-swatch" style="background: linear-gradient(135deg, #4338ca, #312e81);"></div>
                        <div class="pos-theme-preset-info">
                            <strong>Zafiro &amp; Coctelería</strong>
                            <span>Moderno y distinguido para gastrobares, rooftops, coctelería y veladas.</span>
                        </div>
                        <span class="pos-theme-check-icon" aria-hidden="true">✓</span>
                    </div>
                </div>

                {{-- Personalizador de Color Primario a Medida --}}
                <div class="pos-custom-color-picker-box">
                    <div class="pos-picker-label-group">
                        <span class="pos-picker-icon" aria-hidden="true">🎨</span>
                        <div>
                            <strong>Personalizar Color Primario a Medida</strong>
                            <small>Elige cualquier tono exacto con el selector de color hexadecimal.</small>
                        </div>
                    </div>
                    <div class="pos-picker-controls">
                        <input type="color" id="pos-modal-theme-color-input" value="#059669" aria-label="Selector de color personalizado">
                        <input type="text" id="pos-modal-theme-hex-input" value="#059669" maxlength="7" aria-label="Valor hexadecimal">
                        <button type="button" class="btn-pos-apply-theme" id="btn-pos-apply-custom-theme">Aplicar a Todo el Sistema</button>
                        <button type="button" class="btn-pos-reset-theme" id="btn-pos-reset-theme" title="Restaurar a esmeralda predeterminado">Restaurar</button>
                    </div>
                </div>

                {{-- Vista previa de componentes afectados --}}
                <div class="pos-theme-live-preview">
                    <span class="pos-preview-title">Vista Previa de Componentes Afectados:</span>
                    <div class="pos-preview-elements">
                        <button type="button" class="pos-preview-btn-primary">Botón Principal</button>
                        <div class="pos-preview-tab-pill active">Tab Seleccionado</div>
                        <div class="pos-preview-badge-pill">Badge Destacado</div>
                        <span class="pos-preview-metric-val">S/ 2,480.90</span>
                    </div>
                </div>
            </div>

            {{-- 2. Sidebar Principal & Fondo del Sistema --}}
            <div class="pos-theme-card">
                <div class="pos-theme-card-header">
                    <div class="pos-section-header-wrap">
                        <span class="pos-section-badge-icon" style="background: #e0e7ff; color: #4338ca;" aria-hidden="true">🗂️</span>
                        <div class="pos-section-title-wrap">
                            <h3 class="pos-theme-title">Sidebar Principal &amp; Fondo del Sistema</h3>
                            <p class="pos-theme-subtitle">Personaliza el fondo de la barra de navegación lateral y el color general de la pantalla.</p>
                        </div>
                    </div>
                    <span class="pos-theme-badge-current" id="pos-current-sidebar-label" style="background: #e0e7ff; color: #4338ca; border-color: rgba(67, 56, 202, 0.25);">Sidebar: Blanco Limpio</span>
                </div>

                <div class="pos-sidebar-config-layout">
                    {{-- Columna Izquierda: Presets y Controles --}}
                    <div class="pos-sidebar-controls-col">
                        {{-- Presets de Estilo para Sidebar --}}
                        <div style="margin-bottom: 14px;">
                            <span style="font-size: 0.74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Paleta Predeterminada de Sidebar &amp; Pantalla:</span>
                            <div class="pos-btn-sidebar-presets-wrap">
                                <button type="button" class="pos-btn-sidebar-preset active" data-sidebar-preset="white">
                                    <span class="pos-preset-swatch-dot" style="background: #ffffff; border: 1.5px solid #cbd5e1;"></span>
                                    <span>Blanco Limpio</span>
                                </button>
                                <button type="button" class="pos-btn-sidebar-preset" data-sidebar-preset="dark">
                                    <span class="pos-preset-swatch-dot" style="background: #0b1e36;"></span>
                                    <span>Carbón / Dark</span>
                                </button>
                                <button type="button" class="pos-btn-sidebar-preset" data-sidebar-preset="slate">
                                    <span class="pos-preset-swatch-dot" style="background: #f8fafc; border: 1.5px solid #94a3b8;"></span>
                                    <span>Gris Slate</span>
                                </button>
                                <button type="button" class="pos-btn-sidebar-preset" data-sidebar-preset="navy">
                                    <span class="pos-preset-swatch-dot" style="background: #04172f;"></span>
                                    <span>Azul Noche</span>
                                </button>
                            </div>
                        </div>

                        {{-- Filas de Configuración Individual --}}
                        <div class="pos-table-button-pickers-list">
                            <!-- Fondo del Sidebar -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Fondo del Sidebar</strong>
                                    <small>Color de fondo de la barra lateral izquierda</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-sidebar-bg-picker" value="#ffffff">
                                        <input type="text" id="pos-sidebar-bg-hex" value="#FFFFFF" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- Texto e Íconos del Sidebar -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Texto e Íconos del Sidebar</strong>
                                    <small>Color de los ítems de navegación no seleccionados</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-sidebar-text-picker" value="#45617d">
                                        <input type="text" id="pos-sidebar-text-hex" value="#45617D" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- Fondo General de la Pantalla -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Fondo General de Pantalla</strong>
                                    <small>Fondo del layout y zona de trabajo</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-app-bg-picker" value="#edf3f8">
                                        <input type="text" id="pos-app-bg-hex" value="#EDF3F8" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Botones de Acción --}}
                        <div class="pos-table-buttons-actions">
                            <button type="button" class="btn-pos-save-table-buttons" id="btn-pos-save-sidebar-bg">Guardar Sidebar &amp; Fondo</button>
                            <button type="button" class="btn-pos-reset-table-buttons" id="btn-pos-reset-sidebar-bg">Restaurar Predeterminados</button>
                        </div>
                    </div>

                    {{-- Columna Derecha: Vista Previa en Vivo de Mini-Sidebar y Fondo --}}
                    <div class="pos-sidebar-preview-col">
                        <div class="pos-preview-header-row">
                            <span class="pos-preview-col-title">Vista Previa de Sidebar &amp; Pantalla</span>
                        </div>
                        <div class="pos-mockup-sidebar-container" id="pos-mockup-sidebar-container">
                            <div class="pos-mockup-window-bar">
                                <div class="pos-mockup-dots">
                                    <span style="background: #ef4444;"></span>
                                    <span style="background: #f59e0b;"></span>
                                    <span style="background: #10b981;"></span>
                                </div>
                                <span class="pos-mockup-bar-title">Terminal POS · Demostración en Vivo</span>
                            </div>
                            <div class="pos-mockup-window-body">
                                <div class="pos-mockup-sidebar" id="pos-mockup-sidebar">
                                    <div class="pos-mockup-sidebar-brand">
                                        <span class="pos-mockup-brand-icon">♜</span>
                                        <div class="pos-mockup-brand-text">
                                            <strong id="pos-mockup-brand-title">La Buena Mesa</strong>
                                            <small>Restaurante</small>
                                        </div>
                                    </div>
                                    <div class="pos-mockup-sidebar-nav">
                                        <div class="pos-mockup-nav-item" id="pos-mockup-nav-inactive">
                                            <i>⌂</i> <span>Inicio</span>
                                        </div>
                                        <div class="pos-mockup-nav-item active" id="pos-mockup-nav-active">
                                            <i>▣</i> <span>Caja</span>
                                        </div>
                                        <div class="pos-mockup-nav-item">
                                            <i>▥</i> <span>Pedidos</span>
                                        </div>
                                    </div>
                                    <div class="pos-mockup-sidebar-status">
                                        <span class="pos-mockup-dot"></span> <small>Sistema en línea</small>
                                    </div>
                                </div>
                                <div class="pos-mockup-screen-content" id="pos-mockup-screen-content">
                                    <div class="pos-mockup-mini-card">
                                        <div class="mini-card-head">
                                            <span>Mesa 01</span>
                                            <span class="mini-card-status-dot"></span>
                                        </div>
                                        <span class="mini-card-amt">S/ 84.00</span>
                                        <span class="mini-card-btn">Cobrar</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="pos-preview-notice" style="margin-top: 10px;">✨ <strong>Aplicación en tiempo real:</strong> Los cambios en el sidebar y fondo se reflejan instantáneamente en toda la aplicación y se guardan de forma automática.</p>
                    </div>
                </div>
            </div>

            {{-- 3. Tarjetas & Botones de Mesas (Caja POS) --}}
            <div class="pos-table-buttons-section">
                <div class="pos-section-header-wrap" style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;">
                    <div style="display: flex; align-items: flex-start; gap: 14px;">
                        <span class="pos-section-badge-icon" style="background: #ecfdf5; color: #059669;" aria-hidden="true">🪑</span>
                        <div class="pos-section-title-wrap">
                            <h3>Tarjetas &amp; Botones de Mesas (Caja POS)</h3>
                            <p>Personaliza el diseño de las tarjetas de mesa (fondo, bordes, tipografía) y la paleta de colores de sus botones de acción.</p>
                        </div>
                    </div>
                    <span class="pos-theme-badge-current" id="pos-current-cards-label" style="background: #ecfdf5; color: #059669; border-color: rgba(5, 150, 105, 0.25);">Diseño POS Activo</span>
                </div>

                <div class="pos-table-buttons-config-layout">
                    {{-- Columna Izquierda: Presets y Controles Individuales --}}
                    <div class="pos-table-buttons-controls-col">

                        {{-- Sub-sección A: Estructura & Tipografía de la Tarjeta --}}
                        <div class="pos-config-subheading">
                            <span>Estructura &amp; Tipografía de la Tarjeta</span>
                        </div>

                        {{-- Presets de Tarjeta de Mesa --}}
                        <div style="margin-bottom: 12px;">
                            <span style="font-size: 0.74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Paleta Predeterminada de Estructura:</span>
                            <div class="pos-btn-card-presets-wrap">
                                <button type="button" class="pos-btn-card-preset active" data-card-preset="white">
                                    <span class="pos-preset-swatch-dot" style="background: #ffffff; border: 1.5px solid #cbd5e1;"></span>
                                    <span>Blanco Limpio</span>
                                </button>
                                <button type="button" class="pos-btn-card-preset" data-card-preset="slate">
                                    <span class="pos-preset-swatch-dot" style="background: #f8fafc; border: 1.5px solid #94a3b8;"></span>
                                    <span>Gris Suave</span>
                                </button>
                                <button type="button" class="pos-btn-card-preset" data-card-preset="dark">
                                    <span class="pos-preset-swatch-dot" style="background: #1e293b;"></span>
                                    <span>Modo Oscuro</span>
                                </button>
                                <button type="button" class="pos-btn-card-preset" data-card-preset="warm">
                                    <span class="pos-preset-swatch-dot" style="background: #fffbeb; border: 1.5px solid #fde68a;"></span>
                                    <span>Cálido / Crema</span>
                                </button>
                            </div>
                        </div>

                        {{-- Controles de Tarjeta Individuales --}}
                        <div class="pos-table-button-pickers-list" style="margin-bottom: 16px;">
                            <!-- 1. Borde de la Tarjeta -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Borde de Tarjeta</strong>
                                    <small>Color de contorno perimetral</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-table-card-border-picker" value="#e2e8f0">
                                        <input type="text" id="pos-table-card-border-hex" value="#E2E8F0" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- 3. Fondo Fila de Consumo -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Fondo Zona de Consumo</strong>
                                    <small>Fondo del bloque de monto / total</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-table-card-amount-bg-picker" value="#f8fafc">
                                        <input type="text" id="pos-table-card-amount-bg-hex" value="#F8FAFC" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- 4. Título de la Mesa -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Título de Mesa</strong>
                                    <small>Color del texto "Mesa XX"</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-table-card-title-picker" value="#0f172a">
                                        <input type="text" id="pos-table-card-title-hex" value="#0F172A" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- 5. Texto de Monto / Consumo -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Texto de Monto</strong>
                                    <small>Color numérico del importe total</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-table-card-amount-text-picker" value="#0f172a">
                                        <input type="text" id="pos-table-card-amount-text-hex" value="#0F172A" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Sub-sección B: Fondos de Tarjeta según Estado & Despacho --}}
                        <div class="pos-config-subheading">
                            <span>Color de Fondo por Estado &amp; Despacho</span>
                        </div>

                        {{-- Presets de Fondos por Estado & Despacho --}}
                        <div style="margin-bottom: 12px;">
                            <span style="font-size: 0.74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Paleta Predeterminada de Estados &amp; Despacho:</span>
                            <div class="pos-btn-state-presets-wrap">
                                <button type="button" class="pos-btn-state-preset active" data-state-preset="default">
                                    <span class="pos-preset-swatch-dot" style="background: #ffffff; border: 1.5px solid #cbd5e1;"></span>
                                    <span>Clásico Neutral</span>
                                </button>
                                <button type="button" class="pos-btn-state-preset" data-state-preset="pastel">
                                    <span class="pos-preset-swatch-dot" style="background: #dcfce7; border: 1.5px solid #22c55e;"></span>
                                    <span>Semáforo Suave</span>
                                </button>
                                <button type="button" class="pos-btn-state-preset" data-state-preset="high-contrast">
                                    <span class="pos-preset-swatch-dot" style="background: #fee2e2; border: 1.5px solid #dc2626;"></span>
                                    <span>Alto Contraste</span>
                                </button>
                                <button type="button" class="pos-btn-state-preset" data-state-preset="slate">
                                    <span class="pos-preset-swatch-dot" style="background: #f1f5f9; border: 1.5px solid #64748b;"></span>
                                    <span>Minimalista Slate</span>
                                </button>
                            </div>
                        </div>

                        <div class="pos-table-button-pickers-list" style="margin-bottom: 16px;">
                            <!-- Fondo Mesa Disponible -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Mesa Disponible (Libre)</strong>
                                    <small>Fondo de tarjetas listas para abrir</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-card-bg-disponible-picker" value="#ffffff">
                                        <input type="text" id="pos-card-bg-disponible-hex" value="#FFFFFF" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- Fondo Mesa Ocupada -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Mesa Ocupada</strong>
                                    <small>Fondo de tarjetas con comanda activa</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-card-bg-ocupada-picker" value="#ffffff">
                                        <input type="text" id="pos-card-bg-ocupada-hex" value="#FFFFFF" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>

                            <!-- Fondo Mesa En Pago -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Mesa En Pago</strong>
                                    <small>Fondo de tarjetas en proceso de cobro</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-card-bg-en-pago-picker" value="#fffbeb">
                                        <input type="text" id="pos-card-bg-en-pago-hex" value="#FFFBEB" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>


                            <!-- Fondo Tarjeta de Despacho -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Tarjeta de Despacho</strong>
                                    <small>Fondo para órdenes Para Llevar / Mostrador</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <input type="color" id="pos-card-bg-despacho-picker" value="#fffbeb">
                                        <input type="text" id="pos-card-bg-despacho-hex" value="#FFFBEB" maxlength="7" class="pos-hex-input-mini">
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Sub-sección C: Botones de Acción en Mesas --}}
                        <div class="pos-config-subheading">
                            <span>Botones de Acción en Mesas</span>
                        </div>

                        {{-- Presets Rápidos Recomendados para Botones --}}
                        <div style="margin-bottom: 12px;">
                            <span style="font-size: 0.74rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Paleta Predeterminada de Botones de Acción:</span>
                            <div class="pos-btn-table-presets-wrap">
                                <button type="button" class="pos-btn-table-preset active" data-preset="default">
                                    <span class="pos-preset-swatch-dot" style="background: #059669;"></span>
                                    <span>Claridad POS</span>
                                </button>
                                <button type="button" class="pos-btn-table-preset" data-preset="pastel">
                                    <span class="pos-preset-swatch-dot" style="background: #ecfdf5; border: 1px solid #059669;"></span>
                                    <span>Suave / Pastel</span>
                                </button>
                                <button type="button" class="pos-btn-table-preset" data-preset="high-contrast">
                                    <span class="pos-preset-swatch-dot" style="background: #047857;"></span>
                                    <span>Alto Contraste</span>
                                </button>
                                <button type="button" class="pos-btn-table-preset" data-preset="modern-dark">
                                    <span class="pos-preset-swatch-dot" style="background: #0f172a;"></span>
                                    <span>Minimalista Slate</span>
                                </button>
                            </div>
                        </div>

                        {{-- Controles por Botón --}}
                        <div class="pos-table-button-pickers-list">
                            <!-- 1. Botón + Abrir Mesa & Ordenar -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>+ Abrir Mesa &amp; Ordenar</strong>
                                    <small>Acción en mesas libres (Disponible)</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <span>Fondo:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="open_bg" value="#059669">
                                    </label>
                                    <label class="pos-btn-color-picker-item">
                                        <span>Texto:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="open_color" value="#ffffff">
                                    </label>
                                </div>
                            </div>

                            <!-- 2. Botón + Pedido -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>+ Pedido</strong>
                                    <small>Acción comanda en mesa Ocupada</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <span>Fondo:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="order_bg" value="#fff7ed">
                                    </label>
                                    <label class="pos-btn-color-picker-item">
                                        <span>Texto:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="order_color" value="#c2410c">
                                    </label>
                                </div>
                            </div>

                            <!-- 3. Botón Cobrar -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Cobrar</strong>
                                    <small>Acción cobro en mesa Ocupada</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <span>Fondo:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="pay_bg" value="#2563eb">
                                    </label>
                                    <label class="pos-btn-color-picker-item">
                                        <span>Texto:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="pay_color" value="#ffffff">
                                    </label>
                                </div>
                            </div>

                            <!-- 4. Botón Finalizar Pago -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Finalizar Pago</strong>
                                    <small>Cierre definitivo en mesa En Pago</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <span>Fondo:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="finalize_bg" value="#006948">
                                    </label>
                                    <label class="pos-btn-color-picker-item">
                                        <span>Texto:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="finalize_color" value="#ffffff">
                                    </label>
                                </div>
                            </div>

                            <!-- 5. Botón Ver (Despacho) -->
                            <div class="pos-button-color-row">
                                <div>
                                    <strong>Ver (Despacho)</strong>
                                    <small>Acción en tarjeta de Despacho</small>
                                </div>
                                <div class="pos-button-color-pickers">
                                    <label class="pos-btn-color-picker-item">
                                        <span>Fondo:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="view_bg" value="#2563eb">
                                    </label>
                                    <label class="pos-btn-color-picker-item">
                                        <span>Texto:</span>
                                        <input type="color" class="pos-table-btn-color-input" data-key="view_color" value="#ffffff">
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- Botones de Acción --}}
                        <div class="pos-table-buttons-actions">
                            <button type="button" class="btn-pos-save-table-buttons" id="btn-pos-save-table-buttons">Guardar Tarjetas &amp; Botones</button>
                            <button type="button" class="btn-pos-reset-table-buttons" id="btn-pos-reset-table-buttons">Restaurar Predeterminados</button>
                        </div>
                    </div>

                    {{-- Columna Derecha: Vista Previa en Vivo de Mesa --}}
                    <div class="pos-table-buttons-preview-col">
                        <div class="pos-preview-header-row">
                            <span class="pos-preview-col-title">Vista Previa de Mesa</span>
                            <div class="pos-preview-state-switcher" id="pos-mockup-state-switcher">
                                <button type="button" class="pos-btn-preview-state active" data-state="ocupada">Ocupada</button>
                                <button type="button" class="pos-btn-preview-state" data-state="disponible">Disponible</button>
                                <button type="button" class="pos-btn-preview-state" data-state="en_pago">En Pago</button>
                                <button type="button" class="pos-btn-preview-state" data-state="despacho">Despacho</button>
                            </div>
                        </div>

                        {{-- Card Mockup --}}
                        <div class="pos-mockup-card" id="pos-mockup-table-card">
                            <div class="pos-mockup-top-row">
                                <strong class="pos-mockup-title" id="pos-mockup-title">Mesa 12</strong>
                                <span class="status-pill red" id="pos-mockup-pill">Ocupada</span>
                            </div>
                            <div class="pos-mockup-amount-wrap" id="pos-mockup-amount-wrap">
                                <span class="pos-mockup-amount-lbl" id="pos-mockup-amount-lbl">Consumo Total</span>
                                <span class="pos-mockup-amount" id="pos-mockup-amount">S/ 112.00</span>
                            </div>
                            <div class="pos-mockup-actions-container" id="pos-mockup-actions-container">
                                {{-- Renderizado dinámico vía JS --}}
                            </div>
                        </div>

                        <p class="pos-preview-notice">✨ <strong>Aplicación en tiempo real:</strong> Tanto la estructura de la tarjeta como sus botones adoptan en vivo los colores que elijas aquí y se guardan de forma automática.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>