Calendario Tributario DIAN 2025<\/title>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }\n .glass-panel {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n .animate-fade-in {\n animation: fadeIn 0.5s ease-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \/* Scrollbar personalizado *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #f1f1f1; }\n ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\n ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n <\/style>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ --- ICONOS (Recreados para funcionar sin build system) ---\n const IconWrapper = ({ children, size = 24, className = \"\", ...props }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className} {...props}>\n {children}\n <\/svg>\n );\n\n const Calendar = (props) => <IconWrapper {...props}><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/IconWrapper>;\n const List = (props) => <IconWrapper {...props}><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"\/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"\/><\/IconWrapper>;\n const ChevronLeft = (props) => <IconWrapper {...props}><polyline points=\"15 18 9 12 15 6\"\/><\/IconWrapper>;\n const ChevronRight = (props) => <IconWrapper {...props}><polyline points=\"9 18 15 12 9 6\"\/><\/IconWrapper>;\n const Calculator = (props) => <IconWrapper {...props}><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"\/><line x1=\"8\" y1=\"6\" x2=\"16\" y2=\"6\"\/><line x1=\"16\" y1=\"14\" x2=\"16\" y2=\"18\"\/><path d=\"M16 10h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M8 18h.01\"\/><\/IconWrapper>;\n const CheckCircle = (props) => <IconWrapper {...props}><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/IconWrapper>;\n const AlertCircle = (props) => <IconWrapper {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/IconWrapper>;\n const Info = (props) => <IconWrapper {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/IconWrapper>;\n const Clock = (props) => <IconWrapper {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/IconWrapper>;\n\n\n \/\/ --- L\u00d3GICA DE DATOS (Exactamente igual al original) ---\n \n const formatDate = (dateStr) => {\n const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\n return new Date(dateStr + 'T12:00:00').toLocaleDateString('es-CO', options);\n };\n\n const getMonthName = (monthIndex) => {\n const months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];\n return months[monthIndex];\n };\n\n const generateEvents = (type, nitStr) => {\n if (!nitStr) return [];\n \n const events = [];\n const lastDigit = parseInt(nitStr.slice(-1));\n const lastTwoDigits = parseInt(nitStr.slice(-2)); \/\/ For Natural Persons\n \n \/\/ 1. Renta Grandes Contribuyentes\n if (type === 'grandes') {\n const c1Map = {1:11, 2:12, 3:13, 4:14, 5:17, 6:18, 7:19, 8:20, 9:21, 0:24};\n events.push({ date: `2025-02-${c1Map[lastDigit]}`, title: 'Renta Grandes Contribuyentes - Cuota 1', type: 'renta', color: 'bg-blue-100 text-blue-800 border-blue-300' });\n \n const c2Map = {1:9, 2:10, 3:11, 4:14, 5:15, 6:16, 7:21, 8:22, 9:23, 0:24};\n events.push({ date: `2025-04-${c2Map[lastDigit]}`, title: 'Renta Grandes Contribuyentes - Cuota 2', type: 'renta', color: 'bg-blue-100 text-blue-800 border-blue-300' });\n\n const c3Map = {1:11, 2:12, 3:13, 4:16, 5:17, 6:18, 7:19, 8:20, 9:24, 0:25};\n events.push({ date: `2025-06-${c3Map[lastDigit]}`, title: 'Renta Grandes Contribuyentes - Cuota 3', type: 'renta', color: 'bg-blue-100 text-blue-800 border-blue-300' });\n }\n\n \/\/ 2. Renta Personas Jur\u00eddicas\n if (type === 'juridica') {\n const c1Map = {1:9, 2:10, 3:11, 4:12, 5:15, 6:16, 7:19, 8:20, 9:21, 0:22};\n events.push({ date: `2025-05-${c1Map[lastDigit]}`, title: 'Renta Personas Jur\u00eddicas - Cuota 1', type: 'renta', color: 'bg-indigo-100 text-indigo-800 border-indigo-300' });\n \n const c2MapRefined = {1:9, 2:10, 3:11, 4:14, 5:15, 6:16, 7:17, 8:18, 9:21, 0:22};\n events.push({ date: `2025-07-${c2MapRefined[lastDigit]}`, title: 'Renta Personas Jur\u00eddicas - Cuota 2', type: 'renta', color: 'bg-indigo-100 text-indigo-800 border-indigo-300' });\n }\n\n \/\/ 3. Renta Personas Naturales\n if (type === 'natural') {\n const businessDays = [\n '08-11','08-12','08-13','08-14','08-19','08-20','08-21','08-22','08-25','08-26','08-27','08-28','08-29', \n '09-01','09-02','09-03','09-04','09-05','09-08','09-09','09-10','09-11','09-12','09-15','09-16','09-17','09-18','09-19','09-22','09-23','09-24','09-25','09-26', \n '10-01','10-02','10-03','10-06','10-07','10-08','10-09','10-10','10-14','10-15','10-16','10-17','10-20','10-21','10-22','10-23','10-24'\n ];\n \n let index = Math.floor((lastTwoDigits - 1) \/ 2);\n if (lastTwoDigits === 0) index = 49; \n \n if (businessDays[index]) {\n events.push({ date: `2025-${businessDays[index]}`, title: 'Renta Personas Naturales - Declaraci\u00f3n y Pago', type: 'renta', color: 'bg-green-100 text-green-800 border-green-300' });\n }\n }\n\n \/\/ 4. IVA Bimestral\n if (type === 'grandes' || type === 'juridica') {\n const marMap = {1:11, 2:12, 3:13, 4:14, 5:17, 6:18, 7:19, 8:20, 9:21, 0:25};\n events.push({ date: `2025-03-${marMap[lastDigit]}`, title: 'IVA Bimestral (Ene-Feb)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n\n const mayMap = {1:12, 2:13, 3:14, 4:15, 5:16, 6:19, 7:20, 8:21, 9:22, 0:23};\n events.push({ date: `2025-05-${mayMap[lastDigit]}`, title: 'IVA Bimestral (Mar-Abr)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n \n const julMap = {1:9, 2:10, 3:11, 4:14, 5:15, 6:16, 7:17, 8:18, 9:21, 0:22};\n events.push({ date: `2025-07-${julMap[lastDigit]}`, title: 'IVA Bimestral (May-Jun)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n \n const sepMap = {1:9, 2:10, 3:11, 4:12, 5:15, 6:16, 7:17, 8:18, 9:19, 0:22};\n events.push({ date: `2025-09-${sepMap[lastDigit]}`, title: 'IVA Bimestral (Jul-Ago)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n\n const novMap = {1:12, 2:13, 3:14, 4:18, 5:19, 6:20, 7:21, 8:24, 9:25, 0:26};\n events.push({ date: `2025-11-${novMap[lastDigit]}`, title: 'IVA Bimestral (Sep-Oct)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n }\n\n \/\/ 5. Retenci\u00f3n en la Fuente\n const retencionBaseStart = [\n {m:2, d:11}, {m:3, d:11}, {m:4, d:9}, {m:5, d:12}, {m:6, d:11}, {m:7, d:9},\n {m:8, d:12}, {m:9, d:9}, {m:10, d:9}, {m:11, d:10}, {m:12, d:10}, {m:1, d:13, y:2026}\n ];\n \n const getWorkDayOffset = (startDay, offset, month, year) => {\n let current = new Date(year, month - 1, startDay);\n let added = 0;\n let target = (lastDigit === 0 ? 9 : lastDigit - 1);\n \n while (added < target) {\n current.setDate(current.getDate() + 1);\n if (current.getDay() !== 0 && current.getDay() !== 6) { \n added++;\n }\n }\n while (current.getDay() === 0 || current.getDay() === 6) {\n current.setDate(current.getDate() + 1);\n }\n return current.toISOString().split('T')[0];\n }\n\n retencionBaseStart.forEach((base, idx) => {\n const dateStr = getWorkDayOffset(base.d, lastDigit, base.m, base.y || 2025);\n const periodName = idx === 11 ? 'Diciembre' : getMonthName(idx);\n events.push({ \n date: dateStr, \n title: `Retenci\u00f3n en la Fuente (${periodName})`, \n type: 'rete', \n color: 'bg-orange-100 text-orange-800 border-orange-300' \n });\n });\n\n return events.sort((a, b) => new Date(a.date) - new Date(b.date));\n };\n\n \/\/ --- COMPONENTES ---\n\n const EventCard = ({ event }) => (\n <div className={`p-4 mb-3 rounded-xl border-l-4 shadow-sm hover:shadow-md transition-all ${event.color} bg-opacity-50 glass-panel`}>\n <div className=\"flex justify-between items-start\">\n <div>\n <h3 className=\"font-bold text-sm md:text-base\">{event.title}<\/h3>\n <p className=\"text-xs md:text-sm opacity-80 mt-1 flex items-center gap-1\">\n <Calculator size={14} \/> Fecha L\u00edmite:\n <\/p>\n <\/div>\n <div className=\"text-right\">\n <span className=\"block text-lg font-bold\">{new Date(event.date + 'T12:00:00').getDate()}<\/span>\n <span className=\"block text-xs uppercase\">{new Date(event.date + 'T12:00:00').toLocaleString('es-CO', { month: 'short' })}<\/span>\n <\/div>\n <\/div>\n <div className=\"mt-2 text-sm font-medium\">\n {formatDate(event.date)}\n <\/div>\n <\/div>\n );\n\n const CalendarGrid = ({ events, currentMonth, setCurrentMonth }) => {\n const year = 2025;\n const monthStart = new Date(year, currentMonth, 1);\n const daysInMonth = new Date(year, currentMonth + 1, 0).getDate();\n const startDay = monthStart.getDay(); \n\n const monthEvents = events.filter(e => {\n const d = new Date(e.date + 'T12:00:00');\n return d.getMonth() === currentMonth && d.getFullYear() === year;\n });\n\n const renderDays = () => {\n const days = [];\n for (let i = 0; i < startDay; i++) {\n days.push(<div key={`empty-${i}`} className=\"h-24 bg-gray-50 border border-gray-100\"><\/div>);\n }\n for (let d = 1; d <= daysInMonth; d++) {\n const dateStr = `${year}-${String(currentMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n const dayEvents = monthEvents.filter(e => e.date === dateStr);\n const isToday = new Date().toDateString() === new Date(year, currentMonth, d).toDateString();\n\n days.push(\n <div key={d} className={`h-24 border border-gray-100 p-1 relative hover:bg-gray-50 transition-colors ${isToday ? 'bg-blue-50' : 'bg-white'}`}>\n <span className={`text-xs font-semibold rounded-full w-6 h-6 flex items-center justify-center ${isToday ? 'bg-blue-600 text-white' : 'text-gray-500'}`}>\n {d}\n <\/span>\n <div className=\"mt-1 flex flex-col gap-1 overflow-y-auto max-h-[70%]\">\n {dayEvents.map((ev, idx) => (\n <div key={idx} className={`text-[10px] p-1 rounded leading-tight truncate ${ev.color.replace('bg-opacity-50', '')} border border-opacity-20`}>\n {ev.title}\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n }\n return days;\n };\n\n return (\n <div className=\"animate-fade-in bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden\">\n <div className=\"flex justify-between items-center p-4 bg-gray-50 border-b border-gray-200\">\n <button onClick={() => setCurrentMonth(prev => Math.max(0, prev - 1))} className=\"p-2 hover:bg-gray-200 rounded-full text-gray-600 disabled:opacity-30\" disabled={currentMonth === 0}>\n <ChevronLeft size={20} \/>\n <\/button>\n <h2 className=\"text-lg font-bold text-gray-800\">{getMonthName(currentMonth)} {year}<\/h2>\n <button onClick={() => setCurrentMonth(prev => Math.min(11, prev + 1))} className=\"p-2 hover:bg-gray-200 rounded-full text-gray-600 disabled:opacity-30\" disabled={currentMonth === 11}>\n <ChevronRight size={20} \/>\n <\/button>\n <\/div>\n <div className=\"grid grid-cols-7 text-center bg-gray-100 border-b border-gray-200\">\n {['Dom', 'Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b'].map(d => (\n <div key={d} className=\"py-2 text-xs font-semibold text-gray-500 uppercase\">{d}<\/div>\n ))}\n <\/div>\n <div className=\"grid grid-cols-7\">\n {renderDays()}\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- APP PRINCIPAL ---\n\n const App = () => {\n const [userType, setUserType] = useState('natural');\n const [nit, setNit] = useState('');\n const [view, setView] = useState('list');\n const [events, setEvents] = useState([]);\n \/\/ Inicializar el mes en el mes actual\n const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());\n\n \/\/ --- L\u00d3GICA DE EVENTOS (Ahora guardamos TODOS los eventos en el estado) ---\n useEffect(() => {\n if (nit.length >= 1) {\n const generated = generateEvents(userType, nit);\n setEvents(generated); \/\/ Guardamos TODO el historial\n } else {\n setEvents([]);\n }\n }, [userType, nit]);\n\n \/\/ --- FILTRADO PARA LA VISTA DE LISTA ---\n const getFutureEvents = () => {\n const today = new Date();\n today.setHours(0, 0, 0, 0); \n \n return events.filter(evt => {\n const evtDate = new Date(evt.date + 'T12:00:00');\n return evtDate >= today;\n });\n };\n\n \/\/ Solo filtramos si estamos en vista de lista\n const displayEvents = view === 'list' ? getFutureEvents() : events;\n\n return (\n <div className=\"min-h-screen pb-10\">\n {\/* Header *\/}\n <div className=\"bg-[#0f3780] text-white p-6 shadow-xl sticky top-0 z-50\">\n <div className=\"max-w-4xl mx-auto\">\n <div className=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-white\/20 p-2 rounded-lg backdrop-blur-sm\">\n <Calendar size={28} \/>\n <\/div>\n <div>\n <h1 className=\"text-xl md:text-2xl font-bold text-white\">Calendario Tributario 2025<\/h1>\n <p className=\"text-blue-100 text-sm\">Organiza tus impuestos f\u00e1cilmente<\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-2 bg-black\/20 p-1 rounded-lg\">\n <button \n onClick={() => setView('list')} \n className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${view === 'list' ? 'bg-white text-blue-900 shadow' : 'text-blue-100 hover:bg-white\/10'}`}\n >\n <div className=\"flex items-center gap-2\"><List size={16}\/> Lista<\/div>\n <\/button>\n <button \n onClick={() => setView('calendar')} \n className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${view === 'calendar' ? 'bg-white text-blue-900 shadow' : 'text-blue-100 hover:bg-white\/10'}`}\n >\n <div className=\"flex items-center gap-2\"><Calendar size={16}\/> Calendario<\/div>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"max-w-4xl mx-auto px-4 mt-8\">\n \n {\/* Configuration Panel *\/}\n <div className=\"bg-white rounded-2xl shadow-lg p-6 mb-8 border border-gray-100\">\n <h2 className=\"text-lg font-bold text-gray-800 mb-4 flex items-center gap-2\">\n <CheckCircle size={20} className=\"text-green-500\" \/>\n Configura tu Perfil Tributario\n <\/h2>\n \n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div>\n <label className=\"block text-sm font-medium text-gray-600 mb-2\">Tipo de Contribuyente<\/label>\n <select \n value={userType} \n onChange={(e) => setUserType(e.target.value)}\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 outline-none transition-all\"\n >\n <option value=\"natural\">Persona Natural<\/option>\n <option value=\"juridica\">Persona Jur\u00eddica<\/option>\n <option value=\"grandes\">Grandes Contribuyentes<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label className=\"block text-sm font-medium text-gray-600 mb-2\">\n N\u00famero de NIT (Sin d\u00edgito verificaci\u00f3n)\n <\/label>\n <input \n type=\"number\" \n value={nit} \n onChange={(e) => setNit(e.target.value)}\n placeholder=\"Ej: 900123456\" \n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 outline-none transition-all\"\n \/>\n <p className=\"text-xs text-gray-400 mt-1 flex items-center gap-1\">\n <Info size={12}\/> Usamos los \u00faltimos d\u00edgitos para calcular tus fechas.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n {\/* Banner de Filtro Activo (SOLO EN VISTA DE LISTA) *\/}\n {nit && view === 'list' && (\n <div className=\"mb-6 bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-center gap-3 text-blue-800 text-sm animate-fade-in\">\n <Clock size={18} className=\"text-blue-600\" \/>\n <span>\n Mostrando solo obligaciones pendientes a partir de <strong>hoy, {new Date().toLocaleDateString('es-CO', {day: 'numeric', month: 'long', year: 'numeric'})}<\/strong>.\n <\/span>\n <\/div>\n )}\n\n {\/* Banner de Calendario Completo (SOLO EN VISTA DE CALENDARIO) *\/}\n {nit && view === 'calendar' && (\n <div className=\"mb-6 bg-purple-50 border border-purple-200 rounded-lg p-3 flex items-center gap-3 text-purple-800 text-sm animate-fade-in\">\n <Calendar size={18} className=\"text-purple-600\" \/>\n <span>\n Mostrando <strong>calendario completo de 2025<\/strong>. Navega entre los meses para ver todas las fechas.\n <\/span>\n <\/div>\n )}\n\n {\/* Results Area *\/}\n {!nit ? (\n <div className=\"text-center py-12 opacity-60\">\n <AlertCircle size={48} className=\"mx-auto text-gray-400 mb-3\" \/>\n <h3 className=\"text-xl font-medium text-gray-600\">Ingresa tu NIT para ver tu calendario<\/h3>\n <p className=\"text-gray-500\">Calcularemos tus fechas autom\u00e1ticamente.<\/p>\n <\/div>\n ) : (\n <>\n {displayEvents.length === 0 && view === 'list' ? (\n <div className=\"text-center py-12 bg-green-50 rounded-xl border border-green-200\">\n <CheckCircle size={48} className=\"mx-auto text-green-500 mb-3\" \/>\n <h3 className=\"text-xl font-bold text-green-800\">\u00a1Est\u00e1s al d\u00eda!<\/h3>\n <p className=\"text-green-700\">No tienes m\u00e1s obligaciones tributarias pendientes para lo que resta del a\u00f1o 2025.<\/p>\n <\/div>\n ) : null}\n\n {view === 'list' && displayEvents.length > 0 && (\n <div className=\"space-y-4 animate-fade-in\">\n <h3 className=\"text-lg font-bold text-gray-800 mb-2\">Tus Pr\u00f3ximos Vencimientos<\/h3>\n {displayEvents.map((event, idx) => (\n <EventCard key={idx} event={event} \/>\n ))}\n <\/div>\n )}\n \n {view === 'calendar' && (\n <CalendarGrid \n events={events} \/\/ Pasamos TODOS los eventos al calendario\n currentMonth={currentMonth} \n setCurrentMonth={setCurrentMonth} \n \/>\n )}\n <\/>\n )}\n \n {\/* Legend *\/}\n {nit && (\n <div className=\"mt-8 flex flex-wrap gap-4 justify-center text-xs text-gray-500\">\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-blue-400\"><\/span> Renta<\/div>\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-purple-400\"><\/span> IVA<\/div>\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-orange-400\"><\/span> Retenci\u00f3n<\/div>\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-green-400\"><\/span> Declaraci\u00f3n Anual<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Calendario Tributario DIAN 2025","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"googlesitekit_rrm_CAow3_3dCw:productID":"","rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-2286","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages\/2286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/comments?post=2286"}],"version-history":[{"count":2,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages\/2286\/revisions"}],"predecessor-version":[{"id":2288,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages\/2286\/revisions\/2288"}],"wp:attachment":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/media?parent=2286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n \n \n Calendario Tributario DIAN 2025<\/title>\n \n \n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n \n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <style>\n body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }\n .glass-panel {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n .animate-fade-in {\n animation: fadeIn 0.5s ease-out;\n }\n @keyframes fadeIn {\n from { opacity: 0; transform: translateY(10px); }\n to { opacity: 1; transform: translateY(0); }\n }\n \/* Scrollbar personalizado *\/\n ::-webkit-scrollbar { width: 8px; }\n ::-webkit-scrollbar-track { background: #f1f1f1; }\n ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }\n ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }\n <\/style>\n<\/head>\n<body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ --- ICONOS (Recreados para funcionar sin build system) ---\n const IconWrapper = ({ children, size = 24, className = \"\", ...props }) => (\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width={size} height={size} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className} {...props}>\n {children}\n <\/svg>\n );\n\n const Calendar = (props) => <IconWrapper {...props}><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/IconWrapper>;\n const List = (props) => <IconWrapper {...props}><line x1=\"8\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"8\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"8\" y1=\"18\" x2=\"21\" y2=\"18\"\/><line x1=\"3\" y1=\"6\" x2=\"3.01\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"3.01\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"3.01\" y2=\"18\"\/><\/IconWrapper>;\n const ChevronLeft = (props) => <IconWrapper {...props}><polyline points=\"15 18 9 12 15 6\"\/><\/IconWrapper>;\n const ChevronRight = (props) => <IconWrapper {...props}><polyline points=\"9 18 15 12 9 6\"\/><\/IconWrapper>;\n const Calculator = (props) => <IconWrapper {...props}><rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"\/><line x1=\"8\" y1=\"6\" x2=\"16\" y2=\"6\"\/><line x1=\"16\" y1=\"14\" x2=\"16\" y2=\"18\"\/><path d=\"M16 10h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M8 18h.01\"\/><\/IconWrapper>;\n const CheckCircle = (props) => <IconWrapper {...props}><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/IconWrapper>;\n const AlertCircle = (props) => <IconWrapper {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/><\/IconWrapper>;\n const Info = (props) => <IconWrapper {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/><\/IconWrapper>;\n const Clock = (props) => <IconWrapper {...props}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/IconWrapper>;\n\n\n \/\/ --- L\u00d3GICA DE DATOS (Exactamente igual al original) ---\n \n const formatDate = (dateStr) => {\n const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };\n return new Date(dateStr + 'T12:00:00').toLocaleDateString('es-CO', options);\n };\n\n const getMonthName = (monthIndex) => {\n const months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];\n return months[monthIndex];\n };\n\n const generateEvents = (type, nitStr) => {\n if (!nitStr) return [];\n \n const events = [];\n const lastDigit = parseInt(nitStr.slice(-1));\n const lastTwoDigits = parseInt(nitStr.slice(-2)); \/\/ For Natural Persons\n \n \/\/ 1. Renta Grandes Contribuyentes\n if (type === 'grandes') {\n const c1Map = {1:11, 2:12, 3:13, 4:14, 5:17, 6:18, 7:19, 8:20, 9:21, 0:24};\n events.push({ date: `2025-02-${c1Map[lastDigit]}`, title: 'Renta Grandes Contribuyentes - Cuota 1', type: 'renta', color: 'bg-blue-100 text-blue-800 border-blue-300' });\n \n const c2Map = {1:9, 2:10, 3:11, 4:14, 5:15, 6:16, 7:21, 8:22, 9:23, 0:24};\n events.push({ date: `2025-04-${c2Map[lastDigit]}`, title: 'Renta Grandes Contribuyentes - Cuota 2', type: 'renta', color: 'bg-blue-100 text-blue-800 border-blue-300' });\n\n const c3Map = {1:11, 2:12, 3:13, 4:16, 5:17, 6:18, 7:19, 8:20, 9:24, 0:25};\n events.push({ date: `2025-06-${c3Map[lastDigit]}`, title: 'Renta Grandes Contribuyentes - Cuota 3', type: 'renta', color: 'bg-blue-100 text-blue-800 border-blue-300' });\n }\n\n \/\/ 2. Renta Personas Jur\u00eddicas\n if (type === 'juridica') {\n const c1Map = {1:9, 2:10, 3:11, 4:12, 5:15, 6:16, 7:19, 8:20, 9:21, 0:22};\n events.push({ date: `2025-05-${c1Map[lastDigit]}`, title: 'Renta Personas Jur\u00eddicas - Cuota 1', type: 'renta', color: 'bg-indigo-100 text-indigo-800 border-indigo-300' });\n \n const c2MapRefined = {1:9, 2:10, 3:11, 4:14, 5:15, 6:16, 7:17, 8:18, 9:21, 0:22};\n events.push({ date: `2025-07-${c2MapRefined[lastDigit]}`, title: 'Renta Personas Jur\u00eddicas - Cuota 2', type: 'renta', color: 'bg-indigo-100 text-indigo-800 border-indigo-300' });\n }\n\n \/\/ 3. Renta Personas Naturales\n if (type === 'natural') {\n const businessDays = [\n '08-11','08-12','08-13','08-14','08-19','08-20','08-21','08-22','08-25','08-26','08-27','08-28','08-29', \n '09-01','09-02','09-03','09-04','09-05','09-08','09-09','09-10','09-11','09-12','09-15','09-16','09-17','09-18','09-19','09-22','09-23','09-24','09-25','09-26', \n '10-01','10-02','10-03','10-06','10-07','10-08','10-09','10-10','10-14','10-15','10-16','10-17','10-20','10-21','10-22','10-23','10-24'\n ];\n \n let index = Math.floor((lastTwoDigits - 1) \/ 2);\n if (lastTwoDigits === 0) index = 49; \n \n if (businessDays[index]) {\n events.push({ date: `2025-${businessDays[index]}`, title: 'Renta Personas Naturales - Declaraci\u00f3n y Pago', type: 'renta', color: 'bg-green-100 text-green-800 border-green-300' });\n }\n }\n\n \/\/ 4. IVA Bimestral\n if (type === 'grandes' || type === 'juridica') {\n const marMap = {1:11, 2:12, 3:13, 4:14, 5:17, 6:18, 7:19, 8:20, 9:21, 0:25};\n events.push({ date: `2025-03-${marMap[lastDigit]}`, title: 'IVA Bimestral (Ene-Feb)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n\n const mayMap = {1:12, 2:13, 3:14, 4:15, 5:16, 6:19, 7:20, 8:21, 9:22, 0:23};\n events.push({ date: `2025-05-${mayMap[lastDigit]}`, title: 'IVA Bimestral (Mar-Abr)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n \n const julMap = {1:9, 2:10, 3:11, 4:14, 5:15, 6:16, 7:17, 8:18, 9:21, 0:22};\n events.push({ date: `2025-07-${julMap[lastDigit]}`, title: 'IVA Bimestral (May-Jun)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n \n const sepMap = {1:9, 2:10, 3:11, 4:12, 5:15, 6:16, 7:17, 8:18, 9:19, 0:22};\n events.push({ date: `2025-09-${sepMap[lastDigit]}`, title: 'IVA Bimestral (Jul-Ago)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n\n const novMap = {1:12, 2:13, 3:14, 4:18, 5:19, 6:20, 7:21, 8:24, 9:25, 0:26};\n events.push({ date: `2025-11-${novMap[lastDigit]}`, title: 'IVA Bimestral (Sep-Oct)', type: 'iva', color: 'bg-purple-100 text-purple-800 border-purple-300' });\n }\n\n \/\/ 5. Retenci\u00f3n en la Fuente\n const retencionBaseStart = [\n {m:2, d:11}, {m:3, d:11}, {m:4, d:9}, {m:5, d:12}, {m:6, d:11}, {m:7, d:9},\n {m:8, d:12}, {m:9, d:9}, {m:10, d:9}, {m:11, d:10}, {m:12, d:10}, {m:1, d:13, y:2026}\n ];\n \n const getWorkDayOffset = (startDay, offset, month, year) => {\n let current = new Date(year, month - 1, startDay);\n let added = 0;\n let target = (lastDigit === 0 ? 9 : lastDigit - 1);\n \n while (added < target) {\n current.setDate(current.getDate() + 1);\n if (current.getDay() !== 0 && current.getDay() !== 6) { \n added++;\n }\n }\n while (current.getDay() === 0 || current.getDay() === 6) {\n current.setDate(current.getDate() + 1);\n }\n return current.toISOString().split('T')[0];\n }\n\n retencionBaseStart.forEach((base, idx) => {\n const dateStr = getWorkDayOffset(base.d, lastDigit, base.m, base.y || 2025);\n const periodName = idx === 11 ? 'Diciembre' : getMonthName(idx);\n events.push({ \n date: dateStr, \n title: `Retenci\u00f3n en la Fuente (${periodName})`, \n type: 'rete', \n color: 'bg-orange-100 text-orange-800 border-orange-300' \n });\n });\n\n return events.sort((a, b) => new Date(a.date) - new Date(b.date));\n };\n\n \/\/ --- COMPONENTES ---\n\n const EventCard = ({ event }) => (\n <div className={`p-4 mb-3 rounded-xl border-l-4 shadow-sm hover:shadow-md transition-all ${event.color} bg-opacity-50 glass-panel`}>\n <div className=\"flex justify-between items-start\">\n <div>\n <h3 className=\"font-bold text-sm md:text-base\">{event.title}<\/h3>\n <p className=\"text-xs md:text-sm opacity-80 mt-1 flex items-center gap-1\">\n <Calculator size={14} \/> Fecha L\u00edmite:\n <\/p>\n <\/div>\n <div className=\"text-right\">\n <span className=\"block text-lg font-bold\">{new Date(event.date + 'T12:00:00').getDate()}<\/span>\n <span className=\"block text-xs uppercase\">{new Date(event.date + 'T12:00:00').toLocaleString('es-CO', { month: 'short' })}<\/span>\n <\/div>\n <\/div>\n <div className=\"mt-2 text-sm font-medium\">\n {formatDate(event.date)}\n <\/div>\n <\/div>\n );\n\n const CalendarGrid = ({ events, currentMonth, setCurrentMonth }) => {\n const year = 2025;\n const monthStart = new Date(year, currentMonth, 1);\n const daysInMonth = new Date(year, currentMonth + 1, 0).getDate();\n const startDay = monthStart.getDay(); \n\n const monthEvents = events.filter(e => {\n const d = new Date(e.date + 'T12:00:00');\n return d.getMonth() === currentMonth && d.getFullYear() === year;\n });\n\n const renderDays = () => {\n const days = [];\n for (let i = 0; i < startDay; i++) {\n days.push(<div key={`empty-${i}`} className=\"h-24 bg-gray-50 border border-gray-100\"><\/div>);\n }\n for (let d = 1; d <= daysInMonth; d++) {\n const dateStr = `${year}-${String(currentMonth + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;\n const dayEvents = monthEvents.filter(e => e.date === dateStr);\n const isToday = new Date().toDateString() === new Date(year, currentMonth, d).toDateString();\n\n days.push(\n <div key={d} className={`h-24 border border-gray-100 p-1 relative hover:bg-gray-50 transition-colors ${isToday ? 'bg-blue-50' : 'bg-white'}`}>\n <span className={`text-xs font-semibold rounded-full w-6 h-6 flex items-center justify-center ${isToday ? 'bg-blue-600 text-white' : 'text-gray-500'}`}>\n {d}\n <\/span>\n <div className=\"mt-1 flex flex-col gap-1 overflow-y-auto max-h-[70%]\">\n {dayEvents.map((ev, idx) => (\n <div key={idx} className={`text-[10px] p-1 rounded leading-tight truncate ${ev.color.replace('bg-opacity-50', '')} border border-opacity-20`}>\n {ev.title}\n <\/div>\n ))}\n <\/div>\n <\/div>\n );\n }\n return days;\n };\n\n return (\n <div className=\"animate-fade-in bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden\">\n <div className=\"flex justify-between items-center p-4 bg-gray-50 border-b border-gray-200\">\n <button onClick={() => setCurrentMonth(prev => Math.max(0, prev - 1))} className=\"p-2 hover:bg-gray-200 rounded-full text-gray-600 disabled:opacity-30\" disabled={currentMonth === 0}>\n <ChevronLeft size={20} \/>\n <\/button>\n <h2 className=\"text-lg font-bold text-gray-800\">{getMonthName(currentMonth)} {year}<\/h2>\n <button onClick={() => setCurrentMonth(prev => Math.min(11, prev + 1))} className=\"p-2 hover:bg-gray-200 rounded-full text-gray-600 disabled:opacity-30\" disabled={currentMonth === 11}>\n <ChevronRight size={20} \/>\n <\/button>\n <\/div>\n <div className=\"grid grid-cols-7 text-center bg-gray-100 border-b border-gray-200\">\n {['Dom', 'Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b'].map(d => (\n <div key={d} className=\"py-2 text-xs font-semibold text-gray-500 uppercase\">{d}<\/div>\n ))}\n <\/div>\n <div className=\"grid grid-cols-7\">\n {renderDays()}\n <\/div>\n <\/div>\n );\n };\n\n \/\/ --- APP PRINCIPAL ---\n\n const App = () => {\n const [userType, setUserType] = useState('natural');\n const [nit, setNit] = useState('');\n const [view, setView] = useState('list');\n const [events, setEvents] = useState([]);\n \/\/ Inicializar el mes en el mes actual\n const [currentMonth, setCurrentMonth] = useState(new Date().getMonth());\n\n \/\/ --- L\u00d3GICA DE EVENTOS (Ahora guardamos TODOS los eventos en el estado) ---\n useEffect(() => {\n if (nit.length >= 1) {\n const generated = generateEvents(userType, nit);\n setEvents(generated); \/\/ Guardamos TODO el historial\n } else {\n setEvents([]);\n }\n }, [userType, nit]);\n\n \/\/ --- FILTRADO PARA LA VISTA DE LISTA ---\n const getFutureEvents = () => {\n const today = new Date();\n today.setHours(0, 0, 0, 0); \n \n return events.filter(evt => {\n const evtDate = new Date(evt.date + 'T12:00:00');\n return evtDate >= today;\n });\n };\n\n \/\/ Solo filtramos si estamos en vista de lista\n const displayEvents = view === 'list' ? getFutureEvents() : events;\n\n return (\n <div className=\"min-h-screen pb-10\">\n {\/* Header *\/}\n <div className=\"bg-[#0f3780] text-white p-6 shadow-xl sticky top-0 z-50\">\n <div className=\"max-w-4xl mx-auto\">\n <div className=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-white\/20 p-2 rounded-lg backdrop-blur-sm\">\n <Calendar size={28} \/>\n <\/div>\n <div>\n <h1 className=\"text-xl md:text-2xl font-bold text-white\">Calendario Tributario 2025<\/h1>\n <p className=\"text-blue-100 text-sm\">Organiza tus impuestos f\u00e1cilmente<\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-2 bg-black\/20 p-1 rounded-lg\">\n <button \n onClick={() => setView('list')} \n className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${view === 'list' ? 'bg-white text-blue-900 shadow' : 'text-blue-100 hover:bg-white\/10'}`}\n >\n <div className=\"flex items-center gap-2\"><List size={16}\/> Lista<\/div>\n <\/button>\n <button \n onClick={() => setView('calendar')} \n className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${view === 'calendar' ? 'bg-white text-blue-900 shadow' : 'text-blue-100 hover:bg-white\/10'}`}\n >\n <div className=\"flex items-center gap-2\"><Calendar size={16}\/> Calendario<\/div>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"max-w-4xl mx-auto px-4 mt-8\">\n \n {\/* Configuration Panel *\/}\n <div className=\"bg-white rounded-2xl shadow-lg p-6 mb-8 border border-gray-100\">\n <h2 className=\"text-lg font-bold text-gray-800 mb-4 flex items-center gap-2\">\n <CheckCircle size={20} className=\"text-green-500\" \/>\n Configura tu Perfil Tributario\n <\/h2>\n \n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <div>\n <label className=\"block text-sm font-medium text-gray-600 mb-2\">Tipo de Contribuyente<\/label>\n <select \n value={userType} \n onChange={(e) => setUserType(e.target.value)}\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 outline-none transition-all\"\n >\n <option value=\"natural\">Persona Natural<\/option>\n <option value=\"juridica\">Persona Jur\u00eddica<\/option>\n <option value=\"grandes\">Grandes Contribuyentes<\/option>\n <\/select>\n <\/div>\n \n <div>\n <label className=\"block text-sm font-medium text-gray-600 mb-2\">\n N\u00famero de NIT (Sin d\u00edgito verificaci\u00f3n)\n <\/label>\n <input \n type=\"number\" \n value={nit} \n onChange={(e) => setNit(e.target.value)}\n placeholder=\"Ej: 900123456\" \n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50 outline-none transition-all\"\n \/>\n <p className=\"text-xs text-gray-400 mt-1 flex items-center gap-1\">\n <Info size={12}\/> Usamos los \u00faltimos d\u00edgitos para calcular tus fechas.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n {\/* Banner de Filtro Activo (SOLO EN VISTA DE LISTA) *\/}\n {nit && view === 'list' && (\n <div className=\"mb-6 bg-blue-50 border border-blue-200 rounded-lg p-3 flex items-center gap-3 text-blue-800 text-sm animate-fade-in\">\n <Clock size={18} className=\"text-blue-600\" \/>\n <span>\n Mostrando solo obligaciones pendientes a partir de <strong>hoy, {new Date().toLocaleDateString('es-CO', {day: 'numeric', month: 'long', year: 'numeric'})}<\/strong>.\n <\/span>\n <\/div>\n )}\n\n {\/* Banner de Calendario Completo (SOLO EN VISTA DE CALENDARIO) *\/}\n {nit && view === 'calendar' && (\n <div className=\"mb-6 bg-purple-50 border border-purple-200 rounded-lg p-3 flex items-center gap-3 text-purple-800 text-sm animate-fade-in\">\n <Calendar size={18} className=\"text-purple-600\" \/>\n <span>\n Mostrando <strong>calendario completo de 2025<\/strong>. Navega entre los meses para ver todas las fechas.\n <\/span>\n <\/div>\n )}\n\n {\/* Results Area *\/}\n {!nit ? (\n <div className=\"text-center py-12 opacity-60\">\n <AlertCircle size={48} className=\"mx-auto text-gray-400 mb-3\" \/>\n <h3 className=\"text-xl font-medium text-gray-600\">Ingresa tu NIT para ver tu calendario<\/h3>\n <p className=\"text-gray-500\">Calcularemos tus fechas autom\u00e1ticamente.<\/p>\n <\/div>\n ) : (\n <>\n {displayEvents.length === 0 && view === 'list' ? (\n <div className=\"text-center py-12 bg-green-50 rounded-xl border border-green-200\">\n <CheckCircle size={48} className=\"mx-auto text-green-500 mb-3\" \/>\n <h3 className=\"text-xl font-bold text-green-800\">\u00a1Est\u00e1s al d\u00eda!<\/h3>\n <p className=\"text-green-700\">No tienes m\u00e1s obligaciones tributarias pendientes para lo que resta del a\u00f1o 2025.<\/p>\n <\/div>\n ) : null}\n\n {view === 'list' && displayEvents.length > 0 && (\n <div className=\"space-y-4 animate-fade-in\">\n <h3 className=\"text-lg font-bold text-gray-800 mb-2\">Tus Pr\u00f3ximos Vencimientos<\/h3>\n {displayEvents.map((event, idx) => (\n <EventCard key={idx} event={event} \/>\n ))}\n <\/div>\n )}\n \n {view === 'calendar' && (\n <CalendarGrid \n events={events} \/\/ Pasamos TODOS los eventos al calendario\n currentMonth={currentMonth} \n setCurrentMonth={setCurrentMonth} \n \/>\n )}\n <\/>\n )}\n \n {\/* Legend *\/}\n {nit && (\n <div className=\"mt-8 flex flex-wrap gap-4 justify-center text-xs text-gray-500\">\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-blue-400\"><\/span> Renta<\/div>\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-purple-400\"><\/span> IVA<\/div>\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-orange-400\"><\/span> Retenci\u00f3n<\/div>\n <div className=\"flex items-center gap-2\"><span className=\"w-3 h-3 rounded-full bg-green-400\"><\/span> Declaraci\u00f3n Anual<\/div>\n <\/div>\n )}\n <\/div>\n <\/div>\n );\n };\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Calendario Tributario DIAN 2025","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"googlesitekit_rrm_CAow3_3dCw:productID":"","rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"class_list":["post-2286","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages\/2286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/comments?post=2286"}],"version-history":[{"count":2,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages\/2286\/revisions"}],"predecessor-version":[{"id":2288,"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/pages\/2286\/revisions\/2288"}],"wp:attachment":[{"href":"https:\/\/pkfcabrera.com\/en\/wp-json\/wp\/v2\/media?parent=2286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}