{"id":70687,"date":"2026-03-30T12:11:21","date_gmt":"2026-03-30T10:11:21","guid":{"rendered":"https:\/\/tickelia.com\/demo_2023\/?p=70687"},"modified":"2026-03-30T12:17:05","modified_gmt":"2026-03-30T10:17:05","slug":"desglose-factura","status":"publish","type":"post","link":"https:\/\/tickelia.com\/demo_2023\/blog\/actualidad\/desglose-factura\/","title":{"rendered":"Desglose Factura"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>&#8212; VERSI\u00d3N 1 &#8212;<\/p>\n\n\n<style>\r\n    * {\r\n        box-sizing: border-box;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    body {\r\n        min-height: 100vh;\r\n        padding: 20px;\r\n    }\r\n\r\n    .app-header {\r\n        text-align: center;\r\n        padding: 30px 20px 10px;\r\n        max-width: 1100px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .app-header h1 {\r\n        font-size: 2rem;\r\n        color: #1a1a2e;\r\n        font-weight: 800;\r\n        letter-spacing: -0.5px;\r\n    }\r\n\r\n    .app-header h1 span { color: #00c8b3; }\r\n\r\n    .app-header p {\r\n        margin-top: 6px;\r\n    }\r\n\r\n    .main-layout {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n        grid-template-rows: auto auto;\r\n        gap: 20px;\r\n        max-width: 1100px;\r\n        margin: 25px auto 0;\r\n    }\r\n\r\n    .card {\r\n        background: #fff;\r\n        border-radius: 16px;\r\n        padding: 28px;\r\n        box-shadow: 0 2px 20px rgba(0,0,0,0.04);\r\n        transition: transform 0.2s, box-shadow 0.2s;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .card:hover {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 8px 30px rgba(0,0,0,0.08);\r\n    }\r\n\r\n    .card::before {\r\n        content: '';\r\n        position: absolute;\r\n        top: 0; left: 0; right: 0;\r\n        height: 4px;\r\n        background: linear-gradient(90deg, #00c8b3, #00e6cf);\r\n        border-radius: 16px 16px 0 0;\r\n    }\r\n\r\n    .card-input   { grid-column: 1; grid-row: 1 \/ 3; }\r\n    .card-results { grid-column: 2; grid-row: 1; }\r\n    .card-chart   { grid-column: 2; grid-row: 2; }\r\n\r\n    .section-title {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        margin-bottom: 22px;\r\n    }\r\n\r\n    .section-icon {\r\n        width: 40px; height: 40px;\r\n        background: linear-gradient(135deg, #00c8b3, #00e6cf);\r\n        border-radius: 10px;\r\n        display: flex; align-items: center; justify-content: center;\r\n        flex-shrink: 0;\r\n    }\r\n\r\n    .section-icon svg { width: 20px; height: 20px; fill: white; }\r\n\r\n    .section-title h3 {\r\n        font-size: 1.05rem;\r\n        color: #1a1a2e;\r\n        font-weight: 700;\r\n    }\r\n\r\n    .section-title h3 small {\r\n        display: block;\r\n        font-size: 0.78rem;\r\n        color: #999;\r\n        font-weight: 400;\r\n        margin-top: 2px;\r\n    }\r\n\r\n    .field-group { margin-bottom: 20px; }\r\n\r\n    .field-group label {\r\n        font-size: 0.82rem;\r\n        font-weight: 600;\r\n        color: #555;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        margin-bottom: 8px;\r\n        display: block;\r\n    }\r\n\r\n    .input-modern { position: relative; }\r\n\r\n    .input-modern input {\r\n        width: 100%;\r\n        padding: 14px 45px 14px 18px;\r\n        border: 2px solid #e8ece9;\r\n        border-radius: 12px;\r\n        font-size: 1.15rem;\r\n        font-weight: 600;\r\n        color: #1a1a2e;\r\n        transition: all 0.25s;\r\n        background: #fafcfb;\r\n    }\r\n\r\n    .input-modern input:focus {\r\n        outline: none;\r\n        border-color: #00c8b3;\r\n        background: #fff;\r\n        box-shadow: 0 0 0 4px rgba(0, 200, 179, 0.1);\r\n    }\r\n\r\n    .input-modern .unit {\r\n        position: absolute;\r\n        right: 16px; top: 50%;\r\n        transform: translateY(-50%);\r\n        font-size: 1rem; color: #aaa; font-weight: 600;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .tax-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }\r\n\r\n    .tax-card {\r\n        background: #f7faf9;\r\n        border: 2px solid #e8ece9;\r\n        border-radius: 14px;\r\n        padding: 16px 18px;\r\n        transition: all 0.25s;\r\n    }\r\n\r\n    .tax-card.active { border-color: #00c8b3; background: #f0faf8; }\r\n    .tax-card.inactive { opacity: 0.5; }\r\n\r\n    .tax-card-header {\r\n        display: flex; align-items: center; gap: 12px;\r\n        margin-bottom: 12px;\r\n    }\r\n\r\n    .toggle-switch {\r\n        position: relative; width: 44px; height: 24px; flex-shrink: 0;\r\n    }\r\n\r\n    .toggle-switch input { opacity: 0; width: 0; height: 0; }\r\n\r\n    .toggle-slider {\r\n        position: absolute;\r\n        cursor: pointer;\r\n        top: 0; left: 0; right: 0; bottom: 0;\r\n        background-color: #ccc;\r\n        transition: 0.3s;\r\n        border-radius: 24px;\r\n    }\r\n\r\n    .toggle-slider::before {\r\n        content: '';\r\n        position: absolute;\r\n        height: 18px; width: 18px;\r\n        left: 3px; bottom: 3px;\r\n        background-color: white;\r\n        transition: 0.3s;\r\n        border-radius: 50%;\r\n        box-shadow: 0 1px 3px rgba(0,0,0,0.2);\r\n    }\r\n\r\n    .toggle-switch input:checked + .toggle-slider {\r\n        background: linear-gradient(135deg, #00c8b3, #00e6cf);\r\n    }\r\n\r\n    .toggle-switch input:checked + .toggle-slider::before {\r\n        transform: translateX(20px);\r\n    }\r\n\r\n    .tax-name { font-weight: 700; color: #1a1a2e; font-size: 0.95rem; }\r\n\r\n    .tax-badge {\r\n        margin-left: auto;\r\n        background: #00c8b3; color: white;\r\n        padding: 3px 10px; border-radius: 20px;\r\n        font-size: 0.75rem; font-weight: 600;\r\n    }\r\n\r\n    .tax-card.inactive .tax-badge { background: #ccc; }\r\n\r\n    .tax-card-body { display: flex; gap: 12px; align-items: center; }\r\n\r\n    .tax-pct-wrap { position: relative; width: 85px; flex-shrink: 0; }\r\n\r\n    .tax-pct-wrap input {\r\n        width: 100%;\r\n        padding: 10px 28px 10px 14px;\r\n        border: 2px solid #e0e0e0; border-radius: 10px;\r\n        font-size: 1rem; font-weight: 700; color: #1a1a2e;\r\n        text-align: center; background: #fff; transition: border-color 0.2s;\r\n    }\r\n\r\n    .tax-pct-wrap input:focus { outline: none; border-color: #00c8b3; }\r\n\r\n    .tax-pct-wrap .pct-sign {\r\n        position: absolute; right: 10px; top: 50%;\r\n        transform: translateY(-50%); color: #aaa; font-weight: 600; pointer-events: none;\r\n    }\r\n\r\n    .tax-arrow { color: #ccc; font-size: 1.2rem; }\r\n\r\n    .tax-result { flex: 1; }\r\n\r\n    .tax-result input {\r\n        width: 100%;\r\n        padding: 10px 30px 10px 14px;\r\n        border: 2px solid transparent; border-radius: 10px;\r\n        font-size: 1rem; font-weight: 700; color: #00c8b3;\r\n        background: rgba(0, 200, 179, 0.08); text-align: right;\r\n    }\r\n\r\n    .tax-result .unit {\r\n        position: absolute; right: 12px; top: 50%;\r\n        transform: translateY(-50%); color: #00c8b3; font-weight: 600; pointer-events: none;\r\n    }\r\n\r\n    .results-grid { display: flex; flex-direction: column; gap: 0; }\r\n\r\n    .result-item {\r\n        display: flex; justify-content: space-between; align-items: center;\r\n        padding: 16px 0; border-bottom: 1px solid #f0f0f0;\r\n    }\r\n\r\n    .result-item:last-child { border-bottom: none; }\r\n\r\n    .result-label {\r\n        display: flex; align-items: center; gap: 10px;\r\n        font-size: 0.88rem; color: #777; font-weight: 500;\r\n    }\r\n\r\n    .result-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }\r\n\r\n    .result-value { font-size: 1.3rem; font-weight: 800; color: #1a1a2e; }\r\n\r\n    .result-hero {\r\n        background: linear-gradient(135deg, #00c8b3, #00a89a);\r\n        border-radius: 14px; padding: 22px;\r\n        margin-bottom: 18px; text-align: center; color: white;\r\n        position: relative; overflow: hidden;\r\n    }\r\n\r\n    .result-hero::after {\r\n        content: '';\r\n        position: absolute;\r\n        width: 120px; height: 120px;\r\n        background: rgba(255,255,255,0.08);\r\n        border-radius: 50%; top: -30px; right: -30px;\r\n    }\r\n\r\n    .result-hero .hero-label {\r\n        font-size: 0.8rem; text-transform: uppercase;\r\n        letter-spacing: 1px; opacity: 0.85; margin-bottom: 6px; font-weight: 600;\r\n    }\r\n\r\n    .result-hero .hero-value {\r\n        font-size: 2.2rem; font-weight: 800; letter-spacing: -1px;\r\n    }\r\n\r\n    .result-hero .hero-value small { font-size: 1.2rem; opacity: 0.8; }\r\n\r\n    .tip {\r\n        display: inline-flex; justify-content: center; align-items: center;\r\n        width: 16px; height: 16px;\r\n        background: #e0e0e0; color: #888;\r\n        border-radius: 50%; font-size: 10px; font-weight: 700;\r\n        cursor: help; position: relative; margin-left: 4px; flex-shrink: 0;\r\n    }\r\n\r\n    .result-hero .tip { background: rgba(255,255,255,0.25); color: #fff; }\r\n\r\n    .tip:hover::after {\r\n        content: attr(data-tip);\r\n        position: absolute;\r\n        bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);\r\n        background: #1a1a2e; color: #fff;\r\n        padding: 8px 14px; border-radius: 8px;\r\n        font-size: 11px; white-space: nowrap; font-weight: 400;\r\n        z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .tip:hover::before {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%);\r\n        border-width: 5px; border-style: solid;\r\n        border-color: #1a1a2e transparent transparent transparent; z-index: 50;\r\n    }\r\n\r\n    \/* \u2500\u2500 DONUT mejorado \u2500\u2500 *\/\r\n    .chart-area {\r\n        display: flex; align-items: center;\r\n        gap: 25px; justify-content: center;\r\n    }\r\n\r\n    .donut-wrap {\r\n        position: relative; width: 180px; height: 180px; flex-shrink: 0;\r\n    }\r\n\r\n    .donut-wrap svg {\r\n        width: 100%; height: 100%;\r\n        transform: rotate(-90deg);\r\n        overflow: visible;\r\n    }\r\n\r\n    \/* Todos los arcos comparten los mismos atributos base *\/\r\n    .donut-wrap circle {\r\n        fill: none;\r\n        stroke-width: 22;\r\n        cx: 90; cy: 90; r: 68;\r\n        transition: stroke-dasharray 0.55s cubic-bezier(.4,0,.2,1),\r\n                    stroke-dashoffset 0.55s cubic-bezier(.4,0,.2,1);\r\n    }\r\n\r\n    .donut-center {\r\n        position: absolute; top: 50%; left: 50%;\r\n        transform: translate(-50%, -50%); text-align: center;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .donut-center .dc-val {\r\n        font-size: 1.15rem; font-weight: 800; color: #1a1a2e; line-height: 1.1;\r\n    }\r\n\r\n    .donut-center .dc-label {\r\n        font-size: 0.65rem; color: #999;\r\n        text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px;\r\n    }\r\n\r\n    \/* Leyenda *\/\r\n    .chart-legend { display: flex; flex-direction: column; gap: 14px; }\r\n\r\n    .legend-item { display: flex; align-items: center; gap: 10px; }\r\n\r\n    .legend-color { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }\r\n\r\n    .legend-text { font-size: 0.82rem; color: #666; }\r\n\r\n    .legend-text strong { display: block; color: #1a1a2e; font-size: 0.95rem; }\r\n\r\n    \/* Barra apilada *\/\r\n    .bar-section { margin-top: 22px; }\r\n\r\n    .bar-section h4 {\r\n        font-size: 0.78rem; text-transform: uppercase;\r\n        letter-spacing: 0.5px; color: #999; margin-bottom: 12px; font-weight: 600;\r\n    }\r\n\r\n    .stacked-bar {\r\n        display: flex; height: 14px; border-radius: 7px;\r\n        overflow: hidden; background: #e8ece9;\r\n    }\r\n\r\n    .stacked-bar .bar-seg {\r\n        height: 100%; transition: width 0.55s cubic-bezier(.4,0,.2,1);\r\n    }\r\n\r\n    .bar-labels { display: flex; justify-content: space-between; margin-top: 8px; }\r\n\r\n    .bar-label-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: #888; }\r\n\r\n    .bar-label-item .blc { width: 8px; height: 8px; border-radius: 3px; }\r\n\r\n    @media (max-width: 800px) {\r\n        .main-layout { grid-template-columns: 1fr; }\r\n        .card-input, .card-results, .card-chart { grid-column: 1; grid-row: auto; }\r\n        .chart-area { flex-direction: column; }\r\n    }\r\n\r\n    @keyframes fadeUp {\r\n        from { opacity: 0; transform: translateY(20px); }\r\n        to   { opacity: 1; transform: translateY(0); }\r\n    }\r\n\r\n    .card { animation: fadeUp 0.5s ease forwards; opacity: 0; }\r\n    .card:nth-child(2) { animation-delay: 0.1s; }\r\n    .card:nth-child(3) { animation-delay: 0.2s; }\r\n<\/style>\r\n\r\n\r\n<div class=\"app-header\">\r\n    <h1>Calculadora de <span>Facturas<\/span><\/h1>\r\n    <p>Calcula el desglose de tus facturas como aut\u00f3nomo de forma r\u00e1pida y visual<\/p>\r\n<\/div>\r\n\r\n<div class=\"main-layout\">\r\n\r\n    <!-- Panel de Entrada -->\r\n    <div class=\"card card-input\">\r\n        <div class=\"section-title\">\r\n            <div class=\"section-icon\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z\"\/><\/svg>\r\n            <\/div>\r\n            <h3>Datos de la factura <small>Introduce la base imponible y ajusta los impuestos<\/small><\/h3>\r\n        <\/div>\r\n\r\n        <div class=\"field-group\">\r\n            <label>Base imponible<\/label>\r\n            <div class=\"input-modern\">\r\n                <input type=\"number\" id=\"base-imponible\" value=\"4132.23\" step=\"any\" oninput=\"calcular()\">\r\n                <span class=\"unit\">\u20ac<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"section-title\" style=\"margin-top: 8px;\">\r\n            <div class=\"section-icon\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M7.5 4C5.57 4 4 5.57 4 7.5S5.57 11 7.5 11 11 9.43 11 7.5 9.43 4 7.5 4zm0 5C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zm9 4c-1.93 0-3.5 1.57-3.5 3.5S14.57 20 16.5 20s3.5-1.57 3.5-3.5S18.43 13 16.5 13zm0 5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5.41 20L4 18.59 18.59 4 20 5.41 5.41 20z\"\/><\/svg>\r\n            <\/div>\r\n            <h3>Impuestos aplicables <small>Activa o desactiva seg\u00fan tu caso<\/small><\/h3>\r\n        <\/div>\r\n\r\n        <div class=\"tax-cards\">\r\n            <!-- IVA -->\r\n            <div class=\"tax-card active\" id=\"tax-card-iva\">\r\n                <div class=\"tax-card-header\">\r\n                    <label class=\"toggle-switch\">\r\n                        <input type=\"checkbox\" id=\"chk-iva\" checked onchange=\"toggleTax('iva'); calcular()\">\r\n                        <span class=\"toggle-slider\"><\/span>\r\n                    <\/label>\r\n                    <span class=\"tax-name\">IVA<\/span>\r\n                    <span class=\"tax-badge\" id=\"badge-iva\">Activo<\/span>\r\n                <\/div>\r\n                <div class=\"tax-card-body\">\r\n                    <div class=\"tax-pct-wrap\">\r\n                        <input type=\"number\" id=\"pct-iva\" value=\"21\" step=\"any\" oninput=\"calcular()\">\r\n                        <span class=\"pct-sign\">%<\/span>\r\n                    <\/div>\r\n                    <span class=\"tax-arrow\">\u2192<\/span>\r\n                    <div class=\"tax-result input-modern\" style=\"position:relative;\">\r\n                        <input type=\"text\" id=\"val-iva\" readonly>\r\n                        <span class=\"unit\" style=\"color:#00c8b3;\">\u20ac<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- IRPF -->\r\n            <div class=\"tax-card active\" id=\"tax-card-irpf\">\r\n                <div class=\"tax-card-header\">\r\n                    <label class=\"toggle-switch\">\r\n                        <input type=\"checkbox\" id=\"chk-irpf\" checked onchange=\"toggleTax('irpf'); calcular()\">\r\n                        <span class=\"toggle-slider\"><\/span>\r\n                    <\/label>\r\n                    <span class=\"tax-name\">IRPF<\/span>\r\n                    <span class=\"tax-badge\" id=\"badge-irpf\">Activo<\/span>\r\n                <\/div>\r\n                <div class=\"tax-card-body\">\r\n                    <div class=\"tax-pct-wrap\">\r\n                        <input type=\"number\" id=\"pct-irpf\" value=\"15\" step=\"any\" oninput=\"calcular()\">\r\n                        <span class=\"pct-sign\">%<\/span>\r\n                    <\/div>\r\n                    <span class=\"tax-arrow\">\u2192<\/span>\r\n                    <div class=\"tax-result input-modern\" style=\"position:relative;\">\r\n                        <input type=\"text\" id=\"val-irpf\" readonly>\r\n                        <span class=\"unit\" style=\"color:#00c8b3;\">\u20ac<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Panel de Resultados -->\r\n    <div class=\"card card-results\">\r\n        <div class=\"section-title\">\r\n            <div class=\"section-icon\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm0-4h-2V7h2v8z\"\/><\/svg>\r\n            <\/div>\r\n            <h3>Resumen <small>Desglose de tu factura<\/small><\/h3>\r\n        <\/div>\r\n\r\n        <div class=\"result-hero\">\r\n            <div class=\"hero-label\">Importe total factura <span class=\"tip\" data-tip=\"Lo que pagar\u00e1 tu cliente: Base + IVA - IRPF\">?<\/span><\/div>\r\n            <div class=\"hero-value\" id=\"hero-total\">4.300,00 <small>\u20ac<\/small><\/div>\r\n        <\/div>\r\n\r\n        <div class=\"results-grid\">\r\n            <div class=\"result-item\">\r\n                <span class=\"result-label\">\r\n                    <span class=\"result-dot\" style=\"background:#00c8b3;\"><\/span>\r\n                    Precio con IVA\r\n                    <span class=\"tip\" data-tip=\"Base imponible + Importe de IVA\">?<\/span>\r\n                <\/span>\r\n                <span class=\"result-value\" id=\"res-precio-iva\">0,00 \u20ac<\/span>\r\n            <\/div>\r\n            <div class=\"result-item\">\r\n                <span class=\"result-label\">\r\n                    <span class=\"result-dot\" style=\"background:#ff7675;\"><\/span>\r\n                    Retenci\u00f3n IRPF\r\n                    <span class=\"tip\" data-tip=\"Importe retenido a cuenta del IRPF\">?<\/span>\r\n                <\/span>\r\n                <span class=\"result-value\" id=\"res-irpf-display\" style=\"color:#ff7675;\">-0,00 \u20ac<\/span>\r\n            <\/div>\r\n            <div class=\"result-item\" style=\"padding-bottom:8px;\">\r\n                <span class=\"result-label\">\r\n                    <span class=\"result-dot\" style=\"background:#6c5ce7;\"><\/span>\r\n                    Lo que me llevo\r\n                    <span class=\"tip\" data-tip=\"Tu ingreso real: Base Imponible - IRPF\">?<\/span>\r\n                <\/span>\r\n                <span class=\"result-value\" id=\"res-neto\" style=\"color:#6c5ce7;\">0,00 \u20ac<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Panel de Gr\u00e1fico -->\r\n    <div class=\"card card-chart\">\r\n        <div class=\"section-title\">\r\n            <div class=\"section-icon\">\r\n                <svg viewBox=\"0 0 24 24\"><path d=\"M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2 0v9h9c-.47-4.69-4.24-8.47-9-8.94zM13 13v9c4.76-.47 8.53-4.25 9-9h-9z\"\/><\/svg>\r\n            <\/div>\r\n            <h3>Distribuci\u00f3n visual <small>C\u00f3mo se reparte tu factura<\/small><\/h3>\r\n        <\/div>\r\n\r\n        <div class=\"chart-area\">\r\n            <div class=\"donut-wrap\">\r\n                <!--\r\n                    El c\u00edrculo tiene r=68, por lo que CIRC = 2\u03c0\u00d768 \u2248 427.26.\r\n                    Orden de pintado (de atr\u00e1s a adelante):\r\n                      1. bg   \u2192 fondo gris (rellena todo)\r\n                      2. base \u2192 neto en verde  (segmento 1)\r\n                      3. iva  \u2192 IVA en amarillo (segmento 2)\r\n                      4. irpf \u2192 IRPF en rojo    (segmento 3)\r\n                    Los offsets negativos desplazan el inicio de cada arco.\r\n                -->\r\n                <svg viewBox=\"0 0 180 180\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n                    <!-- Fondo -->\r\n                    <circle id=\"donut-bg\"   stroke=\"#e8ece9\"\r\n                            stroke-dasharray=\"427.26 427.26\" stroke-dashoffset=\"0\"><\/circle>\r\n                    <!-- Neto (base - IRPF) -->\r\n                    <circle id=\"donut-base\" stroke=\"#00c8b3\"\r\n                            stroke-dasharray=\"0 427.26\" stroke-dashoffset=\"0\"><\/circle>\r\n                    <!-- IVA -->\r\n                    <circle id=\"donut-iva\"  stroke=\"#fdcb6e\"\r\n                            stroke-dasharray=\"0 427.26\" stroke-dashoffset=\"0\"><\/circle>\r\n                    <!-- IRPF -->\r\n                    <circle id=\"donut-irpf\" stroke=\"#ff7675\"\r\n                            stroke-dasharray=\"0 427.26\" stroke-dashoffset=\"0\"><\/circle>\r\n                <\/svg>\r\n                <div class=\"donut-center\">\r\n                    <div class=\"dc-val\" id=\"donut-center-val\">\u2014<\/div>\r\n                    <div class=\"dc-label\">Total bruto<\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"chart-legend\">\r\n                <div class=\"legend-item\">\r\n                    <span class=\"legend-color\" style=\"background:#00c8b3;\"><\/span>\r\n                    <span class=\"legend-text\">\r\n                        <strong id=\"leg-base-pct\">0%<\/strong>\r\n                        Neto (me llevo)\r\n                    <\/span>\r\n                <\/div>\r\n                <div class=\"legend-item\">\r\n                    <span class=\"legend-color\" style=\"background:#fdcb6e;\"><\/span>\r\n                    <span class=\"legend-text\">\r\n                        <strong id=\"leg-iva-pct\">0%<\/strong>\r\n                        IVA repercutido\r\n                    <\/span>\r\n                <\/div>\r\n                <div class=\"legend-item\">\r\n                    <span class=\"legend-color\" style=\"background:#ff7675;\"><\/span>\r\n                    <span class=\"legend-text\">\r\n                        <strong id=\"leg-irpf-pct\">0%<\/strong>\r\n                        IRPF retenido\r\n                    <\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Barra apilada -->\r\n        <div class=\"bar-section\">\r\n            <h4>Composici\u00f3n del total bruto (Base + IVA)<\/h4>\r\n            <div class=\"stacked-bar\">\r\n                <div class=\"bar-seg\" id=\"bar-neto\"  style=\"background:#00c8b3; width:0%\"><\/div>\r\n                <div class=\"bar-seg\" id=\"bar-irpf\"  style=\"background:#ff7675; width:0%\"><\/div>\r\n                <div class=\"bar-seg\" id=\"bar-iva\"   style=\"background:#fdcb6e; width:0%\"><\/div>\r\n            <\/div>\r\n            <div class=\"bar-labels\">\r\n                <span class=\"bar-label-item\"><span class=\"blc\" style=\"background:#00c8b3;\"><\/span>Neto: <strong id=\"bar-neto-label\">0\u20ac<\/strong><\/span>\r\n                <span class=\"bar-label-item\"><span class=\"blc\" style=\"background:#ff7675;\"><\/span>IRPF: <strong id=\"bar-irpf-label\">0\u20ac<\/strong><\/span>\r\n                <span class=\"bar-label-item\"><span class=\"blc\" style=\"background:#fdcb6e;\"><\/span>IVA: <strong id=\"bar-iva-label\">0\u20ac<\/strong><\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ Radio = 68, cx=cy=90\r\n    const CIRC = 2 * Math.PI * 68; \/\/ \u2248 427.26\r\n\r\n    function fmt(n) {\r\n        return n.toFixed(2).replace('.', ',');\r\n    }\r\n\r\n    function fmtShort(n) {\r\n        if (Math.abs(n) >= 1000) return (n \/ 1000).toFixed(1).replace('.', ',') + 'k';\r\n        return fmt(n);\r\n    }\r\n\r\n    function setArc(id, len, offset) {\r\n        const el = document.getElementById(id);\r\n        el.setAttribute('stroke-dasharray', len.toFixed(3) + ' ' + CIRC.toFixed(3));\r\n        el.setAttribute('stroke-dashoffset', (-offset).toFixed(3));\r\n    }\r\n\r\n    function toggleTax(type) {\r\n        const chk   = document.getElementById('chk-' + type);\r\n        const card  = document.getElementById('tax-card-' + type);\r\n        const badge = document.getElementById('badge-' + type);\r\n        if (chk.checked) {\r\n            card.classList.add('active');\r\n            card.classList.remove('inactive');\r\n            badge.textContent = 'Activo';\r\n            badge.style.background = '#00c8b3';\r\n        } else {\r\n            card.classList.remove('active');\r\n            card.classList.add('inactive');\r\n            badge.textContent = 'Inactivo';\r\n            badge.style.background = '#ccc';\r\n        }\r\n    }\r\n\r\n    function calcular() {\r\n        const base = parseFloat(document.getElementById('base-imponible').value) || 0;\r\n\r\n        const ivaOn  = document.getElementById('chk-iva').checked;\r\n        const irpfOn = document.getElementById('chk-irpf').checked;\r\n\r\n        const pctIva  = parseFloat(document.getElementById('pct-iva').value)  || 0;\r\n        const pctIrpf = parseFloat(document.getElementById('pct-irpf').value) || 0;\r\n\r\n        const impIva  = ivaOn  ? base * pctIva  \/ 100 : 0;\r\n        const impIrpf = irpfOn ? base * pctIrpf \/ 100 : 0;\r\n\r\n        \/\/ Mostrar importes en los inputs de impuestos\r\n        document.getElementById('val-iva').value  = fmt(impIva);\r\n        document.getElementById('val-irpf').value = fmt(impIrpf);\r\n\r\n        const precioConIva  = base + impIva;          \/\/ total bruto (lo que cobra el cliente)\r\n        const totalFactura  = base + impIva - impIrpf; \/\/ lo que paga el cliente\r\n        const neto          = base - impIrpf;          \/\/ lo que me llevo yo\r\n\r\n        \/\/ \u2500\u2500 Resultados \u2500\u2500\r\n        document.getElementById('hero-total').innerHTML      = fmt(totalFactura) + ' <small>\u20ac<\/small>';\r\n        document.getElementById('res-precio-iva').textContent  = fmt(precioConIva) + ' \u20ac';\r\n        document.getElementById('res-irpf-display').textContent = '-' + fmt(impIrpf) + ' \u20ac';\r\n        document.getElementById('res-neto').textContent        = fmt(neto) + ' \u20ac';\r\n\r\n        \/\/ \u2500\u2500 DONUT \u2500\u2500\r\n        \/\/ El donut representa el TOTAL BRUTO (Base + IVA).\r\n        \/\/ Lo dividimos en tres segmentos que suman Base + IVA:\r\n        \/\/   \u00b7 Neto       = Base \u2212 IRPF     \u2192 verde\r\n        \/\/   \u00b7 IRPF       = IRPF            \u2192 rojo\r\n        \/\/   \u00b7 IVA        = IVA             \u2192 amarillo\r\n        \/\/   Neto + IRPF + IVA = Base + IVA \u2713\r\n\r\n        const total = precioConIva > 0 ? precioConIva : 1;\r\n\r\n        const netoLen = (neto    \/ total) * CIRC;\r\n        const irpfLen = (impIrpf \/ total) * CIRC;\r\n        const ivaLen  = (impIva  \/ total) * CIRC;\r\n\r\n        \/\/ Los arcos se encadenan: cada uno empieza donde termina el anterior\r\n        setArc('donut-base', Math.max(netoLen, 0), 0);\r\n        setArc('donut-irpf', Math.max(irpfLen, 0), netoLen);\r\n        setArc('donut-iva',  Math.max(ivaLen,  0), netoLen + irpfLen);\r\n\r\n        \/\/ Centro del donut\r\n        document.getElementById('donut-center-val').textContent = fmtShort(precioConIva) + '\u20ac';\r\n\r\n        \/\/ Leyenda: porcentajes sobre el total bruto\r\n        document.getElementById('leg-base-pct').textContent  = (neto    \/ total * 100).toFixed(1) + '%';\r\n        document.getElementById('leg-iva-pct').textContent   = (impIva  \/ total * 100).toFixed(1) + '%';\r\n        document.getElementById('leg-irpf-pct').textContent  = (impIrpf \/ total * 100).toFixed(1) + '%';\r\n\r\n        \/\/ \u2500\u2500 BARRA APILADA \u2500\u2500\r\n        \/\/ Misma l\u00f3gica: neto | IRPF | IVA, todos sobre el total bruto\r\n        document.getElementById('bar-neto').style.width = (neto    \/ total * 100).toFixed(2) + '%';\r\n        document.getElementById('bar-irpf').style.width = (impIrpf \/ total * 100).toFixed(2) + '%';\r\n        document.getElementById('bar-iva').style.width  = (impIva  \/ total * 100).toFixed(2) + '%';\r\n\r\n        document.getElementById('bar-neto-label').textContent  = fmtShort(neto) + '\u20ac';\r\n        document.getElementById('bar-irpf-label').textContent  = fmtShort(impIrpf) + '\u20ac';\r\n        document.getElementById('bar-iva-label').textContent   = fmtShort(impIva) + '\u20ac';\r\n    }\r\n\r\n    window.onload = calcular;\r\n<\/script>\r\n\r\n\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8212; VERSI\u00d3N 1 &#8212;<\/p>\n","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-70687","post","type-post","status-publish","format-standard","hentry","category-actualidad"],"acf":[],"lang":"es","translations":{"es":70687},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70687","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=70687"}],"version-history":[{"count":3,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70687\/revisions"}],"predecessor-version":[{"id":70693,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70687\/revisions\/70693"}],"wp:attachment":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/media?parent=70687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/categories?post=70687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/tags?post=70687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}