[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68e205ff2d008191b192caf341c98234","versionInt","title","Diagnóstico Financiero – App Interactiva (texto Negro Reforzado)","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\n\n// Colores solicitados\nconst COLOR_SAVINGS = \"#006B3C\"; // Ahorro\nconst COLOR_DEBT = \"#800020\"; // Deuda\nconst COLOR_EXPENSES = \"#b8860b\"; // Gastos\n\n// Texto más oscuro\nconst TEXT_DARK = \"#0A0A0A\"; // negro profundo legible\n\n// Utilidades\nconst clamp = (n, min = 0, max = 100) => Math.min(max, Math.max(min, n));\n\nfunction formatCurrency(value, currency) {\n try {\n return new Intl.NumberFormat(\"es-ES\", { style: \"currency\", currency }).format(value || 0);\n } catch {\n return new Intl.NumberFormat(\"es-ES\", { style: \"currency\", currency: \"USD\" }).format(value || 0);\n }\n}\n\nfunction toPercent(n) {\n if (!isFinite(n) || isNaN(n)) return \"0%\";\n return `${(n * 100).toFixed(0)}%`;\n}\n\nfunction percentNumber(n) {\n if (!isFinite(n) || isNaN(n)) return 0;\n return n * 100;\n}\n\nfunction KPI({ title, value, tone }) {\n const toneStyle = tone === \"good\" ? { color: COLOR_SAVINGS } : tone === \"warn\" ? { color: COLOR_EXPENSES } : { color: COLOR_DEBT };\n return (\n

{title}

{value}

\n );\n}\n\nfunction LegendItem({ color, label }) {\n return (\n

\n \n {label}\n

\n );\n}\n\nfunction Badge({ text, color }) {\n return (\n \n \n {text}\n \n );\n}\n\nfunction NumberInput({ label, value, onChange, currency, hint }) {\n const [local, setLocal] = useState(String(value ?? 0));\n\n useEffect(() => {\n setLocal(String(value ?? 0));\n }, [value]);\n\n const handleBlur = () => {\n const num = Number(local);\n if (isNaN(num) || num < 0) {\n setLocal(String(Math.max(0, value || 0)));\n } else {\n onChange(num);\n }\n };\n\n return (\n

\n {label}\n

\n setLocal(e.target.value)}\n onBlur={handleBlur}\n className=\"w-full border rounded-lg px-3 py-2 bg-white text-black\"\n aria-label={label}\n />\n {currency}\n

\n {hint ? {hint} : null}\n {formatCurrency(Number(local) || 0, currency)}\n

\n );\n}\n\nexport default function App() {\n const [currency, setCurrency] = useState(\"USD\");\n const [ingresos, setIngresos] = useState(0);\n const [gastos, setGastos] = useState(0); // Sin deuda\n const [deuda, setDeuda] = useState(0); // Pago mensual de deuda\n const [ahorro, setAhorro] = useState(0);\n const [fondo, setFondo] = useState(0); // Fondo de emergencia actual\n const [mesesEmergencia, setMesesEmergencia] = useState(6);\n\n const STORAGE_KEY = \"diagnostico-financiero-v1\";\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return;\n try {\n const parsed = JSON.parse(raw);\n if (parsed && typeof parsed === \"object\") {\n if (typeof parsed.currency === \"string\") setCurrency(parsed.currency);\n if (typeof parsed.ingresos === \"number\") setIngresos(parsed.ingresos);\n if (typeof parsed.gastos === \"number\") setGastos(parsed.gastos);\n if (typeof parsed.deuda === \"number\") setDeuda(parsed.deuda);\n if (typeof parsed.ahorro === \"number\") setAhorro(parsed.ahorro);\n if (typeof parsed.fondo === \"number\") setFondo(parsed.fondo);\n if (typeof parsed.mesesEmergencia === \"number\") setMesesEmergencia(Math.max(6, parsed.mesesEmergencia));\n }\n } catch {}\n }, []);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const payload = { currency, ingresos, gastos, deuda, ahorro, fondo, mesesEmergencia };\n localStorage.setItem(STORAGE_KEY, JSON.stringify(payload));\n }, [currency, ingresos, gastos, deuda, ahorro, fondo, mesesEmergencia]);\n\n // Derivados\n const totalNecesidades = gastos + deuda; // gastos fijos + deuda\n const metaFondo = Math.max(0, mesesEmergencia) * totalNecesidades; // 6+ meses de gastos fijos + deuda\n const gapFondo = Math.max(0, metaFondo - fondo);\n const cobertura = metaFondo > 0 ? fondo / metaFondo : 0; // 1 => 100%\n const mesesCubiertos = totalNecesidades > 0 ? fondo / totalNecesidades : 0;\n\n const tasaAhorro = ingresos > 0 ? ahorro / ingresos : 0;\n const ratioGasto = ingresos > 0 ? gastos / ingresos : 0;\n const ratioDeuda = ingresos > 0 ? deuda / ingresos : 0;\n const flujoLibre = ingresos - gastos - deuda - ahorro;\n\n // Reparto de ingresos para barra apilada\n const reparto = useMemo(() => {\n const I = ingresos > 0 ? ingresos : 1; // evitar 0 para proporciones\n const gastoPct = clamp((gastos / I) * 100);\n const deudaPct = clamp((deuda / I) * 100);\n const ahorroPct = clamp((ahorro / I) * 100);\n const asignado = gastoPct + deudaPct + ahorroPct;\n\n let restoPct = 0;\n let deficitPct = 0;\n if (asignado <= 100) {\n restoPct = 100 - asignado;\n } else {\n // Si asignado > 100, mostrar déficit como exceso\n deficitPct = clamp(asignado - 100, 0, 100);\n }\n\n return {\n gastoPct,\n deudaPct,\n ahorroPct,\n restoPct,\n deficitPct,\n };\n }, [ingresos, gastos, deuda, ahorro]);\n\n // Clasificaciones\n function badgeForDebt(r) {\n if (r <= 0.2) return { label: \"Deuda sana\", color: COLOR_SAVINGS };\n if (r <= 0.35) return { label: \"Vigilar deuda\", color: COLOR_EXPENSES };\n return { label: \"Riesgo de deuda\", color: COLOR_DEBT };\n }\n function badgeForSavings(r) {\n if (r >= 0.2) return { label: \"Buen ahorro\", color: COLOR_SAVINGS };\n if (r >= 0.1) return { label: \"Ahorro moderado\", color: COLOR_EXPENSES };\n return { label: \"Ahorro bajo\", color: COLOR_DEBT };\n }\n function badgeForEmergency(c) {\n if (c >= 1) return { label: \"Fondo cubierto\", color: COLOR_SAVINGS };\n if (c >= 0.5) return { label: \"Cobertura parcial\", color: COLOR_EXPENSES };\n return { label: \"Cobertura crítica\", color: COLOR_DEBT };\n }\n\n // Índice de salud financiera (0-100)\n const score = useMemo(() => {\n const emergencyScore = clamp(cobertura * 100, 0, 100); // 100% cobertura => 100\n const debtScore = 100 - clamp((ratioDeuda / 0.5) * 100, 0, 100); // 0% deuda => 100, 50% => 0\n const savingsScore = clamp((tasaAhorro / 0.2) * 100, 0, 100); // 20% ahorro => 100\n const total = Math.round(emergencyScore * 0.4 + debtScore * 0.3 + savingsScore * 0.3);\n return total;\n }, [cobertura, ratioDeuda, tasaAhorro]);\n\n // Sugerencias clave\n const mesesPlan = 12; // sugerencia para alcanzar la meta en 12 meses\n const sugeridoMensualParaFondo = mesesPlan > 0 ? Math.ceil(gapFondo / mesesPlan) : 0;\n const mesesConAhorroActual = ahorro > 0 ? Math.ceil(gapFondo / ahorro) : Infinity;\n\n // Texto de análisis para copiar\n const analisisTexto = useMemo(() => {\n const lineas = [];\n lineas.push(\"ANALISIS FINANCIERO PROFUNDO — creado por samuel Condia\");\n lineas.push(\"\");\n lineas.push(`Ingresos: ${formatCurrency(ingresos, currency)}`);\n lineas.push(`Gastos (sin deuda): ${formatCurrency(gastos, currency)}`);\n lineas.push(`Deuda mensual: ${formatCurrency(deuda, currency)} (${toPercent(ratioDeuda)})`);\n lineas.push(`Ahorro mensual: ${formatCurrency(ahorro, currency)} (${toPercent(tasaAhorro)})`);\n lineas.push(`Fondo de emergencia actual: ${formatCurrency(fondo, currency)}`);\n lineas.push(`Meta de fondo (${mesesEmergencia} meses): ${formatCurrency(metaFondo, currency)}`);\n lineas.push(`Cobertura de fondo: ${toPercent(cobertura)} (${mesesCubiertos.toFixed(1)} meses)`);\n lineas.push(`Flujo libre estimado: ${formatCurrency(flujoLibre, currency)}`);\n lineas.push(`Índice de salud financiera: ${score}/100`);\n lineas.push(\"\");\n\n if (metaFondo > 0) {\n if (gapFondo <= 0) {\n lineas.push(\"Tu fondo de emergencia está completo. Mantén esta reserva y continúa invirtiendo o amortizando deuda estratégicamente.\");\n } else {\n lineas.push(\n `Falta ${formatCurrency(gapFondo, currency)} para completar el fondo. Para lograrlo en ${mesesPlan} meses, destina ~${formatCurrency(\n sugeridoMensualParaFondo,\n currency\n )} al mes.`\n );\n if (isFinite(mesesConAhorroActual)) {\n lineas.push(`Con tu ahorro actual tardarías ~${mesesConAhorroActual} meses en alcanzarlo.`);\n } else {\n lineas.push(\"Considera asignar parte de tu ahorro mensual al fondo de emergencia hasta completarlo.\");\n }\n }\n }\n\n if (ratioDeuda > 0.35) {\n lineas.push(\"Tu carga de deuda es elevada. Evalúa consolidación, negociación de tasas o la estrategia bola de nieve/avalancha.\");\n } else if (ratioDeuda > 0.2) {\n lineas.push(\"Vigila tu deuda y evita nuevos compromisos hasta completar el fondo de emergencia.\");\n }\n\n if (tasaAhorro < 0.1) {\n lineas.push(\"Incrementa tu tasa de ahorro a al menos 10%-20% de tus ingresos reduciendo gastos o elevando ingresos.\");\n }\n\n if (flujoLibre < 0) {\n lineas.push(\"Tu flujo de caja es negativo. Recorta gastos no esenciales o busca ingresos adicionales de forma prioritaria.\");\n }\n\n return lineas.join(\"\\n\");\n }, [ingresos, gastos, deuda, ahorro, fondo, currency, ratioDeuda, tasaAhorro, mesesEmergencia, metaFondo, cobertura, mesesCubiertos, flujoLibre, score, gapFondo, sugeridoMensualParaFondo, mesesConAhorroActual]);\n\n const debtBadge = badgeForDebt(ratioDeuda);\n const savingBadge = badgeForSavings(tasaAhorro);\n const emergencyBadge = badgeForEmergency(cobertura);\n\n const handleCopy = async () => {\n try {\n await navigator.clipboard.writeText(analisisTexto);\n alert(\"Análisis copiado al portapapeles\");\n } catch {\n alert(\"No se pudo copiar. Intenta manualmente.\");\n }\n };\n\n const resetAll = () => {\n setCurrency(\"USD\");\n setIngresos(0);\n setGastos(0);\n setDeuda(0);\n setAhorro(0);\n setFondo(0);\n setMesesEmergencia(6);\n };\n\n const loadExample = () => {\n setCurrency(\"USD\");\n setIngresos(2000);\n setGastos(900);\n setDeuda(250);\n setAhorro(300);\n setFondo(2500);\n setMesesEmergencia(6);\n };\n\n const currencyOptions = [\"USD\", \"EUR\", \"MXN\", \"COP\", \"CLP\", \"ARS\", \"PEN\", \"BRL\", \"GTQ\", \"DOP\"]; // comunes en ES-LATAM\n\n return (\n

\n {/* Header */}\n

\n analisis financiero profundo\n

\n creado por samuel Condia\n

\n\n

\n {/* Panel de entrada */}\n

Parámetros

Completa tus datos para generar el diagnóstico.

\n \n \n

\n\n

\n Moneda\n setCurrency(e.target.value)}\n >\n {currencyOptions.map((c) => (\n \n ))}\n \n

\n\n

\n Meses objetivo de fondo (mínimo 6)\n setMesesEmergencia(Math.max(6, Number(e.target.value) || 6))}\n >\n {[6, 9, 12].map((m) => (\n \n ))}\n \n

\n\n \n \n \n \n \n

\n\n {/* Resumen y visualizaciones */}\n

Distribución de ingresos

\n\n

\n Total ingresos\n {formatCurrency(ingresos, currency)}\n

\n {reparto.gastoPct > 0 && (\n

\n )}\n {reparto.deudaPct > 0 && (\n

\n )}\n {reparto.ahorroPct > 0 && (\n

\n )}\n {reparto.restoPct > 0 && (\n

\n )}\n

\n\n

\n \n \n \n {reparto.deficitPct > 0 ? (\n

\n • Déficit: {reparto.deficitPct.toFixed(0)}%\n

\n ) : (\n

\n Resto libre: {Math.max(0, 100 - (reparto.gastoPct + reparto.deudaPct + reparto.ahorroPct)).toFixed(0)}%\n

\n )}\n

\n\n

\n = 0 ? \"good\" : \"bad\"} />\n = 70 ? \"good\" : score >= 50 ? \"warn\" : \"bad\"} />\n = mesesEmergencia ? \"good\" : mesesCubiertos >= mesesEmergencia / 2 ? \"warn\" : \"bad\"} />\n

\n\n

Fondo de emergencia

\n Meta: {formatCurrency(metaFondo, currency)} ({mesesEmergencia} meses de gastos + deuda)\n

\n\n

\n Progreso\n {toPercent(cobertura)}\n

\n Actual: {formatCurrency(fondo, currency)}\n Falta: {formatCurrency(gapFondo, currency)}\n

\n\n

\n \n \n \n

\n\n

\n {gapFondo <= 0 ? (\n

Tu fondo de emergencia está completo. Mantén la reserva y prioriza inversión o amortización de deuda.

\n ) : (\n

\n Para completar la meta en {mesesPlan} meses, destina aproximadamente\n {formatCurrency(sugeridoMensualParaFondo, currency)} al mes.\n

\n {isFinite(mesesConAhorroActual) ? (\n

\n Si asignas tu ahorro actual de {formatCurrency(ahorro, currency)} al fondo, tardarías ~\n {mesesConAhorroActual} meses.\n

\n ) : (\n

Comienza asignando una parte de tu ahorro mensual al fondo de emergencia hasta cubrir la meta.

\n )}\n

\n\n {/* Análisis y recomendaciones */}\n

Análisis y recomendaciones

\n \n

\n\n

Puntos clave

Deuda: {toPercent(ratioDeuda)} — {debtBadge.label}.
Ahorro: {toPercent(tasaAhorro)} — {savingBadge.label}.
Fondo de emergencia: {toPercent(cobertura)} ({isFinite(mesesCubiertos) ? `${mesesCubiertos.toFixed(1)} meses` : \"-\"}) — {emergencyBadge.label}.
Flujo libre: {formatCurrency(flujoLibre, currency)}.

\n\n

Recomendaciones

\n Enfoca tu ahorro en el fondo de emergencia hasta cubrir {mesesEmergencia} meses. Sugerido: {formatCurrency(sugeridoMensualParaFondo, currency)} al mes durante {mesesPlan} meses.\n
\n Tu flujo actual no alcanza la cuota sugerida. Considera recortar gastos por {formatCurrency(sugeridoMensualParaFondo - Math.max(0, flujoLibre), currency)} o extender el plazo.\n
Mantén el fondo cubierto y dirige el ahorro excedente a inversión y/o amortización de deudas con mayor interés.
Reduce deuda agresivamente (avalancha/bola de nieve), evita nuevas deudas y busca mejores tasas.
Evita compromisos nuevos hasta fortalecer tu fondo de emergencia.
Tu nivel de deuda es saludable; prioriza mantenerlo bajo.
Eleva tu tasa de ahorro a ≥ 10%-20% revisando suscripciones, gastos variables y oportunidades de ingreso.
Buen comienzo: intenta acercarte al 20% de ahorro mensual.
Excelente hábito de ahorro: considera diversificar e invertir con perfil de riesgo adecuado.
Flujo negativo: prioriza un presupuesto cero, recorte de gastos y generación de ingresos adicionales.
Protege tu flujo libre automatizando el ahorro al inicio de mes.

\n\n

\n Esta herramienta es educativa y no constituye asesoría financiera personalizada.\n

\n\n \n

\n );\n}\n\n// Helpers internos\nfunction badgeForDebt(r) {\n if (r <= 0.2) return { label: \"Deuda sana\", color: COLOR_SAVINGS };\n if (r <= 0.35) return { label: \"Vigilar deuda\", color: COLOR_EXPENSES };\n return { label: \"Riesgo de deuda\", color: COLOR_DEBT };\n}\nfunction badgeForSavings(r) {\n if (r >= 0.2) return { label: \"Buen ahorro\", color: COLOR_SAVINGS };\n if (r >= 0.1) return { label: \"Ahorro moderado\", color: COLOR_EXPENSES };\n return { label: \"Ahorro bajo\", color: COLOR_DEBT };\n}\nfunction badgeForEmergency(c) {\n if (c >= 1) return { label: \"Fondo cubierto\", color: COLOR_SAVINGS };\n if (c >= 0.5) return { label: \"Cobertura parcial\", color: COLOR_EXPENSES };\n return { label: \"Cobertura crítica\", color: COLOR_DEBT };\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","6586491199104051010","traceTime",1783038314228]