VERTICAL: REPORTE DE VENTAS
    ══════════════════════════════════════════════════════════ -->
    <div class="view" id="view-ventas">
      <!-- Carga CSV de ventas -->
      <div class="card" id="ventas-upload-card" style="max-width:520px;margin:0 auto;">
        <div class="card-header"><span class="card-title">📊 Reporte de ventas</span></div>
        <div class="card-body">
          <div style="background:var(--gris-bg);border:2px dashed var(--gris-borde);border-radius:12px;padding:32px;text-align:center;cursor:pointer;" onclick="document.getElementById('ventas-csv-input').click()">
            <div style="font-size:36px;margin-bottom:8px;">📂</div>
            <div style="font-weight:700;font-size:15px;margin-bottom:4px;">Cargar reporte VTEX (CSV)</div>
            <div style="font-size:12px;color:var(--gris-texto);">Descarga el reporte de "All Orders" desde VTEX · Incluye todos los estados</div>
          </div>
          <input type="file" id="ventas-csv-input" accept=".csv" style="display:none;" onchange="cargarVentasCSV(event)">
        </div>
      </div>

      <!-- Dashboard de ventas (visible tras cargar CSV) -->
      <div id="ventas-dashboard" style="display:none;">

        <!-- Header fijo con período y controles -->
        <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;">
          <div>
            <div style="font-size:10px;color:var(--gris-texto);text-transform:uppercase;letter-spacing:.5px;">Período</div>
            <div style="font-size:14px;font-weight:700;" id="ventas-periodo">—</div>
          </div>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
            <select class="form-input" id="ventas-filtro-mes" onchange="ventasFiltroMesCambio()" style="width:auto;padding:5px 8px;font-size:12px;">
              <option value="todos">Todos los meses</option>
            </select>
            <select class="form-input" id="ventas-filtro-dia" onchange="renderVentas()" style="width:auto;padding:5px 8px;font-size:12px;">
              <option value="todos">Todos los días</option>
            </select>
            <select class="form-input" id="ventas-filtro-canal" onchange="renderVentas()" style="width:auto;padding:5px 8px;font-size:12px;">
              <option value="todos">Todos los canales</option>
              <option value="delivery">Solo Delivery</option>
              <option value="tienda">Solo Tiendas</option>
            </select>
            <button class="btn btn-outline btn-sm" onclick="document.getElementById('ventas-csv-input').click()" style="font-size:11px;">↻ Cambiar</button>
          </div>
        </div>

        <!-- Tabs del reporte -->
        <div class="tabs" style="margin-bottom:0;flex-wrap:wrap;">
          <div class="tab active" id="vtab-resumen" onclick="ventasSetTab('resumen')">📈 Resumen</div>
          <div class="tab" id="vtab-dia" onclick="ventasSetTab('dia')">📅 Día a día</div>
          <div class="tab" id="vtab-delivery" onclick="ventasSetTab('delivery')">🚚 Delivery</div>
          <div class="tab" id="vtab-tiendas" onclick="ventasSetTab('tiendas')">🏪 Tiendas</div>
          <div class="tab" id="vtab-unica" onclick="ventasSetTab('unica')">🔴 UNICA</div>
          <div class="tab" id="vtab-mundos" onclick="ventasSetTab('mundos')">🌐 Mundos</div>
          <div class="tab" id="vtab-detalle" onclick="ventasSetTab('detalle')">🔍 Detalle</div>
        </div>

        <!-- TAB: RESUMEN -->
        <div id="vtab-content-resumen" class="ventas-tab-panel">

          <!-- KPIs fila 1: venta, pedidos, ticket, clientes, avance -->
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
            <div class="stat-card" style="border-left:4px solid var(--rojo);">
              <div class="stat-label">Venta total</div>
              <div style="font-size:20px;font-weight:800;" id="kpi-venta-total">S/ 0</div>
            </div>
            <div class="stat-card" style="border-left:4px solid var(--azul);">
              <div class="stat-label">Pedidos</div>
              <div class="stat-num azul" id="kpi-pedidos" style="font-size:22px;">0</div>
            </div>
            <div class="stat-card" style="border-left:4px solid var(--verde);">
              <div class="stat-label">Ticket promedio</div>
              <div class="stat-num verde" id="kpi-ticket">S/ 0</div>
            </div>
            <div class="stat-card" style="border-left:4px solid #8B5CF6;">
              <div class="stat-label">Clientes totales</div>
              <div style="font-size:22px;font-weight:800;color:#8B5CF6;" id="kpi-clientes-total">0</div>
            </div>
          </div>
          <div class="stat-card" style="margin-bottom:12px;">
            <div class="stat-label">% Avance del mes</div>
            <div style="font-size:13px;font-weight:800;color:var(--rojo);line-height:1.4;word-break:break-word;" id="kpi-avance-mes">—</div>
          </div>

          <!-- Canal: Delivery vs Tienda como 2 cards visuales -->
          <div class="card" style="margin-bottom:12px;">
            <div class="card-header"><span class="card-title">Canal de venta</span></div>
            <div class="card-body" style="padding:12px 16px;">
              <div id="resumen-canal-body"></div>
            </div>
          </div>

          <!-- Tipo de cliente -->
          <div class="card" style="margin-bottom:12px;border-left:4px solid var(--rojo);">
            <div class="card-header"><span class="card-title">👤 Tipo de cliente</span></div>
            <div class="card-body">
              <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
                <div style="background:var(--rojo-light);border-radius:8px;padding:12px;">
                  <div style="font-size:10px;color:var(--rojo);font-weight:700;text-transform:uppercase;">UNICA / Santander</div>
                  <div style="font-size:22px;font-weight:800;color:var(--rojo);" id="kpi-unica">0</div>
                  <div style="font-size:11px;color:var(--gris-texto);" id="kpi-unica-det">0 pedidos · S/0 ticket</div>
                </div>
                <div style="background:var(--gris-bg);border-radius:8px;padding:12px;">
                  <div style="font-size:10px;color:var(--gris-texto);font-weight:700;text-transform:uppercase;">Habitual</div>
                  <div style="font-size:22px;font-weight:800;" id="kpi-habitual">0</div>
                  <div style="font-size:11px;color:var(--gris-texto);" id="kpi-habitual-det">0 pedidos · S/0 ticket</div>
                </div>
              </div>
              <div id="ventas-unica-body"></div>
            </div>
          </div>

          <!-- Mundos: solo la participación por Mundo (nivel raíz) -->
          <div class="card" style="margin-bottom:12px;">
            <div class="card-header"><span class="card-title">🌐 Participación por Mundo</span></div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:7px 8px;text-align:left;">Mundo</th>
                    <th style="padding:7px 8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                    <th style="padding:7px 8px;text-align:right;white-space:nowrap;">%</th>
                    <th style="padding:7px 8px;text-align:right;white-space:nowrap;">Pedidos</th>
                  </tr>
                </thead>
                <tbody id="resumen-mundos-body"></tbody>
              </table>
            </div>
          </div>

          <!-- Método de pago -->
          <div class="card">
            <div class="card-header"><span class="card-title">Por método de pago</span></div>
            <div class="card-body" id="ventas-por-pago-body"></div>
          </div>

          <!-- IDs ocultos que el JS necesita para compatibilidad -->
          <div style="display:none;">
            <div id="ventas-por-canal-body"></div>
            <div id="ventas-top-skus-body"></div>
            <div id="kpi-delivery-venta"></div>
            <div id="kpi-delivery-det"></div>
            <div id="kpi-tienda-venta"></div>
            <div id="kpi-tienda-det"></div>
          </div>
        </div>

        <!-- TAB: DIA A DIA -->
        <div id="vtab-content-dia" class="ventas-tab-panel" style="display:none;">
          <div class="card">
            <div class="card-header" style="flex-wrap:wrap;gap:8px;">
              <span class="card-title">Avance día a día</span>
              <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <select class="form-input" id="ventas-dia-filtro-mes" onchange="renderVentasDia()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todos">Todos los meses</option>
                </select>
                <div style="font-size:11px;color:var(--gris-texto);" id="ventas-resumen-linea"></div>
              </div>
            </div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;white-space:nowrap;">Día</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Pedidos</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Ticket prom.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Clientes</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">V. UNICA</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Cli. UNICA</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Ped. UNICA</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">V. Habitual</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Cli. Hab.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Ped. Hab.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Acumulado</th>
                  </tr>
                </thead>
                <tbody id="ventas-dia-tabla-body"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: DELIVERY -->
        <div id="vtab-content-delivery" class="ventas-tab-panel" style="display:none;">
          <!-- KPIs globales -->
          <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;">
            <div class="stat-card" style="border-left:4px solid var(--verde);">
              <div class="stat-label">Venta Delivery</div>
              <div style="font-size:18px;font-weight:800;" id="del-venta">S/ 0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Pedidos</div>
              <div class="stat-num azul" id="del-pedidos">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Ticket promedio</div>
              <div class="stat-num verde" id="del-ticket">S/ 0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Clientes únicos</div>
              <div class="stat-num" id="del-clientes">0</div>
            </div>
          </div>

          <!-- Bullets por almacén -->
          <div class="stats-grid" id="del-almacen-stats" style="margin-bottom:12px;"></div>

          <!-- Top 30 SKUs con filtros -->
          <div class="card" style="margin-bottom:12px;">
            <div class="card-header" style="flex-wrap:wrap;gap:8px;">
              <span class="card-title">Top 30 SKUs más vendidos</span>
              <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <select class="form-input" id="del-sku-filtro-almacen" onchange="renderDeliverySkus()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todos">Todos los almacenes</option>
                  <option value="surco">Surco Cash</option>
                  <option value="trapiche">CD Trapiche</option>
                </select>
                <select class="form-input" id="del-sku-filtro-zona" onchange="renderDeliverySkus()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todas">Todas las zonas</option>
                  <option value="Lima Centro">Lima Centro</option>
                  <option value="Lima Este">Lima Este</option>
                  <option value="Lima Moderna">Lima Moderna</option>
                  <option value="Lima Norte">Lima Norte</option>
                  <option value="Lima Sur">Lima Sur</option>
                </select>
                <input type="text" class="form-input" id="del-sku-filtro-distrito" placeholder="Filtrar distrito..." oninput="renderDeliverySkus()" style="width:150px;padding:5px 8px;font-size:12px;">
              </div>
            </div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:center;">#</th>
                    <th style="padding:8px;text-align:left;">Mundo</th>
                    <th style="padding:8px;text-align:left;">Categoría SKU</th>
                    <th style="padding:8px;text-align:left;">Nombre del producto</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Uds. vendidas</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Precio prom. (S/)</th>
                  </tr>
                </thead>
                <tbody id="del-skus-body"></tbody>
              </table>
            </div>
          </div>

          <!-- Resumen por zona -->
          <div class="card" style="margin-bottom:12px;">
            <div class="card-header"><span class="card-title">Resumen por zona</span></div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;">Zona</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Pedidos</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Ticket prom.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Clientes</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">% del total</th>
                  </tr>
                </thead>
                <tbody id="del-zonas-body"></tbody>
              </table>
            </div>
          </div>

          <!-- Por distrito — con filtro de zona, siempre muestra distritos con cobertura aunque no tengan pedidos -->
          <div class="card">
            <div class="card-header" style="flex-wrap:wrap;gap:8px;">
              <span class="card-title">Por distrito</span>
              <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <select class="form-input" id="del-filtro-zona" onchange="renderDeliveryDistritos()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todas">Todas las zonas</option>
                  <option value="Lima Centro">Lima Centro</option>
                  <option value="Lima Este">Lima Este</option>
                  <option value="Lima Moderna">Lima Moderna</option>
                  <option value="Lima Norte">Lima Norte</option>
                  <option value="Lima Sur">Lima Sur</option>
                  <option value="Playas">Playas</option>
                </select>
                <label style="font-size:12px;display:flex;align-items:center;gap:4px;cursor:pointer;">
                  <input type="checkbox" id="del-mostrar-sin-pedidos" onchange="renderDeliveryDistritos()" checked style="cursor:pointer;">
                  Mostrar distritos sin pedidos
                </label>
              </div>
            </div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;">Distrito</th>
                    <th style="padding:8px;text-align:left;">Zona</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Pedidos</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Ticket prom.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Clientes</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">UNICA (S/)</th>
                  </tr>
                </thead>
                <tbody id="del-distritos-body"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: TIENDAS -->
        <div id="vtab-content-tiendas" class="ventas-tab-panel" style="display:none;">
          <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;">
            <div class="stat-card" style="border-left:4px solid var(--azul);">
              <div class="stat-label">Venta Tiendas</div>
              <div style="font-size:18px;font-weight:800;" id="rt-venta-total">S/ 0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Pedidos</div>
              <div class="stat-num azul" id="rt-pedidos-total">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Ticket promedio</div>
              <div class="stat-num verde" id="rt-ticket-total">S/ 0</div>
            </div>
            <div class="stat-card" style="border-left:4px solid #8B5CF6;">
              <div class="stat-label">Clientes totales</div>
              <div style="font-size:22px;font-weight:800;color:#8B5CF6;" id="rt-clientes-total">0</div>
            </div>
            <div class="stat-card" style="border-left:4px solid var(--rojo);">
              <div class="stat-label">Clientes UNICA</div>
              <div style="font-size:22px;font-weight:800;color:var(--rojo);" id="rt-clientes-unica">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Clientes Habitual</div>
              <div style="font-size:22px;font-weight:800;" id="rt-clientes-hab">0</div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><span class="card-title">Por tienda</span></div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;">Tienda</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Pedidos</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Ticket prom.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">V. UNICA</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">V. Habitual</th>
                  </tr>
                </thead>
                <tbody id="ventas-por-tienda-body"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: UNICA / SANTANDER -->
        <div id="vtab-content-unica" class="ventas-tab-panel" style="display:none;">
          <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;">
            <div class="stat-card" style="border-left:4px solid var(--rojo);grid-column:span 2;">
              <div class="stat-label" style="color:var(--rojo);">🔴 Venta generada con tarjeta UNICA/Santander</div>
              <div style="font-size:22px;font-weight:800;color:var(--rojo);" id="unica-venta">S/ 0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Pedidos UNICA</div>
              <div class="stat-num rojo" id="unica-pedidos">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Clientes UNICA</div>
              <div class="stat-num" id="unica-clientes">0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Ticket promedio UNICA</div>
              <div class="stat-num verde" id="unica-ticket">S/ 0</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">% de la venta total</div>
              <div style="font-size:20px;font-weight:800;" id="unica-pct">0%</div>
            </div>
          </div>

          <!-- UNICA por canal -->
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;">
            <div class="card" style="border-left:4px solid var(--verde);">
              <div class="card-body">
                <div class="stat-label">UNICA en Delivery</div>
                <div style="font-size:16px;font-weight:800;" id="unica-del-venta">S/ 0</div>
                <div style="font-size:11px;color:var(--gris-texto);" id="unica-del-det">0 ped · S/0 ticket</div>
              </div>
            </div>
            <div class="card" style="border-left:4px solid var(--azul);">
              <div class="card-body">
                <div class="stat-label">UNICA en Tiendas</div>
                <div style="font-size:16px;font-weight:800;" id="unica-rt-venta">S/ 0</div>
                <div style="font-size:11px;color:var(--gris-texto);" id="unica-rt-det">0 ped · S/0 ticket</div>
              </div>
            </div>
          </div>

          <!-- Top 30 SKUs UNICA en tabla scrolleable -->
          <div class="card">
            <div class="card-header"><span class="card-title">Top 30 SKUs más vendidos por clientes UNICA</span></div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;">#</th>
                    <th style="padding:8px;text-align:left;">SKU</th>
                    <th style="padding:8px;text-align:left;">Nombre</th>
                    <th style="padding:8px;text-align:left;">Categoría</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Uds.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                  </tr>
                </thead>
                <tbody id="unica-top-skus-body"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: MUNDOS / CATEGORÍAS -->
        <div id="vtab-content-mundos" class="ventas-tab-panel" style="display:none;">
          <!-- Banner: sincronización árbol VTEX desde Sheet -->
          <div id="mundos-arbol-banner" style="background:#FFF3CD;border:1px solid #FFC107;border-radius:8px;padding:12px 16px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
            <div style="font-size:12px;">
              <strong>🌐 Árbol de categorías no cargado</strong><br>
              <span style="color:#666;">Los mundos se leen automáticamente desde la pestaña <em>categorias_vtex</em> del Sheet.</span>
            </div>
            <div>
              <button class="btn btn-outline btn-sm" onclick="sincronizarArbolVTEX()">🔄 Sincronizar desde Sheet</button>
            </div>
          </div>

          <!-- Tabla de participación por Mundo -->
          <div class="card" style="margin-bottom:12px;">
            <div class="card-header">
              <span class="card-title">🌐 Participación por Mundo — en base a soles</span>
            </div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;">Mundo</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">% del total</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">V. UNICA</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">V. Regular</th>
                  </tr>
                </thead>
                <tbody id="mundos-participacion-body"></tbody>
              </table>
            </div>
          </div>

          <!-- Top 15 por categoría -->
          <div class="card">
            <div class="card-header" style="flex-wrap:wrap;gap:8px;">
              <span class="card-title">Top 15 SKUs</span>
              <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                <select class="form-input" id="mundos-filtro-cat" onchange="renderMundosCat()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="">Selecciona un mundo</option>
                </select>
                <select class="form-input" id="mundos-filtro-tipo" onchange="renderMundosCat()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todos">UNICA + Regular</option>
                  <option value="unica">Solo UNICA</option>
                  <option value="regular">Solo Regular</option>
                </select>
              </div>
            </div>
            <div style="overflow-x:auto;">
              <table style="width:100%;border-collapse:collapse;font-size:12px;">
                <thead>
                  <tr style="background:var(--gris-bg);border-bottom:2px solid var(--gris-borde);">
                    <th style="padding:8px;text-align:left;">#</th>
                    <th style="padding:8px;text-align:left;">SKU</th>
                    <th style="padding:8px;text-align:left;min-width:180px;">Nombre</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Uds.</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">Venta (S/)</th>
                    <th style="padding:8px;text-align:right;white-space:nowrap;">PVP prom.</th>
                  </tr>
                </thead>
                <tbody id="mundos-top-skus-body"></tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: DETALLE -->
        <div id="vtab-content-detalle" class="ventas-tab-panel" style="display:none;">
          <div class="card">
            <div class="card-header" style="flex-wrap:wrap;gap:8px;">
              <span class="card-title">Detalle de pedidos</span>
              <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:center;">
                <input type="text" class="form-input" id="ventas-buscar" placeholder="Buscar pedido, cliente, BIN..." oninput="renderVentasTabla()" style="width:160px;">
                <select class="form-input" id="det-filtro-pago" onchange="renderVentasTabla()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todos">Todos los pagos</option>
                </select>
                <select class="form-input" id="det-filtro-tipo" onchange="renderVentasTabla()" style="width:auto;padding:5px 8px;font-size:12px;">
                  <option value="todos">UNICA + Habitual</option>
                  <option value="unica">Solo UNICA</option>
                  <option value="habitual">Solo Habitual</option>
                </select>
                <button class="btn btn-outline btn-sm" onclick="exportarVentas()">⬇️ Exportar</button>
              </div>
            </div>
            <div class="table-wrap">
              <table>
                <thead>
                  <tr>
                    <th>Pedido</th><th>Fecha</th><th>Cliente</th><th>Canal</th><th>Tienda/SLA</th><th>UNICA</th><th>BIN</th><th>Últimos 4</th><th>Autorización</th><th>Total</th><th>Envío</th><th>Impuestos</th><th>Pago</th><th>Estado</th>
                  </tr>
                </thead>
                <tbody id="ventas-tabla-body"></tbody>
              </table>
            </div>
          </div>
        </div>

      </div>
    </div>