<!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>Nexus Autoparts — Clientes</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/customers.css"></head>

<body>

  <!-- ====================================================================
       THEME SWITCHER BAR
       ==================================================================== -->
  <div class="theme-bar">
    <div class="theme-bar__brand">
      <span class="theme-bar__brand-dot"></span>
      <span>Nexus Autoparts</span>
    </div>

    <div class="theme-bar__center">
      <span>Sucursal Principal</span>
      <span>Turno: Matutino — Hugo M.</span>
    </div>

    <div class="theme-bar__right">
      <div class="theme-switcher">
        <button class="theme-btn active" id="btn-industrial" onclick="setTheme('industrial')">
          <!-- gear icon -->
          <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="8" cy="8" r="2.5"/><path d="M8 2v1M8 13v1M2 8H1m14 0h-1M3.5 3.5l.7.7M11.8 11.8l.7.7M3.5 12.5l.7-.7M11.8 4.2l.7-.7"/></svg>
          Industrial
        </button>
        <button class="theme-btn" id="btn-modern" onclick="setTheme('modern')">
          <!-- sun icon -->
          <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><circle cx="8" cy="8" r="3"/><line x1="8" y1="1" x2="8" y2="3"/><line x1="8" y1="13" x2="8" y2="15"/><line x1="1" y1="8" x2="3" y2="8"/><line x1="13" y1="8" x2="15" y2="8"/></svg>
          Modern
        </button>
      </div>

      <div class="theme-bar__user">
        <div class="theme-bar__user-avatar">HM</div>
        <span>Hugo M.</span>
      </div>
    </div>
  </div>

  <!-- ====================================================================
       APP SHELL
       ==================================================================== -->
  <div class="app-shell">

    <!-- SIDEBAR -->
    <aside class="sidebar">
      <div class="sidebar__logo">
        <div class="sidebar__logo-icon">
          <!-- car/wrench icon -->
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" 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>
        </div>
        <div>
          <div class="sidebar__logo-text">Nexus</div>
          <div class="sidebar__logo-sub">Autoparts POS</div>
        </div>
      </div>

      <div class="sidebar__section-label">Módulos</div>

      <ul class="sidebar__nav">
        <li class="nav-item">
          <a href="/pos/dashboard" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <rect x="1" y="1" width="6" height="6" rx="1"/><rect x="9" y="1" width="6" height="6" rx="1"/>
              <rect x="1" y="9" width="6" height="6" rx="1"/><rect x="9" y="9" width="6" height="6" rx="1"/>
            </svg>
            Dashboard
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/sale" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <rect x="1" y="3" width="14" height="11" rx="1.5"/>
              <path d="M5 3V2m6 1V2"/>
              <path d="M1 7h14"/>
            </svg>
            POS
            <span class="nav-link__badge">1</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/catalog" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 4h12M2 8h8M2 12h10"/>
            </svg>
            Catálogo
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/inventory" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="3" width="12" height="11" rx="1"/><path d="M5 3V1m6 2V1M6 9l2 2 4-4"/>
            </svg>
            Inventario
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/customers" class="nav-link active">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="6" cy="5" r="3"/><path d="M1 14c0-2.76 2.24-5 5-5s5 2.24 5 5"/>
              <path d="M13 6l2 2-3.5 3.5"/>
            </svg>
            Clientes
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/invoicing" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="2" width="12" height="12" rx="1"/><path d="M5 6h6M5 9h4"/>
            </svg>
            Facturación
            <span class="nav-link__badge">3</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/accounting" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <path d="M8 1v14M1 8h14"/>
              <circle cx="8" cy="8" r="7"/>
            </svg>
            Contabilidad
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/reports" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <path d="M2 11V14h3l8-8-3-3L2 11z"/><path d="M12 3l1 1"/>
            </svg>
            Reportes
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/historical-sales" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <rect x="2" y="3" width="12" height="11" rx="1"/>
              <path d="M2 6h12"/>
              <path d="M5 2v2M11 2v2"/>
            </svg>
            Ventas Históricas
          </a>
        </li>
        <li class="nav-item">
          <a href="/pos/config" class="nav-link">
            <svg class="nav-link__icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="8" cy="8" r="2.5"/>
              <path d="M8 2v1M8 13v1M2 8H1m14 0h-1M3.5 3.5l.7.7M11.8 11.8l.7.7M3.5 12.5l.7-.7M11.8 4.2l.7-.7"/>
            </svg>
            Configuración
          </a>
        </li>
      </ul>

      <div class="sidebar__footer">
        v1.0.0 — 2026
      </div>
    </aside>

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

      <!-- Page Header -->
      <div class="page-header">
        <div>
          <div class="page-header__title">Gestión de Clientes</div>
          <div class="page-header__subtitle">Directorio, crédito y historial de compras</div>
        </div>
        <div class="page-header__actions">
          <button class="btn btn-ghost" onclick="openCustomerFilters(this)">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2 5h12M4 8h8M6 11h4"/></svg>
            Filtros
          </button>
          <script>
          function openCustomerFilters(btn) {
              var table = document.querySelector('table');
              if (!table) { showToast('Carga la lista de clientes primero', 'warn'); return; }
              // Auto-detect columns: look at headers to find the right indexes
              var ths = table.querySelectorAll('thead th');
              var colMap = {};
              ths.forEach(function(th, i) {
                  var t = th.textContent.trim().toLowerCase();
                  if (t.indexOf('tipo') !== -1 || t.indexOf('tier') !== -1) colMap.tipo = i;
                  if (t.indexOf('ciudad') !== -1 || t.indexOf('city') !== -1) colMap.ciudad = i;
                  if (t.indexOf('crédito') !== -1 || t.indexOf('credito') !== -1 || t.indexOf('credit') !== -1) colMap.credito = i;
                  if (t.indexOf('status') !== -1 || t.indexOf('estado') !== -1) colMap.status = i;
              });
              var filters = [];
              if (colMap.tipo !== undefined) filters.push({label:'Tipo', column: colMap.tipo, values: getUniqueColumnValues(table, colMap.tipo)});
              if (colMap.credito !== undefined) filters.push({label:'Crédito', column: colMap.credito, values: getUniqueColumnValues(table, colMap.credito)});
              if (colMap.ciudad !== undefined) filters.push({label:'Ciudad', column: colMap.ciudad, values: getUniqueColumnValues(table, colMap.ciudad)});
              if (colMap.status !== undefined) filters.push({label:'Estado', column: colMap.status, values: getUniqueColumnValues(table, colMap.status)});
              if (filters.length === 0) {
                  // Fallback: use first 3 columns
                  for (var i = 1; i < Math.min(4, ths.length); i++) {
                      filters.push({label: ths[i].textContent.trim(), column: i, values: getUniqueColumnValues(table, i)});
                  }
              }
              toggleFilterPanel(btn, filters);
          }
          </script>
          <button class="btn btn-ghost" onclick="exportVisibleTableCSV('clientes')">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 10v3a1 1 0 01-1 1H3a1 1 0 01-1-1v-3M8 1v9M4 6l4 4 4-4"/></svg>
            Exportar CSV
          </button>
          <button class="btn btn-primary" onclick="openNewCustomerModal()">
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2"><line x1="8" y1="2" x2="8" y2="14"/><line x1="2" y1="8" x2="14" y2="8"/></svg>
            Nuevo Cliente
          </button>
        </div>
      </div>

      <!-- Summary Cards -->
      <div class="summary-bar">

        <div class="summary-card">
          <div class="summary-card__icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
              <circle cx="6" cy="5" r="2.5"/><path d="M1 13.5c0-2.5 2.24-4.5 5-4.5s5 2 5 4.5"/>
              <path d="M11 4a2.5 2.5 0 010 5M14.5 13.5c0-2-1.5-3.5-3.5-4"/>
            </svg>
          </div>
          <div class="summary-card__label">Total Clientes</div>
          <div class="summary-card__value" id="cust-total">0</div>
          <div class="summary-card__sub">Registrados</div>
        </div>

        <div class="summary-card">
          <div class="summary-card__icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
              <circle cx="6" cy="5" r="2.5"/><path d="M1 13.5c0-2.5 2.24-4.5 5-4.5s5 2 5 4.5"/>
              <path d="M12 8l1.5 1.5L16 7"/>
            </svg>
          </div>
          <div class="summary-card__label">Clientes Activos</div>
          <div class="summary-card__value" id="cust-active">0</div>
          <div class="summary-card__sub">Con compras recientes</div>
        </div>

        <div class="summary-card">
          <div class="summary-card__icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
              <circle cx="8" cy="8" r="6.5"/>
              <path d="M8 4.5v1.25M8 10.25v1.25"/>
              <path d="M5.75 6.5c0-.83.67-1.5 1.5-1.5h1c.83 0 1.5.67 1.5 1.5S9.08 8 8 8s-2 .67-2 1.5.67 1.5 1.5 1.5h1.5c.83 0 1.5-.67 1.5-1.5"/>
            </svg>
          </div>
          <div class="summary-card__label">Crédito Otorgado</div>
          <div class="summary-card__value" id="cust-credit">$0</div>
          <div class="summary-card__sub">Total en créditos activos</div>
        </div>

        <div class="summary-card">
          <div class="summary-card__icon" style="background-color: rgba(239,68,68,0.12); color: var(--color-error);">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
              <path d="M2 4h12l-1.5 8H3.5L2 4z"/>
              <path d="M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1"/>
            </svg>
          </div>
          <div class="summary-card__label">Cuentas por Cobrar</div>
          <div class="summary-card__value" id="cust-receivable" style="color: var(--color-error);">$0</div>
          <div class="summary-card__sub">Saldo pendiente</div>
        </div>

      </div>

      <!-- Content Split -->
      <div class="content-split">

        <!-- ============================================================
             LEFT PANEL — Customer List
             ============================================================ -->
        <div class="panel-list">

          <!-- Toolbar / Search -->
          <div class="list-toolbar">
            <div class="search-wrap">
              <span class="search-icon">
                <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                  <circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/>
                </svg>
              </span>
              <input type="text" class="search-input" placeholder="Buscar por nombre, RFC, teléfono…" id="searchInput" oninput="filterCustomers()" aria-label="Buscar clientes" />
            </div>
            <select class="filter-select" onchange="filterCustomers()" id="tipoFilter" aria-label="Filtrar por tipo de cliente">
              <option value="">Todos los tipos</option>
              <option value="Taller">Taller</option>
              <option value="Mostrador">Mostrador</option>
              <option value="Mayoreo">Mayoreo</option>
            </select>
            <select class="filter-select" onchange="filterCustomers()" id="estadoFilter" aria-label="Filtrar por estado de cliente">
              <option value="">Todos los estados</option>
              <option value="Activo">Activo</option>
              <option value="Inactivo">Inactivo</option>
              <option value="Mora">En mora</option>
            </select>
          </div>

          <!-- Table -->
          <div class="table-wrap themed-scrollbar">
            <div id="customersBulkToolbar"></div>
            <table class="customers-table" id="customersTable">
              <thead>
                <tr>
                  <th><input type="checkbox" id="selectAllCustomers" onclick="Customers.toggleSelectAll()"></th>
                  <th>#</th>
                  <th>Nombre</th>
                  <th class="hide-mobile">RFC</th>
                  <th class="hide-mobile">Teléfono</th>
                  <th class="hide-mobile">Email</th>
                  <th>Tipo</th>
                  <th>Crédito Disp.</th>
                  <th class="hide-mobile">Última Compra</th>
                  <th>Estado</th>
                  <th></th>
                </tr>
              </thead>
              <tbody id="customersBody">
                <!-- Rows rendered by JS -->
              </tbody>
            </table>
          </div>

          <!-- Pagination -->
          <div class="table-footer">
            <div class="table-footer__info" id="tableInfo"></div>
            <div class="pagination" id="customersPagination"></div>
          </div>
        </div>

        <!-- ============================================================
             RIGHT PANEL — Customer Detail
             ============================================================ -->
        <div class="panel-detail themed-scrollbar" id="detailPanel">

          <!-- Empty state (shown when no customer selected) -->
          <div class="detail-empty" id="detailEmpty">
            <div class="detail-empty__icon">
              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="9" cy="7" r="4"/><path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2"/>
                <line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/>
              </svg>
            </div>
            <div class="detail-empty__text">Selecciona un cliente<br>para ver su detalle</div>
          </div>

          <!-- Detail content (hidden until a row is selected) -->
          <div id="detailContent" style="display:none; flex-direction:column; flex:1;">

            <!-- Header -->
            <div class="detail-header">
              <div class="customer-avatar" id="detailAvatar">—</div>
              <div class="detail-header__info">
                <div class="detail-header__name" id="detailName">—</div>
                <div class="detail-header__rfc" id="detailRFC">—</div>
                <div class="detail-header__meta">
                  <span class="tipo-chip tipo-chip--taller" id="detailTipo">—</span>
                  <span class="badge badge--active" id="detailStatus"><span class="badge-dot"></span>Activo</span>
                </div>
              </div>
              <div class="detail-header__actions">
                <button class="btn btn-sm btn-ghost" onclick="closeDetail()">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 1l10 10M11 1L1 11"/></svg>
                </button>
              </div>
            </div>

            <!-- Contact Info -->
            <div class="detail-section">
              <div class="detail-section__title">Información de Contacto</div>
              <div class="info-grid">
                <div class="info-row info-row--full">
                  <span class="info-label">Razón Social</span>
                  <span class="info-value" id="detailRazonSocial">—</span>
                </div>
                <div class="info-row info-row--full">
                  <span class="info-label">Dirección</span>
                  <span class="info-value" id="detailAddress">—</span>
                </div>
                <div class="info-row">
                  <span class="info-label">CP</span>
                  <span class="info-value info-value--mono" id="detailCp">—</span>
                </div>
                <div class="info-row">
                  <span class="info-label">Teléfono</span>
                  <span class="info-value info-value--mono" id="detailPhone">+52 55 1234-5678</span>
                </div>
                <div class="info-row">
                  <span class="info-label">Email</span>
                  <span class="info-value" id="detailEmail" style="font-size:var(--text-caption);">m.torres@tallerstar.mx</span>
                </div>
                <div class="info-row">
                  <span class="info-label">Cliente desde</span>
                  <span class="info-value info-value--mono" id="detailSince">14 Mar 2019</span>
                </div>
                <div class="info-row">
                  <span class="info-label">Últ. Compra</span>
                  <span class="info-value info-value--mono" id="detailLastPurchase">28 Mar 2026</span>
                </div>
              </div>
            </div>

            <!-- Credit Info -->
            <div class="detail-section">
              <div class="detail-section__title">Crédito</div>
              <div class="credit-block">
                <div class="credit-metrics">
                  <div class="credit-metric">
                    <div class="credit-metric__label">Límite</div>
                    <div class="credit-metric__value" id="detailCreditLimit">$80,000</div>
                  </div>
                  <div class="credit-metric">
                    <div class="credit-metric__label">Disponible</div>
                    <div class="credit-metric__value available" id="detailCreditAvail">$48,500</div>
                  </div>
                  <div class="credit-metric">
                    <div class="credit-metric__label">Utilizado</div>
                    <div class="credit-metric__value used" id="detailCreditUsed">$31,500</div>
                  </div>
                  <div class="credit-metric">
                    <div class="credit-metric__label">Descuento Max</div>
                    <div class="credit-metric__value" id="detailMaxDiscount">0%</div>
                  </div>
                </div>
                <div class="credit-progress">
                  <div class="credit-progress__labels">
                    <span>Utilización de crédito</span>
                    <span id="detailCreditPct">39%</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-bar__fill low" id="detailCreditBar" style="width: 39%;"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Quick Actions -->
            <div class="detail-section">
              <div class="detail-section__title">Acciones Rápidas</div>
              <div class="quick-actions">
                <button class="action-btn action-btn--primary">
                  <span class="action-btn__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                      <circle cx="5.5" cy="12" r="1.5"/><circle cx="11.5" cy="12" r="1.5"/>
                      <path d="M1 2h2l1.5 7h7l1.5-5H5"/>
                    </svg>
                  </span>
                  Nueva Venta
                </button>
                <button class="action-btn">
                  <span class="action-btn__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                      <path d="M2 11V14h3l8-8-3-3L2 11z"/>
                    </svg>
                  </span>
                  Editar
                </button>
                <button class="action-btn">
                  <span class="action-btn__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                      <rect x="2" y="2" width="12" height="12" rx="1"/><path d="M5 6h6M5 9h4"/>
                    </svg>
                  </span>
                  Estado de Cuenta
                </button>
                <button class="action-btn">
                  <span class="action-btn__icon">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                      <path d="M8 1v14M1 8h14"/>
                      <circle cx="8" cy="8" r="6"/>
                    </svg>
                  </span>
                  Historial
                </button>
              </div>
            </div>

            <!-- Purchase History -->
            <div class="detail-section" style="flex:1; padding-bottom: var(--space-5);">
              <div class="detail-section__title">Historial de Compras (últimas 10)</div>
              <table class="history-table">
                <thead>
                  <tr>
                    <th>Fecha</th>
                    <th>Folio</th>
                    <th>Total</th>
                    <th>Estado</th>
                  </tr>
                </thead>
                <tbody id="historyBody">
                  <!-- rendered by JS -->
                </tbody>
              </table>
            </div>

          </div><!-- /detailContent -->
        </div><!-- /panel-detail -->

      </div><!-- /content-split -->

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


  <!-- ====================================================================
       JAVASCRIPT
       ==================================================================== -->
  <script>
    /* ------------------------------------------------------------------
       THEME SWITCHER
       ------------------------------------------------------------------ */
    function setTheme(theme) {
      document.documentElement.setAttribute('data-theme', theme);
      document.getElementById('btn-industrial').classList.toggle('active', theme === 'industrial');
      document.getElementById('btn-modern').classList.toggle('active', theme === 'modern');
    }

    /* ------------------------------------------------------------------
       SLIDE PANEL
       ------------------------------------------------------------------ */
    const panelOverlay = document.getElementById('panelOverlay');
    const slidePanel   = document.getElementById('slidePanel');

    function openSlidePanel() {
      if (panelOverlay && slidePanel) {
        panelOverlay.classList.add('open');
        slidePanel.classList.add('open');
        document.body.style.overflow = 'hidden';
      }
    }

    function closeSlidePanel() {
      if (panelOverlay && slidePanel) {
        panelOverlay.classList.remove('open');
        slidePanel.classList.remove('open');
        document.body.style.overflow = '';
      }
    }

    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        closeSlidePanel();
        if (typeof Customers !== 'undefined') Customers.closeModal();
      }
    });

    /* Placeholder — overridden by customers.js init */
    function openNewCustomerModal() {}
    function filterCustomers() {}
    function closeDetail() {
      if (typeof Customers !== 'undefined') Customers.closeDetail();
    }
    function viewCustomer(id) {
      if (typeof Customers !== 'undefined') Customers.showDetail(id);
      openSlidePanel();
    }
  </script>


  <!-- Offline Banner -->
  <div id="offlineBanner" class="banner banner--warning" style="display:none;position:fixed;top:0;left:0;right:0;z-index:9999;border-radius:0;animation:none;">
    <span class="banner__icon"></span>
    <span class="banner__text" id="offlineBannerText"><strong>Modo offline</strong> — Funciones limitadas. Solo consultas en cache disponibles.</span>
    <button class="banner__dismiss" onclick="document.getElementById('offlineBanner').style.display='none'" aria-label="Cerrar">&times;</button>
  </div>

  <!-- Slide Panel Overlay -->
  <div class="panel-overlay" id="panelOverlay" onclick="closeSlidePanel()"></div>

  <!-- Slide Panel -->
  <div class="slide-panel" id="slidePanel">
    <div class="panel-header">
      <h3>Detalle de Cliente</h3>
      <button class="btn-close" onclick="closeSlidePanel()" title="Cerrar">&times;</button>
    </div>
    <div class="panel-body">
      <div class="client-avatar-row">
        <div class="client-avatar" id="panelAvatar">--</div>
        <div class="client-info-main">
          <div class="client-name" id="panelName">--</div>
          <div class="client-rfc" id="panelRfc">RFC: --</div>
        </div>
      </div>
      <div class="panel-section">
        <div class="panel-section-title">Credito</div>
        <div class="credit-grid">
          <div class="credit-item">
            <div class="credit-label">Limite</div>
            <div class="credit-value" id="panelCreditLimit">--</div>
          </div>
          <div class="credit-item">
            <div class="credit-label">Utilizado</div>
            <div class="credit-value warning" id="panelCreditUsed">--</div>
          </div>
          <div class="credit-item">
            <div class="credit-label">Disponible</div>
            <div class="credit-value success" id="panelCreditAvail">--</div>
          </div>
        </div>
        <div class="credit-bar-track">
          <div class="credit-bar-fill" id="panelCreditBar" style="width:0%;"></div>
        </div>
      </div>
      <div class="panel-section">
        <div class="panel-section-title">Vehiculos Registrados</div>
        <div id="panelVehicles" style="color:var(--color-text-muted);font-size:var(--text-body-sm);">Sin vehiculos registrados</div>
      </div>
      <div class="panel-section">
        <div class="panel-section-title">Compras Recientes</div>
        <div id="panelPurchases" style="color:var(--color-text-muted);font-size:var(--text-body-sm);">Sin compras recientes</div>
      </div>
    </div>
    <div class="panel-footer">
      <button class="btn-edit" onclick="if(typeof Customers!=='undefined') Customers.editCurrent();">Editar Cliente</button>
      <button class="btn-sale" onclick="window.location.href='/pos/sale';">Nueva Venta</button>
    </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/virtual-scroll.js" defer></script>
  <script src="/pos/static/js/customers.js?v=33" defer></script>
  <script src="/pos/static/js/offline-banner.js" 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>
