{"id":256,"date":"2025-10-09T07:04:51","date_gmt":"2025-10-09T05:04:51","guid":{"rendered":"https:\/\/btconsulta.com\/?page_id=256"},"modified":"2025-10-09T09:05:00","modified_gmt":"2025-10-09T07:05:00","slug":"bebuilder-256","status":"publish","type":"page","link":"https:\/\/btconsulta.com\/index.php\/bebuilder-256\/","title":{"rendered":"BeBuilder #256"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"256\" class=\"elementor elementor-256\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c42fb5a e-flex e-con-boxed e-con e-parent\" data-id=\"c42fb5a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8f4c48 elementor-widget elementor-widget-html\" data-id=\"d8f4c48\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ======== Calculadora de Cr\u00e9dito (v4: simple por defecto + ganancia en verde) ======== -->\r\n<div id=\"loan-calculator\" class=\"lc-wrap lc-light\">\r\n  <div class=\"lc-card\">\r\n    <h2 class=\"lc-title\">Calculadora de Cr\u00e9dito<\/h2>\r\n\r\n    <form id=\"lc-form\" class=\"lc-grid\" autocomplete=\"off\">\r\n      <label class=\"lc-field\">\r\n        <span>Moneda<\/span>\r\n        <select id=\"lc-currency\">\r\n          <option value=\"USD\" data-symbol=\"$\">USD \u2014 D\u00f3lares<\/option>\r\n          <option value=\"GTQ\" data-symbol=\"Q\" selected>GTQ \u2014 Quetzales<\/option>\r\n          <option value=\"CRC\" data-symbol=\"\u20a1\">CRC \u2014 Colones<\/option>\r\n          <option value=\"MXN\" data-symbol=\"$\">MXN \u2014 Pesos<\/option>\r\n        <\/select>\r\n      <\/label>\r\n\r\n      <label class=\"lc-field\">\r\n        <span>Monto del cr\u00e9dito<\/span>\r\n        <div class=\"lc-input-addon\">\r\n          <input id=\"lc-principal\" type=\"text\" inputmode=\"decimal\" placeholder=\"Ej.: 10,000\">\r\n          <span id=\"lc-currency-addon\" class=\"lc-addon\">Q<\/span>\r\n        <\/div>\r\n      <\/label>\r\n\r\n      <label class=\"lc-field\">\r\n        <span>Tasa de inter\u00e9s anual (%)<\/span>\r\n        <input id=\"lc-rate\" type=\"text\" inputmode=\"decimal\" placeholder=\"Ej.: 18\">\r\n      <\/label>\r\n\r\n      <label class=\"lc-field\">\r\n        <span>Plazo<\/span>\r\n        <div class=\"lc-inline\">\r\n          <input id=\"lc-term\" type=\"text\" inputmode=\"numeric\" placeholder=\"Ej.: 24\">\r\n          <select id=\"lc-term-unit\" class=\"lc-unit\">\r\n            <option value=\"months\" selected>Meses<\/option>\r\n            <option value=\"years\">A\u00f1os<\/option>\r\n          <\/select>\r\n        <\/div>\r\n      <\/label>\r\n\r\n      <label class=\"lc-field\">\r\n        <span>Modo de c\u00e1lculo<\/span>\r\n        <select id=\"lc-mode\">\r\n          <!-- Simple va primero y es el seleccionado por defecto -->\r\n          <option value=\"simple\" selected>Inter\u00e9s simple (monto final)<\/option>\r\n          <option value=\"amortized\">Cuota mensual (amortizado)<\/option>\r\n        <\/select>\r\n      <\/label>\r\n\r\n      <label class=\"lc-field\" id=\"lc-simple-compound-wrap\">\r\n        <span>Base del inter\u00e9s simple<\/span>\r\n        <select id=\"lc-simple-base\">\r\n          <option value=\"annual\" selected>Inter\u00e9s anual simple<\/option>\r\n          <option value=\"monthly\">Inter\u00e9s mensual simple<\/option>\r\n        <\/select>\r\n      <\/label>\r\n\r\n      <div class=\"lc-actions\">\r\n        <button id=\"lc-calc-btn\" type=\"submit\">Calcular<\/button>\r\n        <small class=\"lc-hint\">Decimales con punto (.)<\/small>\r\n      <\/div>\r\n    <\/form>\r\n\r\n    <div class=\"lc-results lc-results--wide\">\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Pago mensual<\/span><strong id=\"lc-pay\">\u2014<\/strong><\/div>\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Abono capital\/mes (prom.)<\/span><strong id=\"lc-cap-per-mo\">\u2014<\/strong><\/div>\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Inter\u00e9s mensual (prom.)<\/span><strong id=\"lc-int-per-mo\">\u2014<\/strong><\/div>\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Total a pagar<\/span><strong id=\"lc-total\">\u2014<\/strong><\/div>\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Capital total<\/span><strong id=\"lc-capital\">\u2014<\/strong><\/div>\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Inter\u00e9s total<\/span><strong id=\"lc-int-total\">\u2014<\/strong><\/div>\r\n      <div class=\"lc-result\"><span class=\"lc-label\">Diferencia (Total \u2013 Capital)<\/span><strong id=\"lc-diff\">\u2014<\/strong><\/div>\r\n      <!-- Ganancia en verde -->\r\n      <div class=\"lc-result lc-result--profit\">\r\n        <span class=\"lc-label\">Ganancia (remanente)<\/span>\r\n        <strong id=\"lc-profit\">\u2014<\/strong>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <details class=\"lc-details\" id=\"lc-details\" open>\r\n      <summary>Ver desglose<\/summary>\r\n      <div class=\"lc-breakdown\" id=\"lc-breakdown\">\r\n        <em>Completa los datos y pulsa <b>Calcular<\/b>.<\/em>\r\n      <\/div>\r\n    <\/details>\r\n\r\n    <p class=\"lc-note\">\r\n      Nota: C\u00e1lculo referencial. No sustituye ofertas o contratos de tu instituci\u00f3n financiera.\r\n    <\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .lc-wrap.lc-light{\r\n    --bg:#f3f4f6; --card:#fff; --muted:#6b7280; --text:#374151; --border:#e5e7eb;\r\n    --accent:#0284c7; --ring:#0284c733;\r\n    --profit-bg:#ecfdf5; --profit-bd:#a7f3d0; --profit-tx:#065f46;\r\n    font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; color:var(--text); background:var(--bg); padding:8px;\r\n  }\r\n  .lc-card{max-width:900px;margin:20px auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 22px;box-shadow:0 6px 18px #00000010}\r\n  .lc-title{margin:0 0 18px;font-size:22px;line-height:1.25;letter-spacing:.2px}\r\n\r\n  .lc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\r\n  @media (max-width:720px){.lc-grid{grid-template-columns:1fr}}\r\n\r\n  .lc-field{display:flex;flex-direction:column;gap:6px}\r\n  .lc-field span{font-size:12px;color:var(--muted)}\r\n  .lc-field input,.lc-field select{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);outline:none;appearance:none}\r\n  .lc-field input:focus,.lc-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}\r\n\r\n  \/* Input con s\u00edmbolo a la derecha *\/\r\n  .lc-input-addon{position:relative;display:flex;align-items:center}\r\n  .lc-input-addon input{width:100%;padding-right:42px}\r\n  .lc-addon{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#6b7280;background:#f8fafc;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:12px;pointer-events:none}\r\n\r\n  \/* Select limpio (evitar fondo morado donde sea posible) *\/\r\n  select, option{background-color:#fff!important;color:var(--text)!important}\r\n  option:hover, option:checked{background-color:#e7f3ff!important;color:var(--text)!important}\r\n\r\n  .lc-inline{display:flex;gap:8px}\r\n  .lc-unit{width:120px}\r\n\r\n  .lc-actions{grid-column:1\/-1;display:flex;align-items:center;gap:12px;margin-top:6px}\r\n  #lc-calc-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:10px 16px;border-radius:10px;font-weight:600;cursor:pointer}\r\n  #lc-calc-btn:hover{filter:brightness(.93)}\r\n  .lc-hint{color:var(--muted)}\r\n\r\n  .lc-results{display:grid;gap:12px;margin-top:16px}\r\n  .lc-results--wide{grid-template-columns:repeat(3,minmax(0,1fr))}\r\n  @media (max-width:900px){.lc-results--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}\r\n  @media (max-width:640px){.lc-results--wide{grid-template-columns:1fr}}\r\n  .lc-result{background:#fafafa;border:1px solid var(--border);padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:6px}\r\n  .lc-result--profit{background:var(--profit-bg);border-color:var(--profit-bd)}\r\n  .lc-result--profit strong{color:var(--profit-tx)}\r\n  .lc-label{color:var(--muted);font-size:12px}\r\n\r\n  .lc-details summary{cursor:pointer;margin-top:14px;color:#0369a1}\r\n  .lc-breakdown{margin-top:10px;font-size:14px;line-height:1.55;color:#334155}\r\n  .lc-note{margin-top:12px;color:var(--muted);font-size:12px}\r\n  .lc-badge{display:inline-block;font-size:11px;padding:2px 8px;border:1px solid var(--border);border-radius:999px;margin-left:6px;color:#475569;background:#f1f5f9}\r\n<\/style>\r\n\r\n<script>\r\n(function(){\r\n  const $ = (id)=>document.getElementById(id);\r\n\r\n  const currencyEl = $('lc-currency');\r\n  const principalEl = $('lc-principal');\r\n  const addonEl = $('lc-currency-addon');\r\n  const rateEl = $('lc-rate');\r\n  const termEl = $('lc-term');\r\n  const termUnitEl = $('lc-term-unit');\r\n  const modeEl = $('lc-mode');\r\n  const simpleBaseWrap = $('lc-simple-compound-wrap');\r\n  const simpleBaseEl = $('lc-simple-base');\r\n\r\n  \/\/ outputs\r\n  const outPay = $('lc-pay'), outCapPerMo = $('lc-cap-per-mo'), outIntPerMo = $('lc-int-per-mo');\r\n  const outTotal = $('lc-total'), outCapital = $('lc-capital'), outIntTotal = $('lc-int-total'), outDiff = $('lc-diff'), outProfit = $('lc-profit');\r\n\r\n  const breakdown = $('lc-breakdown');\r\n  const form = $('lc-form');\r\n\r\n  \/\/ utils\r\n  const getSymbol = ()=> currencyEl.options[currencyEl.selectedIndex].dataset.symbol || currencyEl.value;\r\n\r\n  function fmtLive(raw){\r\n    if (!raw) return '';\r\n    raw = String(raw).replace(\/,\/g,'');\r\n    const parts = raw.split('.');\r\n    const int = parts[0].replace(\/\\D\/g,'');\r\n    const dec = parts[1] ? parts[1].replace(\/\\D\/g,'') : '';\r\n    const intWithCommas = int.replace(\/\\B(?=(\\d{3})+(?!\\d))\/g, ',');\r\n    return dec ? `${intWithCommas}.${dec}` : intWithCommas;\r\n  }\r\n  const parseFromCommas = (v)=> parseFloat(String(v).replace(\/,\/g,''));\r\n  const fmtCurrency = (value, currency)=>{\r\n    try { return new Intl.NumberFormat('en-US',{style:'currency',currency,maximumFractionDigits:2}).format(value||0); }\r\n    catch { return currency+' '+(value||0).toLocaleString('en-US',{maximumFractionDigits:2}); }\r\n  };\r\n  const toMonths = (n,u)=> u==='years'? n*12 : n;\r\n\r\n  const calcAmortized = (P, annualRate, months)=>{\r\n    const mRate = (annualRate\/100)\/12;\r\n    if (months<=0) return {payment:0,total:0,interest:0, first:{int:0,cap:0}};\r\n    if (mRate===0){\r\n      const p = P\/months;\r\n      return {payment:p,total:p*months,interest:p*months-P, first:{int:0,cap:p}};\r\n    }\r\n    const pmt = P*mRate\/(1-Math.pow(1+mRate,-months));\r\n    const firstInterest = P*mRate;\r\n    const firstCapital = pmt - firstInterest;\r\n    const total = pmt*months;\r\n    return {payment:pmt,total,interest: total-P, first:{int:firstInterest, cap:firstCapital}};\r\n  };\r\n  const calcSimple = (P, r, n, unit, base)=>{\r\n    if (base==='annual'){ const t = unit==='years'? n : n\/12; const I = P*(r\/100)*t; return {finalAmount:P+I,interest:I}; }\r\n    const tM = unit==='months'? n : n*12; const I = P*((r\/100))*tM; return {finalAmount:P+I,interest:I};\r\n  };\r\n\r\n  const showSimpleControls = (show)=>{ simpleBaseWrap.style.display = show ? '' : 'none'; };\r\n\r\n  \/\/ events\r\n  function refreshSymbol(){ addonEl.textContent = getSymbol(); }\r\n  currencyEl.addEventListener('change', refreshSymbol);\r\n  refreshSymbol();\r\n\r\n  principalEl.addEventListener('input', (e)=>{\r\n    const caret = e.target.selectionStart;\r\n    const before = e.target.value;\r\n    e.target.value = fmtLive(before);\r\n    e.target.selectionEnd = e.target.selectionStart = Math.min(e.target.value.length, caret + (e.target.value.length - before.length));\r\n  });\r\n\r\n  modeEl.addEventListener('change', ()=> showSimpleControls(modeEl.value==='simple'));\r\n  showSimpleControls(true); \/\/ por defecto simple\r\n\r\n  form.addEventListener('submit', function(e){\r\n    e.preventDefault();\r\n\r\n    const currency = currencyEl.value || 'USD';\r\n    const P = parseFromCommas(principalEl.value);\r\n    const r = parseFromCommas(rateEl.value);\r\n    const n = parseFromCommas(termEl.value);\r\n    const unit = termUnitEl.value;\r\n    const mode = modeEl.value;\r\n\r\n    if (!(P>0) || !(n>0) || r<0 || isNaN(r)){\r\n      [outPay,outCapPerMo,outIntPerMo,outTotal,outCapital,outIntTotal,outDiff,outProfit].forEach(el=>el.textContent='\u2014');\r\n      breakdown.innerHTML='<em>Completa monto, tasa y plazo y pulsa <b>Calcular<\/b>.<\/em>';\r\n      return;\r\n    }\r\n\r\n    if (mode==='amortized'){\r\n      const months = toMonths(n, unit);\r\n      const {payment,total,interest,first} = calcAmortized(P, r, months);\r\n\r\n      const capPerMoProm = P \/ months;\r\n      const intPerMoProm = interest \/ months;\r\n\r\n      outPay.textContent = fmtCurrency(payment, currency);\r\n      outCapPerMo.textContent = fmtCurrency(capPerMoProm, currency);\r\n      outIntPerMo.textContent = fmtCurrency(intPerMoProm, currency);\r\n      outTotal.textContent = fmtCurrency(total, currency);\r\n      outCapital.textContent = fmtCurrency(P, currency);\r\n      outIntTotal.textContent = fmtCurrency(interest, currency);\r\n      outDiff.textContent = fmtCurrency(total - P, currency);\r\n      outProfit.textContent = fmtCurrency(interest, currency); \/\/ Ganancia del prestamista\r\n\r\n      breakdown.innerHTML = `\r\n        <div><strong>Primer mes (amortizado)<\/strong><\/div>\r\n        <div>Inter\u00e9s del 1er mes: <strong>${fmtCurrency(first.int, currency)}<\/strong><\/div>\r\n        <div>Abono a capital 1er mes: <strong>${fmtCurrency(first.cap, currency)}<\/strong><\/div>\r\n        <hr style=\"border-color:#e5e7eb;margin:10px 0;\">\r\n        <div>Total a pagar: <strong>${fmtCurrency(total, currency)}<\/strong><\/div>\r\n        <div>Capital (desembolsado): <strong>${fmtCurrency(P, currency)}<\/strong><\/div>\r\n        <div>Ganancia (remanente): <strong>${fmtCurrency(interest, currency)}<\/strong><\/div>\r\n      `;\r\n    } else {\r\n      const base = simpleBaseEl.value;\r\n      const {finalAmount,interest} = calcSimple(P, r, n, unit, base);\r\n      const months = toMonths(n, unit);\r\n      const capPerMoProm = P \/ months;\r\n      const intPerMoProm = interest \/ months;\r\n\r\n      outPay.textContent = fmtCurrency((finalAmount - P)\/months + capPerMoProm, currency);\r\n      outCapPerMo.textContent = fmtCurrency(capPerMoProm, currency);\r\n      outIntPerMo.textContent = fmtCurrency(intPerMoProm, currency);\r\n      outTotal.textContent = fmtCurrency(finalAmount, currency);\r\n      outCapital.textContent = fmtCurrency(P, currency);\r\n      outIntTotal.textContent = fmtCurrency(interest, currency);\r\n      outDiff.textContent = fmtCurrency(finalAmount - P, currency);\r\n      outProfit.textContent = fmtCurrency(interest, currency); \/\/ Ganancia del prestamista\r\n\r\n      const tLabel = unit==='years'? `${n} ${n==1?'a\u00f1o':'a\u00f1os'}` : `${n} ${n==1?'mes':'meses'}`;\r\n      const baseBadge = base==='annual' ? 'inter\u00e9s simple anual' : 'inter\u00e9s simple mensual';\r\n      breakdown.innerHTML = `\r\n        <div><strong>Inter\u00e9s simple<\/strong> <span class=\"lc-badge\">${baseBadge}<\/span><\/div>\r\n        <div>Total a pagar (P + I): <strong>${fmtCurrency(finalAmount, currency)}<\/strong><\/div>\r\n        <div>Capital (desembolsado): <strong>${fmtCurrency(P, currency)}<\/strong><\/div>\r\n        <div>Ganancia (remanente): <strong>${fmtCurrency(interest, currency)}<\/strong><\/div>\r\n        <div class=\"lc-badge\">Tiempo: ${tLabel} \u00b7 Tasa: ${r}%<\/div>\r\n      `;\r\n    }\r\n  });\r\n})();\r\n<\/script>\r\n<!-- ======== \/Calculadora de Cr\u00e9dito ======== -->\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 Cr\u00e9dito Moneda USD \u2014 D\u00f3laresGTQ \u2014 QuetzalesCRC \u2014 ColonesMXN \u2014 Pesos Monto del cr\u00e9dito Q Tasa de inter\u00e9s anual (%) Plazo MesesA\u00f1os Modo de c\u00e1lculo Inter\u00e9s simple (monto final)Cuota mensual<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/pages\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":20,"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/pages\/256\/revisions"}],"predecessor-version":[{"id":280,"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/pages\/256\/revisions\/280"}],"wp:attachment":[{"href":"https:\/\/btconsulta.com\/index.php\/wp-json\/wp\/v2\/media?parent=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}