.-.-.-.-.-

<!doctype html>
<html lang="es">
<head>
	
	
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WZ4HG9J5VY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-WZ4HG9J5VY');
</script>
	
	
	
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Calculadora IGV y Detracciones - Perú</title>
  <style>
    :root{
      --bg:#f6f7fb;
      --card:#ffffff;
      --accent:#0b63d6;
      --muted:#6b7280;
      --text:#111;
    }
    [data-theme='dark']{
      --bg:#0e1117;
      --card:#1c1f26;
      --accent:#3a82f7;
      --muted:#9ca3af;
      --text:#e5e7eb;
    }
    body{
      font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
      background:var(--bg);
      color:var(--text);
      margin:0;
      padding:24px;
      transition:background .3s,color .3s;
    }
    h1{margin:0 0 16px;font-size:20px}
    .container{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:18px}
    @media(min-width:900px){.container{grid-template-columns:1fr 1fr}}
    .card{
      background:var(--card);
      padding:18px;
      border-radius:10px;
      box-shadow:0 6px 18px rgba(20,20,30,0.04);
      transition:background .3s;
    }
    label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
    input[type="number"], select{
      width:100%;
      padding:10px;
      border:1px solid #e6e9ef;
      border-radius:8px;
      font-size:14px;
      background:var(--bg);
      color:var(--text);
    }
    .row{display:flex;gap:10px;align-items:center;margin-bottom:10px}
    .muted{color:var(--muted);font-size:13px}
    button{
      background:var(--accent);
      color:white;
      border:none;
      padding:10px 14px;
      border-radius:8px;
      cursor:pointer;
    }
    .result{
      background:#f3f6ff;
      padding:12px;
      border-radius:8px;
      margin-top:10px;
      border:1px dashed #dfe9ff;
    }
    [data-theme='dark'] .result{
      background:#1a2230;
      border-color:#2b3445;
    }
    .small{font-size:13px;color:var(--muted)}
    .flex-between{display:flex;justify-content:space-between;align-items:center}
    footer{margin-top:14px;font-size:13px;color:var(--muted)}
    .theme-toggle{
      position:fixed;
      top:10px;
      right:10px;
      background:var(--accent);
      color:white;
      border:none;
      border-radius:50%;
      width:40px;
      height:40px;
      cursor:pointer;
    }
  </style>
</head>
<body>
  <button id="themeToggle" class="theme-toggle" title="Cambiar tema">🌓</button>
  <main class="container">
    <section class="card" aria-labelledby="igv-title">
      <h1 id="igv-title">Calculadora de IGV (Perú)</h1>
      <p class="small">Tasa general usada por defecto: <strong id="igvRateLabel">18%</strong>.</p>
      <div class="row">
        <div style="flex:1">
          <label for="igvAmount">Monto</label>
          <input id="igvAmount" type="number" step="0.01" value="100.00" />
        </div>
        <div style="width:160px">
          <label for="igvMode">Modo</label>
          <select id="igvMode">
            <option value="sin">Precio sin IGV</option>
            <option value="con">Precio con IGV</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div style="flex:1">
          <label for="igvPercent">Tasa IGV (%)</label>
          <input id="igvPercent" type="number" step="0.01" value="18.00" />
        </div>
        <div style="width:160px">
          <label>&nbsp;</label>
          <button id="calcIgvBtn">Calcular IGV</button>
        </div>
      </div>
      <div id="igvResult" class="result" aria-live="polite">
        <div class="flex-between"><div class="muted">Base imponible</div><div id="baseIgv">S/ 0.00</div></div>
        <div class="flex-between"><div class="muted">IGV (monto)</div><div id="igvAmountRes">S/ 0.00</div></div>
        <div class="flex-between"><div class="muted">Total</div><div id="totalIgv">S/ 0.00</div></div>
      </div>
    </section>
    <section class="card" aria-labelledby="det-title">
      <h1 id="det-title">Calculadora de Detracciones (SPOT)</h1>
      <div class="row">
        <div style="flex:1">
          <label for="detMonto">Monto total (S/)</label>
          <input id="detMonto" type="number" step="0.01" value="1000.00" />
        </div>
      </div>
      <div class="row">
        <div style="flex:1">
          <label for="detCat">Categoría (tasa estándar)</label>
          <select id="detCat">
            <option value="12">Intermediación laboral y tercerización — 12%</option>
            <option value="10">Arrendamiento de bienes — 10%</option>
            <option value="12">Mantenimiento y reparación de bienes muebles — 12%</option>
            <option value="10">Movimiento de carga — 10%</option>
            <option value="12">Otros servicios empresariales — 12%</option>
            <option value="10">Comisión mercantil — 10%</option>
            <option value="10">Fabricación de bienes por encargo — 10%</option>
            <option value="10">Servicio de transporte de personas — 10%</option>
            <option value="4">Contratos de construcción — 4%</option>
            <option value="12">Demás servicios gravados con IGV — 12%</option>
          </select>
        </div>
        <div style="width:160px">
          <label>&nbsp;</label>
          <button id="calcDetBtn">Calcular Detracción</button>
        </div>
      </div>
      <div id="detResult" class="result" aria-live="polite">
        <div class="flex-between"><div class="muted">Tasa de detracción</div><div id="detRate">0%</div></div>
        <div class="flex-between"><div class="muted">Monto de detracción</div><div id="detAmount">S/ 0.00</div></div>
        <div class="flex-between"><div class="muted">Monto a pagar al proveedor</div><div id="detPayable">S/ 0.00</div></div>
      </div>
    </section>
  </main>
  <footer style="max-width:980px;margin:18px auto 40px">
    <div class="small muted">Tasas basadas en las publicadas por SUNAT Perú.		</div>
    <p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7351359040521457"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7351359040521457"
     data-ad-slot="8935379481"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
  </footer>
  <script>
    const fmt=v=>'S/ '+Number(v||0).toLocaleString('es-PE',{minimumFractionDigits:2,maximumFractionDigits:2});
    const igvAmountInput=document.getElementById('igvAmount'),igvMode=document.getElementById('igvMode'),igvPercent=document.getElementById('igvPercent'),calcIgvBtn=document.getElementById('calcIgvBtn'),baseIgvEl=document.getElementById('baseIgv'),igvAmountResEl=document.getElementById('igvAmountRes'),totalIgvEl=document.getElementById('totalIgv'),igvRateLabel=document.getElementById('igvRateLabel');
    const detMonto=document.getElementById('detMonto'),detCat=document.getElementById('detCat'),calcDetBtn=document.getElementById('calcDetBtn'),detRateEl=document.getElementById('detRate'),detAmountEl=document.getElementById('detAmount'),detPayableEl=document.getElementById('detPayable');
    igvRateLabel.textContent=igvPercent.value+'%';
    function calcularIGV(){const raw=parseFloat(igvAmountInput.value)||0,tasa=(parseFloat(igvPercent.value)||0)/100;let base=0,igv=0,total=0;if(igvMode.value==='sin'){base=raw;igv=+(base*tasa);total=+(base+igv);}else{total=raw;base=+(total/(1+tasa));igv=+(total-base);}baseIgvEl.textContent=fmt(base);igvAmountResEl.textContent=fmt(igv);totalIgvEl.textContent=fmt(total);igvRateLabel.textContent=(tasa*100).toFixed(2)+'%';}
    function calcularDetraccion(){const monto=parseFloat(detMonto.value)||0,tasa=parseFloat(detCat.value)||0,det=+(monto*(tasa/100)),aPagar=+(monto-det);detRateEl.textContent=tasa.toFixed(2)+'%';detAmountEl.textContent=fmt(det);detPayableEl.textContent=fmt(aPagar);}
    calcIgvBtn.addEventListener('click',calcularIGV);calcDetBtn.addEventListener('click',calcularDetraccion);
    calcularIGV();calcularDetraccion();
    // Dark mode toggle
    const themeToggle=document.getElementById('themeToggle');
    const prefersDark=window.matchMedia('(prefers-color-scheme: dark)').matches;
    const savedTheme=localStorage.getItem('theme');
    if(savedTheme){document.documentElement.dataset.theme=savedTheme;}
    else if(prefersDark){document.documentElement.dataset.theme='dark';}
    themeToggle.addEventListener('click',()=>{
      const current=document.documentElement.dataset.theme==='dark'?'light':'dark';
      document.documentElement.dataset.theme=current;
      localStorage.setItem('theme',current);
    });
  </script>
	
	
	
</body>
</html>

/home/admiracreativos/sunat.admiracreativos.com/index.html