{Icon && } {label}{tip && } {fmt(value)}

set(parseFloat(e.target.value))} style={{ background: `linear-gradient(90deg, ${color} ${pct}%, ${unfilled} ${pct}%)` }} /> {refTxt &&

ref 2026{refTxt}

}

); } function StatTile({ icon: Icon, label, value, color, tip }) { return (

{label}{tip && }

{value}

); } function EvoTip({ active, payload, label, pf }) { if (!active || !payload || !payload.length) return null; const g = payload.find((x) => x.dataKey === "gana")?.value ?? 0; const e = payload.find((x) => x.dataKey === "empata")?.value ?? 0; const p = payload.find((x) => x.dataKey === "pierde")?.value ?? 0; return (

Año {label}

● Sueldo gana{pf(g)}

● Empata{pf(e)}

● Sueldo pierde{pf(p)}

); } function AmTip({ active, payload, label, fmt }) { if (!active || !payload || !payload.length) return null; const cap = payload.find((x) => x.dataKey === "capital")?.value ?? 0; const int = payload.find((x) => x.dataKey === "interes")?.value ?? 0; return (

Año {label}

● Capital{fmt(cap)}

● Interés{fmt(int)}

); } function EquityTip({ active, payload, label, fmt }) { if (!active || !payload || !payload.length) return null; const deuda = (payload.find(x => x.dataKey === "deuda") || {}).value || 0; const patr = (payload.find(x => x.dataKey === "patrimonio") || {}).value || 0; return (

Año {label}

● Tu patrimonio{fmt(patr)}

● Deuda restante{fmt(deuda)}

Propiedad vale{fmt(deuda + patr)}

); } function App() { const [cur, setCur] = useState("USD"); const [tc, setTc] = useState(1200); const [loadingTc, setLoadingTc] = useState(false); const [miIngreso, setMiIngreso] = useState(""); const [miAlquiler, setMiAlquiler] = useState(""); const [appRate, setAppRate] = useState(2); const [mode, setMode] = useState("cuota"); const [methodOpen, setMethodOpen] = useState(false); const [whatOpen, setWhatOpen] = useState(false); const [scen, setScen] = useState("promedio"); const [s, setS] = useState({ price: 100000, ltv: 0.75, years: 20, rate: 0.095, cuotaPct: 0.25 }); const up = (k) => (v) => setS((p) => ({ ...p, [k]: v })); const applyScen = (name) => { setScen(name); setS((p) => ({ ...p, rate: SCEN[name] })); }; const setRate = (v) => { setScen("custom"); setS((p) => ({ ...p, rate: v })); }; const result = useMemo(() => simulate(s), [s]); const sym = cur === "USD" ? "US$" : "$"; const mul = cur === "ARS" ? tc : 1; const fmt = (n) => `${sym}\u202F${Math.round(n * mul).toLocaleString("es-AR")}`; const fmtShort = (n) => { const a = Math.abs(n); if (a >= 1e9) return `${sym} ${(n / 1e9).toFixed(1)}B`; if (a >= 1e6) return `${sym} ${(n / 1e6).toFixed(1)}M`; if (a >= 1e3) return `${sym} ${Math.round(n / 1e3)}k`; return `${sym} ${Math.round(n)}`; }; const pf = (n) => `${Math.round(n * 100)}%`; const equityData = useMemo(() => result.yearly.map(d => ({ year: d.year, deuda: Math.round(d.saldo), patrimonio: Math.round(s.price * Math.pow(1.02, d.year) - d.saldo), })), [result, s.price]); const ingresoNum = parseFloat(miIngreso) || 0; const califStatus = ingresoNum > 0 ? (ingresoNum >= result.ingresoMin ? "ok" : "no") : null; const califDiff = califStatus === "no" ? Math.round(result.ingresoMin - ingresoNum) : 0; // Comparación comprar vs alquilar const appRateDecimal = appRate / 100; const alqDefault = Math.round(s.price * 0.06 / 12); // 6% yield bruto anual const alqMensual = parseFloat(miAlquiler) || alqDefault; const horizonte = Math.min(10, s.years); const eqHoriz = equityData[horizonte]?.patrimonio ?? 0; const propValHoriz = Math.round(s.price * Math.pow(1 + appRateDecimal, horizonte)); // Totales a horizonte años const totalCuotas = Math.round(result.cuota * 12 * horizonte); const totalAlquiler = Math.round(alqMensual * 12 * horizonte); // Patrimonio neto comprando = valor propiedad – deuda restante – anticipo invertido const anticipo = result.anticipo; const anticioCosto = Math.round(anticipo * Math.pow(1.02, horizonte) - anticipo); // costo oportunidad del anticipo al 2% en USD const patrimonioNeto = eqHoriz - anticioCosto; // Diferencia mensual const diffMensual = result.cuota - alqMensual; const totalExtraCuota = Math.round(diffMensual * 12 * horizonte); const aCuota = useCount(result.cuota); const aIngreso = useCount(result.ingresoMin); const reset = () => { setScen("promedio"); setMode("cuota"); setS({ price: 100000, ltv: 0.75, years: 20, rate: 0.095, cuotaPct: 0.25 }); setMiIngreso(""); setMiAlquiler(""); setAppRate(2); }; async function fetchTc() { setLoadingTc(true); try { const r = await fetch("https://dolarapi.com/v1/dolares/oficial"); const d = await r.json(); if (d.venta) setTc(Math.round(d.venta)); } catch {} setLoadingTc(false); } // Cargar TC al montar si el usuario cambia a ARS return (

Herramientas inmobiliarias

Calculadora de Crédito Hipotecario UVA

Calculá tu cuota, si calificás para el crédito, y si te conviene más comprar o seguir alquilando, con números reales.

UVA hoy ${UVA_HOY.toLocaleString("es-AR")}

{["USD", "ARS"].map((c) => ( ))}

{cur === "ARS" && (

Tipo de cambio ($ por US$ 1): setTc(Math.max(1, Number(e.target.value)))} className="uva-tc-input" /> Todos los valores en pesos a este tipo de cambio.

)} {whatOpen && (

Un crédito UVA es un préstamo para comprar vivienda donde la deuda no se mide en pesos fijos, sino en UVAs (una unidad que sube con la inflación, según el índice de precios del INDEC). La ventaja es que la cuota inicial es mucho más baja que con tasa fija. La contra: la cuota en pesos sube todos los meses con la inflación. Pero ojo tu sueldo también debería subir. Por eso lo que importa no es el número de la cuota, sino cuánto pesa sobre tu ingreso. Eso es justo lo que te mostramos abajo. Además hay una cláusula de protección: si la cuota se adelanta más de 10% a tu salario, podés pedir estirar el plazo.

)}

{mode === "cuota" ? (

Tu cuota arranca en

{fmt(aCuota)}/mes

crédito de {fmt(result.loan)} a {s.years} años · anticipo {fmt(result.anticipo)}

Ingreso que te piden{fmt(result.ingresoMin)}

Vas a pagar en total{fmt(result.totalPagado)}

) : (

Necesitás un ingreso de

{fmt(aIngreso)}/mes

para calificar · podés sumar el sueldo de tu pareja o familiares

Tu cuota sería{fmt(result.cuota)}

Sobre un crédito de{fmt(result.loan)}

)} {/* ── ¿Calificás? ─────────────────────────────────────────── */}

¿Calificás para este crédito?

El banco pide al menos {fmt(result.ingresoMin)}/mes. {califStatus === null && Podés sumar el ingreso de tu pareja o familiar para calificar más fácil.} {califStatus === "ok" && Con ese ingreso, calificás.} {califStatus === "no" && Con ese ingreso te faltan {fmt(califDiff)}/mes. Sumar un co-titular puede ayudarte.}

setMiIngreso(e.target.value)} placeholder="Mi ingreso (USD/mes)" /> {califStatus === "ok" &&

✓ Calificás

} {califStatus === "no" &&

✗ Falta {fmt(califDiff)}/mes

}

{/* ── Comprar vs alquilar ──────────────────────────────────── */}

¿Me conviene comprar o seguir alquilando?

{cur === "USD" && (

Los valores en dólares asumen que el tipo de cambio acompaña la inflación (como fue históricamente). En pesos, la cuota sube con la UVA cada mes.

)} {/* Inputs del usuario */}

¿Cuánto pagás (o pagarías) de alquiler?

{cur === "USD" ? "US$" : "$"} setMiAlquiler(e.target.value)} placeholder={alqDefault.toString()} /> /mes

Dejalo vacío para usar la estimación de mercado ({fmt(alqDefault)}/mes · 6% rendimiento anual sobre este inmueble).

Valorización anual del inmueble (estimada)

{[1, 2, 3, 4].map(v => ( ))}

En dólares, histórico conservador: 1–2%; optimista: 3–4%.

{/* Comparación a {horizonte} años */}

Comprando

{fmt(result.cuota)}/mes

cuota UVA inicial

Anticipo{fmt(anticipo)}

Cuotas en {horizonte} años{fmt(totalCuotas)}

Tu patrimonio (año {horizonte}) {fmt(eqHoriz)}

Propiedad vale (est.){fmt(propValHoriz)}

Alquilando

{fmt(alqMensual)}/mes

{miAlquiler ? "tu alquiler actual" : "estimado (6% anual)"}

Anticipo inicial{fmt(0)} (libre)

Alquileres en {horizonte} años{fmt(totalAlquiler)}

Tu patrimonio (año {horizonte}) US$ 0

La propiedad valelo mismo que hoy

{/* Veredicto dinámico */}

0 ? "uva-rvb-verdict uva-verdict-warn" : "uva-rvb-verdict uva-verdict-ok"}> {diffMensual > 0 ? ( <> La cuota es {fmt(Math.abs(diffMensual))}/mes más cara que alquilar hoy.{" "} Pero en {horizonte} años habrás construido {fmt(eqHoriz)} de patrimonio real. El alquiler en pesos también sube con la inflación. La cuota UVA sube igual, la diferencia es que con el crédito cada cuota te acerca más a ser dueño. ) : ( <> La cuota es {fmt(Math.abs(diffMensual))}/mes más barata que tu alquiler.{" "} Y con cada cuota te hacés más dueño: en {horizonte} años tu patrimonio es {fmt(eqHoriz)}. )}

Tu patrimonio crece con cada cuota Patrimonio Deuda

v === 0 ? "Hoy" : `${v}a`} /> } cursor={{ stroke: C.line }} />
Cada cuota tiene dos partes: una va al banco (interés) y otra te hace más dueño de tu casa (capital). Con el tiempo, tu deuda baja y la propiedad puede subir de valor, tu patrimonio crece por los dos lados. Asume una revalorización del 2% anual real (conservador). El total de las dos áreas = valor de la propiedad en ese año.

De cada cuota, cuánto es capital y cuánto interés Capital Interés
`${v}a`} /> } cursor={{ stroke: C.line }} />
Al principio casi toda la cuota son intereses; recién con los años empezás a bajar la deuda de verdad. Por eso adelantar capital temprano conviene tanto.

Antes de firmar, tené en cuenta

La cuota que ves es la "cuota pura". La real suma seguros (vida e incendio) y a veces gastos: contá un 10–20% más.

Sumá los gastos de escritura (~6%): salen de tu bolsillo, no del crédito.

El banco presta sobre la tasación, que puede ser menor al precio de venta. Confirmá antes de cerrar.

La cuota en pesos sube con la inflación. Mientras tu sueldo acompañe, está bajo control; si se atrasa, usá la cláusula del 10%.

Compará banco por banco: entre el más barato y el más caro la cuota puede cambiar muchísimo. No mires solo la tasa: mirá plazo, financiación y relación cuota/ingreso juntos.

{methodOpen && (
La cuota se calcula con el sistema francés (cuota constante en UVAs) sobre el monto que te presta el banco, a la tasa real y el plazo elegidos. El ingreso mínimo sale de dividir la cuota por la relación cuota/ingreso. La curva de "cuánto pesa en tu sueldo" muestra la cuota en términos reales: en UVAs es constante, así que solo cambia según si tu sueldo le gana o le pierde a la inflación (±3% al año en los escenarios).

No incluye seguros, gastos, ni la tasación del banco, y la tasa de cada entidad varía. Es una estimación para orientarte: la cifra final la define el banco que te dé el crédito.
)}

); } const css = ` * { box-sizing: border-box; } .uva-wrap { background: var(--bg); color: var(--text); font-family: var(--font-outfit, system-ui, sans-serif); padding: 28px 16px 60px; max-width: 1180px; margin: 0 auto; } .uva-hdr { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; } .uva-kicker { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); font-weight: 700; margin-bottom: 8px; } .uva-h2 { font-weight: 800; font-size: clamp(24px, 4.2vw, 42px); line-height: 1.04; margin: 0; letter-spacing: -0.01em; color: var(--text); } .uva-accent { color: var(--primary); } .uva-sub { color: var(--muted); margin: 12px 0 0; max-width: 560px; font-size: 14.5px; line-height: 1.5; } .uva-hdr-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .uva-chip { display: flex; align-items: center; gap: 6px; background: ${isDark ? "rgba(240,177,90,0.08)" : "rgba(217,119,6,0.07)"}; border: 1px solid ${isDark ? "rgba(240,177,90,0.25)" : "rgba(217,119,6,0.20)"}; border-radius: 11px; padding: 8px 12px; font-size: 12px; color: var(--muted); } .uva-chip b { color: var(--text); font-family: monospace; } .uva-seg { display: flex; background: var(--card-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; } .uva-seg button { background: none; border: none; color: var(--muted); font-family: monospace; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: 0.2s; } .uva-seg .uva-seg-on { background: var(--primary); color: #fff; } .uva-ghost { display: flex; align-items: center; gap: 6px; background: var(--card-2); border: 1px solid var(--border); color: var(--muted); border-radius: 11px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.2s; } .uva-ghost:hover { color: var(--text); border-color: var(--primary); } .uva-what { width: 100%; display: flex; align-items: center; gap: 9px; background: rgba(232,98,42,${isDark ? "0.08" : "0.05"}); border: 1px solid rgba(232,98,42,${isDark ? "0.22" : "0.16"}); border-radius: 13px; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 14px 16px; cursor: pointer; margin-bottom: 18px; text-align: left; } .uva-what-body { font-size: 13.5px; color: var(--muted); line-height: 1.6; padding: 0 4px 18px; margin-top: -8px; max-width: 900px; } .uva-grid { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; } @media (max-width: 880px) { .uva-grid { grid-template-columns: 1fr; } } .uva-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 20px; } .uva-card-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--text); margin-bottom: 16px; } .uva-controls { position: sticky; top: 18px; } @media (max-width: 880px) { .uva-controls { position: static; } } .uva-scen-block { background: rgba(232,98,42,${isDark ? "0.10" : "0.05"}); border: 1px solid rgba(232,98,42,${isDark ? "0.25" : "0.18"}); border-radius: 14px; padding: 15px; margin-bottom: 16px; } .uva-scen-q { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--text); } .uva-scen-sub { font-size: 12px; color: var(--muted); margin: 6px 0 12px; line-height: 1.4; } .uva-scen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .uva-scen button { background: var(--card-2); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 11px; font-weight: 600; padding: 9px 3px; border-radius: 9px; cursor: pointer; transition: 0.18s; } .uva-scen button:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft, rgba(232,98,42,0.07)); } .uva-scen .uva-scen-on { background: var(--primary); color: #fff; border-color: var(--primary); } .uva-note { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; background: rgba(232,98,42,0.04); border-left: 2px solid var(--primary); border-radius: 0 8px 8px 0; padding: 10px 12px; margin-bottom: 4px; } .uva-note b { color: var(--text); } .uva-ctrl { margin-bottom: 18px; } .uva-itip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 5px; } .uva-itip-btn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(232,98,42,0.35); background: rgba(232,98,42,0.09); color: var(--primary); font-size: 10px; font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1; padding: 0; transition: 0.15s; font-family: monospace; } .uva-itip-btn:hover { background: rgba(232,98,42,0.18); } .uva-itip-bubble { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); width: 215px; max-width: 62vw; background: var(--text); border: 1px solid rgba(232,98,42,0.22); border-radius: 11px; padding: 11px 13px; font-size: 11.5px; line-height: 1.5; color: var(--card, #fff); font-weight: 400; text-transform: none; letter-spacing: normal; box-shadow: 0 12px 34px rgba(0,0,0,0.18); z-index: 60; } .uva-itip-bubble::before { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; background: var(--text); border-left: 1px solid rgba(232,98,42,0.22); border-top: 1px solid rgba(232,98,42,0.22); } .uva-ctrl-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; } .uva-ctrl-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 500; line-height: 1.25; } .uva-ctrl-val { font-family: monospace; font-size: 13px; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .uva-ctrl-ref { display: flex; align-items: baseline; gap: 7px; font-size: 11px; color: ${C.mut2}; margin-top: 6px; line-height: 1.4; } .uva-ctrl-ref span { font-family: monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary); background: var(--primary-soft); padding: 2px 6px; border-radius: 5px; flex-shrink: 0; } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; outline: none; cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: #fff; border: 2px solid var(--border); box-shadow: 0 1px 6px rgba(0,0,0,0.15); cursor: pointer; } input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--border); cursor: pointer; } .uva-results { display: flex; flex-direction: column; gap: 16px; } .uva-modes { display: flex; gap: 6px; background: var(--card-2); border: 1px solid var(--border); border-radius: 13px; padding: 4px; } .uva-modes button { flex: 1; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 11px; border-radius: 9px; cursor: pointer; transition: 0.2s; } .uva-modes button.uva-on { background: var(--primary); color: #fff; } .uva-hero { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: rgba(232,98,42,${isDark ? "0.10" : "0.04"}); border: ${isDark ? "1px" : "1.5px"} solid rgba(232,98,42,${isDark ? "0.30" : "0.18"}); border-radius: 18px; padding: 24px; box-shadow: 0 4px 20px rgba(232,98,42,0.07); } .uva-hero-main { flex: 1; } .uva-hero-label { font-size: 13px; color: var(--muted); font-weight: 600; } .uva-hero-val { font-family: monospace; font-size: clamp(30px, 5.5vw, 50px); font-weight: 700; letter-spacing: -0.02em; margin: 4px 0 6px; color: var(--primary); } .uva-hero-val small { font-size: 15px; color: var(--muted); font-weight: 500; } .uva-hero-sub { font-size: 13px; color: var(--muted); } .uva-hero-side { display: flex; flex-direction: column; gap: 12px; min-width: 210px; } .uva-hero-fact { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 10px; } .uva-hero-fact:last-child { border-bottom: none; padding-bottom: 0; } .uva-hero-fact span { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; } .uva-hero-fact b { font-family: monospace; font-size: 16px; } .uva-chart-card .uva-legend { margin-left: auto; display: flex; align-items: center; font-size: 11.5px; color: var(--muted); font-weight: 500; } .uva-chart-card .uva-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; } .uva-insight { font-size: 12.5px; color: var(--muted); line-height: 1.6; margin-top: 14px; background: rgba(232,98,42,0.04); border-left: 2px solid var(--primary); border-radius: 0 8px 8px 0; padding: 12px 14px; } .uva-insight b { color: var(--text); font-weight: 600; } .uva-note2 { font-size: 11.5px; color: ${C.mut2}; line-height: 1.5; margin-top: 12px; } .uva-tip { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; box-shadow: 0 4px 16px rgba(0,0,0,0.10); font-size: 12.5px; } .uva-tip-yr { font-family: monospace; color: ${C.mut2}; font-size: 11px; margin-bottom: 8px; } .uva-tip-row { display: flex; justify-content: space-between; gap: 18px; margin: 3px 0; color: var(--muted); } .uva-tip-row b { font-family: monospace; color: var(--text); } .uva-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 720px) { .uva-tiles { grid-template-columns: repeat(2, 1fr); } } .uva-tile { display: flex; align-items: center; gap: 11px; background: var(--card); border: 1px solid var(--border); border-radius: 15px; padding: 15px; } .uva-tile-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; } .uva-tile-label { font-size: 11px; color: var(--muted); line-height: 1.25; } .uva-tile-val { font-family: monospace; font-size: 15px; font-weight: 600; margin-top: 3px; color: var(--text); } .uva-risk { background: ${isDark ? "rgba(251,113,133,0.05)" : "rgba(225,29,72,0.04)"}; border: 1px solid ${isDark ? "rgba(251,113,133,0.22)" : "rgba(225,29,72,0.18)"}; border-radius: 16px; padding: 18px 20px; } .uva-risk-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: ${C.rose}; margin-bottom: 12px; } .uva-risk ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; } .uva-risk li { font-size: 13px; color: var(--muted); line-height: 1.45; } .uva-risk b { color: var(--text); font-weight: 600; } .uva-method { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 12px 16px; cursor: pointer; } .uva-method-body { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding: 4px 16px 8px; } .uva-method-body b { color: var(--text); } .uva-califica-card{display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:18px 20px} .uva-califica-left{flex:1;min-width:0} .uva-califica-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:7px} .uva-califica-min{font-size:12.5px;color:var(--muted);line-height:1.55} .uva-califica-min b{color:var(--text)} .uva-califica-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0} .uva-califica-input{background:var(--card-2);border:1.5px solid var(--border);border-radius:10px;color:var(--text);font-size:14px;font-weight:600;padding:9px 14px;width:190px;outline:none;font-family:inherit;transition:.18s} .uva-califica-input:focus{border-color:var(--primary)} .uva-califica-input::placeholder{font-weight:400;font-size:12.5px;color:var(--muted)} .uva-califica-badge{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;padding:6px 13px;border-radius:20px;white-space:nowrap} .uva-cok{background:rgba(72,213,154,0.12);color:#48d59a;border:1px solid rgba(72,213,154,0.3)} .uva-cno{background:rgba(251,113,133,0.10);color:#fb7185;border:1px solid rgba(251,113,133,0.3)} /* inputs */ .uva-rvb-inputs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px} @media(max-width:640px){.uva-rvb-inputs{grid-template-columns:1fr}} .uva-rvb-input-group{} .uva-rvb-input-label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px} .uva-rvb-input-row{display:flex;align-items:center;gap:0;background:var(--card-2);border:1.5px solid var(--border);border-radius:10px;overflow:hidden;transition:.18s} .uva-rvb-input-row:focus-within{border-color:var(--primary)} .uva-rvb-prefix,.uva-rvb-suffix{padding:0 10px;font-size:13px;color:var(--muted);white-space:nowrap;background:var(--card-2)} .uva-rvb-input{flex:1;background:transparent;border:none;color:var(--text);font-size:15px;font-weight:700;padding:9px 4px;outline:none;min-width:0;font-family:monospace} .uva-rvb-input::placeholder{font-weight:400;font-size:13px;color:var(--muted)} .uva-rvb-hint{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4} .uva-rvb-seg{display:flex;gap:4px;flex-wrap:wrap} .uva-rvb-seg button{background:var(--card-2);border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:inherit;font-size:11.5px;font-weight:600;padding:6px 10px;cursor:pointer;transition:.15s} .uva-rvb-seg button:hover{border-color:var(--primary);color:var(--primary)} .uva-rvb-seg .uva-rvb-seg-on{background:var(--primary);color:#fff;border-color:var(--primary)} /* comparación */ .uva-rvb-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;margin-bottom:16px} @media(max-width:560px){.uva-rvb-compare{grid-template-columns:1fr 1fr}.uva-rvb-vs-col{display:none}} .uva-rvb-side{background:var(--card-2);border:1px solid var(--border);border-radius:14px;padding:16px 14px} .uva-rvb-side-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px} .uva-rvb-main-val{font-family:monospace;font-size:clamp(20px,4vw,26px);font-weight:800;line-height:1;letter-spacing:-.01em} .uva-rvb-freq{font-size:12px;font-weight:400;color:var(--muted);margin-left:2px} .uva-rvb-sub-line{font-size:11px;color:var(--muted);margin-top:4px;margin-bottom:10px} .uva-rvb-divider{height:1px;background:var(--border);margin:10px 0} .uva-rvb-detail-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-bottom:5px} .uva-rvb-detail-row b{font-variant-numeric:tabular-nums;color:var(--text);font-weight:700;white-space:nowrap} .uva-rvb-detail-row.uva-rvb-highlight{font-weight:600;font-size:12.5px} .uva-rvb-vs-col{font-style:italic;font-size:12px;font-weight:600;color:var(--muted);width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;background:var(--card);align-self:center;flex-shrink:0} /* veredicto */ .uva-rvb-verdict{font-size:13px;line-height:1.55;padding:14px 16px;border-radius:12px} .uva-verdict-ok{background:rgba(72,213,154,0.07);border:1px solid rgba(72,213,154,0.25);color:var(--muted)} .uva-verdict-warn{background:rgba(240,177,90,0.07);border:1px solid rgba(240,177,90,0.22);color:var(--muted)} .uva-rvb-verdict b{color:var(--text)} .uva-tc-bar{display:flex;align-items:center;gap:10px;background:var(--primary-soft,rgba(232,98,42,0.07));border:1px solid var(--border);border-radius:12px;padding:11px 16px;margin-bottom:18px;flex-wrap:wrap} .uva-tc-label{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap} .uva-tc-input{background:var(--card);border:1px solid var(--border);border-radius:8px;color:var(--primary);font-size:16px;font-weight:700;padding:5px 10px;width:130px;font-family:monospace;outline:none;transition:.18s} .uva-tc-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft,rgba(232,98,42,0.12))} .uva-tc-btn{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:6px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.18s;white-space:nowrap} .uva-tc-btn:disabled{opacity:.6;cursor:not-allowed} .uva-tc-hint{font-size:11.5px;color:var(--muted)} @media(max-width:480px){.uva-tc-hint{display:none}} .uva-rvb-usd-note{font-size:11.5px;color:var(--muted);background:rgba(240,177,90,0.07);border:1px solid rgba(240,177,90,0.2);border-radius:9px;padding:8px 12px;margin-bottom:16px;line-height:1.5} @media(max-width:600px){.uva-califica-card{flex-direction:column;align-items:flex-start}.uva-califica-right{width:100%;align-items:stretch;flex-direction:row;flex-wrap:wrap}.uva-califica-input{flex:1;min-width:0;width:auto}} `;