const { useState, useMemo, useEffect } = React;

window.AdminPlanilla = function({ globalUsers = [], absences = [], logs = [], vacations = [], settings = {}, refreshData }) {
    const [activeTab, setActiveTab] = useState(() => {
        const saved = localStorage.getItem('shift_planilla_subtab');
        return ['payroll', 'loans', 'severance', 'cut_config'].includes(saved) ? saved : 'payroll';
    });

    useEffect(() => {
        try {
            localStorage.setItem('shift_planilla_subtab', activeTab);
        } catch (e) {}
    }, [activeTab]);

    // Filtros de período
    const [periodFilter, setPeriodFilter] = useState('current_fortnight');
    const [startDate, setStartDate] = useState('');
    const [endDate, setEndDate] = useState('');

    // Variables guardadas en base de datos por colaborador
    const [payrollVariables, setPayrollVariables] = useState({});
    const [activeLoans, setActiveLoans] = useState([]);
    const [allOvertimeLogs, setAllOvertimeLogs] = useState([]);
    const [payrollClosureStatus, setPayrollClosureStatus] = useState(null);
    const [isTogglingClosure, setIsTogglingClosure] = useState(false);

    // Modales y Drawers
    const [selectedDetailEmployee, setSelectedDetailEmployee] = useState(null); // Drawer lateral con colilla
    const [editingAdjustmentUser, setEditingAdjustmentUser] = useState(null);   // Modal de horas extras / bonos
    const [calendarModalUser, setCalendarModalUser] = useState(null);           // Modal calendario auditoría
    const [showLoanModal, setShowLoanModal] = useState(false);                 // Modal nuevo préstamo
    const [showBankModal, setShowBankModal] = useState(false);                 // Modal dispersión bancaria masiva
    const [showDisbursementModal, setShowDisbursementModal] = useState(false); // Modal de selección de cuenta para pago de planilla
    const [showClosureAuditModal, setShowClosureAuditModal] = useState(false);   // Modal de auditoría e historial de cierres
    const [selectedPaymentAccount, setSelectedPaymentAccount] = useState('Efectivo / Caja Chica');
    const [disbursementNotes, setDisbursementNotes] = useState('');
    const [showExportMenu, setShowExportMenu] = useState(false);               // Dropdown exportación y reportes
    const [bankFormat, setBankFormat] = useState('bac');                       // 'bac' | 'banpro' | 'lafise' | 'multibank'
    const [companyDebitAcc, setCompanyDebitAcc] = useState(settings?.companyDebitAccount || '');

    useEffect(() => {
        if (settings?.companyDebitAccount) {
            setCompanyDebitAcc(settings.companyDebitAccount);
        }
    }, [settings?.companyDebitAccount]);

    // Campos del formulario de ajuste rápido
    const [adjOvertime, setAdjOvertime] = useState('');
    const [adjCommissions, setAdjCommissions] = useState('');
    const [adjBonuses, setAdjBonuses] = useState('');

    // Campos préstamo / adelanto
    const [loanUserId, setLoanUserId] = useState('');
    const [loanAmount, setLoanAmount] = useState('');
    const [loanInstallments, setLoanInstallments] = useState(2);
    const [loanNotes, setLoanNotes] = useState('Adelanto de Salario');

    // Configuración Cortes
    const [cutStartDayQ1, setCutStartDayQ1] = useState(settings?.cutStartDayQ1 || 1);
    const [cutEndDayQ1, setCutEndDayQ1] = useState(settings?.cutEndDayQ1 || 15);
    const [cutStartDayQ2, setCutStartDayQ2] = useState(settings?.cutStartDayQ2 || 16);
    const [cutEndDayQ2, setCutEndDayQ2] = useState(settings?.cutEndDayQ2 || 30);
    const [isSavingConfig, setIsSavingConfig] = useState(false);

    // Liquidación
    const [selectedSeveranceUser, setSelectedSeveranceUser] = useState(null);
    const [sevTermDate, setSevTermDate] = useState(window.getNICDate());
    const [sevReason, setSevReason] = useState('despido_sin_causa_art45');
    const [sevAvgVariable, setSevAvgVariable] = useState(0);
    const [sevVacDaysPending, setSevVacDaysPending] = useState(0);

    const todayStr = window.getNICDate();
    const [curYear, curMonth, curDay] = todayStr.split('-').map(Number);

    const applyPeriodPreset = (preset) => {
        setPeriodFilter(preset);
        const y = curYear;
        const m = curMonth;

        if (preset === 'today_accumulated') {
            const qStart = curDay <= 15 ? 1 : 16;
            setStartDate(`${y}-${String(m).padStart(2,'0')}-${String(qStart).padStart(2,'0')}`);
            setEndDate(todayStr);
        } else if (preset === 'current_fortnight') {
            if (curDay <= 15) {
                setStartDate(`${y}-${String(m).padStart(2,'0')}-01`);
                setEndDate(`${y}-${String(m).padStart(2,'0')}-15`);
            } else {
                const lastDay = new Date(y, m, 0).getDate();
                setStartDate(`${y}-${String(m).padStart(2,'0')}-16`);
                setEndDate(`${y}-${String(m).padStart(2,'0')}-${lastDay}`);
            }
        } else if (preset === 'last_fortnight') {
            if (curDay <= 15) {
                const prevM = m === 1 ? 12 : m - 1;
                const prevY = m === 1 ? y - 1 : y;
                const lastDay = new Date(prevY, prevM, 0).getDate();
                setStartDate(`${prevY}-${String(prevM).padStart(2,'0')}-16`);
                setEndDate(`${prevY}-${String(prevM).padStart(2,'0')}-${lastDay}`);
            } else {
                setStartDate(`${y}-${String(m).padStart(2,'0')}-01`);
                setEndDate(`${y}-${String(m).padStart(2,'0')}-15`);
            }
        } else if (preset === 'current_month') {
            const lastDay = new Date(y, m, 0).getDate();
            setStartDate(`${y}-${String(m).padStart(2,'0')}-01`);
            setEndDate(`${y}-${String(m).padStart(2,'0')}-${lastDay}`);
        } else if (preset === 'last_month') {
            const prevM = m === 1 ? 12 : m - 1;
            const prevY = m === 1 ? y - 1 : y;
            const lastDay = new Date(prevY, prevM, 0).getDate();
            setStartDate(`${prevY}-${String(prevM).padStart(2,'0')}-01`);
            setEndDate(`${prevY}-${String(prevM).padStart(2,'0')}-${lastDay}`);
        }
    };

    useEffect(() => {
        applyPeriodPreset('current_fortnight');
    }, []);

    // State for initial asynchronous data loading
    const [isLoadingData, setIsLoadingData] = useState(true);

    const loadData = async () => {
        if (!startDate || !endDate) return;
        setIsLoadingData(true);
        try {
            const [resVars, resLoans, resClosure, resOvertime] = await Promise.all([
                window.apiCall('get_payroll_items', { period_start: startDate, period_end: endDate }),
                window.apiCall('get_loans', {}),
                window.apiCall('get_payroll_closure_status', { period_start: startDate, period_end: endDate }),
                window.apiCall('get_overtime_logs', {})
            ]);

            if (resVars && resVars.success && resVars.items) {
                const map = {};
                resVars.items.forEach(it => {
                    map[it.user_id] = {
                        overtime: parseFloat(it.overtime_hours || 0),
                        holidays: parseFloat(it.holidays_worked || 0),
                        commissions: parseFloat(it.commissions || 0),
                        bonuses: parseFloat(it.bonuses || 0)
                    };
                });
                setPayrollVariables(map);
            }

            if (resLoans && resLoans.success) {
                setActiveLoans(resLoans.loans || []);
            }

            if (resOvertime && resOvertime.success) {
                setAllOvertimeLogs(resOvertime.overtimeLogs || []);
            }

            if (resClosure && resClosure.success) {
                setPayrollClosureStatus(resClosure);
            } else {
                setPayrollClosureStatus(null);
            }
        } catch (e) {
        } finally {
            setIsLoadingData(false);
        }
    };

    const handleTogglePayrollClosure = async (shouldClose, payAccount = null, customNotes = null) => {
        if (shouldClose && !payAccount) {
            setShowDisbursementModal(true);
            return;
        }

        if (!shouldClose) {
            const unlockReason = prompt(`ATENCIÓN: La planilla del período ${startDate} al ${endDate} está OFICIALMENTE PAGADA Y BLOQUEADA.\n\nPara desprotegerla y regresar a modo borrador, debes ingresar el motivo de reapertura para el registro de auditoría:`);
            if (!unlockReason || !unlockReason.trim()) {
                alert("Acción cancelada: Se requiere una justificación válida para reabrir una planilla pagada.");
                return;
            }
            customNotes = `Reapertura autorizada. Motivo: ${unlockReason.trim()}`;
        }

        setIsTogglingClosure(true);
        try {
            const targetAccount = payAccount || selectedPaymentAccount || 'Efectivo / Caja Chica';
            const fullNotes = shouldClose
                ? `Pago realizado mediante: ${targetAccount}${customNotes || disbursementNotes ? ' - ' + (customNotes || disbursementNotes) : ''}`
                : (customNotes || 'Reabierta para correcciones');

            const res = await window.apiCall('toggle_payroll_closure', {
                period_start: startDate,
                period_end: endDate,
                status: shouldClose ? 'paid' : 'draft',
                total_net_disbursed: totalsSummary?.net || 0,
                total_gross_disbursed: totalsSummary?.gross || 0,
                notes: fullNotes
            });
            if (res && res.success) {
                setShowDisbursementModal(false);
                await loadData();
            } else {
                alert(res?.error || 'No se pudo actualizar el estado de cierre de la planilla');
            }
        } catch (err) {
            alert('Error de conexión al cambiar el estado de la planilla');
        } finally {
            setIsTogglingClosure(false);
        }
    };

    const handleToggleUserPayment = async (uId, currentStatus) => {
        if (payrollClosureStatus?.closed) {
            alert("Planilla Bloqueada: Esta planilla está oficialmente pagada y cerrada. Para modificar pagos individuales, haz clic en 'Reabrir Planilla' e ingresa la justificación de auditoría.");
            return;
        }

        const newStatus = currentStatus === 'paid' ? 'pending' : 'paid';
        const confirmMsg = newStatus === 'paid'
            ? '¿Estás seguro de marcar el pago de este colaborador como PAGADO?\n\nAl marcarlo como pagado, su colilla de este período se publicará inmediatamente en su portal de autoservicio.'
            : '¿Estás seguro de cambiar el estado a PENDIENTE DE PAGO?\n\nLa colilla dejará de ser visible para el trabajador hasta que autorices su pago.';
        
        if (!confirm(confirmMsg)) return;

        setIsTogglingClosure(true);
        try {
            const res = await window.apiCall('toggle_user_payroll_payment', {
                period_start: startDate,
                period_end: endDate,
                user_id: uId,
                status: newStatus,
                notes: newStatus === 'paid' ? 'Pago individual autorizado por administración' : 'Pendiente de dispersión'
            });
            if (res && res.success) {
                await loadData();
            } else {
                alert(res?.error || 'No se pudo actualizar el pago del colaborador.');
            }
        } catch (err) {
            alert('Error de conexión al actualizar pago del colaborador');
        } finally {
            setIsTogglingClosure(false);
        }
    };

    const handleBulkUserPayment = async (statusToSet) => {
        if (payrollClosureStatus?.closed) {
            alert("Planilla Bloqueada: Esta planilla se encuentra oficialmente procesada y PAGADA. Para modificar pagos en bloque, haz clic en 'Reabrir Planilla' e ingresa el motivo de desprotección.");
            return;
        }

        const allUserIds = activeWorkersList.map(w => w.id);
        if (allUserIds.length === 0) return;
        const confirmMsg = statusToSet === 'paid'
            ? `¿Estás seguro de MARCAR COMO PAGADOS A TODOS (${allUserIds.length}) los colaboradores para el período ${startDate} al ${endDate}?`
            : `¿Estás seguro de MARCAR PENDIENTES DE PAGO A TODOS los colaboradores para el período ${startDate} al ${endDate}?`;

        if (!confirm(confirmMsg)) return;

        setIsTogglingClosure(true);
        try {
            const res = await window.apiCall('toggle_user_payroll_payment', {
                period_start: startDate,
                period_end: endDate,
                user_ids: allUserIds,
                status: statusToSet,
                notes: statusToSet === 'paid' ? 'Pago masivo autorizado por administración' : 'Marcar pendientes en bloque'
            });
            if (res && res.success) {
                await loadData();
            } else {
                alert(res?.error || 'No se pudo procesar la actualización en bloque.');
            }
        } catch (e) {
            alert('Error de conexión.');
        } finally {
            setIsTogglingClosure(false);
        }
    };

    const [isSendingPayslips, setIsSendingPayslips] = useState(false);

    const handleSendPayslipNotifications = async (targetUserIds = null, channel = 'all') => {
        const ids = targetUserIds ? (Array.isArray(targetUserIds) ? targetUserIds : [targetUserIds]) : activeWorkersList.map(w => w.id);
        if (!ids.length) {
            alert('No hay colaboradores seleccionados.');
            return;
        }

        const payrollDataMap = {};
        processedPayroll.forEach(p => {
            if (p.user && p.user.id) {
                const totalDeds = (
                    parseFloat(p.calc?.absenceDeduction || 0) +
                    parseFloat(p.calc?.seventhDayDeduction || 0) +
                    parseFloat(p.calc?.unpaidLeaveDeduction || 0) +
                    parseFloat(p.calc?.earlyDepartureDeduction || 0) +
                    parseFloat(p.calc?.inssLaboral || 0) +
                    parseFloat(p.calc?.irDGI || 0) +
                    parseFloat(p.loanInfo?.deduction || 0)
                );
                payrollDataMap[p.user.id] = {
                    netPayable: p.netPayable,
                    scheduledPeriodPay: p.calc?.scheduledPeriodPay || '0.00',
                    basePeriodPay: p.calc?.basePeriodPay || '0.00',
                    overtimePay: p.calc?.overtimePay || '0.00',
                    overtimeHours: p.vars?.overtime || 0,
                    holidayPay: p.calc?.holidayPay || '0.00',
                    holidaysWorked: p.calc?.effectiveHolidaysWorked || 0,
                    commissions: p.vars?.commissions || 0,
                    bonuses: p.vars?.bonuses || 0,
                    grossSalary: p.calc?.grossSalary || '0.00',
                    unjustifiedCount: p.calc?.unjustifiedCount || 0,
                    absenceDeduction: p.calc?.absenceDeduction || '0.00',
                    seventhDayDeduction: p.calc?.seventhDayDeduction || '0.00',
                    unpaidLeaveCount: p.calc?.justifiedNoPayCount || 0,
                    unpaidLeaveDeduction: p.calc?.unpaidLeaveDeduction || '0.00',
                    earlyDepartureDeduction: p.calc?.earlyDepartureDeduction || '0.00',
                    deductedMinutes: p.calc?.totalDeductedMinutes || 0,
                    inssLaboral: p.calc?.inssLaboral || '0.00',
                    irDGI: p.calc?.irDGI || '0.00',
                    loanDeduction: p.loanInfo?.deduction || 0,
                    loanNotes: p.loanInfo?.notes || 'Préstamo / Adelanto',
                    totalDeductions: totalDeds.toFixed(2)
                };
            }
        });

        const channelName = channel === 'whatsapp' ? 'WhatsApp' : (channel === 'email' ? 'Correo Electrónico' : 'WhatsApp y Correo');
        const confirmMsg = `¿Deseas enviar las colillas oficiales por ${channelName} a ${ids.length} colaborador(es) para el período ${startDate} al ${endDate}?`;
        if (!confirm(confirmMsg)) return;

        setIsSendingPayslips(true);
        try {
            const res = await window.apiCall('send_payslip_notification', {
                period_start: startDate,
                period_end: endDate,
                user_ids: ids,
                channel: channel,
                payroll_data: payrollDataMap
            });
            if (res && res.success && res.dispatched_count > 0) {
                let msg = `✅ Se despacharon las colillas por ${channelName} (${res.dispatched_count} envíos confirmados).`;
                const waErr = res?.results?.find(r => r.whatsapp && !r.whatsapp.success)?.whatsapp?.error;
                const waFallback = res?.results?.find(r => r.whatsapp && r.whatsapp.is_fallback_text);
                const waSuccessTpl = res?.results?.find(r => r.whatsapp && r.whatsapp.used_template);

                if (waSuccessTpl) {
                    msg += `\n\n✨ Plantilla Meta WhatsApp entregada con éxito: "${waSuccessTpl.whatsapp.used_template}"`;
                }

                if (waErr) {
                    msg += `\n\n⚠️ NOTA SOBRE WHATSAPP:\n${waErr}`;
                } else if (waFallback) {
                    msg += `\n\n⚠️ ATENCIÓN SOBRE PLANTILLA DE META:\nMeta rechazó la plantilla por lo que se envió como texto directo de respaldo.\nDetalle Meta: ${waFallback.whatsapp.template_error || 'Comprobar nombre/parámetros en Meta'}`;
                }
                alert(msg);
            } else {
                const errMsg = res?.error || (res?.results?.[0]?.whatsapp?.error || 'No se pudieron enviar las colillas.');
                alert(`⚠️ ATENCIÓN EN ENVÍO:\n\n${errMsg}`);
            }
        } catch (e) {
            alert('Error de conexión al enviar notificaciones.');
        } finally {
            setIsSendingPayslips(false);
        }
    };

    useEffect(() => {
        loadData();
    }, [startDate, endDate]);

    const periodDaysCount = useMemo(() => {
        if (!startDate || !endDate) return 15;
        return window.getDaysDiff(startDate, endDate);
    }, [startDate, endDate]);

    const openAdjustmentModal = (u, currentVars) => {
        if (payrollClosureStatus?.closed) {
            alert("Esta planilla ya fue marcada como PAGADA y sus valores están congelados por auditoría.\n\nSi necesitas modificar horas extras, comisiones o bonos de este período, haz clic en el botón 'Reabrir' primero.");
            return;
        }
        setEditingAdjustmentUser(u);
        setAdjOvertime(currentVars.overtime || '');
        setAdjCommissions(currentVars.commissions || '');
        setAdjBonuses(currentVars.bonuses || '');
    };

    const handleSaveAdjustmentModal = async (e) => {
        e.preventDefault();
        if (!editingAdjustmentUser) return;
        const uId = editingAdjustmentUser.id;
        const updated = {
            overtime: parseFloat(adjOvertime) || 0,
            commissions: parseFloat(adjCommissions) || 0,
            bonuses: parseFloat(adjBonuses) || 0,
            holidays: (payrollVariables[uId]?.holidays) || 0
        };

        setPayrollVariables(prev => ({ ...prev, [uId]: updated }));
        setEditingAdjustmentUser(null);

        await window.apiCall('save_payroll_item', {
            user_id: uId,
            period_start: startDate,
            period_end: endDate,
            overtime_hours: updated.overtime,
            holidays_worked: updated.holidays,
            commissions: updated.commissions,
            bonuses: updated.bonuses
        });
    };

    const handleCreateLoan = async (e) => {
        e.preventDefault();
        if (!loanUserId || !loanAmount) return;
        const res = await window.apiCall('save_loan', {
            user_id: loanUserId,
            total_amount: parseFloat(loanAmount),
            total_installments: parseInt(loanInstallments),
            notes: loanNotes,
            start_date: startDate || window.getNICDate()
        });

        if (res && res.success) {
            setShowLoanModal(false);
            setLoanAmount('');
            setLoanNotes('Adelanto de Salario');
            loadData();
        }
    };

    const activeWorkersList = useMemo(() => {
        return (globalUsers || []).filter(u => u.status === 'activo');
    }, [globalUsers]);

    const processedPayroll = useMemo(() => {
        return activeWorkersList.map(u => {
            const vars = payrollVariables[u.id] || {};
            const calc = window.calculatePayrollRowAdv(u, {
                payrollPeriod: periodDaysCount > 20 ? 'mensual' : 'quincenal',
                periodDays: periodDaysCount,
                startDate,
                endDate,
                totalActiveWorkers: activeWorkersList.length,
                absences,
                logs,
                vacations,
                overtimeHours: vars.overtime || 0,
                holidaysWorkedManual: vars.holidays || 0,
                commissions: vars.commissions || 0,
                bonuses: vars.bonuses || 0,
                settings: settings || {}
            });

            // Préstamo activo
            const userLoan = activeLoans.find(l => Number(l.user_id) === Number(u.id) && l.status === 'active' && parseFloat(l.remaining_balance) > 0);
            let loanDeduction = 0;
            let loanInfo = null;

            if (userLoan) {
                const installment = parseFloat(userLoan.installment_amount);
                const remaining = parseFloat(userLoan.remaining_balance);
                loanDeduction = Math.min(installment, remaining);
                loanInfo = {
                    id: userLoan.id,
                    deduction: loanDeduction,
                    pendingAfter: Math.max(0, remaining - loanDeduction),
                    total: parseFloat(userLoan.total_amount),
                    installmentAmount: installment,
                    notes: userLoan.notes
                };
            }

            // Horas extras auditadas y aprobadas para este colaborador en el período (incluyendo arrastres post-cierre)
            const userOvertimeLogs = (allOvertimeLogs || []).filter(o => 
                Number(o.user_id) === Number(u.id) &&
                o.status === 'approved' &&
                (o.destination === 'payroll' || o.destination === 'mixed') &&
                parseFloat(o.payroll_hours || 0) > 0 &&
                (
                    (o.payroll_period_start && o.payroll_period_start === startDate) ||
                    (!o.payroll_period_start && o.date_str >= startDate && o.date_str <= endDate)
                )
            );

            const netPayable = Math.max(0, parseFloat(calc.netSalary) - loanDeduction);

            return { user: u, calc, vars, loanInfo, netPayable: netPayable.toFixed(2), userOvertimeLogs };
        });
    }, [activeWorkersList, payrollVariables, activeLoans, allOvertimeLogs, periodDaysCount, startDate, endDate, absences, logs, vacations, settings]);

    const totalsSummary = useMemo(() => {
        let gross = 0, inssLab = 0, ir = 0, net = 0, loans = 0, inssPat = 0, inatec = 0, totalCost = 0;
        processedPayroll.forEach(p => {
            gross += parseFloat(p.calc.grossSalary);
            inssLab += parseFloat(p.calc.inssLaboral);
            ir += parseFloat(p.calc.irDGI);
            net += parseFloat(p.netPayable);
            loans += p.loanInfo ? p.loanInfo.deduction : 0;
            inssPat += parseFloat(p.calc.inssPatronal);
            inatec += parseFloat(p.calc.inatecPatronal);
            totalCost += parseFloat(p.calc.totalCostEmployer);
        });
        return { gross, inssLab, ir, net, loans, inssPat, inatec, totalCost };
    }, [processedPayroll]);

    const severanceResult = useMemo(() => {
        if (!selectedSeveranceUser) return null;
        return window.calculateSeveranceNI({
            user: selectedSeveranceUser,
            hiringDate: selectedSeveranceUser.hiringDate || window.getNICDate(),
            terminationDate: sevTermDate,
            reason: sevReason,
            monthlyBaseSalary: parseFloat(selectedSeveranceUser.baseSalary || 0),
            averageVariableSalary: parseFloat(sevAvgVariable || 0),
            vacationDaysPending: parseFloat(sevVacDaysPending || 0)
        });
    }, [selectedSeveranceUser, sevTermDate, sevReason, sevAvgVariable, sevVacDaysPending]);

    const handleOpenSeveranceForUser = (u) => {
        setSelectedSeveranceUser(u);
        const vacBal = parseFloat(window.calculateVacationBalance(u, settings?.vacationRate || 2.5, vacations));
        setSevVacDaysPending(vacBal);
        setSevAvgVariable(0);
        setSevTermDate(window.getNICDate());
        setActiveTab('severance');
    };

    const handleSaveCutConfig = async (e) => {
        e.preventDefault();
        setIsSavingConfig(true);
        const res = await window.apiCall('update_settings', {
            cut_start_q1: parseInt(cutStartDayQ1),
            cut_end_q1: parseInt(cutEndDayQ1),
            cut_start_q2: parseInt(cutStartDayQ2),
            cut_end_q2: parseInt(cutEndDayQ2)
        });
        setIsSavingConfig(false);
        if (res && res.success) {
            alert("Ventanas de corte actualizadas exitosamente.");
            if (refreshData) await refreshData();
        }
    };

    const exportCSVReport = () => {
        const headers = [
            "ID", "Empleado", "Correo", "Salario Base Mensual (C$)", "Días Período", 
            "Faltas Injust.", "Días Deducidos", "Salario Período", "Horas Extras (C$)", 
            "Feriados (C$)", "Comisiones/Bonos (C$)", "Salario Bruto (C$)", 
            "Salida Anticipada (C$)", "INSS Laboral 7%", "IR DGI", "Adelantos Deducidos (C$)", "Neto a Pagar (C$)", 
            `INSS Patronal (${activeWorkersList.length >= 50 ? '22.5%' : '21.5%'})`, "INATEC 2%", "Costo Empresa (C$)"
        ];
        const rows = processedPayroll.map(p => [
            p.user.id, p.user.name, p.user.email, p.user.baseSalary || 0, periodDaysCount,
            p.calc.unjustifiedCount, p.calc.deductedDays, p.calc.basePeriodPay, p.calc.overtimePay,
            p.calc.holidayPay, p.calc.variablePay, p.calc.grossSalary,
            p.calc.earlyDepartureDeduction || 0, p.calc.inssLaboral, p.calc.irDGI, p.loanInfo ? p.loanInfo.deduction : 0, p.netPayable,
            p.calc.inssPatronal, p.calc.inatecPatronal, p.calc.totalCostEmployer
        ]);
        window.exportToCSV(`Planilla_${startDate}_al_${endDate}`, headers, rows);
    };

    const downloadBankDisbursementFile = () => {
        const cleanStr = (s) => (s || '').toString().trim().replace(/,/g, ' ');
        const cleanId = (s) => (s || '').toString().replace(/[^a-zA-Z0-9]/g, '');

        // Desinfección estricta para dispersión ACH bancaria (BAC, BANPRO, LAFISE)
        // Elimina tildes, diacríticos y caracteres no ASCII para evitar rechazos en portales bancarios
        const sanitizeForBank = (s) => {
            return (s || '')
                .toString()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .replace(/ñ/g, 'n')
                .replace(/Ñ/g, 'N')
                .replace(/[^a-zA-Z0-9\s\.\-]/g, '')
                .trim();
        };

        if (bankFormat === 'bac') {
            // BAC Credomatic Conexión Empresarial
            const debitAccount = cleanId(companyDebitAcc) || 'CUENTA_EMPRESA';
            const headers = ['Cuenta Debito', 'Tipo Cuenta Debito', 'Cuenta Credito', 'Tipo Cuenta Credito', 'Moneda', 'Monto', 'Referencia', 'Cedula', 'Beneficiario'];
            const validRows = [];
            processedPayroll.forEach(p => {
                const u = p.user;
                const accNum = u.bank_account_number || u.bankAccountNumber;
                if (!accNum) return;
                const accType = ((u.bank_account_type || u.bankAccountType || '').toLowerCase() === 'corriente') ? 'COR' : 'AHO';
                const ref = `Planilla ${startDate} al ${endDate}`;
                validRows.push([
                    debitAccount,
                    'COR',
                    cleanId(accNum),
                    accType,
                    'NIO',
                    p.netPayable,
                    sanitizeForBank(ref),
                    cleanId(u.idCard || u.id_card),
                    sanitizeForBank(u.name)
                ]);
            });

            if (validRows.length === 0) {
                alert("Ningún colaborador de la nómina tiene configurada una cuenta bancaria.");
                return;
            }

            const csvContent = [headers.join(','), ...validRows.map(r => r.join(','))].join('\r\n');
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Dispersion_BAC_${startDate}_al_${endDate}.csv`;
            a.click();
            URL.revokeObjectURL(url);
        } else if (bankFormat === 'banpro') {
            // BANPRO Promerica Formato ACH Nómina
            const headers = ['Cuenta Destino', 'Moneda', 'Monto', 'Concepto', 'Nombre Empleado', 'Cedula'];
            const validRows = [];
            processedPayroll.forEach(p => {
                const u = p.user;
                const accNum = u.bank_account_number || u.bankAccountNumber;
                if (!accNum) return;
                validRows.push([
                    cleanId(accNum),
                    'COR',
                    p.netPayable,
                    sanitizeForBank(`Pago Planilla ${startDate} al ${endDate}`),
                    sanitizeForBank(u.name),
                    cleanId(u.idCard || u.id_card)
                ]);
            });

            if (validRows.length === 0) {
                alert("Ningún colaborador de la nómina tiene configurada una cuenta bancaria.");
                return;
            }

            const txtContent = [headers.join(';'), ...validRows.map(r => r.join(';'))].join('\r\n');
            const blob = new Blob([txtContent], { type: 'text/plain;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Dispersion_BANPRO_${startDate}_al_${endDate}.txt`;
            a.click();
            URL.revokeObjectURL(url);
        } else if (bankFormat === 'lafise') {
            // LAFISE Bancentro Nómina
            const headers = ['Numero Cuenta', 'Nombre Beneficiario', 'Monto', 'Identificacion', 'Concepto'];
            const validRows = [];
            processedPayroll.forEach(p => {
                const u = p.user;
                const accNum = u.bank_account_number || u.bankAccountNumber;
                if (!accNum) return;
                validRows.push([
                    cleanId(accNum),
                    sanitizeForBank(u.name),
                    p.netPayable,
                    cleanId(u.idCard || u.id_card),
                    sanitizeForBank(`Nomina ${startDate} al ${endDate}`)
                ]);
            });

            if (validRows.length === 0) {
                alert("Ningún colaborador de la nómina tiene configurada una cuenta bancaria.");
                return;
            }

            const csvContent = [headers.join(','), ...validRows.map(r => r.join(','))].join('\r\n');
            const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Dispersion_LAFISE_${startDate}_al_${endDate}.csv`;
            a.click();
            URL.revokeObjectURL(url);
        } else {
            // Consolidado Multibanco (Excel / CSV con todos los colaboradores)
            // Se incluye BOM UTF-8 (\uFEFF) para que Microsoft Excel en Windows abra correctamente acentos y caracteres latinos
            const headers = ['ID', 'Colaborador', 'Cédula', 'Banco Destino', 'Número de Cuenta', 'Tipo de Cuenta', 'Monto Neto a Pagar (C$)', 'Modalidad de Pago'];
            const rows = processedPayroll.map(p => {
                const u = p.user;
                const accNum = u.bank_account_number || u.bankAccountNumber;
                const bank = u.bank_name || u.bankName || 'Sin banco';
                const accType = u.bank_account_type || u.bankAccountType || 'ahorro';
                const modality = accNum ? 'Transferencia Bancaria' : 'Pago Efectivo / Cheque Requerido';
                return [
                    u.id,
                    cleanStr(u.name),
                    cleanStr(u.idCard || u.id_card || 'N/A'),
                    cleanStr(bank),
                    accNum ? cleanStr(accNum) : 'SIN CUENTA',
                    accType,
                    p.netPayable,
                    modality
                ];
            });

            const csvContent = [
                headers.map(h => `"${h.replace(/"/g, '""')}"`).join(','), 
                ...rows.map(r => r.map(v => `"${String(v).replace(/"/g, '""')}"`).join(','))
            ].join('\r\n');
            const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `Planilla_Consolidado_Multibanco_${startDate}_al_${endDate}.csv`;
            a.click();
            URL.revokeObjectURL(url);
        }
    };

    const renderPayslipHtml = (item) => {
        const emp = item.user;
        const calc = item.calc;
        const vars = item.vars || {};
        const loan = item.loanInfo;
        const netPayable = item.netPayable;
        const logoHtml = settings?.logoUrl 
            ? `<img src="${settings.logoUrl}" style="max-height: 48px; margin-bottom: 6px; object-fit: contain;" />` 
            : '';

        let earningsRows = `
            <tr>
                <td style="padding: 5px 0; color: #334155;">Salario Base Quincenal (${periodDaysCount} d):</td>
                <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #0f172a;">C$ ${calc.scheduledPeriodPay || calc.basePeriodPay}</td>
            </tr>
        `;

        if (vars.overtime > 0) {
            earningsRows += `
                <tr>
                    <td style="padding: 5px 0; color: #334155;">Horas Extras (${vars.overtime}h al 100%):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #0f172a;">+ C$ ${calc.overtimePay}</td>
                </tr>
            `;
        }
        if (vars.commissions > 0) {
            earningsRows += `
                <tr>
                    <td style="padding: 5px 0; color: #334155;">Comisiones por Ventas:</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #0f172a;">+ C$ ${parseFloat(vars.commissions).toFixed(2)}</td>
                </tr>
            `;
        }
        if (vars.bonuses > 0) {
            earningsRows += `
                <tr>
                    <td style="padding: 5px 0; color: #334155;">Incentivo / Bono por Meta:</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #0f172a;">+ C$ ${parseFloat(vars.bonuses).toFixed(2)}</td>
                </tr>
            `;
        }

        const totalDevengado = (
            parseFloat(calc.scheduledPeriodPay || calc.basePeriodPay) +
            parseFloat(calc.overtimePay || 0) +
            parseFloat(calc.variablePay || 0)
        ).toFixed(2);

        let deductionRows = '';
        let sumDeductions = 0;

        if (calc.unjustifiedCount > 0) {
            deductionRows += `
                <tr>
                    <td style="padding: 5px 0; color: #dc2626;">Ausencia Injustificada (${calc.unjustifiedCount} d):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #dc2626;">- C$ ${calc.absenceDeduction}</td>
                </tr>
                <tr>
                    <td style="padding: 5px 0; color: #dc2626;">Deducción 7mo Día (Art. 64 CT):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #dc2626;">- C$ ${calc.seventhDayDeduction}</td>
                </tr>
            `;
            sumDeductions += (parseFloat(calc.absenceDeduction) + parseFloat(calc.seventhDayDeduction));
        }

        if (calc.justifiedNoPayCount > 0) {
            deductionRows += `
                <tr>
                    <td style="padding: 5px 0; color: #64748b;">Permiso Sin Goce (${calc.justifiedNoPayCount} d):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #0f172a;">- C$ ${calc.unpaidLeaveDeduction}</td>
                </tr>
            `;
            sumDeductions += parseFloat(calc.unpaidLeaveDeduction);
        }

        if (parseFloat(calc.earlyDepartureDeduction || 0) > 0) {
            const hrsText = (calc.totalDeductedMinutes >= 60) 
                ? `${(calc.totalDeductedMinutes / 60).toFixed(1)} hrs` 
                : `${calc.totalDeductedMinutes} min`;

            deductionRows += `
                <tr>
                    <td style="padding: 5px 0; color: #dc2626;">Salida Anticipada (${hrsText}):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #dc2626;">- C$ ${calc.earlyDepartureDeduction}</td>
                </tr>
            `;
            sumDeductions += parseFloat(calc.earlyDepartureDeduction);
        }

        if (parseFloat(calc.inssLaboral) > 0) {
            deductionRows += `
                <tr>
                    <td style="padding: 5px 0; color: #334155;">INSS Laboral (7.0%):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #dc2626;">- C$ ${calc.inssLaboral}</td>
                </tr>
            `;
            sumDeductions += parseFloat(calc.inssLaboral);
        }

        if (parseFloat(calc.irDGI) > 0) {
            deductionRows += `
                <tr>
                    <td style="padding: 5px 0; color: #334155;">IR DGI (Ley 822):</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #dc2626;">- C$ ${calc.irDGI}</td>
                </tr>
            `;
            sumDeductions += parseFloat(calc.irDGI);
        }

        if (loan) {
            deductionRows += `
                <tr>
                    <td style="padding: 5px 0; color: #7e22ce;">${loan.notes || 'Adelanto Salarial'}:</td>
                    <td style="padding: 5px 0; text-align: right; font-weight: 700; color: #7e22ce;">- C$ ${loan.deduction.toFixed(2)}</td>
                </tr>
            `;
            sumDeductions += loan.deduction;
        }

        if (!deductionRows) {
            deductionRows = `
                <tr>
                    <td colspan="2" style="padding: 8px 0; color: #94a3b8; font-style: italic;">Sin deducciones en este período.</td>
                </tr>
            `;
        }

        const loanNoteHtml = loan ? `
            <div style="margin-top: 8px; padding: 6px 10px; background: #faf5ff; border: 1px solid #f3e8ff; border-radius: 6px; font-size: 9px; color: #6b21a8; font-weight: 600;">
                Nota: Descuento por adelanto aplicado en este corte. Saldo pendiente restante: C$ ${loan.pendingAfter.toFixed(2)}.
            </div>
        ` : '';

        let overtimeBreakdownHtml = '';
        if (item.userOvertimeLogs && item.userOvertimeLogs.length > 0) {
            overtimeBreakdownHtml = `
                <div style="margin-top: 10px; margin-bottom: 6px; padding: 8px 10px; background-color: #fffbe6; border: 1px solid #ffe58f; border-radius: 6px;">
                    <div style="font-size: 10px; font-weight: 800; color: #78350f; margin-bottom: 4px;">
                        Bitácora Auditada de Horas Extras (${vars.overtime || 0} hrs tot.)
                    </div>
                    <table style="width: 100%; border-collapse: collapse; font-size: 9px; color: #451a03;">
                        <thead>
                            <tr style="border-bottom: 1px solid #fde68a; text-align: left; font-weight: 700;">
                                <th style="padding: 2px 0;">Fecha</th>
                                <th style="padding: 2px 0;">Motivo</th>
                                <th style="padding: 2px 0; text-align: center;">Horas</th>
                                <th style="padding: 2px 0; text-align: right;">Recargo</th>
                            </tr>
                        </thead>
                        <tbody>
                            ${item.userOvertimeLogs.map(otLog => {
                                const isRolledOver = otLog.date_str < startDate;
                                return `
                                    <tr style="border-bottom: 1px dashed #fef3c7;">
                                        <td style="padding: 2px 0; font-weight: 700;">
                                            ${otLog.date_str} ${isRolledOver ? '<span style="font-size: 8px; color: #b45309; background: #fef3c7; padding: 1px 4px; border-radius: 4px; border: 1px solid #fde68a;">(Arrastre corte anterior)</span>' : ''}
                                        </td>
                                        <td style="padding: 2px 0;">${otLog.justification || 'Reingreso Extraordinario'}</td>
                                        <td style="padding: 2px 0; text-align: center; font-weight: 700;">+${otLog.payroll_hours}h</td>
                                        <td style="padding: 2px 0; text-align: right; font-weight: 700; color: #92400e;">100% Doble</td>
                                    </tr>
                                `;
                            }).join('')}
                        </tbody>
                    </table>
                </div>
            `;
        }

        return `
            <div class="slip-page">
                <div class="container">
                    <div class="header">
                        ${logoHtml}
                        <div class="company-name">${settings?.companyName || 'EMPRESA'}</div>
                        <div class="doc-title">COMPROBANTE DE PAGO DE SALARIO</div>
                        <div class="period-info">
                            Período de Nómina: <strong>${startDate}</strong> al <strong>${endDate}</strong> (${periodDaysCount} días) • Régimen: ${calc.isCuotaFija ? 'Cuota Fija' : 'Régimen General'}
                        </div>
                    </div>

                    <table class="table-meta">
                        <tr>
                            <td>
                                <span class="meta-label">Colaborador:</span>
                                <span class="meta-value" style="font-size: 12px;">${emp.name}</span>
                            </td>
                            <td>
                                <span class="meta-label">Cargo / Puesto:</span>
                                <span class="meta-value">${emp.positionTitle || emp.role}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="meta-label">Cédula / No. INSS:</span>
                                <span class="meta-value">${emp.idCard || '---'} / ${emp.inssNumber || 'N/A'}</span>
                            </td>
                            <td>
                                <span class="meta-label">Salario Base Mensual:</span>
                                <span class="meta-value">C$ ${parseFloat(emp.baseSalary || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <span class="meta-label">Vacaciones Acumuladas:</span>
                                <span class="meta-value">${((parseFloat(emp.vacationDaysAccrued || 0) - parseFloat(emp.vacationDaysUsed || 0)) || 0).toFixed(1)} días</span>
                            </td>
                            ${(parseFloat(emp.compensatedTimeHours || emp.compensated_time_hours || 0) > 0) ? `
                            <td>
                                <span class="meta-label">Tiempo Compensado Acumulado:</span>
                                <span class="meta-value" style="color: #4338ca; font-weight: 800;">${parseFloat(emp.compensatedTimeHours || emp.compensated_time_hours || 0).toFixed(1)} hrs</span>
                            </td>
                            ` : '<td></td>'}
                        </tr>
                    </table>

                    <table class="columns-table">
                        <tr>
                            <td class="col-td">
                                <div class="col-header">Percepciones (Ingresos)</div>
                                <div class="col-content">
                                    <table class="inner-table">
                                        ${earningsRows}
                                        <tr>
                                            <td style="padding-top: 8px; border-top: 1.5px dashed #cbd5e1; font-weight: 900; font-size: 11px;">Total Devengado:</td>
                                            <td style="padding-top: 8px; border-top: 1.5px dashed #cbd5e1; text-align: right; font-weight: 900; font-size: 11px;">C$ ${totalDevengado}</td>
                                        </tr>
                                    </table>
                                    ${overtimeBreakdownHtml}
                                </div>
                            </td>
                            <td class="col-td">
                                <div class="col-header">Deducciones de Ley y Otras</div>
                                <div class="col-content">
                                    <table class="inner-table">
                                        ${deductionRows}
                                        <tr>
                                            <td style="padding-top: 8px; border-top: 1.5px dashed #cbd5e1; font-weight: 900; font-size: 11px; color: #dc2626;">Total Deducciones:</td>
                                            <td style="padding-top: 8px; border-top: 1.5px dashed #cbd5e1; text-align: right; font-weight: 900; font-size: 11px; color: #dc2626;">- C$ ${sumDeductions.toFixed(2)}</td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>

                    <table class="net-table">
                        <tr>
                            <td>
                                <span style="font-weight: 900; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; display: block; color: #0f172a;">NETO LÍQUIDO A RECIBIR:</span>
                                <span style="font-size: 9px; color: #64748b; font-weight: 600;">Monto cancelado en moneda nacional (Córdobas)</span>
                            </td>
                            <td style="text-align: right;">
                                <span style="font-size: 20px; font-weight: 900; color: #0f172a;">C$ ${netPayable}</span>
                            </td>
                        </tr>
                    </table>

                    ${loanNoteHtml}

                    <table class="signatures-table">
                        <tr>
                            <td>
                                <div class="sig-line"></div>
                                <strong style="text-transform: uppercase; font-size: 9.5px; color: #0f172a; display: block;">Elaborado por / RRHH</strong>
                                <span style="font-size: 8.5px; color: #64748b;">${settings?.companyName || 'Empresa Empleadora'}</span>
                            </td>
                            <td>
                                <div class="sig-line"></div>
                                <strong style="text-transform: uppercase; font-size: 9.5px; color: #0f172a; display: block;">Recibí Conforme</strong>
                                <span style="font-size: 8.5px; color: #64748b;">${emp.name}</span>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        `;
    };

    const getPrintablePayslipDocumentHtml = (payslipsInnerHtml, title) => `
        <!DOCTYPE html>
        <html lang="es">
        <head>
            <meta charset="utf-8">
            <title>${title}</title>
            <style>
                @page {
                    size: letter portrait;
                    margin: 10mm 14mm 10mm 14mm;
                }
                * {
                    box-sizing: border-box;
                    -webkit-print-color-adjust: exact !important;
                    print-color-adjust: exact !important;
                }
                body {
                    font-family: Arial, Helvetica, sans-serif;
                    color: #0f172a;
                    background: #ffffff;
                    margin: 0;
                    padding: 0;
                    font-size: 11px;
                    line-height: 1.4;
                }
                .slip-page {
                    page-break-after: always;
                    break-after: page;
                    padding: 8px 0 16px 0;
                }
                .slip-page:last-child {
                    page-break-after: avoid;
                    break-after: avoid;
                }
                .container {
                    width: 100%;
                    max-width: 720px;
                    margin: 0 auto;
                    border: 1.5px solid #0f172a;
                    border-radius: 12px;
                    padding: 20px 24px;
                }
                .header {
                    text-align: center;
                    border-bottom: 2px solid #0f172a;
                    padding-bottom: 10px;
                    margin-bottom: 12px;
                }
                .company-name {
                    font-size: 15px;
                    font-weight: 900;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    margin: 0;
                }
                .doc-title {
                    font-size: 11.5px;
                    font-weight: 800;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    color: #334155;
                    margin: 3px 0 2px 0;
                }
                .period-info {
                    font-size: 9.5px;
                    color: #64748b;
                    margin: 0;
                    font-weight: 600;
                }
                .table-meta {
                    width: 100%;
                    border-collapse: collapse;
                    background: #f8fafc;
                    border: 1px solid #e2e8f0;
                    border-radius: 8px;
                    margin-bottom: 12px;
                }
                .table-meta td {
                    padding: 6px 10px;
                    width: 50%;
                    vertical-align: top;
                }
                .meta-label {
                    font-size: 8.5px;
                    text-transform: uppercase;
                    font-weight: 800;
                    color: #64748b;
                    display: block;
                    margin-bottom: 2px;
                }
                .meta-value {
                    font-size: 11px;
                    font-weight: 700;
                    color: #0f172a;
                }
                .columns-table {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 10px 0;
                    margin-left: -10px;
                    margin-right: -10px;
                    margin-bottom: 12px;
                }
                .col-td {
                    width: 50%;
                    vertical-align: top;
                    border: 1px solid #cbd5e1;
                    border-radius: 8px;
                    padding: 0;
                    background: #ffffff;
                }
                .col-header {
                    background: #f1f5f9;
                    padding: 6px 10px;
                    font-size: 9px;
                    font-weight: 900;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    border-bottom: 1px solid #cbd5e1;
                    color: #1e293b;
                }
                .col-content {
                    padding: 8px 10px;
                }
                .inner-table {
                    width: 100%;
                    border-collapse: collapse;
                }
                .net-table {
                    width: 100%;
                    border-collapse: collapse;
                    background: #f8fafc;
                    border: 2px solid #0f172a;
                    border-radius: 8px;
                    margin-bottom: 10px;
                }
                .net-table td {
                    padding: 8px 12px;
                }
                .signatures-table {
                    width: 100%;
                    border-collapse: collapse;
                    margin-top: 24px;
                }
                .signatures-table td {
                    width: 50%;
                    text-align: center;
                    vertical-align: top;
                }
                .sig-line {
                    width: 160px;
                    border-top: 1px solid #0f172a;
                    margin: 0 auto 4px auto;
                }
            </style>
        </head>
        <body>
            ${payslipsInnerHtml}
        </body>
        </html>
    `;

    const printDocumentViaIframe = (fullHtml) => {
        const printIframe = document.createElement('iframe');
        printIframe.style.position = 'fixed';
        printIframe.style.right = '0';
        printIframe.style.bottom = '0';
        printIframe.style.width = '0';
        printIframe.style.height = '0';
        printIframe.style.border = '0';
        document.body.appendChild(printIframe);

        const doc = printIframe.contentWindow.document;
        doc.open();
        doc.write(fullHtml);
        doc.close();

        setTimeout(() => {
            printIframe.contentWindow.focus();
            printIframe.contentWindow.print();
            setTimeout(() => {
                if (document.body.contains(printIframe)) {
                    document.body.removeChild(printIframe);
                }
            }, 1000);
        }, 400);
    };

    const handlePrintBatchPayslips = () => {
        if (!processedPayroll || processedPayroll.length === 0) {
            alert("No hay colaboradores calculados en este período.");
            return;
        }
        const payslipsHtml = processedPayroll.map(item => renderPayslipHtml(item)).join('\n');
        const batchFileName = `COLILLAS-EN-BLOQUE-${startDate}-al-${endDate}`;
        printDocumentViaIframe(getPrintablePayslipDocumentHtml(payslipsHtml, batchFileName));
    };

    return (
        <div className="space-y-6 fade-in font-sans">
            {/* ENCABEZADO Y TABS */}
            <div className="bg-white p-5 sm:p-6 rounded-2xl shadow-xs border border-slate-200/80 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h2 className="text-xl font-bold text-slate-900 tracking-tight">Centro de Nómina y Planilla</h2>
                    <p className="text-slate-500 font-medium text-xs mt-0.5">
                        Cálculo quincenal, retenciones de ley (INSS, IR), horas extras y adelantos
                    </p>
                </div>

                <div className="flex bg-slate-100 p-1 rounded-xl border border-slate-200/60 overflow-x-auto max-w-full no-scrollbar">
                    <button onClick={() => setActiveTab('payroll')} className={`px-3.5 py-2 rounded-lg text-xs font-semibold transition-all whitespace-nowrap cursor-pointer ${activeTab === 'payroll' ? 'bg-white text-slate-900 shadow-xs font-bold' : 'text-slate-600 hover:text-slate-900'}`}>Nómina en Curso</button>
                    <button onClick={() => setActiveTab('loans')} className={`px-3.5 py-2 rounded-lg text-xs font-semibold transition-all whitespace-nowrap cursor-pointer ${activeTab === 'loans' ? 'bg-white text-slate-900 shadow-xs font-bold' : 'text-slate-600 hover:text-slate-900'}`}>Adelantos & Préstamos ({activeLoans.filter(l=>l.status==='active').length})</button>
                    <button onClick={() => setActiveTab('severance')} className={`px-3.5 py-2 rounded-lg text-xs font-semibold transition-all whitespace-nowrap cursor-pointer ${activeTab === 'severance' ? 'bg-white text-slate-900 shadow-xs font-bold' : 'text-slate-600 hover:text-slate-900'}`}>Finiquitos (Art. 45)</button>
                    <button onClick={() => setActiveTab('cut_config')} className={`px-3.5 py-2 rounded-lg text-xs font-semibold transition-all whitespace-nowrap cursor-pointer ${activeTab === 'cut_config' ? 'bg-white text-slate-900 shadow-xs font-bold' : 'text-slate-600 hover:text-slate-900'}`}>Ventana de Cortes</button>
                </div>
            </div>

            {/* TAB 1: VISTA NÓMINA */}
            {activeTab === 'payroll' && (
                <div className="space-y-6">
                    {/* BARRA DE FILTROS Y ACCIONES UNIFICADA */}
                    <div className="bg-white p-4 sm:p-5 rounded-2xl shadow-xs border border-slate-200/80 space-y-4">
                        <div className="flex flex-wrap items-center justify-between gap-3">
                            {/* PRESETS */}
                            <div className="flex flex-wrap items-center gap-1.5">
                                <button onClick={() => applyPeriodPreset('today_accumulated')} className={`px-3 py-1.5 rounded-xl font-bold text-xs transition-all cursor-pointer ${periodFilter === 'today_accumulated' ? 'bg-slate-900 text-white shadow-xs' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'}`}>Acumulado a Hoy</button>
                                <button onClick={() => applyPeriodPreset('current_fortnight')} className={`px-3 py-1.5 rounded-xl font-bold text-xs transition-all cursor-pointer ${periodFilter === 'current_fortnight' ? 'bg-slate-900 text-white shadow-xs' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'}`}>Quincena Actual</button>
                                <button onClick={() => applyPeriodPreset('last_fortnight')} className={`px-3 py-1.5 rounded-xl font-bold text-xs transition-all cursor-pointer ${periodFilter === 'last_fortnight' ? 'bg-slate-900 text-white shadow-xs' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'}`}>Quincena Pasada</button>
                                <button onClick={() => applyPeriodPreset('current_month')} className={`px-3 py-1.5 rounded-xl font-bold text-xs transition-all cursor-pointer ${periodFilter === 'current_month' ? 'bg-slate-900 text-white shadow-xs' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'}`}>Mes Actual</button>
                                <button onClick={() => applyPeriodPreset('last_month')} className={`px-3 py-1.5 rounded-xl font-bold text-xs transition-all cursor-pointer ${periodFilter === 'last_month' ? 'bg-slate-900 text-white shadow-xs' : 'bg-slate-50 text-slate-600 hover:bg-slate-100 border border-slate-200'}`}>Mes Pasado</button>
                            </div>

                            {/* ACCIONES UNIFICADAS */}
                            <div className="flex items-center gap-2 relative">
                                <button onClick={() => setShowLoanModal(true)} className="px-3.5 py-2 bg-purple-50 text-purple-700 hover:bg-purple-100 border border-purple-200 rounded-xl font-bold text-xs transition-all shadow-xs flex items-center gap-1.5 cursor-pointer">
                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"/></svg>
                                    <span>+ Adelanto</span>
                                </button>

                                {/* MENÚ DESPLEGABLE DE REPORTES Y DESCARGAS */}
                                <div className="relative">
                                    <button 
                                        onClick={() => setShowExportMenu(!showExportMenu)} 
                                        className="px-3.5 py-2 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs shadow-xs transition-all cursor-pointer flex items-center gap-2"
                                    >
                                        <svg className="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                        <span>Exportar & Reportes</span>
                                        <svg className={`w-3.5 h-3.5 transition-transform ${showExportMenu ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7"/></svg>
                                    </button>

                                    {showExportMenu && (
                                        <div className="absolute right-0 mt-2 w-56 bg-white rounded-2xl shadow-xl border border-slate-200 py-2 z-50 space-y-1 fade-in">
                                            <button 
                                                onClick={() => { setShowBankModal(true); setShowExportMenu(false); }}
                                                className="w-full text-left px-4 py-2.5 hover:bg-slate-50 text-xs font-semibold text-slate-700 flex items-center gap-2.5 cursor-pointer"
                                            >
                                                <span className="p-1 bg-slate-100 text-slate-700 rounded-lg"><UiIconAdmin name="building" className="w-3.5 h-3.5" /></span>
                                                <span>Dispersión Bancaria Masiva</span>
                                            </button>
                                            <button 
                                                onClick={() => { exportCSVReport(); setShowExportMenu(false); }}
                                                className="w-full text-left px-4 py-2.5 hover:bg-slate-50 text-xs font-semibold text-slate-700 flex items-center gap-2.5 cursor-pointer"
                                            >
                                                <span className="p-1 bg-slate-100 text-slate-700 rounded-lg"><UiIconAdmin name="file-text" className="w-3.5 h-3.5" /></span>
                                                <span>Exportar Planilla (CSV)</span>
                                            </button>
                                            <button 
                                                onClick={() => { handlePrintBatchPayslips(); setShowExportMenu(false); }}
                                                className="w-full text-left px-4 py-2.5 hover:bg-slate-50 text-xs font-semibold text-slate-700 flex items-center gap-2.5 cursor-pointer"
                                            >
                                                <span className="p-1 bg-slate-100 text-slate-700 rounded-lg"><UiIconAdmin name="contracts" className="w-3.5 h-3.5" /></span>
                                                <span>Colillas en Bloque (PDF)</span>
                                            </button>
                                            <button 
                                                onClick={() => { window.print(); setShowExportMenu(false); }}
                                                className="w-full text-left px-4 py-2.5 hover:bg-slate-50 text-xs font-semibold text-slate-700 flex items-center gap-2.5 cursor-pointer"
                                            >
                                                <span className="p-1 bg-slate-100 text-slate-700 rounded-lg"><UiIconAdmin name="printer" className="w-3.5 h-3.5" /></span>
                                                <span>Imprimir Tabla Resumen</span>
                                            </button>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>

                        {/* FECHAS EVALUADAS */}
                        <div className="flex flex-wrap items-center justify-between gap-3 pt-2 border-t border-slate-100 text-xs">
                            <div className="flex items-center gap-2 flex-wrap">
                                <span className="text-[10px] font-black uppercase text-slate-400">Ciclo Evaluado:</span>
                                <input type="date" value={startDate} onChange={e => { setStartDate(e.target.value); setPeriodFilter('custom'); }} className="p-2 bg-slate-50 border rounded-xl font-bold text-xs outline-none" />
                                <span className="text-xs font-bold text-slate-400">al</span>
                                <input type="date" value={endDate} onChange={e => { setEndDate(e.target.value); setPeriodFilter('custom'); }} className="p-2 bg-slate-50 border rounded-xl font-bold text-xs outline-none" />
                                <span className="text-xs font-bold text-slate-900 bg-slate-100 border border-slate-200 px-3 py-1 rounded-xl">
                                    {periodDaysCount} Día(s) Programados
                                </span>
                            </div>
                        </div>
                    </div>

                    {/* DETALLE Y ESTADO POR QUINCENAS AL FILTRAR POR MES O ACUMULADO */}
                    {periodDaysCount > 15 && (
                        <div className="bg-slate-50 border border-slate-200/90 rounded-2xl p-3.5 sm:p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 shadow-2xs">
                            <div className="flex items-center gap-2">
                                <svg className="w-4 h-4 text-slate-700" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                <span className="text-xs font-black uppercase tracking-wider text-slate-700">Estado Quincenal del Mes Evaluado:</span>
                            </div>
                            <div className="flex items-center gap-2 flex-wrap w-full sm:w-auto">
                                {(() => {
                                    const dateParts = (startDate || '').split('-').map(Number);
                                    if (dateParts.length < 2) return null;
                                    const y = dateParts[0];
                                    const m = dateParts[1];
                                    const lastDay = new Date(y, m, 0).getDate();
                                    const q1Start = `${y}-${String(m).padStart(2,'0')}-01`;
                                    const q1End = `${y}-${String(m).padStart(2,'0')}-15`;
                                    const q2Start = `${y}-${String(m).padStart(2,'0')}-16`;
                                    const q2End = `${y}-${String(m).padStart(2,'0')}-${lastDay}`;

                                    const q1Closed = payrollClosureStatus?.sub_closures?.some(c => c.period_start === q1Start && c.status === 'paid');
                                    const q2Closed = payrollClosureStatus?.sub_closures?.some(c => c.period_start === q2Start && c.status === 'paid');

                                    return (
                                        <>
                                            <button
                                                type="button"
                                                onClick={() => { setStartDate(q1Start); setEndDate(q1End); setPeriodFilter('custom'); }}
                                                className={`px-3 py-1.5 rounded-xl text-xs font-bold border transition-all cursor-pointer flex items-center gap-1.5 active:scale-95 ${
                                                    q1Closed 
                                                        ? 'bg-emerald-100 text-emerald-900 border-emerald-300 hover:bg-emerald-200' 
                                                        : 'bg-amber-100 text-amber-900 border-amber-300 hover:bg-amber-200'
                                                }`}
                                                title="Haz clic para ver y gestionar la 1ª Quincena"
                                            >
                                                <span>1ª Quincena (01/15): {q1Closed ? 'Pagada' : 'Borrador'}</span>
                                            </button>
                                            <button
                                                type="button"
                                                onClick={() => { setStartDate(q2Start); setEndDate(q2End); setPeriodFilter('custom'); }}
                                                className={`px-3 py-1.5 rounded-xl text-xs font-bold border transition-all cursor-pointer flex items-center gap-1.5 active:scale-95 ${
                                                    q2Closed 
                                                        ? 'bg-emerald-100 text-emerald-900 border-emerald-300 hover:bg-emerald-200' 
                                                        : 'bg-amber-100 text-amber-900 border-amber-300 hover:bg-amber-200'
                                                }`}
                                                title="Haz clic para ver y gestionar la 2ª Quincena"
                                            >
                                                <span>2ª Quincena (16/30): {q2Closed ? 'Pagada' : 'Borrador'}</span>
                                            </button>
                                        </>
                                    );
                                })()}
                            </div>
                        </div>
                    )}

                    {/* BANNER DE ESTADO DE CIERRE Y PUBLICACION DE COLILLAS */}
                    <div className={`p-4 sm:p-5 rounded-2xl border transition-all flex flex-col md:flex-row items-start md:items-center justify-between gap-4 ${
                        payrollClosureStatus?.closed 
                            ? 'bg-emerald-50/80 border-emerald-200 text-emerald-950' 
                            : (payrollClosureStatus?.isPartial 
                                ? 'bg-indigo-50/80 border-indigo-200 text-indigo-950'
                                : 'bg-amber-50/80 border-amber-200 text-amber-950')
                    }`}>
                        <div className="flex items-center gap-3.5">
                            <div className={`w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 ${
                                payrollClosureStatus?.closed 
                                    ? 'bg-emerald-600 text-white shadow-xs' 
                                    : (payrollClosureStatus?.isPartial ? 'bg-indigo-600 text-white shadow-xs' : 'bg-amber-500 text-white shadow-xs')
                            }`}>
                                {payrollClosureStatus?.closed ? (
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                ) : (payrollClosureStatus?.isPartial ? (
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                ) : (
                                    <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                                ))}
                            </div>
                            <div>
                                <div className="flex items-center gap-2">
                                    <h4 className="text-sm font-bold tracking-tight">
                                        {payrollClosureStatus?.closed 
                                            ? 'Planilla Pagada & Publicada (Colillas Visibles)' 
                                            : (payrollClosureStatus?.isPartial 
                                                ? `Pago Parcial en Proceso (${payrollClosureStatus?.paid_count || 0} de ${payrollClosureStatus?.total_active_users || 0} Colaboradores)` 
                                                : 'Planilla en Preparacion (Modo Borrador)')}
                                    </h4>
                                    <span className={`px-2 py-0.5 rounded-full text-[10px] font-extrabold uppercase tracking-wide ${
                                        payrollClosureStatus?.closed 
                                            ? 'bg-emerald-200/60 text-emerald-900' 
                                            : (payrollClosureStatus?.isPartial ? 'bg-indigo-200/60 text-indigo-900' : 'bg-amber-200/60 text-amber-900')
                                    }`}>
                                        {payrollClosureStatus?.closed ? 'Oficialmente Pagada' : (payrollClosureStatus?.isPartial ? 'Pago Parcial' : 'Borrador Interno')}
                                    </span>
                                </div>
                                <p className="text-xs font-medium opacity-80 mt-0.5">
                                    {payrollClosureStatus?.closed 
                                        ? `Marcada como pagada por ${payrollClosureStatus.closure?.closed_by_name || 'Administración'} el ${payrollClosureStatus.closure?.paid_at ? new Date(payrollClosureStatus.closure.paid_at).toLocaleDateString() : 'reciente'}. Los colaboradores pueden ver y descargar su colilla oficial en su portal.` 
                                        : (payrollClosureStatus?.isPartial
                                            ? `Hay ${payrollClosureStatus?.paid_count} colaboradores pagados y ${payrollClosureStatus?.pending_count} pendientes. Solo los colaboradores pagados pueden ver su colilla.`
                                            : 'Las colillas de este período están protegidas y ocultas para los colaboradores en su autoservicio hasta que confirmes el pago de nómina.')}
                                </p>
                                {payrollClosureStatus?.closed && (
                                    <div className="mt-2 text-xs font-semibold text-emerald-900 bg-emerald-100/70 border border-emerald-300/80 px-3 py-1.5 rounded-xl inline-flex items-center gap-2">
                                        <svg className="w-4 h-4 text-emerald-700 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                                        <span><strong>Registro de Auditoría de Pago:</strong> {payrollClosureStatus.closure?.notes || 'Efectivo / Caja Chica'}</span>
                                    </div>
                                )}
                            </div>
                        </div>

                        <div className="flex items-center gap-2 self-stretch md:self-auto justify-end flex-wrap">
                            {!payrollClosureStatus?.closed ? (
                                <>
                                    <button 
                                        onClick={() => handleBulkUserPayment('paid')}
                                        disabled={isTogglingClosure}
                                        className="px-3.5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-bold text-xs transition-all shadow-xs flex items-center justify-center gap-1.5 cursor-pointer disabled:opacity-50"
                                        title="Marcar como pagados a todos los colaboradores activos de esta quincena"
                                    >
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                        <span>Marcar Todos Pagados</span>
                                    </button>
                                    <button 
                                        onClick={() => handleBulkUserPayment('pending')}
                                        disabled={isTogglingClosure}
                                        className="px-3.5 py-2.5 bg-white hover:bg-slate-50 text-amber-800 border border-amber-300 rounded-xl font-bold text-xs transition-all shadow-xs flex items-center justify-center gap-1.5 cursor-pointer disabled:opacity-50"
                                        title="Marcar como pendientes de pago a todos los colaboradores"
                                    >
                                        <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        <span>Marcar Pendientes</span>
                                    </button>
                                </>
                            ) : (
                                <div className="px-3.5 py-2.5 bg-emerald-100 text-emerald-900 border border-emerald-300 rounded-xl font-black text-xs flex items-center gap-1.5 shadow-xs">
                                    <svg className="w-4 h-4 text-emerald-700" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
                                    <span>Planilla Bloqueada</span>
                                </div>
                            )}

                            <button 
                                onClick={() => handleSendPayslipNotifications(null, 'all')}
                                disabled={isSendingPayslips}
                                className="px-3.5 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold text-xs transition-all shadow-xs flex items-center justify-center gap-1.5 cursor-pointer disabled:opacity-50"
                                title="Enviar colillas desglosadas por WhatsApp y Correo a todos los colaboradores"
                            >
                                <svg className="w-4 h-4 text-emerald-400" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                <span>{isSendingPayslips ? 'Despachando...' : 'Enviar Colillas'}</span>
                            </button>

                            <button 
                                onClick={() => setShowClosureAuditModal(true)}
                                className="px-3.5 py-2.5 bg-indigo-50 hover:bg-indigo-100 text-indigo-800 border border-indigo-200 rounded-xl font-bold text-xs transition-all shadow-xs flex items-center justify-center gap-1.5 cursor-pointer"
                                title="Ver historial y auditoría de cuentas utilizadas en cierres pasados"
                            >
                                <svg className="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                                <span>Auditoría de Cierres</span>
                            </button>

                            {payrollClosureStatus?.closed && (
                                <button 
                                    onClick={() => handleTogglePayrollClosure(false)}
                                    disabled={isTogglingClosure}
                                    className="px-3.5 py-2.5 bg-white hover:bg-rose-50 text-rose-700 border border-rose-200 rounded-xl font-bold text-xs transition-all shadow-xs flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
                                    title="Desproteger y regresar a estado borrador (Requiere motivo de auditoría)"
                                >
                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/></svg>
                                    <span>{isTogglingClosure ? 'Procesando...' : 'Reabrir Planilla'}</span>
                                </button>
                            )}
                        </div>
                    </div>

                    {/* HERO KPI CARDS */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
                        <div className="bg-white p-4 sm:p-6 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                            <div className="absolute top-0 right-0 w-1.5 h-full bg-slate-900"></div>
                            <span className="text-[9px] font-black uppercase text-slate-400 tracking-wider block">Ingresos Brutos (TIG)</span>
                            <h4 className="text-xl sm:text-2xl font-black text-slate-900 mt-1 truncate">
                                {isLoadingData ? (
                                    <span className="inline-block w-32 h-7 bg-slate-200 animate-pulse rounded-md mt-0.5"></span>
                                ) : (
                                    `C$ ${totalsSummary.gross.toLocaleString('en-US', { minimumFractionDigits: 2 })}`
                                )}
                            </h4>
                            <p className="text-[9px] text-slate-400 font-bold mt-1">Base + Extras + Comisiones</p>
                        </div>

                        <div className="bg-white p-4 sm:p-6 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                            <div className="absolute top-0 right-0 w-1.5 h-full bg-red-500"></div>
                            <span className="text-[9px] font-black uppercase text-red-500 tracking-wider block">Retenciones de Ley</span>
                            <h4 className="text-xl sm:text-2xl font-black text-red-600 mt-1 truncate">
                                {isLoadingData ? (
                                    <span className="inline-block w-32 h-7 bg-slate-200 animate-pulse rounded-md mt-0.5"></span>
                                ) : (
                                    `- C$ ${(totalsSummary.inssLab + totalsSummary.ir).toLocaleString('en-US', { minimumFractionDigits: 2 })}`
                                )}
                            </h4>
                            <p className="text-[9px] text-slate-400 font-bold mt-1">INSS 7% (C$ {totalsSummary.inssLab.toFixed(0)}) + IR DGI</p>
                        </div>

                        <div className="bg-white p-4 sm:p-6 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden bg-gradient-to-br from-emerald-50/30 via-white to-white">
                            <div className="absolute top-0 right-0 w-1.5 h-full bg-emerald-500"></div>
                            <span className="text-[9px] font-black uppercase text-emerald-600 tracking-wider block">Total Neto a Desembolsar</span>
                            <h4 className="text-xl sm:text-2xl font-black text-emerald-600 mt-1 truncate">
                                {isLoadingData ? (
                                    <span className="inline-block w-32 h-7 bg-emerald-200/60 animate-pulse rounded-md mt-0.5"></span>
                                ) : (
                                    `C$ ${totalsSummary.net.toLocaleString('en-US', { minimumFractionDigits: 2 })}`
                                )}
                            </h4>
                            {totalsSummary.loans > 0 ? (
                                <p className="text-[9px] text-purple-600 font-bold mt-1">Deducción de adelantos: -C$ {totalsSummary.loans.toFixed(2)}</p>
                            ) : (
                                <p className="text-[9px] text-slate-400 font-medium mt-1">Sin deducciones de adelanto</p>
                            )}
                        </div>

                        <div className="bg-white p-4 sm:p-6 rounded-2xl border border-slate-200/80 shadow-xs relative overflow-hidden">
                            <div className="absolute top-0 right-0 w-1.5 h-full bg-indigo-500"></div>
                            <span className="text-[9px] font-black uppercase text-indigo-600 tracking-wider block">Costo Patronal Total</span>
                            <h4 className="text-xl sm:text-2xl font-black text-indigo-600 mt-1 truncate">
                                {isLoadingData ? (
                                    <span className="inline-block w-32 h-7 bg-slate-200 animate-pulse rounded-md mt-0.5"></span>
                                ) : (
                                    `C$ ${totalsSummary.totalCost.toLocaleString('en-US', { minimumFractionDigits: 2 })}`
                                )}
                            </h4>
                            <p className="text-[9px] text-slate-400 font-medium mt-1">INSS ({activeWorkersList.length >= 50 ? '22.5%' : '21.5%'}) + INATEC 2%</p>
                        </div>
                    </div>

                    {/* LISTA ESTRUCTURADA DE COLABORADORES (GRID DE NÓMINA) */}
                    <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
                        <div className="overflow-x-auto">
                            <table className="w-full text-left border-collapse">
                                <thead>
                                    <tr className="bg-slate-50/80 border-b border-slate-200/80 text-[10px] font-black uppercase text-slate-400 tracking-wider">
                                        <th className="p-4">Colaborador</th>
                                        <th className="p-4">Asistencia & Séptimo Día</th>
                                        <th className="p-4">Variables & Préstamos</th>
                                        <th className="p-4">Estado de Pago</th>
                                        <th className="p-4 text-right">Neto a Recibir</th>
                                        <th className="p-4 text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-100 text-xs font-sans">
                                    {isLoadingData ? (
                                        [1, 2, 3].map((n) => (
                                            <tr key={n} className="animate-pulse">
                                                <td className="p-4"><div className="w-36 h-4 bg-slate-200 rounded"></div></td>
                                                <td className="p-4"><div className="w-24 h-4 bg-slate-200 rounded"></div></td>
                                                <td className="p-4"><div className="w-28 h-4 bg-slate-200 rounded"></div></td>
                                                <td className="p-4"><div className="w-20 h-4 bg-slate-200 rounded"></div></td>
                                                <td className="p-4 text-right"><div className="w-20 h-4 bg-slate-200 rounded ml-auto"></div></td>
                                                <td className="p-4 text-center"><div className="w-16 h-4 bg-slate-200 rounded mx-auto"></div></td>
                                            </tr>
                                        ))
                                    ) : (
                                        processedPayroll.map(({ user: u, calc, vars, loanInfo, netPayable, userOvertimeLogs }) => (
                                        <tr key={u.id} className="hover:bg-slate-50/60 transition-colors">
                                            {/* COLABORADOR */}
                                            <td className="p-4 min-w-[220px]">
                                                <div className="flex items-center gap-3">
                                                    {u.avatarUrl ? (
                                                        <img src={u.avatarUrl} alt={u.name} className="w-10 h-10 rounded-xl object-cover border border-slate-200 shadow-2xs flex-shrink-0" />
                                                    ) : (
                                                        <div className="w-10 h-10 rounded-xl bg-slate-100 text-slate-700 font-bold text-sm flex items-center justify-center border border-slate-200 shadow-2xs flex-shrink-0">
                                                            {u.name ? u.name[0].toUpperCase() : 'U'}
                                                        </div>
                                                    )}
                                                    <div>
                                                        <h4 className="font-bold text-slate-900 text-xs leading-snug">{u.name}</h4>
                                                        <p className="text-[10px] text-slate-400 font-medium">@{u.alias} • {u.positionTitle || u.role}</p>
                                                        <span className="text-[10px] font-bold text-slate-500">
                                                            Base: C$ {parseFloat(u.baseSalary || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}
                                                        </span>
                                                    </div>
                                                </div>
                                            </td>

                                            {/* ASISTENCIA */}
                                            <td className="p-4 min-w-[190px]">
                                                <button 
                                                    onClick={() => setCalendarModalUser({ user: u, calc })} 
                                                    className="text-left px-3 py-1.5 rounded-xl border border-slate-200/80 transition-all cursor-pointer bg-slate-50 hover:bg-slate-100 block w-full"
                                                >
                                                    {calc.deductedDays > 0 ? (
                                                        <div>
                                                            <span className="inline-flex items-center gap-1.5 text-xs font-bold text-red-600">
                                                                <span className="w-2 h-2 rounded-full bg-red-500 flex-shrink-0"></span>
                                                                {calc.unjustifiedCount} falta(s)
                                                            </span>
                                                            <span className="text-[10px] text-red-500 block font-medium">(-{calc.deductedDays}d Art. 64)</span>
                                                        </div>
                                                    ) : (
                                                        <div>
                                                            <span className="inline-flex items-center gap-1.5 text-xs font-bold text-emerald-600">
                                                                <span className="w-2 h-2 rounded-full bg-emerald-500 flex-shrink-0"></span>
                                                                {calc.effectiveWorkedDays}d efectivos
                                                            </span>
                                                            <span className="text-[10px] text-emerald-600 block font-medium">Ciclo completo</span>
                                                        </div>
                                                    )}
                                                </button>
                                            </td>

                                            {/* VARIABLES */}
                                            <td className="p-4 min-w-[200px]">
                                                <div className="flex items-center gap-1.5 flex-wrap">
                                                    <div className="relative group inline-block">
                                                        <button 
                                                            onClick={() => openAdjustmentModal(u, vars)}
                                                            className={`px-2.5 py-1 rounded-xl text-[11px] font-extrabold border transition-all cursor-pointer ${
                                                                (vars.overtime > 0 || vars.commissions > 0 || vars.bonuses > 0)
                                                                    ? 'bg-amber-50 text-amber-900 border-amber-300 hover:bg-amber-100' 
                                                                    : 'bg-slate-50 text-slate-600 border-slate-200 hover:bg-indigo-50 hover:text-indigo-600'
                                                            }`}
                                                        >
                                                            {(vars.overtime > 0 || vars.commissions > 0 || vars.bonuses > 0) ? (
                                                                `HE: ${vars.overtime||0}h • Com: C$${vars.commissions||0}`
                                                            ) : (
                                                                "+ Extras / Comisiones"
                                                            )}
                                                        </button>

                                                        {/* TOOLTIP DE MICRO-INTERACCIÓN ESTILIZADO */}
                                                        <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 hidden group-hover:flex flex-col w-64 p-3 bg-slate-900 text-white rounded-2xl shadow-2xl text-[11px] z-50 pointer-events-none transition-all duration-200 border border-slate-700/80">
                                                            <div className="flex items-center justify-between border-b border-slate-700/60 pb-1.5 mb-1.5">
                                                                <span className="font-black text-amber-400 text-[10px] uppercase tracking-wider">Desglose de Extras & Variables</span>
                                                                <span className="text-[9px] text-slate-400 font-bold">Clic para editar</span>
                                                            </div>
                                                            {(vars.overtime > 0 || vars.commissions > 0 || vars.bonuses > 0) ? (
                                                                <div className="space-y-1">
                                                                    <div className="flex justify-between items-center text-slate-200">
                                                                        <span>Horas Extras ({vars.overtime || 0} hrs):</span>
                                                                        <span className="font-bold text-amber-300">C$ {parseFloat(calc.overtimePay || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                                                                    </div>
                                                                    {vars.commissions > 0 && (
                                                                        <div className="flex justify-between items-center text-slate-200">
                                                                            <span>Comisiones:</span>
                                                                            <span className="font-bold text-emerald-400">C$ {parseFloat(vars.commissions || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                                                                        </div>
                                                                    )}
                                                                    {vars.bonuses > 0 && (
                                                                        <div className="flex justify-between items-center text-slate-200">
                                                                            <span>Bonos / Incentivos:</span>
                                                                            <span className="font-bold text-indigo-300">C$ {parseFloat(vars.bonuses || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                                                                        </div>
                                                                    )}
                                                                    <div className="border-t border-slate-700/60 pt-1.5 mt-1.5 flex justify-between items-center font-black text-white text-[11px]">
                                                                        <span>Total Percepciones Extra:</span>
                                                                        <span className="text-emerald-400">C$ {(parseFloat(calc.overtimePay || 0) + parseFloat(vars.commissions || 0) + parseFloat(vars.bonuses || 0)).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                                                                    </div>
                                                                </div>
                                                            ) : (
                                                                <p className="text-[10px] text-slate-300 leading-snug">
                                                                    Sin variables registradas en este período. Haz clic para asignar Horas Extras, Comisiones o Bonos a este colaborador.
                                                                </p>
                                                            )}
                                                            <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-slate-900"></div>
                                                        </div>
                                                    </div>

                                                    {loanInfo && (
                                                        <span className="px-2 py-0.5 bg-purple-50 text-purple-700 border border-purple-200 rounded-lg text-[10px] font-bold">
                                                            Adelanto: -C$ {loanInfo.deduction}
                                                        </span>
                                                    )}
                                                </div>
                                            </td>

                                            {/* ESTADO PAGO */}
                                            <td className="p-4">
                                                {(() => {
                                                    const itemPayment = payrollClosureStatus?.item_payments?.[u.id];
                                                    const isUserPaid = itemPayment 
                                                        ? (itemPayment.status === 'paid') 
                                                        : (payrollClosureStatus?.closed && !payrollClosureStatus?.pending_user_ids?.includes(u.id));
                                                    
                                                    return isUserPaid ? (
                                                        <button 
                                                            onClick={() => handleToggleUserPayment(u.id, 'paid')}
                                                            disabled={isTogglingClosure}
                                                            className="px-2.5 py-1 bg-emerald-50 hover:bg-emerald-100 text-emerald-800 border border-emerald-300 rounded-xl text-[10px] font-black uppercase tracking-wide flex items-center gap-1 transition-all cursor-pointer disabled:opacity-50"
                                                        >
                                                            <svg className="w-3 h-3 text-emerald-600" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                                            <span>Pagado</span>
                                                        </button>
                                                    ) : (
                                                        <button 
                                                            onClick={() => handleToggleUserPayment(u.id, 'pending')}
                                                            disabled={isTogglingClosure}
                                                            className="px-2.5 py-1 bg-amber-50 hover:bg-amber-100 text-amber-900 border border-amber-300 rounded-xl text-[10px] font-black uppercase tracking-wide flex items-center gap-1 transition-all cursor-pointer disabled:opacity-50"
                                                        >
                                                            <svg className="w-3 h-3 text-amber-600" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                                            <span>Pendiente</span>
                                                        </button>
                                                    );
                                                })()}
                                            </td>

                                            {/* NETO */}
                                            <td className="p-4 text-right whitespace-nowrap">
                                                <h3 className="text-sm font-black text-emerald-600 leading-tight">C$ {netPayable}</h3>
                                                <span className="text-[10px] text-slate-400 font-semibold block">Bruto: C$ {calc.grossSalary}</span>
                                            </td>

                                            {/* ACCIONES */}
                                            <td className="p-4 text-center whitespace-nowrap">
                                                <div className="flex items-center justify-center gap-1.5">
                                                    <button 
                                                        onClick={() => handleSendPayslipNotifications(u.id, 'all')}
                                                        disabled={isSendingPayslips}
                                                        className="p-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 rounded-xl transition-all cursor-pointer disabled:opacity-50"
                                                        title="Enviar colilla por WhatsApp/Correo"
                                                    >
                                                        <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981z"/></svg>
                                                    </button>
                                                    <button 
                                                        onClick={() => setSelectedDetailEmployee({ user: u, calc, vars, loanInfo, netPayable, userOvertimeLogs })}
                                                        className="px-3 py-1.5 bg-slate-900 hover:bg-black text-white rounded-xl text-[11px] font-extrabold uppercase tracking-wide transition-all shadow-2xs cursor-pointer"
                                                    >
                                                        Ver Colilla
                                                    </button>
                                                    <button 
                                                        onClick={() => handleOpenSeveranceForUser(u)} 
                                                        className="p-1.5 bg-slate-50 hover:bg-indigo-50 text-slate-400 hover:text-indigo-600 border border-slate-200 rounded-xl transition-all cursor-pointer"
                                                        title="Calcular finiquito"
                                                    >
                                                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 00-2 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    )))}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            )}

            {/* TAB 2: PRÉSTAMOS Y ADELANTOS */}
            {activeTab === 'loans' && (
                <div className="bg-white p-6 sm:p-8 rounded-2xl shadow-xs border border-slate-200/80 space-y-6">
                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 border-b border-slate-100 pb-4">
                        <div>
                            <h3 className="font-bold text-slate-900 text-lg">Control de Adelantos y Préstamos</h3>
                            <p className="text-xs text-slate-500 font-medium mt-0.5">Deducciones quincenales amortizadas automáticamente en nómina.</p>
                        </div>
                        <button onClick={() => setShowLoanModal(true)} className="px-4 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-bold text-xs shadow-xs transition-all cursor-pointer">
                            + Registrar Nuevo Adelanto
                        </button>
                    </div>

                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                        {activeLoans.length === 0 ? (
                            <div className="col-span-full py-12 text-center text-slate-400 font-medium text-xs">
                                No hay préstamos ni adelantos activos registrados.
                            </div>
                        ) : (
                            activeLoans.map(l => {
                                const total = parseFloat(l.total_amount || 0);
                                const rem = parseFloat(l.remaining_balance || 0);
                                const paid = Math.max(0, total - rem);
                                const pct = total > 0 ? Math.round((paid / total) * 100) : 100;

                                return (
                                    <div key={l.id} className="p-5 bg-slate-50 border border-slate-200/80 rounded-2xl space-y-3 relative overflow-hidden">
                                        <div className="flex justify-between items-start">
                                            <div>
                                                <h4 className="font-black text-slate-900 text-sm">{l.user_name}</h4>
                                                <span className="text-[10px] text-purple-700 font-black uppercase bg-purple-100 px-2 py-0.5 rounded-md mt-1 inline-block">
                                                    {l.notes || 'Adelanto'}
                                                </span>
                                            </div>
                                            <button 
                                                onClick={async () => {
                                                    if (confirm("¿Deseas eliminar este registro de préstamo?")) {
                                                        await window.apiCall('delete_loan', { id: l.id });
                                                        loadData();
                                                    }
                                                }}
                                                className="text-slate-400 hover:text-red-600 p-1 cursor-pointer"
                                                title="Eliminar"
                                            >
                                                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                            </button>
                                        </div>

                                        <div className="space-y-1">
                                            <div className="flex justify-between text-xs font-bold">
                                                <span className="text-slate-400">Amortizado:</span>
                                                <span className="text-slate-900">{pct}% (C$ {paid.toFixed(2)} de C$ {total.toFixed(2)})</span>
                                            </div>
                                            <div className="w-full h-2.5 bg-slate-200 rounded-full overflow-hidden">
                                                <div className="h-full bg-purple-600 rounded-full transition-all" style={{ width: `${pct}%` }}></div>
                                            </div>
                                        </div>

                                        <div className="p-3 bg-white rounded-2xl border flex justify-between items-center text-xs">
                                            <div>
                                                <span className="text-[9px] text-slate-400 uppercase font-black block">Cuota por Quincena</span>
                                                <span className="font-black text-slate-800">C$ {parseFloat(l.installment_amount).toFixed(2)}</span>
                                            </div>
                                            <div className="text-right">
                                                <span className="text-[9px] text-purple-600 uppercase font-black block">Saldo Pendiente</span>
                                                <span className="font-black text-purple-700 text-sm">C$ {rem.toFixed(2)}</span>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })
                        )}
                    </div>
                </div>
            )}

            {/* TAB 3: MOTOR DE LIQUIDACIÓN / FINIQUITO */}
            {/* TAB 3: MOTOR DE LIQUIDACIÓN / FINIQUITO */}
            {activeTab === 'severance' && (() => {
                const handlePrintSeveranceDocument = () => {
                    if (!selectedSeveranceUser || !severanceResult) return;

                    const emp = selectedSeveranceUser;
                    const res = severanceResult;
                    const fileName = `FINIQUITO_LEGAL_${emp.name.replace(/\s+/g, '_')}_${sevTermDate}`;

                    const printIframe = document.createElement('iframe');
                    printIframe.style.position = 'fixed';
                    printIframe.style.right = '0';
                    printIframe.style.bottom = '0';
                    printIframe.style.width = '0';
                    printIframe.style.height = '0';
                    printIframe.style.border = '0';
                    document.body.appendChild(printIframe);

                    const logoHtml = settings?.logoUrl 
                        ? `<img src="${settings.logoUrl}" style="max-height: 50px; margin-bottom: 6px; object-fit: contain;" />` 
                        : '';

                    let reasonLabel = 'Despido Injustificado (Art. 45 Código del Trabajo)';
                    if (sevReason === 'renuncia_con_preaviso') reasonLabel = 'Renuncia Voluntaria con Preaviso de Ley (Art. 43/45 CT)';
                    else if (sevReason === 'abandono_trabajo') reasonLabel = 'Abandono de Trabajo / Renuncia Inmediata (Sin Indemnización)';
                    else if (sevReason === 'despido_con_causa') reasonLabel = 'Despido con Causa Justificada (Art. 48 CT - Sin Indemnización)';

                    const doc = printIframe.contentWindow.document;
                    doc.open();
                    doc.write(`
                        <!DOCTYPE html>
                        <html lang="es">
                        <head>
                            <meta charset="utf-8">
                            <title>${fileName}</title>
                            <style>
                                @page {
                                    size: letter portrait;
                                    margin: 12mm 15mm 12mm 15mm;
                                }
                                * {
                                    box-sizing: border-box;
                                    -webkit-print-color-adjust: exact !important;
                                    print-color-adjust: exact !important;
                                }
                                body {
                                    font-family: Arial, Helvetica, sans-serif;
                                    color: #0f172a;
                                    background: #ffffff;
                                    margin: 0;
                                    padding: 10px;
                                    font-size: 11px;
                                    line-height: 1.4;
                                }
                                .container {
                                    width: 100%;
                                    max-width: 720px;
                                    margin: 0 auto;
                                    border: 1.5px solid #0f172a;
                                    border-radius: 12px;
                                    padding: 24px 28px;
                                }
                                .header {
                                    text-align: center;
                                    border-bottom: 2px solid #0f172a;
                                    padding-bottom: 12px;
                                    margin-bottom: 16px;
                                }
                                .company-name {
                                    font-size: 16px;
                                    font-weight: 900;
                                    text-transform: uppercase;
                                    margin: 0;
                                }
                                .doc-title {
                                    font-size: 12px;
                                    font-weight: 800;
                                    letter-spacing: 1px;
                                    text-transform: uppercase;
                                    color: #334155;
                                    margin: 4px 0 2px 0;
                                }
                                .table-meta {
                                    width: 100%;
                                    border-collapse: collapse;
                                    background: #f8fafc;
                                    border: 1px solid #e2e8f0;
                                    border-radius: 8px;
                                    margin-bottom: 16px;
                                }
                                .table-meta td {
                                    padding: 8px 12px;
                                    width: 50%;
                                    vertical-align: top;
                                }
                                .meta-label {
                                    font-size: 8.5px;
                                    text-transform: uppercase;
                                    font-weight: 800;
                                    color: #64748b;
                                    display: block;
                                    margin-bottom: 2px;
                                }
                                .meta-value {
                                    font-size: 11px;
                                    font-weight: 700;
                                    color: #0f172a;
                                }
                                .breakdown-table {
                                    width: 100%;
                                    border-collapse: collapse;
                                    margin-bottom: 16px;
                                    border: 1px solid #cbd5e1;
                                    border-radius: 8px;
                                    overflow: hidden;
                                }
                                .breakdown-table th {
                                    background: #f1f5f9;
                                    padding: 8px 12px;
                                    font-size: 9.5px;
                                    text-transform: uppercase;
                                    font-weight: 900;
                                    border-bottom: 1px solid #cbd5e1;
                                    text-align: left;
                                }
                                .breakdown-table td {
                                    padding: 9px 12px;
                                    border-bottom: 1px solid #e2e8f0;
                                    font-size: 10.5px;
                                }
                                .net-table {
                                    width: 100%;
                                    border-collapse: collapse;
                                    background: #f8fafc;
                                    border: 2px solid #0f172a;
                                    border-radius: 8px;
                                    margin-bottom: 14px;
                                }
                                .net-table td {
                                    padding: 12px 16px;
                                }
                                .signatures-table {
                                    width: 100%;
                                    border-collapse: collapse;
                                    margin-top: 40px;
                                }
                                .signatures-table td {
                                    width: 50%;
                                    text-align: center;
                                    vertical-align: top;
                                }
                                .sig-line {
                                    width: 180px;
                                    border-top: 1px solid #0f172a;
                                    margin: 0 auto 5px auto;
                                }
                            </style>
                        </head>
                        <body>
                            <div class="container">
                                <div class="header">
                                    ${logoHtml}
                                    <div class="company-name">${settings?.companyName || 'CLEANDENT'}</div>
                                    <div class="doc-title">FINIQUITO Y LIQUIDACIÓN LABORAL OFICIAL</div>
                                    <p style="margin: 0; font-size: 9.5px; color: #64748b; font-weight: 600;">
                                        Código del Trabajo de la República de Nicaragua (Ley No. 185)
                                    </p>
                                </div>

                                <table class="table-meta">
                                    <tr>
                                        <td>
                                            <span class="meta-label">Colaborador:</span>
                                            <span class="meta-value" style="font-size: 12px;">${emp.name}</span>
                                        </td>
                                        <td>
                                            <span class="meta-label">Cédula de Identidad:</span>
                                            <span class="meta-value">${emp.idCard || '---'}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="meta-label">Fecha de Ingreso:</span>
                                            <span class="meta-value">${window.formatDateToNIC(emp.hiringDate)}</span>
                                        </td>
                                        <td>
                                            <span class="meta-label">Último Día Laborado:</span>
                                            <span class="meta-value">${window.formatDateToNIC(sevTermDate)}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span class="meta-label">Antigüedad Acumulada:</span>
                                            <span class="meta-value" style="color: #4338ca;">${res.yearsWorkedText} (${res.totalDaysWorked} días)</span>
                                        </td>
                                        <td>
                                            <span class="meta-label">Salario Base Mensual:</span>
                                            <span class="meta-value">C$ ${parseFloat(res.effectiveMonthlySalary).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <span class="meta-label">Causa o Motivo de Separación:</span>
                                            <span class="meta-value" style="color: #0f172a;">${reasonLabel}</span>
                                        </td>
                                    </tr>
                                </table>

                                <table class="breakdown-table">
                                    <thead>
                                        <tr>
                                            <th>Concepto de Liquidación</th>
                                            <th>Detalle Legal</th>
                                            <th style="text-align: right;">Monto</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><strong>1. Vacaciones Pendientes</strong></td>
                                            <td>${res.vacationDaysPending} días acumulados a razón de C$ ${res.dailyRate}/día</td>
                                            <td style="text-align: right; font-weight: 700;">C$ ${res.vacationGross}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>2. Décimo Tercer Mes (Aguinaldo)</strong></td>
                                            <td>${res.aguinaldoDays} días proporcionales (Art. 93 CT) • Exento</td>
                                            <td style="text-align: right; font-weight: 700;">C$ ${res.aguinaldoGross}</td>
                                        </tr>
                                        <tr>
                                            <td><strong>3. Indemnización por Antigüedad</strong></td>
                                            <td>${res.appliesIndemnity ? 'Escala Art. 45 CT (Tope 5 meses) • Exento' : 'No aplica por motivo de egreso'}</td>
                                            <td style="text-align: right; font-weight: 700;">C$ ${res.indemnityGross}</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="text-align: right; font-weight: 900; background: #f8fafc;">Total Ingresos Brutos:</td>
                                            <td style="text-align: right; font-weight: 900; background: #f8fafc;">C$ ${res.totalGross}</td>
                                        </tr>
                                        <tr>
                                            <td><span style="color: #dc2626;">(-) Deducción INSS Laboral (7% Vacaciones)</span></td>
                                            <td>Art. 16 Ley de Seguridad Social</td>
                                            <td style="text-align: right; font-weight: 700; color: #dc2626;">- C$ ${res.vacationInssLaboral}</td>
                                        </tr>
                                        ${parseFloat(res.vacationIR) > 0 ? `
                                        <tr>
                                            <td><span style="color: #dc2626;">(-) Retención IR DGI (Vacaciones)</span></td>
                                            <td>Ley 822 de Concertación Tributaria</td>
                                            <td style="text-align: right; font-weight: 700; color: #dc2626;">- C$ ${res.vacationIR}</td>
                                        </tr>
                                        ` : ''}
                                        <tr>
                                            <td colspan="2" style="text-align: right; font-weight: 900; color: #dc2626; background: #f8fafc;">Total Deducciones:</td>
                                            <td style="text-align: right; font-weight: 900; color: #dc2626; background: #f8fafc;">- C$ ${res.totalDeductions}</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <table class="net-table">
                                    <tr>
                                        <td>
                                            <span style="font-weight: 900; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; display: block; color: #0f172a;">TOTAL NETO A RECIBIR (FINIQUITO):</span>
                                            <span style="font-size: 9px; color: #64748b; font-weight: 600;">Saldo cancelado a entera satisfacción sin reclamo posterior</span>
                                        </td>
                                        <td style="text-align: right;">
                                            <span style="font-size: 20px; font-weight: 900; color: #0f172a;">C$ ${res.totalNetToPay}</span>
                                        </td>
                                    </tr>
                                </table>

                                <p style="font-size: 9px; color: #475569; text-align: justify; margin-top: 16px;">
                                    El suscrito trabajador declara haber recibido de conformidad el monto total detallado en el presente documento, en concepto de pago final de todas sus prestaciones sociales y derechos laborales derivados de su contrato de trabajo, no teniendo reclamo alguno de ninguna naturaleza pendiente contra la empresa empleadora.
                                </p>

                                <table class="signatures-table">
                                    <tr>
                                        <td>
                                            <div class="sig-line"></div>
                                            <strong style="text-transform: uppercase; font-size: 9.5px; color: #0f172a; display: block;">Elaborado por / Empleador</strong>
                                            <span style="font-size: 8.5px; color: #64748b;">${settings?.companyName || 'Empresa'}</span>
                                        </td>
                                        <td>
                                            <div class="sig-line"></div>
                                            <strong style="text-transform: uppercase; font-size: 9.5px; color: #0f172a; display: block;">Recibí Conforme / Trabajador</strong>
                                            <span style="font-size: 8.5px; color: #64748b;">${emp.name}</span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </body>
                        </html>
                    `);
                    doc.close();

                    setTimeout(() => {
                        printIframe.contentWindow.focus();
                        printIframe.contentWindow.print();
                        setTimeout(() => {
                            if (document.body.contains(printIframe)) {
                                document.body.removeChild(printIframe);
                            }
                        }, 1000);
                    }, 400);
                };

                return (
                    <div className="grid lg:grid-cols-3 gap-6">
                        {/* PANEL IZQUIERDO: CONFIGURACIÓN DE PARÁMETROS */}
                        <div className="bg-white p-6 sm:p-8 rounded-2xl shadow-xs border border-slate-200/80 space-y-4 h-fit">
                            <h3 className="font-bold text-lg text-slate-900">Parámetros de Finiquito</h3>
                            <p className="text-xs text-slate-500 font-medium">Cálculo legal según el Código del Trabajo de Nicaragua (Ley 185).</p>

                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Colaborador</label>
                                <select 
                                    value={selectedSeveranceUser ? selectedSeveranceUser.id : ''} 
                                    onChange={e => {
                                        const u = globalUsers.find(usr => Number(usr.id) === Number(e.target.value));
                                        handleOpenSeveranceForUser(u);
                                    }} 
                                    className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs"
                                >
                                    <option value="">Seleccionar colaborador...</option>
                                    {globalUsers.map(u => (
                                        <option key={u.id} value={u.id}>{u.name} (Ingreso: {u.hiringDate})</option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Motivo de Salida</label>
                                <select 
                                    value={sevReason} 
                                    onChange={e => setSevReason(e.target.value)} 
                                    className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs text-slate-800"
                                >
                                    <option value="despido_sin_causa_art45">Despido Injustificado / Art. 45 (Indemnización Completa)</option>
                                    <option value="renuncia_con_preaviso">Renuncia con Preaviso de 15 días (Genera Indemnización Art. 45)</option>
                                    <option value="abandono_trabajo">Abandono de Trabajo / Renuncia Inmediata (Sin Indemnización)</option>
                                    <option value="despido_con_causa">Despido con Causa Justificada / Art. 48 (Sin Indemnización)</option>
                                </select>
                            </div>

                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Último Día Laborado</label>
                                    <input type="date" value={sevTermDate} onChange={e => setSevTermDate(e.target.value)} className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs" />
                                </div>
                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Vacaciones Pendientes (días)</label>
                                    <input type="number" step="0.5" value={sevVacDaysPending} onChange={e => setSevVacDaysPending(e.target.value)} className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs" />
                                </div>
                            </div>

                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Promedio Salario Variable 6 Meses (C$)</label>
                                <input 
                                    type="number" 
                                    step="0.01" 
                                    value={sevAvgVariable} 
                                    onChange={e => setSevAvgVariable(e.target.value)} 
                                    placeholder="0.00" 
                                    className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs" 
                                />
                                <span className="text-[9px] text-slate-400 mt-1 block">Deja en 0 si devengó salario fijo ordinario.</span>
                            </div>
                        </div>

                        {/* PANEL DERECHO: VISTA PREVIA Y DESGLOSE */}
                        <div className="lg:col-span-2">
                            {!selectedSeveranceUser || !severanceResult ? (
                                <div className="bg-white p-12 rounded-2xl text-center border border-slate-200/80 shadow-xs text-slate-400 font-medium text-xs">
                                    Selecciona un colaborador para calcular su finiquito legal.
                                </div>
                            ) : (
                                <div className="bg-white p-6 sm:p-8 rounded-2xl shadow-xs border border-slate-200/80 space-y-6">
                                    <div className="flex justify-between items-start border-b border-slate-100 pb-4">
                                        <div>
                                            <h3 className="font-bold text-xl text-slate-900">{selectedSeveranceUser.name}</h3>
                                            <p className="text-[10px] text-slate-500 font-semibold uppercase tracking-wider mt-0.5">
                                                Ingreso: {window.formatDateToNIC(selectedSeveranceUser.hiringDate)} • Salida: {window.formatDateToNIC(sevTermDate)}
                                            </p>
                                            <p className="text-xs text-indigo-700 font-semibold mt-1">
                                                Antigüedad Acumulada: {severanceResult.yearsWorkedText} ({severanceResult.totalDaysWorked} días laborados)
                                            </p>
                                        </div>
                                        <button 
                                            onClick={handlePrintSeveranceDocument} 
                                            className="px-4 py-2.5 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs shadow-xs active:scale-95 transition-all cursor-pointer flex items-center gap-1.5"
                                        >
                                            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                                            <span>Imprimir Finiquito</span>
                                        </button>
                                    </div>

                                    <div className="space-y-3 text-xs">
                                        <div className="p-4 bg-slate-50 rounded-xl flex justify-between items-center border border-slate-200/60">
                                            <div>
                                                <p className="font-bold text-slate-800 uppercase">1. Vacaciones Pendientes (Art. 76 CT)</p>
                                                <p className="text-[10px] text-slate-500 font-medium">{severanceResult.vacationDaysPending} días acumulados × C$ {severanceResult.dailyRate} (Gravable INSS e IR)</p>
                                            </div>
                                            <div className="text-right">
                                                <p className="font-bold text-slate-900 text-sm">C$ {severanceResult.vacationGross}</p>
                                                <p className="text-[9px] text-red-500 font-medium">- C$ {severanceResult.vacationInssLaboral} (INSS) - C$ {severanceResult.vacationIR} (IR)</p>
                                            </div>
                                        </div>

                                        <div className="p-4 bg-slate-50 rounded-xl flex justify-between items-center border border-slate-200/60">
                                            <div>
                                                <p className="font-bold text-slate-800 uppercase">2. Aguinaldo Proporcional (Art. 93 CT)</p>
                                                <p className="text-[10px] text-emerald-700 font-medium">{severanceResult.aguinaldoDays} días proporcionales de ciclo • Exento de INSS e IR</p>
                                            </div>
                                            <p className="font-bold text-slate-900 text-sm">C$ {severanceResult.aguinaldoGross}</p>
                                        </div>

                                        <div className="p-4 bg-slate-50 rounded-xl flex justify-between items-center border border-slate-200/60">
                                            <div>
                                                <p className="font-bold text-slate-800 uppercase">3. Indemnización por Antigüedad (Art. 45 CT)</p>
                                                <p className="text-[10px] text-slate-500 font-medium">
                                                    {severanceResult.appliesIndemnity 
                                                        ? 'Escala progresiva Art. 45 CT (1 mes/año 1-3 años + 20 d/año posterior • Tope 5 meses) • Exento' 
                                                        : 'No aplica por motivo de egreso (Sin preaviso / Con causa)'}
                                                </p>
                                            </div>
                                            <p className="font-bold text-slate-900 text-sm">C$ {severanceResult.indemnityGross}</p>
                                        </div>
                                    </div>

                                    <div className="p-5 sm:p-6 bg-emerald-50/50 rounded-2xl border border-emerald-200/80 flex justify-between items-center">
                                        <div>
                                            <p className="text-[10px] font-bold uppercase tracking-wider text-emerald-800">Total Neto a Desembolsar</p>
                                            <p className="text-xs text-emerald-700 font-medium mt-0.5">Bruto: C$ {severanceResult.totalGross} • Retenciones: C$ {severanceResult.totalDeductions}</p>
                                        </div>
                                        <h3 className="text-2xl font-bold text-emerald-700">C$ {severanceResult.totalNetToPay}</h3>
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                );
            })()}

            {/* TAB 4: VENTANA DE CORTES */}
            {activeTab === 'cut_config' && (
                <div className="bg-white p-6 sm:p-8 rounded-2xl shadow-xs border border-slate-200/80 max-w-2xl space-y-6">
                    <div>
                        <h3 className="text-lg font-bold text-slate-900">Ventana de Cortes de Asistencia</h3>
                        <p className="text-slate-500 text-xs font-medium mt-1">Configura las fechas de corte en que el sistema consolida la asistencia e incidencias para tu empresa.</p>
                    </div>

                    <form onSubmit={handleSaveCutConfig} className="space-y-4">
                        <div className="p-5 bg-slate-50 rounded-2xl border border-slate-200/80 space-y-3">
                            <h4 className="font-bold text-xs uppercase text-slate-800">Primera Quincena</h4>
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Día Inicio Corte</label>
                                    <input type="number" min="1" max="31" value={cutStartDayQ1} onChange={e => setCutStartDayQ1(e.target.value)} className="w-full p-3 bg-white border border-slate-200/80 rounded-xl font-medium text-xs" />
                                </div>
                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Día Fin Corte</label>
                                    <input type="number" min="1" max="31" value={cutEndDayQ1} onChange={e => setCutEndDayQ1(e.target.value)} className="w-full p-3 bg-white border border-slate-200/80 rounded-xl font-medium text-xs" />
                                </div>
                            </div>
                        </div>

                        <div className="p-5 bg-slate-50 rounded-2xl border border-slate-200/80 space-y-3">
                            <h4 className="font-bold text-xs uppercase text-slate-800">Segunda Quincena</h4>
                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Día Inicio Corte</label>
                                    <input type="number" min="1" max="31" value={cutStartDayQ2} onChange={e => setCutStartDayQ2(e.target.value)} className="w-full p-3 bg-white border border-slate-200/80 rounded-xl font-medium text-xs" />
                                </div>
                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Día Fin Corte</label>
                                    <input type="number" min="1" max="31" value={cutEndDayQ2} onChange={e => setCutEndDayQ2(e.target.value)} className="w-full p-3 bg-white border border-slate-200/80 rounded-xl font-medium text-xs" />
                                </div>
                            </div>
                        </div>

                        <button type="submit" disabled={isSavingConfig} className="px-5 py-2.5 bg-slate-900 hover:bg-black text-white font-bold rounded-xl text-xs shadow-xs transition-all cursor-pointer">
                            {isSavingConfig ? "Guardando..." : "Guardar Configuración"}
                        </button>
                    </form>
                </div>
            )}

            {/* SLIDE-OVER DRAWER: COLILLA DETALLADA DE NÓMINA */}
            {selectedDetailEmployee && (() => {
                const emp = selectedDetailEmployee.user;
                const calc = selectedDetailEmployee.calc;
                const vars = selectedDetailEmployee.vars || {};
                const loan = selectedDetailEmployee.loanInfo;
                const empName = (emp.name || 'Empleado').trim();
                const fileName = `COMPROBANTE-SALARIO - ${empName} - ${startDate} al ${endDate}`;

                const handlePrintCleanPayslip = () => {
                    const payslipHtml = renderPayslipHtml(selectedDetailEmployee);
                    printDocumentViaIframe(getPrintablePayslipDocumentHtml(payslipHtml, fileName));
                };

                const totalDeductionsDisplay = (
                    parseFloat(calc.inssLaboral || 0) +
                    parseFloat(calc.irDGI || 0) +
                    parseFloat(calc.absenceDeduction || 0) +
                    parseFloat(calc.seventhDayDeduction || 0) +
                    parseFloat(calc.earlyDepartureDeduction || 0) +
                    (loan ? loan.deduction : 0)
                ).toFixed(2);

                return (
                    <div className="fixed inset-0 bg-slate-900/60 z-[140] flex justify-end fade-in" onClick={() => setSelectedDetailEmployee(null)}>
                        <div className="bg-white w-full max-w-xl h-full shadow-2xl p-6 sm:p-8 space-y-5 overflow-y-auto" onClick={e=>e.stopPropagation()}>
                            
                            {/* BOTONES SUPERIORES */}
                            <div className="flex justify-between items-center border-b border-slate-100 pb-3 no-print">
                                <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Recibo Oficial de Nómina</span>
                                <div className="flex items-center gap-2">
                                    <button 
                                        type="button"
                                        onClick={handlePrintCleanPayslip} 
                                        className="px-4 py-2 bg-slate-900 hover:bg-black text-white font-black rounded-xl text-[10px] uppercase tracking-wider flex items-center gap-1.5 shadow-sm transition-all cursor-pointer"
                                    >
                                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
                                        <span>Imprimir Comprobante (PDF)</span>
                                    </button>
                                    <button onClick={() => setSelectedDetailEmployee(null)} className="p-2 bg-slate-50 hover:bg-slate-100 rounded-full text-slate-400 cursor-pointer">
                                        <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </div>
                            </div>

                            {/* COMPROBANTE OFICIAL EN PANTALLA */}
                            <div id="printable-payslip-doc" className="p-5 sm:p-6 bg-white space-y-4 text-slate-900 font-sans border border-slate-200 rounded-2xl">
                                
                                {/* MEMBRETE */}
                                <div className="text-center border-b-2 border-slate-900 pb-3">
                                    {settings?.logoUrl && (
                                        <img src={settings.logoUrl} alt="Logo" className="h-12 mx-auto mb-2 object-contain" />
                                    )}
                                    <h2 className="text-base font-black uppercase tracking-tight text-slate-900">{settings?.companyName || 'EMPRESA'}</h2>
                                    <h3 className="text-xs font-black uppercase tracking-widest text-slate-600 mt-0.5">COMPROBANTE DE PAGO DE SALARIO</h3>
                                    <p className="text-[10px] font-bold text-slate-500 mt-1">
                                        Período de Nómina: <strong>{startDate}</strong> al <strong>{endDate}</strong> ({periodDaysCount} días) • Régimen: {calc.isCuotaFija ? 'Cuota Fija' : 'Régimen General'}
                                    </p>
                                </div>

                                {/* DATOS DEL COLABORADOR */}
                                <div className="grid grid-cols-2 gap-2.5 p-3 bg-slate-50 rounded-xl border border-slate-200 text-[10px]">
                                    <div>
                                        <span className="text-slate-400 uppercase font-black block text-[8px]">Colaborador:</span>
                                        <strong className="text-slate-900 text-xs font-black">{emp.name}</strong>
                                    </div>
                                    <div>
                                        <span className="text-slate-400 uppercase font-black block text-[8px]">Cargo / Puesto:</span>
                                        <strong className="text-slate-900">{emp.positionTitle || emp.role}</strong>
                                    </div>
                                    <div>
                                        <span className="text-slate-400 uppercase font-black block text-[8px]">Cédula / No. INSS:</span>
                                        <span className="font-bold text-slate-700">{emp.idCard || '---'} / {emp.inssNumber || 'N/A'}</span>
                                    </div>
                                    <div>
                                        <span className="text-slate-400 uppercase font-black block text-[8px]">Salario Base Mensual:</span>
                                        <strong className="font-black text-slate-900">C$ {parseFloat(emp.baseSalary || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</strong>
                                    </div>
                                </div>

                                {/* TABLA DOBLE COLUMNA: PERCEPCIONES VS DEDUCCIONES */}
                                <div className="grid grid-cols-2 gap-3 text-xs">
                                    
                                    {/* COLUMNA 1: PERCEPCIONES */}
                                    <div className="border border-slate-200 rounded-xl overflow-hidden">
                                        <div className="bg-slate-100 px-3 py-1.5 border-b border-slate-200 font-black text-[9px] uppercase tracking-wider text-slate-700">
                                            Percepciones (Ingresos)
                                        </div>
                                        <div className="p-3 space-y-2 text-[11px]">
                                            <div className="flex justify-between">
                                                <span className="text-slate-600">Salario Base Quincenal ({periodDaysCount} d):</span>
                                                <strong className="font-bold">C$ {calc.scheduledPeriodPay || calc.basePeriodPay}</strong>
                                            </div>
                                            {vars.overtime > 0 && (
                                                <div className="flex justify-between text-slate-700">
                                                    <span>Horas Extras ({vars.overtime}h al 100%):</span>
                                                    <strong>+ C$ {calc.overtimePay}</strong>
                                                </div>
                                            )}
                                            {vars.commissions > 0 && (
                                                <div className="flex justify-between text-slate-700">
                                                    <span>Comisiones por Ventas:</span>
                                                    <strong>+ C$ {parseFloat(vars.commissions).toFixed(2)}</strong>
                                                </div>
                                            )}
                                            {vars.bonuses > 0 && (
                                                <div className="flex justify-between text-slate-700">
                                                    <span>Incentivo / Bono por Meta:</span>
                                                    <strong>+ C$ {parseFloat(vars.bonuses).toFixed(2)}</strong>
                                                </div>
                                            )}
                                            <div className="border-t border-dashed border-slate-200 pt-2 flex justify-between font-black text-slate-900 text-xs">
                                                <span>Total Devengado:</span>
                                                <span>C$ {(parseFloat(calc.scheduledPeriodPay || calc.basePeriodPay) + parseFloat(calc.overtimePay || 0) + parseFloat(calc.variablePay || 0)).toFixed(2)}</span>
                                            </div>
                                        </div>
                                    </div>

                                    {/* COLUMNA 2: DEDUCCIONES DE LEY, ASISTENCIA Y OTRAS */}
                                    <div className="border border-slate-200 rounded-xl overflow-hidden">
                                        <div className="bg-slate-100 px-3 py-1.5 border-b border-slate-200 font-black text-[9px] uppercase tracking-wider text-slate-700">
                                            Deducciones de Ley y Otras
                                        </div>
                                        <div className="p-3 space-y-1.5 text-[11px]">
                                            
                                            {calc.unjustifiedCount > 0 && (
                                                <div className="flex justify-between text-red-700">
                                                    <span>Ausencia Injustificada ({calc.unjustifiedCount} d):</span>
                                                    <strong className="font-bold">- C$ {calc.absenceDeduction}</strong>
                                                </div>
                                            )}

                                            {calc.unjustifiedCount > 0 && (
                                                <div className="flex justify-between text-red-700">
                                                    <span>Deducción 7mo Día (Art. 64 CT):</span>
                                                    <strong className="font-bold">- C$ {calc.seventhDayDeduction}</strong>
                                                </div>
                                            )}

                                            {calc.justifiedNoPayCount > 0 && (
                                                <div className="flex justify-between text-slate-700">
                                                    <span>Permiso Sin Goce ({calc.justifiedNoPayCount} d):</span>
                                                    <strong className="font-bold">- C$ {calc.unpaidLeaveDeduction}</strong>
                                                </div>
                                            )}

                                            {/* Renglón de Salida Anticipada / Minutos no laborados */}
                                            {parseFloat(calc.earlyDepartureDeduction || 0) > 0 && (
                                                <div className="flex justify-between items-center text-xs">
                                                    <span className="font-bold text-red-600">
                                                        Salida Anticipada ({Math.round(calc.totalDeductedMinutes / 60 * 10) / 10} hrs / {calc.totalDeductedMinutes} min):
                                                    </span>
                                                    <span className="font-black text-red-600">
                                                        - C$ {calc.earlyDepartureDeduction}
                                                    </span>
                                                </div>
                                            )}

                                            {parseFloat(calc.inssLaboral) > 0 && (
                                                <div className="flex justify-between text-slate-700">
                                                    <span>INSS Laboral (7.0%):</span>
                                                    <strong className="text-red-600 font-bold">- C$ {calc.inssLaboral}</strong>
                                                </div>
                                            )}

                                            {parseFloat(calc.irDGI) > 0 && (
                                                <div className="flex justify-between text-slate-700">
                                                    <span>IR DGI (Ley 822):</span>
                                                    <strong className="text-red-600 font-bold">- C$ {calc.irDGI}</strong>
                                                </div>
                                            )}

                                            {loan && (
                                                <div className="flex justify-between text-purple-800">
                                                    <span>{loan.notes || 'Adelanto Salarial'}:</span>
                                                    <strong className="font-bold">- C$ {loan.deduction.toFixed(2)}</strong>
                                                </div>
                                            )}

                                            {/* Total Deducciones Consolidado */}
                                            <div className="border-t border-dashed border-slate-200 pt-2 flex justify-between font-black text-red-600 text-xs">
                                                <span>Total Deducciones:</span>
                                                <span>- C$ {totalDeductionsDisplay}</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                {/* TOTAL NETO */}
                                <div className="p-3.5 bg-slate-100 rounded-xl border-2 border-slate-900 flex justify-between items-center">
                                    <div>
                                        <span className="text-[9px] font-black uppercase tracking-widest text-slate-600 block">NETO LÍQUIDO A RECIBIR:</span>
                                        <span className="text-[10px] font-bold text-slate-500">Monto cancelado en moneda nacional (Córdobas)</span>
                                    </div>
                                    <h3 className="text-xl font-black text-slate-900">C$ {selectedDetailEmployee.netPayable}</h3>
                                </div>

                                {/* NOTA ADELANTO */}
                                {loan && (
                                    <div className="p-2.5 bg-purple-50 rounded-lg text-[9px] text-purple-700 font-bold">
                                        Nota: Descuento por adelanto. Saldo pendiente restante: C$ {loan.pendingAfter.toFixed(2)}.
                                    </div>
                                )}

                                {/* BLOQUE DE FIRMAS */}
                                <div className="grid grid-cols-2 gap-8 pt-8 text-center text-[10px]">
                                    <div>
                                        <div className="border-t border-slate-400 w-36 mx-auto mb-1"></div>
                                        <strong className="block text-slate-800 uppercase font-black">Elaborado por / RRHH</strong>
                                        <span className="text-slate-400 text-[9px]">{settings?.companyName || 'Empresa Empleadora'}</span>
                                    </div>
                                    <div>
                                        <div className="border-t border-slate-400 w-36 mx-auto mb-1"></div>
                                        <strong className="block text-slate-800 uppercase font-black">Recibí Conforme</strong>
                                        <span className="text-slate-400 text-[9px]">{emp.name}</span>
                                    </div>
                                </div>

                            </div>

                            {/* INFORMACIÓN INTERNA ADMINISTRATIVA */}
                            <div className="p-4 bg-slate-50 rounded-2xl border border-slate-200 text-[10px] space-y-1.5 no-print">
                                <div className="flex items-center gap-1 text-slate-400 font-black uppercase tracking-wider text-[9px]">
                                    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    <span>Control Administrativo Interno (No se imprime)</span>
                                </div>
                                <div className="flex justify-between font-bold text-slate-600">
                                    <span>INSS Patronal ({calc.inssPatronalRate}%):</span>
                                    <span>C$ {calc.inssPatronal}</span>
                                </div>
                                <div className="flex justify-between font-bold text-slate-600">
                                    <span>INATEC Patronal (2.0%):</span>
                                    <span>{calc.appliesInatec && emp.appliesInss ? `C$ ${calc.inatecPatronal}` : 'Exento / No aplica'}</span>
                                </div>
                                <div className="flex justify-between font-black text-indigo-900 border-t pt-1 text-xs">
                                    <span>Costo Total Empresa:</span>
                                    <span>C$ {calc.totalCostEmployer}</span>
                                </div>
                            </div>

                        </div>
                    </div>
                );
            })()}

            {/* MODAL AJUSTE RÁPIDO DE HORAS EXTRAS Y BONOS CON BITÁCORA DETALLADA */}
            {editingAdjustmentUser && (() => {
                const modalUserOvertimeLogs = (allOvertimeLogs || []).filter(o => 
                    Number(o.user_id) === Number(editingAdjustmentUser.id) &&
                    o.status === 'approved' &&
                    (o.destination === 'payroll' || o.destination === 'mixed') &&
                    parseFloat(o.payroll_hours || 0) > 0 &&
                    o.date_str >= startDate &&
                    o.date_str <= endDate
                );

                const totalOtHoursInModal = modalUserOvertimeLogs.reduce((sum, o) => sum + Number(o.payroll_hours || 0), 0);

                return (
                    <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-4 fade-in" onClick={() => setEditingAdjustmentUser(null)}>
                        <div className="bg-white rounded-2xl p-6 sm:p-8 max-w-lg w-full shadow-xl border border-slate-200/80 space-y-4 max-h-[90vh] overflow-y-auto" onClick={e=>e.stopPropagation()}>
                            <div>
                                <span className="text-[10px] font-bold uppercase text-slate-500 tracking-wider">Variables y Bitácora de Horas Extras</span>
                                <h3 className="font-bold text-lg text-slate-900 leading-tight mt-0.5">{editingAdjustmentUser.name}</h3>
                                <p className="text-xs text-slate-400 font-medium mt-0.5">Período Evaluado: {startDate} al {endDate}</p>
                            </div>

                            <form onSubmit={handleSaveAdjustmentModal} className="space-y-4">
                                <div>
                                    <div className="flex justify-between items-center mb-1">
                                        <label className="text-[10px] font-bold uppercase text-slate-500">Horas Extras Aprobadas (Horas)</label>
                                        {totalOtHoursInModal > 0 && (
                                            <span className="text-[10px] font-extrabold text-amber-700 bg-amber-100 px-2 py-0.5 rounded-full">
                                                Auditadas: {totalOtHoursInModal.toFixed(1)} hrs
                                            </span>
                                        )}
                                    </div>
                                    <input 
                                        type="number" 
                                        step="0.1" 
                                        min="0" 
                                        value={adjOvertime} 
                                        onChange={e=>setAdjOvertime(e.target.value)} 
                                        placeholder="0" 
                                        className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-bold text-xs outline-none focus:border-slate-400" 
                                    />
                                    <span className="text-[10px] text-slate-400 block mt-1">Se pagarán con recargo del 100% (Doble) según Art. 58 CT.</span>
                                </div>

                                {/* BITÁCORA INTEGRADA DE HORAS EXTRAS DEL PERÍODO */}
                                <div className="bg-slate-50 p-3.5 sm:p-4 rounded-xl border border-slate-200/80 space-y-2">
                                    <div className="flex items-center justify-between">
                                        <h4 className="text-xs font-bold text-slate-800 flex items-center gap-1.5">
                                            <span>Bitácora de Reingresos Auditados ({modalUserOvertimeLogs.length})</span>
                                        </h4>
                                    </div>

                                    {modalUserOvertimeLogs.length === 0 ? (
                                        <p className="text-[11px] text-slate-400 font-medium italic py-2 text-center">
                                            No hay reingresos u horas extras aprobadas para planilla en esta quincena.
                                        </p>
                                    ) : (
                                        <div className="space-y-2 max-h-48 overflow-y-auto pr-1">
                                            {modalUserOvertimeLogs.map(log => (
                                                <div key={log.id} className="bg-white p-2.5 rounded-lg border border-slate-200 text-xs space-y-1 shadow-2xs">
                                                    <div className="flex items-center justify-between font-bold text-slate-800">
                                                        <span>{log.date_str} {log.entry_time ? `(${log.entry_time} - ${log.exit_time || 'Activo'})` : ''}</span>
                                                        <span className="text-amber-700 font-black">+{log.payroll_hours} hrs (Doble)</span>
                                                    </div>
                                                    <p className="text-[11px] text-slate-600 font-medium">
                                                        <span className="font-semibold text-slate-700">Motivo:</span> {log.justification || 'Horas extras autorizadas'}
                                                    </p>
                                                    {log.admin_notes && (
                                                        <p className="text-[10px] text-slate-400 italic">
                                                            Nota Admin: {log.admin_notes}
                                                        </p>
                                                    )}
                                                </div>
                                            ))}
                                        </div>
                                    )}
                                </div>

                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Comisiones por Ventas (C$)</label>
                                    <input 
                                        type="number" 
                                        step="50" 
                                        min="0" 
                                        value={adjCommissions} 
                                        onChange={e=>setAdjCommissions(e.target.value)} 
                                        placeholder="0.00" 
                                        className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-bold text-xs outline-none focus:border-slate-400" 
                                    />
                                </div>

                                <div>
                                    <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Bonos por Meta / Incentivos (C$)</label>
                                    <input 
                                        type="number" 
                                        step="50" 
                                        min="0" 
                                        value={adjBonuses} 
                                        onChange={e=>setAdjBonuses(e.target.value)} 
                                        placeholder="0.00" 
                                        className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-bold text-xs outline-none focus:border-slate-400" 
                                    />
                                </div>

                                <div className="flex gap-2 pt-2">
                                    <button type="button" onClick={() => setEditingAdjustmentUser(null)} className="flex-1 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold text-xs cursor-pointer">Cancelar</button>
                                    <button type="submit" className="flex-1 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-semibold text-xs shadow-xs transition-all cursor-pointer">Guardar Ajustes</button>
                                </div>
                            </form>
                        </div>
                    </div>
                );
            })()}

            {/* MODAL NUEVO ADELANTO / PRÉSTAMO */}
            {showLoanModal && (
                <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-4 fade-in" onClick={() => setShowLoanModal(false)}>
                    <div className="bg-white rounded-2xl p-6 sm:p-8 max-w-md w-full shadow-xl border border-slate-200/80 space-y-4" onClick={e=>e.stopPropagation()}>
                        <h3 className="font-bold text-lg text-slate-900">Registrar Adelanto / Préstamo</h3>
                        <form onSubmit={handleCreateLoan} className="space-y-3">
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Colaborador</label>
                                <select value={loanUserId} onChange={e=>setLoanUserId(e.target.value)} className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs outline-none" required>
                                    <option value="">Seleccionar colaborador...</option>
                                    {globalUsers.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                                </select>
                            </div>
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Monto del Adelanto (C$)</label>
                                <input type="number" step="50" value={loanAmount} onChange={e=>setLoanAmount(e.target.value)} placeholder="Ej. 1000" className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-bold text-xs outline-none" required />
                            </div>
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Plazo de Deducción (Quincenas)</label>
                                <select value={loanInstallments} onChange={e=>setLoanInstallments(e.target.value)} className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs outline-none">
                                    <option value={1}>1 Quincena (Deducción Íntegra)</option>
                                    <option value={2}>2 Quincenas (50% cada quincena)</option>
                                    <option value={3}>3 Quincenas</option>
                                    <option value={4}>4 Quincenas (2 Meses)</option>
                                </select>
                            </div>
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">Concepto / Motivo</label>
                                <input type="text" value={loanNotes} onChange={e=>setLoanNotes(e.target.value)} placeholder="Ej. Adelanto de salario" className="w-full p-3 bg-slate-50 border border-slate-200/80 rounded-xl font-medium text-xs outline-none" />
                            </div>
                            <div className="flex gap-2 pt-2">
                                <button type="button" onClick={() => setShowLoanModal(false)} className="flex-1 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold text-xs cursor-pointer">Cancelar</button>
                                <button type="submit" className="flex-1 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl font-semibold text-xs shadow-xs transition-all cursor-pointer">Guardar Adelanto</button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* MODAL AUDITORÍA DE ASISTENCIA DÍA A DÍA */}
            {calendarModalUser && (
                <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-4 fade-in" onClick={() => setCalendarModalUser(null)}>
                    <div className="bg-white rounded-2xl max-w-xl w-full p-6 sm:p-8 shadow-xl border border-slate-200/80 space-y-4 max-h-[85vh] overflow-y-auto" onClick={e=>e.stopPropagation()}>
                        <div className="flex justify-between items-center border-b border-slate-100 pb-2">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">{calendarModalUser.user.name}</h3>
                                <p className="text-[10px] text-slate-500 uppercase font-semibold">Auditoría del {startDate} al {endDate}</p>
                            </div>
                            <button onClick={() => setCalendarModalUser(null)} className="p-2 bg-slate-50 hover:bg-slate-100 rounded-full text-slate-400 hover:text-slate-700 transition-colors cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <div className="p-3 bg-indigo-50/70 border border-indigo-100 rounded-2xl text-xs">
                            <p className="font-black text-indigo-950 uppercase text-[10px]">Legislación Laboral (Art. 64 Código del Trabajo de Nicaragua):</p>
                            <p className="text-[11px] text-slate-600 mt-1 leading-relaxed">
                                Cada <strong>falta injustificada</strong> deduce el día no laborado más el descanso semanal proporcional (Séptimo Día = 2 días deducidos en total). Los días futuros del ciclo no son penalizados.
                            </p>
                        </div>

                        <div className="space-y-1.5 max-h-60 overflow-y-auto no-scrollbar">
                            {calendarModalUser.calc.audit.dayBreakdown.map((d, i) => (
                                <div key={i} className={`p-2.5 rounded-xl border flex justify-between items-center text-xs ${
                                    d.status === 'injustificada' ? 'bg-red-50 text-red-800 border-red-200' :
                                    d.status === 'futuro' ? 'bg-slate-50 text-slate-400 border-slate-200' :
                                    d.status === 'vacacion' ? 'bg-indigo-50 text-indigo-800 border-indigo-200' :
                                    d.status === 'descanso' ? 'bg-slate-50 text-slate-500 border-slate-200 opacity-60' :
                                    'bg-white border-slate-200'
                                }`}>
                                    <span className="font-black">{window.formatDateToNIC(d.date)} ({d.dayCode.toUpperCase()})</span>
                                    <span className="text-[10px] font-bold">{d.label}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL DISPERSIÓN BANCARIA MASIVA */}
            {showBankModal && (
                <div className="fixed inset-0 bg-slate-900/60 z-[140] flex items-center justify-center p-3 sm:p-4 fade-in" onClick={() => setShowBankModal(false)}>
                    <div className="bg-white rounded-2xl max-w-4xl w-full p-5 sm:p-6 shadow-2xl border border-slate-200/80 space-y-4 max-h-[90vh] flex flex-col overflow-hidden" onClick={e=>e.stopPropagation()}>
                        {/* Cabecera */}
                        <div className="flex justify-between items-center border-b border-slate-100 pb-3">
                            <div>
                                <h3 className="font-bold text-lg text-slate-900">Dispersión Bancaria Masiva de Nómina</h3>
                                <p className="text-xs text-slate-500 mt-0.5">
                                    Generador de transferencias y pagos ACH (BAC, BANPRO, LAFISE y Multibanco) para el ciclo {startDate} al {endDate}
                                </p>
                            </div>
                            <button onClick={() => setShowBankModal(false)} className="p-2 bg-slate-100 hover:bg-slate-200 text-slate-500 rounded-xl cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        {/* Parámetros de Dispersión */}
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-200/80">
                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">
                                    Formato Bancario Destino *
                                </label>
                                <select 
                                    value={bankFormat} 
                                    onChange={e => setBankFormat(e.target.value)} 
                                    className="w-full p-2.5 bg-white border border-slate-200 rounded-xl font-semibold text-xs text-slate-900 outline-none"
                                >
                                    <option value="bac">BAC Credomatic (Conexión Empresarial CSV/TXT)</option>
                                    <option value="banpro">BANPRO Promerica (Nómina ACH TXT)</option>
                                    <option value="lafise">LAFISE Bancentro (Nómina CSV)</option>
                                    <option value="multibank">Consolidado Multibanco (Excel / CSV Completo)</option>
                                </select>
                            </div>

                            <div>
                                <label className="text-[10px] font-bold uppercase text-slate-500 block mb-1">
                                    Cuenta Débito Empresa (Origen Fondos)
                                </label>
                                <input 
                                    type="text" 
                                    value={companyDebitAcc} 
                                    onChange={e => setCompanyDebitAcc(e.target.value)} 
                                    placeholder="Ej. 10020304050 (Configurada en Ajustes)" 
                                    className="w-full p-2.5 bg-white border border-slate-200 rounded-xl font-mono text-xs text-slate-900 outline-none"
                                />
                            </div>
                        </div>

                        {/* Métricas de dispersión */}
                        {(() => {
                            const withBank = processedPayroll.filter(p => Boolean(p.user.bank_account_number || p.user.bankAccountNumber));
                            const withoutBank = processedPayroll.filter(p => !Boolean(p.user.bank_account_number || p.user.bankAccountNumber));
                            const totalAmount = processedPayroll.reduce((acc, p) => acc + parseFloat(p.netPayable || 0), 0);
                            const bankAmount = withBank.reduce((acc, p) => acc + parseFloat(p.netPayable || 0), 0);

                            return (
                                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                    <div className="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
                                        <span className="text-[10px] font-bold uppercase text-slate-500 block">Neto Total Planilla</span>
                                        <span className="text-sm font-bold text-slate-900 font-mono mt-0.5 block">
                                            C$ {totalAmount.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                                        </span>
                                    </div>
                                    <div className="bg-emerald-50 p-3.5 rounded-xl border border-emerald-100">
                                        <span className="text-[10px] font-bold uppercase text-emerald-800 block">Total a Dispersar (Bancos)</span>
                                        <span className="text-sm font-bold text-emerald-700 font-mono mt-0.5 block">
                                            C$ {bankAmount.toLocaleString('en-US', { minimumFractionDigits: 2 })}
                                        </span>
                                    </div>
                                    <div className="bg-slate-50 p-3.5 rounded-xl border border-slate-200">
                                        <span className="text-[10px] font-bold uppercase text-slate-500 block">Con Cuenta Bancaria</span>
                                        <span className="text-sm font-bold text-slate-900 mt-0.5 block">
                                            {withBank.length} de {processedPayroll.length} colaboradores
                                        </span>
                                    </div>
                                    <div className={`p-3.5 rounded-xl border ${withoutBank.length > 0 ? 'bg-amber-50 border-amber-200' : 'bg-slate-50 border-slate-200'}`}>
                                        <span className={`text-[10px] font-bold uppercase block ${withoutBank.length > 0 ? 'text-amber-800' : 'text-slate-500'}`}>
                                            Efectivo / Cheque
                                        </span>
                                        <span className={`text-sm font-bold mt-0.5 block ${withoutBank.length > 0 ? 'text-amber-800' : 'text-slate-900'}`}>
                                            {withoutBank.length} colaboradores
                                        </span>
                                    </div>
                                </div>
                            );
                        })()}

                        {/* Tabla Resumen / Previsualización */}
                        <div className="flex-1 overflow-y-auto border border-slate-200 rounded-xl min-h-[160px]">
                            <table className="w-full text-left text-xs border-collapse">
                                <thead className="bg-slate-50 border-b border-slate-200 sticky top-0 z-10 text-[10px] uppercase font-bold text-slate-500 tracking-wider">
                                    <tr>
                                        <th className="py-2.5 px-3">Colaborador</th>
                                        <th className="py-2.5 px-3">Cédula</th>
                                        <th className="py-2.5 px-3">Banco</th>
                                        <th className="py-2.5 px-3">Cuenta Destino</th>
                                        <th className="py-2.5 px-3 text-right">Monto Neto</th>
                                        <th className="py-2.5 px-3 text-center">Estado</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-100">
                                    {processedPayroll.map(p => {
                                        const u = p.user;
                                        const accNum = u.bank_account_number || u.bankAccountNumber;
                                        const bank = u.bank_name || u.bankName;

                                        return (
                                            <tr key={u.id} className="hover:bg-slate-50/70 transition-colors">
                                                <td className="py-2.5 px-3 font-semibold text-slate-900">
                                                    {u.name}
                                                </td>
                                                <td className="py-2.5 px-3 font-mono text-slate-500 text-[11px]">
                                                    {u.idCard || u.id_card || 'Sin registrar'}
                                                </td>
                                                <td className="py-2.5 px-3 font-medium text-slate-700">
                                                    {bank || 'No asignado'}
                                                </td>
                                                <td className="py-2.5 px-3 font-mono text-slate-600 text-[11px]">
                                                    {accNum || 'Sin cuenta'}
                                                </td>
                                                <td className="py-2.5 px-3 text-right font-mono font-bold text-slate-900">
                                                    C$ {parseFloat(p.netPayable || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}
                                                </td>
                                                <td className="py-2.5 px-3 text-center">
                                                    {accNum ? (
                                                        <span className="inline-block text-[10px] font-semibold text-emerald-700 bg-emerald-50 border border-emerald-100 px-2 py-0.5 rounded-md">
                                                            Listo para Dispersión
                                                        </span>
                                                    ) : (
                                                        <span className="inline-block text-[10px] font-semibold text-amber-700 bg-amber-50 border border-amber-100 px-2 py-0.5 rounded-md">
                                                            Efectivo / Cheque
                                                        </span>
                                                    )}
                                                </td>
                                            </tr>
                                        );
                                    })}
                                </tbody>
                            </table>
                        </div>

                        {/* Acciones */}
                        <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-2 border-t border-slate-100">
                            <span className="text-[11px] text-slate-500">
                                {bankFormat === 'bac' && "Formato oficial para Conexión Empresarial BAC (.csv)"}
                                {bankFormat === 'banpro' && "Formato oficial para Nómina ACH BANPRO (.txt)"}
                                {bankFormat === 'lafise' && "Formato oficial para Nómina LAFISE Bancentro (.csv)"}
                                {bankFormat === 'multibank' && "Consolidado universal con cuentas y efectivo (.csv)"}
                            </span>
                            <div className="flex items-center gap-2 w-full sm:w-auto">
                                <button
                                    onClick={() => setShowBankModal(false)}
                                    className="min-h-[42px] px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-semibold cursor-pointer w-full sm:w-auto"
                                >
                                    Cerrar
                                </button>
                                <button
                                    onClick={downloadBankDisbursementFile}
                                    className="min-h-[42px] px-5 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded-xl text-xs font-semibold shadow-xs flex items-center justify-center gap-2 cursor-pointer w-full sm:w-auto transition-all"
                                >
                                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                                    <span>Descargar Archivo Bancario</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL DE SELECCIÓN DE CUENTA BANCARIA PARA PAGO Y CIERRE DE PLANILLA */}
            {showDisbursementModal && (
                <div className="fixed inset-0 bg-slate-900/80 z-[120] flex items-center justify-center p-4 fade-in">
                    <div className="bg-white w-full max-w-lg rounded-2xl shadow-xl border border-slate-200 p-6 space-y-5">
                        <div className="flex justify-between items-start border-b pb-4">
                            <div>
                                <h3 className="text-base font-black text-slate-900 uppercase tracking-tight">Autorizar y Procesar Pago de Planilla</h3>
                                <p className="text-xs text-slate-400 font-medium mt-0.5">Período: {startDate} al {endDate}</p>
                            </div>
                            <button onClick={() => setShowDisbursementModal(false)} className="p-1.5 text-slate-400 hover:text-slate-600 rounded-lg">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <div className="space-y-4">
                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1.5">Cuenta Bancaria / Método de Pago Dispersado</label>
                                <select 
                                    value={selectedPaymentAccount} 
                                    onChange={e => setSelectedPaymentAccount(e.target.value)} 
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-bold text-xs text-slate-900 outline-none focus:border-slate-400"
                                >
                                    <option value="Efectivo / Caja Chica">Efectivo / Caja Chica</option>
                                    {(settings?.companyBankAccounts || []).map(b => (
                                        <option key={b.id} value={`${b.bankName} - N° ${b.accountNumber} (${b.currency})`}>
                                            {b.bankName} - N° {b.accountNumber} ({b.currency}) [{b.type}]
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="text-[10px] font-black uppercase text-slate-400 block mb-1.5">Notas o Referencia de Pago (Opcional)</label>
                                <input 
                                    type="text" 
                                    placeholder="Ej. Transferencia ACH #948201 / Cheque corporativo #104" 
                                    value={disbursementNotes} 
                                    onChange={e => setDisbursementNotes(e.target.value)} 
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl font-medium text-xs text-slate-900 outline-none focus:border-slate-400"
                                />
                            </div>

                            <div className="bg-slate-50 p-4 rounded-xl border border-slate-200/80 space-y-1">
                                <div className="flex justify-between text-xs font-bold text-slate-700">
                                    <span>Monto Total Neto a Dispersar:</span>
                                    <span className="font-mono text-emerald-700 font-extrabold text-sm">C$ {(totalsSummary?.net || 0).toLocaleString('en-US', { minimumFractionDigits: 2 })}</span>
                                </div>
                                <p className="text-[10px] text-slate-400 font-medium">Al confirmar, las colillas de pago se publicarán inmediatamente en el portal de autoservicio de los colaboradores.</p>
                            </div>
                        </div>

                        <div className="flex items-center justify-end gap-2 pt-2 border-t">
                            <button 
                                type="button" 
                                onClick={() => setShowDisbursementModal(false)} 
                                className="px-4 py-2.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl text-xs font-bold transition-all cursor-pointer"
                            >
                                Cancelar
                            </button>
                            <button 
                                type="button" 
                                onClick={() => handleTogglePayrollClosure(true, selectedPaymentAccount, disbursementNotes)} 
                                disabled={isTogglingClosure}
                                className="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl text-xs font-bold uppercase tracking-wider transition-all shadow-xs cursor-pointer flex items-center gap-2"
                            >
                                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>
                                {isTogglingClosure ? 'Procesando...' : 'Confirmar y Publicar Pago'}
                            </button>
                        </div>
                    </div>
                </div>
            )}
            {/* MODAL DE HISTORIAL Y AUDITORÍA DE CIERRES DE PLANILLA */}
            {showClosureAuditModal && (
                <div className="fixed inset-0 bg-slate-900/80 z-[120] flex items-center justify-center p-4 fade-in">
                    <div className="bg-white w-full max-w-3xl rounded-2xl shadow-xl border border-slate-200 p-6 space-y-5">
                        <div className="flex justify-between items-start border-b pb-4">
                            <div>
                                <h3 className="text-base font-black text-slate-900 uppercase tracking-tight">Auditoría & Historial de Cierres de Planilla</h3>
                                <p className="text-xs text-slate-400 font-medium mt-0.5">Registro de pagos procesados y cuentas bancarias de la empresa utilizadas</p>
                            </div>
                            <button onClick={() => setShowClosureAuditModal(false)} className="p-1.5 text-slate-400 hover:text-slate-600 rounded-lg cursor-pointer">
                                <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                            </button>
                        </div>

                        <div className="space-y-3 max-h-[60vh] overflow-y-auto pr-1">
                            {(!payrollClosureStatus?.all_closures || payrollClosureStatus.all_closures.length === 0) && !payrollClosureStatus?.closure ? (
                                <p className="text-xs text-slate-400 font-medium text-center py-8">No hay registros históricos de cierres de planilla para mostrar.</p>
                            ) : (
                                (payrollClosureStatus?.all_closures || [payrollClosureStatus?.closure].filter(Boolean)).map((c, idx) => (
                                    <div key={idx} className="p-4 bg-slate-50 border border-slate-200/80 rounded-xl space-y-2">
                                        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 border-b border-slate-200/60 pb-2">
                                            <div>
                                                <span className="font-extrabold text-xs text-slate-900 block">
                                                    Período: {c.period_start} al {c.period_end}
                                                </span>
                                                <span className="text-[10px] text-slate-500 font-medium block mt-0.5">
                                                    Procesado por: <strong>{c.closed_by_name || 'Administración'}</strong>
                                                </span>
                                            </div>
                                            <span className="px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider bg-emerald-100 text-emerald-900 border border-emerald-300">
                                                {c.status === 'paid' ? 'Oficialmente Pagada' : c.status}
                                            </span>
                                        </div>

                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
                                            <div className="bg-white p-2.5 rounded-lg border border-slate-200/60">
                                                <span className="text-[9px] font-bold uppercase text-slate-400 block">Cuenta / Método Registrado</span>
                                                <span className="font-bold text-slate-800 text-xs block mt-0.5">{c.notes || 'Efectivo / Caja Chica'}</span>
                                            </div>
                                            <div className="bg-white p-2.5 rounded-lg border border-slate-200/60">
                                                <span className="text-[9px] font-bold uppercase text-slate-400 block">Fecha y Hora de Cierre</span>
                                                <span className="font-mono text-slate-700 text-xs block mt-0.5">
                                                    {c.paid_at ? (window.formatNICTimeFull ? window.formatNICTimeFull(c.paid_at) : new Date(Number(c.paid_at)).toLocaleString()) : 'Reciente'}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>

                        <div className="flex items-center justify-end pt-2 border-t">
                            <button 
                                type="button" 
                                onClick={() => setShowClosureAuditModal(false)} 
                                className="px-5 py-2.5 bg-slate-900 hover:bg-black text-white rounded-xl text-xs font-bold transition-all cursor-pointer shadow-xs"
                            >
                                Cerrar Auditoría
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};