@extends('padre.padre')
@section('contenido')
    <!-- SweetAlert2 & FontAwesome -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            --accent-blue: #3b82f6;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
            --border-radius: 12px;
        }

        .sync-header {
            background: var(--primary-gradient);
            padding: 1.25rem 2rem;
            color: white;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2);
            margin-bottom: 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .sync-header h1 {
            font-weight: 800;
            font-size: 1.45rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .kpi-card {
            background: white;
            border-radius: var(--border-radius);
            padding: 1.15rem 1.25rem;
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.2s;
            height: 100%;
        }

        .kpi-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        .kpi-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .kpi-value {
            font-size: 1.45rem;
            font-weight: 800;
            margin: 0;
            line-height: 1.1;
        }

        .kpi-label {
            font-size: 0.76rem;
            color: #64748b;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0 0 4px 0;
        }

        .glass-card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            border: 1px solid rgba(0, 0, 0, 0.06);
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.25rem;
        }

        .table-custom th {
            background-color: #f8fafc;
            color: #334155;
            font-weight: 700;
            font-size: 0.78rem;
            text-transform: uppercase;
            border-bottom: 2px solid #e2e8f0;
            padding: 10px 12px;
            white-space: nowrap;
        }

        .table-custom td {
            font-size: 0.85rem;
            vertical-align: middle;
            padding: 9px 12px;
        }

        .nav-tabs-sync .nav-link {
            font-weight: 700;
            color: #475569;
            border: none;
            border-bottom: 3px solid transparent;
            padding: 0.75rem 1.25rem;
            transition: all 0.2s;
        }

        .nav-tabs-sync .nav-link.active {
            color: #0f172a;
            border-bottom-color: #3b82f6;
            background: transparent;
        }

        .badge-tipo {
            font-size: 0.75rem;
            padding: 4px 9px;
            border-radius: 6px;
            font-weight: 700;
        }

        .tipo-Factura { background: #dbeafe; color: #1e40af; }
        .tipo-Devolucion { background: #fce7f3; color: #9d174d; }
        .tipo-Compra { background: #fef3c7; color: #92400e; }
        .tipo-Gasto, .tipo-Pagos { background: #ede9fe; color: #5b21b6; }

        .mini-module-pill {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 8px 14px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
    </style>

    <div class="container-fluid py-3">
        <!-- ENCABEZADO -->
        <div class="sync-header">
            <div>
                <h1>
                    <i class="fa-solid fa-wand-magic-sparkles text-info"></i>
                    Auditoría y Sincronización Contable Retroactiva
                </h1>
                <p class="text-white-50 m-0" style="font-size: 0.85rem;">
                    Detecta facturas, devoluciones, compras y gastos no contabilizados o con descuadres y los reconstruye automáticamente sin duplicar lo que ya está cuadrado.
                </p>
            </div>
            <div class="d-flex align-items-center gap-2">
                <a href="{{ url('contabilidad') }}" class="btn btn-outline-light fw-bold btn-sm px-3">
                    <i class="fa-solid fa-arrow-left me-1"></i> Volver al Panel Contable
                </a>
            </div>
        </div>

        <!-- PANEL DE FILTROS -->
        <div class="glass-card">
            <form id="formAuditoria" onsubmit="ejecutarDiagnostico(event)">
                <div class="row g-3 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label fw-bold small text-secondary mb-1">FECHA INICIAL</label>
                        <input type="date" id="filtroFi" class="form-control fw-bold" value="{{ $fi }}" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small text-secondary mb-1">FECHA FINAL</label>
                        <input type="date" id="filtroFf" class="form-control fw-bold" value="{{ $ff }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold small text-secondary mb-1">BODEGA / SUCURSAL</label>
                        <select id="filtroBodega" class="form-select fw-bold">
                            <option value="0">-- Todas las Bodegas --</option>
                            @foreach($bodegas as $b)
                                <option value="{{ $b->id }}">{{ $b->id }} - {{ $b->nombreBodega }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold small text-secondary mb-1">TIPO DOCUMENTO</label>
                        <select id="filtroTipo" class="form-select fw-bold">
                            <option value="TODOS">Todos los Documentos</option>
                            <option value="Factura">Facturas de Venta</option>
                            <option value="Devolucion">Devoluciones Venta</option>
                            <option value="Compra">Compras Proveedor</option>
                            <option value="Gasto">Gastos y Pagos</option>
                        </select>
                    </div>
                    <div class="col-md-1">
                        <div class="form-check form-switch mb-2">
                            <input class="form-check-input" type="checkbox" id="filtroIncluirPos" checked>
                            <label class="form-check-label small fw-bold" for="filtroIncluirPos">Incluir POS</label>
                        </div>
                    </div>
                    <div class="col-md-2 text-end">
                        <button type="submit" id="btnDiagnosticar" class="btn btn-primary fw-bold w-100 py-2">
                            <i class="fa-solid fa-magnifying-glass-chart me-1"></i> Auditar Periodo
                        </button>
                    </div>
                </div>
            </form>

            <!-- AVISO DE REGLAS AUTO-REPARADAS -->
            <div id="alertaReglas" class="alert alert-info mt-3 mb-0 py-2 small d-none">
                <i class="fa-solid fa-screwdriver-wrench me-1"></i>
                <strong>Parametrización verificada:</strong> <span id="textoReglasReparadas"></span>
            </div>
        </div>

        <!-- TARJETAS KPI -->
        <div class="row g-3 mb-3">
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-primary bg-opacity-10 text-primary">
                        <i class="fa-solid fa-file-invoice"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Total Docs. Operativos</p>
                        <h3 class="kpi-value text-dark" id="kpiTotalOperativos">0</h3>
                        <small class="text-muted" style="font-size:0.73rem;">En tablas de operación</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-success bg-opacity-10 text-success">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Contabilizados OK</p>
                        <h3 class="kpi-value text-success" id="kpiContabilizadosOk">0</h3>
                        <small class="text-muted" style="font-size:0.73rem;">Cuadrados (No se duplican)</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-danger bg-opacity-10 text-danger">
                        <i class="fa-solid fa-file-circle-xmark"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Sin Contabilizar</p>
                        <h3 class="kpi-value text-danger" id="kpiSinContabilizar">0</h3>
                        <small class="text-muted" style="font-size:0.73rem;">Faltantes en contabilidad</small>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="kpi-card">
                    <div class="kpi-icon bg-warning bg-opacity-10 text-warning">
                        <i class="fa-solid fa-scale-unbalanced"></i>
                    </div>
                    <div>
                        <p class="kpi-label">Mal Contabilizados</p>
                        <h3 class="kpi-value text-warning" id="kpiMalContabilizados">0</h3>
                        <small class="text-muted" style="font-size:0.73rem;">Descuadrados o duplicados</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- RESUMEN POR MÓDULO -->
        <div class="row g-2 mb-3" id="filaResumenModulos">
            <div class="col-md-3">
                <div class="mini-module-pill">
                    <span class="fw-bold text-primary"><i class="fa-solid fa-receipt me-1"></i> Facturas</span>
                    <span id="resModFactura" class="text-muted">0 OK | 0 Faltan | 0 Desc.</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mini-module-pill">
                    <span class="fw-bold text-danger"><i class="fa-solid fa-rotate-left me-1"></i> Devoluciones</span>
                    <span id="resModDevolucion" class="text-muted">0 OK | 0 Faltan | 0 Desc.</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mini-module-pill">
                    <span class="fw-bold text-warning"><i class="fa-solid fa-truck-ramp-box me-1"></i> Compras</span>
                    <span id="resModCompra" class="text-muted">0 OK | 0 Faltan | 0 Desc.</span>
                </div>
            </div>
            <div class="col-md-3">
                <div class="mini-module-pill">
                    <span class="fw-bold text-secondary"><i class="fa-solid fa-money-bill-transfer me-1"></i> Gastos / Pagos</span>
                    <span id="resModGasto" class="text-muted">0 OK | 0 Faltan | 0 Desc.</span>
                </div>
            </div>
        </div>

        <!-- BARRA DE PROGRESO PARA PROCESAMIENTO POR LOTES -->
        <div id="panelProgresoLote" class="glass-card d-none border-primary">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <span class="fw-bold text-primary" id="tituloProgresoLote">
                    <i class="fa-solid fa-gear fa-spin me-2"></i> Procesando documentos contables...
                </span>
                <span class="fw-bold small" id="contadorProgresoLote">0 / 0</span>
            </div>
            <div class="progress" style="height: 12px; border-radius: 8px;">
                <div id="barraProgresoLote" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 0%"></div>
            </div>
        </div>

        <!-- PESTAÑAS DE RESULTADOS -->
        <div class="glass-card">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 border-bottom pb-2 mb-3">
                <ul class="nav nav-tabs nav-tabs-sync border-0" id="tabsSincronizador" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="tab-faltantes-btn" data-bs-toggle="tab" data-bs-target="#tabFaltantes" type="button" role="tab">
                            <i class="fa-solid fa-circle-Exclamation text-danger me-1"></i>
                            1. Documentos Sin Contabilizar
                            <span class="badge bg-danger ms-1" id="badgeCountFaltantes">0</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="tab-descuadrados-btn" data-bs-toggle="tab" data-bs-target="#tabDescuadrados" type="button" role="tab">
                            <i class="fa-solid fa-triangle-exclamation text-warning me-1"></i>
                            2. Mal Contabilizados / Descuadrados
                            <span class="badge bg-warning text-dark ms-1" id="badgeCountDescuadrados">0</span>
                        </button>
                    </li>
                </ul>

                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <div class="input-group input-group-sm" style="width: 155px;">
                        <span class="input-group-text bg-light fw-bold text-secondary">Mostrar</span>
                        <select id="selectPageSize" class="form-select form-select-sm fw-bold" onchange="cambiarTamanoPagina(this.value)">
                            <option value="25">25 filas</option>
                            <option value="50" selected>50 filas</option>
                            <option value="100">100 filas</option>
                            <option value="250">250 filas</option>
                            <option value="500">500 filas</option>
                        </select>
                    </div>
                    <input type="text" id="buscadorTabla" class="form-control form-control-sm" placeholder="Buscar N° doc, NIT, bodega..." style="width: 230px;" oninput="filtrarTablasLocal()">
                    <button type="button" class="btn btn-success btn-sm fw-bold px-3" onclick="sincronizarTodoIntegral()">
                        <i class="fa-solid fa-bolt me-1"></i> Contabilizar y Corregir Todo
                    </button>
                </div>
            </div>

            <div class="tab-content">
                <!-- TAB 1: DOCUMENTOS SIN CONTABILIZAR -->
                <div class="tab-pane fade show active" id="tabFaltantes" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                        <span class="text-muted small">
                            Estos documentos existen en operación (Facturas, Devoluciones, Compras o Gastos) pero tienen <strong>0 registros</strong> en la tabla <code>contabilidad</code>.
                        </span>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" onclick="seleccionarTodosGlobal('faltantes', true)">
                                <i class="fa-solid fa-check-double me-1"></i> Marcar Todos
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" onclick="seleccionarTodosGlobal('faltantes', false)">
                                <i class="fa-regular fa-square me-1"></i> Desmarcar
                            </button>
                            <button type="button" class="btn btn-danger btn-sm fw-bold" id="btnProcesarSeleccionadosFaltantes" onclick="procesarSeleccionados('faltantes')">
                                <i class="fa-solid fa-play me-1"></i> Contabilizar Seleccionados (<span id="countSelFaltantes">0</span>)
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover table-custom align-middle mb-0">
                            <thead class="sticky-top">
                                <tr>
                                    <th style="width: 36px;">
                                        <input type="checkbox" class="form-check-input" id="checkAllFaltantes" title="Marcar/Desmarcar página actual" onchange="toggleCheckAll('faltantes', this.checked)">
                                    </th>
                                    <th>Tipo</th>
                                    <th>N° Documento</th>
                                    <th>Bodega</th>
                                    <th>Fecha Operación</th>
                                    <th>Tercero (NIT/CC)</th>
                                    <th class="text-end">Valor Documento</th>
                                    <th>Detalle / Clasificación</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyFaltantes">
                                <tr>
                                    <td colspan="9" class="text-center py-4 text-muted">
                                        Cargando diagnóstico del periodo...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- PAGINACIÓN TAB 1 -->
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-3 border-top mt-2">
                        <div class="small text-muted fw-semibold" id="infoPagFaltantes">Mostrando 0 de 0 documentos</div>
                        <nav>
                            <ul class="pagination pagination-sm mb-0" id="paginacionFaltantes"></ul>
                        </nav>
                    </div>
                </div>

                <!-- TAB 2: DOCUMENTOS MAL CONTABILIZADOS / DESCUADRADOS -->
                <div class="tab-pane fade" id="tabDescuadrados" role="tabpanel">
                    <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
                        <span class="text-muted small">
                            Estos documentos ya tienen líneas en <code>contabilidad</code>, pero están <strong>descuadrados (Débito $\neq$ Crédito)</strong>, les falta alguna cuenta (ej. Costo/Inventario) o tienen líneas duplicadas.
                        </span>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" onclick="seleccionarTodosGlobal('descuadrados', true)">
                                <i class="fa-solid fa-check-double me-1"></i> Marcar Todos
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm py-1 px-2" onclick="seleccionarTodosGlobal('descuadrados', false)">
                                <i class="fa-regular fa-square me-1"></i> Desmarcar
                            </button>
                            <button type="button" class="btn btn-warning btn-sm fw-bold text-dark" id="btnProcesarSeleccionadosDescuadrados" onclick="procesarSeleccionados('descuadrados')">
                                <i class="fa-solid fa-screwdriver-wrench me-1"></i> Reconstruir y Cuadrar Seleccionados (<span id="countSelDescuadrados">0</span>)
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover table-custom align-middle mb-0">
                            <thead class="sticky-top">
                                <tr>
                                    <th style="width: 36px;">
                                        <input type="checkbox" class="form-check-input" id="checkAllDescuadrados" title="Marcar/Desmarcar página actual" onchange="toggleCheckAll('descuadrados', this.checked)">
                                    </th>
                                    <th>Tipo</th>
                                    <th>N° Documento</th>
                                    <th>Bodega</th>
                                    <th>Fecha</th>
                                    <th>Tercero</th>
                                    <th class="text-end">Débito Actual</th>
                                    <th class="text-end">Crédito Actual</th>
                                    <th class="text-end">Diferencia</th>
                                    <th>Diagnóstico Detectado</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="tbodyDescuadrados">
                                <tr>
                                    <td colspan="11" class="text-center py-4 text-muted">
                                        Cargando diagnóstico del periodo...
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- PAGINACIÓN TAB 2 -->
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-3 border-top mt-2">
                        <div class="small text-muted fw-semibold" id="infoPagDescuadrados">Mostrando 0 de 0 documentos</div>
                        <nav>
                            <ul class="pagination pagination-sm mb-0" id="paginacionDescuadrados"></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL DE PREVISUALIZACIÓN ANTES VS DESPUÉS -->
    <div class="modal fade" id="modalPrevisualizarAsiento" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header bg-dark text-white">
                    <h5 class="modal-title fw-bold">
                        <i class="fa-solid fa-eye text-info me-2"></i>
                        Auditoría de Asiento Contable: <span id="modalTituloDoc" class="text-warning"></span>
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <!-- COLUMNA IZQUIERDA: ESTADO ACTUAL EN CONTABILIDAD -->
                        <div class="col-md-6">
                            <div class="border rounded-3 p-3 h-100 bg-light">
                                <h6 class="fw-bold text-secondary border-bottom pb-2 mb-3">
                                    <i class="fa-solid fa-clock-rotate-left me-1"></i>
                                    Estado Actual en Tabla <code>contabilidad</code>
                                </h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered bg-white mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Cuenta PUC</th>
                                                <th class="text-end">Débito (Egreso)</th>
                                                <th class="text-end">Crédito (Ingreso)</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbodyModalActual"></tbody>
                                        <tfoot class="table-light fw-bold" id="tfootModalActual"></tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- COLUMNA DERECHA: ASIENTO RECONSTRUIDO PROPUESTO -->
                        <div class="col-md-6">
                            <div class="border border-success rounded-3 p-3 h-100" style="background: #f0fdf4;">
                                <h6 class="fw-bold text-success border-bottom border-success pb-2 mb-3">
                                    <i class="fa-solid fa-circle-check me-1"></i>
                                    Asiento Reconstruido desde Documento Origen (Partida Doble)
                                </h6>
                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered bg-white mb-0">
                                        <thead class="table-success">
                                            <tr>
                                                <th>Cuenta PUC</th>
                                                <th>Ref.</th>
                                                <th class="text-end">Débito</th>
                                                <th class="text-end">Crédito</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tbodyModalPropuesto"></tbody>
                                        <tfoot class="table-success fw-bold" id="tfootModalPropuesto"></tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary fw-bold" id="btnAplicarDesdeModal">
                        <i class="fa-solid fa-check-double me-1"></i> Aplicar Contabilización / Corrección Ahora
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const CSRF_TOKEN = '{{ csrf_token() }}';
        let datosFaltantes = [];
        let datosDescuadrados = [];
        let seleccionadosFaltantes = new Set();
        let seleccionadosDescuadrados = new Set();
        let paginaFaltantes = 1;
        let paginaDescuadrados = 1;
        let tamanoPagina = 50;
        let modalPreviewBs = null;
        let docActualModal = null;

        function keyDoc(item) {
            return `${item.tipoMovimiento}|${item.bodega}|${item.numeroDocumento}`;
        }

        document.addEventListener('DOMContentLoaded', () => {
            modalPreviewBs = new bootstrap.Modal(document.getElementById('modalPrevisualizarAsiento'));
            ejecutarDiagnostico();
        });

        function fmtMoneda(val) {
            const n = parseFloat(val) || 0;
            return '$' + n.toLocaleString('es-CO', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
        }

        async function ejecutarDiagnostico(e = null) {
            if (e) e.preventDefault();

            const fi = document.getElementById('filtroFi').value;
            const ff = document.getElementById('filtroFf').value;
            const bodega = document.getElementById('filtroBodega').value;
            const tipo = document.getElementById('filtroTipo').value;
            const incluirPos = document.getElementById('filtroIncluirPos').checked ? '1' : '0';

            const btn = document.getElementById('btnDiagnosticar');
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin me-1"></i> Escaneando...';

            document.getElementById('tbodyFaltantes').innerHTML = `<tr><td colspan="9" class="text-center py-4 text-muted"><i class="fa-solid fa-spinner fa-spin me-2"></i>Analizando tablas operativas vs contabilidad...</td></tr>`;
            document.getElementById('tbodyDescuadrados').innerHTML = `<tr><td colspan="11" class="text-center py-4 text-muted"><i class="fa-solid fa-spinner fa-spin me-2"></i>Verificando partida doble de asientos...</td></tr>`;

            try {
                const params = new URLSearchParams({ fi, ff, bodega, tipo, incluirPos });
                const resp = await fetch(`{{ url('sincronizador-contable/diagnosticar') }}?${params.toString()}`);
                const json = await resp.json();

                if (!json.ok) {
                    Swal.fire('Error', json.mensaje || 'No se pudo realizar el diagnóstico', 'error');
                    return;
                }

                const d = json.data;
                datosFaltantes = d.sin_contabilizar || [];
                datosDescuadrados = d.mal_contabilizados || [];

                // Seleccionar todos por defecto al cargar nuevo diagnóstico
                seleccionadosFaltantes = new Set(datosFaltantes.map(item => keyDoc(item)));
                seleccionadosDescuadrados = new Set(datosDescuadrados.map(item => keyDoc(item)));
                paginaFaltantes = 1;
                paginaDescuadrados = 1;

                // Actualizar KPIs
                document.getElementById('kpiTotalOperativos').textContent = (d.kpis.total_operativos || 0).toLocaleString('es-CO');
                document.getElementById('kpiContabilizadosOk').textContent = (d.kpis.contabilizados_ok || 0).toLocaleString('es-CO');
                document.getElementById('kpiSinContabilizar').textContent = (d.kpis.sin_contabilizar || 0).toLocaleString('es-CO');
                document.getElementById('kpiMalContabilizados').textContent = (d.kpis.mal_contabilizados || 0).toLocaleString('es-CO');

                document.getElementById('badgeCountFaltantes').textContent = datosFaltantes.length;
                document.getElementById('badgeCountDescuadrados').textContent = datosDescuadrados.length;

                // Actualizar resumen por módulo
                const rt = d.resumen_por_tipo || {};
                ['Factura', 'Devolucion', 'Compra', 'Gasto'].forEach(mod => {
                    const info = rt[mod] || { ok: 0, faltantes: 0, descuadrados: 0 };
                    const el = document.getElementById('resMod' + mod);
                    if (el) {
                        el.innerHTML = `<span class="text-success fw-bold">${info.ok} OK</span> | <span class="text-danger fw-bold">${info.faltantes} Faltan</span> | <span class="text-warning fw-bold">${info.descuadrados} Desc.</span>`;
                    }
                });

                // Mostrar aviso si se auto-repararon reglas en tiposmoviminetos
                const alertaReglas = document.getElementById('alertaReglas');
                if (d.reglas_reparadas && d.reglas_reparadas.length > 0) {
                    alertaReglas.classList.remove('d-none');
                    document.getElementById('textoReglasReparadas').textContent = d.reglas_reparadas.join(' | ');
                } else {
                    alertaReglas.classList.add('d-none');
                }

                renderizarTablas();

                // Si no hay faltantes pero sí hay descuadrados, activar pestaña de descuadrados automáticamente
                if (datosFaltantes.length === 0 && datosDescuadrados.length > 0) {
                    document.getElementById('tab-descuadrados-btn').click();
                }
            } catch (err) {
                Swal.fire('Error de conexión', err.message, 'error');
            } finally {
                btn.disabled = false;
                btn.innerHTML = '<i class="fa-solid fa-magnifying-glass-chart me-1"></i> Auditar Periodo';
            }
        }

        function obtenerFiltrados(grupo) {
            const filtro = (document.getElementById('buscadorTabla').value || '').toLowerCase().trim();
            const fuente = grupo === 'faltantes' ? datosFaltantes : datosDescuadrados;
            if (!filtro) return fuente;
            return fuente.filter(item => {
                return (
                    String(item.numeroDocumento).toLowerCase().includes(filtro) ||
                    String(item.nit).toLowerCase().includes(filtro) ||
                    String(item.tipoMovimiento).toLowerCase().includes(filtro) ||
                    String(item.nombreBodega || '').toLowerCase().includes(filtro) ||
                    String(item.diagnostico || item.detalle || '').toLowerCase().includes(filtro)
                );
            });
        }

        function cambiarTamanoPagina(val) {
            tamanoPagina = parseInt(val, 10) || 50;
            paginaFaltantes = 1;
            paginaDescuadrados = 1;
            renderizarTablas();
        }

        function irAPagina(grupo, numPag) {
            if (grupo === 'faltantes') {
                paginaFaltantes = numPag;
            } else {
                paginaDescuadrados = numPag;
            }
            renderizarTablas();
        }

        function construirHtmlPaginacion(grupo, pagActual, totalPaginas) {
            if (totalPaginas <= 1) return '';
            let html = '';

            const disPrev = pagActual <= 1 ? 'disabled' : '';
            html += `<li class="page-item ${disPrev}"><button class="page-link" type="button" onclick="irAPagina('${grupo}', 1)">«</button></li>`;
            html += `<li class="page-item ${disPrev}"><button class="page-link" type="button" onclick="irAPagina('${grupo}', ${pagActual - 1})">‹</button></li>`;

            const rango = 2;
            const ini = Math.max(1, pagActual - rango);
            const fin = Math.min(totalPaginas, pagActual + rango);

            if (ini > 1) {
                html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }
            for (let p = ini; p <= fin; p++) {
                const act = p === pagActual ? 'active' : '';
                html += `<li class="page-item ${act}"><button class="page-link fw-bold" type="button" onclick="irAPagina('${grupo}', ${p})">${p}</button></li>`;
            }
            if (fin < totalPaginas) {
                html += `<li class="page-item disabled"><span class="page-link">...</span></li>`;
            }

            const disNext = pagActual >= totalPaginas ? 'disabled' : '';
            html += `<li class="page-item ${disNext}"><button class="page-link" type="button" onclick="irAPagina('${grupo}', ${pagActual + 1})">›</button></li>`;
            html += `<li class="page-item ${disNext}"><button class="page-link" type="button" onclick="irAPagina('${grupo}', ${totalPaginas})">»</button></li>`;
            return html;
        }

        function renderizarTablas() {
            // 1. Renderizar Faltantes con paginación
            const tbF = document.getElementById('tbodyFaltantes');
            const faltantesFiltrados = obtenerFiltrados('faltantes');
            const totalF = faltantesFiltrados.length;
            const totalPagF = Math.max(1, Math.ceil(totalF / tamanoPagina));
            if (paginaFaltantes > totalPagF) paginaFaltantes = totalPagF;

            const iniF = (paginaFaltantes - 1) * tamanoPagina;
            const finF = Math.min(totalF, iniF + tamanoPagina);
            const paginaItemsF = faltantesFiltrados.slice(iniF, finF);

            if (totalF === 0) {
                tbF.innerHTML = `<tr><td colspan="9" class="text-center py-4 text-success fw-bold"><i class="fa-solid fa-circle-check me-2"></i>¡Excelente! No hay documentos pendientes por contabilizar en este filtro.</td></tr>`;
                document.getElementById('infoPagFaltantes').textContent = 'Mostrando 0 de 0 documentos';
                document.getElementById('paginacionFaltantes').innerHTML = '';
            } else {
                tbF.innerHTML = paginaItemsF.map(item => {
                    const k = keyDoc(item);
                    const checked = seleccionadosFaltantes.has(k) ? 'checked' : '';
                    return `
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input check-item-faltantes"
                                    data-key="${k}"
                                    data-tipo="${item.tipoMovimiento}"
                                    data-numero="${item.numeroDocumento}"
                                    data-bodega="${item.bodega}"
                                    ${checked}
                                    onchange="toggleItemCheck('faltantes', '${k}', this.checked)">
                            </td>
                            <td><span class="badge-tipo tipo-${item.tipoMovimiento}">${item.tipoMovimiento}</span></td>
                            <td class="fw-bold text-dark">${item.numeroDocumento}</td>
                            <td>${item.nombreBodega}</td>
                            <td>${item.fecha}</td>
                            <td><code>${item.nit}</code></td>
                            <td class="text-end fw-bold">${fmtMoneda(item.valorOperativo)}</td>
                            <td><span class="text-muted small">${item.detalle || item.subtipo}</span></td>
                            <td class="text-center text-nowrap">
                                <button type="button" class="btn btn-outline-primary btn-sm py-0 px-2 me-1" title="Ver asiento que se generará"
                                    onclick="abrirPrevisualizacion('${item.tipoMovimiento}', '${item.numeroDocumento}', ${item.bodega})">
                                    <i class="fa-solid fa-eye"></i>
                                </button>
                                <button type="button" class="btn btn-danger btn-sm py-0 px-2 fw-bold" title="Contabilizar ahora"
                                    onclick="sincronizarUno('${item.tipoMovimiento}', '${item.numeroDocumento}', ${item.bodega})">
                                    <i class="fa-solid fa-check me-1"></i> Contabilizar
                                </button>
                            </td>
                        </tr>
                    `;
                }).join('');

                document.getElementById('infoPagFaltantes').textContent =
                    `Mostrando ${iniF + 1} a ${finF} de ${totalF.toLocaleString('es-CO')} documentos (Página ${paginaFaltantes} de ${totalPagF})`;
                document.getElementById('paginacionFaltantes').innerHTML =
                    construirHtmlPaginacion('faltantes', paginaFaltantes, totalPagF);
            }

            // 2. Renderizar Descuadrados / Mal Contabilizados con paginación
            const tbD = document.getElementById('tbodyDescuadrados');
            const descFiltrados = obtenerFiltrados('descuadrados');
            const totalD = descFiltrados.length;
            const totalPagD = Math.max(1, Math.ceil(totalD / tamanoPagina));
            if (paginaDescuadrados > totalPagD) paginaDescuadrados = totalPagD;

            const iniD = (paginaDescuadrados - 1) * tamanoPagina;
            const finD = Math.min(totalD, iniD + tamanoPagina);
            const paginaItemsD = descFiltrados.slice(iniD, finD);

            if (totalD === 0) {
                tbD.innerHTML = `<tr><td colspan="11" class="text-center py-4 text-success fw-bold"><i class="fa-solid fa-circle-check me-2"></i>¡Perfecto! Todos los documentos contabilizados en este rango están cuadrados y completos.</td></tr>`;
                document.getElementById('infoPagDescuadrados').textContent = 'Mostrando 0 de 0 documentos';
                document.getElementById('paginacionDescuadrados').innerHTML = '';
            } else {
                tbD.innerHTML = paginaItemsD.map(item => {
                    const k = keyDoc(item);
                    const checked = seleccionadosDescuadrados.has(k) ? 'checked' : '';
                    return `
                        <tr>
                            <td>
                                <input type="checkbox" class="form-check-input check-item-descuadrados"
                                    data-key="${k}"
                                    data-tipo="${item.tipoMovimiento}"
                                    data-numero="${item.numeroDocumento}"
                                    data-bodega="${item.bodega}"
                                    ${checked}
                                    onchange="toggleItemCheck('descuadrados', '${k}', this.checked)">
                            </td>
                            <td><span class="badge-tipo tipo-${item.tipoMovimiento}">${item.tipoMovimiento}</span></td>
                            <td class="fw-bold text-dark">${item.numeroDocumento}</td>
                            <td>${item.nombreBodega}</td>
                            <td>${item.fecha}</td>
                            <td><code>${item.nit}</code></td>
                            <td class="text-end text-primary fw-bold">${fmtMoneda(item.debitoActual)}</td>
                            <td class="text-end text-success fw-bold">${fmtMoneda(item.creditoActual)}</td>
                            <td class="text-end text-danger fw-bold">${fmtMoneda(item.diferencia)}</td>
                            <td><span class="small text-danger fw-semibold">${item.diagnostico}</span></td>
                            <td class="text-center text-nowrap">
                                <button type="button" class="btn btn-outline-dark btn-sm py-0 px-2 me-1" title="Comparar Antes vs Después"
                                    onclick="abrirPrevisualizacion('${item.tipoMovimiento}', '${item.numeroDocumento}', ${item.bodega})">
                                    <i class="fa-solid fa-code-compare"></i>
                                </button>
                                <button type="button" class="btn btn-warning btn-sm py-0 px-2 fw-bold text-dark" title="Corregir y cuadrar automáticamente"
                                    onclick="sincronizarUno('${item.tipoMovimiento}', '${item.numeroDocumento}', ${item.bodega})">
                                    <i class="fa-solid fa-screwdriver-wrench me-1"></i> Corregir
                                </button>
                            </td>
                        </tr>
                    `;
                }).join('');

                document.getElementById('infoPagDescuadrados').textContent =
                    `Mostrando ${iniD + 1} a ${finD} de ${totalD.toLocaleString('es-CO')} documentos (Página ${paginaDescuadrados} de ${totalPagD})`;
                document.getElementById('paginacionDescuadrados').innerHTML =
                    construirHtmlPaginacion('descuadrados', paginaDescuadrados, totalPagD);
            }

            document.getElementById('checkAllFaltantes').checked =
                paginaItemsF.length > 0 && paginaItemsF.every(it => seleccionadosFaltantes.has(keyDoc(it)));
            document.getElementById('checkAllDescuadrados').checked =
                paginaItemsD.length > 0 && paginaItemsD.every(it => seleccionadosDescuadrados.has(keyDoc(it)));
            actualizarContadoresSeleccion();
        }

        function filtrarTablasLocal() {
            paginaFaltantes = 1;
            paginaDescuadrados = 1;
            renderizarTablas();
        }

        function toggleItemCheck(grupo, k, estado) {
            const setRef = grupo === 'faltantes' ? seleccionadosFaltantes : seleccionadosDescuadrados;
            if (estado) setRef.add(k);
            else setRef.delete(k);
            actualizarContadoresSeleccion();
        }

        function toggleCheckAll(grupo, estado) {
            const setRef = grupo === 'faltantes' ? seleccionadosFaltantes : seleccionadosDescuadrados;
            document.querySelectorAll(`.check-item-${grupo}`).forEach(ch => {
                ch.checked = estado;
                const k = ch.getAttribute('data-key');
                if (estado) setRef.add(k);
                else setRef.delete(k);
            });
            actualizarContadoresSeleccion();
        }

        function seleccionarTodosGlobal(grupo, estado) {
            const setRef = grupo === 'faltantes' ? seleccionadosFaltantes : seleccionadosDescuadrados;
            const filtrados = obtenerFiltrados(grupo);
            if (!estado) {
                setRef.clear();
            } else {
                filtrados.forEach(it => setRef.add(keyDoc(it)));
            }
            renderizarTablas();
        }

        function actualizarContadoresSeleccion() {
            document.getElementById('countSelFaltantes').textContent = seleccionadosFaltantes.size.toLocaleString('es-CO');
            document.getElementById('countSelDescuadrados').textContent = seleccionadosDescuadrados.size.toLocaleString('es-CO');
        }

        async function abrirPrevisualizacion(tipoMovimiento, numeroDocumento, bodega) {
            docActualModal = { tipoMovimiento, numeroDocumento, bodega };
            document.getElementById('modalTituloDoc').textContent = `${tipoMovimiento} #${numeroDocumento} (Bodega ${bodega})`;
            document.getElementById('tbodyModalActual').innerHTML = `<tr><td colspan="3" class="text-center py-3">Cargando...</td></tr>`;
            document.getElementById('tbodyModalPropuesto').innerHTML = `<tr><td colspan="4" class="text-center py-3">Calculando asiento...</td></tr>`;
            modalPreviewBs.show();

            try {
                const params = new URLSearchParams({ tipoMovimiento, numeroDocumento, bodega });
                const resp = await fetch(`{{ url('sincronizador-contable/previsualizar') }}?${params.toString()}`);
                const json = await resp.json();

                if (!json.ok) {
                    Swal.fire('Error', json.mensaje, 'error');
                    return;
                }

                const d = json.data;
                const act = d.lineas_actuales || [];
                const prop = d.lineas_propuestas || [];

                // Render actual
                let sumDebAct = 0, sumCreAct = 0;
                if (act.length === 0) {
                    document.getElementById('tbodyModalActual').innerHTML = `<tr><td colspan="3" class="text-center text-danger py-3">Sin registros en contabilidad (Documento no contabilizado)</td></tr>`;
                } else {
                    document.getElementById('tbodyModalActual').innerHTML = act.map(l => {
                        sumDebAct += parseFloat(l.debito) || 0;
                        sumCreAct += parseFloat(l.credito) || 0;
                        return `
                            <tr>
                                <td><strong>${l.cuentaNum || 'SIN CUENTA'}</strong> <small class="text-muted d-block">${l.nombreCuenta}</small></td>
                                <td class="text-end">${fmtMoneda(l.debito)}</td>
                                <td class="text-end">${fmtMoneda(l.credito)}</td>
                            </tr>
                        `;
                    }).join('');
                }
                const difAct = Math.round((sumDebAct - sumCreAct) * 100) / 100;
                document.getElementById('tfootModalActual').innerHTML = `
                    <tr>
                        <td>TOTAL ACTUAL</td>
                        <td class="text-end">${fmtMoneda(sumDebAct)}</td>
                        <td class="text-end">${fmtMoneda(sumCreAct)}</td>
                    </tr>
                    <tr class="${Math.abs(difAct) > 0.5 ? 'table-danger' : 'table-success'}">
                        <td colspan="2">DIFERENCIA ACTUAL</td>
                        <td class="text-end">${fmtMoneda(difAct)}</td>
                    </tr>
                `;

                // Render propuesto
                let sumDebProp = 0, sumCreProp = 0;
                if (prop.length === 0) {
                    document.getElementById('tbodyModalPropuesto').innerHTML = `<tr><td colspan="4" class="text-center text-muted py-3">No se encontraron líneas propuestas</td></tr>`;
                } else {
                    document.getElementById('tbodyModalPropuesto').innerHTML = prop.map(l => {
                        sumDebProp += parseFloat(l.debito) || 0;
                        sumCreProp += parseFloat(l.credito) || 0;
                        return `
                            <tr>
                                <td><strong>${l.cuentaNum}</strong> <small class="text-muted d-block">${l.nombreCuenta}</small></td>
                                <td><span class="badge bg-secondary">${l.tipoValor || 'AUTO'}</span></td>
                                <td class="text-end">${fmtMoneda(l.debito)}</td>
                                <td class="text-end">${fmtMoneda(l.credito)}</td>
                            </tr>
                        `;
                    }).join('');
                }
                const difProp = Math.round((sumDebProp - sumCreProp) * 100) / 100;
                const estaCuadrado = Math.abs(difProp) <= 0.05 && sumDebProp > 0;
                document.getElementById('tfootModalPropuesto').innerHTML = `
                    <tr>
                        <td colspan="2">TOTAL RECONSTRUIDO</td>
                        <td class="text-end">${fmtMoneda(sumDebProp)}</td>
                        <td class="text-end">${fmtMoneda(sumCreProp)}</td>
                    </tr>
                    <tr class="${estaCuadrado ? 'table-success' : 'table-danger'}">
                        <td colspan="3">DIFERENCIA (PARTIDA DOBLE)</td>
                        <td class="text-end ${estaCuadrado ? 'text-success fw-bold' : 'text-danger fw-bold'}">
                            ${fmtMoneda(difProp)} ${estaCuadrado ? '✓' : '⚠️ Descuadrado'}
                        </td>
                    </tr>
                `;

                const btnModal = document.getElementById('btnAplicarDesdeModal');
                if (!estaCuadrado) {
                    btnModal.disabled = true;
                    btnModal.classList.add('opacity-50');
                    btnModal.innerHTML = `<i class="fa-solid fa-triangle-exclamation me-1"></i> Asiento Descuadrado (No se puede aplicar)`;
                } else {
                    btnModal.disabled = false;
                    btnModal.classList.remove('opacity-50');
                    btnModal.innerHTML = `<i class="fa-solid fa-check me-1"></i> Aplicar Contabilización / Corrección Ahora`;
                    btnModal.onclick = () => {
                        modalPreviewBs.hide();
                        sincronizarUno(tipoMovimiento, numeroDocumento, bodega);
                    };
                }
            } catch (err) {
                Swal.fire('Error', err.message, 'error');
            }
        }

        async function sincronizarUno(tipoMovimiento, numeroDocumento, bodega) {
            try {
                const resp = await fetch(`{{ url('sincronizador-contable/sincronizar-documento') }}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': CSRF_TOKEN
                    },
                    body: JSON.stringify({ tipoMovimiento, numeroDocumento, bodega })
                });
                const json = await resp.json();

                if (json.ok) {
                    Swal.fire({
                        icon: 'success',
                        title: '¡Documento Sincronizado!',
                        text: json.mensaje,
                        timer: 1800,
                        showConfirmButton: false
                    });
                    ejecutarDiagnostico();
                } else {
                    Swal.fire('Atención', json.mensaje || 'No se pudo sincronizar el documento', 'warning');
                }
            } catch (err) {
                Swal.fire('Error', err.message, 'error');
            }
        }

        async function procesarSeleccionados(grupo) {
            const setRef = grupo === 'faltantes' ? seleccionadosFaltantes : seleccionadosDescuadrados;
            const fuente = grupo === 'faltantes' ? datosFaltantes : datosDescuadrados;
            const itemsSel = fuente.filter(it => setRef.has(keyDoc(it)));

            if (itemsSel.length === 0) {
                Swal.fire('Sin selección', 'Seleccione al menos un documento de la lista.', 'info');
                return;
            }

            const docs = itemsSel.map(it => ({
                tipoMovimiento: it.tipoMovimiento,
                numeroDocumento: it.numeroDocumento,
                bodega: parseInt(it.bodega, 10),
                forzar: grupo === 'descuadrados'
            }));

            const confirmacion = await Swal.fire({
                icon: 'question',
                title: grupo === 'faltantes' ? '¿Contabilizar documentos faltantes?' : '¿Reconstruir documentos descuadrados?',
                html: `Se procesarán <strong>${docs.length}</strong> documento(s) respetando su fecha original, tercero, bodega y partida doble.<br><small class="text-muted">Los documentos que ya están bien contabilizados no se tocarán ni duplicarán.</small>`,
                showCancelButton: true,
                confirmButtonText: 'Sí, procesar ahora',
                cancelButtonText: 'Cancelar'
            });

            if (!confirmacion.isConfirmed) return;

            await ejecutarProcesamientoEnLotes(docs);
        }

        async function sincronizarTodoIntegral() {
            const todos = [
                ...datosFaltantes.map(d => ({
                    tipoMovimiento: d.tipoMovimiento,
                    numeroDocumento: d.numeroDocumento,
                    bodega: d.bodega,
                    forzar: false
                })),
                ...datosDescuadrados.map(d => ({
                    tipoMovimiento: d.tipoMovimiento,
                    numeroDocumento: d.numeroDocumento,
                    bodega: d.bodega,
                    forzar: true
                }))
            ];

            if (todos.length === 0) {
                Swal.fire('Todo al día', 'No hay documentos pendientes ni descuadrados en el periodo seleccionado.', 'success');
                return;
            }

            const confirmacion = await Swal.fire({
                icon: 'warning',
                title: 'Sincronización y Corrección Integral',
                html: `Se van a procesar en total <strong>${todos.length}</strong> documento(s):<br>
                       • <strong>${datosFaltantes.length}</strong> sin contabilizar (se crearán sus asientos)<br>
                       • <strong>${datosDescuadrados.length}</strong> descuadrados/incompletos (se reconstruirán cuadrados)<br><br>
                       <small class="text-muted">¿Desea iniciar el proceso automático?</small>`,
                showCancelButton: true,
                confirmButtonText: 'Sí, Contabilizar y Corregir Todo',
                cancelButtonText: 'Cancelar'
            });

            if (!confirmacion.isConfirmed) return;

            await ejecutarProcesamientoEnLotes(todos);
        }

        async function ejecutarProcesamientoEnLotes(listaDocumentos) {
            const panel = document.getElementById('panelProgresoLote');
            const barra = document.getElementById('barraProgresoLote');
            const contador = document.getElementById('contadorProgresoLote');

            panel.classList.remove('d-none');
            barra.style.width = '0%';

            const TAMANO_LOTE = 40;
            const total = listaDocumentos.length;
            let procesados = 0;
            let totalContabilizados = 0;
            let totalReconstruidos = 0;
            let totalOmitidos = 0;
            let totalErrores = 0;

            for (let i = 0; i < total; i += TAMANO_LOTE) {
                const lote = listaDocumentos.slice(i, i + TAMANO_LOTE);
                contador.textContent = `${procesados} / ${total}`;

                try {
                    const resp = await fetch(`{{ url('sincronizador-contable/sincronizar-lote') }}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': CSRF_TOKEN
                        },
                        body: JSON.stringify({ documentos: lote })
                    });
                    const json = await resp.json();
                    if (json.ok) {
                        totalContabilizados += json.contabilizados || 0;
                        totalReconstruidos  += json.reconstruidos || 0;
                        totalOmitidos       += json.omitidos || 0;
                        totalErrores        += json.errores || 0;
                    } else {
                        totalErrores += lote.length;
                    }
                } catch (err) {
                    totalErrores += lote.length;
                }

                procesados = Math.min(total, i + lote.length);
                const pct = Math.round((procesados / total) * 100);
                barra.style.width = `${pct}%`;
                contador.textContent = `${procesados} / ${total} (${pct}%)`;
            }

            setTimeout(() => {
                panel.classList.add('d-none');
            }, 900);

            await Swal.fire({
                icon: totalErrores === 0 ? 'success' : 'info',
                title: '¡Sincronización Contable Finalizada!',
                html: `
                    <div class="text-start mt-2">
                        <p class="mb-1">🟢 <strong>Contabilizados nuevos:</strong> ${totalContabilizados}</p>
                        <p class="mb-1">🛠️ <strong>Reconstruidos / Cuadrados:</strong> ${totalReconstruidos}</p>
                        <p class="mb-1">🛡️ <strong>Omitidos (Ya estaban OK):</strong> ${totalOmitidos}</p>
                        ${totalErrores > 0 ? `<p class="mb-0 text-danger">⚠️ <strong>No procesados:</strong> ${totalErrores}</p>` : ''}
                    </div>
                `
            });

            ejecutarDiagnostico();
        }
    </script>
@endsection