{"id":3780,"date":"2026-02-11T22:26:25","date_gmt":"2026-02-11T21:26:25","guid":{"rendered":"https:\/\/eventosday.es\/?page_id=3780"},"modified":"2026-02-11T22:50:59","modified_gmt":"2026-02-11T21:50:59","slug":"hipoteca","status":"publish","type":"page","link":"https:\/\/eventosday.es\/index.php\/hipoteca\/","title":{"rendered":"hipoteca"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\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 Calculadora Hipoteca Espa\u00f1a - Baleares<\/title>\r\n \r\n <!-- 1. Cargar React y ReactDOM -->\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\r\n <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\r\n \r\n <!-- 2. Cargar Babel para entender JSX -->\r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n <!-- 3. Cargar Tailwind CSS -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n <!-- Estilos para asegurar que el contenedor se vea bien en WordPress -->\r\n <style>\r\n \/* Reset b\u00e1sico para evitar conflictos con temas de WP *\/\r\n #simulador-hipoteca-root {\r\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\r\n line-height: 1.6;\r\n color: #1e293b;\r\n }\r\n #simulador-hipoteca-root * {\r\n box-sizing: border-box;\r\n }\r\n \/* Forzar colores de input para temas oscuros\/claros de WP *\/\r\n #simulador-hipoteca-root input, \r\n #simulador-hipoteca-root select {\r\n color: #1e293b;\r\n background-color: #ffffff;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Contenedor donde se montar\u00e1 la App -->\r\n <div id=\"simulador-hipoteca-root\"><\/div>\r\n\r\n <!-- L\u00f3gica de la Aplicaci\u00f3n -->\r\n <script type=\"text\/babel\">\r\n const { useState, useEffect } = React;\r\n\r\n \/\/ --- ICONOS SVG ---\r\n const IconCalculator = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"\/><line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"\/><line x1=\"16\" x2=\"16\" y1=\"14\" y2=\"18\"\/><path d=\"M16 10h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M8 14h.01\"\/><path d=\"M12 18h.01\"\/><path d=\"M8 18h.01\"\/><\/svg>;\r\n const IconBuilding = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\" ry=\"2\"\/><path d=\"M9 22v-4h6v4\"\/><path d=\"M8 6h.01\"\/><path d=\"M16 6h.01\"\/><path d=\"M12 6h.01\"\/><path d=\"M12 10h.01\"\/><path d=\"M12 14h.01\"\/><path d=\"M16 10h.01\"\/><path d=\"M16 14h.01\"\/><path d=\"M8 10h.01\"\/><path d=\"M8 14h.01\"\/><\/svg>;\r\n const IconPercent = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><line x1=\"19\" x2=\"5\" y1=\"5\" y2=\"19\"\/><circle cx=\"6.5\" cy=\"6.5\" r=\"2.5\"\/><circle cx=\"17.5\" cy=\"17.5\" r=\"2.5\"\/><\/svg>;\r\n const IconWallet = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1\"\/><path d=\"M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4\"\/><\/svg>;\r\n const IconMapPin = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>;\r\n const IconCheckCircle = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>;\r\n const IconAlertTriangle = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z\"\/><line x1=\"12\" x2=\"12\" y1=\"9\" y2=\"13\"\/><line x1=\"12\" x2=\"12.01\" y1=\"17\" y2=\"17\"\/><\/svg>;\r\n const IconXCircle = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"m15 9-6 6\"\/><path d=\"m9 9 6 6\"\/><\/svg>;\r\n const IconPiggy = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M19 5c-1.5 0-2.8.6-3.8 1.6l-1.2 1.1-1.2-1.1A4.98 4.98 0 0 0 9 5c-3 0-5.3 2.5-5 5.5l1.3 11a1 1 0 0 0 1 .9H18a1 1 0 0 0 1-1l.7-6.5c.3-2.5-1.7-4.9-4.2-4.9Z\"\/><path d=\"M16 9h.01\"\/><path d=\"M9 9h.01\"\/><\/svg>;\r\n\r\n const App = () => {\r\n \/\/ --- ESTADOS (INPUTS) ---\r\n const [precio, setPrecio] = useState(260000);\r\n const [ahorros, setAhorros] = useState(60000);\r\n const [sueldo1, setSueldo1] = useState(1800);\r\n const [sueldo2, setSueldo2] = useState(1500);\r\n const [tin, setTin] = useState(3.5);\r\n const [plazo, setPlazo] = useState(30);\r\n const [otrosPrestamos, setOtrosPrestamos] = useState(0);\r\n const [otrosCostes, setOtrosCostes] = useState(0); \r\n \r\n \/\/ Nuevo estado para la regi\u00f3n\r\n const [region, setRegion] = useState('baleares');\r\n const [impuestosPct, setImpuestosPct] = useState(4);\r\n\r\n \/\/ --- EFECTO: C\u00c1LCULO AUTOM\u00c1TICO DE IMPUESTOS ---\r\n useEffect(() => {\r\n if (region === 'baleares') {\r\n if (precio < 270000) {\r\n setImpuestosPct(4);\r\n } else {\r\n setImpuestosPct(8);\r\n }\r\n } else if (region === 'general') {\r\n setImpuestosPct(10);\r\n }\r\n }, [precio, region]);\r\n\r\n \/\/ --- C\u00c1LCULOS ---\r\n const gastosImpuestos = precio * (impuestosPct \/ 100);\r\n \r\n \/\/ 1. Coste Total Adquisici\u00f3n\r\n const costeTotalAdquisicion = precio + gastosImpuestos + otrosCostes;\r\n \r\n \/\/ Necesidad de financiaci\u00f3n\r\n const necesidadFinanciacion = Math.max(0, costeTotalAdquisicion - ahorros);\r\n \r\n const calcularCuota = () => {\r\n if (necesidadFinanciacion <= 0) return 0;\r\n if (tin === 0) return necesidadFinanciacion \/ (plazo * 12);\r\n const r = tin \/ 100 \/ 12;\r\n const n = plazo * 12;\r\n return necesidadFinanciacion * (r * Math.pow(1 + r, n)) \/ (Math.pow(1 + r, n) - 1);\r\n };\r\n\r\n const cuota = calcularCuota();\r\n const ingresosTotales = sueldo1 + sueldo2;\r\n const deudaTotal = cuota + otrosPrestamos;\r\n \r\n const ltv = (necesidadFinanciacion \/ precio) * 100;\r\n const tasaEsfuerzo = ingresosTotales > 0 ? (deudaTotal \/ ingresosTotales) * 100 : 0;\r\n const remanente = Math.max(0, ingresosTotales - deudaTotal);\r\n\r\n \/\/ 2. Coste Final tras X a\u00f1os\r\n const totalPagadoBanco = cuota * plazo * 12;\r\n const costeFinalTotal = totalPagadoBanco + ahorros;\r\n const interesesPagados = totalPagadoBanco - necesidadFinanciacion;\r\n\r\n \/\/ --- L\u00d3GICA SEM\u00c1FORO ---\r\n let estado = { color: 'bg-green-50 text-green-800 border-green-200', Icon: IconCheckCircle, mensaje: 'VIABLE', descripcion: 'Cumples holgadamente los criterios.' };\r\n \r\n if (tasaEsfuerzo > 35 || ltv > 90) {\r\n estado = { color: 'bg-red-50 text-red-800 border-red-200', Icon: IconXCircle, mensaje: 'MUY DIF\u00cdCIL', descripcion: 'Riesgo alto. Superas l\u00edmites de endeudamiento.' };\r\n } else if (tasaEsfuerzo > 30 || ltv > 80) {\r\n estado = { color: 'bg-yellow-50 text-yellow-800 border-yellow-200', Icon: IconAlertTriangle, mensaje: 'AJUSTADO', descripcion: 'Operaci\u00f3n al l\u00edmite. Requiere perfil solvente.' };\r\n }\r\n\r\n const formatEUR = (num) => new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(num);\r\n\r\n return (\r\n <div className=\"bg-slate-50 p-4 sm:p-8 font-sans text-slate-800 rounded-xl\">\r\n <div className=\"max-w-7xl mx-auto\">\r\n \r\n {\/* HEADER *\/}\r\n <header className=\"mb-10 text-center sm:text-left flex flex-col sm:flex-row items-center gap-4\">\r\n <div className=\"bg-gradient-to-br from-blue-600 to-blue-700 p-4 rounded-2xl shadow-lg shadow-blue-200 text-white transform transition-transform hover:scale-105\">\r\n <IconCalculator \/>\r\n <\/div>\r\n <div>\r\n <h1 className=\"text-3xl font-extrabold text-slate-900 tracking-tight mb-1\">Calculadora Hipoteca<\/h1>\r\n <p className=\"text-slate-500 font-medium\">An\u00e1lisis de viabilidad financiera (Espa\u00f1a)<\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n <div className=\"grid grid-cols-1 lg:grid-cols-12 gap-8\">\r\n \r\n {\/* COLUMNA IZQUIERDA: INPUTS *\/}\r\n <div className=\"lg:col-span-4 space-y-6\">\r\n \r\n {\/* Tarjeta 1: La Vivienda *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 hover:shadow-lg transition-shadow duration-300\">\r\n <h2 className=\"text-lg font-bold flex items-center gap-2 mb-5 text-slate-800 border-b border-slate-100 pb-3\">\r\n <span className=\"text-blue-500 bg-blue-50 p-1.5 rounded-lg\"><IconBuilding \/><\/span> La Vivienda\r\n <\/h2>\r\n \r\n <div className=\"space-y-5\">\r\n {\/* Selector de Regi\u00f3n *\/}\r\n <div className=\"p-3 bg-slate-50 rounded-xl border border-slate-200\">\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1 mb-2\">\r\n <IconMapPin \/> Ubicaci\u00f3n\r\n <\/label>\r\n <select \r\n value={region} \r\n onChange={(e) => setRegion(e.target.value)}\r\n className=\"w-full p-2 bg-transparent text-sm font-semibold text-slate-700 focus:outline-none cursor-pointer\"\r\n >\r\n <option value=\"baleares\">Baleares (Regla 4% \/ 8%)<\/option>\r\n <option value=\"general\">Espa\u00f1a General (10%)<\/option>\r\n <option value=\"custom\">Personalizado<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Precio Compra<\/label>\r\n <div className=\"relative group\">\r\n <input \r\n type=\"number\" \r\n value={precio} \r\n onChange={(e) => setPrecio(Number(e.target.value))}\r\n className=\"w-full p-3 pl-4 rounded-xl bg-white border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none transition-all font-mono font-bold text-lg text-slate-700 shadow-sm\"\r\n \/>\r\n <span className=\"absolute right-4 top-3.5 text-slate-400\">\u20ac<\/span>\r\n <\/div>\r\n {region === 'baleares' && (\r\n <p className={`text-xs mt-1.5 text-right font-semibold ${precio < 270000 ? 'text-emerald-600' : 'text-amber-600'}`}>\r\n {precio < 270000 ? '\u2728 Aplica tipo reducido (4%)' : '\u2139\ufe0f Supera 270k: Tipo general (8%)'}\r\n <\/p>\r\n )}\r\n <\/div>\r\n\r\n {\/* Impuestos *\/}\r\n <div>\r\n <div className=\"flex justify-between items-center mb-1\">\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider\">Impuestos ({impuestosPct}%)<\/label>\r\n <span className=\"text-xs text-slate-400\">{formatEUR(gastosImpuestos)}<\/span>\r\n <\/div>\r\n \r\n {region === 'custom' ? (\r\n <input \r\n type=\"range\" min=\"0\" max=\"15\" step=\"0.5\"\r\n value={impuestosPct}\r\n onChange={(e) => setImpuestosPct(Number(e.target.value))}\r\n className=\"w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600\"\r\n \/>\r\n ) : (\r\n <div className=\"w-full h-2 bg-slate-100 rounded-lg overflow-hidden\">\r\n <div className=\"h-full bg-blue-400 w-full opacity-30\"><\/div>\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n {\/* Otros Costes *\/}\r\n <div>\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Reformas y Extras<\/label>\r\n <div className=\"relative\">\r\n <input \r\n type=\"number\" \r\n value={otrosCostes} \r\n onChange={(e) => setOtrosCostes(Number(e.target.value))}\r\n className=\"w-full p-3 pl-4 rounded-xl bg-white border border-slate-200 focus:ring-2 focus:ring-blue-500 focus:outline-none transition-all font-mono font-medium text-slate-700\"\r\n placeholder=\"0\"\r\n \/>\r\n <span className=\"absolute right-4 top-3 text-slate-400\">\u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* TOTAL COMPRA *\/}\r\n <div className=\"p-4 bg-slate-50 rounded-xl border border-slate-200 flex flex-col items-end\">\r\n <span className=\"text-xs font-bold text-slate-500 uppercase tracking-wider mb-1\">Total Necesario<\/span>\r\n <span className=\"text-xl font-mono font-bold text-slate-800 tracking-tight\">{formatEUR(costeTotalAdquisicion)}<\/span>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Ahorros Aportados<\/label>\r\n <div className=\"relative\">\r\n <input \r\n type=\"number\" \r\n value={ahorros} \r\n onChange={(e) => setAhorros(Number(e.target.value))}\r\n className=\"w-full p-3 pl-4 rounded-xl bg-white border border-slate-200 focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 focus:outline-none transition-all font-mono font-bold text-lg text-emerald-700 shadow-sm\"\r\n \/>\r\n <span className=\"absolute right-4 top-3.5 text-slate-400\">\u20ac<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Tarjeta 2: Condiciones *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 hover:shadow-lg transition-shadow duration-300\">\r\n <h2 className=\"text-lg font-bold flex items-center gap-2 mb-5 text-slate-800 border-b border-slate-100 pb-3\">\r\n <span className=\"text-purple-500 bg-purple-50 p-1.5 rounded-lg\"><IconPercent \/><\/span> Condiciones Banco\r\n <\/h2>\r\n <div className=\"space-y-4\">\r\n <div className=\"flex gap-4\">\r\n <div className=\"flex-1\">\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Inter\u00e9s (TIN)<\/label>\r\n <div className=\"relative\">\r\n <input \r\n type=\"number\" step=\"0.1\"\r\n value={tin} \r\n onChange={(e) => setTin(Number(e.target.value))}\r\n className=\"w-full p-3 rounded-xl bg-white border border-slate-200 focus:ring-2 focus:ring-purple-500 focus:outline-none font-mono font-bold text-slate-700 text-center\"\r\n \/>\r\n <span className=\"absolute right-3 top-3.5 text-slate-400 text-sm font-medium\">%<\/span>\r\n <\/div>\r\n <\/div>\r\n <div className=\"flex-1\">\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Plazo (A\u00f1os)<\/label>\r\n <div className=\"relative\">\r\n <input \r\n type=\"number\"\r\n value={plazo} \r\n onChange={(e) => setPlazo(Number(e.target.value))}\r\n className=\"w-full p-3 rounded-xl bg-white border border-slate-200 focus:ring-2 focus:ring-purple-500 focus:outline-none font-mono font-bold text-slate-700 text-center\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* Tarjeta 3: Econom\u00eda Familiar *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-md border border-slate-100 hover:shadow-lg transition-shadow duration-300\">\r\n <h2 className=\"text-lg font-bold flex items-center gap-2 mb-5 text-slate-800 border-b border-slate-100 pb-3\">\r\n <span className=\"text-emerald-500 bg-emerald-50 p-1.5 rounded-lg\"><IconWallet \/><\/span> Econom\u00eda\r\n <\/h2>\r\n <div className=\"space-y-3\">\r\n <div className=\"grid grid-cols-2 gap-3\">\r\n <div>\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Sueldo 1<\/label>\r\n <input type=\"number\" value={sueldo1} onChange={(e) => setSueldo1(Number(e.target.value))} className=\"w-full p-2.5 rounded-lg border border-slate-200 font-mono text-sm focus:ring-2 focus:ring-emerald-500 focus:outline-none\" \/>\r\n <\/div>\r\n <div>\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Sueldo 2<\/label>\r\n <input type=\"number\" value={sueldo2} onChange={(e) => setSueldo2(Number(e.target.value))} className=\"w-full p-2.5 rounded-lg border border-slate-200 font-mono text-sm focus:ring-2 focus:ring-emerald-500 focus:outline-none\" \/>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider block mb-1\">Otras Deudas Mes<\/label>\r\n <input type=\"number\" value={otrosPrestamos} onChange={(e) => setOtrosPrestamos(Number(e.target.value))} className=\"w-full p-2.5 rounded-lg border border-slate-200 font-mono text-sm focus:ring-2 focus:ring-orange-500 focus:outline-none\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* COLUMNA DERECHA: RESULTADOS *\/}\r\n <div className=\"lg:col-span-8 space-y-6\">\r\n \r\n {\/* KPI CARDS (Highlights) *\/}\r\n <div className=\"grid grid-cols-1 sm:grid-cols-3 gap-4\">\r\n {\/* Cuota Card *\/}\r\n <div className=\"bg-gradient-to-br from-blue-600 to-indigo-700 text-white p-6 rounded-2xl shadow-xl shadow-blue-200 relative overflow-hidden\">\r\n <div className=\"relative z-10\">\r\n <p className=\"text-blue-100 text-sm font-semibold mb-1 uppercase tracking-wider\">Cuota Mensual<\/p>\r\n <p className=\"text-3xl font-extrabold tracking-tight mb-0\">{formatEUR(cuota)}<\/p>\r\n <p className=\"text-xs text-blue-200 mt-2 font-medium\">Durante {plazo} a\u00f1os<\/p>\r\n <\/div>\r\n <div className=\"absolute right-0 top-0 w-32 h-32 bg-white opacity-5 rounded-full -mr-10 -mt-10 blur-2xl\"><\/div>\r\n <\/div>\r\n \r\n {\/* Capital Card *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-center\">\r\n <p className=\"text-slate-400 text-xs font-bold uppercase tracking-wider mb-1\">Hipoteca a Pedir<\/p>\r\n <p className=\"text-2xl font-bold text-slate-800\">{formatEUR(necesidadFinanciacion)}<\/p>\r\n <p className=\"text-xs text-slate-400 mt-2\">Diferencia necesaria<\/p>\r\n <\/div>\r\n \r\n {\/* Ingresos Card *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-center\">\r\n <p className=\"text-slate-400 text-xs font-bold uppercase tracking-wider mb-1\">Ingresos Hogar<\/p>\r\n <p className=\"text-2xl font-bold text-slate-800\">{formatEUR(ingresosTotales)}<\/p>\r\n <p className=\"text-xs text-slate-400 mt-2\">Neto mensual<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* AN\u00c1LISIS DE VIABILIDAD *\/}\r\n <div className={`p-6 rounded-2xl border shadow-sm ${estado.color} flex flex-col sm:flex-row items-start gap-5 transition-colors duration-300`}>\r\n <div className=\"bg-white p-3 rounded-full shadow-sm flex-shrink-0\">\r\n <estado.Icon \/>\r\n <\/div>\r\n <div>\r\n <h3 className=\"text-xl font-bold leading-tight mb-1\">Diagn\u00f3stico: {estado.mensaje}<\/h3>\r\n <p className=\"opacity-90 leading-relaxed text-sm sm:text-base\">{estado.descripcion}<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* GR\u00c1FICOS Y RATIOS DETALLADOS *\/}\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n \r\n {\/* RATIOS DE RIESGO *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200\">\r\n <h3 className=\"font-bold text-slate-800 mb-6 flex items-center gap-2\">\r\n <span className=\"w-1.5 h-6 bg-slate-800 rounded-full\"><\/span>\r\n Ratios de Riesgo\r\n <\/h3>\r\n \r\n {\/* LTV *\/}\r\n <div className=\"mb-6 group\">\r\n <div className=\"flex justify-between mb-2 items-end\">\r\n <span className=\"text-sm font-medium text-slate-600\">LTV (Financiaci\u00f3n)<\/span>\r\n <span className={`text-lg font-bold font-mono ${ltv > 80 ? 'text-red-500' : 'text-slate-700'}`}>{ltv.toFixed(1)}%<\/span>\r\n <\/div>\r\n <div className=\"w-full bg-slate-100 rounded-full h-3 overflow-hidden\">\r\n <div \r\n className={`h-full rounded-full transition-all duration-1000 ease-out ${ltv > 80 ? 'bg-gradient-to-r from-red-500 to-red-600' : 'bg-gradient-to-r from-blue-500 to-blue-600'}`} \r\n style={{ width: `${Math.min(ltv, 100)}%` }}\r\n ><\/div>\r\n <\/div>\r\n <p className=\"text-xs text-slate-400 mt-1.5\">M\u00e1ximo recomendado: 80%<\/p>\r\n <\/div>\r\n\r\n {\/* TASA DE ESFUERZO *\/}\r\n <div className=\"group\">\r\n <div className=\"flex justify-between mb-2 items-end\">\r\n <span className=\"text-sm font-medium text-slate-600\">Esfuerzo (Deuda\/Ingresos)<\/span>\r\n <span className={`text-lg font-bold font-mono ${tasaEsfuerzo > 35 ? 'text-red-500' : 'text-slate-700'}`}>{tasaEsfuerzo.toFixed(1)}%<\/span>\r\n <\/div>\r\n <div className=\"w-full bg-slate-100 rounded-full h-3 overflow-hidden\">\r\n <div \r\n className={`h-full rounded-full transition-all duration-1000 ease-out ${tasaEsfuerzo > 35 ? 'bg-gradient-to-r from-red-500 to-red-600' : tasaEsfuerzo > 30 ? 'bg-gradient-to-r from-yellow-400 to-orange-500' : 'bg-gradient-to-r from-emerald-500 to-emerald-600'}`} \r\n style={{ width: `${Math.min(tasaEsfuerzo, 100)}%` }}\r\n ><\/div>\r\n <\/div>\r\n <p className=\"text-xs text-slate-400 mt-1.5\">M\u00e1ximo recomendado: 30-35%<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* GR\u00c1FICO DE DISTRIBUCI\u00d3N *\/}\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between\">\r\n <h3 className=\"font-bold text-slate-800 mb-4 flex items-center gap-2\">\r\n <span className=\"w-1.5 h-6 bg-slate-800 rounded-full\"><\/span>\r\n Destino de Ingresos\r\n <\/h3>\r\n \r\n <div className=\"flex-grow flex items-end gap-3 h-40 pb-2 border-b border-slate-100\">\r\n {\/* Barra Hipoteca *\/}\r\n <div className=\"w-1\/3 flex flex-col items-center gap-2 group cursor-default\">\r\n <span className=\"text-xs font-bold text-blue-600 bg-blue-50 px-2 py-1 rounded shadow-sm\">{formatEUR(cuota)}<\/span>\r\n <div \r\n className=\"w-full bg-gradient-to-t from-blue-500 to-blue-400 rounded-t-lg transition-all duration-1000 ease-out group-hover:to-blue-300\"\r\n style={{ height: `${Math.min((cuota \/ ingresosTotales) * 100, 100)}%` }}\r\n ><\/div>\r\n <span className=\"text-xs text-slate-500 font-semibold uppercase tracking-wide\">Hipoteca<\/span>\r\n <\/div>\r\n\r\n {\/* Barra Otras Deudas *\/}\r\n <div className=\"w-1\/3 flex flex-col items-center gap-2 group cursor-default\">\r\n <span className=\"text-xs font-bold text-orange-600 bg-orange-50 px-2 py-1 rounded shadow-sm\">{formatEUR(otrosPrestamos)}<\/span>\r\n <div \r\n className=\"w-full bg-gradient-to-t from-orange-400 to-amber-400 rounded-t-lg transition-all duration-1000 ease-out group-hover:to-amber-300\"\r\n style={{ height: `${Math.min((otrosPrestamos \/ ingresosTotales) * 100, 100)}%` }}\r\n ><\/div>\r\n <span className=\"text-xs text-slate-500 font-semibold uppercase tracking-wide text-center\">Deudas<\/span>\r\n <\/div>\r\n\r\n {\/* Barra Disponible *\/}\r\n <div className=\"w-1\/3 flex flex-col items-center gap-2 group cursor-default\">\r\n <span className=\"text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded shadow-sm\">{formatEUR(remanente)}<\/span>\r\n <div \r\n className=\"w-full bg-gradient-to-t from-emerald-500 to-teal-400 rounded-t-lg transition-all duration-1000 ease-out group-hover:to-teal-300\"\r\n style={{ height: `${Math.min((remanente \/ ingresosTotales) * 100, 100)}%` }}\r\n ><\/div>\r\n <span className=\"text-xs text-slate-500 font-semibold uppercase tracking-wide\">Libre<\/span>\r\n <\/div>\r\n <\/div>\r\n <p className=\"text-xs text-slate-400 mt-3 text-center\">Distribuci\u00f3n mensual estimada.<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n {\/* NUEVA TARJETA DE COSTE FINAL (FIX VISIBILIDAD) *\/}\r\n {\/* Se aplica style={{color: white}} para forzar la visibilidad en WP *\/}\r\n <div className=\"bg-gradient-to-br from-slate-800 to-slate-900 text-white p-6 sm:p-8 rounded-2xl shadow-2xl border border-slate-700 relative overflow-hidden\" style={{ color: '#ffffff' }}>\r\n \r\n {\/* Decoraci\u00f3n de fondo *\/}\r\n <div className=\"absolute top-0 right-0 -mt-10 -mr-10 w-40 h-40 bg-yellow-500 opacity-10 rounded-full blur-3xl pointer-events-none\"><\/div>\r\n\r\n <h3 className=\"text-xl font-bold flex items-center gap-3 mb-6 relative z-10\" style={{ color: '#ffffff' }}>\r\n <div className=\"bg-slate-700\/50 p-2 rounded-lg text-yellow-400 shadow-inner\">\r\n <IconPiggy \/>\r\n <\/div>\r\n <span>Coste Real tras {plazo} a\u00f1os<\/span>\r\n <\/h3>\r\n \r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8 relative z-10\">\r\n <div className=\"flex flex-col justify-center\">\r\n <p className=\"text-slate-400 text-sm mb-1 font-medium\">Total Pagado (Intereses + Principal)<\/p>\r\n <p className=\"text-4xl font-extrabold text-white mb-2 tracking-tight\" style={{ color: '#ffffff' }}>{formatEUR(costeFinalTotal)}<\/p>\r\n <p className=\"text-xs text-slate-400\">Incluyendo entrada, impuestos y cuotas.<\/p>\r\n <\/div>\r\n <div className=\"space-y-3 text-sm bg-slate-800\/50 p-4 rounded-xl border border-slate-700\/50\">\r\n <div className=\"flex justify-between border-b border-slate-700 pb-2\">\r\n <span className=\"text-slate-300\">Pr\u00e9stamo solicitado:<\/span>\r\n <span className=\"font-mono font-bold\">{formatEUR(necesidadFinanciacion)}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between border-b border-slate-700 pb-2\">\r\n <span className=\"text-slate-300\">Intereses Pagados:<\/span>\r\n <span className=\"font-mono font-bold text-yellow-400\">+{formatEUR(interesesPagados)}<\/span>\r\n <\/div>\r\n <div className=\"flex justify-between pt-1\">\r\n <span className=\"text-slate-300\">Ahorros Iniciales:<\/span>\r\n <span className=\"font-mono font-bold text-emerald-400\">+{formatEUR(ahorros)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n };\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('simulador-hipoteca-root'));\r\n root.render(<App \/>);\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\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 Hipoteca Espa\u00f1a – Baleares<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ngg_post_thumbnail":0,"footnotes":"","_joinchat":[]},"_links":{"self":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3780"}],"collection":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/comments?post=3780"}],"version-history":[{"count":16,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3780\/revisions"}],"predecessor-version":[{"id":3798,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3780\/revisions\/3798"}],"wp:attachment":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/media?parent=3780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}