<!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>Contabilidad — 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/accounting.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 is-active" 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" 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">CM</div>
        <div class="sidebar__user-info">
          <div class="sidebar__user-name">Carlos M.</div>
          <div class="sidebar__user-role">Contador</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">Finanzas</span>
          <h1 class="page-header__title">Contabilidad</h1>
        </div>
        <div class="page-header__actions">
          <select class="select-filter">
            <option>Marzo 2026</option>
            <option>Febrero 2026</option>
            <option>Enero 2026</option>
            <option>Diciembre 2025</option>
          </select>
          <button class="btn btn--secondary" onclick="window.exportarContabilidad()">
            <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Exportar
          </button>
          <button class="btn btn--primary" onclick="window.showNewEntryModal()">
            <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>
            Nueva Póliza
          </button>
        </div>
      </header>

      <!-- Summary Strip -->
      <div class="summary-strip">
        <div class="summary-card">
          <div class="summary-card__icon summary-card__icon--success">
            <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 class="summary-card__body">
            <div class="summary-card__label">Ingresos Mes</div>
            <div class="summary-card__value" id="acc-assets">$0</div>
            <div class="summary-card__delta summary-card__delta--up">Activo total</div>
          </div>
        </div>
        <div class="summary-card">
          <div class="summary-card__icon summary-card__icon--error">
            <svg viewBox="0 0 24 24"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
          </div>
          <div class="summary-card__body">
            <div class="summary-card__label">Egresos Mes</div>
            <div class="summary-card__value" id="acc-liabilities">$0</div>
            <div class="summary-card__delta summary-card__delta--down">Pasivo total</div>
          </div>
        </div>
        <div class="summary-card">
          <div class="summary-card__icon">
            <svg viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
          </div>
          <div class="summary-card__body">
            <div class="summary-card__label">Cuentas por Cobrar</div>
            <div class="summary-card__value" id="acc-equity">$0</div>
            <div class="summary-card__sub">23 facturas pendientes</div>
          </div>
        </div>
        <div class="summary-card">
          <div class="summary-card__icon summary-card__icon--warning">
            <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
          </div>
          <div class="summary-card__body">
            <div class="summary-card__label">Cuentas por Pagar</div>
            <div class="summary-card__value" id="acc-revenue">$0</div>
            <div class="summary-card__sub">18 facturas · 3 vencidas</div>
          </div>
        </div>
      </div>

      <!-- Tabs -->
      <div class="tabs-row" role="tablist">
        <button class="tab-btn is-active" role="tab" aria-selected="true" onclick="switchTab('cxc')">
          Ctas. por Cobrar <span class="tab-btn__badge" id="badge-cxc">0</span>
        </button>
        <button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('cxp')">
          Ctas. por Pagar <span class="tab-btn__badge--alert tab-btn__badge" id="badge-cxp">0</span>
        </button>
        <button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('balance')">
          Balance General
        </button>
        <button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('resultados')">
          Estado de Resultados
        </button>
        <button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('flujo')">
          Flujo de Efectivo
        </button>
        <button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('conciliacion')">
          Conciliación Bancaria
        </button>
        <button class="tab-btn" role="tab" aria-selected="false" onclick="switchTab('cierre')">
          Cierre de Mes
        </button>
      </div>

      <!-- Tab Panels -->
      <div class="tab-panels" id="tab-panels">

        <!-- ===============================================================
             TAB 1: CUENTAS POR COBRAR
             =============================================================== -->
        <div class="tab-panel is-active" id="panel-cxc">
          <div class="toolbar">
            <div class="search-box">
              <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              <input type="text" placeholder="Buscar cliente o factura..." />
            </div>
            <select id="cxc-status-filter" class="select-filter" onchange="Accounting.loadAging()">
              <option value="all">Todos los estados</option>
              <option value="pending">Vigente</option>
              <option value="overdue">Vencida</option>
              <option value="partial">Parcial</option>
              <option value="ok">Pagada</option>
            </select>
            <select class="select-filter" title="Filtro de sucursal (próximamente)">
              <option>Todas las sucursales</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button class="btn btn--ghost btn--sm" onclick="window.exportarCuentasPorCobrar()">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Exportar
            </button>
          </div>

          <div class="table-wrapper">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Factura</th>
                  <th>Cliente</th>
                  <th>Emisión</th>
                  <th>Vencimiento</th>
                  <th>Total</th>
                  <th>Pagado</th>
                  <th>Saldo</th>
                  <th>Estado</th>
                  <th>Acciones</th>
                </tr>
              </thead>
              <tbody>
                <!-- Populated by JS -->
              </tbody>
            </table>
            <div class="pagination">
              <span></span>
              <div class="pagination__pages"></div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             TAB 2: CUENTAS POR PAGAR
             =============================================================== -->
        <div class="tab-panel" id="panel-cxp">
          <div class="toolbar">
            <div class="search-box">
              <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              <input type="text" placeholder="Buscar proveedor o factura..." />
            </div>
            <select id="cxp-status-filter" class="select-filter" onchange="Accounting.loadAccountsPayable()">
              <option value="all">Todos los estados</option>
              <option value="pending">Vigente</option>
              <option value="overdue">Vencida</option>
              <option value="partial">Parcial</option>
              <option value="ok">Pagada</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button id="cxp-register-payment" class="btn btn--primary btn--sm" onclick="Accounting.registerPayablePayment()">
              <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>
              Registrar Pago
            </button>
          </div>

          <div class="table-wrapper">
            <table class="data-table">
              <thead>
                <tr>
                  <th>Factura Prov.</th>
                  <th>Proveedor</th>
                  <th>Recepción</th>
                  <th>Vencimiento</th>
                  <th>Total</th>
                  <th>Pagado</th>
                  <th>Saldo</th>
                  <th>Estado</th>
                  <th>Acciones</th>
                </tr>
              </thead>
              <tbody>
                <!-- Populated by JS -->
              </tbody>
            </table>
            <div class="pagination">
              <span></span>
              <div class="pagination__pages"></div>
            </div>
          </div>
        </div>

        <!-- ===============================================================
             TAB 3: BALANCE GENERAL
             =============================================================== -->
        <div class="tab-panel" id="panel-balance">
          <div class="toolbar">
            <select class="select-filter">
              <option>Al 31/03/2026</option>
              <option>Al 28/02/2026</option>
              <option>Al 31/01/2026</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button class="btn btn--ghost btn--sm">
              <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>
              Imprimir
            </button>
            <button class="btn btn--secondary btn--sm">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Exportar PDF
            </button>
          </div>

          <div class="finance-grid" style="grid-template-columns: 1fr 1fr;" id="balanceContent">
            <!-- Populated by JS -->
          </div>
        </div>

        <!-- ===============================================================
             TAB 4: ESTADO DE RESULTADOS
             =============================================================== -->
        <div class="tab-panel" id="panel-resultados">
          <div class="toolbar">
            <select class="select-filter">
              <option>Marzo 2026</option>
              <option>Febrero 2026</option>
              <option>Enero 2026</option>
            </select>
            <select class="select-filter">
              <option>Mensual</option>
              <option>Acumulado</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button class="btn btn--secondary btn--sm">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Exportar
            </button>
          </div>

          <div class="finance-grid" style="grid-template-columns: 1fr;" id="resultadosContent">
            <!-- Populated by JS -->
          </div>
        </div>

        <!-- ===============================================================
             TAB 5: FLUJO DE EFECTIVO
             =============================================================== -->
        <div class="tab-panel" id="panel-flujo">
          <div class="toolbar">
            <select class="select-filter">
              <option>Marzo 2026</option>
              <option>Febrero 2026</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button class="btn btn--secondary btn--sm">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
              Exportar
            </button>
          </div>

          <div class="finance-grid" style="grid-template-columns: 1fr;" id="flujoContent">
            <!-- Populated by JS -->
          </div>
        </div>

        <!-- ===============================================================
             TAB 6: CONCILIACIÓN BANCARIA
             =============================================================== -->
        <div class="tab-panel" id="panel-conciliacion">
          <div class="toolbar">
            <select class="select-filter">
              <option>BBVA — *4521</option>
              <option>Banorte — *8903</option>
              <option>Santander — *2156</option>
            </select>
            <select class="select-filter">
              <option>Marzo 2026</option>
              <option>Febrero 2026</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button class="btn btn--secondary btn--sm">
              <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
              Importar Estado de Cuenta
            </button>
            <button class="btn btn--primary btn--sm">Conciliar Automático</button>
          </div>

          <div id="conciliacionContent">
            <!-- Populated by JS -->
          </div>
        </div>

        <!-- ===============================================================
             TAB 7: CIERRE DE MES
             =============================================================== -->
        <div class="tab-panel" id="panel-cierre">
          <div class="toolbar">
            <select id="cierre-period-filter" class="select-filter" title="Período a cerrar (próximamente)">
              <option>Seleccionar período</option>
            </select>
            <div class="toolbar__spacer"></div>
            <button id="cierre-run-btn" class="btn btn--primary" onclick="Accounting.runPeriodClose()">
              <svg viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              Ejecutar Cierre
            </button>
          </div>

          <div id="cierreContent">
            <!-- Populated by JS -->
          </div>
        </div>

      </div><!-- /tab-panels -->
    </main>
  </div><!-- /app-shell -->

  <!-- Nueva Poliza Modal -->
  <div id="newEntryModalOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9999;align-items:center;justify-content:center;">
    <div style="background:var(--color-surface-1);border-radius:var(--radius-lg);width:min(640px,90vw);max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg);">
      <div style="padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;">
        <div style="font-family:var(--font-heading);font-size:var(--text-h4);font-weight:var(--heading-weight-primary);">Nueva Poliza</div>
        <button class="btn btn--ghost btn--sm" onclick="window.closeNewEntryModal()">&times;</button>
      </div>
      <div style="padding:var(--space-6);">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-bottom:var(--space-4);">
          <div>
            <label style="display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Fecha</label>
            <input type="date" id="entryDate" style="width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
          </div>
          <div>
            <label style="display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Tipo</label>
            <select id="entryType" style="width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);">
              <option value="ingreso">Ingreso</option>
              <option value="egreso">Egreso</option>
              <option value="diario">Diario</option>
            </select>
          </div>
        </div>
        <div style="margin-bottom:var(--space-4);">
          <label style="display:block;font-size:var(--text-caption);color:var(--color-text-muted);margin-bottom:var(--space-1);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Descripcion</label>
          <input type="text" id="entryDescription" placeholder="Concepto de la poliza" style="width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
        </div>
        <div style="margin-bottom:var(--space-3);">
          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-2);">
            <label style="font-size:var(--text-caption);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-widest);">Partidas</label>
            <button class="btn btn--ghost btn--sm" onclick="window.addEntryLine()">+ Agregar linea</button>
          </div>
          <div id="entryLines">
            <div class="entry-line" style="display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:var(--space-2);margin-bottom:var(--space-2);align-items:center;">
              <select class="entry-account" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);"><option value="">Cargando cuentas...</option></select>
              <input type="number" placeholder="Debe" class="entry-debit" step="0.01" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
              <input type="number" placeholder="Haber" class="entry-credit" step="0.01" style="padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);color:var(--color-text-primary);font-size:var(--text-body-sm);" />
              <button class="btn btn--ghost btn--sm" onclick="this.closest('.entry-line').remove()">&times;</button>
            </div>
          </div>
        </div>
        <div id="entryResult" style="margin-bottom:var(--space-3);"></div>
      </div>
      <div style="padding:var(--space-4) var(--space-6);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-3);">
        <button class="btn btn--ghost" onclick="window.closeNewEntryModal()">Cancelar</button>
        <button class="btn btn--primary" onclick="window.submitNewEntry()">Guardar Poliza</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/accounting.v9.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>

  <script>
    // Load accounting stats for tab badges
    async function loadAccountingStats() {
      const token = localStorage.getItem('pos_token') || '';
      try {
        const res = await fetch('/pos/api/accounting/stats', {
          headers: token ? { 'Authorization': 'Bearer ' + token } : {}
        });
        if (!res.ok) return;
        const data = await res.json();
        const map = {
          'badge-cxc': data.cuentas_cobrar,
          'badge-cxp': data.cuentas_pagar
        };
        Object.entries(map).forEach(function([id, val]) {
          const el = document.getElementById(id);
          if (el) el.textContent = val || 0;
        });
      } catch (e) {
        console.error('Failed to load accounting stats:', e);
      }
    }
    window.loadAccountingStats = loadAccountingStats;
    loadAccountingStats();
  </script>
</body>
</html>
