<!DOCTYPE html>
<html lang="es">
<head>
  <script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Configuración — Nexus Autoparts POS</title>
  <link rel="stylesheet" href="/pos/static/css/chat.css" />
  <link rel="stylesheet" href="/pos/static/css/tokens.css" />
  <link rel="stylesheet" href="/pos/static/css/common.css" />
  <link rel="stylesheet" href="/pos/static/css/pos-ui.css?v=33" />
  <link rel="stylesheet" href="/pos/static/css/sidebar.css" />
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/config.css?v=33"></head>

<body>

  <!-- =========================================================================
       THEME SWITCHER BAR
       ========================================================================= -->

  <div class="theme-bar">
    <div class="theme-bar__left">
      <div class="theme-bar__store">
        <span class="theme-bar__dot"></span>
        Nexus Autoparts
      </div>
      <div class="theme-bar__sep"></div>
      <span class="theme-bar__label">Design System Preview</span>
    </div>
    <div class="theme-bar__right">
      <button class="theme-btn theme-btn--industrial is-active" data-theme-target="industrial" onclick="setTheme('industrial')">
        <span class="theme-btn__swatch"></span> Industrial
      </button>
      <button class="theme-btn theme-btn--modern" data-theme-target="modern" onclick="setTheme('modern')">
        <span class="theme-btn__swatch"></span> Moderno
      </button>
      <div class="theme-bar__sep"></div>
      <span class="theme-bar__label" id="live-clock">--:--</span>
    </div>
  </div>

  <!-- =========================================================================
       APP SHELL
       ========================================================================= -->

  <div class="app-shell">

    <!-- SIDEBAR -->
    <aside class="sidebar">
      <div class="sidebar__brand">
        <div class="brand-logo">N</div>
        <div>
          <div class="brand-name__primary">Nexus</div>
          <div class="brand-name__sub">Autoparts</div>
        </div>
      </div>

      <nav class="sidebar__nav">
        <div class="nav-section-label">Principal</div>
        <a class="nav-item" href="/pos/dashboard">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
          Dashboard
        </a>
        <a class="nav-item" href="/pos/sale">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="2" y1="20" x2="22" y2="20"/></svg>
          Punto de Venta
        </a>
        <a class="nav-item" href="/pos/catalog">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
          Catálogo
        </a>

        <div class="nav-section-label">Operaciones</div>
        <a class="nav-item" href="/pos/inventory">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
          Inventario
        </a>
        <a class="nav-item" href="/pos/customers">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          Clientes
        </a>
        <a class="nav-item" href="/pos/workshop">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
          Taller
        </a>

        <div class="nav-section-label">Finanzas</div>
        <a class="nav-item" href="/pos/invoicing">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
          Facturación
        </a>
        <a class="nav-item" href="/pos/accounting">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
          Contabilidad
        </a>

        <div class="nav-section-label">Sistema</div>
        <a class="nav-item" href="/pos/reports">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
          Reportes
        </a>
        <a class="nav-item is-active" href="/pos/config">
          <svg class="nav-item__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          Configuración
        </a>
      </nav>

      <div class="sidebar__footer">
        <div class="sidebar__user-avatar">AM</div>
        <div class="sidebar__user-info">
          <div class="sidebar__user-name">Admin</div>
          <div class="sidebar__user-role">Administrador</div>
        </div>
      </div>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="main">

      <!-- Page Header -->
      <header class="page-header">
        <div class="page-header__title-group">
          <span class="page-header__eyebrow">Sistema</span>
          <h1 class="page-header__title">Configuración</h1>
        </div>
        <div class="page-header__actions">
          <button id="btn-save-all" class="btn btn--primary" type="button">
            <svg viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Guardar Cambios
          </button>
        </div>
      </header>

      <!-- Scrollable Content -->
      <div class="content-scroll">

        <!-- ===============================================================
             SECTION 1: APARIENCIA / TEMA
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Apariencia</div>
              <div class="settings-section__desc">Selecciona el tema visual del sistema</div>
            </div>
          </div>

          <div class="theme-selector">
            <div class="theme-option is-selected" onclick="selectThemeOption('industrial')">
              <div class="theme-option__check">
                <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div class="theme-option__preview theme-option__preview--dark">
                <div class="theme-option__preview-logo theme-option__preview-logo--dark">N</div>
                <div class="theme-option__preview-text">
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                </div>
              </div>
              <div class="theme-option__name">Tema A — Industrial Robusto</div>
              <div class="theme-option__desc">Fondo oscuro, acentos ámbar, tipografía Barlow Condensed</div>
              <div class="theme-option__colors">
                <div class="theme-option__swatch" style="background: #0d0d0d;"></div>
                <div class="theme-option__swatch" style="background: #1a1a1a;"></div>
                <div class="theme-option__swatch" style="background: #F5A623;"></div>
                <div class="theme-option__swatch" style="background: #333333;"></div>
                <div class="theme-option__swatch" style="background: #FFFFFF;"></div>
              </div>
            </div>

            <div class="theme-option" onclick="selectThemeOption('modern')">
              <div class="theme-option__check">
                <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
              </div>
              <div class="theme-option__preview theme-option__preview--light">
                <div class="theme-option__preview-logo theme-option__preview-logo--light">N</div>
                <div class="theme-option__preview-text">
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                  <div class="theme-option__preview-bar"></div>
                </div>
              </div>
              <div class="theme-option__name">Tema B — Técnico Moderno</div>
              <div class="theme-option__desc">Fondo claro, acentos naranja, tipografía Poppins</div>
              <div class="theme-option__colors">
                <div class="theme-option__swatch" style="background: #FFFFFF;"></div>
                <div class="theme-option__swatch" style="background: #F8F9FF;"></div>
                <div class="theme-option__swatch" style="background: #FF6B35;"></div>
                <div class="theme-option__swatch" style="background: #1a1a2e;"></div>
                <div class="theme-option__swatch" style="background: #e2e4f0;"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 2: DATOS DE LA EMPRESA
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Datos de la Empresa</div>
              <div class="settings-section__desc">Información fiscal y comercial</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Razón Social</label>
                <input class="form-input" id="biz-razon-social" type="text" value="" placeholder="Ej: Refacciones El Toro S.A. de C.V." />
              </div>
              <div class="form-group">
                <label class="form-label">Nombre Comercial</label>
                <input class="form-input" id="biz-nombre" type="text" value="" placeholder="Ej: Refacciones El Toro" />
              </div>
              <div class="form-group">
                <label class="form-label">RFC</label>
                <input class="form-input" id="biz-rfc" type="text" value="" placeholder="Ej: RET260101ABC" maxlength="13" style="text-transform:uppercase;" />
              </div>
              <div class="form-group">
                <label class="form-label">Régimen Fiscal</label>
                <input class="form-input" id="biz-regimen" type="text" value="" placeholder="Ej: 601 - General de Ley" />
              </div>
              <div class="form-group form-group--full">
                <label class="form-label">Dirección Fiscal</label>
                <input class="form-input" id="biz-direccion" type="text" value="" placeholder="Calle, Numero, Colonia, CP, Ciudad" />
              </div>
              <div class="form-group">
                <label class="form-label">Teléfono</label>
                <input class="form-input" id="biz-telefono" type="tel" value="" placeholder="Ej: 664-123-4567" />
              </div>
              <div class="form-group">
                <label class="form-label">Email</label>
                <input class="form-input" id="biz-email" type="email" value="" placeholder="Ej: contacto@refacciones.com" />
              </div>
            </div>
            <div style="margin-top:var(--space-4);text-align:right;">
              <button class="btn btn--primary" onclick="Config.saveBusiness()">Guardar datos de empresa</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 3: PERSONALIZACIÓN DE TICKET
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Personalización de Ticket</div>
              <div class="settings-section__desc">Logo, datos y opciones que aparecen en el ticket de venta</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="form-grid">
              <div class="form-group form-group--full">
                <label class="form-label">Logo del negocio</label>
                <input type="file" id="receipt-logo" accept="image/png,image/jpeg,image/jpg,image/webp" onchange="Config.handleReceiptLogo(this)" style="display:none;" />
                <div id="receipt-logo-preview" style="display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;">
                  <div id="receipt-logo-thumb" style="width:80px;height:80px;border:1px dashed var(--color-border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--color-surface-2);">
                    <span style="color:var(--color-text-muted);font-size:var(--text-caption);text-align:center;padding:var(--space-2);">Sin logo</span>
                  </div>
                  <button class="btn btn--secondary btn--sm" onclick="document.getElementById('receipt-logo').click()">Subir imagen</button>
                  <button class="btn btn--ghost btn--sm" id="receipt-logo-remove" onclick="Config.removeReceiptLogo()" style="display:none;">Quitar</button>
                </div>
                <div class="form-hint">Recomendado: PNG/JPG con fondo blanco o transparente, máx. 300x150 px.</div>
              </div>
              <div class="form-group">
                <label class="form-label">Nombre en ticket</label>
                <input class="form-input" id="receipt-store-name" type="text" placeholder="Ej: Refacciones El Toro" />
              </div>
              <div class="form-group">
                <label class="form-label">Slogan / Línea debajo del nombre</label>
                <input class="form-input" id="receipt-tagline" type="text" placeholder="Ej: Tu conexion con las refacciones" />
              </div>
              <div class="form-group">
                <label class="form-label">RFC en ticket</label>
                <input class="form-input" id="receipt-rfc" type="text" placeholder="Ej: RET260101ABC" maxlength="13" style="text-transform:uppercase;" />
              </div>
              <div class="form-group form-group--full">
                <label class="form-label">Dirección en ticket</label>
                <input class="form-input" id="receipt-address" type="text" placeholder="Calle, Número, Colonia, CP, Ciudad" />
              </div>
              <div class="form-group">
                <label class="form-label">Teléfono en ticket</label>
                <input class="form-input" id="receipt-phone" type="tel" placeholder="Ej: 664-123-4567" />
              </div>
              <div class="form-group form-group--full">
                <label class="form-label">Mensaje de agradecimiento</label>
                <input class="form-input" id="receipt-thanks" type="text" placeholder="Gracias por su compra!" />
              </div>
              <div class="form-group form-group--full">
                <label class="form-label">Pie de página adicional</label>
                <input class="form-input" id="receipt-footer" type="text" placeholder="Ej: Conserve su ticket como comprobante." />
              </div>
            </div>
            <div class="form-grid" style="margin-top:var(--space-4);">
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-logo" style="width:auto;" checked /> Mostrar logo</label>
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-rfc" style="width:auto;" checked /> Mostrar RFC</label>
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-address" style="width:auto;" /> Mostrar dirección</label>
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-phone" style="width:auto;" /> Mostrar teléfono</label>
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-iva" style="width:auto;" checked /> Mostrar desglose de IVA</label>
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-payment" style="width:auto;" checked /> Mostrar detalle de pago</label>
              <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer;"><input type="checkbox" id="receipt-show-employee" style="width:auto;" /> Mostrar nombre del empleado</label>
            </div>
            <div style="margin-top:var(--space-4);text-align:right;">
              <button class="btn btn--primary" onclick="Config.saveReceiptConfig()">Guardar ticket</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 4: MÓDULOS E INTEGRACIONES
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Módulos e Integraciones</div>
              <div class="settings-section__desc">Activa o desactiva funcionalidades del menú para este tenant</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">WhatsApp</span>
                <span class="toggle-row__desc">Mostrar el menú de WhatsApp Bridge y chat</span>
              </div>
              <label class="toggle">
                <input type="checkbox" id="cfg-module-whatsapp" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Marketplace</span>
                <span class="toggle-row__desc">Mostrar el menú de Marketplace interno</span>
              </div>
              <label class="toggle">
                <input type="checkbox" id="cfg-module-marketplace" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">MercadoLibre</span>
                <span class="toggle-row__desc">Mostrar el menú de integración con MercadoLibre</span>
              </div>
              <label class="toggle">
                <input type="checkbox" id="cfg-module-meli" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Catálogo</span>
                <span class="toggle-row__desc">Mostrar el menú de Catálogo de productos</span>
              </div>
              <label class="toggle">
                <input type="checkbox" id="cfg-module-catalog" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div style="margin-top:var(--space-4);text-align:right;">
              <button class="btn btn--primary" onclick="Config.saveModules()">Guardar módulos</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 4: USUARIOS Y PERMISOS
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Usuarios y Permisos</div>
              <div class="settings-section__desc">Gestiona quién accede al sistema y qué puede hacer</div>
            </div>
          </div>

          <div class="settings-card" style="padding: 0;">
            <div style="padding: var(--space-4) var(--space-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--color-border);">
              <span id="employees-count" style="font-weight: var(--font-weight-semibold); color: var(--color-text-primary);">Cargando...</span>
              <button class="btn btn--primary btn--sm" id="btn-new-employee">
                <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Nuevo Empleado
              </button>
            </div>
            <div class="table-wrapper" style="border: none; border-radius: 0; box-shadow: none;">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>Usuario</th>
                    <th>Email</th>
                    <th>Rol</th>
                    <th>Sucursal</th>
                    <th>Estado</th>
                    <th>Desc. Max</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody id="employees-tbody">
                  <tr><td colspan="7" style="text-align:center; padding: var(--space-5);">Cargando empleados...</td></tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 4: IMPRESORAS
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Impresoras</div>
              <div class="settings-section__desc">Configura impresoras de tickets y etiquetas</div>
            </div>
          </div>

          <div class="device-grid" id="printerGrid">
            <div class="device-card" style="border-style:dashed;text-align:center;color:var(--color-text-muted);padding:var(--space-8);">
              <div style="font-size:2rem;margin-bottom:var(--space-3);">🖨️</div>
              <div>Sin impresoras configuradas</div>
              <div style="font-size:var(--text-caption);margin-top:var(--space-2);">
                La configuracion de impresoras se hace desde el navegador.<br>
                Ve a <strong>chrome://devices</strong> o usa <strong>Ctrl+P</strong> para imprimir.
              </div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 5: SUCURSALES
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Sucursales</div>
              <div class="settings-section__desc">Gestiona las ubicaciones de tu negocio</div>
            </div>
          </div>

          <div class="device-grid" id="branches-grid">
            <div class="device-card"><div class="device-card__body" style="text-align:center;">Cargando sucursales...</div></div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 6: PARÁMETROS FISCALES
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Parámetros Fiscales</div>
              <div class="settings-section__desc">Configuración de facturación electrónica CFDI</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Certificados y Sellos Digitales</div>
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Certificado (.cer)</label>
                <div style="display: flex; align-items: center; gap: var(--space-2);">
                  <input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.cer" readonly style="flex:1; opacity: 0.7;" />
                  <button class="btn btn--ghost btn--sm">Cambiar</button>
                </div>
                <span class="form-hint">Vigente hasta: 15/01/2029</span>
              </div>
              <div class="form-group">
                <label class="form-label">Llave Privada (.key)</label>
                <div style="display: flex; align-items: center; gap: var(--space-2);">
                  <input class="form-input" type="text" value="CSD_NAU260101ABC_20250115.key" readonly style="flex:1; opacity: 0.7;" />
                  <button class="btn btn--ghost btn--sm">Cambiar</button>
                </div>
              </div>
              <div class="form-group">
                <label class="form-label">Contraseña del CSD</label>
                <input class="form-input" type="password" value="••••••••" />
              </div>
              <div class="form-group">
                <label class="form-label">PAC (Proveedor de Certificación)</label>
                <select class="form-select">
                  <option selected>Finkok</option>
                  <option>Diverza</option>
                  <option>Edicom</option>
                  <option>SW Sapien</option>
                </select>
              </div>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Configuración de Facturación</div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Facturación automática</span>
                <span class="toggle-row__desc">Generar CFDI automáticamente al cerrar una venta</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Envío automático por email</span>
                <span class="toggle-row__desc">Enviar PDF y XML al correo del cliente</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Factura global diaria</span>
                <span class="toggle-row__desc">Generar CFDI global para ventas sin RFC</span>
              </div>
              <label class="toggle">
                <input type="checkbox" />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Complemento de pago</span>
                <span class="toggle-row__desc">Generar complemento de pago para cobros parciales</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Parámetros de Impuestos</div>
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Tasa IVA (%)</label>
                <input class="form-input" id="tax-iva" type="number" value="16" step="1" min="0" max="100" />
              </div>
              <div class="form-group">
                <label class="form-label">Tasa IEPS (%)</label>
                <input class="form-input" id="tax-ieps" type="number" value="0" step="1" min="0" />
                <span class="form-hint">Dejar en 0 si no aplica</span>
              </div>
              <div class="form-group">
                <label class="form-label">Serie de Facturación</label>
                <input class="form-input" id="tax-serie" type="text" value="FA" maxlength="10" style="text-transform:uppercase;" />
              </div>
              <div class="form-group">
                <label class="form-label">Folio Actual</label>
                <input class="form-input" id="tax-folio" type="number" value="1" min="1" />
              </div>
              <div class="form-group">
                <label class="form-label">Moneda Predeterminada</label>
                <select class="form-select" id="tax-moneda">
                  <option value="MXN">MXN — Peso Mexicano</option>
                  <option value="USD">USD — Dólar Americano</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label">Forma de Pago Default</label>
                <select class="form-select" id="tax-forma-pago">
                  <option value="01">01 — Efectivo</option>
                  <option value="03">03 — Transferencia Electrónica</option>
                  <option value="04">04 — Tarjeta de Crédito</option>
                  <option value="28">28 — Tarjeta de Débito</option>
                  <option value="99">99 — Por Definir</option>
                </select>
              </div>
            </div>
            <div class="btn-group">
              <button class="btn btn--primary btn--sm" onclick="Config.saveTaxParams()">Guardar Parámetros</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 7: PREFERENCIAS DEL SISTEMA
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Preferencias del Sistema</div>
              <div class="settings-section__desc">Ajustes generales de operación</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Notificaciones de stock bajo</span>
                <span class="toggle-row__desc">Alertar cuando un producto baje del mínimo configurado</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Sonidos de notificación</span>
                <span class="toggle-row__desc">Reproducir sonido al completar una venta o recibir alerta</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Cierre de caja obligatorio</span>
                <span class="toggle-row__desc">Requerir cierre de caja al finalizar el turno</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Modo offline</span>
                <span class="toggle-row__desc">Permitir ventas sin conexión a internet (sincroniza al reconectar)</span>
              </div>
              <label class="toggle">
                <input type="checkbox" />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Autocompletado de búsqueda</span>
                <span class="toggle-row__desc">Sugerir productos mientras se escribe en la barra de búsqueda</span>
              </div>
              <label class="toggle">
                <input type="checkbox" checked />
                <span class="toggle__slider"></span>
              </label>
            </div>
            <div class="toggle-row">
              <div class="toggle-row__info">
                <span class="toggle-row__label">Modo Kiosko</span>
                <span class="toggle-row__desc">Pantalla completa, bloqueo de pantalla activa, sin menú contextual (ideal para tablet/mostrador)</span>
              </div>
              <label class="toggle">
                <input type="checkbox" id="cfg-kiosk-mode" />
                <span class="toggle__slider"></span>
              </label>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 8: VEHICLE COMPATIBILITY SOURCE
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Compatibilidad de Vehículos</div>
              <div class="settings-section__desc">Elige la fuente para asignar vehículos compatibles a tus productos</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Fuente de Datos</div>
            <div class="form-grid">
              <div class="form-group">
                <label class="form-label">Método de asignación automática</label>
                <select class="form-select" id="cfg-compat-source">
                  <option value="tecdoc">TecDoc — Base de datos oficial de autopartes</option>
                  <option value="qwen">QWEN AI — Inteligencia artificial (experimental)</option>
                  <option value="both">Ambos — TecDoc primero, QWEN como complemento</option>
                </select>
                <span class="form-hint">Afecta la creación de productos y el botón "Auto-Match"</span>
              </div>
            </div>
            <div style="margin-top: var(--space-4); display: flex; justify-content: flex-end;">
              <button class="btn btn--primary" id="btn-save-compat-source">Guardar</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 9: MARCAS DE PARTES PERMITIDAS
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><polyline points="2 17 12 22 22 17"/></svg>
            </div>
            <div>
              <div class="settings-section__title">Marcas de Partes Permitidas</div>
              <div class="settings-section__desc">Selecciona qué marcas de fabricantes aparecen en el catálogo</div>
            </div>
          </div>

          <div class="settings-card">
            <div class="settings-card__title">Fabricantes Aftermarket</div>
            <div id="allowed-brands-container" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-3);margin-top:var(--space-4);max-height:300px;overflow-y:auto;padding:var(--space-3);border:1px solid var(--color-border);background:var(--color-bg-base);">
              <p style="color:var(--color-text-muted);font-size:var(--text-body-sm);">Cargando marcas...</p>
            </div>
            <p style="color:var(--color-text-muted);font-size:var(--text-caption);margin-top:var(--space-2);">Si no seleccionas ninguna, se mostrarán todas las partes.</p>
            <div style="margin-top:var(--space-4);display:flex;justify-content:flex-end;">
              <button class="btn btn--primary" id="btn-save-allowed-brands">Guardar Marcas</button>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             SECTION 10: MONEDA / CURRENCY
             =============================================================== -->
        <div class="settings-section">
          <div class="settings-section__header">
            <div class="settings-section__icon">
              <svg viewBox="0 0 24 24"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
            </div>
            <div>
              <div class="settings-section__title" data-i18n="currency_config">Moneda</div>
              <div class="settings-section__desc">Configura la moneda y tipo de cambio para ventas</div>
            </div>
          </div>

          <div class="settings-card" style="padding:var(--space-5);">
            <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);">
              <div class="form-group">
                <label class="form-label" data-i18n="default_currency">Moneda Predeterminada</label>
                <select class="form-input" id="cfg-currency" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:var(--color-bg-base);color:var(--color-text-primary);font-size:var(--text-body-sm);">
                  <option value="MXN">$ MXN — Peso Mexicano</option>
                  <option value="USD">US$ USD — US Dollar</option>
                </select>
              </div>
              <div class="form-group">
                <label class="form-label" data-i18n="exchange_rate">Tipo de Cambio USD/MXN</label>
                <input class="form-input" id="cfg-exchange-rate" type="number" step="0.01" min="0.01" value="17.50"
                       style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm,4px);background:var(--color-bg-base);color:var(--color-text-primary);font-size:var(--text-body-sm);font-family:var(--font-mono);" />
              </div>
            </div>
            <div style="margin-top:var(--space-4);display:flex;gap:var(--space-3);align-items:center;">
              <button class="btn btn--primary" id="btn-save-currency" style="padding:var(--space-2) var(--space-4);font-size:var(--text-body-sm);" onclick="Config.saveCurrency()">
                Guardar Moneda
              </button>
              <span id="currency-status" style="font-size:var(--text-caption);color:var(--color-text-muted);"></span>
            </div>
          </div>
        </div>

      </div><!-- /content-scroll -->
    </main>
  </div><!-- /app-shell -->

  <!-- =====================================================================
       MODALS
       ===================================================================== -->

  <!-- Modal: Nueva / Editar Sucursal -->
  <div class="cfg-modal-overlay" id="modal-branch" style="display:none;">
    <div class="cfg-modal" style="max-width:640px;">
      <div class="cfg-modal__header">
        <h3 class="cfg-modal__title" id="branch-modal-title">Nueva Sucursal</h3>
        <button class="cfg-modal__close" onclick="Config.closeModal('modal-branch')">&times;</button>
      </div>
      <div class="cfg-modal__body">
        <input type="hidden" id="branch-id" value="" />
        <div class="form-grid">
          <div class="form-group form-group--full">
            <label class="form-label">Nombre *</label>
            <input class="form-input" id="branch-name" type="text" placeholder="Ej. Sucursal Norte" />
          </div>
          <div class="form-group">
            <label class="form-label">RFC</label>
            <input class="form-input" id="branch-rfc" type="text" placeholder="ABC010101ABC" maxlength="13" />
          </div>
          <div class="form-group">
            <label class="form-label">Razon Social</label>
            <input class="form-input" id="branch-razon" type="text" placeholder="Razon social fiscal" />
          </div>
          <div class="form-group">
            <label class="form-label">Regimen Fiscal</label>
            <input class="form-input" id="branch-regimen" type="text" placeholder="601" maxlength="10" />
          </div>
          <div class="form-group">
            <label class="form-label">Codigo Postal</label>
            <input class="form-input" id="branch-cp" type="text" placeholder="00000" maxlength="5" />
          </div>
          <div class="form-group form-group--full">
            <label class="form-label">Direccion Fiscal</label>
            <input class="form-input" id="branch-direccion-fiscal" type="text" placeholder="Calle, Colonia, Ciudad" />
          </div>
          <div class="form-group">
            <label class="form-label">Serie CFDI</label>
            <input class="form-input" id="branch-serie" type="text" placeholder="A" maxlength="10" />
          </div>
          <div class="form-group">
            <label class="form-label">Folio Inicio</label>
            <input class="form-input" id="branch-folio-inicio" type="number" placeholder="1" />
          </div>
          <div class="form-group">
            <label class="form-label">Folio Actual</label>
            <input class="form-input" id="branch-folio-actual" type="number" placeholder="1" />
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>
            <input class="form-input" id="branch-email" type="email" placeholder="sucursal@empresa.com" />
          </div>
          <div class="form-group form-group--full">
            <label class="form-label">Direccion</label>
            <input class="form-input" id="branch-address" type="text" placeholder="Calle, Colonia, Ciudad" />
          </div>
          <div class="form-group form-group--full">
            <label class="form-label">Telefono</label>
            <input class="form-input" id="branch-phone" type="tel" placeholder="(55) 1234-5678" />
          </div>
          <div class="form-group form-group--full">
            <label class="form-check" style="display:flex;align-items:center;gap:8px;cursor:pointer;">
              <input type="checkbox" id="branch-main" style="width:auto;" />
              <span>Sucursal principal (datos fiscales por defecto)</span>
            </label>
          </div>
        </div>
      </div>
      <div class="cfg-modal__footer">
        <button class="btn btn--ghost" onclick="Config.closeModal('modal-branch')">Cancelar</button>
        <button class="btn btn--primary" id="btn-save-branch">Guardar Sucursal</button>
      </div>
    </div>
  </div>

  <!-- Modal: Nuevo Empleado -->
  <div class="cfg-modal-overlay" id="modal-employee" style="display:none;">
    <div class="cfg-modal">
      <div class="cfg-modal__header">
        <h3 class="cfg-modal__title">Nuevo Empleado</h3>
        <button class="cfg-modal__close" onclick="Config.closeModal('modal-employee')">&times;</button>
      </div>
      <div class="cfg-modal__body">
        <div class="form-grid">
          <div class="form-group">
            <label class="form-label">Nombre Completo *</label>
            <input class="form-input" id="emp-name" type="text" placeholder="Nombre y apellido" />
          </div>
          <div class="form-group">
            <label class="form-label">Email</label>
            <input class="form-input" id="emp-email" type="email" placeholder="correo@empresa.mx" />
          </div>
          <div class="form-group">
            <label class="form-label">Telefono</label>
            <input class="form-input" id="emp-phone" type="tel" placeholder="(55) 1234-5678" />
          </div>
          <div class="form-group">
            <label class="form-label">Rol *</label>
            <select class="form-select" id="emp-role">
              <option value="">-- Seleccionar --</option>
              <option value="admin">Administrador</option>
              <option value="cashier">Cajero</option>
              <option value="warehouse">Almacenista</option>
              <option value="accountant">Contador</option>
              <option value="workshop">Taller</option>
              <option value="mechanic">Mecanico</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">PIN (4 digitos) *</label>
            <input class="form-input" id="emp-pin" type="password" maxlength="4" pattern="\d{4}" placeholder="0000" />
          </div>
          <div class="form-group">
            <label class="form-label">Sucursal</label>
            <select class="form-select" id="emp-branch">
              <option value="">-- Todas --</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Descuento Max. (%)</label>
            <input class="form-input" id="emp-discount" type="number" min="0" max="100" value="0" />
          </div>
        </div>
      </div>
      <div class="cfg-modal__footer">
        <button class="btn btn--ghost" onclick="Config.closeModal('modal-employee')">Cancelar</button>
        <button class="btn btn--primary" id="btn-save-employee">Guardar Empleado</button>
      </div>
    </div>
  </div>

  <script src="/pos/static/js/i18n.js" defer></script>
  <script src="/pos/static/js/app-init.js" defer></script>
  <script src="/pos/static/js/splash-loader.js?v=33" defer></script>
  <script src="/pos/static/js/pos-utils.js?v=33" defer></script>
  <script src="/pos/static/js/sidebar.js" defer></script>
  <script src="/pos/static/js/kiosk.js" defer></script>
  <script src="/pos/static/js/config.js?v=33" defer></script>
  <script src="/pos/static/js/sync-engine.js" defer></script>
  <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
  <script src="/pos/static/js/pwa-install.js" defer></script>

  <script src="/pos/static/js/chat.js" defer></script>
</body>
</html>
