{"id":70734,"date":"2026-04-14T10:22:04","date_gmt":"2026-04-14T08:22:04","guid":{"rendered":"https:\/\/tickelia.com\/demo_2023\/?p=70734"},"modified":"2026-04-14T10:22:08","modified_gmt":"2026-04-14T08:22:08","slug":"calculadora-liquidacion-colombia-con-grafico","status":"publish","type":"post","link":"https:\/\/tickelia.com\/demo_2023\/blog\/actualidad\/calculadora-liquidacion-colombia-con-grafico\/","title":{"rendered":"Calculadora liquidacion Colombia con grafico"},"content":{"rendered":"<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n\r\n<div id=\"buk-calculator-container\">\r\n    <div class=\"calculator-wrapper\">\r\n        <h2 class=\"title-main\">Simulador de Liquidaci\u00f3n y N\u00f3mina<\/h2>\r\n        \r\n        <div class=\"form-section\">\r\n            <h3 class=\"section-label\">CONFIGURACI\u00d3N LABORAL<\/h3>\r\n            <div class=\"input-grid\">\r\n                <div class=\"field-group\">\r\n                    <label>Salario b\u00e1sico mensual*<\/label>\r\n                    <input type=\"text\" id=\"salarioInput\" placeholder=\"$ 0\" oninput=\"formatCurrency(this)\">\r\n                <\/div>\r\n                <div class=\"field-group\">\r\n                    <label>D\u00edas a liquidar en el mes*<\/label>\r\n                    <input type=\"number\" id=\"diasMes\" value=\"30\">\r\n                <\/div>\r\n                <div class=\"field-group\">\r\n                    <label>Fecha de ingreso*<\/label>\r\n                    <input type=\"date\" id=\"fIngreso\" value=\"2026-01-01\">\r\n                <\/div>\r\n                <div class=\"field-group\">\r\n                    <label>Fecha de retiro*<\/label>\r\n                    <input type=\"date\" id=\"fRetiro\" value=\"2026-04-14\">\r\n                <\/div>\r\n                <div class=\"field-group full-row\">\r\n                    <label>D\u00edas de vacaciones pendientes<\/label>\r\n                    <input type=\"number\" id=\"vacaManual\" placeholder=\"Vacio = C\u00e1lculo proporcional por ley\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button class=\"main-button\" onclick=\"ejecutarLiquidacion()\">Calcular sueldo neto \u2192<\/button>\r\n\r\n        <div id=\"results-box\" class=\"results-area\" style=\"display:none;\">\r\n            <div class=\"summary-cards\">\r\n                <div class=\"card result-card\">\r\n                    <span class=\"label\">Neto a recibir<\/span>\r\n                    <span id=\"resTotal\" class=\"value\">$ 0<\/span>\r\n                    <small>Pago final de liquidaci\u00f3n<\/small>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <span class=\"label\">Total Devengados<\/span>\r\n                    <span id=\"resDev\" class=\"value-dark\">$ 0<\/span>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <span class=\"label\">Carga Tributaria<\/span>\r\n                    <span id=\"resTaxPct\" class=\"value-yellow\">0%<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"visual-grid\">\r\n                <div class=\"details-column\">\r\n                    <div class=\"section-label\">DESGLOSE DE CONCEPTOS<\/div>\r\n                    <div class=\"detailed-table\">\r\n                        <div class=\"table-row\"><span>Salario + Auxilio<\/span><span id=\"detSalAux\">$ 0<\/span><\/div>\r\n                        <div class=\"table-row\"><span>Prestaciones (Prima\/Cesant\u00edas)<\/span><span id=\"detPrestaciones\">$ 0<\/span><\/div>\r\n                        <div class=\"table-row\"><span>Vacaciones<\/span><span id=\"detVac\">$ 0<\/span><\/div>\r\n                        <div class=\"table-row negative\"><span>Seguridad Social<\/span><span id=\"detSegSocial\">-$ 0<\/span><\/div>\r\n                        <div class=\"table-row negative\"><span>Parafiscales (FSP)<\/span><span id=\"detFSP\">-$ 0<\/span><\/div>\r\n                        <div class=\"table-row negative\"><span>Retenci\u00f3n Fuente<\/span><span id=\"detRete\">-$ 0<\/span><\/div>\r\n                        <div class=\"table-row total-line\"><span>NETO FINAL<\/span><span id=\"detNeto\">$ 0<\/span><\/div>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"charts-column\">\r\n                    <div class=\"chart-container\">\r\n                        <canvas id=\"donutChart\"><\/canvas>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"bar-chart-section\">\r\n                <canvas id=\"barChart\" height=\"100\"><\/canvas>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <style>\r\n        #buk-calculator-container { width: 100%; max-width: 950px; margin: 0 auto; background: #fff; border-radius: 12px; box-sizing: border-box; color: #1e293b; }\r\n        #buk-calculator-container .calculator-wrapper { padding: 30px; border: 1px solid #e2e8f0; border-radius: 12px; }\r\n        #buk-calculator-container .title-main { color: #006a71; font-size: 24px; margin-bottom: 30px; font-weight: 700; text-align: center; }\r\n        #buk-calculator-container .section-label { color: #00c2a2; font-size: 12px; font-weight: 800; border-bottom: 2px solid #eef2ff; padding-bottom: 8px; margin-bottom: 20px; letter-spacing: 1px; }\r\n        \r\n        #buk-calculator-container .input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\r\n        #buk-calculator-container .field-group { display: flex; flex-direction: column; }\r\n        #buk-calculator-container .full-row { grid-column: span 2; }\r\n        #buk-calculator-container label { font-size: 11px; font-weight: 700; margin-bottom: 8px; color: #64748b; text-transform: uppercase; }\r\n        #buk-calculator-container input { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; outline: none; background: #fdfdfd; font-size: 14px; }\r\n        #buk-calculator-container input:focus { border-color: #00c2a2; box-shadow: 0 0 0 3px rgba(0, 194, 162, 0.1); }\r\n\r\n        #buk-calculator-container .main-button { width: 100%; background: #00c2a2; color: white; border: none; padding: 16px; border-radius: 8px; font-weight: bold; font-size: 16px; cursor: pointer; margin-top: 30px; transition: 0.2s; }\r\n        #buk-calculator-container .main-button:hover { background: #00a88d; }\r\n\r\n        #buk-calculator-container .results-area { margin-top: 40px; border-top: 1px solid #edf2f7; padding-top: 30px; }\r\n        #buk-calculator-container .summary-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 30px; }\r\n        #buk-calculator-container .card { padding: 20px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: left; }\r\n        #buk-calculator-container .result-card { background: #006a71; color: white; border: none; }\r\n        #buk-calculator-container .card .label { font-size: 12px; font-weight: 600; opacity: 0.9; display: block; }\r\n        #buk-calculator-container .card .value { font-size: 24px; font-weight: 800; display: block; margin: 8px 0; }\r\n        #buk-calculator-container .card small { font-size: 10px; opacity: 0.7; }\r\n        #buk-calculator-container .card .value-dark { color: #006a71; font-size: 22px; font-weight: 700; }\r\n        #buk-calculator-container .card .value-yellow { color: #fbc02d; font-size: 22px; font-weight: 700; }\r\n\r\n        #buk-calculator-container .visual-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: start; }\r\n        #buk-calculator-container .table-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }\r\n        #buk-calculator-container .negative span:last-child { color: #e53e3e; font-weight: 600; }\r\n        #buk-calculator-container .total-line { font-weight: 800; color: #006a71; border-top: 2px solid #006a71; font-size: 18px; margin-top: 15px; }\r\n\r\n        #buk-calculator-container .chart-container { background: #f8fafc; padding: 20px; border-radius: 12px; border: 1px solid #edf2f7; }\r\n        #buk-calculator-container .bar-chart-section { margin-top: 40px; padding: 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; }\r\n    <\/style>\r\n\r\n    <script>\r\n        const SMMLV_2026 = 1750905;\r\n        const AUX_TRANS_2026 = 249095;\r\n        const UVT_2026 = 52374;\r\n        let donutChart = null;\r\n        let barChart = null;\r\n\r\n        function formatCurrency(input) {\r\n            let val = input.value.replace(\/\\D\/g, \"\");\r\n            input.value = val ? new Intl.NumberFormat('es-CO', {style:'currency', currency:'COP', maximumFractionDigits:0}).format(val) : \"\";\r\n        }\r\n\r\n        function getImpuestoRete(salario, salud, pensi\u00f3n, fsp) {\r\n            let base = (salario - (salud + pensi\u00f3n + fsp)) * 0.75;\r\n            let baseUVT = base \/ UVT_2026;\r\n            let impUVT = 0;\r\n            if (baseUVT > 95 && baseUVT <= 150) impUVT = (baseUVT - 95) * 0.19;\r\n            else if (baseUVT > 150 && baseUVT <= 360) impUVT = (baseUVT - 150) * 0.28 + 10;\r\n            else if (baseUVT > 360) impUVT = (baseUVT - 360) * 0.33 + 69;\r\n            return Math.round(impUVT * UVT_2026);\r\n        }\r\n\r\n        function ejecutarLiquidacion() {\r\n            const salario = parseFloat(document.getElementById('salarioInput').value.replace(\/\\D\/g, \"\")) || 0;\r\n            const diasMes = parseInt(document.getElementById('diasMes').value) || 0;\r\n            const f1 = new Date(document.getElementById('fIngreso').value);\r\n            const f2 = new Date(document.getElementById('fRetiro').value);\r\n            const diasLiqui = Math.ceil(Math.abs(f2 - f1) \/ (1000*60*60*24)) + 1;\r\n            const vacaManual = document.getElementById('vacaManual').value;\r\n\r\n            \/\/ C\u00e1lculos T\u00e9cnicos\r\n            const IBC = Math.min(salario, SMMLV_2026 * 25);\r\n            const ss = Math.round(IBC * 0.08);\r\n            let fspPct = (salario >= SMMLV_2026 * 4) ? 0.01 : 0;\r\n            if (salario > SMMLV_2026 * 16) fspPct = 0.02; \/\/ Simplificado para el ejemplo\r\n            const fsp = Math.round(IBC * fspPct);\r\n\r\n            const tieneAux = salario <= (SMMLV_2026 * 2);\r\n            const auxMes = tieneAux ? Math.round((AUX_TRANS_2026\/30)*diasMes) : 0;\r\n            const basePres = salario + (tieneAux ? AUX_TRANS_2026 : 0);\r\n            \r\n            const prima = Math.round((basePres * diasLiqui) \/ 360);\r\n            const cesantias = Math.round((basePres * diasLiqui) \/ 360);\r\n            const intCes = Math.round((cesantias * diasLiqui * 0.12) \/ 360);\r\n            const vac = (vacaManual !== \"\") ? Math.round((salario\/30)*parseFloat(vacaManual)) : Math.round((salario * diasLiqui) \/ 720);\r\n\r\n            const rete = getImpuestoRete(salario, ss\/2, ss\/2, fsp);\r\n\r\n            const totalDev = (salario\/30*diasMes) + auxMes + prima + cesantias + intCes + vac;\r\n            const totalDes = ss + fsp + rete;\r\n            const neto = totalDev - totalDes;\r\n\r\n            const fmt = (n) => new Intl.NumberFormat('es-CO', {style:'currency', currency:'COP', maximumFractionDigits:0}).format(n);\r\n            \r\n            \/\/ UI Update\r\n            document.getElementById('results-box').style.display = 'block';\r\n            document.getElementById('resTotal').innerText = fmt(neto);\r\n            document.getElementById('resDev').innerText = fmt(totalDev);\r\n            document.getElementById('resTaxPct').innerText = ((totalDes\/totalDev)*100).toFixed(1) + \"%\";\r\n            \r\n            document.getElementById('detSalAux').innerText = fmt((salario\/30*diasMes) + auxMes);\r\n            document.getElementById('detPrestaciones').innerText = fmt(prima + cesantias + intCes);\r\n            document.getElementById('detVac').innerText = fmt(vac);\r\n            document.getElementById('detSegSocial').innerText = \"- \" + fmt(ss);\r\n            document.getElementById('detFSP').innerText = \"- \" + fmt(fsp);\r\n            document.getElementById('detRete').innerText = \"- \" + fmt(rete);\r\n            document.getElementById('detNeto').innerText = fmt(neto);\r\n\r\n            renderCharts(neto, rete + fsp, ss, salario, totalDes);\r\n        }\r\n\r\n        function renderCharts(neto, impuestos, ss, bruto, totalDes) {\r\n            const ctxDonut = document.getElementById('donutChart').getContext('2d');\r\n            const ctxBar = document.getElementById('barChart').getContext('2d');\r\n\r\n            if (donutChart) donutChart.destroy();\r\n            if (barChart) barChart.destroy();\r\n\r\n            donutChart = new Chart(ctxDonut, {\r\n                type: 'doughnut',\r\n                data: {\r\n                    labels: ['Neto', 'Impuestos', 'S. Social'],\r\n                    datasets: [{\r\n                        data: [neto, impuestos, ss],\r\n                        backgroundColor: ['#00c2a2', '#fbc02d', '#cbd5e1'],\r\n                        borderWidth: 0\r\n                    }]\r\n                },\r\n                options: { cutout: '70%', plugins: { legend: { position: 'bottom' } } }\r\n            });\r\n\r\n            barChart = new Chart(ctxBar, {\r\n                type: 'bar',\r\n                data: {\r\n                    labels: ['Bruto Mes', 'S. Social', 'Impuestos', 'Neto Final'],\r\n                    datasets: [{\r\n                        label: 'Valor en Pesos',\r\n                        data: [bruto, -ss, -impuestos, neto],\r\n                        backgroundColor: ['#006a71', '#cbd5e1', '#fbc02d', '#00c2a2'],\r\n                        borderRadius: 5\r\n                    }]\r\n                },\r\n                options: { \r\n                    scales: { y: { beginAtZero: false, grid: { display: false } } },\r\n                    plugins: { legend: { display: false } }\r\n                }\r\n            });\r\n        }\r\n    <\/script>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[533],"tags":[],"class_list":["post-70734","post","type-post","status-publish","format-standard","hentry","category-actualidad"],"acf":[],"lang":"es","translations":{"es":70734},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/comments?post=70734"}],"version-history":[{"count":1,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70734\/revisions"}],"predecessor-version":[{"id":70739,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70734\/revisions\/70739"}],"wp:attachment":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/media?parent=70734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/categories?post=70734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/tags?post=70734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}