Balanza Esfuerzo\u2013Recompensa<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\/>\n <style>\n :root {\n --plate-size: 80px;\n --beam-length: 320px;\n --pivot-height: 60px;\n }\n body {\n font-family: system-ui, sans-serif;\n background: #fafafa;\n margin: 0;\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2rem;\n }\n h1 {\n font-size: 1.4rem;\n text-align: center;\n margin: 0;\n }\n #scaleBox {\n position: relative;\n width: calc(var(--beam-length) + 120px);\n height: 220px;\n margin: 0 auto;\n }\n \/* pivot *\/\n .pivot {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 30px solid transparent;\n border-right: 30px solid transparent;\n border-top: var(--pivot-height) solid #666;\n }\n \/* beam *\/\n .beam {\n position: absolute;\n bottom: var(--pivot-height);\n left: 50%;\n width: var(--beam-length);\n height: 6px;\n background: #444;\n transform-origin: center center;\n transform: translateX(-50%) rotate(0deg);\n transition: transform .3s ease-out;\n }\n \/* plates *\/\n .plate {\n position: absolute;\n bottom: calc(var(--pivot-height) + 6px + 4px);\n width: var(--plate-size);\n height: var(--plate-size);\n border: 3px solid #444;\n border-radius: 50%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n }\n #leftPlate { left: 0; }\n #rightPlate { right: 0; }\n\n \/* labels *\/\n .label {\n position: absolute;\n bottom: calc(var(--pivot-height) + var(--plate-size) + 18px);\n width: var(--plate-size);\n text-align: center;\n font-weight: 600;\n color: #444;\n font-size: 0.85rem; \/* reduce size so the word entra *\/\n white-space: nowrap; \/* evita el salto de l\u00ednea *\/\n }\n #leftLabel { left: 0; }\n #rightLabel { right: 0; }\n\n \/* control panel *\/\n .panel {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n gap: 1rem;\n width: 100%;\n max-width: 900px;\n }\n .card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, .08);\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n button {\n border: 0;\n background: #2563eb;\n color: white;\n font-size: 1rem;\n padding: .4rem .7rem;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: .2rem;\n transition: background .2s;\n }\n button:hover { background: #1744c7; }\n .minus { background: #d32f2f; }\n .minus:hover { background: #aa2323; }\n .reset-btn { background: #757575; margin-left: .5rem; }\n .reset-btn:hover { background: #5c5c5c; }\n\n @media(max-width:600px) {\n body { padding: .8rem; }\n button { font-size: .9rem; }\n .label { font-size: 0.75rem; }\n }\n <\/style>\n<\/head>\n<body>\n <h1>Balanza Esfuerzo \u2013 Recompensa<\/h1>\n\n <div id=\"scaleBox\">\n <div id=\"leftPlate\" class=\"plate\">0<\/div>\n <div id=\"rightPlate\" class=\"plate\">0<\/div>\n <div id=\"beam\" class=\"beam\"><\/div>\n <div class=\"pivot\"><\/div>\n\n <div id=\"leftLabel\" class=\"label\">Esfuerzo<\/div>\n <div id=\"rightLabel\" class=\"label\">Recompensa<\/div>\n <\/div>\n\n <section class=\"panel\" id=\"controls\"><\/section>\n\n <script>\n const factors = [\n { name: \"Horas de trabajo\", type: \"effort\" },\n { name: \"Disponibilidad\", type: \"effort\" },\n { name: \"Autonom\u00eda\", type: \"effort\" },\n { name: \"Exigencias\", type: \"effort\" },\n { name: \"Relaciones\", type: \"effort\" },\n { name: \"Salario\", type: \"reward\" },\n { name: \"Beneficios sociales\", type: \"reward\" },\n { name: \"Conciliaci\u00f3n\", type: \"reward\" },\n { name: \"Reconocimiento\", type: \"reward\" },\n { name: \"Vacaciones\", type: \"reward\" },\n { name: \"Estatus\", type: \"reward\" }\n ];\n\n let effort = 0, reward = 0;\n const plateL = document.getElementById('leftPlate');\n const plateR = document.getElementById('rightPlate');\n const beam = document.getElementById('beam');\n\n function updateView() {\n plateL.textContent = effort;\n plateR.textContent = reward;\n const diff = reward - effort;\n const maxTilt = 15;\n let tilt = diff * 3;\n if (tilt > maxTilt) tilt = maxTilt;\n if (tilt < -maxTilt) tilt = -maxTilt;\n beam.style.transform = `translateX(-50%) rotate(${tilt}deg)`;\n }\n\n function adjust(type, delta) {\n if (type === 'effort') {\n effort = Math.max(0, effort + delta);\n } else {\n reward = Math.max(0, reward + delta);\n }\n updateView();\n }\n\n function resetScale() {\n effort = 0;\n reward = 0;\n updateView();\n }\n\n const panel = document.getElementById('controls');\n\n factors.forEach(f => {\n const card = document.createElement('div');\n card.className = 'card';\n card.innerHTML = `<span>${f.name}<\/span>`;\n\n const btnGroup = document.createElement('div');\n const addBtn = document.createElement('button');\n addBtn.textContent = '+';\n addBtn.title = 'A\u00f1adir';\n addBtn.onclick = () => adjust(f.type, 1);\n\n const minusBtn = document.createElement('button');\n minusBtn.textContent = '\u2212';\n minusBtn.className = 'minus';\n minusBtn.title = 'Quitar';\n minusBtn.onclick = () => adjust(f.type, -1);\n\n btnGroup.appendChild(addBtn);\n btnGroup.appendChild(minusBtn);\n card.appendChild(btnGroup);\n panel.appendChild(card);\n });\n\n const resetCard = document.createElement('div');\n resetCard.className = 'card';\n resetCard.style.justifyContent = 'center';\n const resetBtn = document.createElement('button');\n resetBtn.textContent = 'Reset';\n resetBtn.className = 'reset-btn';\n resetBtn.onclick = resetScale;\n resetCard.appendChild(resetBtn);\n panel.appendChild(resetCard);\n\n updateView();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Balanza Esfuerzo\u2013Recompensa Balanza Esfuerzo \u2013 Recompensa 0 0 Esfuerzo Recompensa<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"enable","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"class_list":["post-1822","page","type-page","status-publish","hentry"],"publishpress_future_action":{"enabled":false,"date":"2026-08-03 12:58:28","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages\/1822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/comments?post=1822"}],"version-history":[{"count":4,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages\/1822\/revisions"}],"predecessor-version":[{"id":1827,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages\/1822\/revisions\/1827"}],"wp:attachment":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/media?parent=1822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1822,"date":"2025-06-02T12:29:12","date_gmt":"2025-06-02T10:29:12","guid":{"rendered":"https:\/\/hablemosdeprevencion.com\/?page_id=1822"},"modified":"2025-06-02T12:40:20","modified_gmt":"2025-06-02T10:40:20","slug":"balanza-esfuerzo-recompensa","status":"publish","type":"page","link":"https:\/\/hablemosdeprevencion.com\/index.php\/balanza-esfuerzo-recompensa\/","title":{"rendered":"Balanza Esfuerzo\u2013Recompensa"},"content":{"rendered":"\n\n\n\n \n Balanza Esfuerzo\u2013Recompensa<\/title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\/>\n <style>\n :root {\n --plate-size: 80px;\n --beam-length: 320px;\n --pivot-height: 60px;\n }\n body {\n font-family: system-ui, sans-serif;\n background: #fafafa;\n margin: 0;\n padding: 1.5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2rem;\n }\n h1 {\n font-size: 1.4rem;\n text-align: center;\n margin: 0;\n }\n #scaleBox {\n position: relative;\n width: calc(var(--beam-length) + 120px);\n height: 220px;\n margin: 0 auto;\n }\n \/* pivot *\/\n .pivot {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 0;\n height: 0;\n border-left: 30px solid transparent;\n border-right: 30px solid transparent;\n border-top: var(--pivot-height) solid #666;\n }\n \/* beam *\/\n .beam {\n position: absolute;\n bottom: var(--pivot-height);\n left: 50%;\n width: var(--beam-length);\n height: 6px;\n background: #444;\n transform-origin: center center;\n transform: translateX(-50%) rotate(0deg);\n transition: transform .3s ease-out;\n }\n \/* plates *\/\n .plate {\n position: absolute;\n bottom: calc(var(--pivot-height) + 6px + 4px);\n width: var(--plate-size);\n height: var(--plate-size);\n border: 3px solid #444;\n border-radius: 50%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n }\n #leftPlate { left: 0; }\n #rightPlate { right: 0; }\n\n \/* labels *\/\n .label {\n position: absolute;\n bottom: calc(var(--pivot-height) + var(--plate-size) + 18px);\n width: var(--plate-size);\n text-align: center;\n font-weight: 600;\n color: #444;\n font-size: 0.85rem; \/* reduce size so the word entra *\/\n white-space: nowrap; \/* evita el salto de l\u00ednea *\/\n }\n #leftLabel { left: 0; }\n #rightLabel { right: 0; }\n\n \/* control panel *\/\n .panel {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));\n gap: 1rem;\n width: 100%;\n max-width: 900px;\n }\n .card {\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 6px rgba(0, 0, 0, .08);\n padding: 1rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n button {\n border: 0;\n background: #2563eb;\n color: white;\n font-size: 1rem;\n padding: .4rem .7rem;\n border-radius: 6px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: .2rem;\n transition: background .2s;\n }\n button:hover { background: #1744c7; }\n .minus { background: #d32f2f; }\n .minus:hover { background: #aa2323; }\n .reset-btn { background: #757575; margin-left: .5rem; }\n .reset-btn:hover { background: #5c5c5c; }\n\n @media(max-width:600px) {\n body { padding: .8rem; }\n button { font-size: .9rem; }\n .label { font-size: 0.75rem; }\n }\n <\/style>\n<\/head>\n<body>\n <h1>Balanza Esfuerzo \u2013 Recompensa<\/h1>\n\n <div id=\"scaleBox\">\n <div id=\"leftPlate\" class=\"plate\">0<\/div>\n <div id=\"rightPlate\" class=\"plate\">0<\/div>\n <div id=\"beam\" class=\"beam\"><\/div>\n <div class=\"pivot\"><\/div>\n\n <div id=\"leftLabel\" class=\"label\">Esfuerzo<\/div>\n <div id=\"rightLabel\" class=\"label\">Recompensa<\/div>\n <\/div>\n\n <section class=\"panel\" id=\"controls\"><\/section>\n\n <script>\n const factors = [\n { name: \"Horas de trabajo\", type: \"effort\" },\n { name: \"Disponibilidad\", type: \"effort\" },\n { name: \"Autonom\u00eda\", type: \"effort\" },\n { name: \"Exigencias\", type: \"effort\" },\n { name: \"Relaciones\", type: \"effort\" },\n { name: \"Salario\", type: \"reward\" },\n { name: \"Beneficios sociales\", type: \"reward\" },\n { name: \"Conciliaci\u00f3n\", type: \"reward\" },\n { name: \"Reconocimiento\", type: \"reward\" },\n { name: \"Vacaciones\", type: \"reward\" },\n { name: \"Estatus\", type: \"reward\" }\n ];\n\n let effort = 0, reward = 0;\n const plateL = document.getElementById('leftPlate');\n const plateR = document.getElementById('rightPlate');\n const beam = document.getElementById('beam');\n\n function updateView() {\n plateL.textContent = effort;\n plateR.textContent = reward;\n const diff = reward - effort;\n const maxTilt = 15;\n let tilt = diff * 3;\n if (tilt > maxTilt) tilt = maxTilt;\n if (tilt < -maxTilt) tilt = -maxTilt;\n beam.style.transform = `translateX(-50%) rotate(${tilt}deg)`;\n }\n\n function adjust(type, delta) {\n if (type === 'effort') {\n effort = Math.max(0, effort + delta);\n } else {\n reward = Math.max(0, reward + delta);\n }\n updateView();\n }\n\n function resetScale() {\n effort = 0;\n reward = 0;\n updateView();\n }\n\n const panel = document.getElementById('controls');\n\n factors.forEach(f => {\n const card = document.createElement('div');\n card.className = 'card';\n card.innerHTML = `<span>${f.name}<\/span>`;\n\n const btnGroup = document.createElement('div');\n const addBtn = document.createElement('button');\n addBtn.textContent = '+';\n addBtn.title = 'A\u00f1adir';\n addBtn.onclick = () => adjust(f.type, 1);\n\n const minusBtn = document.createElement('button');\n minusBtn.textContent = '\u2212';\n minusBtn.className = 'minus';\n minusBtn.title = 'Quitar';\n minusBtn.onclick = () => adjust(f.type, -1);\n\n btnGroup.appendChild(addBtn);\n btnGroup.appendChild(minusBtn);\n card.appendChild(btnGroup);\n panel.appendChild(card);\n });\n\n const resetCard = document.createElement('div');\n resetCard.className = 'card';\n resetCard.style.justifyContent = 'center';\n const resetBtn = document.createElement('button');\n resetBtn.textContent = 'Reset';\n resetBtn.className = 'reset-btn';\n resetBtn.onclick = resetScale;\n resetCard.appendChild(resetBtn);\n panel.appendChild(resetCard);\n\n updateView();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Balanza Esfuerzo\u2013Recompensa Balanza Esfuerzo \u2013 Recompensa 0 0 Esfuerzo Recompensa<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"enable","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"class_list":["post-1822","page","type-page","status-publish","hentry"],"publishpress_future_action":{"enabled":false,"date":"2026-08-03 12:58:28","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages\/1822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/comments?post=1822"}],"version-history":[{"count":4,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages\/1822\/revisions"}],"predecessor-version":[{"id":1827,"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/pages\/1822\/revisions\/1827"}],"wp:attachment":[{"href":"https:\/\/hablemosdeprevencion.com\/index.php\/wp-json\/wp\/v2\/media?parent=1822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}