Calculadora Hipoteca Espa\u00f1a - Baleares + IA<\/title>\r\n \r\n \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 \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\r\n\r\n \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 #simulador-hipoteca-root textarea {\r\n color: #1e293b;\r\n background-color: #ffffff;\r\n }\r\n \/* Estilos para el contenido Markdown generado por IA *\/\r\n .prose-ia strong { color: #1e40af; font-weight: 700; }\r\n .prose-ia ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.5rem; }\r\n .prose-ia li { margin-bottom: 0.25rem; }\r\n .prose-ia p { margin-bottom: 0.75rem; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"simulador-hipoteca-root\"><\/div>\r\n\r\n \r\n <script type=\"text\/babel\">\r\n \/\/ ----------------------------------------------------------------------------------\r\n \/\/ \u2b07\ufe0f PEGA TU API KEY AQU\u00cd ENTRE LAS COMILLAS PARA NO TENER QUE ESCRIBIRLA SIEMPRE \u2b07\ufe0f\r\n \/\/ Ejemplo: const API_KEY_FIJA = \"AIzaSyD...\";\r\n const API_KEY_FIJA = \"\"; \r\n \/\/ \u26a0\ufe0f ADVERTENCIA: Si publicas esto en internet, tu clave ser\u00e1 visible para otros.\r\n \/\/ ----------------------------------------------------------------------------------\r\n\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 const IconSparkles = () => <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=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M9 5H3\"\/><path d=\"M5 21v-4\"\/><path d=\"M9 19H3\"\/><path d=\"M21 3v4\"\/><path d=\"M19 5h6\"\/><path d=\"M21 21v-4\"\/><path d=\"M19 19h6\"\/><\/svg>;\r\n const IconKey = () => <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\"><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"\/><path d=\"m21 2-9.6 9.6\"\/><path d=\"m15.5 7.5 3 3L22 7l-3-3\"\/><\/svg>;\r\n const IconLock = () => <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\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>;\r\n const IconMail = () => <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=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/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 \/\/ --- ESTADOS IA (ASESOR) ---\r\n const [apiKey, setApiKey] = useState(API_KEY_FIJA); \r\n const [aiAnalysis, setAiAnalysis] = useState('');\r\n const [loadingAi, setLoadingAi] = useState(false);\r\n const [errorAi, setErrorAi] = useState('');\r\n\r\n \/\/ --- ESTADOS IA (CARTA BANCO) ---\r\n const [emailDraft, setEmailDraft] = useState('');\r\n const [loadingEmail, setLoadingEmail] = useState(false);\r\n const [errorEmail, setErrorEmail] = useState('');\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 const costeTotalAdquisicion = precio + gastosImpuestos + otrosCostes;\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 const totalPagadoBanco = cuota * plazo * 12;\r\n const costeFinalTotal = totalPagadoBanco + ahorros;\r\n const interesesPagados = totalPagadoBanco - necesidadFinanciacion;\r\n\r\n \/\/ --- FUNCI\u00d3N COM\u00daN PARA LLAMAR A GEMINI ---\r\n const llamarGemini = async (prompt, setLoading, setError, setOutput) => {\r\n const keyToUse = API_KEY_FIJA || apiKey;\r\n\r\n if (!keyToUse) {\r\n setError('Por favor, introduce tu API Key de Gemini primero.');\r\n return;\r\n }\r\n \r\n setLoading(true);\r\n setError('');\r\n setOutput('');\r\n\r\n \/\/ Funci\u00f3n auxiliar para intentar fetch\r\n const tryFetch = async (modelName) => {\r\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/${modelName}:generateContent?key=${keyToUse}`, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })\r\n });\r\n \r\n if (response.status === 429) throw new Error('QUOTA_EXCEEDED');\r\n \r\n if (!response.ok) {\r\n const errData = await response.json();\r\n if (errData.error && (errData.error.message.includes('not found') || errData.error.code === 404)) {\r\n throw new Error('MODEL_NOT_FOUND');\r\n }\r\n if (errData.error && errData.error.message.toLowerCase().includes('quota')) {\r\n throw new Error('QUOTA_EXCEEDED');\r\n }\r\n throw new Error(errData.error?.message || 'Error desconocido');\r\n }\r\n return response.json();\r\n };\r\n\r\n try {\r\n let data;\r\n try {\r\n data = await tryFetch('gemini-1.5-flash-001');\r\n } catch (e) {\r\n if (e.message === 'MODEL_NOT_FOUND') {\r\n console.warn('Modelo 1.5 no encontrado, probando 2.0...');\r\n data = await tryFetch('gemini-2.0-flash');\r\n } else {\r\n throw e;\r\n }\r\n }\r\n const text = data.candidates[0].content.parts[0].text;\r\n setOutput(text);\r\n\r\n } catch (err) {\r\n if (err.message === 'QUOTA_EXCEEDED' || err.message.includes('quota')) {\r\n setError('\u26a0\ufe0f L\u00edmite de velocidad alcanzado (Rate Limit). Espera 30 segundos y reintenta.');\r\n } else {\r\n setError(err.message.replace('Error: ', ''));\r\n }\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n \/\/ --- MANEJADORES DE IA ---\r\n const consultarAsesor = () => {\r\n const prompt = `Eres un asesor hipotecario experto y emp\u00e1tico en Espa\u00f1a. Analiza la siguiente operaci\u00f3n para un cliente:\r\n DATOS:\r\n - Precio Vivienda: ${formatEUR(precio)}\r\n - Ahorros Aportados: ${formatEUR(ahorros)}\r\n - Ingresos Mensuales Netos (Hogar): ${formatEUR(ingresosTotales)}\r\n - Deudas previas mensuales: ${formatEUR(otrosPrestamos)}\r\n - Cuota Hipoteca Estimada: ${formatEUR(cuota)}\r\n - Tasa de Esfuerzo Actual: ${tasaEsfuerzo.toFixed(2)}%\r\n - LTV (Pr\u00e9stamo\/Valor): ${ltv.toFixed(2)}%\r\n - Plazo: ${plazo} a\u00f1os\r\n - Tipo Inter\u00e9s (TIN): ${tin}%\r\n\r\n TAREA:\r\n Proporciona un an\u00e1lisis breve (m\u00e1ximo 150 palabras) y profesional. Estruct\u00faralo as\u00ed:\r\n 1. **Veredicto R\u00e1pido**: \u00bfEs viable? \u00bfArriesgada?\r\n 2. **An\u00e1lisis de Riesgos**: Menciona si el LTV o la tasa de esfuerzo son altos.\r\n 3. **Recomendaci\u00f3n \"Pro\"**: Un consejo financiero pr\u00e1ctico (ej: amortizar, buscar tipo fijo\/mixto, negociar vinculaciones).\r\n Usa formato Markdown. S\u00e9 directo.`;\r\n \r\n llamarGemini(prompt, setLoadingAi, setErrorAi, setAiAnalysis);\r\n };\r\n\r\n const generarCarta = () => {\r\n const porcentajeAhorro = ((ahorros \/ costeTotalAdquisicion) * 100).toFixed(1);\r\n const prompt = `Act\u00faa como un experto en banca y redacci\u00f3n persuasiva. Redacta un **correo electr\u00f3nico formal** dirigido al director de una oficina bancaria para solicitar condiciones para una hipoteca.\r\n El tono debe ser profesional, educado y seguro.\r\n \r\n DATOS DEL SOLICITANTE PARA INCLUIR EN EL CORREO:\r\n - Ingresos netos mensuales del hogar: ${formatEUR(ingresosTotales)} (destacar solvencia si es alto)\r\n - Ahorros aportados: ${formatEUR(ahorros)} (supone un ${porcentajeAhorro}% del coste total)\r\n - Precio de compra: ${formatEUR(precio)}\r\n - Importe de pr\u00e9stamo solicitado: ${formatEUR(necesidadFinanciacion)}\r\n - LTV resultante: ${ltv.toFixed(1)}% (si es bajo de 80%, dest\u00e1calo como punto fuerte)\r\n - Endeudamiento actual bajo: ${otrosPrestamos === 0 ? \"Sin otras deudas\" : formatEUR(otrosPrestamos) + \"\/mes\"}\r\n\r\n ESTRUCTURA DEL CORREO:\r\n - Asunto: Claro y directo.\r\n - Saludo formal.\r\n - Introducci\u00f3n: Motivo del correo.\r\n - Cuerpo: Resumen de los puntos fuertes financieros (Ahorros, ingresos estables, LTV).\r\n - Cierre: Solicitud de reuni\u00f3n o estudio personalizado.\r\n - Deja marcadores como [Tu Nombre], [Nombre del Banco], [Tel\u00e9fono] para que el usuario los rellene.\r\n \r\n No uses Markdown, solo texto plano bien formateado.`;\r\n\r\n llamarGemini(prompt, setLoadingEmail, setErrorEmail, setEmailDraft);\r\n };\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 justify-between\">\r\n <div className=\"flex 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 <\/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 {\/* --- SECCI\u00d3N 1 IA: ASESOR HIPOTECARIO --- *\/}\r\n <div className=\"bg-white rounded-2xl shadow-lg border border-indigo-100 overflow-hidden mb-6\">\r\n <div className=\"bg-gradient-to-r from-indigo-600 to-violet-600 p-6 text-white\">\r\n <h3 className=\"text-xl font-bold flex items-center gap-2\">\r\n <IconSparkles \/> Asesor Hipotecario IA\r\n <\/h3>\r\n <p className=\"text-indigo-100 text-sm mt-1\">\r\n Nuestra IA analiza tus ingresos, deudas y ahorros para ofrecerte un diagn\u00f3stico de riesgo y consejos financieros a medida.\r\n <\/p>\r\n <\/div>\r\n \r\n <div className=\"p-6 space-y-4\">\r\n {!apiKey && !API_KEY_FIJA && (\r\n <div className=\"bg-indigo-50 p-4 rounded-xl border border-indigo-100 text-sm text-indigo-800 mb-4\">\r\n Para usar estas funciones IA, necesitas una <strong>API Key de Google Gemini<\/strong>. Es gratuita y puedes conseguirla en Google AI Studio.\r\n <\/div>\r\n )}\r\n\r\n {\/* Si hay clave fija, mostramos un mensaje discreto en lugar del input *\/}\r\n {API_KEY_FIJA ? (\r\n <div className=\"flex items-center gap-2 text-sm text-emerald-600 bg-emerald-50 p-3 rounded-xl border border-emerald-100\">\r\n <IconLock \/>\r\n <span className=\"font-medium\">API Key configurada internamente.<\/span>\r\n <\/div>\r\n ) : (\r\n <div className=\"flex flex-col sm:flex-row gap-3\">\r\n <div className=\"flex-grow relative\">\r\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\">\r\n <IconKey \/>\r\n <\/div>\r\n <input \r\n type=\"password\" \r\n value={apiKey}\r\n onChange={(e) => setApiKey(e.target.value)}\r\n placeholder=\"Pega tu API Key de Gemini aqu\u00ed...\"\r\n className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all text-sm font-mono\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n <button \r\n onClick={consultarAsesor}\r\n disabled={loadingAi || (!apiKey && !API_KEY_FIJA)}\r\n className={`w-full sm:w-auto px-6 py-3 rounded-xl font-bold text-white shadow-md transition-all flex items-center justify-center gap-2 whitespace-nowrap\r\n ${loadingAi || (!apiKey && !API_KEY_FIJA)\r\n ? 'bg-slate-300 cursor-not-allowed' \r\n : 'bg-indigo-600 hover:bg-indigo-700 hover:scale-105 active:scale-95'\r\n }`}\r\n >\r\n {loadingAi ? (\r\n <>\r\n <svg className=\"animate-spin h-5 w-5 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle>\r\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\r\n <\/svg>\r\n Analizando...\r\n <\/>\r\n ) : (\r\n <>\r\n <IconSparkles \/> Analizar Viabilidad\r\n <\/>\r\n )}\r\n <\/button>\r\n\r\n {errorAi && (\r\n <div className=\"p-4 bg-red-50 text-red-600 rounded-xl text-sm border border-red-100 flex items-center gap-2\">\r\n <IconAlertTriangle \/> {errorAi}\r\n <\/div>\r\n )}\r\n\r\n {aiAnalysis && (\r\n <div className=\"mt-6 animate-fadeIn\">\r\n <div className=\"prose-ia text-slate-700 text-sm leading-relaxed bg-slate-50 p-6 rounded-xl border border-slate-200 shadow-inner\"\r\n dangerouslySetInnerHTML={{ __html: marked.parse(aiAnalysis) }} \r\n \/>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* --- SECCI\u00d3N 2 IA: REDACTOR DE CARTAS (NUEVO) --- *\/}\r\n <div className=\"bg-white rounded-2xl shadow-lg border border-teal-100 overflow-hidden\">\r\n <div className=\"bg-gradient-to-r from-teal-600 to-emerald-600 p-6 text-white\">\r\n <h3 className=\"text-xl font-bold flex items-center gap-2\">\r\n <IconMail \/> Generador de Carta al Banco\r\n <\/h3>\r\n <p className=\"text-teal-100 text-sm mt-1\">\r\n Redacta autom\u00e1ticamente un correo formal para solicitar condiciones a tu banco.\r\n <\/p>\r\n <\/div>\r\n \r\n <div className=\"p-6 space-y-4\">\r\n <p className=\"text-sm text-slate-600\">\r\n \u00bfQuieres contactar con un banco? Pulsa el bot\u00f3n y la IA escribir\u00e1 por ti un borrador profesional destacando tus puntos fuertes (ahorros, ingresos, etc.).\r\n <\/p>\r\n\r\n <button \r\n onClick={generarCarta}\r\n disabled={loadingEmail || (!apiKey && !API_KEY_FIJA)}\r\n className={`w-full sm:w-auto px-6 py-3 rounded-xl font-bold text-white shadow-md transition-all flex items-center justify-center gap-2 whitespace-nowrap\r\n ${loadingEmail || (!apiKey && !API_KEY_FIJA)\r\n ? 'bg-slate-300 cursor-not-allowed' \r\n : 'bg-teal-600 hover:bg-teal-700 hover:scale-105 active:scale-95'\r\n }`}\r\n >\r\n {loadingEmail ? (\r\n <>\r\n <svg className=\"animate-spin h-5 w-5 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle>\r\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\r\n <\/svg>\r\n Redactando...\r\n <\/>\r\n ) : (\r\n <>\r\n <span className=\"text-xl\">\u2709\ufe0f<\/span> Generar Borrador de Email\r\n <\/>\r\n )}\r\n <\/button>\r\n\r\n {errorEmail && (\r\n <div className=\"p-4 bg-red-50 text-red-600 rounded-xl text-sm border border-red-100 flex items-center gap-2\">\r\n <IconAlertTriangle \/> {errorEmail}\r\n <\/div>\r\n )}\r\n\r\n {emailDraft && (\r\n <div className=\"mt-6 animate-fadeIn\">\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block\">Borrador Generado:<\/label>\r\n <textarea \r\n className=\"w-full h-64 p-4 rounded-xl border border-slate-300 text-sm font-mono text-slate-700 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:outline-none resize-y\"\r\n value={emailDraft}\r\n readOnly\r\n ><\/textarea>\r\n <p className=\"text-xs text-slate-400 mt-2 text-center\">\r\n Copia este texto y ad\u00e1ptalo antes de enviar.\r\n <\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* TARJETA DE COSTE FINAL *\/}\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 <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 + IA<\/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\/3799"}],"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=3799"}],"version-history":[{"count":16,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3799\/revisions"}],"predecessor-version":[{"id":3817,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3799\/revisions\/3817"}],"wp:attachment":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/media?parent=3799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\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 + IA<\/title>\r\n \r\n \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 \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\r\n\r\n \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 #simulador-hipoteca-root textarea {\r\n color: #1e293b;\r\n background-color: #ffffff;\r\n }\r\n \/* Estilos para el contenido Markdown generado por IA *\/\r\n .prose-ia strong { color: #1e40af; font-weight: 700; }\r\n .prose-ia ul { list-style-type: disc; padding-left: 1.5rem; margin-top: 0.5rem; }\r\n .prose-ia li { margin-bottom: 0.25rem; }\r\n .prose-ia p { margin-bottom: 0.75rem; }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"simulador-hipoteca-root\"><\/div>\r\n\r\n \r\n <script type=\"text\/babel\">\r\n \/\/ ----------------------------------------------------------------------------------\r\n \/\/ \u2b07\ufe0f PEGA TU API KEY AQU\u00cd ENTRE LAS COMILLAS PARA NO TENER QUE ESCRIBIRLA SIEMPRE \u2b07\ufe0f\r\n \/\/ Ejemplo: const API_KEY_FIJA = \"AIzaSyD...\";\r\n const API_KEY_FIJA = \"\"; \r\n \/\/ \u26a0\ufe0f ADVERTENCIA: Si publicas esto en internet, tu clave ser\u00e1 visible para otros.\r\n \/\/ ----------------------------------------------------------------------------------\r\n\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 const IconSparkles = () => <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=\"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z\"\/><path d=\"M5 3v4\"\/><path d=\"M9 5H3\"\/><path d=\"M5 21v-4\"\/><path d=\"M9 19H3\"\/><path d=\"M21 3v4\"\/><path d=\"M19 5h6\"\/><path d=\"M21 21v-4\"\/><path d=\"M19 19h6\"\/><\/svg>;\r\n const IconKey = () => <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\"><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"\/><path d=\"m21 2-9.6 9.6\"\/><path d=\"m15.5 7.5 3 3L22 7l-3-3\"\/><\/svg>;\r\n const IconLock = () => <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\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>;\r\n const IconMail = () => <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=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"\/><path d=\"m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7\"\/><\/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 \/\/ --- ESTADOS IA (ASESOR) ---\r\n const [apiKey, setApiKey] = useState(API_KEY_FIJA); \r\n const [aiAnalysis, setAiAnalysis] = useState('');\r\n const [loadingAi, setLoadingAi] = useState(false);\r\n const [errorAi, setErrorAi] = useState('');\r\n\r\n \/\/ --- ESTADOS IA (CARTA BANCO) ---\r\n const [emailDraft, setEmailDraft] = useState('');\r\n const [loadingEmail, setLoadingEmail] = useState(false);\r\n const [errorEmail, setErrorEmail] = useState('');\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 const costeTotalAdquisicion = precio + gastosImpuestos + otrosCostes;\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 const totalPagadoBanco = cuota * plazo * 12;\r\n const costeFinalTotal = totalPagadoBanco + ahorros;\r\n const interesesPagados = totalPagadoBanco - necesidadFinanciacion;\r\n\r\n \/\/ --- FUNCI\u00d3N COM\u00daN PARA LLAMAR A GEMINI ---\r\n const llamarGemini = async (prompt, setLoading, setError, setOutput) => {\r\n const keyToUse = API_KEY_FIJA || apiKey;\r\n\r\n if (!keyToUse) {\r\n setError('Por favor, introduce tu API Key de Gemini primero.');\r\n return;\r\n }\r\n \r\n setLoading(true);\r\n setError('');\r\n setOutput('');\r\n\r\n \/\/ Funci\u00f3n auxiliar para intentar fetch\r\n const tryFetch = async (modelName) => {\r\n const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/${modelName}:generateContent?key=${keyToUse}`, {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json' },\r\n body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }] })\r\n });\r\n \r\n if (response.status === 429) throw new Error('QUOTA_EXCEEDED');\r\n \r\n if (!response.ok) {\r\n const errData = await response.json();\r\n if (errData.error && (errData.error.message.includes('not found') || errData.error.code === 404)) {\r\n throw new Error('MODEL_NOT_FOUND');\r\n }\r\n if (errData.error && errData.error.message.toLowerCase().includes('quota')) {\r\n throw new Error('QUOTA_EXCEEDED');\r\n }\r\n throw new Error(errData.error?.message || 'Error desconocido');\r\n }\r\n return response.json();\r\n };\r\n\r\n try {\r\n let data;\r\n try {\r\n data = await tryFetch('gemini-1.5-flash-001');\r\n } catch (e) {\r\n if (e.message === 'MODEL_NOT_FOUND') {\r\n console.warn('Modelo 1.5 no encontrado, probando 2.0...');\r\n data = await tryFetch('gemini-2.0-flash');\r\n } else {\r\n throw e;\r\n }\r\n }\r\n const text = data.candidates[0].content.parts[0].text;\r\n setOutput(text);\r\n\r\n } catch (err) {\r\n if (err.message === 'QUOTA_EXCEEDED' || err.message.includes('quota')) {\r\n setError('\u26a0\ufe0f L\u00edmite de velocidad alcanzado (Rate Limit). Espera 30 segundos y reintenta.');\r\n } else {\r\n setError(err.message.replace('Error: ', ''));\r\n }\r\n } finally {\r\n setLoading(false);\r\n }\r\n };\r\n\r\n \/\/ --- MANEJADORES DE IA ---\r\n const consultarAsesor = () => {\r\n const prompt = `Eres un asesor hipotecario experto y emp\u00e1tico en Espa\u00f1a. Analiza la siguiente operaci\u00f3n para un cliente:\r\n DATOS:\r\n - Precio Vivienda: ${formatEUR(precio)}\r\n - Ahorros Aportados: ${formatEUR(ahorros)}\r\n - Ingresos Mensuales Netos (Hogar): ${formatEUR(ingresosTotales)}\r\n - Deudas previas mensuales: ${formatEUR(otrosPrestamos)}\r\n - Cuota Hipoteca Estimada: ${formatEUR(cuota)}\r\n - Tasa de Esfuerzo Actual: ${tasaEsfuerzo.toFixed(2)}%\r\n - LTV (Pr\u00e9stamo\/Valor): ${ltv.toFixed(2)}%\r\n - Plazo: ${plazo} a\u00f1os\r\n - Tipo Inter\u00e9s (TIN): ${tin}%\r\n\r\n TAREA:\r\n Proporciona un an\u00e1lisis breve (m\u00e1ximo 150 palabras) y profesional. Estruct\u00faralo as\u00ed:\r\n 1. **Veredicto R\u00e1pido**: \u00bfEs viable? \u00bfArriesgada?\r\n 2. **An\u00e1lisis de Riesgos**: Menciona si el LTV o la tasa de esfuerzo son altos.\r\n 3. **Recomendaci\u00f3n \"Pro\"**: Un consejo financiero pr\u00e1ctico (ej: amortizar, buscar tipo fijo\/mixto, negociar vinculaciones).\r\n Usa formato Markdown. S\u00e9 directo.`;\r\n \r\n llamarGemini(prompt, setLoadingAi, setErrorAi, setAiAnalysis);\r\n };\r\n\r\n const generarCarta = () => {\r\n const porcentajeAhorro = ((ahorros \/ costeTotalAdquisicion) * 100).toFixed(1);\r\n const prompt = `Act\u00faa como un experto en banca y redacci\u00f3n persuasiva. Redacta un **correo electr\u00f3nico formal** dirigido al director de una oficina bancaria para solicitar condiciones para una hipoteca.\r\n El tono debe ser profesional, educado y seguro.\r\n \r\n DATOS DEL SOLICITANTE PARA INCLUIR EN EL CORREO:\r\n - Ingresos netos mensuales del hogar: ${formatEUR(ingresosTotales)} (destacar solvencia si es alto)\r\n - Ahorros aportados: ${formatEUR(ahorros)} (supone un ${porcentajeAhorro}% del coste total)\r\n - Precio de compra: ${formatEUR(precio)}\r\n - Importe de pr\u00e9stamo solicitado: ${formatEUR(necesidadFinanciacion)}\r\n - LTV resultante: ${ltv.toFixed(1)}% (si es bajo de 80%, dest\u00e1calo como punto fuerte)\r\n - Endeudamiento actual bajo: ${otrosPrestamos === 0 ? \"Sin otras deudas\" : formatEUR(otrosPrestamos) + \"\/mes\"}\r\n\r\n ESTRUCTURA DEL CORREO:\r\n - Asunto: Claro y directo.\r\n - Saludo formal.\r\n - Introducci\u00f3n: Motivo del correo.\r\n - Cuerpo: Resumen de los puntos fuertes financieros (Ahorros, ingresos estables, LTV).\r\n - Cierre: Solicitud de reuni\u00f3n o estudio personalizado.\r\n - Deja marcadores como [Tu Nombre], [Nombre del Banco], [Tel\u00e9fono] para que el usuario los rellene.\r\n \r\n No uses Markdown, solo texto plano bien formateado.`;\r\n\r\n llamarGemini(prompt, setLoadingEmail, setErrorEmail, setEmailDraft);\r\n };\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 justify-between\">\r\n <div className=\"flex 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 <\/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 {\/* --- SECCI\u00d3N 1 IA: ASESOR HIPOTECARIO --- *\/}\r\n <div className=\"bg-white rounded-2xl shadow-lg border border-indigo-100 overflow-hidden mb-6\">\r\n <div className=\"bg-gradient-to-r from-indigo-600 to-violet-600 p-6 text-white\">\r\n <h3 className=\"text-xl font-bold flex items-center gap-2\">\r\n <IconSparkles \/> Asesor Hipotecario IA\r\n <\/h3>\r\n <p className=\"text-indigo-100 text-sm mt-1\">\r\n Nuestra IA analiza tus ingresos, deudas y ahorros para ofrecerte un diagn\u00f3stico de riesgo y consejos financieros a medida.\r\n <\/p>\r\n <\/div>\r\n \r\n <div className=\"p-6 space-y-4\">\r\n {!apiKey && !API_KEY_FIJA && (\r\n <div className=\"bg-indigo-50 p-4 rounded-xl border border-indigo-100 text-sm text-indigo-800 mb-4\">\r\n Para usar estas funciones IA, necesitas una <strong>API Key de Google Gemini<\/strong>. Es gratuita y puedes conseguirla en Google AI Studio.\r\n <\/div>\r\n )}\r\n\r\n {\/* Si hay clave fija, mostramos un mensaje discreto en lugar del input *\/}\r\n {API_KEY_FIJA ? (\r\n <div className=\"flex items-center gap-2 text-sm text-emerald-600 bg-emerald-50 p-3 rounded-xl border border-emerald-100\">\r\n <IconLock \/>\r\n <span className=\"font-medium\">API Key configurada internamente.<\/span>\r\n <\/div>\r\n ) : (\r\n <div className=\"flex flex-col sm:flex-row gap-3\">\r\n <div className=\"flex-grow relative\">\r\n <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400\">\r\n <IconKey \/>\r\n <\/div>\r\n <input \r\n type=\"password\" \r\n value={apiKey}\r\n onChange={(e) => setApiKey(e.target.value)}\r\n placeholder=\"Pega tu API Key de Gemini aqu\u00ed...\"\r\n className=\"w-full pl-10 p-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition-all text-sm font-mono\"\r\n \/>\r\n <\/div>\r\n <\/div>\r\n )}\r\n\r\n <button \r\n onClick={consultarAsesor}\r\n disabled={loadingAi || (!apiKey && !API_KEY_FIJA)}\r\n className={`w-full sm:w-auto px-6 py-3 rounded-xl font-bold text-white shadow-md transition-all flex items-center justify-center gap-2 whitespace-nowrap\r\n ${loadingAi || (!apiKey && !API_KEY_FIJA)\r\n ? 'bg-slate-300 cursor-not-allowed' \r\n : 'bg-indigo-600 hover:bg-indigo-700 hover:scale-105 active:scale-95'\r\n }`}\r\n >\r\n {loadingAi ? (\r\n <>\r\n <svg className=\"animate-spin h-5 w-5 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle>\r\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\r\n <\/svg>\r\n Analizando...\r\n <\/>\r\n ) : (\r\n <>\r\n <IconSparkles \/> Analizar Viabilidad\r\n <\/>\r\n )}\r\n <\/button>\r\n\r\n {errorAi && (\r\n <div className=\"p-4 bg-red-50 text-red-600 rounded-xl text-sm border border-red-100 flex items-center gap-2\">\r\n <IconAlertTriangle \/> {errorAi}\r\n <\/div>\r\n )}\r\n\r\n {aiAnalysis && (\r\n <div className=\"mt-6 animate-fadeIn\">\r\n <div className=\"prose-ia text-slate-700 text-sm leading-relaxed bg-slate-50 p-6 rounded-xl border border-slate-200 shadow-inner\"\r\n dangerouslySetInnerHTML={{ __html: marked.parse(aiAnalysis) }} \r\n \/>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* --- SECCI\u00d3N 2 IA: REDACTOR DE CARTAS (NUEVO) --- *\/}\r\n <div className=\"bg-white rounded-2xl shadow-lg border border-teal-100 overflow-hidden\">\r\n <div className=\"bg-gradient-to-r from-teal-600 to-emerald-600 p-6 text-white\">\r\n <h3 className=\"text-xl font-bold flex items-center gap-2\">\r\n <IconMail \/> Generador de Carta al Banco\r\n <\/h3>\r\n <p className=\"text-teal-100 text-sm mt-1\">\r\n Redacta autom\u00e1ticamente un correo formal para solicitar condiciones a tu banco.\r\n <\/p>\r\n <\/div>\r\n \r\n <div className=\"p-6 space-y-4\">\r\n <p className=\"text-sm text-slate-600\">\r\n \u00bfQuieres contactar con un banco? Pulsa el bot\u00f3n y la IA escribir\u00e1 por ti un borrador profesional destacando tus puntos fuertes (ahorros, ingresos, etc.).\r\n <\/p>\r\n\r\n <button \r\n onClick={generarCarta}\r\n disabled={loadingEmail || (!apiKey && !API_KEY_FIJA)}\r\n className={`w-full sm:w-auto px-6 py-3 rounded-xl font-bold text-white shadow-md transition-all flex items-center justify-center gap-2 whitespace-nowrap\r\n ${loadingEmail || (!apiKey && !API_KEY_FIJA)\r\n ? 'bg-slate-300 cursor-not-allowed' \r\n : 'bg-teal-600 hover:bg-teal-700 hover:scale-105 active:scale-95'\r\n }`}\r\n >\r\n {loadingEmail ? (\r\n <>\r\n <svg className=\"animate-spin h-5 w-5 text-white\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"><\/circle>\r\n <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path>\r\n <\/svg>\r\n Redactando...\r\n <\/>\r\n ) : (\r\n <>\r\n <span className=\"text-xl\">\u2709\ufe0f<\/span> Generar Borrador de Email\r\n <\/>\r\n )}\r\n <\/button>\r\n\r\n {errorEmail && (\r\n <div className=\"p-4 bg-red-50 text-red-600 rounded-xl text-sm border border-red-100 flex items-center gap-2\">\r\n <IconAlertTriangle \/> {errorEmail}\r\n <\/div>\r\n )}\r\n\r\n {emailDraft && (\r\n <div className=\"mt-6 animate-fadeIn\">\r\n <label className=\"text-xs font-bold text-slate-500 uppercase tracking-wider mb-2 block\">Borrador Generado:<\/label>\r\n <textarea \r\n className=\"w-full h-64 p-4 rounded-xl border border-slate-300 text-sm font-mono text-slate-700 bg-slate-50 focus:ring-2 focus:ring-teal-500 focus:outline-none resize-y\"\r\n value={emailDraft}\r\n readOnly\r\n ><\/textarea>\r\n <p className=\"text-xs text-slate-400 mt-2 text-center\">\r\n Copia este texto y ad\u00e1ptalo antes de enviar.\r\n <\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* TARJETA DE COSTE FINAL *\/}\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 <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 + IA<\/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\/3799"}],"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=3799"}],"version-history":[{"count":16,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3799\/revisions"}],"predecessor-version":[{"id":3817,"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/pages\/3799\/revisions\/3817"}],"wp:attachment":[{"href":"https:\/\/eventosday.es\/index.php\/wp-json\/wp\/v2\/media?parent=3799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}