{"id":70694,"date":"2026-03-30T12:17:40","date_gmt":"2026-03-30T10:17:40","guid":{"rendered":"https:\/\/tickelia.com\/demo_2023\/?p=70694"},"modified":"2026-03-30T12:17:44","modified_gmt":"2026-03-30T10:17:44","slug":"desglose-factura-v2","status":"publish","type":"post","link":"https:\/\/tickelia.com\/demo_2023\/blog\/actualidad\/desglose-factura-v2\/","title":{"rendered":"Desglose factura v2"},"content":{"rendered":"\n<p>&#8212; VERSION 2  &#8212;<\/p>\n\n\n<!DOCTYPE html>\r\n\r\n<style>\r\n    \/* Estilos Generales *\/\r\n    * {\r\n        box-sizing: border-box;\r\n    }\r\n\r\n \r\n    .calc-container {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        gap: 20px;\r\n        max-width: 850px;\r\n        width: 100%;\r\n    }\r\n\r\n    .calc-panel {\r\n        flex: 1;\r\n        min-width: 320px;\r\n        background: #ffffff;\r\n        border-radius: 8px;\r\n        padding: 30px;\r\n        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    \/* Panel Derecho: Resultados (Verde corporativo) *\/\r\n    .calc-panel.results-panel {\r\n        background: #00c8b3; \r\n        color: white;\r\n    }\r\n    \r\n    \/* Subcaja \"Lo que me llevo\" integrada en el mismo tono *\/\r\n    .calc-panel.results-panel .result-group-bottom {\r\n       \r\n        margin: -30px;\r\n        margin-top: 20px;\r\n        padding: 25px 30px;\r\n        border-radius: 0 0 8px 8px;\r\n        color: white;\r\n    }\r\n\r\n    h3 {\r\n        color: #00c8b3; \r\n        margin-top: 0;\r\n        font-size: 1.1rem;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    label {\r\n        display: flex;\r\n        align-items: center;\r\n        font-weight: 600;\r\n        font-size: 0.95rem;\r\n        margin-bottom: 8px;\r\n        color: inherit;\r\n    }\r\n    \r\n    .text-dark label { color: #333; }\r\n\r\n    \/* Inputs con icono de euro *\/\r\n    .input-wrapper {\r\n        position: relative;\r\n        display: flex;\r\n        align-items: center;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .input-wrapper input[type=\"number\"], \r\n    .input-wrapper input[type=\"text\"] {\r\n        width: 100%;\r\n        padding: 12px 35px 12px 15px;\r\n        border: 1px solid #dcdcdc;\r\n        border-radius: 6px;\r\n        font-size: 1rem;\r\n        color: #333;\r\n        transition: border-color 0.2s;\r\n    }\r\n\r\n    .results-panel .input-wrapper input {\r\n        border: none;\r\n        background: #fff;\r\n        font-weight: bold;\r\n    }\r\n\r\n    .input-wrapper input:focus {\r\n        outline: none;\r\n        border-color: #00c8b3;\r\n    }\r\n\r\n    .currency-symbol {\r\n        position: absolute;\r\n        right: 15px;\r\n        color: #777;\r\n        pointer-events: none;\r\n    }\r\n\r\n    \/* Fila de impuestos *\/\r\n    .tax-row {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .tax-row input[type=\"checkbox\"] {\r\n        width: 18px;\r\n        height: 18px;\r\n        accent-color: #00c8b3;\r\n        cursor: pointer;\r\n    }\r\n\r\n    .tax-row .tax-label {\r\n        width: 80px;\r\n        color: #555;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .tax-row .tax-pct {\r\n        width: 70px;\r\n        text-align: center;\r\n        padding: 8px;\r\n        border: 1px solid #dcdcdc;\r\n        border-radius: 6px;\r\n    }\r\n\r\n    .tax-row .tax-val {\r\n        flex: 1;\r\n    }\r\n\r\n    \/* Burbujas explicativas (Tooltips) *\/\r\n    .tooltip {\r\n        display: inline-flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        width: 18px;\r\n        height: 18px;\r\n        background-color: rgba(255,255,255,0.3); \/* Fondo claro transl\u00facido unificado para todo el panel verde *\/\r\n        color: #fff;\r\n        border-radius: 50%;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        margin-left: 8px;\r\n        cursor: help;\r\n        position: relative;\r\n    }\r\n\r\n    .tooltip:hover::after {\r\n        content: attr(data-tip);\r\n        position: absolute;\r\n        bottom: 130%;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        background-color: #333;\r\n        color: #fff;\r\n        padding: 6px 12px;\r\n        border-radius: 4px;\r\n        font-size: 12px;\r\n        white-space: nowrap;\r\n        font-weight: normal;\r\n        z-index: 10;\r\n        box-shadow: 0 2px 5px rgba(0,0,0,0.2);\r\n    }\r\n    \r\n    .tooltip:hover::before {\r\n        content: '';\r\n        position: absolute;\r\n        bottom: 100%;\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        border-width: 5px;\r\n        border-style: solid;\r\n        border-color: #333 transparent transparent transparent;\r\n    }\r\n\r\n    .divider {\r\n        height: 1px;\r\n        background: rgba(255,255,255,0.3);\r\n        margin: 25px 0;\r\n    }\r\n<\/style>\r\n\r\n\r\n<div class=\"calc-container\">\r\n    <!-- Panel Izquierdo: Entradas -->\r\n    <div class=\"calc-panel text-dark\">\r\n        <h3>Base imponible (\u20ac)<\/h3>\r\n        <div class=\"input-wrapper\">\r\n            <input type=\"number\" id=\"base-imponible\" value=\"4132.23\" step=\"any\" oninput=\"calcular()\">\r\n            <span class=\"currency-symbol\">\u20ac<\/span>\r\n        <\/div>\r\n\r\n        <h3>Impuestos<\/h3>\r\n        \r\n        <!-- Fila IVA -->\r\n        <div class=\"tax-row\">\r\n            <input type=\"checkbox\" id=\"chk-iva\" checked onchange=\"calcular()\">\r\n            <span class=\"tax-label\">IVA (%)<\/span>\r\n            <input type=\"number\" id=\"pct-iva\" class=\"tax-pct\" value=\"21\" step=\"any\" oninput=\"calcular()\">\r\n            <div class=\"input-wrapper tax-val\" style=\"margin-bottom: 0;\">\r\n                <input type=\"text\" id=\"val-iva\" readonly>\r\n                <span class=\"currency-symbol\">\u20ac<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Fila IRPF -->\r\n        <div class=\"tax-row\">\r\n            <input type=\"checkbox\" id=\"chk-irpf\" checked onchange=\"calcular()\">\r\n            <span class=\"tax-label\">IRPF (%)<\/span>\r\n            <input type=\"number\" id=\"pct-irpf\" class=\"tax-pct\" value=\"15\" step=\"any\" oninput=\"calcular()\">\r\n            <div class=\"input-wrapper tax-val\" style=\"margin-bottom: 0;\">\r\n                <input type=\"text\" id=\"val-irpf\" readonly>\r\n                <span class=\"currency-symbol\">\u20ac<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Panel Derecho: Resultados -->\r\n    <div class=\"calc-panel results-panel\">\r\n        <label>Precio con IVA: <span class=\"tooltip\" data-tip=\"Base imponible + Importe de IVA\">?<\/span><\/label>\r\n        <div class=\"input-wrapper\">\r\n            <input type=\"text\" id=\"res-precio-iva\" readonly>\r\n            <span class=\"currency-symbol\">\u20ac<\/span>\r\n        <\/div>\r\n\r\n        <div class=\"divider\"><\/div>\r\n\r\n        <label>IMPORTE TOTAL FACTURA: <span class=\"tooltip\" data-tip=\"Lo que pagar\u00e1 tu cliente: Base + IVA - IRPF\">?<\/span><\/label>\r\n        <div class=\"input-wrapper\">\r\n            <input type=\"text\" id=\"res-total\" readonly>\r\n            <span class=\"currency-symbol\">\u20ac<\/span>\r\n        <\/div>\r\n\r\n        <!-- Secci\u00f3n inferior destacada en el mismo tono -->\r\n        <div class=\"result-group-bottom\">\r\n            <label>Lo que me llevo: <span class=\"tooltip\" data-tip=\"Tu ingreso real (Base Imponible - IRPF)\">?<\/span><\/label>\r\n            <div class=\"input-wrapper\" style=\"margin-bottom: 0;\">\r\n                <input type=\"text\" id=\"res-neto\" readonly>\r\n                <span class=\"currency-symbol\">\u20ac<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    function formatearMoneda(numero) {\r\n        return numero.toFixed(2).replace('.', ',');\r\n    }\r\n\r\n    function calcular() {\r\n        const baseInput = document.getElementById('base-imponible').value;\r\n        const base = parseFloat(baseInput.replace(',', '.')) || 0; \r\n        \r\n        const ivaActivo = document.getElementById('chk-iva').checked;\r\n        const irpfActivo = 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 importeIva = ivaActivo ? (base * (pctIva \/ 100)) : 0;\r\n        const importeIrpf = irpfActivo ? (base * (pctIrpf \/ 100)) : 0;\r\n\r\n        document.getElementById('val-iva').value = formatearMoneda(importeIva);\r\n        document.getElementById('val-irpf').value = formatearMoneda(importeIrpf);\r\n\r\n        const precioConIva = base + importeIva;\r\n        const totalFactura = base + importeIva - importeIrpf;\r\n        const neto = base - importeIrpf;\r\n\r\n        document.getElementById('res-precio-iva').value = formatearMoneda(precioConIva);\r\n        document.getElementById('res-total').value = formatearMoneda(totalFactura);\r\n        document.getElementById('res-neto').value = formatearMoneda(neto);\r\n    }\r\n\r\n    \/\/ Ejecutar al cargar la p\u00e1gina\r\n    window.onload = calcular;\r\n<\/script>\r\n\r\n\n","protected":false},"excerpt":{"rendered":"<p>&#8212; VERSION 2 &#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-70694","post","type-post","status-publish","format-standard","hentry","category-actualidad"],"acf":[],"lang":"es","translations":{"es":70694},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70694","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=70694"}],"version-history":[{"count":1,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70694\/revisions"}],"predecessor-version":[{"id":70696,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/posts\/70694\/revisions\/70696"}],"wp:attachment":[{"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/media?parent=70694"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/categories?post=70694"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tickelia.com\/demo_2023\/wp-json\/wp\/v2\/tags?post=70694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}