Calculadora de IGV Intuitiva (18%) y An\u00e1lisis del Impuesto - Ruwark<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/unpkg.com\/feather-icons\"><\/script>\r\n\r\n \r\n <style>\r\n \/* ----------------------------------------- *\/\r\n \/* --- Variables y Estilos Generales --- *\/\r\n \/* ----------------------------------------- *\/\r\n :root {\r\n --rw-blue: #14203C;\r\n --rw-orange: #FC4908;\r\n --rw-white: #FFFFFF;\r\n --rw-text-light: #525f7f;\r\n --rw-text-lighter: #8898aa;\r\n --rw-background-light: #f7fafc;\r\n --rw-border-color: #e2e8f0;\r\n --rw-success: #28a745;\r\n --rw-danger: #dc3545;\r\n --rw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\r\n --rw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n background-color: var(--rw-background-light);\r\n color: var(--rw-blue);\r\n line-height: 1.6;\r\n padding: 2rem 1rem;\r\n }\r\n\r\n .main-container {\r\n max-width: 650px;\r\n width: 100%;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ----------------------------------------- *\/\r\n \/* --- Estilos de la Calculadora --- *\/\r\n \/* ----------------------------------------- *\/\r\n .calculator-container {\r\n background-color: var(--rw-white);\r\n padding: 1.5rem 2rem 2rem;\r\n border-radius: 12px;\r\n box-shadow: var(--rw-shadow-lg);\r\n border: 1px solid var(--rw-border-color);\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n background-color: var(--rw-background-light);\r\n border-radius: 8px;\r\n padding: 0.25rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .tab-link {\r\n flex: 1;\r\n padding: 0.6rem;\r\n cursor: pointer;\r\n border: none;\r\n background: none;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: var(--rw-text-light);\r\n border-radius: 6px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .tab-link.active {\r\n background-color: var(--rw-white);\r\n color: var(--rw-orange);\r\n box-shadow: var(--rw-shadow);\r\n }\r\n\r\n .tab-content { display: none; }\r\n .tab-content.active { display: block; animation: fadeIn 0.5s ease-in-out; }\r\n\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n .form-group {\r\n position: relative;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .form-control {\r\n width: 100%;\r\n padding: 1.25rem 1rem 0.5rem;\r\n font-size: 1.1rem;\r\n font-family: 'Poppins', sans-serif;\r\n border: 1px solid var(--rw-border-color);\r\n border-radius: 6px;\r\n background-color: var(--rw-white);\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .form-control:focus {\r\n outline: none;\r\n border-color: var(--rw-orange);\r\n }\r\n\r\n .form-group label {\r\n position: absolute;\r\n top: 0.9rem;\r\n left: 1rem;\r\n font-size: 1rem;\r\n color: var(--rw-text-lighter);\r\n pointer-events: none;\r\n transition: all 0.2s ease-out;\r\n }\r\n\r\n .form-control:focus + label,\r\n .form-control:not(:placeholder-shown) + label {\r\n top: 0.3rem;\r\n left: 1rem;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n color: var(--rw-orange);\r\n }\r\n \r\n .form-control.highlight {\r\n background-color: #fffaf0;\r\n border-color: var(--rw-success);\r\n }\r\n\r\n .line-item {\r\n display: grid;\r\n grid-template-columns: 80px 1fr 120px 40px;\r\n gap: 0.75rem;\r\n align-items: center;\r\n margin-bottom: 0.75rem;\r\n padding: 0.5rem;\r\n border-radius: 6px;\r\n transition: background-color 0.3s;\r\n }\r\n .line-item:hover { background-color: #f8f9fa; }\r\n \r\n .line-item .form-group { margin-bottom: 0; }\r\n .line-item .form-control { padding: 1rem 0.75rem 0.4rem; font-size: 0.9rem; }\r\n .line-item .form-group label { font-size: 0.9rem; top: 0.7rem; }\r\n .line-item .form-control:focus + label,\r\n .line-item .form-control:not(:placeholder-shown) + label { top: 0.2rem; font-size: 0.65rem; }\r\n\r\n .btn-icon {\r\n background: none; border: none; cursor: pointer;\r\n color: var(--rw-text-lighter); transition: color 0.2s;\r\n padding: 0.5rem;\r\n }\r\n .btn-icon:hover { color: var(--rw-danger); }\r\n \r\n #add-item-btn {\r\n display: flex; align-items: center; justify-content: center;\r\n gap: 0.5rem; width: 100%; padding: 0.75rem;\r\n margin-top: 1rem; background: transparent; color: var(--rw-orange);\r\n border: 2px dashed var(--rw-border-color); border-radius: 8px;\r\n font-weight: 600; cursor: pointer; transition: all 0.2s;\r\n }\r\n #add-item-btn:hover { background: #fff8f5; border-color: var(--rw-orange); }\r\n\r\n .results-summary {\r\n margin-top: 2rem;\r\n padding: 1.5rem;\r\n background-color: var(--rw-background-light);\r\n border-radius: 8px;\r\n }\r\n \r\n .summary-item {\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 0.5rem 0; font-size: 1rem;\r\n }\r\n .summary-item .label { font-weight: 500; color: var(--rw-text-light); }\r\n .summary-item .value { font-weight: 600; }\r\n \r\n .summary-item.total {\r\n font-size: 1.2rem;\r\n padding-top: 1rem;\r\n margin-top: 0.5rem;\r\n border-top: 1px solid var(--rw-border-color);\r\n }\r\n .summary-item.total .label { font-weight: 700; color: var(--rw-blue); }\r\n .summary-item.total .value { font-weight: 700; color: var(--rw-orange); font-size: 1.5rem; }\r\n \r\n .amount-in-words, .system-date {\r\n margin-top: 1.5rem;\r\n font-size: 0.9rem; color: var(--rw-text-lighter); text-align: center;\r\n }\r\n .amount-in-words span { font-weight: 600; color: var(--rw-text-light); display: block; }\r\n \r\n .main-actions { text-align: center; margin-top: 1.5rem; }\r\n .btn-clear {\r\n background: none; border: none; color: var(--rw-text-lighter);\r\n font-weight: 600; cursor: pointer; text-decoration: underline;\r\n }\r\n .btn-clear:hover { color: var(--rw-danger); }\r\n \r\n \/* ----------------------------------------- *\/\r\n \/* --- Estilos de la Explicaci\u00f3n --- *\/\r\n \/* ----------------------------------------- *\/\r\n .igv-explanation {\r\n margin-top: 2.5rem;\r\n padding: 2rem;\r\n background-color: var(--rw-white);\r\n border-radius: 12px;\r\n box-shadow: var(--rw-shadow);\r\n border: 1px solid var(--rw-border-color);\r\n }\r\n .igv-explanation h3 {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--rw-blue);\r\n margin-bottom: 1.5rem;\r\n border-bottom: 2px solid var(--rw-orange);\r\n padding-bottom: 0.5rem;\r\n }\r\n .igv-explanation h4 {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: var(--rw-blue);\r\n margin-top: 1.5rem;\r\n margin-bottom: 0.75rem;\r\n }\r\n .igv-explanation p, .igv-explanation li {\r\n font-size: 0.95rem;\r\n color: var(--rw-text-light);\r\n margin-bottom: 1rem;\r\n text-align: justify;\r\n }\r\n .igv-explanation ul {\r\n list-style-position: outside;\r\n padding-left: 1.5rem;\r\n }\r\n .igv-explanation strong {\r\n color: var(--rw-blue);\r\n font-weight: 600;\r\n }\r\n .igv-explanation code {\r\n background-color: var(--rw-background-light);\r\n color: var(--rw-orange);\r\n padding: 0.2rem 0.4rem;\r\n border-radius: 4px;\r\n font-family: 'Courier New', Courier, monospace;\r\n font-weight: 600;\r\n }\r\n\r\n\r\n \/* ----------------------------------------- *\/\r\n \/* --- Dise\u00f1o Responsivo --- *\/\r\n \/* ----------------------------------------- *\/\r\n @media (max-width: 640px) {\r\n body { padding: 1rem 0.5rem; }\r\n .calculator-container, .igv-explanation { padding: 1.5rem; }\r\n .line-item {\r\n grid-template-columns: 60px 1fr 40px;\r\n grid-template-rows: auto auto;\r\n gap: 0.5rem 0.75rem;\r\n padding: 0.75rem;\r\n border: 1px solid var(--rw-border-color);\r\n }\r\n .line-item .desc-input-group { grid-column: 1 \/ -1; }\r\n .line-item .btn-icon { grid-row: 1; grid-column: 3; }\r\n .line-item .line-total { grid-column: 1 \/ -1; text-align: right; padding-top: 0.5rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <main class=\"main-container\">\r\n \r\n <section class=\"calculator-container\">\r\n <nav class=\"tabs\">\r\n <button class=\"tab-link active\" data-tab=\"basico\">B\u00e1sico<\/button>\r\n <button class=\"tab-link\" data-tab=\"avanzado\">Avanzado<\/button>\r\n <\/nav>\r\n\r\n <div id=\"basico-tab\" class=\"tab-content active\">\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"base-input\" class=\"form-control\" placeholder=\" \" inputmode=\"decimal\">\r\n <label for=\"base-input\">Monto Base (Sin IGV)<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"igv-input\" class=\"form-control\" placeholder=\" \" inputmode=\"decimal\">\r\n <label for=\"igv-input\">IGV (18%)<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"total-input\" class=\"form-control\" placeholder=\" \" inputmode=\"decimal\">\r\n <label for=\"total-input\">Monto Total (Con IGV)<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"avanzado-tab\" class=\"tab-content\">\r\n <div class=\"advanced-options\">\r\n <label><input type=\"checkbox\" id=\"prices-include-igv\"> Precios de items incluyen IGV<\/label>\r\n <\/div>\r\n <div id=\"line-items-container\"><\/div>\r\n <button id=\"add-item-btn\">\r\n <i data-feather=\"plus-circle\" style=\"width:18px; height:18px;\"><\/i>\r\n A\u00f1adir Item\r\n <\/button>\r\n <\/div>\r\n \r\n <footer class=\"calculator-footer\">\r\n <div id=\"results-summary\" class=\"results-summary\" style=\"display: none;\"><\/div>\r\n <div class=\"amount-in-words\" style=\"display: none;\">SON: <span id=\"amount-text\">--<\/span><\/div>\r\n <div class=\"system-date\"><\/div>\r\n <div class=\"main-actions\">\r\n <button id=\"clear-all-btn\" class=\"btn-clear\">Limpiar campos<\/button>\r\n <\/div>\r\n <\/footer>\r\n <\/section>\r\n \r\n\r\n \r\n <section class=\"igv-explanation\">\r\n <h3>An\u00e1lisis Jur\u00eddico-Tributario del Impuesto General a las Ventas (IGV)<\/h3>\r\n \r\n <h4>Naturaleza y Estructura del Tributo<\/h4>\r\n <p>El Impuesto General a las Ventas (IGV) es un tributo de <strong>naturaleza indirecta<\/strong> que grava el consumo en su manifestaci\u00f3n final. Su dise\u00f1o t\u00e9cnico responde a un modelo de impuesto al valor agregado (IVA), cuya estructura se define como <strong>plurif\u00e1sica y no acumulativa<\/strong>.<\/p>\r\n <ul>\r\n <li><strong>Plurif\u00e1sica:<\/strong> La incidencia del impuesto se produce en cada una de las fases del ciclo econ\u00f3mico de producci\u00f3n y distribuci\u00f3n (e.g., importaci\u00f3n, fabricaci\u00f3n, distribuci\u00f3n mayorista, venta minorista).<\/li>\r\n <li><strong>No Acumulativa:<\/strong> Este es el principio cardinal del sistema. El mecanismo del cr\u00e9dito fiscal neutraliza la carga impositiva soportada en las etapas precedentes. De este modo, se evita un efecto de \"impuesto en cascada\", asegurando que el gravamen recaiga exclusivamente sobre el <strong>valor agregado<\/strong> en cada fase y sea econ\u00f3micamente trasladado hasta ser soportado por el consumidor final, quien act\u00faa como sujeto pasivo <i>de facto<\/i>.<\/li>\r\n <\/ul>\r\n\r\n <h4>\u00c1mbito de Aplicaci\u00f3n: El Hecho Imponible<\/h4>\r\n <p>La obligaci\u00f3n tributaria del IGV se configura con la realizaci\u00f3n de las operaciones tipificadas en el art\u00edculo 1\u00b0 del Texto \u00danico Ordenado de la Ley del IGV e ISC (Decreto Supremo N\u00b0 055-99-EF). Estas operaciones, que constituyen el hecho generador del impuesto, son:<\/p>\r\n <ul>\r\n <li>La venta en el pa\u00eds de bienes muebles.<\/li>\r\n <li>La prestaci\u00f3n o utilizaci\u00f3n de servicios en el pa\u00eds.<\/li>\r\n <li>Los contratos de construcci\u00f3n.<\/li>\r\n <li>La primera venta de inmuebles que realicen los constructores de los mismos.<\/li>\r\n <li>La importaci\u00f3n de bienes.<\/li>\r\n <\/ul>\r\n\r\n <h4>Determinaci\u00f3n de la Obligaci\u00f3n Tributaria<\/h4>\r\n <p>La cuantificaci\u00f3n del impuesto a pagar se fundamenta en la interacci\u00f3n de los siguientes elementos estructurales:<\/p>\r\n <ul>\r\n <li><strong>Base Imponible:<\/strong> Corresponde al valor de la contraprestaci\u00f3n econ\u00f3mica de la operaci\u00f3n gravada (valor de venta, retribuci\u00f3n por el servicio, valor de construcci\u00f3n, etc.). Sobre esta base se aplica la al\u00edcuota.<\/li>\r\n <li><strong>Al\u00edcuota (Tasa):<\/strong> La tasa impositiva vigente es del <strong>18%<\/strong>. Esta se descompone en un 16% correspondiente al IGV propiamente dicho y un 2% destinado al Impuesto de Promoci\u00f3n Municipal (IPM).<\/li>\r\n <li><strong>D\u00e9bito Fiscal:<\/strong> Es el monto que resulta de aplicar la al\u00edcuota del 18% sobre la base imponible de las operaciones gravadas (ventas, servicios prestados) que realiza un contribuyente en un per\u00edodo mensual. Constituye el IGV que el contribuyente traslada a sus clientes.<\/li>\r\n <li><strong>Cr\u00e9dito Fiscal:<\/strong> Es el monto del IGV que le ha sido trasladado al contribuyente en sus adquisiciones de bienes, servicios y contratos de construcci\u00f3n, y que se encuentra consignado por separado en los comprobantes de pago respectivos. Su utilizaci\u00f3n est\u00e1 sujeta al cumplimiento de requisitos sustanciales y formales establecidos en la ley.<\/li>\r\n <\/ul>\r\n <h4>Mecanismo de Liquidaci\u00f3n Mensual<\/h4>\r\n <p>El impuesto a pagar a la Superintendencia Nacional de Aduanas y de Administraci\u00f3n Tributaria (SUNAT) se determina mensualmente. La liquidaci\u00f3n se efect\u00faa mediante la sustracci\u00f3n del cr\u00e9dito fiscal del d\u00e9bito fiscal del mismo per\u00edodo. La f\u00f3rmula es la siguiente: <code>Impuesto a Pagar = D\u00e9bito Fiscal - Cr\u00e9dito Fiscal<\/code>.<\/p>\r\n <\/section>\r\n \r\n <\/main>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ --- CONSTANTES Y ELEMENTOS DEL DOM ---\r\n const IGV_RATE = 0.18;\r\n const TABS = document.querySelectorAll('.tab-link');\r\n const TAB_CONTENTS = document.querySelectorAll('.tab-content');\r\n \r\n const baseInput = document.getElementById('base-input');\r\n const igvInput = document.getElementById('igv-input');\r\n const totalInput = document.getElementById('total-input');\r\n\r\n const pricesIncludeIgvCheck = document.getElementById('prices-include-igv');\r\n const lineItemsContainer = document.getElementById('line-items-container');\r\n const addItemBtn = document.getElementById('add-item-btn');\r\n \r\n const resultsSummary = document.getElementById('results-summary');\r\n const amountTextContainer = document.querySelector('.amount-in-words');\r\n const amountTextSpan = document.getElementById('amount-text');\r\n const currentDateSpan = document.querySelector('.system-date');\r\n const clearAllBtn = document.getElementById('clear-all-btn');\r\n\r\n let isCalculating = false;\r\n let highlightTimeout;\r\n\r\n \/\/ --- FORMATEADORES Y UTILIDADES ---\r\n const currencyFormatter = new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' });\r\n const numberFormatter = new Intl.NumberFormat('es-PE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n const numeroALetras = (num) => { \r\n const unidades = ['', 'UN', 'DOS', 'TRES', 'CUATRO', 'CINCO', 'SEIS', 'SIETE', 'OCHO', 'NUEVE'];\r\n const decenas = ['', 'DIEZ', 'VEINTE', 'TREINTA', 'CUARENTA', 'CINCUENTA', 'SESENTA', 'SETENTA', 'OCHENTA', 'NOVENTA'];\r\n const centenas = ['', 'CIENTO', 'DOSCIENTOS', 'TRESCIENTOS', 'CUATROCIENTOS', 'QUINIENTOS', 'SEISCIENTOS', 'SETECIENTOS', 'OCHOCIENTOS', 'NOVECIENTOS'];\r\n const especiales = ['DIEZ', 'ONCE', 'DOCE', 'TRECE', 'CATORCE', 'QUINCE', 'DIECIS\u00c9IS', 'DIECISIETE', 'DIECIOCHO', 'DIECINUEVE'];\r\n\r\n function Seccion(num, divisor, singular, plural) {\r\n const cientos = Math.floor(num \/ 100);\r\n const resto = num % 100;\r\n let letras = '';\r\n if (num === 100) { letras = 'CIEN'; } \r\n else if (cientos > 0) { letras = centenas[cientos] + (resto > 0 ? ' ' : ''); }\r\n if (resto > 0) {\r\n if (resto < 10) { letras += unidades[resto]; } \r\n else if (resto < 20) { letras += especiales[resto - 10]; } \r\n else {\r\n const decena = Math.floor(resto \/ 10);\r\n const unidad = resto % 10;\r\n letras += decenas[decena];\r\n if (unidad > 0) { letras += (decena === 2 ? 'I' : ' Y ') + unidades[unidad]; }\r\n }\r\n }\r\n if (num > 0) {\r\n const miles = Math.floor(divisor \/ 1000);\r\n if (miles === 1) { letras += ' ' + singular; } \r\n else if (miles > 1) { letras += ' ' + plural; }\r\n }\r\n return letras;\r\n }\r\n\r\n if (num === null || isNaN(num) || num === 0) return '--';\r\n const numero = parseFloat(num).toFixed(2);\r\n const [integerPart, decimalPart] = numero.split('.');\r\n const entero = parseInt(integerPart, 10);\r\n if (entero === 0 && parseInt(decimalPart, 10) === 0) return 'CERO CON 00\/100 SOLES';\r\n\r\n const millones = Math.floor(entero \/ 1000000);\r\n const miles = Math.floor((entero % 1000000) \/ 1000);\r\n const resto = entero % 1000;\r\n\r\n let letras = '';\r\n if (millones > 0) { letras += (millones === 1 ? 'UN MILL\u00d3N ' : Seccion(millones, millones * 1000000, 'MILL\u00d3N', 'MILLONES') + ' '); }\r\n if (miles > 0) { letras += (miles === 1 ? 'MIL ' : Seccion(miles, miles * 1000, 'MIL', 'MIL') + ' '); }\r\n if (resto > 0) { letras += Seccion(resto, 0, '', ''); }\r\n \r\n return `${letras.trim() || 'CERO'} CON ${decimalPart}\/100 SOLES`;\r\n };\r\n const parseInput = (value) => (typeof value !== 'string' || value.trim() === '') ? NaN : parseFloat(value.replace(\/,\/g, ''));\r\n const highlightField = (field) => {\r\n field.classList.add('highlight');\r\n clearTimeout(highlightTimeout);\r\n highlightTimeout = setTimeout(() => field.classList.remove('highlight'), 1000);\r\n };\r\n\r\n \/\/ --- FUNCIONES DE C\u00c1LCULO Y RENDERIZADO ---\r\n function updateResults(subtotal, igv, total) {\r\n if (isNaN(total) || total <= 0) {\r\n resultsSummary.style.display = 'none';\r\n amountTextContainer.style.display = 'none';\r\n return;\r\n }\r\n resultsSummary.innerHTML = `\r\n <div class=\"summary-item\">\r\n <span class=\"label\">Monto Base<\/span>\r\n <span class=\"value\">${currencyFormatter.format(subtotal)}<\/span>\r\n <\/div>\r\n <div class=\"summary-item\">\r\n <span class=\"label\">IGV (18%)<\/span>\r\n <span class=\"value\">${currencyFormatter.format(igv)}<\/span>\r\n <\/div>\r\n <div class=\"summary-item total\">\r\n <span class=\"label\">Total<\/span>\r\n <span class=\"value\">${currencyFormatter.format(total)}<\/span>\r\n <\/div>`;\r\n amountTextSpan.textContent = numeroALetras(total);\r\n resultsSummary.style.display = 'block';\r\n amountTextContainer.style.display = 'block';\r\n }\r\n\r\n function calculateBasic(source) {\r\n if (isCalculating) return;\r\n isCalculating = true;\r\n\r\n let base = parseInput(baseInput.value);\r\n let igv = parseInput(igvInput.value);\r\n let total = parseInput(totalInput.value);\r\n let newBase = NaN, newIgv = NaN, newTotal = NaN;\r\n\r\n if (source === 'base' && !isNaN(base)) {\r\n newIgv = base * IGV_RATE;\r\n newTotal = base + newIgv;\r\n igvInput.value = numberFormatter.format(newIgv);\r\n totalInput.value = numberFormatter.format(newTotal);\r\n highlightField(igvInput);\r\n highlightField(totalInput);\r\n } else if (source === 'igv' && !isNaN(igv)) {\r\n newBase = igv \/ IGV_RATE;\r\n newTotal = newBase + igv;\r\n baseInput.value = numberFormatter.format(newBase);\r\n totalInput.value = numberFormatter.format(newTotal);\r\n highlightField(baseInput);\r\n highlightField(totalInput);\r\n } else if (source === 'total' && !isNaN(total)) {\r\n newBase = total \/ (1 + IGV_RATE);\r\n newIgv = total - newBase;\r\n baseInput.value = numberFormatter.format(newBase);\r\n igvInput.value = numberFormatter.format(newIgv);\r\n highlightField(baseInput);\r\n highlightField(igvInput);\r\n }\r\n \r\n updateResults(newBase || base, newIgv || igv, newTotal || total);\r\n isCalculating = false;\r\n }\r\n\r\n function calculateAdvanced() {\r\n let grandSubtotal = 0;\r\n const includeIgv = pricesIncludeIgvCheck.checked;\r\n\r\n document.querySelectorAll('.line-item').forEach(item => {\r\n const qty = parseInput(item.querySelector('.qty-input').value) || 0;\r\n const unitPrice = parseInput(item.querySelector('.unit-price-input').value) || 0;\r\n let lineSubtotal = includeIgv ? (qty * unitPrice) \/ (1 + IGV_RATE) : qty * unitPrice;\r\n grandSubtotal += lineSubtotal;\r\n });\r\n \r\n const grandIgv = grandSubtotal * IGV_RATE;\r\n const grandTotal = grandSubtotal + grandIgv;\r\n updateResults(grandSubtotal, grandIgv, grandTotal);\r\n }\r\n\r\n \/\/ --- MANEJO DEL DOM Y EVENTOS ---\r\n function addNewLineItem() {\r\n const newItem = document.createElement('div');\r\n newItem.className = 'line-item';\r\n newItem.innerHTML = `\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control qty-input\" placeholder=\" \" inputmode=\"numeric\">\r\n <label>Cant.<\/label>\r\n <\/div>\r\n <div class=\"form-group desc-input-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\" \">\r\n <label>Descripci\u00f3n<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control unit-price-input\" placeholder=\" \" inputmode=\"decimal\">\r\n <label>P. Unitario<\/label>\r\n <\/div>\r\n <button class=\"btn-icon\" title=\"Eliminar item\"><i data-feather=\"trash-2\"><\/i><\/button>\r\n `;\r\n lineItemsContainer.appendChild(newItem);\r\n feather.replace(); \/\/ Actualizar iconos\r\n newItem.querySelector('.qty-input').focus();\r\n }\r\n\r\n function clearAll() {\r\n isCalculating = true;\r\n baseInput.value = '';\r\n igvInput.value = '';\r\n totalInput.value = '';\r\n lineItemsContainer.innerHTML = '';\r\n addNewLineItem();\r\n pricesIncludeIgvCheck.checked = false;\r\n updateResults(0, 0, 0);\r\n isCalculating = false;\r\n }\r\n\r\n function setupInitialState() {\r\n currentDateSpan.textContent = `Cusco, ${new Date().toLocaleDateString('es-PE', {\r\n year: 'numeric', month: 'long', day: 'numeric'\r\n })}`;\r\n clearAll();\r\n feather.replace();\r\n }\r\n\r\n \/\/ --- EVENT LISTENERS ---\r\n TABS.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n TABS.forEach(t => t.classList.remove('active'));\r\n tab.classList.add('active');\r\n TAB_CONTENTS.forEach(c => c.classList.remove('active'));\r\n document.getElementById(tab.dataset.tab + '-tab').classList.add('active');\r\n clearAll();\r\n });\r\n });\r\n\r\n baseInput.addEventListener('input', () => calculateBasic('base'));\r\n igvInput.addEventListener('input', () => calculateBasic('igv'));\r\n totalInput.addEventListener('input', () => calculateBasic('total'));\r\n\r\n addItemBtn.addEventListener('click', addNewLineItem);\r\n clearAllBtn.addEventListener('click', clearAll);\r\n \r\n pricesIncludeIgvCheck.addEventListener('change', calculateAdvanced);\r\n lineItemsContainer.addEventListener('input', (e) => {\r\n if (e.target.classList.contains('qty-input') || e.target.classList.contains('unit-price-input')) {\r\n calculateAdvanced();\r\n }\r\n });\r\n lineItemsContainer.addEventListener('click', (e) => {\r\n const removeBtn = e.target.closest('.btn-icon');\r\n if (removeBtn) {\r\n removeBtn.closest('.line-item').remove();\r\n if (lineItemsContainer.querySelectorAll('.line-item').length === 0) {\r\n addNewLineItem();\r\n }\r\n calculateAdvanced();\r\n }\r\n });\r\n\r\n \/\/ --- INICIALIZACI\u00d3N ---\r\n setupInitialState();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculadora de IGV Intuitiva (18%) y An\u00e1lisis del Impuesto – Ruwark B\u00e1sico Avanzado Monto Base (Sin IGV) IGV (18%) Monto Total (Con IGV) Precios de items incluyen IGV A\u00f1adir Item SON: — Limpiar campos An\u00e1lisis Jur\u00eddico-Tributario del Impuesto General a las Ventas (IGV) Naturaleza y Estructura del Tributo El Impuesto General a las Ventas (IGV) […]<\/p>\n","protected":false},"author":1,"featured_media":4692,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ministerio-de-cultura"],"_links":{"self":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/posts\/4690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/comments?post=4690"}],"version-history":[{"count":0,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/posts\/4690\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/media\/4692"}],"wp:attachment":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/media?parent=4690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/categories?post=4690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/tags?post=4690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n Calculadora de IGV Intuitiva (18%) y An\u00e1lisis del Impuesto - Ruwark<\/title>\r\n \r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/unpkg.com\/feather-icons\"><\/script>\r\n\r\n \r\n <style>\r\n \/* ----------------------------------------- *\/\r\n \/* --- Variables y Estilos Generales --- *\/\r\n \/* ----------------------------------------- *\/\r\n :root {\r\n --rw-blue: #14203C;\r\n --rw-orange: #FC4908;\r\n --rw-white: #FFFFFF;\r\n --rw-text-light: #525f7f;\r\n --rw-text-lighter: #8898aa;\r\n --rw-background-light: #f7fafc;\r\n --rw-border-color: #e2e8f0;\r\n --rw-success: #28a745;\r\n --rw-danger: #dc3545;\r\n --rw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);\r\n --rw-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n body {\r\n font-family: 'Poppins', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\r\n background-color: var(--rw-background-light);\r\n color: var(--rw-blue);\r\n line-height: 1.6;\r\n padding: 2rem 1rem;\r\n }\r\n\r\n .main-container {\r\n max-width: 650px;\r\n width: 100%;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ----------------------------------------- *\/\r\n \/* --- Estilos de la Calculadora --- *\/\r\n \/* ----------------------------------------- *\/\r\n .calculator-container {\r\n background-color: var(--rw-white);\r\n padding: 1.5rem 2rem 2rem;\r\n border-radius: 12px;\r\n box-shadow: var(--rw-shadow-lg);\r\n border: 1px solid var(--rw-border-color);\r\n }\r\n\r\n .tabs {\r\n display: flex;\r\n background-color: var(--rw-background-light);\r\n border-radius: 8px;\r\n padding: 0.25rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .tab-link {\r\n flex: 1;\r\n padding: 0.6rem;\r\n cursor: pointer;\r\n border: none;\r\n background: none;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n color: var(--rw-text-light);\r\n border-radius: 6px;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .tab-link.active {\r\n background-color: var(--rw-white);\r\n color: var(--rw-orange);\r\n box-shadow: var(--rw-shadow);\r\n }\r\n\r\n .tab-content { display: none; }\r\n .tab-content.active { display: block; animation: fadeIn 0.5s ease-in-out; }\r\n\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n\r\n .form-group {\r\n position: relative;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .form-control {\r\n width: 100%;\r\n padding: 1.25rem 1rem 0.5rem;\r\n font-size: 1.1rem;\r\n font-family: 'Poppins', sans-serif;\r\n border: 1px solid var(--rw-border-color);\r\n border-radius: 6px;\r\n background-color: var(--rw-white);\r\n transition: border-color 0.2s;\r\n }\r\n\r\n .form-control:focus {\r\n outline: none;\r\n border-color: var(--rw-orange);\r\n }\r\n\r\n .form-group label {\r\n position: absolute;\r\n top: 0.9rem;\r\n left: 1rem;\r\n font-size: 1rem;\r\n color: var(--rw-text-lighter);\r\n pointer-events: none;\r\n transition: all 0.2s ease-out;\r\n }\r\n\r\n .form-control:focus + label,\r\n .form-control:not(:placeholder-shown) + label {\r\n top: 0.3rem;\r\n left: 1rem;\r\n font-size: 0.75rem;\r\n font-weight: 500;\r\n color: var(--rw-orange);\r\n }\r\n \r\n .form-control.highlight {\r\n background-color: #fffaf0;\r\n border-color: var(--rw-success);\r\n }\r\n\r\n .line-item {\r\n display: grid;\r\n grid-template-columns: 80px 1fr 120px 40px;\r\n gap: 0.75rem;\r\n align-items: center;\r\n margin-bottom: 0.75rem;\r\n padding: 0.5rem;\r\n border-radius: 6px;\r\n transition: background-color 0.3s;\r\n }\r\n .line-item:hover { background-color: #f8f9fa; }\r\n \r\n .line-item .form-group { margin-bottom: 0; }\r\n .line-item .form-control { padding: 1rem 0.75rem 0.4rem; font-size: 0.9rem; }\r\n .line-item .form-group label { font-size: 0.9rem; top: 0.7rem; }\r\n .line-item .form-control:focus + label,\r\n .line-item .form-control:not(:placeholder-shown) + label { top: 0.2rem; font-size: 0.65rem; }\r\n\r\n .btn-icon {\r\n background: none; border: none; cursor: pointer;\r\n color: var(--rw-text-lighter); transition: color 0.2s;\r\n padding: 0.5rem;\r\n }\r\n .btn-icon:hover { color: var(--rw-danger); }\r\n \r\n #add-item-btn {\r\n display: flex; align-items: center; justify-content: center;\r\n gap: 0.5rem; width: 100%; padding: 0.75rem;\r\n margin-top: 1rem; background: transparent; color: var(--rw-orange);\r\n border: 2px dashed var(--rw-border-color); border-radius: 8px;\r\n font-weight: 600; cursor: pointer; transition: all 0.2s;\r\n }\r\n #add-item-btn:hover { background: #fff8f5; border-color: var(--rw-orange); }\r\n\r\n .results-summary {\r\n margin-top: 2rem;\r\n padding: 1.5rem;\r\n background-color: var(--rw-background-light);\r\n border-radius: 8px;\r\n }\r\n \r\n .summary-item {\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 0.5rem 0; font-size: 1rem;\r\n }\r\n .summary-item .label { font-weight: 500; color: var(--rw-text-light); }\r\n .summary-item .value { font-weight: 600; }\r\n \r\n .summary-item.total {\r\n font-size: 1.2rem;\r\n padding-top: 1rem;\r\n margin-top: 0.5rem;\r\n border-top: 1px solid var(--rw-border-color);\r\n }\r\n .summary-item.total .label { font-weight: 700; color: var(--rw-blue); }\r\n .summary-item.total .value { font-weight: 700; color: var(--rw-orange); font-size: 1.5rem; }\r\n \r\n .amount-in-words, .system-date {\r\n margin-top: 1.5rem;\r\n font-size: 0.9rem; color: var(--rw-text-lighter); text-align: center;\r\n }\r\n .amount-in-words span { font-weight: 600; color: var(--rw-text-light); display: block; }\r\n \r\n .main-actions { text-align: center; margin-top: 1.5rem; }\r\n .btn-clear {\r\n background: none; border: none; color: var(--rw-text-lighter);\r\n font-weight: 600; cursor: pointer; text-decoration: underline;\r\n }\r\n .btn-clear:hover { color: var(--rw-danger); }\r\n \r\n \/* ----------------------------------------- *\/\r\n \/* --- Estilos de la Explicaci\u00f3n --- *\/\r\n \/* ----------------------------------------- *\/\r\n .igv-explanation {\r\n margin-top: 2.5rem;\r\n padding: 2rem;\r\n background-color: var(--rw-white);\r\n border-radius: 12px;\r\n box-shadow: var(--rw-shadow);\r\n border: 1px solid var(--rw-border-color);\r\n }\r\n .igv-explanation h3 {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: var(--rw-blue);\r\n margin-bottom: 1.5rem;\r\n border-bottom: 2px solid var(--rw-orange);\r\n padding-bottom: 0.5rem;\r\n }\r\n .igv-explanation h4 {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n color: var(--rw-blue);\r\n margin-top: 1.5rem;\r\n margin-bottom: 0.75rem;\r\n }\r\n .igv-explanation p, .igv-explanation li {\r\n font-size: 0.95rem;\r\n color: var(--rw-text-light);\r\n margin-bottom: 1rem;\r\n text-align: justify;\r\n }\r\n .igv-explanation ul {\r\n list-style-position: outside;\r\n padding-left: 1.5rem;\r\n }\r\n .igv-explanation strong {\r\n color: var(--rw-blue);\r\n font-weight: 600;\r\n }\r\n .igv-explanation code {\r\n background-color: var(--rw-background-light);\r\n color: var(--rw-orange);\r\n padding: 0.2rem 0.4rem;\r\n border-radius: 4px;\r\n font-family: 'Courier New', Courier, monospace;\r\n font-weight: 600;\r\n }\r\n\r\n\r\n \/* ----------------------------------------- *\/\r\n \/* --- Dise\u00f1o Responsivo --- *\/\r\n \/* ----------------------------------------- *\/\r\n @media (max-width: 640px) {\r\n body { padding: 1rem 0.5rem; }\r\n .calculator-container, .igv-explanation { padding: 1.5rem; }\r\n .line-item {\r\n grid-template-columns: 60px 1fr 40px;\r\n grid-template-rows: auto auto;\r\n gap: 0.5rem 0.75rem;\r\n padding: 0.75rem;\r\n border: 1px solid var(--rw-border-color);\r\n }\r\n .line-item .desc-input-group { grid-column: 1 \/ -1; }\r\n .line-item .btn-icon { grid-row: 1; grid-column: 3; }\r\n .line-item .line-total { grid-column: 1 \/ -1; text-align: right; padding-top: 0.5rem; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <main class=\"main-container\">\r\n \r\n <section class=\"calculator-container\">\r\n <nav class=\"tabs\">\r\n <button class=\"tab-link active\" data-tab=\"basico\">B\u00e1sico<\/button>\r\n <button class=\"tab-link\" data-tab=\"avanzado\">Avanzado<\/button>\r\n <\/nav>\r\n\r\n <div id=\"basico-tab\" class=\"tab-content active\">\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"base-input\" class=\"form-control\" placeholder=\" \" inputmode=\"decimal\">\r\n <label for=\"base-input\">Monto Base (Sin IGV)<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"igv-input\" class=\"form-control\" placeholder=\" \" inputmode=\"decimal\">\r\n <label for=\"igv-input\">IGV (18%)<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"total-input\" class=\"form-control\" placeholder=\" \" inputmode=\"decimal\">\r\n <label for=\"total-input\">Monto Total (Con IGV)<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"avanzado-tab\" class=\"tab-content\">\r\n <div class=\"advanced-options\">\r\n <label><input type=\"checkbox\" id=\"prices-include-igv\"> Precios de items incluyen IGV<\/label>\r\n <\/div>\r\n <div id=\"line-items-container\"><\/div>\r\n <button id=\"add-item-btn\">\r\n <i data-feather=\"plus-circle\" style=\"width:18px; height:18px;\"><\/i>\r\n A\u00f1adir Item\r\n <\/button>\r\n <\/div>\r\n \r\n <footer class=\"calculator-footer\">\r\n <div id=\"results-summary\" class=\"results-summary\" style=\"display: none;\"><\/div>\r\n <div class=\"amount-in-words\" style=\"display: none;\">SON: <span id=\"amount-text\">--<\/span><\/div>\r\n <div class=\"system-date\"><\/div>\r\n <div class=\"main-actions\">\r\n <button id=\"clear-all-btn\" class=\"btn-clear\">Limpiar campos<\/button>\r\n <\/div>\r\n <\/footer>\r\n <\/section>\r\n \r\n\r\n \r\n <section class=\"igv-explanation\">\r\n <h3>An\u00e1lisis Jur\u00eddico-Tributario del Impuesto General a las Ventas (IGV)<\/h3>\r\n \r\n <h4>Naturaleza y Estructura del Tributo<\/h4>\r\n <p>El Impuesto General a las Ventas (IGV) es un tributo de <strong>naturaleza indirecta<\/strong> que grava el consumo en su manifestaci\u00f3n final. Su dise\u00f1o t\u00e9cnico responde a un modelo de impuesto al valor agregado (IVA), cuya estructura se define como <strong>plurif\u00e1sica y no acumulativa<\/strong>.<\/p>\r\n <ul>\r\n <li><strong>Plurif\u00e1sica:<\/strong> La incidencia del impuesto se produce en cada una de las fases del ciclo econ\u00f3mico de producci\u00f3n y distribuci\u00f3n (e.g., importaci\u00f3n, fabricaci\u00f3n, distribuci\u00f3n mayorista, venta minorista).<\/li>\r\n <li><strong>No Acumulativa:<\/strong> Este es el principio cardinal del sistema. El mecanismo del cr\u00e9dito fiscal neutraliza la carga impositiva soportada en las etapas precedentes. De este modo, se evita un efecto de \"impuesto en cascada\", asegurando que el gravamen recaiga exclusivamente sobre el <strong>valor agregado<\/strong> en cada fase y sea econ\u00f3micamente trasladado hasta ser soportado por el consumidor final, quien act\u00faa como sujeto pasivo <i>de facto<\/i>.<\/li>\r\n <\/ul>\r\n\r\n <h4>\u00c1mbito de Aplicaci\u00f3n: El Hecho Imponible<\/h4>\r\n <p>La obligaci\u00f3n tributaria del IGV se configura con la realizaci\u00f3n de las operaciones tipificadas en el art\u00edculo 1\u00b0 del Texto \u00danico Ordenado de la Ley del IGV e ISC (Decreto Supremo N\u00b0 055-99-EF). Estas operaciones, que constituyen el hecho generador del impuesto, son:<\/p>\r\n <ul>\r\n <li>La venta en el pa\u00eds de bienes muebles.<\/li>\r\n <li>La prestaci\u00f3n o utilizaci\u00f3n de servicios en el pa\u00eds.<\/li>\r\n <li>Los contratos de construcci\u00f3n.<\/li>\r\n <li>La primera venta de inmuebles que realicen los constructores de los mismos.<\/li>\r\n <li>La importaci\u00f3n de bienes.<\/li>\r\n <\/ul>\r\n\r\n <h4>Determinaci\u00f3n de la Obligaci\u00f3n Tributaria<\/h4>\r\n <p>La cuantificaci\u00f3n del impuesto a pagar se fundamenta en la interacci\u00f3n de los siguientes elementos estructurales:<\/p>\r\n <ul>\r\n <li><strong>Base Imponible:<\/strong> Corresponde al valor de la contraprestaci\u00f3n econ\u00f3mica de la operaci\u00f3n gravada (valor de venta, retribuci\u00f3n por el servicio, valor de construcci\u00f3n, etc.). Sobre esta base se aplica la al\u00edcuota.<\/li>\r\n <li><strong>Al\u00edcuota (Tasa):<\/strong> La tasa impositiva vigente es del <strong>18%<\/strong>. Esta se descompone en un 16% correspondiente al IGV propiamente dicho y un 2% destinado al Impuesto de Promoci\u00f3n Municipal (IPM).<\/li>\r\n <li><strong>D\u00e9bito Fiscal:<\/strong> Es el monto que resulta de aplicar la al\u00edcuota del 18% sobre la base imponible de las operaciones gravadas (ventas, servicios prestados) que realiza un contribuyente en un per\u00edodo mensual. Constituye el IGV que el contribuyente traslada a sus clientes.<\/li>\r\n <li><strong>Cr\u00e9dito Fiscal:<\/strong> Es el monto del IGV que le ha sido trasladado al contribuyente en sus adquisiciones de bienes, servicios y contratos de construcci\u00f3n, y que se encuentra consignado por separado en los comprobantes de pago respectivos. Su utilizaci\u00f3n est\u00e1 sujeta al cumplimiento de requisitos sustanciales y formales establecidos en la ley.<\/li>\r\n <\/ul>\r\n <h4>Mecanismo de Liquidaci\u00f3n Mensual<\/h4>\r\n <p>El impuesto a pagar a la Superintendencia Nacional de Aduanas y de Administraci\u00f3n Tributaria (SUNAT) se determina mensualmente. La liquidaci\u00f3n se efect\u00faa mediante la sustracci\u00f3n del cr\u00e9dito fiscal del d\u00e9bito fiscal del mismo per\u00edodo. La f\u00f3rmula es la siguiente: <code>Impuesto a Pagar = D\u00e9bito Fiscal - Cr\u00e9dito Fiscal<\/code>.<\/p>\r\n <\/section>\r\n \r\n <\/main>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ --- CONSTANTES Y ELEMENTOS DEL DOM ---\r\n const IGV_RATE = 0.18;\r\n const TABS = document.querySelectorAll('.tab-link');\r\n const TAB_CONTENTS = document.querySelectorAll('.tab-content');\r\n \r\n const baseInput = document.getElementById('base-input');\r\n const igvInput = document.getElementById('igv-input');\r\n const totalInput = document.getElementById('total-input');\r\n\r\n const pricesIncludeIgvCheck = document.getElementById('prices-include-igv');\r\n const lineItemsContainer = document.getElementById('line-items-container');\r\n const addItemBtn = document.getElementById('add-item-btn');\r\n \r\n const resultsSummary = document.getElementById('results-summary');\r\n const amountTextContainer = document.querySelector('.amount-in-words');\r\n const amountTextSpan = document.getElementById('amount-text');\r\n const currentDateSpan = document.querySelector('.system-date');\r\n const clearAllBtn = document.getElementById('clear-all-btn');\r\n\r\n let isCalculating = false;\r\n let highlightTimeout;\r\n\r\n \/\/ --- FORMATEADORES Y UTILIDADES ---\r\n const currencyFormatter = new Intl.NumberFormat('es-PE', { style: 'currency', currency: 'PEN' });\r\n const numberFormatter = new Intl.NumberFormat('es-PE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\r\n const numeroALetras = (num) => { \r\n const unidades = ['', 'UN', 'DOS', 'TRES', 'CUATRO', 'CINCO', 'SEIS', 'SIETE', 'OCHO', 'NUEVE'];\r\n const decenas = ['', 'DIEZ', 'VEINTE', 'TREINTA', 'CUARENTA', 'CINCUENTA', 'SESENTA', 'SETENTA', 'OCHENTA', 'NOVENTA'];\r\n const centenas = ['', 'CIENTO', 'DOSCIENTOS', 'TRESCIENTOS', 'CUATROCIENTOS', 'QUINIENTOS', 'SEISCIENTOS', 'SETECIENTOS', 'OCHOCIENTOS', 'NOVECIENTOS'];\r\n const especiales = ['DIEZ', 'ONCE', 'DOCE', 'TRECE', 'CATORCE', 'QUINCE', 'DIECIS\u00c9IS', 'DIECISIETE', 'DIECIOCHO', 'DIECINUEVE'];\r\n\r\n function Seccion(num, divisor, singular, plural) {\r\n const cientos = Math.floor(num \/ 100);\r\n const resto = num % 100;\r\n let letras = '';\r\n if (num === 100) { letras = 'CIEN'; } \r\n else if (cientos > 0) { letras = centenas[cientos] + (resto > 0 ? ' ' : ''); }\r\n if (resto > 0) {\r\n if (resto < 10) { letras += unidades[resto]; } \r\n else if (resto < 20) { letras += especiales[resto - 10]; } \r\n else {\r\n const decena = Math.floor(resto \/ 10);\r\n const unidad = resto % 10;\r\n letras += decenas[decena];\r\n if (unidad > 0) { letras += (decena === 2 ? 'I' : ' Y ') + unidades[unidad]; }\r\n }\r\n }\r\n if (num > 0) {\r\n const miles = Math.floor(divisor \/ 1000);\r\n if (miles === 1) { letras += ' ' + singular; } \r\n else if (miles > 1) { letras += ' ' + plural; }\r\n }\r\n return letras;\r\n }\r\n\r\n if (num === null || isNaN(num) || num === 0) return '--';\r\n const numero = parseFloat(num).toFixed(2);\r\n const [integerPart, decimalPart] = numero.split('.');\r\n const entero = parseInt(integerPart, 10);\r\n if (entero === 0 && parseInt(decimalPart, 10) === 0) return 'CERO CON 00\/100 SOLES';\r\n\r\n const millones = Math.floor(entero \/ 1000000);\r\n const miles = Math.floor((entero % 1000000) \/ 1000);\r\n const resto = entero % 1000;\r\n\r\n let letras = '';\r\n if (millones > 0) { letras += (millones === 1 ? 'UN MILL\u00d3N ' : Seccion(millones, millones * 1000000, 'MILL\u00d3N', 'MILLONES') + ' '); }\r\n if (miles > 0) { letras += (miles === 1 ? 'MIL ' : Seccion(miles, miles * 1000, 'MIL', 'MIL') + ' '); }\r\n if (resto > 0) { letras += Seccion(resto, 0, '', ''); }\r\n \r\n return `${letras.trim() || 'CERO'} CON ${decimalPart}\/100 SOLES`;\r\n };\r\n const parseInput = (value) => (typeof value !== 'string' || value.trim() === '') ? NaN : parseFloat(value.replace(\/,\/g, ''));\r\n const highlightField = (field) => {\r\n field.classList.add('highlight');\r\n clearTimeout(highlightTimeout);\r\n highlightTimeout = setTimeout(() => field.classList.remove('highlight'), 1000);\r\n };\r\n\r\n \/\/ --- FUNCIONES DE C\u00c1LCULO Y RENDERIZADO ---\r\n function updateResults(subtotal, igv, total) {\r\n if (isNaN(total) || total <= 0) {\r\n resultsSummary.style.display = 'none';\r\n amountTextContainer.style.display = 'none';\r\n return;\r\n }\r\n resultsSummary.innerHTML = `\r\n <div class=\"summary-item\">\r\n <span class=\"label\">Monto Base<\/span>\r\n <span class=\"value\">${currencyFormatter.format(subtotal)}<\/span>\r\n <\/div>\r\n <div class=\"summary-item\">\r\n <span class=\"label\">IGV (18%)<\/span>\r\n <span class=\"value\">${currencyFormatter.format(igv)}<\/span>\r\n <\/div>\r\n <div class=\"summary-item total\">\r\n <span class=\"label\">Total<\/span>\r\n <span class=\"value\">${currencyFormatter.format(total)}<\/span>\r\n <\/div>`;\r\n amountTextSpan.textContent = numeroALetras(total);\r\n resultsSummary.style.display = 'block';\r\n amountTextContainer.style.display = 'block';\r\n }\r\n\r\n function calculateBasic(source) {\r\n if (isCalculating) return;\r\n isCalculating = true;\r\n\r\n let base = parseInput(baseInput.value);\r\n let igv = parseInput(igvInput.value);\r\n let total = parseInput(totalInput.value);\r\n let newBase = NaN, newIgv = NaN, newTotal = NaN;\r\n\r\n if (source === 'base' && !isNaN(base)) {\r\n newIgv = base * IGV_RATE;\r\n newTotal = base + newIgv;\r\n igvInput.value = numberFormatter.format(newIgv);\r\n totalInput.value = numberFormatter.format(newTotal);\r\n highlightField(igvInput);\r\n highlightField(totalInput);\r\n } else if (source === 'igv' && !isNaN(igv)) {\r\n newBase = igv \/ IGV_RATE;\r\n newTotal = newBase + igv;\r\n baseInput.value = numberFormatter.format(newBase);\r\n totalInput.value = numberFormatter.format(newTotal);\r\n highlightField(baseInput);\r\n highlightField(totalInput);\r\n } else if (source === 'total' && !isNaN(total)) {\r\n newBase = total \/ (1 + IGV_RATE);\r\n newIgv = total - newBase;\r\n baseInput.value = numberFormatter.format(newBase);\r\n igvInput.value = numberFormatter.format(newIgv);\r\n highlightField(baseInput);\r\n highlightField(igvInput);\r\n }\r\n \r\n updateResults(newBase || base, newIgv || igv, newTotal || total);\r\n isCalculating = false;\r\n }\r\n\r\n function calculateAdvanced() {\r\n let grandSubtotal = 0;\r\n const includeIgv = pricesIncludeIgvCheck.checked;\r\n\r\n document.querySelectorAll('.line-item').forEach(item => {\r\n const qty = parseInput(item.querySelector('.qty-input').value) || 0;\r\n const unitPrice = parseInput(item.querySelector('.unit-price-input').value) || 0;\r\n let lineSubtotal = includeIgv ? (qty * unitPrice) \/ (1 + IGV_RATE) : qty * unitPrice;\r\n grandSubtotal += lineSubtotal;\r\n });\r\n \r\n const grandIgv = grandSubtotal * IGV_RATE;\r\n const grandTotal = grandSubtotal + grandIgv;\r\n updateResults(grandSubtotal, grandIgv, grandTotal);\r\n }\r\n\r\n \/\/ --- MANEJO DEL DOM Y EVENTOS ---\r\n function addNewLineItem() {\r\n const newItem = document.createElement('div');\r\n newItem.className = 'line-item';\r\n newItem.innerHTML = `\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control qty-input\" placeholder=\" \" inputmode=\"numeric\">\r\n <label>Cant.<\/label>\r\n <\/div>\r\n <div class=\"form-group desc-input-group\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\" \">\r\n <label>Descripci\u00f3n<\/label>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <input type=\"text\" class=\"form-control unit-price-input\" placeholder=\" \" inputmode=\"decimal\">\r\n <label>P. Unitario<\/label>\r\n <\/div>\r\n <button class=\"btn-icon\" title=\"Eliminar item\"><i data-feather=\"trash-2\"><\/i><\/button>\r\n `;\r\n lineItemsContainer.appendChild(newItem);\r\n feather.replace(); \/\/ Actualizar iconos\r\n newItem.querySelector('.qty-input').focus();\r\n }\r\n\r\n function clearAll() {\r\n isCalculating = true;\r\n baseInput.value = '';\r\n igvInput.value = '';\r\n totalInput.value = '';\r\n lineItemsContainer.innerHTML = '';\r\n addNewLineItem();\r\n pricesIncludeIgvCheck.checked = false;\r\n updateResults(0, 0, 0);\r\n isCalculating = false;\r\n }\r\n\r\n function setupInitialState() {\r\n currentDateSpan.textContent = `Cusco, ${new Date().toLocaleDateString('es-PE', {\r\n year: 'numeric', month: 'long', day: 'numeric'\r\n })}`;\r\n clearAll();\r\n feather.replace();\r\n }\r\n\r\n \/\/ --- EVENT LISTENERS ---\r\n TABS.forEach(tab => {\r\n tab.addEventListener('click', () => {\r\n TABS.forEach(t => t.classList.remove('active'));\r\n tab.classList.add('active');\r\n TAB_CONTENTS.forEach(c => c.classList.remove('active'));\r\n document.getElementById(tab.dataset.tab + '-tab').classList.add('active');\r\n clearAll();\r\n });\r\n });\r\n\r\n baseInput.addEventListener('input', () => calculateBasic('base'));\r\n igvInput.addEventListener('input', () => calculateBasic('igv'));\r\n totalInput.addEventListener('input', () => calculateBasic('total'));\r\n\r\n addItemBtn.addEventListener('click', addNewLineItem);\r\n clearAllBtn.addEventListener('click', clearAll);\r\n \r\n pricesIncludeIgvCheck.addEventListener('change', calculateAdvanced);\r\n lineItemsContainer.addEventListener('input', (e) => {\r\n if (e.target.classList.contains('qty-input') || e.target.classList.contains('unit-price-input')) {\r\n calculateAdvanced();\r\n }\r\n });\r\n lineItemsContainer.addEventListener('click', (e) => {\r\n const removeBtn = e.target.closest('.btn-icon');\r\n if (removeBtn) {\r\n removeBtn.closest('.line-item').remove();\r\n if (lineItemsContainer.querySelectorAll('.line-item').length === 0) {\r\n addNewLineItem();\r\n }\r\n calculateAdvanced();\r\n }\r\n });\r\n\r\n \/\/ --- INICIALIZACI\u00d3N ---\r\n setupInitialState();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Calculadora de IGV Intuitiva (18%) y An\u00e1lisis del Impuesto – Ruwark B\u00e1sico Avanzado Monto Base (Sin IGV) IGV (18%) Monto Total (Con IGV) Precios de items incluyen IGV A\u00f1adir Item SON: — Limpiar campos An\u00e1lisis Jur\u00eddico-Tributario del Impuesto General a las Ventas (IGV) Naturaleza y Estructura del Tributo El Impuesto General a las Ventas (IGV) […]<\/p>\n","protected":false},"author":1,"featured_media":4692,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-4690","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ministerio-de-cultura"],"_links":{"self":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/posts\/4690","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/comments?post=4690"}],"version-history":[{"count":0,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/posts\/4690\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/media\/4692"}],"wp:attachment":[{"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/media?parent=4690"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/categories?post=4690"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ruwark.com\/blog\/wp-json\/wp\/v2\/tags?post=4690"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}