Cálculo de Liquidación Profesional

Calcular Ahora Ver Guía Completa

Nuestros Servicios

Soluciones completas para cálculos laborales

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple & Scientific Calculator</title>
    <style>
      :root {
        --accent-soft: rgba(79, 70, 229, 0.15);
        --text: #e5e7eb;
        --border: rgba(148, 163, 184, 0.3);
        --button-bg: #111827;
        --button-hover: #1f2937;
        --calc-width: 320px;
        --gap: 4px;
        --btn-h: 36px;
        --btn-h-func: 30px;
        --pad: 14px;
        --sci-cols: 6;
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background: radial-gradient(circle at top, #1e293b 0, #020617 55%);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        color: var(--text);
      }

      .calculator-wrapper {
        width: var(--calc-width);
        margin: 0 auto;
      }

      .calculator {
        width: 100%;
        padding: var(--pad);
        background: radial-gradient(circle at top left, #1e293b 0, #020617 55%);
        border-radius: 16px;
        border: 1px solid rgba(148, 163, 184, 0.4);
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.9);
      }

      .calculator-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
      }

      .header-actions {
        display: flex;
        gap: 6px;
      }

      .calculator h1 {
        margin: 0;
        font-size: 1.1rem;
      }

      .display {
        width: 100%;
        padding: 8px 10px;
        margin-bottom: 8px;
        font-size: 1.05rem;
        text-align: right;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #020617;
        color: var(--text);
        outline: none;
      }

      .keys-panel {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
      }

      .keys {
        display: grid;
        gap: var(--gap);
        width: 100%;
      }

      .keys.scientific {
        grid-template-columns: repeat(var(--sci-cols), 1fr);
      }

      .keys.main {
        grid-template-columns: repeat(4, 1fr);
      }

      .sci-extra {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.25s ease, opacity 0.2s ease;
      }

      .calculator.sci-open .sci-extra {
        max-height: 500px;
        opacity: 1;
      }

      .calculator.sci-open .btn-sci-toggle {
        background: radial-gradient(circle at top, rgba(79, 70, 229, 0.35), #020617 65%);
        color: #c7d2fe;
      }

      button {
        border: none;
        border-radius: 8px;
        height: var(--btn-h);
        min-height: var(--btn-h);
        padding: 0;
        font-size: 0.85rem;
        color: var(--text);
        background: var(--button-bg);
        cursor: pointer;
        transition: background 0.12s ease, transform 0.08s ease;
        border: 1px solid transparent;
      }

      button:active {
        transform: scale(0.98);
      }

      button:hover {
        background: var(--button-hover);
      }

      .btn-func {
        height: var(--btn-h-func);
        min-height: var(--btn-h-func);
        font-size: 0.72rem;
        color: #c4b5fd;
        background: radial-gradient(circle at top, var(--accent-soft), #020617 60%);
        border-color: rgba(129, 140, 248, 0.4);
      }

      .btn-operator {
        color: #a5b4fc;
        background: radial-gradient(circle at top, rgba(79, 70, 229, 0.2), #020617 65%);
      }

      .btn-clear {
        color: #fecaca;
        background: radial-gradient(circle at top, rgba(239, 68, 68, 0.26), #020617 65%);
      }

      .btn-delete {
        color: #fed7aa;
        background: radial-gradient(circle at top, rgba(249, 115, 22, 0.24), #020617 65%);
      }

      .btn-equal {
        font-size: 0.9rem;
        font-weight: 600;
        background: linear-gradient(135deg, #4f46e5, #6366f1);
        box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
      }

      .btn-mode,
      .btn-sci-toggle {
        width: auto;
        height: 28px;
        min-height: 28px;
        padding: 0 10px;
        font-size: 0.7rem;
        border-radius: 999px;
        background: radial-gradient(circle at top, rgba(52, 211, 153, 0.18), #020617 65%);
        color: #bbf7d0;
        border-color: rgba(74, 222, 128, 0.55);
      }

      .btn-mode[data-mode="RAD"] {
        background: radial-gradient(circle at top, rgba(59, 130, 246, 0.18), #020617 65%);
        color: #bfdbfe;
      }

      @media (min-width: 769px) {
        .sci-extra {
          max-height: none;
          opacity: 1;
        }

        .btn-sci-toggle {
          display: none;
        }

        :root {
          --sci-cols: 8;
        }
      }

      @media (max-width: 768px) {
        :root {
          --calc-width: 300px;
          --btn-h: 34px;
          --btn-h-func: 28px;
          --pad: 12px;
        }
      }

      @media (max-width: 480px) {
        :root {
          --calc-width: 280px;
          --gap: 3px;
          --btn-h: 32px;
          --btn-h-func: 26px;
          --pad: 10px;
          --sci-cols: 6;
        }
      }
    </style>
  </head>
  <body>
    <div class="calculator-wrapper">
      <div class="calculator">
        <div class="calculator-header">
          <h1>Calculator</h1>
          <div class="header-actions">
            <button
              type="button"
              class="btn-mode btn-sci-toggle"
              id="sci-toggle"
              data-action="toggle-sci"
              aria-expanded="false"
            >
              SCI
            </button>
            <button
              type="button"
              class="btn-mode"
              id="angle-toggle"
              data-action="toggle-angle"
              data-mode="DEG"
            >
              DEG
            </button>
          </div>
        </div>

        <input
          type="text"
          id="display"
          class="display"
          placeholder="0"
          readonly
        />

        <div class="keys-panel">
          <div class="keys scientific sci-basic">
            <button type="button" data-action="func" data-value="sin(" class="btn-func">sin</button>
            <button type="button" data-action="func" data-value="cos(" class="btn-func">cos</button>
            <button type="button" data-action="func" data-value="tan(" class="btn-func">tan</button>
            <button type="button" data-action="func" data-value="log(" class="btn-func">log</button>
            <button type="button" data-action="func" data-value="ln(" class="btn-func">ln</button>
            <button type="button" data-action="func" data-value="sqrt(" class="btn-func">√</button>
            <button type="button" data-action="func" data-value="^2" class="btn-func">x²</button>
            <button type="button" data-action="func" data-value="^" class="btn-func">xʸ</button>
            <button type="button" data-action="constant" data-value="π" class="btn-func">π</button>
            <button type="button" data-action="constant" data-value="e" class="btn-func">e</button>
            <button type="button" data-action="func" data-value="inv(" class="btn-func">1/x</button>
            <button type="button" data-action="negate" class="btn-func">±</button>
          </div>

          <div class="keys scientific sci-extra" id="sci-extra">
            <button type="button" data-action="func" data-value="asin(" class="btn-func">sin⁻¹</button>
            <button type="button" data-action="func" data-value="acos(" class="btn-func">cos⁻¹</button>
            <button type="button" data-action="func" data-value="atan(" class="btn-func">tan⁻¹</button>
            <button type="button" data-action="func" data-value="abs(" class="btn-func">|x|</button>
            <button type="button" data-action="func" data-value="fact(" class="btn-func">n!</button>
            <button type="button" data-action="func" data-value="^3" class="btn-func">x³</button>
            <button type="button" data-action="func" data-value="cbrt(" class="btn-func">∛x</button>
            <button type="button" data-action="func" data-value="pow10(" class="btn-func">10ˣ</button>
            <button type="button" data-action="func" data-value="exp(" class="btn-func">eˣ</button>
            <button type="button" data-action="memory" data-value="MC" class="btn-func">MC</button>
            <button type="button" data-action="memory" data-value="MR" class="btn-func">MR</button>
            <button type="button" data-action="memory" data-value="M+" class="btn-func">M+</button>
            <button type="button" data-action="memory" data-value="M-" class="btn-func">M-</button>
            <button type="button" data-action="func" data-value="sinh(" class="btn-func">sinh</button>
            <button type="button" data-action="func" data-value="cosh(" class="btn-func">cosh</button>
            <button type="button" data-action="func" data-value="tanh(" class="btn-func">tanh</button>
            <button type="button" data-action="func" data-value="asinh(" class="btn-func">sinh⁻¹</button>
            <button type="button" data-action="func" data-value="acosh(" class="btn-func">cosh⁻¹</button>
            <button type="button" data-action="func" data-value="atanh(" class="btn-func">tanh⁻¹</button>
            <button type="button" data-action="func" data-value="floor(" class="btn-func">⌊x⌋</button>
            <button type="button" data-action="func" data-value="ceil(" class="btn-func">⌈x⌉</button>
            <button type="button" data-action="func" data-value="round(" class="btn-func">rnd</button>
          </div>

          <div class="keys main">
            <button type="button" class="btn-clear" data-action="clear">C</button>
            <button type="button" class="btn-delete" data-action="delete" title="Backspace">⌫</button>
            <button type="button" class="btn-operator" data-action="operator" data-value="%">%</button>
            <button type="button" class="btn-operator" data-action="operator" data-value="/">÷</button>

            <button type="button" data-action="number" data-value="7">7</button>
            <button type="button" data-action="number" data-value="8">8</button>
            <button type="button" data-action="number" data-value="9">9</button>
            <button type="button" class="btn-operator" data-action="operator" data-value="×">×</button>

            <button type="button" data-action="number" data-value="4">4</button>
            <button type="button" data-action="number" data-value="5">5</button>
            <button type="button" data-action="number" data-value="6">6</button>
            <button type="button" class="btn-operator" data-action="operator" data-value="-">−</button>

            <button type="button" data-action="number" data-value="1">1</button>
            <button type="button" data-action="number" data-value="2">2</button>
            <button type="button" data-action="number" data-value="3">3</button>
            <button type="button" class="btn-operator" data-action="operator" data-value="+">+</button>

            <button type="button" data-action="number" data-value="0">0</button>
            <button type="button" data-action="decimal" data-value=".">.</button>
            <button type="button" data-action="paren" data-value="(">(</button>
            <button type="button" data-action="paren" data-value=")">)</button>

            <button type="button" class="btn-equal" data-action="equals">=</button>
          </div>
        </div>
      </div>
    </div>

    <script>
      const display = document.getElementById("display");
      const angleToggleBtn = document.getElementById("angle-toggle");
      const sciToggleBtn = document.getElementById("sci-toggle");
      const calculatorEl = document.querySelector(".calculator");

      const PI = Math.PI;
      const E = Math.E;

      let angleMode = "DEG";
      let memory = 0;

      function toRadians(value) {
        return (value * Math.PI) / 180;
      }

      function toDegrees(value) {
        return (value * 180) / Math.PI;
      }

      function maybeToRadians(x) {
        return angleMode === "DEG" ? toRadians(x) : x;
      }

      function maybeToDegrees(x) {
        return angleMode === "DEG" ? toDegrees(x) : x;
      }

      function sin(x) {
        return Math.sin(maybeToRadians(x));
      }

      function cos(x) {
        return Math.cos(maybeToRadians(x));
      }

      function tan(x) {
        return Math.tan(maybeToRadians(x));
      }

      function asin(x) {
        return maybeToDegrees(Math.asin(x));
      }

      function acos(x) {
        return maybeToDegrees(Math.acos(x));
      }

      function atan(x) {
        return maybeToDegrees(Math.atan(x));
      }

      function log(x) {
        return Math.log10(x);
      }

      function ln(x) {
        return Math.log(x);
      }

      function sqrt(x) {
        return Math.sqrt(x);
      }

      function abs(x) {
        return Math.abs(x);
      }

      function fact(n) {
        if (n < 0 || !Number.isFinite(n)) return NaN;
        if (!Number.isInteger(n)) return NaN;
        let result = 1;
        for (let i = 2; i <= n; i += 1) {
          result *= i;
        }
        return result;
      }

      function inv(x) {
        return 1 / x;
      }

      function cbrt(x) {
        return Math.cbrt(x);
      }

      function pow10(x) {
        return Math.pow(10, x);
      }

      function exp(x) {
        return Math.exp(x);
      }

      function sinh(x) {
        return Math.sinh(x);
      }

      function cosh(x) {
        return Math.cosh(x);
      }

      function tanh(x) {
        return Math.tanh(x);
      }

      function asinh(x) {
        return Math.asinh(x);
      }

      function acosh(x) {
        return Math.acosh(x);
      }

      function atanh(x) {
        return Math.atanh(x);
      }

      function floor(x) {
        return Math.floor(x);
      }

      function ceil(x) {
        return Math.ceil(x);
      }

      function round(x) {
        return Math.round(x);
      }

      function evaluateToNumber(rawExpression) {
        if (!rawExpression || rawExpression === "Error") return NaN;

        const [expressionPart] = rawExpression.split("=");
        let evalExpression = expressionPart;
        evalExpression = evalExpression.replace(/×/g, "*");
        evalExpression = evalExpression.replace(/π/g, "PI");
        evalExpression = evalExpression.replace(/\be\b/g, "E");
        evalExpression = evalExpression.replace(/\^/g, "**");

        try {
          const result = eval(evalExpression);
          if (typeof result === "number" && Number.isFinite(result)) {
            return result;
          }
        } catch (err) {
          // ignore
        }

        return NaN;
      }

      function appendToDisplay(value) {
        if (!display) return;
        if (display.value === "Error") {
          display.value = "";
        }
        display.value += value;
      }

      function clearDisplay() {
        if (!display) return;
        display.value = "";
      }

      function deleteLast() {
        if (!display) return;
        if (display.value === "Error") {
          display.value = "";
        } else {
          display.value = display.value.slice(0, -1);
        }
      }

      function evaluateExpression() {
        if (!display) return;

        const rawExpression = display.value;
        if (!rawExpression) return;

        if (rawExpression === "Error") {
          display.value = "";
          return;
        }

        const [expressionPart] = rawExpression.split("=");
        let evalExpression = expressionPart;
        evalExpression = evalExpression.replace(/×/g, "*");
        evalExpression = evalExpression.replace(/π/g, "PI");
        evalExpression = evalExpression.replace(/\be\b/g, "E");
        evalExpression = evalExpression.replace(/\^/g, "**");

        try {
          const result = eval(evalExpression);
          if (typeof result === "number" && Number.isFinite(result)) {
            display.value = `${expressionPart}=${result}`;
          } else {
            display.value = "Error";
          }
        } catch (err) {
          display.value = "Error";
        }
      }

      function toggleSign() {
        if (!display) return;

        let text = display.value;
        if (!text || text === "Error") return;

        const parts = text.split("=");
        let head = "";
        let target = text;

        if (parts.length > 1) {
          head = parts[0] + "=";
          target = parts[1];
        }

        const regex = /-?\d+(\.\d+)?/g;
        let match;
        let lastMatch = null;

        while ((match = regex.exec(target)) !== null) {
          lastMatch = { text: match[0], index: match.index };
        }

        if (!lastMatch) return;

        const numberText = lastMatch.text;
        const index = lastMatch.index;
        const negated = numberText[0] === "-" ? numberText.slice(1) : "-" + numberText;
        const before = target.slice(0, index);
        const after = target.slice(index + numberText.length);
        const newTarget = before + negated + after;

        display.value = head ? head + newTarget : newTarget;
      }

      function handleButtonClick(event) {
        const target = event.target;
        if (!(target instanceof HTMLButtonElement)) return;

        const action = target.dataset.action;
        const value = target.dataset.value || "";

        switch (action) {
          case "clear":
            clearDisplay();
            break;
          case "delete":
            deleteLast();
            break;
          case "equals":
            evaluateExpression();
            break;
          case "toggle-angle":
            if (!angleToggleBtn) return;
            angleMode = angleMode === "DEG" ? "RAD" : "DEG";
            angleToggleBtn.dataset.mode = angleMode;
            angleToggleBtn.textContent = angleMode;
            break;
          case "toggle-sci":
            if (!calculatorEl || !sciToggleBtn) return;
            calculatorEl.classList.toggle("sci-open");
            const isOpen = calculatorEl.classList.contains("sci-open");
            sciToggleBtn.setAttribute("aria-expanded", String(isOpen));
            sciToggleBtn.textContent = isOpen ? "SCI ▲" : "SCI";
            break;
          case "memory":
            if (value === "MC") {
              memory = 0;
            } else if (value === "MR") {
              if (!Number.isFinite(memory)) return;
              appendToDisplay(memory.toString());
            } else if (value === "M+" || value === "M-") {
              const current = evaluateToNumber(display.value);
              if (!Number.isFinite(current)) return;
              if (value === "M+") {
                memory += current;
              } else {
                memory -= current;
              }
            }
            break;
          case "negate":
            toggleSign();
            break;
          case "number":
          case "operator":
          case "decimal":
          case "paren":
          case "func":
          case "constant":
            appendToDisplay(value);
            break;
          default:
            break;
        }
      }

      document.querySelectorAll(".calculator button").forEach((button) => {
        button.addEventListener("click", handleButtonClick);
      });

      document.addEventListener("keydown", (event) => {
        if (!display) return;

        const key = event.key;

        if ((key >= "0" && key <= "9") || key === ".") {
          appendToDisplay(key);
        } else if (key === "+" || key === "-" || key === "/") {
          appendToDisplay(key);
        } else if (key === "*" || key === "x" || key === "X") {
          appendToDisplay("×");
        } else if (key === "Enter" || key === "=") {
          event.preventDefault();
          evaluateExpression();
        } else if (key === "Backspace") {
          deleteLast();
        } else if (key === "Escape") {
          clearDisplay();
        } else if (key === "(" || key === ")") {
          appendToDisplay(key);
        }
      });
    </script>
  </body>
</html>

¿Qué es el Cálculo de Liquidación?

¿Qué es el Cálculo de Liquidación?

Nuestros Servicios

Soluciones completas para cálculos laborales

Liquidación Final

Cálculo completo de liquidación por terminación de contrato laboral. Cálculo de vacaciones proporcionales y compensaciones. Cálculo de vacaciones proporcionales y compensaciones.

Vacaciones

Cálculo de vacaciones proporcionales y compensaciones. Cálculo de vacaciones proporcionales y compensaciones.

Cesantías

Cálculo de cesantías e intereses sobre cesantías. Cálculo de vacaciones proporcionales y compensaciones.

Nuestros Servicios

Soluciones completas para cálculos laborales

Concepto

Porcentaje

Base de Cálculo

Cesantías

8.33%

Salario mensual

Cesantías

8.33%

Salario mensual

Cesantías

8.33%

Salario mensual

Cesantías

8.33%

Salario mensual

Guía Completa de Liquidación

Todo lo que necesitas saber sobre liquidaciones laborales

Qué es?

Comprende qué incluye una liquidación laboral y cuándo aplica. Comprende qué incluye una liquidación laboral.

Conceptos

Conoce todos los conceptos que se incluyen en el cálculo. Conoce todos los conceptos que se incluyen en el cálculo

Fórmulas

Aprende las fórmulas exactas para cada tipo de prestación. Conoce todos los conceptos que se incluyen en el cálculo

Ejemplos

Casos prácticos y ejemplos reales de liquidaciones. Conoce todos los conceptos que se incluyen en el cálculo

Comparación con Otras Herramientas

Descubre por qué somos la mejor opción para calcular tu liquidación

Característica

CalcuLiquidación

Competidor A

Competidor B

Cálculo Preciso

Actualizado con Ley

Desglose Detallado

Gratuito

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).

By default, this panel is concealed and appears when the user clicks on the section title. Input relevant information about its title using paragraphs or bullet points. Accordions can enhance the user experience when utilized effectively. They allow users to choose what they want to read and disregard the rest. Accordions are often utilized for frequently asked questions (FAQs).