{"id":42500,"date":"2026-05-29T09:29:44","date_gmt":"2026-05-29T14:29:44","guid":{"rendered":"https:\/\/softland.com\/co\/?page_id=42500"},"modified":"2026-08-05T06:41:42","modified_gmt":"2026-08-05T11:41:42","slug":"recursos-calculadora-de-prima-de-servicios","status":"publish","type":"page","link":"https:\/\/softland.com\/co\/recursos\/recursos-calculadoras-de-servicios-softland\/recursos-calculadora-de-prima-de-servicios\/","title":{"rendered":"Recursos – Calculadora de prima de servicios"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Recursos – Calculadora de prima<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Calculadora de prima
de servicios en Colombia<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Calcular tu prima no deber\u00eda quitarte tiempo ni generarte dudas.<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ingresa tu salario y los d\u00edas trabajados en el semestre para conocer, en segundos, un valor estimado, claro y f\u00e1cil de entender. Una herramienta pensada para contadores, responsables de n\u00f3mina y empleados que quieren verificar su liquidaci\u00f3n con mayor tranquilidad.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n \n \n Calculadora Prima Legal de Servicios \u2014 Colombia<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@400;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n body {\n font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\n background: #FFFFFF;\n color: #2D3748;\n min-height: 100vh;\n padding: 0;\n width: 100%;\n }\n\n \/* \u2500\u2500 APP WRAPPER \u2500\u2500 *\/\n .clc-app-container {\n width: 96%;\n max-width: 96%;\n margin: 0 auto;\n padding: 24px 0 48px;\n }\n\n \/* \u2500\u2500 HEADER \u2500\u2500 *\/\n .clc-app-header {\n background: #001C7F;\n padding: 16px 24px;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n border-radius: 14px;\n box-shadow: 0 10px 25px rgba(0, 28, 127, 0.15);\n margin-bottom: 24px;\n color: #FFFFFF;\n min-height: auto;\n gap: 16px;\n }\n\n .clc-header-left {\n display: flex;\n align-items: center;\n gap: 12px;\n flex: 1 1 300px;\n }\n\n .clc-header-title {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 24px;\n line-height: 30px;\n letter-spacing: 0%;\n color: #FFFFFF;\n }\n\n .clc-header-right {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 20px;\n flex: 1 1 300px;\n justify-content: flex-end;\n }\n\n .clc-header-info-text {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 26px;\n letter-spacing: 0%;\n color: #BFC5EC;\n }\n\n .clc-btn-historial {\n width: 153px;\n height: 52px;\n gap: 10px;\n border-radius: 8px;\n padding: 16px;\n background: #1CA5EA;\n border: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n letter-spacing: 0%;\n text-align: center;\n color: #FFFFFF;\n transition: background-color 300ms ease-out, transform 300ms ease-out;\n }\n .clc-btn-historial:hover {\n background: #158ecb;\n transform: translateY(-1px);\n }\n\n \/* \u2500\u2500 YEAR BANNER \u2500\u2500 *\/\n .clc-year-banner {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n opacity: 1;\n border-radius: 16px;\n padding: 24px 32px;\n border: 1px dashed #1CA5EA;\n background: #FFFFFF;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n margin-bottom: 32px;\n gap: 16px;\n }\n .clc-year-banner-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1 1 200px;\n }\n .clc-year-banner-label {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 32px;\n line-height: 38px;\n letter-spacing: 0%;\n color: #1CA5EA;\n }\n .clc-year-banner-right {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px;\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 26px;\n letter-spacing: 0%;\n color: #262626;\n flex: 2 1 350px;\n }\n .clc-year-banner-sep {\n color: #262626;\n font-weight: bold;\n margin: 0 4px;\n }\n\n \/* \u2500\u2500 SECTIONS \u2500\u2500 *\/\n .section-separator {\n height: 0px;\n border: none;\n border-top: 2px solid #CBCBCB;\n margin: 40px 0;\n opacity: 1;\n }\n\n .section-title {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 24px;\n line-height: 24px;\n letter-spacing: 0%;\n color: #0016B2;\n margin-bottom: 20px;\n }\n\n \/* \u2500\u2500 FORM GRID \u2500\u2500 *\/\n .form-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 16px;\n margin-bottom: 32px;\n }\n @media (max-width: 900px) {\n .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n }\n @media (max-width: 550px) {\n .form-grid { grid-template-columns: minmax(0, 1fr); }\n }\n\n .field-group {\n display: flex;\n flex-direction: column;\n }\n\n .field-header {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-bottom: 2px;\n }\n\n .field-label {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 20px;\n letter-spacing: 0%;\n color: #262626;\n }\n\n .clc-tooltip-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n color: #1CA5EA;\n vertical-align: middle;\n }\n .clc-tooltip-icon:hover .clc-tooltip-popup { display: block; }\n .clc-tooltip-popup {\n display: none;\n position: absolute;\n bottom: calc(100% + 8px);\n left: 50%;\n transform: translateX(-50%);\n background: #FFFFFF;\n border: 1px solid #CBCBCB;\n color: #262626;\n border-radius: 4px;\n padding: 12px 16px 8px;\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n width: 381px;\n z-index: 100;\n box-shadow: 0px 4px 12px rgba(0,0,0,0.15);\n white-space: normal;\n pointer-events: none;\n text-align: left;\n }\n .clc-tooltip-popup::after {\n content: '';\n position: absolute;\n top: 100%; left: 50%; transform: translateX(-50%);\n border: 6px solid transparent;\n border-top-color: #FFFFFF;\n }\n \/* Para pintar el borde de la flecha blanca *\/\n .clc-tooltip-popup::before {\n content: '';\n position: absolute;\n top: 100%; left: 50%; transform: translateX(-50%);\n border: 7px solid transparent;\n border-top-color: #CBCBCB;\n margin-top: 1px;\n }\n .clc-tooltip-title {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 14px;\n line-height: 16px;\n color: #262626;\n margin-bottom: 6px;\n }\n\n .field-hint {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 14px;\n line-height: 16px;\n color: #969696;\n margin-bottom: 6px;\n height: 16px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n \/* \u2500\u2500 CUSTOM INPUT CARDS \u2500\u2500 *\/\n .custom-input-card {\n width: 100%;\n height: 52px;\n border-radius: 8px;\n border: 1px solid #CBCBCB;\n background: #FFFFFF;\n padding: 6px 12px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n transition: all 0.2s ease;\n opacity: 1;\n }\n .custom-input-card:focus-within {\n border-color: #00A3EC;\n box-shadow: 0 0 0 3px rgba(0, 163, 236, 0.1);\n }\n .custom-input-card.disabled {\n \/*background: #F8FAFC;*\/\n border-color: #CBCBCB;\n }\n .card-input-label {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 12px;\n line-height: 14px;\n color: #4B4B4B;\n margin-bottom: 1px;\n text-transform: capitalize;\n }\n .card-input-field {\n border: none;\n outline: none;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n color: #262626;\n width: 100%;\n padding: 0;\n background: transparent;\n }\n .card-input-field::placeholder {\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n color: #262626;\n opacity: 0.5;\n }\n .card-input-field.error {\n color: #E53E3E;\n }\n .field-error {\n font-size: 11px;\n color: #E53E3E;\n font-weight: 500;\n margin-top: 4px;\n }\n\n \/* \u2500\u2500 CHIPS & ALERTS \u2500\u2500 *\/\n .chips-row {\n display: flex; flex-wrap: wrap; gap: 8px;\n margin-bottom: 20px;\n }\n .chip {\n padding: 5px 12px; border-radius: 20px;\n font-size: 11px; font-weight: 600;\n }\n .chip-blue { background: #E6EEFF; color: #001C7F; border: 1px solid #B0C0F0; }\n .chip-green { background: #E6F7EE; color: #007A3D; border: 1px solid #B3E8CC; }\n .chip-orange { background: #FFF0F0; color: #C00000; border: 1px solid #FFBDBB; }\n\n .alert {\n border-radius: 8px; padding: 12px 16px;\n margin-bottom: 24px; font-size: 12.5px; line-height: 1.5;\n display: flex; gap: 10px; align-items: flex-start;\n }\n .alert-warning { background: #FFF5F5; border: 1px solid #FED7D7; color: #9B2C2C; }\n .alert-icon { font-size: 15px; flex-shrink: 0; }\n .alert-title { font-weight: 700; margin-bottom: 1px; }\n\n \/* \u2500\u2500 REFERENCIA RAPIDA \u2500\u2500 *\/\n .ref-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n }\n @media (max-width: 768px) {\n .ref-grid { grid-template-columns: 1fr; }\n }\n .ref-card {\n padding: 24px 32px;\n border-radius: 16px;\n border-width: 1px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n transition: all 0.2s ease;\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .ref-card:hover {\n transform: translateY(-2px);\n box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);\n }\n .ref-card-blue {\n background: #EBF8FF;\n border: 1px solid #1CA5EA;\n }\n .ref-card-green {\n background: #EFFBEF;\n border: 1px solid #1DB81B;\n }\n .ref-card-orange {\n background: #FFEAE9;\n border: 1px solid #FC3F3A;\n }\n .ref-card-title {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n letter-spacing: 0%;\n }\n .ref-card-blue .ref-card-title {\n color: #1CA5EA;\n }\n .ref-card-green .ref-card-title {\n color: #179927;\n }\n .ref-card-orange .ref-card-title {\n color: #BD2F2C;\n }\n .ref-card-value {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 20px;\n line-height: 30px;\n letter-spacing: 0%;\n }\n .ref-card-blue .ref-card-value {\n color: #157CB0;\n }\n .ref-card-green .ref-card-value {\n color: #179927;\n }\n .ref-card-orange .ref-card-value {\n color: #BD2F2C;\n }\n .ref-card-sub {\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0%;\n opacity: 0.8;\n }\n .ref-card-blue .ref-card-sub {\n color: #157CB0;\n }\n .ref-card-green .ref-card-sub {\n color: #179927;\n }\n .ref-card-orange .ref-card-sub {\n color: #BD2F2C;\n }\n\n \/* \u2500\u2500 ACTION BAR \u2500\u2500 *\/\n .action-bar {\n display: flex;\n justify-content: flex-end;\n gap: 16px;\n align-items: center;\n padding: 24px 0;\n margin-top: 0px;\n }\n .clc-btn {\n cursor: pointer;\n border: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .clc-btn-primary {\n width: 169px;\n height: 52px;\n gap: 10px;\n border-radius: 8px;\n padding: 16px;\n background: #1CA5EA;\n color: #FFFFFF;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n text-align: center;\n transition: background-color 300ms ease-out, transform 300ms ease-out;\n }\n .clc-btn-primary:hover:not(:disabled) {\n background: #158ecb;\n transform: translateY(-1px);\n }\n .clc-btn-primary:disabled {\n background: #CBD5E0;\n color: #718096;\n box-shadow: none;\n cursor: not-allowed;\n }\n .clc-btn-secondary {\n background: transparent;\n color: #1CA5EA;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n text-align: center;\n gap: 8px;\n padding: 10px 16px;\n transition: color 300ms ease-out;\n }\n .clc-btn-secondary:hover {\n color: #158ecb;\n }\n .clc-btn-danger {\n background: #FFF5F5; color: #C53030;\n border: 1px solid #FED7D7;\n border-radius: 8px;\n padding: 10px 24px;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 14px;\n }\n .clc-btn-danger:hover { background: #FED7D7; }\n\n \/* \u2500\u2500 RESULT PANEL \u2500\u2500 *\/\n .result-wrapper {\n background: #FFF;\n border-radius: 14px;\n border: 1px solid #E2E8F0;\n box-shadow: 0 10px 30px rgba(0,0,0,0.06);\n overflow: hidden;\n margin-top: 32px;\n animation: clcFadeIn 0.3s ease;\n }\n @keyframes clcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\n .result-header {\n background: linear-gradient(135deg, #001C7F, #001356);\n padding: 24px;\n display: flex; align-items: center; justify-content: space-between;\n }\n .result-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,0.8); margin-bottom: 4px; font-weight: 700; }\n .result-amount { font-size: 32px; font-weight: 950; color: #fff; letter-spacing: -0.5px; }\n .clc-copy-btn {\n width: 183px;\n height: 52px;\n gap: 10px;\n border-radius: 8px;\n padding: 16px;\n background: #1CA5EA;\n color: #FFFFFF;\n border: none;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.2s;\n }\n .clc-copy-btn:hover { background: #158ecb; }\n .result-body { padding: 24px; }\n\n \/* \u2500\u2500 TABS \u2500\u2500 *\/\n .clc-tabs-list {\n display: flex; gap: 0;\n border-bottom: 2px solid #E2E8F0;\n margin-bottom: 20px;\n }\n .clc-tab-btn {\n padding: 10px 20px;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n color: #B0B0B0;\n background: none;\n border: none;\n border-bottom: 3px solid transparent;\n cursor: pointer;\n margin-bottom: -2px;\n transition: all 0.2s;\n text-align: center;\n }\n .clc-tab-btn:hover { color: #717171; }\n .clc-tab-btn.active {\n color: #717171;\n font-weight: 700;\n border-bottom: 3px solid #1CA5EA;\n }\n .clc-tab-panel { display: none; }\n .clc-tab-panel.active { display: block; }\n\n \/* \u2500\u2500 DESGLOSE GRID \u2500\u2500 *\/\n .desglose-grid {\n display: grid; grid-template-columns: repeat(6, 1fr);\n gap: 16px; margin-bottom: 18px;\n }\n @media (max-width: 900px) { .desglose-grid { grid-template-columns: repeat(2, 1fr); } }\n @media (max-width: 600px) { .desglose-grid { grid-template-columns: 1fr; } }\n .desglose-item {\n display: flex; justify-content: space-between; align-items: center;\n height: 78px;\n padding: 24px 32px;\n border-radius: 16px;\n background: #EBF8FF;\n border: 1px solid #1CA5EA;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n grid-column: span 2;\n opacity: 1;\n }\n @media (max-width: 900px) {\n .desglose-item { grid-column: span 1; height: auto; padding: 16px; }\n }\n .desglose-item.highlight {\n background: #E6E8F7;\n border: 1px solid #0016B2;\n }\n .desglose-item.green {\n background: #EFFBEF;\n border: 1px solid #1DB81B;\n grid-column: span 3;\n }\n .desglose-item.formula-card {\n grid-column: span 3;\n }\n @media (max-width: 900px) {\n .desglose-item.green, .desglose-item.formula-card { grid-column: span 1; }\n }\n .desglose-item.full { grid-column: auto; }\n \n .desglose-key {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 20px;\n line-height: 30px;\n color: #157CB0;\n }\n .desglose-value {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n color: #157CB0;\n }\n \n .desglose-item.highlight .desglose-key { color: #001186; }\n .desglose-item.highlight .desglose-value { color: #001186; }\n \n .desglose-item.green .desglose-key { color: #179927; }\n .desglose-item.green .desglose-value { color: #179927; }\n\n \/* \u2500\u2500 PASOS \u2500\u2500 *\/\n .pasos-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }\n .paso-item {\n display: flex;\n height: 92px;\n justify-content: space-between;\n align-items: center;\n padding-top: 16px;\n padding-right: 32px;\n padding-bottom: 16px;\n padding-left: 32px;\n opacity: 1;\n border-radius: 16px;\n background: #F5F5F5;\n border: 1px solid #969696;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n gap: 16px;\n }\n .paso-num {\n width: 48px;\n height: 48px;\n border-radius: 90px;\n padding: 10px;\n background: #969696;\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n text-align: center;\n color: #FFFFFF;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n .paso-desc {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n color: #262626;\n margin-bottom: 0px;\n }\n .paso-op {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 20px;\n line-height: 30px;\n color: #262626;\n }\n .paso-resultado {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n color: #179927;\n margin-left: auto;\n white-space: nowrap;\n }\n\n @media (max-width: 768px) {\n .paso-item {\n height: auto;\n flex-direction: column;\n align-items: flex-start;\n padding: 16px;\n gap: 12px;\n }\n .paso-resultado {\n margin-left: 0;\n margin-top: 4px;\n }\n }\n\n \/* \u2500\u2500 NORMATIVA \u2500\u2500 *\/\n .normativa-list {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n margin-bottom: 18px;\n }\n @media (max-width: 768px) {\n .normativa-list {\n grid-template-columns: 1fr;\n }\n }\n .normativa-item {\n height: 138px;\n padding: 24px 32px;\n border-radius: 16px;\n background: #F5F5F5;\n border: 1px solid #969696;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n gap: 4px;\n }\n @media (max-width: 900px) {\n .normativa-item {\n height: auto;\n padding: 16px 20px;\n }\n }\n .normativa-norma {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n color: #262626;\n margin-bottom: 0px;\n }\n .normativa-desc {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 20px;\n line-height: 30px;\n color: #262626;\n }\n\n \/* \u2500\u2500 VALIDACIONES \u2500\u2500 *\/\n .validaciones-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }\n .validacion-item {\n padding: 12px 16px; border-radius: 8px;\n font-size: 13.5px; line-height: 1.5;\n display: flex; gap: 12px; align-items: center;\n }\n .validacion-warning {\n min-height: 56px;\n padding: 8px 16px;\n gap: 4px;\n border-radius: 8px;\n border: 1px dashed #BC901B;\n background: #FFFAEF;\n color: #BC901B;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n display: flex;\n align-items: center;\n }\n .validacion-info { background: #EBF8FF; border: 1px solid #BEE3F8; color: #2B6CB0; }\n\n \/* \u2500\u2500 DISCLAIMER \u2500\u2500 *\/\n .disclaimer {\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n color: #262626;\n margin-top: 14px;\n padding-top: 0; border-top: none;\n }\n\n \/* \u2500\u2500 MODAL OVERLAY \u2500\u2500 *\/\n .clc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.4);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 20px;\n }\n .clc-modal-box {\n background: #FFFFFF;\n border-radius: 16px;\n box-shadow: 0 20px 50px rgba(0,0,0,0.15);\n width: 100%;\n max-width: 640px;\n height: 420px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n animation: clcFadeIn 0.2s ease;\n opacity: 1;\n }\n .clc-modal-box.large {\n max-width: 820px;\n width: 100%;\n height: 640px;\n max-height: 90vh;\n border-radius: 24px;\n }\n .clc-modal-box.large .clc-modal-body {\n overflow-y: auto;\n padding: 16px 32px 24px;\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n \/* Scrollbar style *\/\n .clc-modal-box.large .clc-modal-body::-webkit-scrollbar {\n width: 8px;\n }\n .clc-modal-box.large .clc-modal-body::-webkit-scrollbar-track {\n background: #F1F1F1;\n border-radius: 8px;\n }\n .clc-modal-box.large .clc-modal-body::-webkit-scrollbar-thumb {\n background: #C1C1C1;\n border-radius: 8px;\n }\n .clc-modal-box.large .clc-modal-body::-webkit-scrollbar-thumb:hover {\n background: #A8A8A8;\n }\n .clc-modal-header {\n padding: 24px 32px 16px;\n border-bottom: none;\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 20px;\n color: #262626;\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n .clc-modal-header.danger { color: #C53030; }\n .clc-modal-close {\n background: none; border: none; cursor: pointer;\n color: #A0AEC0; font-size: 22px; line-height: 1;\n padding: 2px 6px; border-radius: 4px;\n }\n .clc-modal-close:hover { background: #F8FAFC; color: #2D3748; }\n .clc-modal-body {\n padding: 16px 32px;\n flex: 1;\n overflow-y: hidden;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n color: #262626;\n }\n .clc-modal-footer {\n padding: 16px 32px 24px;\n border-top: none;\n display: flex;\n justify-content: flex-end;\n gap: 16px;\n align-items: center;\n }\n .clc-modal-footer .clc-btn-secondary {\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n color: #1CA5EA;\n background: transparent;\n border: none;\n cursor: pointer;\n transition: color 300ms ease-out;\n }\n .clc-modal-footer .clc-btn-secondary:hover {\n color: #158ecb;\n }\n .clc-modal-footer .clc-btn-primary {\n width: 130px;\n height: 52px;\n gap: 10px;\n border-radius: 8px;\n padding: 16px;\n background: #1CA5EA;\n color: #FFFFFF;\n font-family: 'Nunito', sans-serif;\n font-weight: 600;\n font-size: 16px;\n line-height: 20px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n cursor: pointer;\n transition: background-color 300ms ease-out;\n }\n .clc-modal-footer .clc-btn-primary:hover {\n background: #158ecb;\n }\n .clc-modal-note {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 20px;\n color: #262626;\n background: transparent;\n border-radius: 0;\n padding: 0;\n margin-bottom: 24px;\n border: none;\n }\n .clc-modal-box .custom-input-card {\n width: 100%;\n max-width: 576px;\n height: 52px;\n border-radius: 8px;\n border: 1px solid #CBCBCB;\n background: #FFFFFF;\n }\n .clc-modal-form-grid { display: flex; flex-direction: column; gap: 14px; }\n\n \/* \u2500\u2500 HISTORIAL \u2500\u2500 *\/\n .historial-header {\n display: flex; align-items: center; justify-content: space-between;\n margin-bottom: 14px;\n }\n .historial-title {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 30px;\n color: #262626;\n }\n .historial-empty {\n text-align: center; padding: 32px 20px;\n color: #A0AEC0; font-family: 'Nunito', sans-serif;\n font-size: 16px;\n }\n .historial-list { display: flex; flex-direction: column; gap: 12px; }\n .historial-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 32px;\n border-radius: 16px;\n background: #F5F5F5;\n border: 1px solid #CBCBCB;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);\n margin-bottom: 4px;\n transition: all 0.2s ease;\n }\n .historial-item:hover {\n box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.15);\n transform: translateY(-1px);\n }\n .historial-nombre {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 20px;\n line-height: 28px;\n color: #262626;\n margin-bottom: 2px;\n }\n .historial-correo {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n color: #718096;\n margin-bottom: 2px;\n }\n .historial-meta {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n font-size: 16px;\n line-height: 24px;\n color: #718096;\n }\n .historial-prima {\n font-family: 'Nunito', sans-serif;\n font-weight: 700;\n font-size: 22px;\n line-height: 30px;\n color: #179927;\n white-space: nowrap;\n }\n\n .pa-status {\n border-radius: 8px; padding: 10px 14px;\n margin-bottom: 12px; font-size: 13px; font-weight: 600;\n }\n .pa-status-ok { background: #E6F7EE; color: #007A3D; border: 1px solid #B3E8CC; }\n .pa-status-error { background: #FFF0F0; color: #C00000; border: 1px solid #FFBDBB; font-weight: 400; }\n .pa-status-error strong { font-weight: 700; }\n\n \/* \u2500\u2500 TOAST \u2500\u2500 *\/\n .clc-toast {\n position: fixed; bottom: 24px; right: 24px;\n background: #2D3748; color: #fff;\n padding: 12px 20px; border-radius: 10px;\n font-size: 13px; font-weight: 600;\n box-shadow: 0 4px 16px rgba(0,0,0,0.2);\n z-index: 2000;\n animation: clcFadeIn 0.2s ease;\n }\n\n \/* \u2500\u2500 RESPONSIVE OVERRIDES FOR MOBILE DEVICE VIEWPORTS \u2500\u2500 *\/\n @media (max-width: 900px) {\n .clc-app-container {\n width: 100%;\n padding: 16px 12px 32px;\n }\n .clc-app-header {\n flex-direction: column;\n align-items: stretch;\n gap: 16px;\n padding: 20px 16px;\n min-height: auto;\n }\n .clc-header-left, .clc-header-right {\n width: 100%;\n flex: none !important;\n flex-shrink: 1;\n flex-direction: column;\n align-items: stretch;\n gap: 12px;\n }\n .clc-header-title {\n white-space: normal;\n font-size: 20px;\n line-height: 26px;\n text-align: center;\n }\n .clc-header-info-text {\n white-space: normal;\n font-size: 16px;\n line-height: 22px;\n text-align: center;\n }\n .clc-btn-historial {\n width: 100%;\n }\n\n .clc-year-banner {\n flex-direction: column;\n align-items: stretch;\n padding: 20px 16px;\n gap: 12px;\n margin-bottom: 24px;\n }\n .clc-year-banner-left {\n display: flex;\n justify-content: center;\n flex: none !important;\n width: 100% !important;\n }\n .clc-year-banner-label {\n font-size: 22px;\n line-height: 26px;\n text-align: center;\n }\n .clc-year-banner-right {\n flex-direction: column;\n align-items: center;\n gap: 8px;\n font-size: 16px;\n line-height: 20px;\n width: 100% !important;\n text-align: center;\n flex: none !important;\n }\n .clc-year-banner-sep {\n display: none;\n }\n\n .custom-input-card {\n max-width: 100%;\n }\n }\n\n @media (max-width: 550px) {\n .action-bar {\n flex-direction: column-reverse;\n align-items: stretch;\n gap: 12px;\n width: 100%;\n }\n .clc-btn-primary, .clc-btn-secondary {\n width: 100% !important;\n height: 52px;\n }\n .result-header {\n flex-direction: column;\n align-items: stretch;\n gap: 16px;\n text-align: center;\n padding: 20px 16px;\n }\n .result-amount {\n font-size: 22px;\n text-align: center;\n }\n .clc-copy-btn {\n width: 100%;\n }\n .clc-tabs-list {\n display: flex;\n width: 100%;\n overflow-x: auto;\n white-space: nowrap;\n -webkit-overflow-scrolling: touch;\n margin-bottom: 16px;\n gap: 8px;\n border-bottom: 2px solid #E2E8F0;\n }\n .clc-tab-btn {\n padding: 10px 14px;\n font-size: 14px;\n flex-shrink: 0;\n }\n }\n\n \/* \u2500\u2500 ENFORCE NATURAL HEIGHTS WITH MAXIMUM SPECIFICITY OVERRIDES \u2500\u2500 *\/\n #clc-main-view .clc-app-header,\n #clc-main-view .clc-year-banner,\n #clc-result-panel .clc-app-header,\n #clc-result-panel .clc-year-banner,\n .clc-app-container .clc-app-header,\n .clc-app-container .clc-year-banner {\n height: auto !important;\n min-height: 0 !important;\n max-height: none !important;\n flex-grow: 0 !important;\n align-self: flex-start !important;\n width: 100% !important;\n }\n #clc-main-view .clc-header-left,\n #clc-main-view .clc-header-right,\n #clc-main-view .clc-year-banner-left,\n #clc-main-view .clc-year-banner-right,\n #clc-result-panel .clc-header-left,\n #clc-result-panel .clc-header-right,\n #clc-result-panel .clc-year-banner-left,\n #clc-result-panel .clc-year-banner-right {\n height: auto !important;\n min-height: 0 !important;\n }\n <\/style>\n\n <div class=\"clc-app-container\">\n <div id=\"clc-main-view\">\n <!-- HEADER -->\n <div class=\"clc-app-header\">\n <div class=\"clc-header-left\">\n <span class=\"clc-header-title\">Calculadora Prima Legal \u2014 Art. 306 CST<\/span>\n <\/div>\n <div class=\"clc-header-right\">\n <span class=\"clc-header-info-text\" id=\"clc-header-info\">SMMLV 2026: $ 1.750.905 \u2022 UVT: $ 52.374<\/span>\n <button class=\"clc-btn-historial\" onclick=\"clcOpenHistorial()\">\n Ver Historial\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M4 19.5A2.5 2.5 0 0 1 6.5 17H20\"><\/path>\n <path d=\"M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- YEAR BANNER -->\n <div class=\"clc-year-banner\" id=\"clc-year-banner\">\n <div class=\"clc-year-banner-left\">\n <span class=\"clc-year-banner-label\">Vigente: A\u00f1o 2026<\/span>\n <\/div>\n <div class=\"clc-year-banner-right\">\n <span>SMMLV: $ 1.750.905<\/span>\n <span class=\"clc-year-banner-sep\">\u2022<\/span>\n <span>Auxilio de Transporte: $ 249.095<\/span>\n <span class=\"clc-year-banner-sep\">\u2022<\/span>\n <span>UVT: $ 52.374<\/span>\n <\/div>\n <\/div>\n\n <!-- CHIPS -->\n <div class=\"chips-row\" id=\"clc-chips-row\" style=\"display: none;\"><\/div>\n\n <!-- ALERT AUXILIO -->\n <div id=\"clc-alert-auxilio\" style=\"display: none;\">\n <div class=\"alert alert-warning\">\n <div class=\"alert-icon\">\u26a0<\/div>\n <div>\n <div class=\"alert-title\">Auxilio de transporte<\/div>\n <div id=\"clc-alert-auxilio-msg\" aria-live=\"polite\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- FORM -->\n <div class=\"section-separator\"><\/div>\n <div class=\"section-title\">Datos del trabajador<\/div>\n <div class=\"form-grid\">\n <!-- Salario -->\n <div class=\"field-group\">\n <div class=\"field-header\">\n <label class=\"field-label\" for=\"clc-inp-salario\">Salario Mensual<\/label>\n <span class=\"clc-tooltip-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-alert-circle\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line>\n <\/svg>\n <span class=\"clc-tooltip-popup\">\n <div class=\"clc-tooltip-title\">Salario mensual<\/div>\n Salario ordinario mensual pactado. No incluir bonificaciones no salariales ni gastos de representaci\u00f3n. Base legal: Art. 127 CST.\n <\/span>\n <\/span>\n <\/div>\n <div class=\"custom-input-card\">\n <span class=\"card-input-label\">Salario<\/span>\n <input class=\"card-input-field\" id=\"clc-inp-salario\" type=\"text\" inputmode=\"numeric\" placeholder=\"$0.000.000\" oninput=\"clcOnCurrencyInput(this); clcOnFormChange()\">\n <\/div>\n <div class=\"field-error\" id=\"clc-err-salario\" style=\"display: none;\"><\/div>\n <\/div>\n\n <!-- Dias -->\n <div class=\"field-group\">\n <div class=\"field-header\">\n <label class=\"field-label\" for=\"clc-inp-dias\">D\u00edas trabajados por Semestre<\/label>\n <span class=\"clc-tooltip-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-alert-circle\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line>\n <\/svg>\n <span class=\"clc-tooltip-popup\">\n <div class=\"clc-tooltip-title\">D\u00edas trabajados<\/div>\n D\u00edas reales trabajados en el semestre a liquidar. M\u00e1ximo 180 d\u00edas por semestre. Primer semestre: 1 ene \u2013 30 jun. Segundo semestre: 1 jul \u2013 20 dic. Art. 306 CST.\n <\/span>\n <\/span>\n <\/div>\n <div class=\"custom-input-card\">\n <span class=\"card-input-label\">D\u00edas<\/span>\n <input class=\"card-input-field\" id=\"clc-inp-dias\" type=\"text\" inputmode=\"numeric\" placeholder=\"180 d\u00edas\" oninput=\"clcOnDiasInput(this); clcOnFormChange()\">\n <\/div>\n <div class=\"field-error\" id=\"clc-err-dias\" style=\"display: none;\"><\/div>\n <\/div>\n\n <!-- Auxilio -->\n <div class=\"field-group\">\n <div class=\"field-header\">\n <label class=\"field-label\" for=\"clc-inp-auxilio\">Auxilio de Transporte<\/label>\n <span class=\"clc-tooltip-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-alert-circle\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line>\n <\/svg>\n <span class=\"clc-tooltip-popup\">\n <div class=\"clc-tooltip-title\">Auxilio de transporte<\/div>\n Solo aplica para salarios hasta 2 SMMLV. El auxilio s\u00ed entra en la base de prima (Art. 307 CST). Decreto 1174\/1991.\n <\/span>\n <\/span>\n <\/div>\n <div class=\"custom-input-card disabled\">\n <span class=\"card-input-label\">Auxilio<\/span>\n <input class=\"card-input-field\" id=\"clc-inp-auxilio\" type=\"text\" placeholder=\"Autom\u00e1tico\" readonly=\"readonly\">\n <\/div>\n <\/div>\n\n <!-- Otros conceptos -->\n <div class=\"field-group\">\n <div class=\"field-header\">\n <label class=\"field-label\" for=\"clc-inp-otros\">Promedio otros Conceptos<\/label>\n <span class=\"clc-tooltip-icon\">\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-alert-circle\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle>\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line>\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line>\n <\/svg>\n <span class=\"clc-tooltip-popup\">\n <div class=\"clc-tooltip-title\">Promedio de otros conceptos<\/div>\n Ingresa el promedio mensual de los pagos salariales variables recibidos durante el semestre. Incluye: comisiones habituales, horas extras, recargos.\n <\/span>\n <\/span>\n <\/div>\n <div class=\"custom-input-card\">\n <span class=\"card-input-label\">Promedio<\/span>\n <input class=\"card-input-field\" id=\"clc-inp-otros\" type=\"text\" inputmode=\"numeric\" placeholder=\"0,0\" oninput=\"clcOnCurrencyInput(this); clcOnFormChange()\">\n <\/div>\n <\/div>\n <\/div>\n <div class=\"section-separator\"><\/div>\n\n <!-- REFERENCIA RAPIDA -->\n <div class=\"section-title\">Referencia r\u00e1pida<\/div>\n <div class=\"ref-grid\" id=\"clc-ref-grid\">\n <div class=\"ref-card ref-card-blue\">\n <div class=\"ref-card-title\">Prima Semestre Completo<\/div>\n <div class=\"ref-card-value\" id=\"clc-ref-semestre\">$ 0.000.000<\/div>\n <div class=\"ref-card-sub\">180 d\u00edas<\/div>\n <\/div>\n <div class=\"ref-card ref-card-green\">\n <div class=\"ref-card-title\">Prima Anual (2 Semestres)<\/div>\n <div class=\"ref-card-value\" id=\"clc-ref-anual\">$ 0.000.000<\/div>\n <div class=\"ref-card-sub\">= 1 mes de salario base<\/div>\n <\/div>\n <div class=\"ref-card ref-card-orange\">\n <div class=\"ref-card-title\">Valor por D\u00eda<\/div>\n <div class=\"ref-card-value\" id=\"clc-ref-diario\">$ 0.000.000<\/div>\n <div class=\"ref-card-sub\">Base \/ 30<\/div>\n <\/div>\n <\/div>\n\n <div class=\"section-separator\" style=\"margin-top: 52px;\"><\/div>\n\n <!-- ACTION BAR -->\n <div class=\"action-bar\">\n <button class=\"clc-btn clc-btn-secondary\" onclick=\"clcHandleLimpiar()\">\n Limpiar\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-eraser\">\n <path d=\"M20 20H7L3 16C2.5 15.5 2.5 14.5 3 14L13 4L20 11L11 20M17 14L10 7\"><\/path>\n <\/svg>\n <\/button>\n <button class=\"clc-btn clc-btn-primary\" id=\"clc-btn-calcular\" onclick=\"clcHandleCalcular()\">\n Calcular Prima\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"><\/rect>\n <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line>\n <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"21\"><\/line>\n <\/svg>\n <\/button>\n <\/div>\n <\/div>\n\n <!-- RESULT PANEL -->\n <div id=\"clc-result-panel\" style=\"display: none;\"><\/div>\n <\/div>\n\n <!-- MODAL CAPTURA -->\n <div id=\"clc-modal-captura\" class=\"clc-modal-overlay\" style=\"display: none;\">\n <div class=\"clc-modal-box\">\n <div class=\"clc-modal-header\">\n Calcular Prima\n <\/div>\n <div class=\"clc-modal-body\">\n <div class=\"clc-modal-note\">\n Ingresa el nombre y el correo del empleado o solicitante para realizar el calculo de la prima. El resultado quedar\u00e1 guardado en el historial de calculos.\n <\/div>\n <div class=\"clc-modal-form-grid\">\n <div class=\"field-group\">\n <div class=\"custom-input-card\">\n <span class=\"card-input-label\">Nombre completo<\/span>\n <input class=\"card-input-field\" id=\"clc-cap-nombre\" type=\"text\" placeholder=\"Ej: Mar\u00eda Garcia\">\n <\/div>\n <div class=\"field-error\" id=\"clc-err-cap-nombre\" style=\"display: none;\"><\/div>\n <\/div>\n <div class=\"field-group\" style=\"margin-top: 4px;\">\n <div class=\"custom-input-card\">\n <span class=\"card-input-label\">Correo<\/span>\n <input class=\"card-input-field\" id=\"clc-cap-correo\" type=\"email\" placeholder=\"Ej: maria@empresa.com\">\n <\/div>\n <div class=\"field-error\" id=\"clc-err-cap-correo\" style=\"display: none;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"clc-modal-footer\">\n <button class=\"clc-btn clc-btn-secondary\" onclick=\"clcCloseCaptura()\">Cancelar<\/button>\n <button class=\"clc-btn clc-btn-primary\" onclick=\"clcConfirmCaptura()\">Ver resultado<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- MODAL HISTORIAL -->\n <div id=\"clc-modal-historial\" class=\"clc-modal-overlay\" style=\"display: none;\">\n <div class=\"clc-modal-box large\">\n <div class=\"clc-modal-header\">\n Historial de c\u00e1lculos\n <button class=\"clc-modal-close\" onclick=\"clcCloseHistorial()\">\u00d7<\/button>\n <\/div>\n <div class=\"clc-modal-body\" id=\"clc-historial-body\"><\/div>\n <div class=\"clc-modal-footer\" id=\"clc-historial-footer\"><\/div>\n <\/div>\n <\/div>\n\n <!-- MODAL CONFIRMAR LIMPIAR -->\n <div id=\"clc-modal-confirm-clear\" class=\"clc-modal-overlay\" style=\"display: none;\">\n <div class=\"clc-modal-box\">\n <div class=\"clc-modal-header danger\">Limpiar historial<\/div>\n <div class=\"clc-modal-body\">\n Esta acci\u00f3n eliminar\u00e1 todos los registros guardados. No se puede deshacer.\n <\/div>\n <div class=\"clc-modal-footer\">\n <button class=\"clc-btn clc-btn-secondary\" onclick=\"document.getElementById('clc-modal-confirm-clear').style.display='none'\">Cancelar<\/button>\n <button class=\"clc-btn clc-btn-danger\" onclick=\"clcConfirmClear()\">Limpiar todo<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- TOAST -->\n <div id=\"clc-toast\" class=\"clc-toast\" style=\"display: none;\"><\/div>\n\n <script>\n(function() {\n 'use strict';\n\n \/\/ \u2500\u2500\u2500 PARAMETROS LEGALES \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n var PARAMS = {\n 2025: { ano: 2025, smmlv: 1423500, auxTransporte: 200000, uvt: 49799 },\n 2026: { ano: 2026, smmlv: 1750905, auxTransporte: 249095, uvt: 52374 }\n };\n var NORMATIVA = [\n { norma: 'CST Art. 306', desc: 'Prima anual de servicios: 15 d\\u00edas de salario por semestre (30 d\\u00edas por a\\u00f1o). Se paga en junio y diciembre.' },\n { norma: 'CST Art. 307', desc: 'Base de liquidaci\\u00f3n: salario + auxilio de transporte + pagos salariales (Art. 127 CST). El auxilio de transporte S\\u00cd entra en la base.' },\n { norma: 'CST Art. 127', desc: 'Constituci\\u00f3n del salario: comisiones, bonificaciones salariales habituales, horas extras, recargos nocturnos.' },\n { norma: 'CST Art. 128', desc: 'Pagos que NO son salario: beneficios extralegales, gastos de representaci\\u00f3n, medios de transporte, primas extralegales pactadas como no salariales.' },\n { norma: 'Decreto 1174\/1991', desc: 'Auxilio de transporte: solo aplica para trabajadores con salario hasta 2 SMMLV. Entra en la base de prima y cesant\\u00edas.' }\n ];\n\n \/\/ \u2500\u2500\u2500 ESTADO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n var state = {\n ano: 2026,\n salario: '',\n dias: '',\n auxilio: '',\n otrosConceptos: '',\n resultado: null,\n pendingCalculo: null\n };\n\n var SESION_KEY = 'clc_sesion_hoy';\n\n function clcGetFechaHoy() {\n var d = new Date();\n return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');\n }\n\n function clcGetSesionHoy() {\n var raw = localStorage.getItem(SESION_KEY);\n if (!raw) return null;\n try {\n var sesion = JSON.parse(raw);\n if (sesion.fecha === clcGetFechaHoy()) return sesion;\n return null;\n } catch (e) { return null; }\n }\n\n function clcGuardarSesion(nombre, correo, telefono) {\n var sesion = { fecha: clcGetFechaHoy(), nombre: nombre, correo: correo, telefono: telefono };\n localStorage.setItem(SESION_KEY, JSON.stringify(sesion));\n }\n\n \/\/ \u2500\u2500\u2500 FORMATO MONEDA \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function fmt(v) {\n return '$ ' + new Intl.NumberFormat('es-CO', { maximumFractionDigits: 0 }).format(v || 0);\n }\n\n function clcCleanNum(val) {\n if (!val) return 0;\n return parseFloat(String(val).replace(\/[^0-9]\/g, '')) || 0;\n }\n\n \/\/ \u2500\u2500\u2500 AUTO-FORMATTERS FOR INPUTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n window.clcOnCurrencyInput = function(el) {\n var cursor = el.selectionStart;\n var originalLen = el.value.length;\n var clean = el.value.replace(\/[^0-9]\/g, '');\n if (!clean) {\n el.value = '';\n return;\n }\n var formatted = fmt(parseFloat(clean));\n el.value = formatted;\n var diff = formatted.length - originalLen;\n el.setSelectionRange(cursor + diff, cursor + diff);\n };\n\n window.clcOnDiasInput = function(el) {\n var clean = el.value.replace(\/[^0-9]\/g, '');\n if (!clean) {\n el.value = '';\n return;\n }\n var val = parseFloat(clean);\n if (val > 180) {\n val = 180;\n }\n el.value = val + ' d\u00edas';\n };\n\n \/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function init() {\n clcRenderYearBanner();\n clcOnFormChange();\n }\n\n function clcRenderYearBanner() {\n var p = PARAMS[state.ano];\n var container = document.getElementById('clc-year-banner');\n if (!container) return;\n container.innerHTML =\n '<div class=\"clc-year-banner-left\">' +\n '<span class=\"clc-year-banner-label\">Vigente: A\u00f1o ' + state.ano + '<\/span>' +\n '<\/div>' +\n '<div class=\"clc-year-banner-right\">' +\n '<span>SMMLV: ' + fmt(p.smmlv) + '<\/span>' +\n '<span class=\"clc-year-banner-sep\">\u2022<\/span>' +\n '<span>Auxilio de Transporte: ' + fmt(p.auxTransporte) + '<\/span>' +\n '<span class=\"clc-year-banner-sep\">\u2022<\/span>' +\n '<span>UVT: ' + fmt(p.uvt) + '<\/span>' +\n '<\/div>';\n }\n\n function clcGetDiasError(diasRaw) {\n var num = clcCleanNum(diasRaw);\n return num > 180;\n }\n\n function clcOnFormChange() {\n var salEl = document.getElementById('clc-inp-salario');\n var diasEl = document.getElementById('clc-inp-dias');\n var otrosEl = document.getElementById('clc-inp-otros');\n if (!salEl || !diasEl || !otrosEl) return;\n\n state.salario = salEl.value;\n state.dias = diasEl.value;\n state.otrosConceptos = otrosEl.value;\n\n var p = PARAMS[state.ano];\n var sal = clcCleanNum(state.salario);\n var otros = clcCleanNum(state.otrosConceptos);\n var dias = clcCleanNum(state.dias);\n\n \/\/ \u2500\u2500 VALIDACION DIAS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n var diasError = clcGetDiasError(state.dias);\n var inpDias = document.getElementById('clc-inp-dias');\n var errDias = document.getElementById('clc-err-dias');\n if (diasError) {\n inpDias.classList.add('error');\n errDias.textContent = 'El valor super\u00f3 el m\u00e1ximo semestral de 180 d\u00edas.';\n errDias.style.display = 'block';\n } else {\n inpDias.classList.remove('error');\n errDias.textContent = '';\n errDias.style.display = 'none';\n }\n\n var btnCalc = document.getElementById('clc-btn-calcular');\n if (btnCalc) btnCalc.disabled = diasError;\n\n \/\/ \u2500\u2500 AUXILIO LOGIC \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n var inpAuxilio = document.getElementById('clc-inp-auxilio');\n var alertEl = document.getElementById('clc-alert-auxilio');\n var alertMsg = document.getElementById('clc-alert-auxilio-msg');\n var auxilioAplica = sal === 0 || sal <= p.smmlv * 2;\n\n if (sal > 0) {\n if (auxilioAplica) {\n inpAuxilio.value = fmt(p.auxTransporte);\n state.auxilio = String(p.auxTransporte);\n if (alertEl) alertEl.style.display = 'none';\n } else {\n inpAuxilio.value = fmt(0);\n state.auxilio = '0';\n if (alertEl) alertEl.style.display = 'block';\n if (alertMsg) alertMsg.textContent = 'El salario supera 2 SMMLV (' + fmt(p.smmlv * 2) + '). Auxilio de transporte excluido.';\n }\n } else {\n inpAuxilio.value = '';\n state.auxilio = '';\n if (alertEl) alertEl.style.display = 'none';\n }\n\n var aux = clcCleanNum(state.auxilio);\n var base = sal + otros + aux;\n var primaEst = dias > 0 && base > 0 ? (base * dias) \/ 360 : 0;\n\n \/\/ Chips\n var chipsRow = document.getElementById('clc-chips-row');\n if (chipsRow) {\n if (!diasError && (sal > 0 || dias > 0)) {\n chipsRow.style.display = 'flex';\n var html = '';\n if (base > 0) html += '<span class=\"chip chip-blue\">Base: ' + fmt(base) + '<\/span>';\n if (primaEst > 0) html += '<span class=\"chip chip-green\">Prima estimada: ' + fmt(primaEst) + '<\/span>';\n if (sal > 0) {\n if (auxilioAplica) {\n html += '<span class=\"chip chip-green\">Auxilio incluido: ' + fmt(aux) + '<\/span>';\n } else {\n html += '<span class=\"chip chip-orange\">Auxilio excluido<\/span>';\n }\n }\n if (dias > 0) html += '<span class=\"chip chip-blue\">' + dias + ' d\\u00edas<\/span>';\n chipsRow.innerHTML = html;\n } else {\n chipsRow.style.display = 'none';\n }\n }\n\n \/\/ Referencia rapida\n var refSem = document.getElementById('clc-ref-semestre');\n var refAnu = document.getElementById('clc-ref-anual');\n var refDia = document.getElementById('clc-ref-diario');\n if (sal > 0) {\n if (refSem) refSem.textContent = fmt(base * 180 \/ 360);\n if (refAnu) refAnu.textContent = fmt(base * 360 \/ 360);\n if (refDia) refDia.textContent = fmt(base \/ 30);\n } else {\n if (refSem) refSem.textContent = '$ 0.000.000';\n if (refAnu) refAnu.textContent = '$ 0.000.000';\n if (refDia) refDia.textContent = '$ 0.000.000';\n }\n }\n\n \/\/ \u2500\u2500\u2500 CALCULAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcHandleCalcular() {\n var sal = clcCleanNum(state.salario);\n var dias = clcCleanNum(state.dias);\n var aux = clcCleanNum(state.auxilio);\n var otros = clcCleanNum(state.otrosConceptos);\n\n var hasError = false;\n if (sal <= 0) {\n clcShowFieldError('clc-err-salario', 'Ingresa el salario mensual.');\n hasError = true;\n } else {\n clcHideFieldError('clc-err-salario');\n }\n if (dias <= 0) {\n clcShowFieldError('clc-err-dias', 'Ingresa los d\\u00edas trabajados.');\n hasError = true;\n } else if (clcGetDiasError(state.dias)) {\n hasError = true;\n } else {\n clcHideFieldError('clc-err-dias');\n }\n if (hasError) return;\n\n state.pendingCalculo = clcCalcularPrima({ salario: sal, dias: dias, auxilio: aux, otrosConceptos: otros, ano: state.ano });\n\n var sesionHoy = clcGetSesionHoy();\n if (sesionHoy) {\n clcGuardarYMostrar(sesionHoy.nombre, sesionHoy.correo, sesionHoy.telefono);\n return;\n }\n\n var capNombre = document.getElementById('clc-cap-nombre');\n var capCorreo = document.getElementById('clc-cap-correo');\n if (capNombre) capNombre.value = '';\n if (capCorreo) capCorreo.value = '';\n clcHideFieldError('clc-err-cap-nombre');\n clcHideFieldError('clc-err-cap-correo');\n var modalCaptura = document.getElementById('clc-modal-captura');\n if (modalCaptura) modalCaptura.style.display = 'flex';\n setTimeout(function() { if (capNombre) capNombre.focus(); }, 100);\n }\n\n function clcCloseCaptura() {\n var modalCaptura = document.getElementById('clc-modal-captura');\n if (modalCaptura) modalCaptura.style.display = 'none';\n }\n\n function clcConfirmCaptura() {\n var capNombre = document.getElementById('clc-cap-nombre');\n var capCorreo = document.getElementById('clc-cap-correo');\n var nombre = capNombre ? capNombre.value.trim() : '';\n var correo = capCorreo ? capCorreo.value.trim() : '';\n var hasError = false;\n if (!nombre) { clcShowFieldError('clc-err-cap-nombre', 'El nombre es requerido.'); hasError = true; } else { clcHideFieldError('clc-err-cap-nombre'); }\n if (!correo) { clcShowFieldError('clc-err-cap-correo', 'El correo es requerido.'); hasError = true; }\n else if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(correo)) { clcShowFieldError('clc-err-cap-correo', 'Ingresa un correo v\u00e1lido.'); hasError = true; }\n else { clcHideFieldError('clc-err-cap-correo'); }\n if (hasError) return;\n\n var modalCaptura = document.getElementById('clc-modal-captura');\n if (modalCaptura) modalCaptura.style.display = 'none';\n\n clcGuardarSesion(nombre, correo, '');\n clcGuardarYMostrar(nombre, correo, '');\n }\n\n function clcGuardarYMostrar(nombre, correo, telefono) {\n var registro = {\n fecha: new Date().toLocaleString('es-CO'),\n nombre: nombre,\n correo: correo,\n telefono: telefono || '',\n ano: state.ano,\n salario: clcCleanNum(state.salario),\n dias: clcCleanNum(state.dias),\n auxilio: clcCleanNum(state.auxilio),\n otrosConceptos: clcCleanNum(state.otrosConceptos),\n prima: state.pendingCalculo.resultado\n };\n var raw = localStorage.getItem('prima_historial');\n var historial = raw ? JSON.parse(raw) : [];\n historial.push(registro);\n if (historial.length > 200) historial = historial.slice(-200);\n localStorage.setItem('prima_historial', JSON.stringify(historial));\n\n clcRenderResult(state.pendingCalculo);\n clcShowToast('C\u00e1lculo guardado. Enviando a Power Automate...');\n clcEnviarRegistroAutomatico(registro);\n clcSendToLeadWebhook(registro);\n }\n\n function clcSendToLeadWebhook(registro) {\n \/\/ webhook_leads.php expects:\n \/\/ 1. source_url \/ Page_URL containing '\/co\/' to map country to 'Colombia'\n \/\/ 2. form fields: nombre, email, mensaje (details), Page_Title \/ form_name\n var details = {\n nombre: registro.nombre,\n email: registro.correo,\n mensaje: 'Calculadora Prima Legal - Salario: ' + fmt(registro.salario) + ', D\u00edas: ' + registro.dias + ', Prima: ' + fmt(registro.prima),\n source_url: 'https:\/\/softland.com\/co\/recursos\/recursos-calculadora-de-prima-de-servicios\/',\n page_url: 'https:\/\/softland.com\/co\/recursos\/recursos-calculadora-de-prima-de-servicios\/',\n Page_URL: 'https:\/\/softland.com\/co\/recursos\/recursos-calculadora-de-prima-de-servicios\/',\n page_title: 'Calculadora Prima Legal',\n Page_Title: 'Calculadora Prima Legal',\n form_name: 'Calculadora Prima Legal'\n };\n\n var formBody = [];\n for (var property in details) {\n var encodedKey = encodeURIComponent(property);\n var encodedValue = encodeURIComponent(details[property]);\n formBody.push(encodedKey + \"=\" + encodedValue);\n }\n var queryString = formBody.join(\"&\");\n\n \/\/ Send both via URL query parameters (populates $_GET) and request body (populates $_POST)\n var targetUrl = 'https:\/\/softland.com\/flow\/api\/webhooks\/leads.php??' + queryString;\n\n fetch(targetUrl, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/x-www-form-urlencoded;charset=UTF-8'\n },\n body: queryString\n })\n .then(function(res) {\n console.log('Lead webhook robust send response status:', res.status);\n })\n .catch(function(err) {\n console.error('Lead webhook robust send error:', err);\n });\n }\n\n function clcEnviarRegistroAutomatico(registro) {\n var payload = [{\n Fecha: registro.fecha,\n Nombre: registro.nombre,\n Correo: registro.correo,\n Telefono: registro.telefono || '',\n Prima: String(registro.prima),\n Ano: String(registro.ano),\n Salario: String(registro.salario),\n Dias: String(registro.dias)\n }];\n fetch(PA_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n })\n .then(function(res) {\n if (res.ok) {\n clcShowToast('C\\u00e1lculo enviado a Power Automate correctamente.');\n } else {\n clcShowToast('Error al enviar a Power Automate: HTTP ' + res.status);\n }\n })\n .catch(function(err) {\n clcShowToast('Error al enviar: ' + (err && err.message ? err.message : String(err)));\n });\n }\n\n \/\/ \u2500\u2500\u2500 CALCULO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcCalcularPrima(opts) {\n var p = PARAMS[opts.ano] || PARAMS[2026];\n var sal = opts.salario || 0;\n var d = opts.dias || 0;\n var aux = opts.auxilio || 0;\n var otros = opts.otrosConceptos || 0;\n\n var warnings = [];\n if (sal < p.smmlv) warnings.push({ tipo: 'warning', msg: 'El salario (' + fmt(sal) + ') es menor al SMMLV ' + p.ano + ' (' + fmt(p.smmlv) + '). Solo aplica para la jornada parcial. Por favor revise la informaci\u00f3n' });\n if (d > 180) warnings.push({ tipo: 'warning', msg: 'Los d\u00edas ingresados superan el m\u00e1ximo semestral de 180 d\u00edas.' });\n if (aux > 0 && sal > p.smmlv * 2) warnings.push({ tipo: 'info', msg: 'El auxilio de transporte solo aplica para salarios hasta 2 SMMLV (' + fmt(p.smmlv * 2) + ').' });\n\n var base = sal + otros + aux;\n var resultado = (base * d) \/ 360;\n var valorDiario = base \/ 30;\n\n var datosUsados = {};\n datosUsados['Salario base'] = sal;\n datosUsados['Otros conceptos salariales'] = otros;\n datosUsados['Auxilio de transporte'] = aux;\n datosUsados['Base de liquidaci\u00f3n'] = base;\n datosUsados['D\u00edas trabajados'] = d;\n datosUsados['SMMLV'] = p.smmlv;\n datosUsados['Auxilio transporte vigente'] = p.auxTransporte;\n datosUsados['A\u00f1o normativo'] = p.ano;\n\n var desglose = {};\n desglose['Salario Base'] = sal;\n desglose['Otros conceptos Salariales'] = otros;\n desglose['Auxilio de Transporte'] = aux;\n desglose['Base de Liquidaci\u00f3n'] = base;\n desglose['D\u00edas Trabajados'] = d;\n desglose['Valor Diario'] = valorDiario;\n desglose['F\u00f3rmula'] = '(' + fmt(base) + ' x ' + d + ') \/ 360';\n desglose['Prima Legal'] = resultado;\n\n return {\n resultado: resultado,\n validaciones: warnings,\n pasos: [\n { n: 1, desc: 'Determinar base de liquidaci\u00f3n (Art. 307 CST)', op: 'Salario (' + fmt(sal) + ') + Otros salariales (' + fmt(otros) + ') + Auxilio transporte (' + fmt(aux) + ')', resultado: base },\n { n: 2, desc: 'Calcular valor diario de prima', op: fmt(base) + ' \/ 30 d\u00edas', resultado: valorDiario },\n { n: 3, desc: 'Aplicar f\u00f3rmula Art. 306 CST: (Base x D\u00edas) \/ 360', op: '(' + fmt(base) + ' x ' + d + ' d\u00edas) \/ 360', resultado: resultado }\n ],\n datosUsados: datosUsados,\n desglose: desglose\n };\n }\n\n \/\/ \u2500\u2500\u2500 RENDER RESULTADO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n var activeTab = 'resumen';\n\n function clcRenderResult(result) {\n state.resultado = result;\n activeTab = 'resumen';\n var panel = document.getElementById('clc-result-panel');\n var mainView = document.getElementById('clc-main-view');\n if (!panel) return;\n \n \/\/ HIDE main view and show result view (no scroll!)\n if (mainView) mainView.style.display = 'none';\n panel.style.display = 'block';\n\n var validHtml = '';\n if (result.validaciones && result.validaciones.length > 0) {\n validHtml = '<div class=\"validaciones-list\" style=\"margin-bottom: 24px;\">';\n result.validaciones.forEach(function(v) {\n var icon = v.tipo === 'warning'\n ? '<svg width=\"40\" height=\"40\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#BC901B\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink: 0;\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"><\/line><\/svg>'\n : '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color: #3182CE; flex-shrink: 0;\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"><\/line><line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"><\/line><\/svg>';\n validHtml += '<div class=\"validacion-item validacion-' + v.tipo + '\">' + icon + '<span>' + v.msg + '<\/span><\/div>';\n });\n validHtml += '<\/div>';\n }\n\n panel.innerHTML =\n '<div class=\"result-wrapper\" style=\"margin-top: 0; box-shadow: none; border: none;\">' +\n '<div class=\"result-header\" style=\"border-radius: 12px; margin-bottom: 20px;\">' +\n '<div class=\"result-amount\" style=\"font-size: 24px; font-weight: 700; font-family:\\u0027Nunito\\u0027, sans-serif;\">Prima Estimada: ' + fmt(result.resultado) + '<\/div>' +\n '<button class=\"clc-copy-btn\" onclick=\"clcHandleCopy()\">' +\n 'Copiar resultado' +\n '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-copy\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"><\/rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"><\/path><\/svg>' +\n '<\/button>' +\n '<\/div>' +\n '<div class=\"result-body\" style=\"padding: 0;\">' +\n '<div class=\"disclaimer\" style=\"margin-bottom: 24px;\">El siguiente es un simulador informativo. No reemplaza asesor\u00eda contable o tributaria profesional. Normativa: Art. 306 y 307 del C\u00f3digo Sustantivo del Trabajo Colombia.<\/div>' +\n '<div style=\"height: 0px; border-top: 2px solid #CBCBCB; margin-bottom: 24px;\"><\/div>' +\n validHtml +\n '<div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:40px; flex-wrap:wrap; gap:10px;\">' +\n '<div class=\"clc-tabs-list\" style=\"border-bottom:none; margin-bottom:0;\">' +\n '<button class=\"clc-tab-btn active\" onclick=\"clcSwitchTab(\\u0027clc-tab-resumen\\u0027, this)\">Resumen<\/button>' +\n '<button class=\"clc-tab-btn\" onclick=\"clcSwitchTab(\\u0027clc-tab-pasos\\u0027, this)\">Paso a paso<\/button>' +\n '<button class=\"clc-tab-btn\" onclick=\"clcSwitchTab(\\u0027clc-tab-datos\\u0027, this)\">Datos usados<\/button>' +\n '<button class=\"clc-tab-btn\" onclick=\"clcSwitchTab(\\u0027clc-tab-normativa\\u0027, this)\">Normativa<\/button>' +\n '<\/div>' +\n '<div style=\"display:flex; gap:16px;\">' +\n '<a href=\"javascript:void(0)\" onclick=\"clcExportCSV()\" style=\"color:#1CA5EA; font-family:\\u0027Nunito\\u0027, sans-serif; font-weight:600; font-size:16px; line-height:20px; text-decoration:none; display:flex; align-items:center; gap:6px; text-align:center;\">' +\n 'Exportar Excel' +\n '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"17 8 12 3 7 8\"><\/polyline><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"><\/line><\/svg>' +\n '<\/a>' +\n '<a href=\"javascript:void(0)\" onclick=\"clcExportPDF()\" style=\"color:#1CA5EA; font-family:\\u0027Nunito\\u0027, sans-serif; font-weight:600; font-size:16px; line-height:20px; text-decoration:none; display:flex; align-items:center; gap:6px; text-align:center;\">' +\n 'Exportar PDF' +\n '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"17 8 12 3 7 8\"><\/polyline><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"><\/line><\/svg>' +\n '<\/a>' +\n '<\/div>' +\n '<\/div>' +\n '<div id=\"clc-tab-resumen\" class=\"clc-tab-panel active\">' + clcBuildResumenTab(result) + '<\/div>' +\n '<div id=\"clc-tab-pasos\" class=\"clc-tab-panel\">' + clcBuildPasosTab(result) + '<\/div>' +\n '<div id=\"clc-tab-datos\" class=\"clc-tab-panel\">' + clcBuildDatosTab(result) + '<\/div>' +\n '<div id=\"clc-tab-normativa\" class=\"clc-tab-panel\">' + clcBuildNormativaTab() + '<\/div>' +\n '<div class=\"section-separator\" style=\"margin: 107px 0 16px;\"><\/div>' +\n '<div style=\"display:flex; justify-content:flex-end; padding-bottom:20px;\">' +\n '<a href=\"javascript:void(0)\" onclick=\"clcBackToCalculator()\" style=\"display:inline-flex; align-items:center; gap:6px; color:#1CA5EA; font-family:\\u0027Nunito\\u0027, sans-serif; font-weight:600; font-size:14px; text-decoration:none;\">' +\n 'Cerrar' +\n '<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"color:#1CA5EA;\"><circle cx=\"12\" cy=\"12\" r=\"10\"><\/circle><line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\"><\/line><line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\"><\/line><\/svg>' +\n '<\/a>' +\n '<\/div>' +\n '<\/div>' +\n '<\/div>';\n }\n\n window.clcBackToCalculator = function() {\n var panel = document.getElementById('clc-result-panel');\n var mainView = document.getElementById('clc-main-view');\n if (panel) panel.style.display = 'none';\n if (mainView) mainView.style.display = 'block';\n };\n\n function clcSwitchTab(tabId, btn) {\n activeTab = tabId;\n var panels = document.querySelectorAll('.clc-tab-panel');\n panels.forEach(function(p) { p.classList.remove('active'); });\n var btns = document.querySelectorAll('.clc-tab-btn');\n btns.forEach(function(b) { b.classList.remove('active'); });\n var panel = document.getElementById(tabId);\n if (panel) panel.classList.add('active');\n if (btn) btn.classList.add('active');\n }\n\n function clcBuildResumenTab(result) {\n var HIGHLIGHT = ['Base de Liquidaci\u00f3n', 'Prima Legal', 'Valor Diario'];\n var GREEN = ['Prima Legal'];\n var html = '<div class=\"desglose-grid\">';\n Object.keys(result.desglose).forEach(function(key) {\n var val = result.desglose[key];\n var isHL = HIGHLIGHT.indexOf(key) >= 0;\n var isGreen = GREEN.indexOf(key) >= 0;\n var isFormula = (key.toLowerCase().indexOf('formula') >= 0 || key.indexOf('F\\u00f3rmula') >= 0);\n var cls = 'desglose-item' + (isGreen ? ' green' : isHL ? ' highlight' : '') + (isFormula ? ' formula-card' : '');\n var valStr = typeof val === 'number' ? fmt(val) : val;\n html += '<div class=\"' + cls + '\"><span class=\"desglose-key\">' + key + '<\/span><span class=\"desglose-value\">' + valStr + '<\/span><\/div>';\n });\n html += '<\/div>';\n return html;\n }\n\n function clcBuildPasosTab(result) {\n var html = '<div class=\"pasos-list\">';\n (result.pasos || []).forEach(function(paso) {\n var resStr = typeof paso.resultado === 'number' ? fmt(paso.resultado) : String(paso.resultado);\n html += '<div class=\"paso-item\">' +\n '<div class=\"paso-num\">' + paso.n + '<\/div>' +\n '<div style=\"flex:1\">' +\n '<div class=\"paso-desc\">' + paso.desc + '<\/div>' +\n '<div class=\"paso-op\">' + paso.op + '<\/div>' +\n '<\/div>' +\n '<div class=\"paso-resultado\">' + resStr + '<\/div>' +\n '<\/div>';\n });\n html += '<\/div>';\n return html;\n }\n\n function clcBuildDatosTab(result) {\n var html = '<div class=\"desglose-grid\">';\n Object.keys(result.datosUsados).forEach(function(key) {\n var val = result.datosUsados[key];\n var valStr = typeof val === 'number' ? fmt(val) : String(val);\n html += '<div class=\"desglose-item highlight\"><span class=\"desglose-key\">' + key + '<\/span><span class=\"desglose-value\">' + valStr + '<\/span><\/div>';\n });\n html += '<\/div>';\n return html;\n }\n\n function clcBuildNormativaTab() {\n var html = '<div class=\"normativa-list\">';\n NORMATIVA.forEach(function(n) {\n html += '<div class=\"normativa-item\"><div class=\"normativa-norma\">' + n.norma + '<\/div><div class=\"normativa-desc\">' + n.desc + '<\/div><\/div>';\n });\n html += '<\/div>';\n return html;\n }\n\n \/\/ \u2500\u2500\u2500 COPIAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcHandleCopy() {\n if (!state.resultado) return;\n var lines = ['===== PRIMA LEGAL DE SERVICIOS =====', 'Resultado: ' + fmt(state.resultado.resultado), '', 'Desglose:'];\n Object.keys(state.resultado.desglose).forEach(function(k) {\n var v = state.resultado.desglose[k];\n lines.push(' ' + k + ': ' + (typeof v === 'number' ? fmt(v) : v));\n });\n lines.push('');\n lines.push('Calculadora Laboral Colombia | Art. 306 CST');\n navigator.clipboard.writeText(lines.join('\\n')).then(function() {\n clcShowToast('Resultado copiado al portapapeles.');\n });\n }\n\n \/\/ \u2500\u2500\u2500 LIMPIAR \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcHandleLimpiar() {\n var salEl = document.getElementById('clc-inp-salario');\n var diasEl = document.getElementById('clc-inp-dias');\n var otrosEl = document.getElementById('clc-inp-otros');\n var inpAuxilio = document.getElementById('clc-inp-auxilio');\n if (salEl) salEl.value = '';\n if (diasEl) diasEl.value = '';\n if (otrosEl) otrosEl.value = '';\n state.salario = ''; state.dias = ''; state.auxilio = ''; state.otrosConceptos = '';\n state.resultado = null; state.pendingCalculo = null;\n if (inpAuxilio) {\n inpAuxilio.value = '';\n }\n var resultPanel = document.getElementById('clc-result-panel');\n var chipsRow = document.getElementById('clc-chips-row');\n var alertAux = document.getElementById('clc-alert-auxilio');\n if (resultPanel) resultPanel.style.display = 'none';\n if (chipsRow) chipsRow.style.display = 'none';\n if (alertAux) alertAux.style.display = 'none';\n clcHideFieldError('clc-err-salario');\n clcHideFieldError('clc-err-dias');\n var refSem = document.getElementById('clc-ref-semestre');\n var refAnu = document.getElementById('clc-ref-anual');\n var refDia = document.getElementById('clc-ref-diario');\n if (refSem) refSem.textContent = '$ 0.000.000';\n if (refAnu) refAnu.textContent = '$ 0.000.000';\n if (refDia) refDia.textContent = '$ 0.000.000';\n }\n\n \/\/ \u2500\u2500\u2500 HISTORIAL \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcOpenHistorial() {\n clcRenderHistorial();\n var modal = document.getElementById('clc-modal-historial');\n if (modal) modal.style.display = 'flex';\n }\n\n function clcCloseHistorial() {\n var modal = document.getElementById('clc-modal-historial');\n if (modal) modal.style.display = 'none';\n }\n\n function clcRenderHistorial() {\n var raw = localStorage.getItem('prima_historial');\n var historial = raw ? JSON.parse(raw) : [];\n var body = document.getElementById('clc-historial-body');\n var footer = document.getElementById('clc-historial-footer');\n if (!body || !footer) return;\n\n var subHeaderHtml = '<div style=\"display:flex; justify-content:space-between; align-items:center; padding:0 0 16px; width:100%;\">' +\n '<span style=\"font-family:\\'Nunito\\', sans-serif; font-weight:600; font-size:16px; color:#262626;\">' + historial.length + ' Registro' + (historial.length !== 1 ? 's' : '') + ' Guardado' + (historial.length !== 1 ? 's' : '') + '<\/span>' +\n '<div style=\"display:flex; gap:24px; align-items:center;\">' +\n (historial.length > 0\n ? '<a href=\"javascript:void(0)\" onclick=\"clcExportHistorialCSV()\" style=\"color:#1CA5EA; font-family:\\'Nunito\\', sans-serif; font-weight:600; font-size:16px; text-decoration:none; display:flex; align-items:center; gap:6px;\">' +\n 'Exportar CSV' +\n '<img decoding=\"async\" src=\"upload.svg\" width=\"20\" height=\"20\" alt=\"Exportar\" style=\"width:20px; height:20px;\">' +\n '<\/a>'\n : '') +\n (historial.length > 0\n ? '<a href=\"javascript:void(0)\" onclick=\"clcAskClear()\" style=\"color:#1CA5EA; font-family:\\'Nunito\\', sans-serif; font-weight:600; font-size:16px; text-decoration:none; display:flex; align-items:center; gap:6px;\">' +\n 'Limpiar Historial' +\n '<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-eraser\"><path d=\"M20 20H7L3 16C2.5 15.5 2.5 14.5 3 14L13 4L20 11L11 20M17 14L10 7\"><\/path><\/svg>' +\n '<\/a>'\n : '') +\n '<\/div>' +\n '<\/div>' +\n '<div style=\"height:0px; border-top:2px solid #CBCBCB; margin-bottom:16px; width:100%;\"><\/div>';\n\n var listHtml = '';\n if (historial.length === 0) {\n listHtml = '<div class=\"historial-empty\" style=\"margin-top: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; width: 100%;\">' +\n '<div style=\"font-family:\\'Nunito\\', sans-serif; font-weight:600; font-size:20px; line-height:30px; color:#969696;\">No hay c\u00e1lculos guardados a\u00fan.<\/div>' +\n '<div style=\"font-family:\\'Nunito\\', sans-serif; font-weight:400; font-size:18px; line-height:26px; color:#B0B0B0;\">Realiza un nuevo c\u00e1lculo para verlo aqu\u00ed.<\/div>' +\n '<\/div>';\n } else {\n listHtml = '<div class=\"historial-list\" style=\"width:100%;\">';\n var reversed = historial.slice().reverse();\n reversed.forEach(function(r) {\n listHtml += '<div class=\"historial-item\">' +\n '<div style=\"flex:1; padding-right:16px; text-align:left;\">' +\n '<div class=\"historial-nombre\">' + r.nombre + '<\/div>' +\n '<div class=\"historial-correo\">' + r.correo + (r.telefono ? ' • ' + r.telefono : '') + '<\/div>' +\n '<div class=\"historial-meta\">A\u00f1o ' + r.ano + ' - Salario: ' + fmt(r.salario) + ' - ' + r.dias + ' d\u00edas - ' + r.fecha.replace(\/\\\/\/g, '\/') + '<\/div>' +\n '<\/div>' +\n '<div class=\"historial-prima\">' + fmt(r.prima) + '<\/div>' +\n '<\/div>';\n });\n listHtml += '<\/div>';\n }\n\n body.innerHTML = subHeaderHtml + listHtml;\n\n var paBtn = historial.length > 0\n ? '<button class=\"clc-btn clc-btn-primary\" id=\"clc-btn-pa\" onclick=\"clcSendToPowerAutomate()\" style=\"width:auto; padding-left:24px; padding-right:24px;\">Enviar a Power Automate<\/button>'\n : '';\n footer.innerHTML = '<a href=\"javascript:void(0)\" onclick=\"clcCloseHistorial()\" style=\"color:#1CA5EA; font-family:\\'Nunito\\', sans-serif; font-weight:600; font-size:16px; text-decoration:none; margin-right:24px; display:inline-flex; align-items:center;\">Cerrar<\/a>' + paBtn;\n }\n\n function clcAskClear() {\n var modal = document.getElementById('clc-modal-confirm-clear');\n if (modal) modal.style.display = 'flex';\n }\n\n function clcConfirmClear() {\n localStorage.removeItem('prima_historial');\n var modal = document.getElementById('clc-modal-confirm-clear');\n if (modal) modal.style.display = 'none';\n clcCloseHistorial();\n clcShowToast('Historial eliminado.');\n }\n\n function clcExportHistorialCSV() {\n var raw = localStorage.getItem('prima_historial');\n var historial = raw ? JSON.parse(raw) : [];\n if (historial.length === 0) return;\n var rows = [['Fecha', 'Nombre', 'Correo', 'Tel\u00e9fono', 'A\u00f1o', 'Salario', 'D\u00edas', 'Auxilio', 'Otros', 'Prima']];\n historial.forEach(function(r) {\n rows.push([r.fecha, r.nombre, r.correo, r.telefono || '', r.ano, r.salario, r.dias, r.auxilio, r.otrosConceptos, r.prima]);\n });\n var csv = rows.map(function(r) { return r.map(function(c) { return '\"' + String(c).replace(\/\"\/g, '\"\"') + '\"'; }).join(','); }).join('\\n');\n var blob = new Blob(['\\uFEFF' + csv], { type: 'text\/csv;charset=utf-8;' });\n var url = URL.createObjectURL(blob);\n var a = document.createElement('a');\n a.href = url; a.download = 'Historial_Prima_' + new Date().toISOString().slice(0, 10) + '.csv';\n a.click(); URL.revokeObjectURL(url);\n }\n\n \/\/ \u2500\u2500\u2500 POWER AUTOMATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n var PA_URL = 'https:\/\/defaulte86d49ef5a5d42949ea1e794802dbe.70.environment.api.powerplatform.com:443\/powerautomate\/automations\/direct\/workflows\/898ae9262bd447798e56015f435f4dcd\/triggers\/manual\/paths\/invoke?api-version=1&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=cuPFvAXODbVLkwXu6v6MxMee8s2aUsRYou7Aiu6UZMA';\n\n function clcSendToPowerAutomate() {\n var raw = localStorage.getItem('prima_historial');\n var historial = raw ? JSON.parse(raw) : [];\n if (historial.length === 0) return;\n\n var btn = document.getElementById('clc-btn-pa');\n if (btn) { btn.disabled = true; btn.textContent = 'Enviando...'; }\n\n var statusEl = document.getElementById('clc-pa-status');\n if (statusEl) statusEl.remove();\n\n var payload = historial.map(function(r) {\n return {\n Fecha: r.fecha,\n Nombre: r.nombre,\n Correo: r.correo,\n Telefono: r.telefono || '',\n Prima: String(r.prima),\n Ano: String(r.ano),\n Salario: String(r.salario),\n Dias: String(r.dias)\n };\n });\n\n fetch(PA_URL, {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify(payload)\n })\n .then(function(res) {\n if (btn) { btn.disabled = false; btn.textContent = 'Enviar a Power Automate'; }\n var bodyEl = document.getElementById('clc-historial-body');\n var div = document.createElement('div');\n div.id = 'clc-pa-status';\n if (res.ok) {\n div.className = 'pa-status pa-status-ok';\n div.textContent = 'Historial enviado a Power Automate correctamente.';\n } else {\n div.className = 'pa-status pa-status-error';\n div.innerHTML = '<strong>Error al enviar:<\/strong> HTTP ' + res.status;\n }\n if (bodyEl) bodyEl.insertBefore(div, bodyEl.firstChild);\n })\n .catch(function(err) {\n if (btn) { btn.disabled = false; btn.textContent = 'Enviar a Power Automate'; }\n var bodyEl = document.getElementById('clc-historial-body');\n var div = document.createElement('div');\n div.id = 'clc-pa-status';\n div.className = 'pa-status pa-status-error';\n div.innerHTML = '<strong>Error al enviar:<\/strong> ' + (err && err.message ? err.message : String(err));\n if (bodyEl) bodyEl.insertBefore(div, bodyEl.firstChild);\n });\n }\n\n \/\/ \u2500\u2500\u2500 EXPORTAR CSV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcExportCSV() {\n if (!state.resultado) return;\n var result = state.resultado;\n var rows = [\n ['Calculadora Prima Legal de Servicios'],\n ['Fecha', new Date().toLocaleDateString('es-CO', { year: 'numeric', month: 'long', day: 'numeric' })],\n ['Normativa', 'Art. 306 CST - Colombia'],\n [],\n ['Concepto', 'Valor']\n ];\n rows.push(['PRIMA LEGAL DE SERVICIOS', result.resultado]);\n Object.keys(result.desglose).forEach(function(k) { rows.push([k, result.desglose[k]]); });\n var csv = rows.map(function(r) { return r.map(function(c) { return '\"' + String(c).replace(\/\"\/g, '\"\"') + '\"'; }).join(','); }).join('\\n');\n var blob = new Blob(['\\uFEFF' + csv], { type: 'text\/csv;charset=utf-8;' });\n var url = URL.createObjectURL(blob);\n var a = document.createElement('a'); a.href = url; a.download = 'Prima_Legal_' + new Date().toISOString().slice(0, 10) + '.csv';\n a.click(); URL.revokeObjectURL(url);\n }\n\n \/\/ \u2500\u2500\u2500 EXPORTAR PDF \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcExportPDF() {\n if (!state.resultado) return;\n var result = state.resultado;\n var HIGHLIGHT = ['Base de liquidaci\\u00f3n', 'PRIMA LEGAL', 'Valor diario'];\n var GREEN = ['PRIMA LEGAL'];\n var rows = Object.keys(result.desglose).map(function(k) {\n var v = result.desglose[k];\n var isGreen = GREEN.indexOf(k) >= 0;\n var isHL = HIGHLIGHT.indexOf(k) >= 0;\n var bg = isGreen ? '#E6FFFA' : isHL ? '#EBF8FF' : '#fff';\n var fw = isHL ? '700' : '400';\n var color = isGreen ? '#00875A' : isHL ? '#001C7F' : '#2D3748';\n var valStr = typeof v === 'number' ? fmt(v) : v;\n return '<tr style=\"background:' + bg + '\"><td style=\"padding:8px 14px;border-bottom:1px solid #E2E8F0;font-weight:' + fw + ';color:' + color + '\">' + k + '<\/td><td style=\"padding:8px 14px;border-bottom:1px solid #E2E8F0;text-align:right;font-family:monospace;font-weight:' + fw + ';color:' + color + '\">' + valStr + '<\/td><\/tr>';\n }).join('');\n var pasosRows = (result.pasos || []).map(function(paso) {\n var resStr = typeof paso.resultado === 'number' ? fmt(paso.resultado) : String(paso.resultado);\n return '<tr><td style=\"padding:6px 10px;border-bottom:1px solid #E2E8F0;color:#718096;font-size:12px\">' + paso.n + '<\/td><td style=\"padding:6px 10px;border-bottom:1px solid #E2E8F0\">' + paso.desc + '<\/td><td style=\"padding:6px 10px;border-bottom:1px solid #E2E8F0;font-family:monospace;font-size:12px;color:#F05A28\">' + paso.op + '<\/td><td style=\"padding:6px 10px;border-bottom:1px solid #E2E8F0;text-align:right;font-family:monospace;font-size:12px\">' + resStr + '<\/td><\/tr>';\n }).join('');\n var normRows = NORMATIVA.map(function(n) {\n return '<tr><td style=\"padding:6px 10px;border-bottom:1px solid #E2E8F0;font-weight:600;color:#001C7F\">' + n.norma + '<\/td><td style=\"padding:6px 10px;border-bottom:1px solid #E2E8F0\">' + n.desc + '<\/td><\/tr>';\n }).join('');\n var html = '<!DOCTYPE html><html lang=\"es\"><head><meta charset=\"UTF-8\"><title>Prima Legal - Calculadora Laboral Colombia<\/title><style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,\"Segoe UI\",Arial,sans-serif;padding:32px;color:#2D3748;background:#fff}.header{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:3px solid #001C7F}.title{font-size:20px;font-weight:800;color:#001C7F}.subtitle{font-size:12px;color:#718096;margin-top:3px}.result-box{background:linear-gradient(135deg,#001C7F,#001356);border-radius:12px;padding:20px 26px;margin-bottom:24px;color:#fff}.result-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;opacity:.75;margin-bottom:6px}.result-amount{font-size:36px;font-weight:900;letter-spacing:-1px}.section-title{font-size:11px;font-weight:700;color:#001C7F;text-transform:uppercase;letter-spacing:.7px;margin:20px 0 8px;padding-bottom:4px;border-bottom:2px solid #EBF8FF}table{width:100%;border-collapse:collapse;font-size:13px;border-radius:8px;overflow:hidden;border:1px solid #E2E8F0;margin-bottom:16px}thead th{background:linear-gradient(135deg,#001C7F,#001356);color:#fff;padding:10px 14px;text-align:left;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}thead th:last-child{text-align:right}.footer{margin-top:28px;font-size:10.5px;color:#A0AEC0;border-top:1px solid #E2E8F0;padding-top:14px;line-height:1.6}@media print{body{padding:16px}.result-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}}<\/style><\/head><body><div class=\"header\"><div><div class=\"title\">Prima Legal de Servicios<\/div><div class=\"subtitle\">Calculadora Laboral Colombia — Art. 306 CST — ' + new Date().toLocaleDateString('es-CO', { year: 'numeric', month: 'long', day: 'numeric' }) + '<\/div><\/div><\/div><div class=\"result-box\"><div class=\"result-label\">Prima estimada<\/div><div class=\"result-amount\">' + fmt(result.resultado) + '<\/div><\/div><div class=\"section-title\">Desglose del c\\u00e1lculo<\/div><table><thead><tr><th>Concepto<\/th><th style=\"text-align:right\">Valor<\/th><\/tr><\/thead><tbody>' + rows + '<\/tbody><\/table>' + (pasosRows ? '<div class=\"section-title\">Paso a paso<\/div><table><thead><tr><th>#<\/th><th>Descripci\\u00f3n<\/th><th>Operaci\\u00f3n<\/th><th style=\"text-align:right\">Resultado<\/th><\/tr><\/thead><tbody>' + pasosRows + '<\/tbody><\/table>' : '') + '<div class=\"section-title\">Normativa applied<\/div><table><thead><tr><th>Norma<\/th><th>Descripci\\u00f3n<\/th><\/tr><\/thead><tbody>' + normRows + '<\/tbody><\/table><div class=\"footer\">Simulador informativo. No reemplaza asesor\\u00eda profesional.<br>Normativa: CST Art. 306 y 307.<\/div><\/body><\/html>';\n var win = window.open('', '_blank');\n if (win) { win.document.write(html); win.document.close(); win.focus(); setTimeout(function() { win.print(); }, 400); }\n }\n\n \/\/ \u2500\u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n function clcShowFieldError(id, msg) {\n var el = document.getElementById(id);\n if (el) { el.textContent = msg; el.style.display = 'block'; }\n var inputId = id.replace('clc-err-', 'clc-inp-');\n var inp = document.getElementById(inputId);\n if (inp) {\n inp.classList.add('error');\n var parentCard = inp.closest('.custom-input-card');\n if (parentCard) parentCard.style.borderColor = '#E53E3E';\n }\n }\n\n function clcHideFieldError(id) {\n var el = document.getElementById(id);\n if (el) { el.textContent = ''; el.style.display = 'none'; }\n var inputId = id.replace('clc-err-', 'clc-inp-');\n var inp = document.getElementById(inputId);\n if (inp) {\n inp.classList.remove('error');\n var parentCard = inp.closest('.custom-input-card');\n if (parentCard) parentCard.style.borderColor = '';\n }\n }\n\n function clcShowToast(msg) {\n var t = document.getElementById('clc-toast');\n if (!t) return;\n t.textContent = msg; t.style.display = 'block';\n setTimeout(function() { t.style.display = 'none'; }, 2800);\n }\n\n \/\/ \u2500\u2500\u2500 CERRAR MODALES CON ESC \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') {\n var confirmClearModal = document.getElementById('clc-modal-confirm-clear');\n var historialModal = document.getElementById('clc-modal-historial');\n var capturaModal = document.getElementById('clc-modal-captura');\n if (confirmClearModal && confirmClearModal.style.display !== 'none') {\n confirmClearModal.style.display = 'none';\n } else if (historialModal && historialModal.style.display !== 'none') {\n clcCloseHistorial();\n } else if (capturaModal && capturaModal.style.display !== 'none') {\n clcCloseCaptura();\n }\n }\n });\n\n \/\/ \u2500\u2500\u2500 EXPOSE GLOBAL FUNCTIONS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n window.clcOnFormChange = clcOnFormChange;\n window.clcHandleCalcular = clcHandleCalcular;\n window.clcHandleLimpiar = clcHandleLimpiar;\n window.clcOpenHistorial = clcOpenHistorial;\n window.clcCloseHistorial = clcCloseHistorial;\n window.clcCloseCaptura = clcCloseCaptura;\n window.clcConfirmCaptura = clcConfirmCaptura;\n window.clcGuardarYMostrar = clcGuardarYMostrar;\n window.clcAskClear = clcAskClear;\n window.clcConfirmClear = clcConfirmClear;\n window.clcExportHistorialCSV = clcExportHistorialCSV;\n window.clcSendToPowerAutomate = clcSendToPowerAutomate;\n window.clcExportCSV = clcExportCSV;\n window.clcExportPDF = clcExportPDF;\n window.clcHandleCopy = clcHandleCopy;\n window.clcSwitchTab = clcSwitchTab;\n\n \/\/ \u2500\u2500\u2500 ARRANQUE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n if (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', init);\n } else {\n init();\n }\n\n})();\n <\/script>\n<\/zd-html-block>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6e0e2cb e-flex e-con-boxed e-con e-parent\" data-id=\"6e0e2cb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12e0343 elementor-widget elementor-widget-spacer\" data-id=\"12e0343\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Recursos – Calculadora de prima Calculadora de prima de servicios en Colombia Calcular tu prima no deber\u00eda quitarte tiempo ni generarte dudas. Ingresa tu salario […]<\/p>\n","protected":false},"author":4,"featured_media":12559,"parent":45926,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-elementor.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-42500","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/pages\/42500","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/comments?post=42500"}],"version-history":[{"count":22,"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/pages\/42500\/revisions"}],"predecessor-version":[{"id":43277,"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/pages\/42500\/revisions\/43277"}],"up":[{"embeddable":true,"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/pages\/45926"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/media\/12559"}],"wp:attachment":[{"href":"https:\/\/softland.com\/co\/wp-json\/wp\/v2\/media?parent=42500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}