{"id":70679,"date":"2026-03-30T12:05:16","date_gmt":"2026-03-30T10:05:16","guid":{"rendered":"https:\/\/tickelia.com\/demo_2023\/?p=70679"},"modified":"2026-03-30T12:05:20","modified_gmt":"2026-03-30T10:05:20","slug":"horas-trabajadas-2","status":"publish","type":"post","link":"https:\/\/tickelia.com\/demo_2023\/blog\/actualidad\/horas-trabajadas-2\/","title":{"rendered":"Horas Trabajadas"},"content":{"rendered":"  <style>\r\n    #calc-ph *,\r\n    #calc-ph *::before,\r\n    #calc-ph *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    #calc-ph {\r\n     \r\n      --c-white:     #ffffff;\r\n      --c-border:    #d6e2e2;\r\n      --c-teal:      #3bbfaa;\r\n      --c-teal-dark: #2da898;\r\n      --c-text:      #4a5c60;\r\n      --c-muted:     #8fa8a8;\r\n      --c-row-alt:   #eef5f5;\r\n      --c-highlight: #dff0ed;\r\n      --radius:      6px;\r\n      --shadow:      0 2px 8px rgba(0,0,0,.08);\r\n\r\n    \r\n    \r\n     \r\n      padding: 48px 20px;\r\n      min-height: 100vh;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: flex-start;\r\n    }\r\n\r\n    #calc-ph .cph-wrap {\r\n      width: 100%;\r\n      max-width: 620px;\r\n    }\r\n\r\n    #calc-ph .cph-title {\r\n      text-align: center;\r\n      font-size: 22px;\r\n      font-weight: 300;\r\n      letter-spacing: .5px;\r\n      color: var(--c-text);\r\n      margin-bottom: 32px;\r\n    }\r\n\r\n    #calc-ph .cph-field {\r\n      display: flex;\r\n      align-items: stretch;\r\n      background: var(--c-white);\r\n      border: 1px solid var(--c-border);\r\n      border-radius: var(--radius);\r\n      overflow: hidden;\r\n      margin-bottom: 12px;\r\n      transition: border-color .2s, box-shadow .2s;\r\n    }\r\n\r\n    #calc-ph .cph-field:focus-within {\r\n      border-color: var(--c-teal);\r\n      box-shadow: 0 0 0 3px rgba(59,191,170,.12);\r\n    }\r\n\r\n    #calc-ph .cph-field input {\r\n      flex: 1;\r\n      border: none;\r\n      outline: none;\r\n      padding: 14px 16px;\r\n      font-size: 15px;\r\n      font-family: inherit;\r\n      color: var(--c-text);\r\n      background: transparent;\r\n    }\r\n\r\n    #calc-ph .cph-field input::placeholder {\r\n      color: var(--c-muted);\r\n      font-weight: 300;\r\n    }\r\n\r\n    #calc-ph .cph-field input[type=number]::-webkit-inner-spin-button,\r\n    #calc-ph .cph-field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }\r\n    #calc-ph .cph-field input[type=number] { -moz-appearance: textfield; }\r\n\r\n    #calc-ph .cph-icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 0 16px;\r\n      background: #eef5f5;\r\n      border-left: 1px solid var(--c-border);\r\n      font-size: 18px;\r\n      min-width: 52px;\r\n    }\r\n\r\n    #calc-ph .cph-btn {\r\n      display: block;\r\n      width: 100%;\r\n      max-width: 280px;\r\n      margin: 28px auto 0;\r\n      padding: 15px;\r\n      background: var(--c-teal);\r\n      color: #fff;\r\n      font-family: inherit;\r\n      font-size: 14px;\r\n      font-weight: 500;\r\n      letter-spacing: 1.2px;\r\n      text-transform: uppercase;\r\n      border: none;\r\n      border-radius: var(--radius);\r\n      cursor: pointer;\r\n      box-shadow: var(--shadow);\r\n      transition: background .2s, transform .1s;\r\n    }\r\n\r\n    #calc-ph .cph-btn:hover  { background: var(--c-teal-dark); }\r\n    #calc-ph .cph-btn:active { transform: scale(.98); }\r\n\r\n    #calc-ph .cph-table-wrap {\r\n      margin-top: 36px;\r\n      display: none;\r\n    }\r\n\r\n    #calc-ph .cph-table-wrap.visible {\r\n      display: block;\r\n    }\r\n\r\n    #calc-ph table {\r\n      width: 100%;\r\n      border-collapse: collapse;\r\n      background: var(--c-white);\r\n      border-radius: var(--radius);\r\n      overflow: hidden;\r\n      box-shadow: var(--shadow);\r\n      font-size: 14px;\r\n    }\r\n\r\n    #calc-ph thead th {\r\n      background: var(--c-teal);\r\n      color: #fff;\r\n      padding: 14px 12px;\r\n      font-weight: 400;\r\n      letter-spacing: .4px;\r\n      text-align: center;\r\n    }\r\n\r\n    #calc-ph tbody tr:nth-child(odd)  { background: var(--c-white); }\r\n    #calc-ph tbody tr:nth-child(even) { background: var(--c-row-alt); }\r\n\r\n    #calc-ph tbody td {\r\n      padding: 13px 12px;\r\n      text-align: center;\r\n      border-bottom: 1px solid var(--c-border);\r\n      color: var(--c-text);\r\n    }\r\n\r\n    #calc-ph tbody tr:last-child td { border-bottom: none; }\r\n\r\n    #calc-ph .cph-highlight {\r\n      background: var(--c-highlight) !important;\r\n      font-weight: 500;\r\n      color: var(--c-teal-dark);\r\n      font-size: 15px;\r\n    }\r\n\r\n    #calc-ph .cph-error {\r\n      display: none;\r\n      background: #fdecea;\r\n      border: 1px solid #f5c2be;\r\n      color: #c0392b;\r\n      border-radius: var(--radius);\r\n      padding: 10px 14px;\r\n      font-size: 13px;\r\n      margin-top: 12px;\r\n      text-align: center;\r\n    }\r\n\r\n    #calc-ph .cph-error.visible { display: block; }\r\n  <\/style>\r\n\r\n\r\n<div id=\"calc-ph\">\r\n  <div class=\"cph-wrap\">\r\n\r\n    <h1 class=\"cph-title\">Calculadora Precio por Hora<\/h1>\r\n\r\n    <div class=\"cph-field\">\r\n      <input type=\"number\" id=\"cph-salario\" placeholder=\"Salario al mes\" min=\"0\" step=\"any\">\r\n      <span class=\"cph-icon\">\ud83d\udcb5<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"cph-field\">\r\n      <input type=\"number\" id=\"cph-gastos\" placeholder=\"Gastos generales\" min=\"0\" step=\"any\">\r\n      <span class=\"cph-icon\">\ud83e\ude99<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"cph-field\">\r\n      <input type=\"number\" id=\"cph-horas\" placeholder=\"Horas trabajadas al mes\" min=\"0\" step=\"any\">\r\n      <span class=\"cph-icon\">\ud83d\udd52<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"cph-field\">\r\n      <input type=\"number\" id=\"cph-improductivas\" placeholder=\"Horas improductivas al mes\" min=\"0\" step=\"any\">\r\n      <span class=\"cph-icon\">\u23f1\ufe0f<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"cph-error\" id=\"cph-error\">\r\n      Las horas trabajadas deben ser mayores a las horas improductivas.\r\n    <\/div>\r\n\r\n    <button class=\"cph-btn\" onclick=\"cphCalcular()\">Calcular<\/button>\r\n\r\n    <div class=\"cph-table-wrap\" id=\"cph-table-wrap\">\r\n      <table>\r\n        <thead>\r\n          <tr>\r\n            <th>#<\/th>\r\n            <th>Salario<\/th>\r\n            <th>Gastos<\/th>\r\n            <th>Horas\/mes<\/th>\r\n            <th>Improductivas<\/th>\r\n            <th>Precio\/hora<\/th>\r\n          <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"cph-tbody\"><\/tbody>\r\n      <\/table>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  (function () {\r\n    let cphContador = 1;\r\n\r\n    window.cphCalcular = function () {\r\n      const salario         = parseFloat(document.getElementById('cph-salario').value)        || 0;\r\n      const gastos          = parseFloat(document.getElementById('cph-gastos').value)          || 0;\r\n      const horasTrabajadas = parseFloat(document.getElementById('cph-horas').value)           || 0;\r\n      const horasImprod     = parseFloat(document.getElementById('cph-improductivas').value)   || 0;\r\n      const errorEl         = document.getElementById('cph-error');\r\n\r\n      const horasUtiles = horasTrabajadas - horasImprod;\r\n\r\n      if (horasUtiles <= 0) {\r\n        errorEl.classList.add('visible');\r\n        return;\r\n      }\r\n\r\n      errorEl.classList.remove('visible');\r\n\r\n      const precioHora = (salario + gastos) \/ horasUtiles;\r\n\r\n      document.getElementById('cph-table-wrap').classList.add('visible');\r\n\r\n      const fila = document.createElement('tr');\r\n      fila.innerHTML = `\r\n        <td>${cphContador++}<\/td>\r\n        <td>${salario.toLocaleString('es-ES')} \u20ac<\/td>\r\n        <td>${gastos.toLocaleString('es-ES')} \u20ac<\/td>\r\n        <td>${horasTrabajadas} h<\/td>\r\n        <td>${horasImprod} h<\/td>\r\n        <td class=\"cph-highlight\">${precioHora.toFixed(2)} \u20ac\/h<\/td>\r\n      `;\r\n      document.getElementById('cph-tbody').appendChild(fila);\r\n    };\r\n  })();\r\n<\/script>\r\n\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":18,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[533],"tags":[],"class_list":["post-70679","post","type-post","status-publish","format-standard","hentry","category-actualidad"],"acf":[],"lang":"es","translations":{"es":70679},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70679","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/comments?post=70679"}],"version-history":[{"count":1,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70679\/revisions"}],"predecessor-version":[{"id":70681,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70679\/revisions\/70681"}],"wp:attachment":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/media?parent=70679"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/categories?post=70679"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/tags?post=70679"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}