Calculadora de Incentivos \u2014 Beauty ads<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --rose: #f2ddd8;\n --rose-mid: #e8c8c0;\n --rose-deep: #d4a89a;\n --navy: #1a1f4e;\n --navy-mid: #2a3170;\n --coral: #e8735a;\n --coral-light:#faeae6;\n --white: #ffffff;\n --text: #1a1f4e;\n --text2: #5a5f7a;\n --text3: #9a9db5;\n --border: rgba(26,31,78,0.10);\n --border2: rgba(26,31,78,0.18);\n --radius: 14px;\n --radius-sm: 9px;\n --shadow: 0 2px 8px rgba(26,31,78,0.08), 0 8px 24px rgba(26,31,78,0.05);\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: var(--rose);\n color: var(--text);\n min-height: 100vh;\n padding: 2.5rem 1rem;\n }\n\n .wrapper { max-width: 700px; margin: 0 auto; }\n\n \/* Header *\/\n .header { text-align: center; margin-bottom: 2.5rem; }\n .brand {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--navy);\n color: var(--rose);\n padding: 10px 22px 10px 14px;\n border-radius: 999px;\n margin-bottom: 1rem;\n }\n .brand-icon {\n width: 32px; height: 32px;\n background: var(--coral);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-family: 'League Spartan', sans-serif;\n font-size: 16px; font-weight: 700;\n color: var(--white);\n }\n .brand-name {\n font-family: 'League Spartan', sans-serif;\n font-size: 15px; font-weight: 600;\n letter-spacing: .04em;\n color: var(--rose);\n }\n .header h1 {\n font-family: 'League Spartan', sans-serif;\n font-size: 2rem; font-weight: 700;\n color: var(--navy);\n letter-spacing: -0.01em;\n margin-bottom: 6px;\n }\n .header p { font-size: 13px; color: var(--text2); font-weight: 400; }\n\n \/* Tabs *\/\n .tabs {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 4px;\n background: var(--rose-mid);\n border-radius: var(--radius);\n padding: 4px;\n margin-bottom: 1.5rem;\n }\n .tab {\n padding: 12px 16px; border: none;\n background: transparent; cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 600;\n color: var(--text2);\n border-radius: calc(var(--radius) - 2px);\n transition: all .2s;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n letter-spacing: .02em;\n }\n .tab svg { width: 16px; height: 16px; }\n .tab.active {\n background: var(--navy);\n color: var(--rose);\n box-shadow: var(--shadow);\n }\n\n .section { display: none; }\n .section.active { display: block; }\n\n \/* Cards *\/\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1.5rem;\n margin-bottom: 1rem;\n box-shadow: var(--shadow);\n }\n .card-title {\n font-family: 'League Spartan', sans-serif;\n font-size: 12px; font-weight: 700;\n color: var(--navy);\n text-transform: uppercase;\n letter-spacing: .08em;\n margin-bottom: 1.25rem;\n display: flex; align-items: center; gap: 8px;\n }\n .card-title svg { width: 15px; height: 15px; color: var(--coral); }\n .card-title .dot {\n width: 6px; height: 6px;\n background: var(--coral);\n border-radius: 50%;\n }\n\n \/* Info card *\/\n .info-card {\n background: var(--rose);\n border-radius: var(--radius);\n padding: 1rem 1.25rem;\n margin-bottom: 1rem;\n font-size: 13px; line-height: 1.7;\n color: var(--text2);\n border-left: 3px solid var(--coral);\n }\n .info-card strong { color: var(--navy); font-weight: 600; }\n\n \/* Fields *\/\n .field { margin-bottom: 1.1rem; }\n .field:last-child { margin-bottom: 0; }\n .field label {\n display: block;\n font-family: 'League Spartan', sans-serif;\n font-size: 11px; font-weight: 600;\n color: var(--text2);\n margin-bottom: 6px;\n letter-spacing: .05em;\n text-transform: uppercase;\n }\n .field input {\n width: 100%;\n padding: 10px 14px;\n font-family: 'Poppins', sans-serif;\n font-size: 15px;\n border: 1.5px solid var(--border2);\n border-radius: var(--radius-sm);\n background: var(--white);\n color: var(--navy);\n transition: border-color .15s, box-shadow .15s;\n }\n .field input:focus {\n outline: none;\n border-color: var(--coral);\n box-shadow: 0 0 0 3px rgba(232,115,90,0.12);\n }\n .field .note { font-size: 11px; color: var(--text3); margin-top: 5px; }\n .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n\n \/* Pills *\/\n .pill-group { display: flex; gap: 6px; flex-wrap: wrap; }\n .pill {\n padding: 7px 16px;\n border: 1.5px solid var(--border2);\n border-radius: 999px;\n background: transparent;\n cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n font-size: 13px; font-weight: 600;\n color: var(--text2);\n transition: all .15s;\n }\n .pill.sel { background: var(--navy); color: var(--rose); border-color: var(--navy); }\n .pill:hover:not(.sel) { border-color: var(--coral); color: var(--coral); }\n\n \/* Results *\/\n .result-line {\n display: flex; justify-content: space-between; align-items: center;\n padding: 9px 0;\n border-bottom: 1px solid var(--border);\n font-size: 13px;\n }\n .result-line:last-child { border-bottom: none; }\n .result-line .lbl { color: var(--text2); }\n .result-line .val { font-weight: 600; color: var(--navy); }\n\n .total-box {\n background: var(--navy);\n border-radius: var(--radius-sm);\n padding: 1rem 1.25rem;\n display: flex; justify-content: space-between; align-items: center;\n margin-top: 12px;\n }\n .total-box .lbl { font-family: 'League Spartan', sans-serif; font-size: 13px; font-weight: 600; color: var(--rose-mid); letter-spacing: .03em; }\n .total-box .val { font-family: 'League Spartan', sans-serif; font-size: 28px; font-weight: 700; color: var(--rose); }\n\n \/* Alerts *\/\n .alert {\n border-radius: var(--radius-sm);\n padding: 10px 14px;\n font-size: 12px;\n margin-top: 12px;\n display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;\n }\n .alert svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }\n .alert-amber { background: #fff4e6; color: #92400e; }\n .alert-green { background: var(--coral-light); color: #8b2a14; }\n\n .c-coral { color: var(--coral); }\n .c-navy { color: var(--navy); }\n .c-muted { color: var(--text2); }\n .c-red { color: #c0392b; }\n\n \/* Tier table *\/\n .tier-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n .tier-table th {\n text-align: left;\n font-family: 'League Spartan', sans-serif;\n font-size: 10px; font-weight: 700;\n text-transform: uppercase; letter-spacing: .06em;\n color: var(--text3);\n padding: 0 0 10px 0;\n border-bottom: 1px solid var(--border);\n }\n .tier-table td { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--navy); font-size: 13px; }\n .tier-table tr:last-child td { border-bottom: none; }\n .tier-table tr.active-row td {\n background: var(--rose);\n color: var(--navy);\n font-weight: 600;\n padding: 8px 10px;\n }\n .tier-table tr.active-row td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }\n .tier-table tr.active-row td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }\n\n \/* Employee cards *\/\n .emp-card {\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 1.25rem;\n margin-bottom: 12px;\n box-shadow: var(--shadow);\n transition: border-color .2s;\n }\n .emp-card:hover { border-color: var(--rose-deep); }\n .emp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; }\n .avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: var(--navy);\n display: flex; align-items: center; justify-content: center;\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 700;\n color: var(--rose);\n flex-shrink: 0;\n }\n .emp-name-input {\n flex: 1;\n padding: 8px 12px;\n font-family: 'Poppins', sans-serif;\n font-size: 14px; font-weight: 500;\n border: 1.5px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--rose);\n color: var(--navy);\n transition: border-color .15s;\n }\n .emp-name-input:focus { outline: none; border-color: var(--coral); background: var(--white); }\n\n .btn-remove {\n background: none; border: none; cursor: pointer;\n color: var(--text3); padding: 6px;\n border-radius: 6px; transition: all .15s;\n display: flex; align-items: center;\n }\n .btn-remove:hover { color: var(--coral); background: var(--coral-light); }\n .btn-remove svg { width: 16px; height: 16px; }\n\n .pct-free-wrap { display: flex; align-items: center; gap: 10px; }\n .pct-free-wrap input { width: 90px; text-align: center; font-size: 20px !important; font-weight: 700 !important; padding: 10px !important; color: var(--navy) !important; }\n .pct-free-wrap .pct-sym { font-family: 'League Spartan', sans-serif; font-size: 26px; font-weight: 300; color: var(--rose-deep); }\n .pct-free-wrap .pct-hint { font-size: 11px; color: var(--text3); line-height: 1.5; }\n\n .btn-add {\n width: 100%; padding: 12px;\n border: 2px dashed var(--rose-deep);\n border-radius: var(--radius);\n background: transparent; cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n font-size: 13px; font-weight: 600;\n color: var(--text2);\n display: flex; align-items: center; justify-content: center; gap: 8px;\n transition: all .15s; margin-top: 4px;\n letter-spacing: .03em;\n }\n .btn-add:hover { background: var(--white); border-color: var(--coral); color: var(--coral); }\n .btn-add svg { width: 16px; height: 16px; }\n\n \/* PDF button *\/\n .btn-pdf {\n width: 100%; margin-top: 1.25rem;\n padding: 15px 20px;\n background: var(--coral);\n color: var(--white);\n border: none; border-radius: var(--radius);\n font-family: 'League Spartan', sans-serif;\n font-size: 15px; font-weight: 700;\n letter-spacing: .04em;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center; gap: 10px;\n transition: background .18s, transform .1s;\n box-shadow: 0 4px 16px rgba(232,115,90,0.35);\n }\n .btn-pdf:hover { background: #d4634a; }\n .btn-pdf:active { transform: scale(0.99); }\n .btn-pdf svg { width: 18px; height: 18px; }\n\n .divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }\n #pdf-report { display: none; }\n\n @media (max-width: 500px) {\n .grid2 { grid-template-columns: 1fr; }\n .header h1 { font-size: 1.6rem; }\n .total-box .val { font-size: 22px; }\n }\n\n \/* ===== PRINT \/ PDF ===== *\/\n @media print {\n * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\n\n body { background: #fff !important; padding: 20px !important; font-family: 'Poppins', sans-serif; }\n .wrapper { max-width: 100% !important; }\n\n .header, .tabs, .section, .btn-pdf, .btn-add { display: none !important; }\n #pdf-report { display: block !important; }\n\n .pr-header {\n display: flex; justify-content: space-between; align-items: flex-start;\n padding-bottom: 16px; margin-bottom: 24px;\n border-bottom: 3px solid #1a1f4e;\n }\n .pr-brand {\n display: flex; align-items: center; gap: 10px; margin-bottom: 6px;\n }\n .pr-brand-circle {\n width: 30px; height: 30px; border-radius: 50%;\n background: #e8735a !important;\n display: flex; align-items: center; justify-content: center;\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 700; color: #fff;\n }\n .pr-brand-name {\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 700; color: #1a1f4e;\n letter-spacing: .04em;\n }\n .pr-title {\n font-family: 'League Spartan', sans-serif;\n font-size: 22px; font-weight: 700; color: #1a1f4e;\n }\n .pr-subtitle { font-size: 12px; color: #5a5f7a; margin-top: 3px; }\n .pr-date { font-size: 11px; color: #9a9db5; text-align: right; line-height: 1.6; }\n\n .pr-emp {\n border: 1px solid #e0d8d5; border-radius: 10px;\n padding: 16px; margin-bottom: 14px; page-break-inside: avoid;\n }\n .pr-emp-name {\n font-family: 'League Spartan', sans-serif;\n font-size: 15px; font-weight: 700; color: #1a1f4e;\n margin-bottom: 12px; padding-bottom: 8px;\n border-bottom: 1px solid #ede8e5;\n }\n .pr-row {\n display: flex; justify-content: space-between;\n font-size: 12px; padding: 6px 0;\n border-bottom: 1px solid #f5f0ee;\n }\n .pr-row:last-of-type { border-bottom: none; }\n .pr-lbl { color: #5a5f7a; }\n .pr-val { font-weight: 600; color: #1a1f4e; }\n .pr-val.coral { color: #e8735a; }\n .pr-val.navy { color: #1a1f4e; }\n .pr-val.red { color: #c0392b; }\n .pr-val.muted { color: #9a9db5; }\n\n .pr-total {\n background: #1a1f4e !important;\n border-radius: 8px; padding: 10px 16px;\n display: flex; justify-content: space-between; align-items: center;\n margin-top: 10px;\n }\n .pr-total-lbl {\n font-family: 'League Spartan', sans-serif;\n font-size: 12px; font-weight: 600; color: #f2ddd8;\n }\n .pr-total-val {\n font-family: 'League Spartan', sans-serif;\n font-size: 22px; font-weight: 700; color: #f2ddd8;\n }\n\n .pr-no-incentivo {\n background: #fff4e6 !important; border-radius: 6px;\n padding: 8px 12px; font-size: 12px; color: #92400e; margin-top: 10px;\n }\n\n .pr-summary {\n margin-top: 28px; border-top: 2px solid #1a1f4e;\n padding-top: 18px; page-break-inside: avoid;\n }\n .pr-summary-title {\n font-family: 'League Spartan', sans-serif;\n font-size: 11px; font-weight: 700;\n text-transform: uppercase; letter-spacing: .08em;\n color: #1a1f4e; margin-bottom: 12px;\n }\n .pr-summary-row {\n display: flex; justify-content: space-between;\n font-size: 13px; padding: 7px 0;\n border-bottom: 1px solid #ede8e5;\n }\n .pr-summary-row:last-of-type { border-bottom: none; }\n .pr-summary-total {\n display: flex; justify-content: space-between; align-items: center;\n padding: 12px 16px;\n background: #1a1f4e !important;\n border-radius: 8px; margin-top: 12px;\n font-family: 'League Spartan', sans-serif;\n font-size: 18px; font-weight: 700;\n color: #f2ddd8;\n }\n\n .pr-footer {\n margin-top: 32px; font-size: 10px; color: #9a9db5;\n text-align: center;\n border-top: 1px solid #ede8e5; padding-top: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrapper\">\n\n <div class=\"header\">\n <div class=\"brand\">\n <div class=\"brand-icon\">B<\/div>\n <span class=\"brand-name\">Beauty ads<\/span>\n <\/div>\n <h1>Calculadora de Incentivos<\/h1>\n <p>Sistema de recompensas para tu centro de est\u00e9tica avanzada<\/p>\n <\/div>\n\n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"switchTab('productos',this)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"\/><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><path d=\"M16 10a4 4 0 0 1-8 0\"\/><\/svg>\n Productos\n <\/button>\n <button class=\"tab\" onclick=\"switchTab('servicios',this)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg>\n Servicios\n <\/button>\n <\/div>\n\n \n <div id=\"sec-productos\" class=\"section active\">\n\n <div class=\"card\">\n <div class=\"card-title\"><div class=\"dot\"><\/div> Venta de productos<\/div>\n <div class=\"field\">\n <label>Venta total cobrada al cliente (con IVA incluido) \u2014 \u20ac<\/label>\n <input type=\"number\" id=\"p-bruta\" value=\"1500\" min=\"0\" step=\"10\" oninput=\"calcP()\">\n <\/div>\n <div class=\"field\">\n <label>IVA aplicado<\/label>\n <div class=\"pill-group\" id=\"iva-btns\">\n <button class=\"pill\" onclick=\"setIVA(4,this)\">4%<\/button>\n <button class=\"pill\" onclick=\"setIVA(10,this)\">10%<\/button>\n <button class=\"pill sel\" onclick=\"setIVA(21,this)\">21%<\/button>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>% de comisi\u00f3n sobre venta neta (sin IVA)<\/label>\n <div class=\"pill-group\" id=\"pcom-btns\">\n <button class=\"pill sel\" onclick=\"setPcom(5,this)\">5%<\/button>\n <button class=\"pill\" onclick=\"setPcom(7,this)\">7%<\/button>\n <button class=\"pill\" onclick=\"setPcom(10,this)\">10%<\/button>\n <\/div>\n <p class=\"note\">La comisi\u00f3n se aplica siempre sobre el importe neto, descontado el IVA<\/p>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><div class=\"dot\"><\/div> Desglose<\/div>\n <div class=\"result-line\"><span class=\"lbl\">Venta bruta (con IVA)<\/span><span class=\"val\" id=\"pd-bruta\">\u2014<\/span><\/div>\n <div class=\"result-line\"><span class=\"lbl\">IVA descontado<\/span><span class=\"val c-red\" id=\"pd-iva\">\u2014<\/span><\/div>\n <div class=\"result-line\"><span class=\"lbl\">Venta neta \u2014 base de comisi\u00f3n<\/span><span class=\"val c-navy\" id=\"pd-neta\">\u2014<\/span><\/div>\n <div class=\"result-line\"><span class=\"lbl\" id=\"pd-com-lbl\">Comisi\u00f3n (5% sobre neto)<\/span><span class=\"val c-coral\" id=\"pd-com\">\u2014<\/span><\/div>\n <div class=\"total-box\">\n <span class=\"lbl\">Incentivo a pagar<\/span>\n <span class=\"val\" id=\"pd-total\">\u2014<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><div class=\"dot\"><\/div> Tabla de referencia \u2014 venta neta<\/div>\n <table class=\"tier-table\">\n <thead><tr><th>Venta neta<\/th><th>5%<\/th><th>7%<\/th><th>10%<\/th><\/tr><\/thead>\n <tbody id=\"tier-body\"><\/tbody>\n <\/table>\n <\/div>\n\n <\/div>\n\n \n <div id=\"sec-servicios\" class=\"section\">\n\n <div class=\"info-card\">\n <strong>C\u00f3mo funciona:<\/strong> introduce la base (lo que debe cubrir cada empleada) y lo que ha generado ese mes. Si lo generado supera la base, el incentivo se aplica sobre ese excedente con el porcentaje que t\u00fa decidas libremente.\n <\/div>\n\n <div id=\"empleadas-wrap\"><\/div>\n\n <button class=\"btn-add\" onclick=\"addEmpleada()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n A\u00f1adir empleada\n <\/button>\n\n <button class=\"btn-pdf\" onclick=\"descargarPDF()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n Descargar informe PDF\n <\/button>\n <\/div>\n\n <div id=\"pdf-report\"><\/div>\n\n <\/div>\n\n <script>\n let ivaVal = 21, pcomVal = 5;\n let empleadas = [{ id: 1, nombre: 'Catalina', base: 4500, generado: 6000, pct: 3 }];\n let nextId = 2;\n\n function fmt(n) {\n return '\u20ac' + parseFloat(n).toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n }\n\n function switchTab(name, btn) {\n document.querySelectorAll('.tab').forEach(b => b.classList.remove('active'));\n document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));\n btn.classList.add('active');\n document.getElementById('sec-' + name).classList.add('active');\n }\n\n function setIVA(v, btn) {\n ivaVal = v;\n document.querySelectorAll('#iva-btns .pill').forEach(b => b.classList.remove('sel'));\n btn.classList.add('sel'); calcP();\n }\n function setPcom(v, btn) {\n pcomVal = v;\n document.querySelectorAll('#pcom-btns .pill').forEach(b => b.classList.remove('sel'));\n btn.classList.add('sel'); calcP();\n }\n\n function calcP() {\n const bruta = parseFloat(document.getElementById('p-bruta').value) || 0;\n const neta = bruta \/ (1 + ivaVal \/ 100);\n const ivaA = bruta - neta;\n const com = neta * pcomVal \/ 100;\n document.getElementById('pd-bruta').textContent = fmt(bruta);\n document.getElementById('pd-iva').textContent = '\u2212 ' + fmt(ivaA);\n document.getElementById('pd-neta').textContent = fmt(neta);\n document.getElementById('pd-com-lbl').textContent = 'Comisi\u00f3n (' + pcomVal + '% sobre neto)';\n document.getElementById('pd-com').textContent = fmt(com);\n document.getElementById('pd-total').textContent = fmt(com);\n buildTiers(neta);\n }\n\n function buildTiers(neta) {\n const tramos = [300,500,750,1000,1500,2000,3000,5000,7500,10000];\n document.getElementById('tier-body').innerHTML = tramos.map((v,i) => {\n const next = tramos[i+1] || Infinity;\n const active = neta >= v && neta < next;\n return '<tr class=\"'+(active?'active-row':'')+'\">' +\n '<td>'+fmt(v)+(active?' \u25c0':'')+'<\/td>' +\n '<td>'+fmt(v*.05)+'<\/td><td>'+fmt(v*.07)+'<\/td><td>'+fmt(v*.10)+'<\/td><\/tr>';\n }).join('');\n }\n\n function renderEmpleadas() {\n document.getElementById('empleadas-wrap').innerHTML = empleadas.map(e => {\n const exc = Math.max(0, e.generado - e.base);\n const supera = e.generado > e.base;\n const inc = exc * e.pct \/ 100;\n const initials= e.nombre.trim().split(' ').map(p=>p[0]).join('').slice(0,2).toUpperCase()||'?';\n\n const alertH = !supera\n ? '<div class=\"alert alert-amber\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg> No supera la base \u2014 no hay excedente, no se genera incentivo<\/div>'\n : '<div class=\"alert alert-green\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> Supera la base en '+fmt(exc)+'<\/div>';\n\n const desg = supera\n ? '<hr class=\"divider\">' +\n '<div class=\"result-line\"><span class=\"lbl\">Base (coste a cubrir)<\/span><span class=\"val\">'+fmt(e.base)+'<\/span><\/div>' +\n '<div class=\"result-line\"><span class=\"lbl\">Generado en servicios<\/span><span class=\"val c-navy\">'+fmt(e.generado)+'<\/span><\/div>' +\n '<div class=\"result-line\"><span class=\"lbl\">Excedente sobre la base<\/span><span class=\"val c-muted\">'+fmt(exc)+'<\/span><\/div>' +\n '<div class=\"result-line\"><span class=\"lbl\">Incentivo ('+e.pct+'% sobre excedente)<\/span><span class=\"val c-coral\">'+fmt(inc)+'<\/span><\/div>' +\n '<div class=\"total-box\"><span class=\"lbl\">Incentivo a pagar<\/span><span class=\"val\">'+fmt(inc)+'<\/span><\/div>'\n : '';\n\n return '<div class=\"emp-card\">' +\n '<div class=\"emp-header\">' +\n '<div class=\"avatar\">'+initials+'<\/div>' +\n '<input class=\"emp-name-input\" value=\"'+e.nombre+'\" placeholder=\"Nombre empleada\" oninput=\"updNombre('+e.id+',this.value)\">' +\n '<button class=\"btn-remove\" onclick=\"removeEmp('+e.id+')\" aria-label=\"Eliminar\">' +\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>' +\n '<\/button>' +\n '<\/div>' +\n '<div class=\"grid2\">' +\n '<div class=\"field\"><label>Base \u2014 \u20ac (coste a cubrir)<\/label><input type=\"number\" value=\"'+e.base+'\" min=\"0\" step=\"50\" oninput=\"updVal('+e.id+',\\'base\\',this.value)\"><\/div>' +\n '<div class=\"field\"><label>Generado en servicios \u2014 \u20ac<\/label><input type=\"number\" value=\"'+e.generado+'\" min=\"0\" step=\"10\" oninput=\"updVal('+e.id+',\\'generado\\',this.value)\"><\/div>' +\n '<\/div>' +\n '<div class=\"field\">' +\n '<label>% de incentivo sobre el excedente<\/label>' +\n '<div class=\"pct-free-wrap\">' +\n '<input type=\"number\" value=\"'+e.pct+'\" min=\"0\" max=\"100\" step=\"0.5\" oninput=\"updVal('+e.id+',\\'pct\\',this.value)\">' +\n '<span class=\"pct-sym\">%<\/span>' +\n '<span class=\"pct-hint\">Escribe el porcentaje<br>que quieras aplicar<\/span>' +\n '<\/div>' +\n '<\/div>' +\n alertH + desg +\n '<\/div>';\n }).join('');\n }\n\n function updNombre(id,val){ const e=empleadas.find(e=>e.id===id); if(e){e.nombre=val;renderEmpleadas();} }\n function updVal(id,field,val){ const e=empleadas.find(e=>e.id===id); if(e){e[field]=parseFloat(val)||0;renderEmpleadas();} }\n function addEmpleada(){ empleadas.push({id:nextId++,nombre:'Nueva empleada',base:0,generado:0,pct:5});renderEmpleadas(); }\n function removeEmp(id){ empleadas=empleadas.filter(e=>e.id!==id);renderEmpleadas(); }\n\n function descargarPDF() {\n const ahora = new Date();\n const fecha = ahora.toLocaleDateString('es-ES',{day:'2-digit',month:'long',year:'numeric'});\n const hora = ahora.toLocaleTimeString('es-ES',{hour:'2-digit',minute:'2-digit'});\n\n let totalInc=0, totalGen=0, conInc=0;\n\n const cuerpo = empleadas.map(e => {\n const exc = Math.max(0,e.generado-e.base);\n const supera = e.generado > e.base;\n const inc = exc * e.pct \/ 100;\n totalGen += e.generado;\n if(supera){ totalInc+=inc; conInc++; }\n\n const filas = supera\n ? '<div class=\"pr-row\"><span class=\"pr-lbl\">Base (coste a cubrir)<\/span><span class=\"pr-val\">'+fmt(e.base)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Generado en servicios<\/span><span class=\"pr-val navy\">'+fmt(e.generado)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Excedente sobre la base<\/span><span class=\"pr-val muted\">'+fmt(exc)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Porcentaje de incentivo aplicado<\/span><span class=\"pr-val\">'+e.pct+'%<\/span><\/div>' +\n '<div class=\"pr-total\"><span class=\"pr-total-lbl\">Incentivo a pagar<\/span><span class=\"pr-total-val\">'+fmt(inc)+'<\/span><\/div>'\n : '<div class=\"pr-row\"><span class=\"pr-lbl\">Base (coste a cubrir)<\/span><span class=\"pr-val\">'+fmt(e.base)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Generado en servicios<\/span><span class=\"pr-val red\">'+fmt(e.generado)+'<\/span><\/div>' +\n '<div class=\"pr-no-incentivo\">No supera la base \u2014 sin incentivo este per\u00edodo<\/div>';\n\n return '<div class=\"pr-emp\"><div class=\"pr-emp-name\">'+e.nombre+'<\/div>'+filas+'<\/div>';\n }).join('');\n\n const resumen =\n '<div class=\"pr-summary\">' +\n '<div class=\"pr-summary-title\">Resumen del periodo<\/div>' +\n '<div class=\"pr-summary-row\"><span>Total empleadas<\/span><strong>'+empleadas.length+'<\/strong><\/div>' +\n '<div class=\"pr-summary-row\"><span>Facturaci\u00f3n total generada<\/span><strong>'+fmt(totalGen)+'<\/strong><\/div>' +\n '<div class=\"pr-summary-row\"><span>Empleadas que superan la base<\/span><strong>'+conInc+' de '+empleadas.length+'<\/strong><\/div>' +\n '<div class=\"pr-summary-total\"><span>Total incentivos a pagar<\/span><span>'+fmt(totalInc)+'<\/span><\/div>' +\n '<\/div>';\n\n document.getElementById('pdf-report').innerHTML =\n '<div class=\"pr-header\">' +\n '<div>' +\n '<div class=\"pr-brand\"><div class=\"pr-brand-circle\">B<\/div><span class=\"pr-brand-name\">Beauty ads<\/span><\/div>' +\n '<div class=\"pr-title\">Informe de Incentivos<\/div>' +\n '<div class=\"pr-subtitle\">M\u00f3dulo de servicios \u00b7 c\u00e1lculo sobre excedente de base<\/div>' +\n '<\/div>' +\n '<div class=\"pr-date\">'+fecha+'<br>'+hora+'<\/div>' +\n '<\/div>' +\n cuerpo + resumen +\n '<div class=\"pr-footer\">Generado el '+fecha+' a las '+hora+' \u00b7 Beauty ads \u2014 Calculadora de Incentivos<\/div>';\n\n window.print();\n }\n\n calcP();\n renderEmpleadas();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculadora de Incentivos \u2014 Beauty ads B Beauty ads Calculadora de Incentivos Sistema de recompensas para tu centro de est\u00e9tica avanzada Productos Servicios Venta de productos Venta total cobrada al cliente (con IVA incluido) \u2014 \u20ac IVA aplicado 4% 10% 21% % de comisi\u00f3n sobre venta neta (sin IVA) 5% 7% 10% La comisi\u00f3n se […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3"}],"version-history":[{"count":4,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages\/3\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3,"date":"2026-05-11T10:41:38","date_gmt":"2026-05-11T10:41:38","guid":{"rendered":"https:\/\/incentivos.beautyads.es\/?page_id=3"},"modified":"2026-05-11T11:57:07","modified_gmt":"2026-05-11T11:57:07","slug":"privacy-policy","status":"publish","type":"page","link":"https:\/\/incentivos.beautyads.es\/","title":{"rendered":"Calculadora de Incentivos"},"content":{"rendered":"\n\n\n\n \n \n Calculadora de Incentivos \u2014 Beauty ads<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=League+Spartan:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\n <style>\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --rose: #f2ddd8;\n --rose-mid: #e8c8c0;\n --rose-deep: #d4a89a;\n --navy: #1a1f4e;\n --navy-mid: #2a3170;\n --coral: #e8735a;\n --coral-light:#faeae6;\n --white: #ffffff;\n --text: #1a1f4e;\n --text2: #5a5f7a;\n --text3: #9a9db5;\n --border: rgba(26,31,78,0.10);\n --border2: rgba(26,31,78,0.18);\n --radius: 14px;\n --radius-sm: 9px;\n --shadow: 0 2px 8px rgba(26,31,78,0.08), 0 8px 24px rgba(26,31,78,0.05);\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: var(--rose);\n color: var(--text);\n min-height: 100vh;\n padding: 2.5rem 1rem;\n }\n\n .wrapper { max-width: 700px; margin: 0 auto; }\n\n \/* Header *\/\n .header { text-align: center; margin-bottom: 2.5rem; }\n .brand {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: var(--navy);\n color: var(--rose);\n padding: 10px 22px 10px 14px;\n border-radius: 999px;\n margin-bottom: 1rem;\n }\n .brand-icon {\n width: 32px; height: 32px;\n background: var(--coral);\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-family: 'League Spartan', sans-serif;\n font-size: 16px; font-weight: 700;\n color: var(--white);\n }\n .brand-name {\n font-family: 'League Spartan', sans-serif;\n font-size: 15px; font-weight: 600;\n letter-spacing: .04em;\n color: var(--rose);\n }\n .header h1 {\n font-family: 'League Spartan', sans-serif;\n font-size: 2rem; font-weight: 700;\n color: var(--navy);\n letter-spacing: -0.01em;\n margin-bottom: 6px;\n }\n .header p { font-size: 13px; color: var(--text2); font-weight: 400; }\n\n \/* Tabs *\/\n .tabs {\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 4px;\n background: var(--rose-mid);\n border-radius: var(--radius);\n padding: 4px;\n margin-bottom: 1.5rem;\n }\n .tab {\n padding: 12px 16px; border: none;\n background: transparent; cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 600;\n color: var(--text2);\n border-radius: calc(var(--radius) - 2px);\n transition: all .2s;\n display: flex; align-items: center; justify-content: center; gap: 8px;\n letter-spacing: .02em;\n }\n .tab svg { width: 16px; height: 16px; }\n .tab.active {\n background: var(--navy);\n color: var(--rose);\n box-shadow: var(--shadow);\n }\n\n .section { display: none; }\n .section.active { display: block; }\n\n \/* Cards *\/\n .card {\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 1.5rem;\n margin-bottom: 1rem;\n box-shadow: var(--shadow);\n }\n .card-title {\n font-family: 'League Spartan', sans-serif;\n font-size: 12px; font-weight: 700;\n color: var(--navy);\n text-transform: uppercase;\n letter-spacing: .08em;\n margin-bottom: 1.25rem;\n display: flex; align-items: center; gap: 8px;\n }\n .card-title svg { width: 15px; height: 15px; color: var(--coral); }\n .card-title .dot {\n width: 6px; height: 6px;\n background: var(--coral);\n border-radius: 50%;\n }\n\n \/* Info card *\/\n .info-card {\n background: var(--rose);\n border-radius: var(--radius);\n padding: 1rem 1.25rem;\n margin-bottom: 1rem;\n font-size: 13px; line-height: 1.7;\n color: var(--text2);\n border-left: 3px solid var(--coral);\n }\n .info-card strong { color: var(--navy); font-weight: 600; }\n\n \/* Fields *\/\n .field { margin-bottom: 1.1rem; }\n .field:last-child { margin-bottom: 0; }\n .field label {\n display: block;\n font-family: 'League Spartan', sans-serif;\n font-size: 11px; font-weight: 600;\n color: var(--text2);\n margin-bottom: 6px;\n letter-spacing: .05em;\n text-transform: uppercase;\n }\n .field input {\n width: 100%;\n padding: 10px 14px;\n font-family: 'Poppins', sans-serif;\n font-size: 15px;\n border: 1.5px solid var(--border2);\n border-radius: var(--radius-sm);\n background: var(--white);\n color: var(--navy);\n transition: border-color .15s, box-shadow .15s;\n }\n .field input:focus {\n outline: none;\n border-color: var(--coral);\n box-shadow: 0 0 0 3px rgba(232,115,90,0.12);\n }\n .field .note { font-size: 11px; color: var(--text3); margin-top: 5px; }\n .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }\n\n \/* Pills *\/\n .pill-group { display: flex; gap: 6px; flex-wrap: wrap; }\n .pill {\n padding: 7px 16px;\n border: 1.5px solid var(--border2);\n border-radius: 999px;\n background: transparent;\n cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n font-size: 13px; font-weight: 600;\n color: var(--text2);\n transition: all .15s;\n }\n .pill.sel { background: var(--navy); color: var(--rose); border-color: var(--navy); }\n .pill:hover:not(.sel) { border-color: var(--coral); color: var(--coral); }\n\n \/* Results *\/\n .result-line {\n display: flex; justify-content: space-between; align-items: center;\n padding: 9px 0;\n border-bottom: 1px solid var(--border);\n font-size: 13px;\n }\n .result-line:last-child { border-bottom: none; }\n .result-line .lbl { color: var(--text2); }\n .result-line .val { font-weight: 600; color: var(--navy); }\n\n .total-box {\n background: var(--navy);\n border-radius: var(--radius-sm);\n padding: 1rem 1.25rem;\n display: flex; justify-content: space-between; align-items: center;\n margin-top: 12px;\n }\n .total-box .lbl { font-family: 'League Spartan', sans-serif; font-size: 13px; font-weight: 600; color: var(--rose-mid); letter-spacing: .03em; }\n .total-box .val { font-family: 'League Spartan', sans-serif; font-size: 28px; font-weight: 700; color: var(--rose); }\n\n \/* Alerts *\/\n .alert {\n border-radius: var(--radius-sm);\n padding: 10px 14px;\n font-size: 12px;\n margin-top: 12px;\n display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;\n }\n .alert svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }\n .alert-amber { background: #fff4e6; color: #92400e; }\n .alert-green { background: var(--coral-light); color: #8b2a14; }\n\n .c-coral { color: var(--coral); }\n .c-navy { color: var(--navy); }\n .c-muted { color: var(--text2); }\n .c-red { color: #c0392b; }\n\n \/* Tier table *\/\n .tier-table { width: 100%; border-collapse: collapse; font-size: 13px; }\n .tier-table th {\n text-align: left;\n font-family: 'League Spartan', sans-serif;\n font-size: 10px; font-weight: 700;\n text-transform: uppercase; letter-spacing: .06em;\n color: var(--text3);\n padding: 0 0 10px 0;\n border-bottom: 1px solid var(--border);\n }\n .tier-table td { padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--navy); font-size: 13px; }\n .tier-table tr:last-child td { border-bottom: none; }\n .tier-table tr.active-row td {\n background: var(--rose);\n color: var(--navy);\n font-weight: 600;\n padding: 8px 10px;\n }\n .tier-table tr.active-row td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }\n .tier-table tr.active-row td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }\n\n \/* Employee cards *\/\n .emp-card {\n background: var(--white);\n border: 1.5px solid var(--border);\n border-radius: var(--radius);\n padding: 1.25rem;\n margin-bottom: 12px;\n box-shadow: var(--shadow);\n transition: border-color .2s;\n }\n .emp-card:hover { border-color: var(--rose-deep); }\n .emp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 1.1rem; }\n .avatar {\n width: 40px; height: 40px; border-radius: 50%;\n background: var(--navy);\n display: flex; align-items: center; justify-content: center;\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 700;\n color: var(--rose);\n flex-shrink: 0;\n }\n .emp-name-input {\n flex: 1;\n padding: 8px 12px;\n font-family: 'Poppins', sans-serif;\n font-size: 14px; font-weight: 500;\n border: 1.5px solid var(--border);\n border-radius: var(--radius-sm);\n background: var(--rose);\n color: var(--navy);\n transition: border-color .15s;\n }\n .emp-name-input:focus { outline: none; border-color: var(--coral); background: var(--white); }\n\n .btn-remove {\n background: none; border: none; cursor: pointer;\n color: var(--text3); padding: 6px;\n border-radius: 6px; transition: all .15s;\n display: flex; align-items: center;\n }\n .btn-remove:hover { color: var(--coral); background: var(--coral-light); }\n .btn-remove svg { width: 16px; height: 16px; }\n\n .pct-free-wrap { display: flex; align-items: center; gap: 10px; }\n .pct-free-wrap input { width: 90px; text-align: center; font-size: 20px !important; font-weight: 700 !important; padding: 10px !important; color: var(--navy) !important; }\n .pct-free-wrap .pct-sym { font-family: 'League Spartan', sans-serif; font-size: 26px; font-weight: 300; color: var(--rose-deep); }\n .pct-free-wrap .pct-hint { font-size: 11px; color: var(--text3); line-height: 1.5; }\n\n .btn-add {\n width: 100%; padding: 12px;\n border: 2px dashed var(--rose-deep);\n border-radius: var(--radius);\n background: transparent; cursor: pointer;\n font-family: 'League Spartan', sans-serif;\n font-size: 13px; font-weight: 600;\n color: var(--text2);\n display: flex; align-items: center; justify-content: center; gap: 8px;\n transition: all .15s; margin-top: 4px;\n letter-spacing: .03em;\n }\n .btn-add:hover { background: var(--white); border-color: var(--coral); color: var(--coral); }\n .btn-add svg { width: 16px; height: 16px; }\n\n \/* PDF button *\/\n .btn-pdf {\n width: 100%; margin-top: 1.25rem;\n padding: 15px 20px;\n background: var(--coral);\n color: var(--white);\n border: none; border-radius: var(--radius);\n font-family: 'League Spartan', sans-serif;\n font-size: 15px; font-weight: 700;\n letter-spacing: .04em;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center; gap: 10px;\n transition: background .18s, transform .1s;\n box-shadow: 0 4px 16px rgba(232,115,90,0.35);\n }\n .btn-pdf:hover { background: #d4634a; }\n .btn-pdf:active { transform: scale(0.99); }\n .btn-pdf svg { width: 18px; height: 18px; }\n\n .divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }\n #pdf-report { display: none; }\n\n @media (max-width: 500px) {\n .grid2 { grid-template-columns: 1fr; }\n .header h1 { font-size: 1.6rem; }\n .total-box .val { font-size: 22px; }\n }\n\n \/* ===== PRINT \/ PDF ===== *\/\n @media print {\n * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\n\n body { background: #fff !important; padding: 20px !important; font-family: 'Poppins', sans-serif; }\n .wrapper { max-width: 100% !important; }\n\n .header, .tabs, .section, .btn-pdf, .btn-add { display: none !important; }\n #pdf-report { display: block !important; }\n\n .pr-header {\n display: flex; justify-content: space-between; align-items: flex-start;\n padding-bottom: 16px; margin-bottom: 24px;\n border-bottom: 3px solid #1a1f4e;\n }\n .pr-brand {\n display: flex; align-items: center; gap: 10px; margin-bottom: 6px;\n }\n .pr-brand-circle {\n width: 30px; height: 30px; border-radius: 50%;\n background: #e8735a !important;\n display: flex; align-items: center; justify-content: center;\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 700; color: #fff;\n }\n .pr-brand-name {\n font-family: 'League Spartan', sans-serif;\n font-size: 14px; font-weight: 700; color: #1a1f4e;\n letter-spacing: .04em;\n }\n .pr-title {\n font-family: 'League Spartan', sans-serif;\n font-size: 22px; font-weight: 700; color: #1a1f4e;\n }\n .pr-subtitle { font-size: 12px; color: #5a5f7a; margin-top: 3px; }\n .pr-date { font-size: 11px; color: #9a9db5; text-align: right; line-height: 1.6; }\n\n .pr-emp {\n border: 1px solid #e0d8d5; border-radius: 10px;\n padding: 16px; margin-bottom: 14px; page-break-inside: avoid;\n }\n .pr-emp-name {\n font-family: 'League Spartan', sans-serif;\n font-size: 15px; font-weight: 700; color: #1a1f4e;\n margin-bottom: 12px; padding-bottom: 8px;\n border-bottom: 1px solid #ede8e5;\n }\n .pr-row {\n display: flex; justify-content: space-between;\n font-size: 12px; padding: 6px 0;\n border-bottom: 1px solid #f5f0ee;\n }\n .pr-row:last-of-type { border-bottom: none; }\n .pr-lbl { color: #5a5f7a; }\n .pr-val { font-weight: 600; color: #1a1f4e; }\n .pr-val.coral { color: #e8735a; }\n .pr-val.navy { color: #1a1f4e; }\n .pr-val.red { color: #c0392b; }\n .pr-val.muted { color: #9a9db5; }\n\n .pr-total {\n background: #1a1f4e !important;\n border-radius: 8px; padding: 10px 16px;\n display: flex; justify-content: space-between; align-items: center;\n margin-top: 10px;\n }\n .pr-total-lbl {\n font-family: 'League Spartan', sans-serif;\n font-size: 12px; font-weight: 600; color: #f2ddd8;\n }\n .pr-total-val {\n font-family: 'League Spartan', sans-serif;\n font-size: 22px; font-weight: 700; color: #f2ddd8;\n }\n\n .pr-no-incentivo {\n background: #fff4e6 !important; border-radius: 6px;\n padding: 8px 12px; font-size: 12px; color: #92400e; margin-top: 10px;\n }\n\n .pr-summary {\n margin-top: 28px; border-top: 2px solid #1a1f4e;\n padding-top: 18px; page-break-inside: avoid;\n }\n .pr-summary-title {\n font-family: 'League Spartan', sans-serif;\n font-size: 11px; font-weight: 700;\n text-transform: uppercase; letter-spacing: .08em;\n color: #1a1f4e; margin-bottom: 12px;\n }\n .pr-summary-row {\n display: flex; justify-content: space-between;\n font-size: 13px; padding: 7px 0;\n border-bottom: 1px solid #ede8e5;\n }\n .pr-summary-row:last-of-type { border-bottom: none; }\n .pr-summary-total {\n display: flex; justify-content: space-between; align-items: center;\n padding: 12px 16px;\n background: #1a1f4e !important;\n border-radius: 8px; margin-top: 12px;\n font-family: 'League Spartan', sans-serif;\n font-size: 18px; font-weight: 700;\n color: #f2ddd8;\n }\n\n .pr-footer {\n margin-top: 32px; font-size: 10px; color: #9a9db5;\n text-align: center;\n border-top: 1px solid #ede8e5; padding-top: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrapper\">\n\n <div class=\"header\">\n <div class=\"brand\">\n <div class=\"brand-icon\">B<\/div>\n <span class=\"brand-name\">Beauty ads<\/span>\n <\/div>\n <h1>Calculadora de Incentivos<\/h1>\n <p>Sistema de recompensas para tu centro de est\u00e9tica avanzada<\/p>\n <\/div>\n\n <div class=\"tabs\">\n <button class=\"tab active\" onclick=\"switchTab('productos',this)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z\"\/><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><path d=\"M16 10a4 4 0 0 1-8 0\"\/><\/svg>\n Productos\n <\/button>\n <button class=\"tab\" onclick=\"switchTab('servicios',this)\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\"\/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"\/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"\/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"\/><\/svg>\n Servicios\n <\/button>\n <\/div>\n\n \n <div id=\"sec-productos\" class=\"section active\">\n\n <div class=\"card\">\n <div class=\"card-title\"><div class=\"dot\"><\/div> Venta de productos<\/div>\n <div class=\"field\">\n <label>Venta total cobrada al cliente (con IVA incluido) \u2014 \u20ac<\/label>\n <input type=\"number\" id=\"p-bruta\" value=\"1500\" min=\"0\" step=\"10\" oninput=\"calcP()\">\n <\/div>\n <div class=\"field\">\n <label>IVA aplicado<\/label>\n <div class=\"pill-group\" id=\"iva-btns\">\n <button class=\"pill\" onclick=\"setIVA(4,this)\">4%<\/button>\n <button class=\"pill\" onclick=\"setIVA(10,this)\">10%<\/button>\n <button class=\"pill sel\" onclick=\"setIVA(21,this)\">21%<\/button>\n <\/div>\n <\/div>\n <div class=\"field\">\n <label>% de comisi\u00f3n sobre venta neta (sin IVA)<\/label>\n <div class=\"pill-group\" id=\"pcom-btns\">\n <button class=\"pill sel\" onclick=\"setPcom(5,this)\">5%<\/button>\n <button class=\"pill\" onclick=\"setPcom(7,this)\">7%<\/button>\n <button class=\"pill\" onclick=\"setPcom(10,this)\">10%<\/button>\n <\/div>\n <p class=\"note\">La comisi\u00f3n se aplica siempre sobre el importe neto, descontado el IVA<\/p>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><div class=\"dot\"><\/div> Desglose<\/div>\n <div class=\"result-line\"><span class=\"lbl\">Venta bruta (con IVA)<\/span><span class=\"val\" id=\"pd-bruta\">\u2014<\/span><\/div>\n <div class=\"result-line\"><span class=\"lbl\">IVA descontado<\/span><span class=\"val c-red\" id=\"pd-iva\">\u2014<\/span><\/div>\n <div class=\"result-line\"><span class=\"lbl\">Venta neta \u2014 base de comisi\u00f3n<\/span><span class=\"val c-navy\" id=\"pd-neta\">\u2014<\/span><\/div>\n <div class=\"result-line\"><span class=\"lbl\" id=\"pd-com-lbl\">Comisi\u00f3n (5% sobre neto)<\/span><span class=\"val c-coral\" id=\"pd-com\">\u2014<\/span><\/div>\n <div class=\"total-box\">\n <span class=\"lbl\">Incentivo a pagar<\/span>\n <span class=\"val\" id=\"pd-total\">\u2014<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><div class=\"dot\"><\/div> Tabla de referencia \u2014 venta neta<\/div>\n <table class=\"tier-table\">\n <thead><tr><th>Venta neta<\/th><th>5%<\/th><th>7%<\/th><th>10%<\/th><\/tr><\/thead>\n <tbody id=\"tier-body\"><\/tbody>\n <\/table>\n <\/div>\n\n <\/div>\n\n \n <div id=\"sec-servicios\" class=\"section\">\n\n <div class=\"info-card\">\n <strong>C\u00f3mo funciona:<\/strong> introduce la base (lo que debe cubrir cada empleada) y lo que ha generado ese mes. Si lo generado supera la base, el incentivo se aplica sobre ese excedente con el porcentaje que t\u00fa decidas libremente.\n <\/div>\n\n <div id=\"empleadas-wrap\"><\/div>\n\n <button class=\"btn-add\" onclick=\"addEmpleada()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><line x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\/><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><\/svg>\n A\u00f1adir empleada\n <\/button>\n\n <button class=\"btn-pdf\" onclick=\"descargarPDF()\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n Descargar informe PDF\n <\/button>\n <\/div>\n\n <div id=\"pdf-report\"><\/div>\n\n <\/div>\n\n <script>\n let ivaVal = 21, pcomVal = 5;\n let empleadas = [{ id: 1, nombre: 'Catalina', base: 4500, generado: 6000, pct: 3 }];\n let nextId = 2;\n\n function fmt(n) {\n return '\u20ac' + parseFloat(n).toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n }\n\n function switchTab(name, btn) {\n document.querySelectorAll('.tab').forEach(b => b.classList.remove('active'));\n document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));\n btn.classList.add('active');\n document.getElementById('sec-' + name).classList.add('active');\n }\n\n function setIVA(v, btn) {\n ivaVal = v;\n document.querySelectorAll('#iva-btns .pill').forEach(b => b.classList.remove('sel'));\n btn.classList.add('sel'); calcP();\n }\n function setPcom(v, btn) {\n pcomVal = v;\n document.querySelectorAll('#pcom-btns .pill').forEach(b => b.classList.remove('sel'));\n btn.classList.add('sel'); calcP();\n }\n\n function calcP() {\n const bruta = parseFloat(document.getElementById('p-bruta').value) || 0;\n const neta = bruta \/ (1 + ivaVal \/ 100);\n const ivaA = bruta - neta;\n const com = neta * pcomVal \/ 100;\n document.getElementById('pd-bruta').textContent = fmt(bruta);\n document.getElementById('pd-iva').textContent = '\u2212 ' + fmt(ivaA);\n document.getElementById('pd-neta').textContent = fmt(neta);\n document.getElementById('pd-com-lbl').textContent = 'Comisi\u00f3n (' + pcomVal + '% sobre neto)';\n document.getElementById('pd-com').textContent = fmt(com);\n document.getElementById('pd-total').textContent = fmt(com);\n buildTiers(neta);\n }\n\n function buildTiers(neta) {\n const tramos = [300,500,750,1000,1500,2000,3000,5000,7500,10000];\n document.getElementById('tier-body').innerHTML = tramos.map((v,i) => {\n const next = tramos[i+1] || Infinity;\n const active = neta >= v && neta < next;\n return '<tr class=\"'+(active?'active-row':'')+'\">' +\n '<td>'+fmt(v)+(active?' \u25c0':'')+'<\/td>' +\n '<td>'+fmt(v*.05)+'<\/td><td>'+fmt(v*.07)+'<\/td><td>'+fmt(v*.10)+'<\/td><\/tr>';\n }).join('');\n }\n\n function renderEmpleadas() {\n document.getElementById('empleadas-wrap').innerHTML = empleadas.map(e => {\n const exc = Math.max(0, e.generado - e.base);\n const supera = e.generado > e.base;\n const inc = exc * e.pct \/ 100;\n const initials= e.nombre.trim().split(' ').map(p=>p[0]).join('').slice(0,2).toUpperCase()||'?';\n\n const alertH = !supera\n ? '<div class=\"alert alert-amber\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg> No supera la base \u2014 no hay excedente, no se genera incentivo<\/div>'\n : '<div class=\"alert alert-green\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg> Supera la base en '+fmt(exc)+'<\/div>';\n\n const desg = supera\n ? '<hr class=\"divider\">' +\n '<div class=\"result-line\"><span class=\"lbl\">Base (coste a cubrir)<\/span><span class=\"val\">'+fmt(e.base)+'<\/span><\/div>' +\n '<div class=\"result-line\"><span class=\"lbl\">Generado en servicios<\/span><span class=\"val c-navy\">'+fmt(e.generado)+'<\/span><\/div>' +\n '<div class=\"result-line\"><span class=\"lbl\">Excedente sobre la base<\/span><span class=\"val c-muted\">'+fmt(exc)+'<\/span><\/div>' +\n '<div class=\"result-line\"><span class=\"lbl\">Incentivo ('+e.pct+'% sobre excedente)<\/span><span class=\"val c-coral\">'+fmt(inc)+'<\/span><\/div>' +\n '<div class=\"total-box\"><span class=\"lbl\">Incentivo a pagar<\/span><span class=\"val\">'+fmt(inc)+'<\/span><\/div>'\n : '';\n\n return '<div class=\"emp-card\">' +\n '<div class=\"emp-header\">' +\n '<div class=\"avatar\">'+initials+'<\/div>' +\n '<input class=\"emp-name-input\" value=\"'+e.nombre+'\" placeholder=\"Nombre empleada\" oninput=\"updNombre('+e.id+',this.value)\">' +\n '<button class=\"btn-remove\" onclick=\"removeEmp('+e.id+')\" aria-label=\"Eliminar\">' +\n '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>' +\n '<\/button>' +\n '<\/div>' +\n '<div class=\"grid2\">' +\n '<div class=\"field\"><label>Base \u2014 \u20ac (coste a cubrir)<\/label><input type=\"number\" value=\"'+e.base+'\" min=\"0\" step=\"50\" oninput=\"updVal('+e.id+',\\'base\\',this.value)\"><\/div>' +\n '<div class=\"field\"><label>Generado en servicios \u2014 \u20ac<\/label><input type=\"number\" value=\"'+e.generado+'\" min=\"0\" step=\"10\" oninput=\"updVal('+e.id+',\\'generado\\',this.value)\"><\/div>' +\n '<\/div>' +\n '<div class=\"field\">' +\n '<label>% de incentivo sobre el excedente<\/label>' +\n '<div class=\"pct-free-wrap\">' +\n '<input type=\"number\" value=\"'+e.pct+'\" min=\"0\" max=\"100\" step=\"0.5\" oninput=\"updVal('+e.id+',\\'pct\\',this.value)\">' +\n '<span class=\"pct-sym\">%<\/span>' +\n '<span class=\"pct-hint\">Escribe el porcentaje<br>que quieras aplicar<\/span>' +\n '<\/div>' +\n '<\/div>' +\n alertH + desg +\n '<\/div>';\n }).join('');\n }\n\n function updNombre(id,val){ const e=empleadas.find(e=>e.id===id); if(e){e.nombre=val;renderEmpleadas();} }\n function updVal(id,field,val){ const e=empleadas.find(e=>e.id===id); if(e){e[field]=parseFloat(val)||0;renderEmpleadas();} }\n function addEmpleada(){ empleadas.push({id:nextId++,nombre:'Nueva empleada',base:0,generado:0,pct:5});renderEmpleadas(); }\n function removeEmp(id){ empleadas=empleadas.filter(e=>e.id!==id);renderEmpleadas(); }\n\n function descargarPDF() {\n const ahora = new Date();\n const fecha = ahora.toLocaleDateString('es-ES',{day:'2-digit',month:'long',year:'numeric'});\n const hora = ahora.toLocaleTimeString('es-ES',{hour:'2-digit',minute:'2-digit'});\n\n let totalInc=0, totalGen=0, conInc=0;\n\n const cuerpo = empleadas.map(e => {\n const exc = Math.max(0,e.generado-e.base);\n const supera = e.generado > e.base;\n const inc = exc * e.pct \/ 100;\n totalGen += e.generado;\n if(supera){ totalInc+=inc; conInc++; }\n\n const filas = supera\n ? '<div class=\"pr-row\"><span class=\"pr-lbl\">Base (coste a cubrir)<\/span><span class=\"pr-val\">'+fmt(e.base)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Generado en servicios<\/span><span class=\"pr-val navy\">'+fmt(e.generado)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Excedente sobre la base<\/span><span class=\"pr-val muted\">'+fmt(exc)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Porcentaje de incentivo aplicado<\/span><span class=\"pr-val\">'+e.pct+'%<\/span><\/div>' +\n '<div class=\"pr-total\"><span class=\"pr-total-lbl\">Incentivo a pagar<\/span><span class=\"pr-total-val\">'+fmt(inc)+'<\/span><\/div>'\n : '<div class=\"pr-row\"><span class=\"pr-lbl\">Base (coste a cubrir)<\/span><span class=\"pr-val\">'+fmt(e.base)+'<\/span><\/div>' +\n '<div class=\"pr-row\"><span class=\"pr-lbl\">Generado en servicios<\/span><span class=\"pr-val red\">'+fmt(e.generado)+'<\/span><\/div>' +\n '<div class=\"pr-no-incentivo\">No supera la base \u2014 sin incentivo este per\u00edodo<\/div>';\n\n return '<div class=\"pr-emp\"><div class=\"pr-emp-name\">'+e.nombre+'<\/div>'+filas+'<\/div>';\n }).join('');\n\n const resumen =\n '<div class=\"pr-summary\">' +\n '<div class=\"pr-summary-title\">Resumen del periodo<\/div>' +\n '<div class=\"pr-summary-row\"><span>Total empleadas<\/span><strong>'+empleadas.length+'<\/strong><\/div>' +\n '<div class=\"pr-summary-row\"><span>Facturaci\u00f3n total generada<\/span><strong>'+fmt(totalGen)+'<\/strong><\/div>' +\n '<div class=\"pr-summary-row\"><span>Empleadas que superan la base<\/span><strong>'+conInc+' de '+empleadas.length+'<\/strong><\/div>' +\n '<div class=\"pr-summary-total\"><span>Total incentivos a pagar<\/span><span>'+fmt(totalInc)+'<\/span><\/div>' +\n '<\/div>';\n\n document.getElementById('pdf-report').innerHTML =\n '<div class=\"pr-header\">' +\n '<div>' +\n '<div class=\"pr-brand\"><div class=\"pr-brand-circle\">B<\/div><span class=\"pr-brand-name\">Beauty ads<\/span><\/div>' +\n '<div class=\"pr-title\">Informe de Incentivos<\/div>' +\n '<div class=\"pr-subtitle\">M\u00f3dulo de servicios \u00b7 c\u00e1lculo sobre excedente de base<\/div>' +\n '<\/div>' +\n '<div class=\"pr-date\">'+fecha+'<br>'+hora+'<\/div>' +\n '<\/div>' +\n cuerpo + resumen +\n '<div class=\"pr-footer\">Generado el '+fecha+' a las '+hora+' \u00b7 Beauty ads \u2014 Calculadora de Incentivos<\/div>';\n\n window.print();\n }\n\n calcP();\n renderEmpleadas();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculadora de Incentivos \u2014 Beauty ads B Beauty ads Calculadora de Incentivos Sistema de recompensas para tu centro de est\u00e9tica avanzada Productos Servicios Venta de productos Venta total cobrada al cliente (con IVA incluido) \u2014 \u20ac IVA aplicado 4% 10% 21% % de comisi\u00f3n sobre venta neta (sin IVA) 5% 7% 10% La comisi\u00f3n se […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-3","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages\/3","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3"}],"version-history":[{"count":4,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages\/3\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=\/wp\/v2\/pages\/3\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/incentivos.beautyads.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}