const { useState, useMemo, useEffect, useRef } = React;

// Iconos vectoriales limpios (sin emojis)
const VacIcon = ({ name, className = "w-4 h-4" }) => {
    const icons = {
        'calendar': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" 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>,
        'users': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>,
        'currency': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>,
        'alert': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" 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>,
        'check': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7"/></svg>,
        'x': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2.5" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>,
        'plus': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4"/></svg>,
        'printer': <svg className={className} 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-4H7v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>,
        'search': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>,
        'settings': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>,
        'file-text': <svg className={className} 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>,
        'chevron-left': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7"/></svg>,
        'chevron-right': <svg className={className} fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"/></svg>,
        'cash': <svg className={className} 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 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
    };
    return icons[name] || null;
};

window.AdminVacaciones = function({ 
    globalUsers = [], 
    vacations = [], 
    settings = {}, 
    roles = [],
    currentUser = null,
    refreshData, 
    showToast,
    updateVacationRate, 
    setVacationStatus, 
    revokeEntireVacation, 
    setSelectedUserVacation, 
    isReadOnly 
}) {
    const [activeSubTab, setActiveSubTab] = useState(() => {
        const saved = localStorage.getItem('shift_vacaciones_subtab');
        return ['saldos', 'calendario', 'solicitudes'].includes(saved) ? saved : 'saldos';
    });

    useEffect(() => {
        try {
            localStorage.setItem('shift_vacaciones_subtab', activeSubTab);
        } catch (e) {}
    }, [activeSubTab]);
    const [searchFilter, setSearchFilter] = useState('');
    const [roleFilter, setRoleFilter] = useState('todos');

    // Paginación de aprobadas
    const [vacPage, setVacPage] = useState(0);

    // Estados de Kardex y modales
    const [kardexUser, setKardexUser] = useState(null);
    const [showRegisterModal, setShowRegisterModal] = useState(false);
    const [showCashCompModal, setShowCashCompModal] = useState(false);
    const [selectedSlipVacation, setSelectedSlipVacation] = useState(null);

    // Formulario de registro manual
    const [formUserId, setFormUserId] = useState('');
    const [formType, setFormType] = useState('range'); // 'range', 'half', 'paid'
    const [formStartDate, setFormStartDate] = useState(window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0]);
    const [formEndDate, setFormEndDate] = useState(window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0]);
    const [formPaidDays, setFormPaidDays] = useState(1);
    const [formNotes, setFormNotes] = useState('');
    const [isSavingVacation, setIsSavingVacation] = useState(false);

    // Calendario de equipo
    const todayNIC = window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0];
    const [currentCalYear, setCurrentCalYear] = useState(new Date().getFullYear());
    const [currentCalMonth, setCurrentCalMonth] = useState(new Date().getMonth()); // 0 a 11

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

    // Cálculo consolidado de saldos por colaborador
    const userBalances = useMemo(() => {
        const rate = parseFloat(settings?.vacationRate || 2.5);
        return activeUsers.map(u => {
            const balanceNum = parseFloat(window.calculateVacationBalance(u, rate, vacations)) || 0;
            const accruedNum = parseFloat(window.calculateVacationAccrued(u, rate)) || 0;
            const baseSalary = parseFloat(u.baseSalary) || 0;
            const dailyRate = baseSalary / 30;
            const liabilityCords = balanceNum * dailyRate;

            return {
                ...u,
                vacationBalance: balanceNum,
                accruedTotal: accruedNum,
                liabilityCords: liabilityCords,
                dailyRate: dailyRate
            };
        });
    }, [activeUsers, settings?.vacationRate, vacations]);

    // Métricas Financieras y Operativas Globales
    const metrics = useMemo(() => {
        let totalLiability = 0;
        let totalReservedDays = 0;
        let atRiskCount = 0;

        userBalances.forEach(u => {
            totalLiability += u.liabilityCords;
            totalReservedDays += u.vacationBalance;
            if (u.vacationBalance >= 30) {
                atRiskCount++;
            }
        });

        // Días disfrutados este año
        const currentYearStr = String(new Date().getFullYear());
        const approvedThisYear = (vacations || [])
            .filter(v => v.status === 'approved' && v.startDate && v.startDate.startsWith(currentYearStr));
        
        const totalTakenDaysThisYear = approvedThisYear.reduce((acc, v) => {
            if (v.type === 'paid') return acc + (parseFloat(v.paidDays) || 0);
            if (v.type === 'half') return acc + 0.5;
            return acc + (window.getDaysDiff ? window.getDaysDiff(v.startDate, v.endDate || v.startDate) : 1);
        }, 0);

        return {
            totalLiability: totalLiability.toFixed(2),
            totalReservedDays: totalReservedDays.toFixed(2),
            atRiskCount,
            totalTakenDaysThisYear: totalTakenDaysThisYear.toFixed(1)
        };
    }, [userBalances, vacations]);

    // Filtrado de colaboradores
    const filteredUsers = useMemo(() => {
        return userBalances.filter(u => {
            const matchesText = !searchFilter.trim() || 
                (u.name || '').toLowerCase().includes(searchFilter.toLowerCase()) ||
                (u.alias || '').toLowerCase().includes(searchFilter.toLowerCase()) ||
                (u.email || '').toLowerCase().includes(searchFilter.toLowerCase());

            const userRole = (u.role_name || u.role || '').toLowerCase();
            const matchesRole = roleFilter === 'todos' || userRole === roleFilter.toLowerCase();

            return matchesText && matchesRole;
        });
    }, [userBalances, searchFilter, roleFilter]);

    // Lista de roles únicos para el filtro
    const availableRoles = useMemo(() => {
        const setR = new Set();
        (globalUsers || []).forEach(u => {
            const r = u.role_name || u.role;
            if (r) setR.add(r.trim());
        });
        return Array.from(setR);
    }, [globalUsers]);

    // Solicitudes entrantes y aprobadas
    const pendingRequests = useMemo(() => {
        return (vacations || []).filter(v => v.status === 'pending');
    }, [vacations]);

    const approvedVacsHistory = useMemo(() => {
        return (vacations || [])
            .filter(v => v.status === 'approved')
            .sort((a,b) => (b.requestedAt || 0) - (a.requestedAt || 0));
    }, [vacations]);

    const totalVacPages = Math.ceil(approvedVacsHistory.length / 8);
    const paginatedVacs = approvedVacsHistory.slice(vacPage * 8, (vacPage + 1) * 8);

    // Validador de colisión de rol para un rango de fechas y usuario
    const detectTeamClashes = (targetUserId, startDate, endDate) => {
        if (!targetUserId || !startDate) return [];
        const targetUser = globalUsers.find(u => Number(u.id) === Number(targetUserId));
        if (!targetUser) return [];

        const targetRole = (targetUser.role_name || targetUser.role || '').toLowerCase().trim();
        const end = endDate || startDate;

        const clashes = [];
        (vacations || []).forEach(v => {
            if (v.status !== 'approved' || Number(v.userId) === Number(targetUserId)) return;
            const otherUser = globalUsers.find(u => Number(u.id) === Number(v.userId));
            if (!otherUser) return;

            const otherRole = (otherUser.role_name || otherUser.role || '').toLowerCase().trim();
            if (targetRole && otherRole && targetRole === otherRole) {
                const vStart = v.startDate;
                const vEnd = v.endDate || v.startDate;
                if (vStart <= end && vEnd >= startDate) {
                    clashes.push({
                        otherUser: otherUser.name,
                        role: targetRole,
                        start: vStart,
                        end: vEnd
                    });
                }
            }
        });
        return clashes;
    };

    // Alerta de colisión para el formulario de registro manual
    const currentFormClashes = useMemo(() => {
        if (formType === 'paid' || !formUserId || !formStartDate) return [];
        return detectTeamClashes(formUserId, formStartDate, formType === 'half' ? formStartDate : formEndDate);
    }, [formUserId, formStartDate, formEndDate, formType, vacations]);

    // Apertura del Kardex
    const handleOpenKardex = (user) => {
        setKardexUser(user);
    };

    // Registro manual de vacación o compensación
    const handleRegisterVacationSubmit = async (e) => {
        e.preventDefault();
        if (isReadOnly) return alert("Modo supervisión: sin permisos de edición.");

        if (!formUserId) {
            alert("Por favor seleccione un colaborador.");
            return;
        }

        setIsSavingVacation(true);
        try {
            const payload = {
                userId: Number(formUserId),
                type: formType,
                startDate: formType === 'paid' ? (window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0]) : formStartDate,
                endDate: formType === 'paid' ? (window.getNICDate ? window.getNICDate() : new Date().toISOString().split('T')[0]) : (formType === 'half' ? formStartDate : formEndDate),
                paidDays: formType === 'paid' ? parseFloat(formPaidDays) : (formType === 'half' ? 0.5 : null),
                status: 'approved',
                notes: formNotes || (formType === 'paid' ? 'Compensación de vacaciones en dinero' : 'Vacación autorizada por administración'),
                requestedAt: Date.now()
            };

            const res = await window.apiCall('add_vacation', payload);
            if (res && res.success) {
                if (showToast) showToast("Registro vacacional procesado exitosamente.");
                setShowRegisterModal(false);
                setShowCashCompModal(false);
                setFormNotes('');
                if (refreshData) await refreshData();
            } else {
                alert("Error al guardar: " + (res?.error || "Respuesta inválida."));
            }
        } catch (err) {
            alert("Error de conexión al guardar.");
        } finally {
            setIsSavingVacation(false);
        }
    };

    // Apertura rápida de compensación en efectivo para un colaborador específico
    const handleOpenCashComp = (user) => {
        setFormUserId(user.id);
        setFormType('paid');
        setFormPaidDays(Math.min(user.vacationBalance > 0 ? Math.floor(user.vacationBalance) : 1, 15));
        setFormNotes('Compensación económica de vacaciones acordada con el trabajador');
        setShowCashCompModal(true);
    };

    // Calendario de equipo: Generación de matriz mensual
    const calendarData = useMemo(() => {
        const year = currentCalYear;
        const month = currentCalMonth;
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);

        // Convertir día de semana de domingo=0 a lunes=0
        let startingDayOfWeek = firstDay.getDay() - 1;
        if (startingDayOfWeek === -1) startingDayOfWeek = 6;

        const totalDaysInMonth = lastDay.getDate();
        const daysArray = [];

        // Días previos de relleno
        for (let i = 0; i < startingDayOfWeek; i++) {
            daysArray.push(null);
        }

        // Días del mes
        for (let d = 1; d <= totalDaysInMonth; d++) {
            const dateStr = `${year}-${String(month + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
            
            // Buscar vacaciones aprobadas en este día
            const dayVacs = approvedVacsHistory.filter(v => {
                if (v.type === 'paid') return false; // Pagos en dinero no representan ausencia física
                const s = v.startDate;
                const e = v.endDate || v.startDate;
                return dateStr >= s && dateStr <= e && !(v.revokedDates || []).includes(dateStr);
            });

            // Verificar si hay colisión de rol en este día
            const roleCounts = {};
            dayVacs.forEach(v => {
                const u = globalUsers.find(usr => Number(usr.id) === Number(v.userId));
                const r = (u?.role_name || u?.role || 'colaborador').toLowerCase().trim();
                roleCounts[r] = (roleCounts[r] || 0) + 1;
            });
            const hasClash = Object.values(roleCounts).some(cnt => cnt >= 2);

            daysArray.push({
                dayNumber: d,
                dateStr,
                vacations: dayVacs,
                hasClash
            });
        }

        const monthNames = [
            'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
            'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
        ];

        return {
            monthName: monthNames[month],
            year,
            days: daysArray
        };
    }, [currentCalYear, currentCalMonth, approvedVacsHistory, globalUsers]);

    // Movimiento entre meses
    const handlePrevMonth = () => {
        if (currentCalMonth === 0) {
            setCurrentCalMonth(11);
            setCurrentCalYear(y => y - 1);
        } else {
            setCurrentCalMonth(m => m - 1);
        }
    };

    const handleNextMonth = () => {
        if (currentCalMonth === 11) {
            setCurrentCalMonth(0);
            setCurrentCalYear(y => y + 1);
        } else {
            setCurrentCalMonth(m => m + 1);
        }
    };

    const handleCurrentMonth = () => {
        const now = new Date();
        setCurrentCalYear(now.getFullYear());
        setCurrentCalMonth(now.getMonth());
    };

    // Construcción del Kardex / Libro Mayor Individual
    const userLedgerEntries = useMemo(() => {
        if (!kardexUser) return [];

        const hiringDate = kardexUser.hiringDate || kardexUser.hiring_date;
        if (!hiringDate) return [];

        const rate = parseFloat(settings?.vacationRate || 2.5);
        const entries = [];

        // 1. Acumulación periódica mensual desde la fecha de contratación
        const [hy, hm, hd] = hiringDate.split('-').map(Number);
        let cur = new Date(hy, hm - 1, hd, 12, 0, 0);
        const now = new Date();

        let accruedCount = 0;
        while (cur <= now) {
            cur.setMonth(cur.getMonth() + 1);
            if (cur <= now) {
                accruedCount++;
                const y = cur.getFullYear();
                const m = String(cur.getMonth() + 1).padStart(2, '0');
                const d = String(cur.getDate()).padStart(2, '0');
                entries.push({
                    date: `${y}-${m}-${d}`,
                    type: 'credit',
                    category: 'Acumulación de Ley',
                    description: `Mes ordinario laborado (+${rate.toFixed(2)} días)`,
                    amount: rate,
                    rawTimestamp: cur.getTime()
                });
            }
        }

        // 2. Transacciones aprobadas de este usuario
        const userApprovedVacs = approvedVacsHistory.filter(v => Number(v.userId) === Number(kardexUser.id));
        userApprovedVacs.forEach(v => {
            const isDeduction = v.logId || v.notes?.includes('Horario') || v.notes?.includes('Auditoría') || v.notes?.includes('Reposo Médico');
            const isPaid = v.type === 'paid';
            const daysCount = isPaid ? parseFloat(v.paidDays) : (v.type === 'half' ? 0.5 : (window.getDaysDiff ? window.getDaysDiff(v.startDate, v.endDate || v.startDate) : 1));

            let category = 'Goce de Vacaciones';
            if (isPaid) category = 'Compensación en Dinero';
            else if (isDeduction) category = 'Deducción de Horario / Auditoría';

            entries.push({
                date: v.startDate || window.getNICDate(),
                type: 'debit',
                category: category,
                description: v.notes || (isPaid ? `Liquidación de ${daysCount} día(s) en planilla` : `Período: ${window.formatDateToNIC(v.startDate)} al ${window.formatDateToNIC(v.endDate || v.startDate)}`),
                amount: -daysCount,
                rawTimestamp: v.requestedAt || new Date(v.startDate).getTime(),
                vacationRef: v
            });
        });

        // 3. Ajuste manual de inicio si existe vacationDaysUsed en base de datos
        if (parseFloat(kardexUser.vacationDaysUsed) > 0) {
            entries.push({
                date: hiringDate,
                type: 'debit',
                category: 'Ajuste Histórico Anterior',
                description: 'Días consumidos previos al ingreso al sistema',
                amount: -parseFloat(kardexUser.vacationDaysUsed),
                rawTimestamp: new Date(hiringDate).getTime() - 1000
            });
        }

        // Ordenar cronológicamente y calcular saldo progresivo
        entries.sort((a, b) => a.rawTimestamp - b.rawTimestamp);

        let runningBalance = 0;
        return entries.map(item => {
            runningBalance += item.amount;
            return {
                ...item,
                balanceAfter: runningBalance
            };
        });
    }, [kardexUser, approvedVacsHistory, settings?.vacationRate]);

    return (
        <div className="space-y-6 fade-in font-sans">
            {/* TARJETAS DE MÉTRICAS FINANCIERAS Y OPERATIVAS */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                    <div className="flex items-center justify-between">
                        <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">Pasivo Vacacional Total</span>
                        <div className="w-8 h-8 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center">
                            <VacIcon name="currency" className="w-4 h-4" />
                        </div>
                    </div>
                    <div className="mt-3">
                        <span className="text-xl font-black text-slate-900">C$ {metrics.totalLiability}</span>
                        <p className="text-[10px] text-slate-500 font-medium mt-0.5">Costo total de liquidación actual</p>
                    </div>
                </div>

                <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                    <div className="flex items-center justify-between">
                        <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">Días en Reserva</span>
                        <div className="w-8 h-8 rounded-xl bg-slate-100 text-slate-900 flex items-center justify-center font-bold">
                            <VacIcon name="calendar" className="w-4 h-4" />
                        </div>
                    </div>
                    <div className="mt-3">
                        <span className="text-xl font-black text-slate-900">{metrics.totalReservedDays} días</span>
                        <p className="text-[10px] text-slate-500 font-medium mt-0.5">Saldo acumulado del personal activo</p>
                    </div>
                </div>

                <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                    <div className="flex items-center justify-between">
                        <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">Días Disfrutados ({new Date().getFullYear()})</span>
                        <div className="w-8 h-8 rounded-xl bg-slate-100 text-slate-900 flex items-center justify-center font-bold">
                            <VacIcon name="file-text" className="w-4 h-4" />
                        </div>
                    </div>
                    <div className="mt-3">
                        <span className="text-xl font-black text-slate-900">{metrics.totalTakenDaysThisYear} días</span>
                        <p className="text-[10px] text-slate-500 font-medium mt-0.5">Gozados o compensados este período</p>
                    </div>
                </div>

                <div className="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs">
                    <div className="flex items-center justify-between">
                        <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">Acumulación Crítica</span>
                        <div className={`w-8 h-8 rounded-xl flex items-center justify-center ${metrics.atRiskCount > 0 ? 'bg-amber-50 text-amber-600' : 'bg-slate-50 text-slate-400'}`}>
                            <VacIcon name="alert" className="w-4 h-4" />
                        </div>
                    </div>
                    <div className="mt-3">
                        <span className={`text-xl font-black ${metrics.atRiskCount > 0 ? 'text-amber-600' : 'text-slate-900'}`}>
                            {metrics.atRiskCount} colaboradores
                        </span>
                        <p className="text-[10px] text-slate-500 font-medium mt-0.5">Saldo mayor a 30 días sin descanso</p>
                    </div>
                </div>
            </div>

            {/* BARRA SUPERIOR DE ACCIONES Y PESTAÑAS */}
            <div className="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs flex flex-col md:flex-row md:items-center justify-between gap-4">
                {/* Botones de sub-pestañas */}
                <div className="flex items-center gap-1 bg-slate-100 p-1 rounded-2xl w-full md:w-auto">
                    <button
                        onClick={() => setActiveSubTab('saldos')}
                        className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
                            activeSubTab === 'saldos' ? 'bg-slate-900 text-white shadow-xs' : 'text-slate-500 hover:text-slate-800'
                        }`}
                    >
                        <VacIcon name="users" className="w-3.5 h-3.5" />
                        <span>Saldos & Kardex</span>
                    </button>

                    <button
                        onClick={() => setActiveSubTab('calendario')}
                        className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer ${
                            activeSubTab === 'calendario' ? 'bg-slate-900 text-white shadow-xs' : 'text-slate-500 hover:text-slate-800'
                        }`}
                    >
                        <VacIcon name="calendar" className="w-3.5 h-3.5" />
                        <span>Calendario de Equipo</span>
                    </button>

                    <button
                        onClick={() => setActiveSubTab('solicitudes')}
                        className={`flex-1 md:flex-none flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all cursor-pointer relative ${
                            activeSubTab === 'solicitudes' ? 'bg-slate-900 text-white shadow-xs' : 'text-slate-500 hover:text-slate-800'
                        }`}
                    >
                        <VacIcon name="file-text" className="w-3.5 h-3.5" />
                        <span>Bandeja & Aprobadas</span>
                        {pendingRequests.length > 0 && (
                            <span className="w-2 h-2 rounded-full bg-amber-500 absolute top-2 right-2"></span>
                        )}
                    </button>
                </div>

                {/* Acciones principales */}
                <div className="flex items-center gap-2 justify-end">
                    {!isReadOnly && (
                        <button
                            onClick={() => {
                                setFormUserId(activeUsers[0]?.id || '');
                                setFormType('range');
                                setFormPaidDays(1);
                                setFormNotes('');
                                setShowRegisterModal(true);
                            }}
                            className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-wider shadow-sm transition-all flex items-center gap-2 cursor-pointer active:scale-95"
                        >
                            <VacIcon name="plus" className="w-3.5 h-3.5" />
                            <span>Registrar Vacación</span>
                        </button>
                    )}
                </div>
            </div>

            {/* PESTAÑA 1: SALDOS & KARDEX */}
            {activeSubTab === 'saldos' && (
                <div className="space-y-4">
                    {/* Filtros y buscador */}
                    <div className="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs flex flex-col sm:flex-row items-center justify-between gap-3">
                        <div className="relative w-full sm:w-80">
                            <span className="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none text-slate-400">
                                <VacIcon name="search" className="w-4 h-4" />
                            </span>
                            <input
                                type="text"
                                placeholder="Buscar colaborador por nombre..."
                                value={searchFilter}
                                onChange={e => setSearchFilter(e.target.value)}
                                className="w-full pl-10 pr-4 py-2.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-800 outline-none focus:ring-2 focus:ring-indigo-100"
                            />
                        </div>

                        <div className="flex items-center gap-2 w-full sm:w-auto">
                            <span className="text-[10px] font-black uppercase text-slate-400 tracking-wider">Filtrar Rol:</span>
                            <select
                                value={roleFilter}
                                onChange={e => setRoleFilter(e.target.value)}
                                className="px-3 py-2 bg-slate-50 border border-slate-200 rounded-xl text-xs font-bold text-slate-700 outline-none cursor-pointer"
                            >
                                <option value="todos">Todos los Cargos</option>
                                {availableRoles.map(r => (
                                    <option key={r} value={r}>{r}</option>
                                ))}
                            </select>
                        </div>
                    </div>

                    {/* Tabla de Saldos */}
                    <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs overflow-hidden">
                        <div className="overflow-x-auto no-scrollbar">
                            <table className="w-full text-left border-collapse min-w-[600px] sm:min-w-full">
                                <thead className="bg-slate-50/80 border-b border-slate-100 text-[9px] font-black uppercase tracking-widest text-slate-400">
                                    <tr>
                                        <th className="py-3.5 px-3 sm:px-6">Colaborador</th>
                                        <th className="py-3.5 px-3 sm:px-6">Cargo / Rol</th>
                                        <th className="py-3.5 px-3 sm:px-6">Ingreso</th>
                                        <th className="py-3.5 px-3 sm:px-6 text-center">Saldo Disponible</th>
                                        <th className="py-3.5 px-3 sm:px-6 text-right">Pasivo Laboral</th>
                                        <th className="py-3.5 px-3 sm:px-6 text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody className="divide-y divide-slate-100 text-xs">
                                    {filteredUsers.length === 0 ? (
                                        <tr>
                                            <td colSpan={6} className="py-12 text-center text-slate-400 font-bold">
                                                No se encontraron colaboradores con los criterios seleccionados.
                                            </td>
                                        </tr>
                                    ) : (
                                        filteredUsers.map(u => (
                                            <tr key={u.id} className="hover:bg-slate-50/60 transition-colors">
                                                <td className="py-3.5 px-3 sm:px-6">
                                                    <div className="flex items-center gap-2.5 sm:gap-3">
                                                        <div className="w-8 h-8 rounded-full bg-slate-100 text-slate-700 font-black text-xs flex items-center justify-center shrink-0 border border-slate-200">
                                                            {(u.name || 'U')[0].toUpperCase()}
                                                        </div>
                                                        <div className="overflow-hidden">
                                                            <span className="font-black text-slate-900 block leading-tight truncate max-w-[130px] sm:max-w-none">{u.name}</span>
                                                            <span className="text-[10px] text-slate-400 font-medium block truncate max-w-[130px] sm:max-w-none">{u.email || u.alias}</span>
                                                        </div>
                                                    </div>
                                                </td>

                                                <td className="py-3.5 px-3 sm:px-6 font-bold text-slate-600 text-[11px] truncate max-w-[110px] sm:max-w-none">
                                                    {u.positionTitle || u.role_name || u.role || 'Colaborador'}
                                                </td>

                                                <td className="py-3.5 px-3 sm:px-6 font-bold text-slate-500 text-[11px] whitespace-nowrap">
                                                    {window.formatDateToNIC(u.hiringDate || u.hiring_date)}
                                                </td>

                                                <td className="py-4 px-6 text-center">
                                                    <span className={`inline-block px-3 py-1 rounded-xl font-black text-xs ${
                                                        u.vacationBalance >= 30 ? 'bg-amber-100 text-amber-800' :
                                                        u.vacationBalance > 0 ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' :
                                                        'bg-slate-100 text-slate-500'
                                                    }`}>
                                                        {u.vacationBalance.toFixed(2)} días
                                                    </span>
                                                </td>

                                                <td className="py-4 px-6 text-right font-black text-slate-900">
                                                    C$ {u.liabilityCords.toFixed(2)}
                                                </td>

                                                <td className="py-4 px-6 text-center">
                                                    <div className="flex items-center justify-center gap-1.5">
                                                        <button
                                                            onClick={() => handleOpenKardex(u)}
                                                            className="px-3 py-1.5 bg-indigo-50 hover:bg-indigo-600 hover:text-white text-indigo-700 rounded-xl font-black text-[9px] uppercase tracking-wider transition-all cursor-pointer"
                                                        >
                                                            Ver Kardex
                                                        </button>

                                                        {!isReadOnly && u.vacationBalance > 0 && (
                                                            <button
                                                                onClick={() => handleOpenCashComp(u)}
                                                                className="px-2.5 py-1.5 bg-slate-100 hover:bg-emerald-600 hover:text-white text-slate-700 rounded-xl font-black text-[9px] uppercase tracking-wider transition-all cursor-pointer"
                                                                title="Compensar días en efectivo sin ausencia"
                                                            >
                                                                Compensar
                                                            </button>
                                                        )}
                                                    </div>
                                                </td>
                                            </tr>
                                        ))
                                    )}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            )}

            {/* PESTAÑA 2: CALENDARIO DE EQUIPO */}
            {activeSubTab === 'calendario' && (
                <div className="space-y-4">
                    {/* Cabecera del calendario con navegación */}
                    <div className="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs flex items-center justify-between">
                        <div className="flex items-center gap-3">
                            <h3 className="font-black text-slate-900 text-base">
                                {calendarData.monthName} {calendarData.year}
                            </h3>
                            <button
                                onClick={handleCurrentMonth}
                                className="px-3 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-lg text-[10px] font-black uppercase tracking-wider cursor-pointer"
                            >
                                Mes Actual
                            </button>
                        </div>

                        <div className="flex items-center gap-1.5">
                            <button
                                onClick={handlePrevMonth}
                                className="p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer"
                                title="Mes anterior"
                            >
                                <VacIcon name="chevron-left" className="w-4 h-4" />
                            </button>
                            <button
                                onClick={handleNextMonth}
                                className="p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-700 transition-colors cursor-pointer"
                                title="Mes siguiente"
                            >
                                <VacIcon name="chevron-right" className="w-4 h-4" />
                            </button>
                        </div>
                    </div>

                    {/* Grilla mensual */}
                    <div className="bg-white rounded-2xl border border-slate-200/80 shadow-xs p-4 overflow-hidden">
                        {/* Días de la semana */}
                        <div className="grid grid-cols-7 gap-2 mb-2 text-center text-[10px] font-black uppercase tracking-widest text-slate-400">
                            <div>Lun</div>
                            <div>Mar</div>
                            <div>Mié</div>
                            <div>Jue</div>
                            <div>Vie</div>
                            <div>Sáb</div>
                            <div>Dom</div>
                        </div>

                        {/* Celdas del mes */}
                        <div className="grid grid-cols-7 gap-2">
                            {calendarData.days.map((item, idx) => {
                                if (!item) {
                                    return <div key={`empty_${idx}`} className="min-h-24 bg-slate-50/40 rounded-2xl border border-dashed border-slate-100"></div>;
                                }

                                const isToday = item.dateStr === todayNIC;
                                const hasVacations = item.vacations && item.vacations.length > 0;

                                return (
                                    <div
                                        key={item.dateStr}
                                        className={`min-h-24 p-2 rounded-2xl border transition-all flex flex-col justify-between ${
                                            isToday ? 'bg-slate-100 border-slate-300' :
                                            hasVacations ? 'bg-slate-50/80 border-slate-200' :
                                            'bg-white border-slate-100 hover:border-slate-200'
                                        }`}
                                    >
                                        <div className="flex items-center justify-between">
                                            <span className={`text-[11px] font-black ${isToday ? 'w-5 h-5 rounded-full bg-slate-900 text-white flex items-center justify-center' : 'text-slate-600'}`}>
                                                {item.dayNumber}
                                            </span>

                                            {item.hasClash && (
                                                <span className="px-1.5 py-0.5 rounded-md bg-amber-100 text-amber-800 text-[8px] font-black uppercase" title="Advertencia: coincidencia de personal del mismo cargo">
                                                    Alerta
                                                </span>
                                            )}
                                        </div>

                                        {/* Lista de colaboradores ausentes */}
                                        <div className="space-y-1 mt-1.5 flex-1 overflow-y-auto no-scrollbar max-h-16">
                                            {item.vacations.map(v => (
                                                <div
                                                    key={v.id}
                                                    className="px-1.5 py-1 rounded-lg bg-slate-200/80 border border-slate-300 text-[9px] font-bold text-slate-900 leading-tight truncate"
                                                    title={`${v.userName} - ${v.notes || 'Vacaciones'}`}
                                                >
                                                    {v.userName}
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            )}

            {/* PESTAÑA 3: BANDEJA DE SOLICITUDES & APROBADAS */}
            {activeSubTab === 'solicitudes' && (
                <div className="space-y-6">
                    {/* SOLICITUDES ENTRANTES */}
                    <div>
                        <div className="flex items-center justify-between border-b border-slate-200 pb-3 mb-4">
                            <h3 className="font-black text-sm uppercase tracking-wider text-slate-800">
                                Solicitudes Pendientes ({pendingRequests.length})
                            </h3>
                        </div>

                        {pendingRequests.length === 0 ? (
                            <div className="bg-white rounded-2xl p-8 text-center border border-slate-200/80 shadow-xs">
                                <p className="text-xs font-bold text-slate-400">Bandeja limpia. No hay solicitudes pendientes de revisión.</p>
                            </div>
                        ) : (
                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                                {pendingRequests.map(v => {
                                    const daysCount = v.type === 'half' ? 0.5 : (window.getDaysDiff ? window.getDaysDiff(v.startDate, v.endDate || v.startDate) : 1);
                                    const clashes = detectTeamClashes(v.userId, v.startDate, v.endDate || v.startDate);

                                    return (
                                        <div key={v.id} className="bg-white p-5 rounded-2xl border border-amber-200/80 shadow-xs space-y-3">
                                            <div className="flex items-start justify-between">
                                                <div>
                                                    <h4 className="font-black text-slate-900 text-sm">{v.userName}</h4>
                                                    <span className="text-[10px] font-black uppercase text-amber-700 bg-amber-50 px-2 py-0.5 rounded-md inline-block mt-1">
                                                        Solicita: {v.type === 'half' ? 'Medio Día (0.5)' : `${daysCount} Día(s)`}
                                                    </span>
                                                </div>
                                                <span className="text-[10px] font-bold text-slate-400">
                                                    {window.formatNICTimeFull ? window.formatNICTimeFull(v.requestedAt) : ''}
                                                </span>
                                            </div>

                                            <div className="bg-slate-50 p-3 rounded-2xl border border-slate-100 text-xs text-slate-600 font-medium">
                                                <p><strong className="text-slate-800">Período:</strong> Del {window.formatDateToNIC(v.startDate)} {v.type === 'range' ? `al ${window.formatDateToNIC(v.endDate)}` : ''}</p>
                                                {v.notes && <p className="mt-1 text-[11px] text-slate-500 italic">"{v.notes}"</p>}
                                            </div>

                                            {/* Advertencia de colisión de rol */}
                                            {clashes.length > 0 && (
                                                <div className="p-2.5 rounded-xl bg-amber-50 border border-amber-200 text-[10px] text-amber-900 font-bold flex items-center gap-2">
                                                    <VacIcon name="alert" className="w-3.5 h-3.5 text-amber-600 shrink-0" />
                                                    <span>
                                                        Conflicto de cargo: {clashes.map(c => c.otherUser).join(', ')} ya tiene descanso en este período.
                                                    </span>
                                                </div>
                                            )}

                                            {!isReadOnly && (
                                                <div className="flex items-center gap-2 pt-1">
                                                    <button
                                                        onClick={() => setVacationStatus(v.id, 'approved')}
                                                        className="flex-1 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-black uppercase text-[10px] tracking-wider transition-all cursor-pointer active:scale-95"
                                                    >
                                                        Aprobar
                                                    </button>
                                                    <button
                                                        onClick={() => setVacationStatus(v.id, 'denied')}
                                                        className="flex-1 py-2.5 bg-slate-100 hover:bg-red-50 hover:text-red-700 text-slate-600 rounded-xl font-black uppercase text-[10px] tracking-wider transition-all cursor-pointer active:scale-95"
                                                    >
                                                        Denegar
                                                    </button>
                                                </div>
                                            )}
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>

                    {/* HISTORIAL GENERAL DE APROBADAS */}
                    <div>
                        <div className="flex justify-between items-center border-b border-slate-200 pb-3 mb-4">
                            <h3 className="font-black text-sm uppercase tracking-wider text-slate-800">
                                Historial de Vacaciones Aprobadas ({approvedVacsHistory.length})
                            </h3>

                            <div className="flex gap-2 items-center bg-white rounded-full shadow-xs border border-slate-200 px-2 py-1">
                                <button
                                    disabled={vacPage === 0}
                                    onClick={() => setVacPage(p => p - 1)}
                                    className={`p-1.5 rounded-full transition-colors ${vacPage === 0 ? 'opacity-30' : 'hover:bg-slate-100 text-slate-600 cursor-pointer'}`}
                                >
                                    <VacIcon name="chevron-left" className="w-3.5 h-3.5" />
                                </button>
                                <span className="text-[10px] font-black text-slate-400 px-2 tracking-widest">{vacPage + 1} / {totalVacPages || 1}</span>
                                <button
                                    disabled={vacPage >= (totalVacPages - 1)}
                                    onClick={() => setVacPage(p => p + 1)}
                                    className={`p-1.5 rounded-full transition-colors ${vacPage >= (totalVacPages - 1) ? 'opacity-30' : 'hover:bg-slate-100 text-slate-600 cursor-pointer'}`}
                                >
                                    <VacIcon name="chevron-right" className="w-3.5 h-3.5" />
                                </button>
                            </div>
                        </div>

                        {paginatedVacs.length === 0 ? (
                            <p className="text-xs font-bold text-slate-400">Sin registros históricos.</p>
                        ) : (
                            <div className="space-y-3">
                                {paginatedVacs.map(v => {
                                    const daysCount = v.type === 'half' ? 0.5 : (v.type === 'paid' ? v.paidDays : (window.getDaysDiff ? window.getDaysDiff(v.startDate, v.endDate || v.startDate) : 1));
                                    const isPaid = v.type === 'paid';
                                    const isDeduction = v.logId || v.notes?.includes('Horario') || v.notes?.includes('Auditoría') || v.notes?.includes('Reposo Médico');

                                    return (
                                        <div key={v.id} className="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-xs flex flex-col md:flex-row justify-between items-center gap-3">
                                            <div>
                                                <div className="flex items-center gap-2 flex-wrap">
                                                    <h4 className="font-black text-slate-900 text-sm">{v.userName}</h4>

                                                    {isPaid ? (
                                                        <span className="px-2.5 py-0.5 bg-blue-50 text-blue-700 border border-blue-200 rounded-lg text-[9px] font-black uppercase">
                                                            Compensación en Efectivo
                                                        </span>
                                                    ) : isDeduction ? (
                                                        <span className="px-2.5 py-0.5 bg-amber-50 text-amber-800 border border-amber-200 rounded-lg text-[9px] font-black uppercase">
                                                            Deducción Horario / Auditoría
                                                        </span>
                                                    ) : (
                                                        <span className="px-2.5 py-0.5 bg-indigo-50 text-indigo-700 border border-indigo-200 rounded-lg text-[9px] font-black uppercase">
                                                            Solicitud Vacacional
                                                        </span>
                                                    )}

                                                    <span className="px-2 py-0.5 bg-emerald-50 text-emerald-700 text-[9px] font-black rounded-lg border border-emerald-200 uppercase">
                                                        {daysCount} Día(s)
                                                    </span>
                                                </div>

                                                <p className="text-[10px] text-slate-500 font-bold uppercase mt-1 tracking-wider">
                                                    {isPaid ? `Liquidado en dinero (${v.paidDays} días)` : `Del ${window.formatDateToNIC(v.startDate)} ${v.type === 'range' ? `al ${window.formatDateToNIC(v.endDate)}` : ''}`}
                                                </p>
                                                {v.notes && <p className="text-[10px] text-slate-400 italic mt-0.5">"{v.notes}"</p>}
                                            </div>

                                            <div className="flex items-center gap-2">
                                                {/* Boleta imprimible MITRAB */}
                                                {!isPaid && (
                                                    <button
                                                        onClick={() => setSelectedSlipVacation(v)}
                                                        className="px-3 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-black uppercase text-[9px] tracking-wider transition-all flex items-center gap-1.5 cursor-pointer"
                                                        title="Generar boleta formal de vacaciones"
                                                    >
                                                        <VacIcon name="printer" className="w-3.5 h-3.5" />
                                                        <span>Boleta</span>
                                                    </button>
                                                )}

                                                {/* Revocar */}
                                                {!isReadOnly && (
                                                    <button
                                                        onClick={() => revokeEntireVacation(v)}
                                                        className="px-3 py-2 bg-red-50 hover:bg-red-600 hover:text-white text-red-600 rounded-xl font-black uppercase text-[9px] tracking-wider transition-all border border-red-100 cursor-pointer"
                                                    >
                                                        Revocar
                                                    </button>
                                                )}
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        )}
                    </div>
                </div>
            )}

            {/* MODAL / DRAWER: KARDEX INDIVIDUAL */}
            {kardexUser && (
                <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
                    <div className="bg-white w-full max-w-3xl rounded-2xl shadow-xl border border-slate-200/80 overflow-hidden flex flex-col max-h-[90vh]">
                        {/* Cabecera del Kardex */}
                        <div className="bg-slate-900 text-white p-6 flex items-start justify-between">
                            <div>
                                <span className="text-[10px] font-black uppercase tracking-widest text-indigo-300">Libro Mayor de Vacaciones (Kardex)</span>
                                <h3 className="text-xl font-black text-white mt-1">{kardexUser.name}</h3>
                                <div className="flex items-center gap-3 mt-1.5 text-xs text-slate-300">
                                    <span><strong>Cargo:</strong> {kardexUser.positionTitle || kardexUser.role_name || kardexUser.role}</span>
                                    <span>•</span>
                                    <span><strong>Ingreso:</strong> {window.formatDateToNIC(kardexUser.hiringDate || kardexUser.hiring_date)}</span>
                                    <span>•</span>
                                    <span><strong>Salario Diario:</strong> C$ {(parseFloat(kardexUser.baseSalary || 0) / 30).toFixed(2)}</span>
                                </div>
                            </div>
                            <button
                                onClick={() => setKardexUser(null)}
                                className="p-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors cursor-pointer"
                            >
                                <VacIcon name="x" className="w-5 h-5" />
                            </button>
                        </div>

                        {/* Tarjetas de Saldo del Colaborador */}
                        <div className="bg-slate-50 p-4 border-b border-slate-200 grid grid-cols-3 gap-3 text-center">
                            <div className="bg-white p-3 rounded-2xl border border-slate-200">
                                <span className="text-[9px] font-black uppercase text-slate-400 block">Días Acumulados</span>
                                <span className="text-base font-black text-slate-800">
                                    {window.calculateVacationAccrued(kardexUser, settings?.vacationRate || 2.5).toFixed(2)}
                                </span>
                            </div>

                            <div className="bg-white p-3 rounded-2xl border border-slate-200">
                                <span className="text-[9px] font-black uppercase text-slate-400 block">Saldo Neto Disponible</span>
                                <span className="text-base font-black text-emerald-600">
                                    {window.calculateVacationBalance(kardexUser, settings?.vacationRate || 2.5, vacations)} días
                                </span>
                            </div>

                            <div className="bg-white p-3 rounded-2xl border border-slate-200">
                                <span className="text-[9px] font-black uppercase text-slate-400 block">Pasivo Estimado</span>
                                <span className="text-base font-black text-slate-800">
                                    C$ {((parseFloat(window.calculateVacationBalance(kardexUser, settings?.vacationRate || 2.5, vacations)) || 0) * (parseFloat(kardexUser.baseSalary || 0) / 30)).toFixed(2)}
                                </span>
                            </div>
                        </div>

                        {/* Tabla cronológica del Kardex */}
                        <div className="p-6 overflow-y-auto flex-1">
                            <h4 className="font-black text-xs uppercase tracking-wider text-slate-700 mb-3">Movimientos Registrados</h4>
                            
                            {userLedgerEntries.length === 0 ? (
                                <p className="text-xs text-slate-400 font-bold py-8 text-center">No hay movimientos registrados para este colaborador.</p>
                            ) : (
                                <div className="border border-slate-200 rounded-2xl overflow-hidden">
                                    <table className="w-full text-left border-collapse text-xs">
                                        <thead className="bg-slate-100 text-[9px] font-black uppercase tracking-wider text-slate-500 border-b border-slate-200">
                                            <tr>
                                                <th className="p-3">Fecha</th>
                                                <th className="p-3">Categoría</th>
                                                <th className="p-3">Detalle</th>
                                                <th className="p-3 text-right">Movimiento</th>
                                                <th className="p-3 text-right">Saldo</th>
                                            </tr>
                                        </thead>
                                        <tbody className="divide-y divide-slate-100">
                                            {userLedgerEntries.map((entry, idx) => (
                                                <tr key={idx} className="hover:bg-slate-50">
                                                    <td className="p-3 font-bold text-slate-600">{window.formatDateToNIC(entry.date)}</td>
                                                    <td className="p-3 font-bold text-slate-700">{entry.category}</td>
                                                    <td className="p-3 text-slate-500 font-medium">{entry.description}</td>
                                                    <td className={`p-3 text-right font-black ${entry.amount > 0 ? 'text-emerald-600' : 'text-slate-800'}`}>
                                                        {entry.amount > 0 ? `+${entry.amount.toFixed(2)}` : entry.amount.toFixed(2)}
                                                    </td>
                                                    <td className="p-3 text-right font-black text-indigo-700">
                                                        {entry.balanceAfter.toFixed(2)}
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </div>
                            )}
                        </div>

                        {/* Pie de acciones del Kardex */}
                        <div className="bg-slate-50 p-4 border-t border-slate-200 flex items-center justify-between">
                            <span className="text-[10px] text-slate-400 font-medium">Cálculo amparado en el Código del Trabajo de Nicaragua.</span>
                            
                            <div className="flex items-center gap-2">
                                {!isReadOnly && (
                                    <button
                                        onClick={() => {
                                            handleOpenCashComp(kardexUser);
                                        }}
                                        className="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-black text-[10px] uppercase tracking-wider transition-all cursor-pointer"
                                    >
                                        Compensar en Dinero
                                    </button>
                                )}
                                <button
                                    onClick={() => setKardexUser(null)}
                                    className="px-4 py-2 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded-xl font-black text-[10px] uppercase tracking-wider transition-all cursor-pointer"
                                >
                                    Cerrar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* MODAL: REGISTRAR VACACIÓN MANUAL */}
            {showRegisterModal && (
                <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
                    <div className="bg-white w-full max-w-lg rounded-2xl shadow-xl border border-slate-200/80 overflow-hidden">
                        <div className="bg-slate-900 text-white p-6 flex items-center justify-between">
                            <div>
                                <span className="text-[10px] font-black uppercase tracking-widest text-indigo-300">Gestión de RRHH</span>
                                <h3 className="text-lg font-black text-white mt-0.5">Registrar Vacación Manual</h3>
                            </div>
                            <button onClick={() => setShowRegisterModal(false)} className="text-slate-400 hover:text-white cursor-pointer">
                                <VacIcon name="x" className="w-5 h-5" />
                            </button>
                        </div>

                        <form onSubmit={handleRegisterVacationSubmit} className="p-6 space-y-4">
                            <div>
                                <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Colaborador</label>
                                <select
                                    value={formUserId}
                                    onChange={e => setFormUserId(e.target.value)}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-800 outline-none focus:ring-2 focus:ring-indigo-100 cursor-pointer"
                                    required
                                >
                                    {activeUsers.map(u => (
                                        <option key={u.id} value={u.id}>
                                            {u.name} (Saldo: {window.calculateVacationBalance(u, settings?.vacationRate || 2.5, vacations)} días)
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Modalidad</label>
                                <div className="grid grid-cols-2 gap-2">
                                    <button
                                        type="button"
                                        onClick={() => setFormType('range')}
                                        className={`py-2.5 rounded-xl font-black text-[10px] uppercase tracking-wider transition-all cursor-pointer ${
                                            formType === 'range' ? 'bg-indigo-600 text-white shadow-xs' : 'bg-slate-100 text-slate-600'
                                        }`}
                                    >
                                        Jornada Completa
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => setFormType('half')}
                                        className={`py-2.5 rounded-xl font-black text-[10px] uppercase tracking-wider transition-all cursor-pointer ${
                                            formType === 'half' ? 'bg-indigo-600 text-white shadow-xs' : 'bg-slate-100 text-slate-600'
                                        }`}
                                    >
                                        Medio Día (0.5)
                                    </button>
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-3">
                                <div>
                                    <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Fecha de Inicio</label>
                                    <input
                                        type="date"
                                        value={formStartDate}
                                        onChange={e => {
                                            setFormStartDate(e.target.value);
                                            if (e.target.value > formEndDate) setFormEndDate(e.target.value);
                                        }}
                                        className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-800 outline-none focus:ring-2 focus:ring-indigo-100"
                                        required
                                    />
                                </div>

                                {formType === 'range' && (
                                    <div>
                                        <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Fecha de Fin</label>
                                        <input
                                            type="date"
                                            value={formEndDate}
                                            min={formStartDate}
                                            onChange={e => setFormEndDate(e.target.value)}
                                            className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-800 outline-none focus:ring-2 focus:ring-indigo-100"
                                            required
                                        />
                                    </div>
                                )}
                            </div>

                            <div>
                                <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Observaciones / Motivo</label>
                                <textarea
                                    value={formNotes}
                                    onChange={e => setFormNotes(e.target.value)}
                                    placeholder="Detalles de la autorización..."
                                    rows={2}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-medium text-slate-800 outline-none focus:ring-2 focus:ring-indigo-100 resize-none"
                                />
                            </div>

                            {/* Alerta de colisión en tiempo real */}
                            {currentFormClashes.length > 0 && (
                                <div className="p-3 rounded-2xl bg-amber-50 border border-amber-200 text-xs text-amber-900 font-bold flex items-center gap-2">
                                    <VacIcon name="alert" className="w-4 h-4 text-amber-600 shrink-0" />
                                    <span>
                                        Alerta de cobertura: {currentFormClashes.map(c => c.otherUser).join(', ')} del mismo cargo ya tiene vacaciones aprobadas en estas fechas.
                                    </span>
                                </div>
                            )}

                            <div className="pt-2 flex items-center gap-2">
                                <button
                                    type="submit"
                                    disabled={isSavingVacation}
                                    className="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl font-black text-xs uppercase tracking-wider shadow-sm transition-all cursor-pointer"
                                >
                                    {isSavingVacation ? "Guardando..." : "Confirmar y Autorizar"}
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setShowRegisterModal(false)}
                                    className="px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-2xl font-black text-xs uppercase tracking-wider transition-all cursor-pointer"
                                >
                                    Cancelar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* MODAL: COMPENSACIÓN / PAGO EN EFECTIVO */}
            {showCashCompModal && (
                <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4">
                    <div className="bg-white w-full max-w-md rounded-2xl shadow-xl border border-slate-200/80 overflow-hidden">
                        <div className="bg-emerald-950 text-white p-6 flex items-center justify-between">
                            <div>
                                <span className="text-[10px] font-black uppercase tracking-widest text-emerald-400">Liquidación Directa</span>
                                <h3 className="text-lg font-black text-white mt-0.5">Compensar Vacaciones en Dinero</h3>
                            </div>
                            <button onClick={() => setShowCashCompModal(false)} className="text-slate-400 hover:text-white cursor-pointer">
                                <VacIcon name="x" className="w-5 h-5" />
                            </button>
                        </div>

                        <form onSubmit={handleRegisterVacationSubmit} className="p-6 space-y-4">
                            <div>
                                <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Colaborador</label>
                                <select
                                    value={formUserId}
                                    onChange={e => setFormUserId(e.target.value)}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold text-slate-800 outline-none cursor-pointer"
                                    required
                                >
                                    {activeUsers.map(u => (
                                        <option key={u.id} value={u.id}>
                                            {u.name} (Saldo: {window.calculateVacationBalance(u, settings?.vacationRate || 2.5, vacations)} d)
                                        </option>
                                    ))}
                                </select>
                            </div>

                            <div>
                                <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Cantidad de Días a Pagar</label>
                                <input
                                    type="number"
                                    min="0.5"
                                    step="0.5"
                                    max="60"
                                    value={formPaidDays}
                                    onChange={e => setFormPaidDays(e.target.value)}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-sm font-black text-slate-900 outline-none focus:ring-2 focus:ring-emerald-200"
                                    required
                                />
                                {(() => {
                                    const u = activeUsers.find(usr => Number(usr.id) === Number(formUserId));
                                    const daily = (parseFloat(u?.baseSalary || 0) / 30);
                                    const totalMoney = (parseFloat(formPaidDays) || 0) * daily;
                                    return (
                                        <p className="text-[11px] text-slate-500 font-bold mt-1.5">
                                            Equivalente bruto estimado: <strong className="text-emerald-700">C$ {totalMoney.toFixed(2)}</strong> (a razón de C$ {daily.toFixed(2)}/día)
                                        </p>
                                    );
                                })()}
                            </div>

                            <div>
                                <label className="block text-[10px] font-black uppercase text-slate-500 mb-1.5">Justificación del Acuerdo</label>
                                <textarea
                                    value={formNotes}
                                    onChange={e => setFormNotes(e.target.value)}
                                    placeholder="Motivo de la compensación en efectivo..."
                                    rows={2}
                                    className="w-full p-3 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-medium text-slate-800 outline-none focus:ring-2 focus:ring-emerald-200 resize-none"
                                />
                            </div>

                            <div className="pt-2 flex items-center gap-2">
                                <button
                                    type="submit"
                                    disabled={isSavingVacation}
                                    className="flex-1 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl font-black text-xs uppercase tracking-wider shadow-sm transition-all cursor-pointer"
                                >
                                    {isSavingVacation ? "Procesando..." : "Confirmar Compensación"}
                                </button>
                                <button
                                    type="button"
                                    onClick={() => setShowCashCompModal(false)}
                                    className="px-5 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-2xl font-black text-xs uppercase tracking-wider transition-all cursor-pointer"
                                >
                                    Cancelar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            )}

            {/* MODAL: BOLETA OFICIAL DE VACACIONES (MITRAB NICARAGUA) */}
            {selectedSlipVacation && (() => {
                const handlePrintOfficialVacationSlip = (v) => {
                    const u = globalUsers.find(usr => Number(usr.id) === Number(v.userId)) || {};
                    const daysCount = v.type === 'half' ? 0.5 : (window.getDaysDiff ? window.getDaysDiff(v.startDate, v.endDate || v.startDate) : 1);
                    const balanceNow = parseFloat(window.calculateVacationBalance(u, settings?.vacationRate || 2.5, vacations)) || 0;
                    const companyName = settings?.companyName || window.SHIFT_CONFIG?.companyName || 'Empresa Empleadora';
                    const ruc = settings?.rucNumber || window.SHIFT_CONFIG?.rucNumber || 'Pendiente de Registro';
                    const address = settings?.businessAddress ? `${settings.businessAddress}, ${settings.municipality || 'Managua'}` : 'Managua, Nicaragua';
                    const logoUrl = settings?.logoUrl || window.SHIFT_CONFIG?.companyLogo;

                    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(`
                        <!DOCTYPE html>
                        <html lang="es">
                        <head>
                            <meta charset="utf-8">
                            <title>Boleta Vacaciones - ${v.userName}</title>
                            <style>
                                @page { size: letter portrait; margin: 15mm 20mm; }
                                * { box-sizing: border-box; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
                                body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #0f172a; background: #fff; margin: 0; padding: 20px; font-size: 11px; line-height: 1.5; }
                                .container { max-width: 680px; margin: 0 auto; border: 1.5px solid #0f172a; border-radius: 8px; padding: 28px 32px; }
                                .header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0f172a; padding-bottom: 14px; margin-bottom: 16px; }
                                .company-name { font-size: 16px; font-weight: 900; text-transform: uppercase; margin: 0 0 4px 0; }
                                .company-sub { font-size: 10px; color: #475569; margin: 0; }
                                .title-block { text-align: center; margin: 18px 0; }
                                .doc-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; color: #0f172a; margin: 0; }
                                .doc-subtitle { font-size: 10px; color: #64748b; margin: 4px 0 0 0; }
                                .info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; }
                                .info-item { font-size: 10.5px; }
                                .info-label { font-size: 8.5px; font-weight: 800; text-transform: uppercase; color: #64748b; display: block; margin-bottom: 2px; }
                                .info-val { font-weight: 700; color: #0f172a; }
                                .section-title { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; color: #0f172a; border-bottom: 1px solid #e2e8f0; padding-bottom: 4px; margin: 16px 0 10px 0; }
                                .period-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; text-align: center; margin-bottom: 14px; }
                                .period-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; }
                                .period-box.highlight { background: #ecfdf5; border-color: #a7f3d0; }
                                .period-label { font-size: 8.5px; font-weight: 800; text-transform: uppercase; color: #64748b; display: block; margin-bottom: 2px; }
                                .period-box.highlight .period-label { color: #047857; }
                                .period-val { font-size: 12px; font-weight: 800; color: #0f172a; }
                                .period-box.highlight .period-val { color: #065f46; }
                                .notes-box { font-size: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px 12px; margin-bottom: 14px; }
                                .legal-box { font-size: 10px; color: #334155; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 14px; line-height: 1.4; margin-bottom: 28px; }
                                .signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: center; margin-top: 36px; padding-top: 10px; }
                                .sig-line { border-top: 1px solid #64748b; padding-top: 6px; font-size: 10px; }
                                .sig-role { font-size: 9px; color: #64748b; margin-top: 2px; }
                            </style>
                        </head>
                        <body>
                            <div class="container">
                                <div class="header">
                                    <div>
                                        <h1 class="company-name">${companyName}</h1>
                                        <p class="company-sub">RUC: ${ruc} • Nicaragua</p>
                                        <p class="company-sub">${address}</p>
                                    </div>
                                    ${logoUrl ? `<img src="${logoUrl}" style="max-height: 48px; max-width: 140px; object-fit: contain;" />` : ''}
                                </div>
                                <div class="title-block">
                                    <h2 class="doc-title">Constancia Oficial de Autorización y Goce de Vacaciones</h2>
                                    <p class="doc-subtitle">Conforme a los Artículos 76, 77 y 78 del Código del Trabajo de Nicaragua (Ley No. 185)</p>
                                </div>
                                <div class="info-grid">
                                    <div class="info-item">
                                        <span class="info-label">Nombre del Trabajador:</span>
                                        <span class="info-val">${v.userName}</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label">Cédula de Identidad:</span>
                                        <span class="info-val">${u.idCard || 'No registrada'}</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label">Cargo o Función:</span>
                                        <span class="info-val">${u.positionTitle || u.role_name || u.role || 'Colaborador'}</span>
                                    </div>
                                    <div class="info-item">
                                        <span class="info-label">Fecha de Ingreso:</span>
                                        <span class="info-val">${window.formatDateToNIC(u.hiringDate || u.hiring_date)}</span>
                                    </div>
                                </div>
                                <div class="section-title">Detalle del Período Gozado</div>
                                <div class="period-grid">
                                    <div class="period-box">
                                        <span class="period-label">Fecha Inicio</span>
                                        <span class="period-val">${window.formatDateToNIC(v.startDate)}</span>
                                    </div>
                                    <div class="period-box">
                                        <span class="period-label">Fecha Conclusión</span>
                                        <span class="period-val">${window.formatDateToNIC(v.endDate || v.startDate)}</span>
                                    </div>
                                    <div class="period-box highlight">
                                        <span class="period-label">Días Disfrutados</span>
                                        <span class="period-val">${daysCount} día(s)</span>
                                    </div>
                                </div>
                                ${v.notes ? `<div class="notes-box"><strong>Observaciones:</strong> ${v.notes}</div>` : ''}
                                <div class="legal-box">
                                    Hago constar que he disfrutado del período de descanso de vacaciones remuneradas antes detallado en estricto cumplimiento de los derechos establecidos en el Código del Trabajo de Nicaragua.<br/>
                                    <strong>Saldo remanente disponible a la fecha: ${balanceNow.toFixed(2)} días.</strong>
                                </div>
                                <div class="signatures">
                                    <div>
                                        <div class="sig-line"><strong>Por la Empresa</strong></div>
                                        <div class="sig-role">Recursos Humanos / Gerencia</div>
                                    </div>
                                    <div>
                                        <div class="sig-line"><strong>${v.userName}</strong></div>
                                        <div class="sig-role">Firma del Trabajador(a)</div>
                                    </div>
                                </div>
                            </div>
                        </body>
                        </html>
                    `);
                    doc.close();
                    setTimeout(() => {
                        try {
                            printIframe.contentWindow.focus();
                            printIframe.contentWindow.print();
                        } catch (e) {
                            console.error(e);
                        }
                        setTimeout(() => {
                            try { document.body.removeChild(printIframe); } catch (e) {}
                        }, 1000);
                    }, 250);
                };

                return (
                    <div className="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-xs flex items-center justify-center p-4 print-modal-overlay">
                        <div className="bg-white w-full max-w-2xl rounded-2xl shadow-xl border border-slate-200/80 overflow-hidden flex flex-col max-h-[95vh] print-modal-container">
                            <div className="p-4 bg-slate-100 border-b border-slate-200 flex items-center justify-between print:hidden">
                                <span className="text-[10px] font-black uppercase tracking-wider text-slate-600">Constancia Oficial de Goce de Vacaciones</span>
                                <div className="flex items-center gap-2">
                                    <button
                                        onClick={() => handlePrintOfficialVacationSlip(selectedSlipVacation)}
                                        className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-black text-[10px] uppercase tracking-wider flex items-center gap-1.5 cursor-pointer shadow-xs"
                                    >
                                        <VacIcon name="printer" className="w-3.5 h-3.5" />
                                        <span>Imprimir Boleta</span>
                                    </button>
                                    <button
                                        onClick={() => setSelectedSlipVacation(null)}
                                        className="p-2 rounded-xl bg-slate-200 hover:bg-slate-300 text-slate-700 cursor-pointer"
                                    >
                                        <VacIcon name="x" className="w-4 h-4" />
                                    </button>
                                </div>
                            </div>

                        {/* Documento Imprimible */}
                        <div className="p-8 sm:p-12 overflow-y-auto space-y-6 text-slate-900 font-sans print-document-sheet">
                            {/* Cabecera patronal */}
                            <div className="border-b pb-6 border-slate-300 flex items-start justify-between gap-4">
                                <div className="space-y-1">
                                    <h2 className="text-xl font-black uppercase tracking-wider text-slate-900">
                                        {settings?.companyName || window.SHIFT_CONFIG?.companyName || 'Empresa Empleadora'}
                                    </h2>
                                    <p className="text-xs text-slate-600 font-semibold">
                                        RUC: {settings?.rucNumber || window.SHIFT_CONFIG?.rucNumber || 'Pendiente de Registro'} • Nicaragua
                                    </p>
                                    <p className="text-[10px] text-slate-500 font-medium">
                                        {settings?.businessAddress ? `${settings.businessAddress}, ${settings.municipality || 'Managua'}` : 'Managua, Nicaragua'}
                                    </p>
                                </div>
                                {(settings?.logoUrl || window.SHIFT_CONFIG?.companyLogo) && (
                                    <img 
                                        src={settings?.logoUrl || window.SHIFT_CONFIG?.companyLogo} 
                                        alt="Logo" 
                                        className="h-12 w-auto max-w-[140px] object-contain shrink-0" 
                                    />
                                )}
                            </div>

                            <div className="text-center pt-1">
                                <p className="text-xs font-black uppercase text-indigo-900 tracking-wider">
                                    Constancia Oficial de Autorización y Goce de Vacaciones
                                </p>
                                <p className="text-[10px] text-slate-500 font-medium mt-0.5">
                                    Conforme a los Artículos 76, 77 y 78 del Código del Trabajo de Nicaragua (Ley No. 185)
                                </p>
                            </div>

                            {/* Datos del colaborador */}
                            {(() => {
                                const u = globalUsers.find(usr => Number(usr.id) === Number(selectedSlipVacation.userId)) || {};
                                const daysCount = selectedSlipVacation.type === 'half' ? 0.5 : (window.getDaysDiff ? window.getDaysDiff(selectedSlipVacation.startDate, selectedSlipVacation.endDate || selectedSlipVacation.startDate) : 1);
                                const balanceNow = parseFloat(window.calculateVacationBalance(u, settings?.vacationRate || 2.5, vacations)) || 0;

                                return (
                                    <>
                                        <div className="grid grid-cols-2 gap-4 text-xs bg-slate-50 p-4 rounded-2xl border border-slate-200">
                                            <div>
                                                <p className="text-slate-500 text-[10px] font-bold uppercase">Nombre del Trabajador:</p>
                                                <p className="font-black text-slate-900">{selectedSlipVacation.userName}</p>
                                            </div>
                                            <div>
                                                <p className="text-slate-500 text-[10px] font-bold uppercase">Cédula de Identidad:</p>
                                                <p className="font-bold text-slate-800">{u.idCard || 'No registrada'}</p>
                                            </div>
                                            <div>
                                                <p className="text-slate-500 text-[10px] font-bold uppercase">Cargo o Función:</p>
                                                <p className="font-bold text-slate-800">{u.positionTitle || u.role_name || u.role || 'Colaborador'}</p>
                                            </div>
                                            <div>
                                                <p className="text-slate-500 text-[10px] font-bold uppercase">Fecha de Contratación:</p>
                                                <p className="font-bold text-slate-800">{window.formatDateToNIC(u.hiringDate || u.hiring_date)}</p>
                                            </div>
                                        </div>

                                        {/* Detalle del descanso */}
                                        <div className="space-y-3">
                                            <h4 className="font-black text-xs uppercase tracking-wider text-slate-800 border-b border-slate-200 pb-1">
                                                Detalle del Período Gozado
                                            </h4>

                                            <div className="grid grid-cols-3 gap-3 text-center">
                                                <div className="bg-slate-50 p-3 rounded-xl border border-slate-200">
                                                    <span className="text-[9px] font-bold uppercase text-slate-400 block">Fecha Inicio</span>
                                                    <span className="font-black text-slate-800 text-xs">{window.formatDateToNIC(selectedSlipVacation.startDate)}</span>
                                                </div>
                                                <div className="bg-slate-50 p-3 rounded-xl border border-slate-200">
                                                    <span className="text-[9px] font-bold uppercase text-slate-400 block">Fecha Conclusión</span>
                                                    <span className="font-black text-slate-800 text-xs">{window.formatDateToNIC(selectedSlipVacation.endDate || selectedSlipVacation.startDate)}</span>
                                                </div>
                                                <div className="bg-emerald-50 p-3 rounded-xl border border-emerald-200">
                                                    <span className="text-[9px] font-bold uppercase text-emerald-700 block">Días Disfrutados</span>
                                                    <span className="font-black text-emerald-800 text-sm">{daysCount} día(s)</span>
                                                </div>
                                            </div>

                                            {selectedSlipVacation.notes && (
                                                <p className="text-xs text-slate-600 bg-slate-50 p-3 rounded-xl border border-slate-100">
                                                    <strong>Observaciones:</strong> {selectedSlipVacation.notes}
                                                </p>
                                            )}
                                        </div>

                                        {/* Saldo y texto legal */}
                                        <div className="p-4 bg-slate-50 rounded-2xl border border-slate-200 text-[11px] text-slate-600 leading-relaxed space-y-2">
                                            <p>
                                                Hago constar que he disfrutado del período de descanso de vacaciones remuneradas antes detallado en estricto cumplimiento de los derechos establecidos en el Código del Trabajo de Nicaragua.
                                            </p>
                                            <p className="font-bold text-slate-700">
                                                Saldo remanente disponible a la fecha: {balanceNow.toFixed(2)} días.
                                            </p>
                                        </div>

                                        {/* Espacios de firma */}
                                        <div className="pt-12 grid grid-cols-2 gap-8 text-center text-xs">
                                            <div className="border-t border-slate-400 pt-2">
                                                <p className="font-black text-slate-900">Por la Empresa</p>
                                                <p className="text-[10px] text-slate-400">Recursos Humanos / Gerencia</p>
                                            </div>

                                            <div className="border-t border-slate-400 pt-2">
                                                <p className="font-black text-slate-900">{selectedSlipVacation.userName}</p>
                                                <p className="text-[10px] text-slate-400">Firma del Trabajador(a)</p>
                                            </div>
                                        </div>
                                    </>
                                );
                            })()}
                        </div>
                    </div>
                </div>
            ); })()}
        </div>
    );
};