{"id":26,"date":"2024-11-04T04:29:48","date_gmt":"2024-11-04T04:29:48","guid":{"rendered":"https:\/\/gaviaspreview.com\/wp\/homirx\/?page_id=26"},"modified":"2026-03-30T16:34:52","modified_gmt":"2026-03-30T16:34:52","slug":"events-page","status":"publish","type":"page","link":"https:\/\/inmobiliariasactor.com\/?page_id=26","title":{"rendered":"Events Page"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"26\" class=\"elementor elementor-26\">\n\t\t\t\t<div class=\"elementor-element elementor-element-846609c e-flex e-con-boxed e-con e-parent\" data-id=\"846609c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:127,&quot;url&quot;:&quot;https:\\\/\\\/gaviaspreview.com\\\/wp\\\/homirx\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/breadcrumb-01.jpg&quot;},{&quot;id&quot;:358,&quot;url&quot;:&quot;https:\\\/\\\/gaviaspreview.com\\\/wp\\\/homirx\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/breadcrumb-03.jpg&quot;}],&quot;background_slideshow_ken_burns&quot;:&quot;yes&quot;,&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500,&quot;background_slideshow_ken_burns_zoom_direction&quot;:&quot;in&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-d3597a5 e-con-full e-flex e-con e-child\" data-id=\"d3597a5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f9aa095 elementor-widget elementor-widget-gva-heading-block\" data-id=\"f9aa095\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"gva-heading-block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-heading-block gva-element\">\r\n   <div class=\"align-center style-1 widget gsc-heading box-align-left auto-responsive\">\r\n      \r\n      <div class=\"content-inner\">\r\n                  \r\n           \r\n         \r\n                     <h2 class=\"title\">\r\n               <span>Future Dream Home<\/span>\r\n            <\/h2>\r\n                  \r\n                     <div class=\"title-desc\">Providing the best Real Estate services<\/div>\r\n         \r\n               <\/div>\r\n\r\n   <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\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<div class=\"elementor-element elementor-element-bf70d4b e-flex e-con-boxed e-con e-parent\" data-id=\"bf70d4b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-22001a1 elementor-widget elementor-widget-gva-events\" data-id=\"22001a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"gva-events.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-events gva-element\"><\/div>\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<div class=\"elementor-element elementor-element-2c99502 e-flex e-con-boxed e-con e-parent\" data-id=\"2c99502\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-f8dae4f e-con-full e-flex e-con e-child\" data-id=\"f8dae4f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0b731db elementor-widget elementor-widget-gva-image-content\" data-id=\"0b731db\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"gva-image-content.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-image-content gva-element\">\t\t\r\n\t\t\t<div class=\"about-one__single\">\r\n\t\t\t\t \t<div class=\"about-one__image\"><div class=\"image-inner\"><img decoding=\"async\" src=\"https:\/\/gaviaspreview.com\/wp\/homirx\/wp-content\/uploads\/2024\/11\/image-01.jpg\" title=\"\" alt=\"\" loading=\"lazy\" \/><\/div><\/div>\t\r\n\t\t\t\t\t  <a href=\"#\" aria-label=\"link\" class=\"about-one__link-overlay\"><\/a>\r\n\t\t  \t\t<\/div>\r\n\t  \r\n\t \r\n\r\n\t \r\n\r\n\t\r\n \r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ca9891 elementor-absolute elementor-widget elementor-widget-gva-video-box\" data-id=\"7ca9891\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"gva-video-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-video-box gva-element\">\r\n   \r\n         <div class=\"video-two__single\">\r\n         <div class=\"video-two__inner\">\r\n            <div class=\"video-two__content\">\r\n               <div class=\"video-two__action\">\r\n                  <span class=\"video-two__icon\"><i class=\"fa fa-play\"><\/i><\/span>\r\n               <\/div>\r\n               <svg class=\"video-two__rotatingText\" viewBox=\"0 0 200 200\" width=\"200\" height=\"200\">\r\n                  <defs>\r\n                    <path id=\"circle_rysz\" d=\"M 100, 100 m -75, 0 a 75, 75 0 1, 0 150, 0 a 75, 75 0 1, 0 -150, 0\"><\/path>\r\n                  <\/defs>\r\n                  <text>\r\n                    <textPath xlink:href=\"#circle_rysz\" class=\"video-two__title\">\r\n                                             PLAY INTRO VIDEO - PLAY INTRO VIDEO -                                          <\/textPath>\r\n                  <\/text>\r\n               <\/svg>\r\n                              <a href=\"https:\/\/www.youtube.com\/watch?v=ZSiXZxVpVhs\" class=\"popup-video video-two__link\"><\/a>\r\n            <\/div>    \r\n         <\/div>\r\n      <\/div> \r\n      \r\n        \r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-70df800 e-con-full e-flex e-con e-child\" data-id=\"70df800\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bffd42 elementor-widget elementor-widget-gva-heading-block\" data-id=\"1bffd42\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"gva-heading-block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-heading-block gva-element\">\r\n   <div class=\"align-left style-1 widget gsc-heading box-align-left auto-responsive\">\r\n      \r\n      <div class=\"content-inner\">\r\n                  \r\n         <div class=\"sub-title\"><span class=\"tagline\">About Company<\/span><\/div>  \r\n         \r\n                     <h2 class=\"title\">\r\n               <span>Welcome To Properties<\/span>\r\n            <\/h2>\r\n                  \r\n                     <div class=\"title-desc\">It is a long established fact that a reader will be distracted the readable content of a page when looking at layout the point of using lorem the is Ipsum less normal distribution of letters.<\/div>\r\n         \r\n               <\/div>\r\n\r\n   <\/div>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2afd028 e-con-full e-flex e-con e-child\" data-id=\"2afd028\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f2875f8 elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"f2875f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\" hicon-arrow-right-1\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Proactively pontificate client<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\" hicon-arrow-right-1\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Is there a waiting list for desired <\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\" hicon-arrow-right-1\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Immediate 24\/ 7 Emergency<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4993e92 elementor-widget elementor-widget-gva-counter\" data-id=\"4993e92\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"gva-counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-counter gva-element\">\r\n         <div class=\"milestone-one__single\">\r\n            \r\n         \r\n         <div class=\"milestone-one__content\">\r\n            <div class=\"milestone-one__number\">\r\n               <span class=\"milestone-number\">30<\/span><span class=\"symbol before\">k<\/span><span class=\"symbol after\">+<\/span>            <\/div>\r\n            <div class=\"milestone-one__title\">Satisficed<br> Client<\/div>         <\/div>\r\n         \r\n         \r\n      <\/div> \r\n   \r\n   \r\n   <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed2350a elementor-widget elementor-widget-gva-counter\" data-id=\"ed2350a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"gva-counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gva-element-gva-counter gva-element\">\r\n         <div class=\"milestone-one__single\">\r\n            \r\n         \r\n         <div class=\"milestone-one__content\">\r\n            <div class=\"milestone-one__number\">\r\n               <span class=\"milestone-number\">700<\/span><span class=\"symbol after\">+<\/span>            <\/div>\r\n            <div class=\"milestone-one__title\">House<\/div>         <\/div>\r\n         \r\n         \r\n      <\/div> \r\n   \r\n   \r\n   <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1334996 elementor-widget elementor-widget-html\" data-id=\"1334996\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<a href=\"https:\/\/gaviaspreview.com\/wp\/homirx\/about\/\" class=\"btn-theme-2\"><span class=\"btn-icon\"><i aria-hidden=\"true\" class=\"hicon-home\"><\/i><\/span>\n    Explore More\n    <\/a>\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<div class=\"elementor-element elementor-element-9457316 e-flex e-con-boxed e-con e-parent\" data-id=\"9457316\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea41377 elementor-widget elementor-widget-html\" data-id=\"ea41377\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es-MX\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>CRM SactorTech<\/title>\r\n    \r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    \r\n    <script type=\"importmap\">\r\n    {\r\n        \"imports\": {\r\n            \"react\": \"https:\/\/esm.sh\/react@18.2.0\",\r\n            \"react-dom\/client\": \"https:\/\/esm.sh\/react-dom@18.2.0\/client\",\r\n            \"lucide-react\": \"https:\/\/esm.sh\/lucide-react@0.292.0\"\r\n        }\r\n    }\r\n    <\/script>\r\n    \r\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n<\/head>\r\n<body class=\"bg-gray-50 text-gray-900\">\r\n\r\n    <div id=\"root\"><\/div>\r\n\r\n    <script type=\"text\/babel\" data-type=\"module\">\r\n        import React, { useState, useMemo, useEffect } from 'react';\r\n        import { createRoot } from 'react-dom\/client';\r\n        import { \r\n          Home, Map, DollarSign, TrendingUp, Briefcase, Plus, Check, X, \r\n          Edit3, FileText, PieChart, LayoutDashboard, Sparkles, Loader2, \r\n          Trash2, Calendar, Save, History, Bot, Send, FileSignature, \r\n          MessageCircle, LineChart, Copy, ClipboardList, Printer, ArrowLeft, \r\n          BookOpen, Building, Store, Eye, Users, UserPlus, Phone, Mail, BarChart3 \r\n        } from 'lucide-react';\r\n\r\n        \/\/ NOTA: Reemplac\u00e9 la importaci\u00f3n local de tu imagen por una URL directa porque HTML no soporta importaciones de archivos locales. \r\n        \/\/ C\u00e1mbiala por la URL de tu logo cuando lo subas a tu servidor web (ej. \"https:\/\/tusitio.com\/logo.png\").\r\n        const logoSactor = \"https:\/\/ui-avatars.com\/api\/?name=Sactor+Tech&background=e11d48&color=fff&rounded=true&bold=true\";\r\n\r\n        \/\/ ==========================================\r\n        \/\/ AQU\u00cd EMPIEZA TU C\u00d3DIGO ORIGINAL\r\n        \/\/ ==========================================\r\n\r\n        const formatCurrency = (value) => {\r\n          return new Intl.NumberFormat('es-MX', {\r\n            style: 'currency',\r\n            currency: 'MXN',\r\n            minimumFractionDigits: 0,\r\n            maximumFractionDigits: 0,\r\n          }).format(value);\r\n        };\r\n\r\n        const apiKey = \"AIzaSyBozz2_iugVnTsmGBUuMkTxGBq9H_Vrrtc\"; \r\n        const callGeminiAPI = async (prompt) => {\r\n          const url = `https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;\r\n          const payload = { contents: [{ parts: [{ text: prompt }] }] };\r\n          let retries = 5;\r\n          let delay = 1000;\r\n          for (let i = 0; i < retries; i++) {\r\n            try {\r\n              const res = await fetch(url, {\r\n                method: 'POST',\r\n                headers: { 'Content-Type': 'application\/json' },\r\n                body: JSON.stringify(payload)\r\n              });\r\n              if (!res.ok) throw new Error('Error en la API de Gemini');\r\n              const data = await res.json();\r\n              return data.candidates[0].content.parts[0].text;\r\n            } catch (e) {\r\n              if (i === retries - 1) return \"Lo siento, hubo un error al conectar con la IA. Intenta de nuevo m\u00e1s tarde.\";\r\n              await new Promise(resolve => setTimeout(resolve, delay));\r\n              delay *= 2;\r\n            }\r\n          }\r\n        };\r\n\r\n        const TABLA_INPC = {\r\n          \"2021-01\": 110.210, \"2021-02\": 110.907, \"2021-03\": 111.824, \"2021-04\": 112.190, \"2021-05\": 112.419, \"2021-06\": 113.018, \"2021-07\": 113.682, \"2021-08\": 113.899, \"2021-09\": 114.601, \"2021-10\": 115.561, \"2021-11\": 116.884, \"2021-12\": 117.308,\r\n          \"2022-01\": 118.002, \"2022-02\": 118.984, \"2022-03\": 120.160, \"2022-04\": 120.805, \"2022-05\": 121.020, \"2022-06\": 122.044, \"2022-07\": 122.948, \"2022-08\": 123.803, \"2022-09\": 124.570, \"2022-10\": 125.276, \"2022-11\": 125.997, \"2022-12\": 126.478,\r\n          \"2023-01\": 127.336, \"2023-02\": 128.046, \"2023-03\": 128.389, \"2023-04\": 128.363, \"2023-05\": 128.084, \"2023-06\": 128.214, \"2023-07\": 128.831, \"2023-08\": 129.549, \"2023-09\": 130.125, \"2023-10\": 131.053, \"2023-11\": 131.445, \"2023-12\": 132.373,\r\n          \"2024-01\": 133.555, \"2024-02\": 134.123, \"2024-03\": 134.485, \"2024-04\": 134.755, \"2024-05\": 134.450, \"2024-06\": 134.900, \"2024-07\": 135.500, \"2024-08\": 136.100, \"2024-09\": 136.650, \"2024-10\": 137.200, \"2024-11\": 138.000, \"2024-12\": 138.600,\r\n          \"2025-01\": 139.500, \"2025-02\": 140.100, \"2025-03\": 140.500, \"2025-04\": 140.800, \"2025-05\": 140.600, \"2025-06\": 141.200, \"2025-07\": 141.800, \"2025-08\": 142.300, \"2025-09\": 142.900, \"2025-10\": 143.500, \"2025-11\": 144.200, \"2025-12\": 143.532,\r\n          \"2026-01\": 145.700, \"2026-02\": 146.200\r\n        };\r\n\r\n        const TARIFA_ANUAL = [\r\n          { limiteInferior: 0.01, cuotaFija: 0.00, porcentaje: 1.92 },\r\n          { limiteInferior: 8952.50, cuotaFija: 171.88, porcentaje: 6.40 },\r\n          { limiteInferior: 75984.56, cuotaFija: 4461.94, porcentaje: 10.88 },\r\n          { limiteInferior: 133536.08, cuotaFija: 10719.31, porcentaje: 16.00 },\r\n          { limiteInferior: 155229.81, cuotaFija: 14190.31, porcentaje: 17.92 },\r\n          { limiteInferior: 185852.58, cuotaFija: 19678.56, porcentaje: 21.36 },\r\n          { limiteInferior: 374837.89, cuotaFija: 60049.25, porcentaje: 23.52 },\r\n          { limiteInferior: 590796.00, cuotaFija: 110845.81, porcentaje: 30.00 },\r\n          { limiteInferior: 1127926.85, cuotaFija: 271985.06, porcentaje: 32.00 },\r\n          { limiteInferior: 1503902.47, cuotaFija: 392294.25, porcentaje: 34.00 },\r\n          { limiteInferior: 4511707.38, cuotaFija: 1414947.88, porcentaje: 35.00 }\r\n        ];\r\n\r\n        const calcularImpuesto = (base) => {\r\n          if (base <= 0) return 0;\r\n          let estrato = TARIFA_ANUAL[0];\r\n          for (let i = TARIFA_ANUAL.length - 1; i >= 0; i--) {\r\n            if (base >= TARIFA_ANUAL[i].limiteInferior) {\r\n              estrato = TARIFA_ANUAL[i];\r\n              break;\r\n            }\r\n          }\r\n          const excedente = base - estrato.limiteInferior;\r\n          const impuestoMarginal = excedente * (estrato.porcentaje \/ 100);\r\n          return estrato.cuotaFija + impuestoMarginal;\r\n        };\r\n\r\n        const round2 = (num) => Math.round((num + Number.EPSILON) * 100) \/ 100;\r\n\r\n        const getSavedValue = (key, defaultValue) => {\r\n          const saved = localStorage.getItem(key);\r\n          if (saved !== null) {\r\n            try {\r\n              return JSON.parse(saved);\r\n            } catch (e) {\r\n              return defaultValue;\r\n            }\r\n          }\r\n          return defaultValue;\r\n        };\r\n\r\n        function CalculadoraISR() {\r\n          const [fechaEnajenacion, setFechaEnajenacion] = useState(() => getSavedValue('fechaEnajenacion', '2026-01-16'));\r\n          const [fechaAdqTerreno, setFechaAdqTerreno] = useState(() => getSavedValue('fechaAdqTerreno', '2021-08-03'));\r\n          const [fechaAdqConstruccion, setFechaAdqConstruccion] = useState(() => getSavedValue('fechaAdqConstruccion', '2023-10-16'));\r\n          const [fechaOtrasDeducciones, setFechaOtrasDeducciones] = useState(() => getSavedValue('fechaOtrasDeducciones', '2021-08-03'));\r\n\r\n          const [valAdqTerreno, setValAdqTerreno] = useState(() => getSavedValue('valAdqTerreno', 1585000));\r\n          const [valAdqConstruccion, setValAdqConstruccion] = useState(() => getSavedValue('valAdqConstruccion', 2134616.47));\r\n          const [valOtrasDeducciones, setValOtrasDeducciones] = useState(() => getSavedValue('valOtrasDeducciones', 0));\r\n          const [valEnaTerreno, setValEnaTerreno] = useState(() => getSavedValue('valEnaTerreno', 2967000));\r\n          const [valEnaConstruccion, setValEnaConstruccion] = useState(() => getSavedValue('valEnaConstruccion', 3933000));\r\n          const [numEnajenantes, setNumEnajenantes] = useState(() => getSavedValue('numEnajenantes', 1));\r\n\r\n          const [aplicaExencion, setAplicaExencion] = useState(() => getSavedValue('aplicaExencion', true));\r\n          const [valorUDI, setValorUDI] = useState(() => getSavedValue('valorUDI', 8.673681)); \r\n          const [isBuscandoUDI, setIsBuscandoUDI] = useState(false);\r\n          const [fechaUDI, setFechaUDI] = useState('');\r\n          const [errorUDI, setErrorUDI] = useState('');\r\n\r\n          const [inpcEnajenacion, setInpcEnajenacion] = useState(() => getSavedValue('inpcEnajenacion', 143.532));\r\n          const [inpcAdqTerreno, setInpcAdqTerreno] = useState(() => getSavedValue('inpcAdqTerreno', 113.899)); \r\n          const [inpcAdqConstruccion, setInpcAdqConstruccion] = useState(() => getSavedValue('inpcAdqConstruccion', 131.053)); \r\n          const [inpcOtrasDeducciones, setInpcOtrasDeducciones] = useState(() => getSavedValue('inpcOtrasDeducciones', 113.899)); \r\n\r\n          const [resultados, setResultados] = useState(null);\r\n\r\n          useEffect(() => {\r\n            localStorage.setItem('fechaEnajenacion', JSON.stringify(fechaEnajenacion));\r\n            localStorage.setItem('fechaAdqTerreno', JSON.stringify(fechaAdqTerreno));\r\n            localStorage.setItem('fechaAdqConstruccion', JSON.stringify(fechaAdqConstruccion));\r\n            localStorage.setItem('fechaOtrasDeducciones', JSON.stringify(fechaOtrasDeducciones));\r\n            localStorage.setItem('valAdqTerreno', JSON.stringify(valAdqTerreno));\r\n            localStorage.setItem('valAdqConstruccion', JSON.stringify(valAdqConstruccion));\r\n            localStorage.setItem('valOtrasDeducciones', JSON.stringify(valOtrasDeducciones));\r\n            localStorage.setItem('valEnaTerreno', JSON.stringify(valEnaTerreno));\r\n            localStorage.setItem('valEnaConstruccion', JSON.stringify(valEnaConstruccion));\r\n            localStorage.setItem('numEnajenantes', JSON.stringify(numEnajenantes));\r\n            localStorage.setItem('aplicaExencion', JSON.stringify(aplicaExencion));\r\n            localStorage.setItem('valorUDI', JSON.stringify(valorUDI));\r\n            localStorage.setItem('inpcEnajenacion', JSON.stringify(inpcEnajenacion));\r\n            localStorage.setItem('inpcAdqTerreno', JSON.stringify(inpcAdqTerreno));\r\n            localStorage.setItem('inpcAdqConstruccion', JSON.stringify(inpcAdqConstruccion));\r\n            localStorage.setItem('inpcOtrasDeducciones', JSON.stringify(inpcOtrasDeducciones));\r\n          }, [\r\n            fechaEnajenacion, fechaAdqTerreno, fechaAdqConstruccion, fechaOtrasDeducciones,\r\n            valAdqTerreno, valAdqConstruccion, valOtrasDeducciones, valEnaTerreno, valEnaConstruccion, \r\n            numEnajenantes, aplicaExencion, valorUDI,\r\n            inpcEnajenacion, inpcAdqTerreno, inpcAdqConstruccion, inpcOtrasDeducciones\r\n          ]);\r\n\r\n          const obtenerMesAnterior = (fechaString) => {\r\n            if (!fechaString) return '';\r\n            const d = new Date(fechaString);\r\n            d.setMonth(d.getMonth() - 1);\r\n            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;\r\n          };\r\n\r\n          const obtenerMesActual = (fechaString) => {\r\n            if (!fechaString) return '';\r\n            const d = new Date(fechaString);\r\n            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;\r\n          };\r\n\r\n          useEffect(() => {\r\n            const mesEna = obtenerMesAnterior(fechaEnajenacion);\r\n            const mesAdqT = obtenerMesActual(fechaAdqTerreno);\r\n            const mesAdqC = obtenerMesActual(fechaAdqConstruccion);\r\n            const mesOtras = obtenerMesActual(fechaOtrasDeducciones);\r\n\r\n            if (TABLA_INPC[mesEna]) setInpcEnajenacion(TABLA_INPC[mesEna]);\r\n            if (TABLA_INPC[mesAdqT]) setInpcAdqTerreno(TABLA_INPC[mesAdqT]);\r\n            if (TABLA_INPC[mesAdqC]) setInpcAdqConstruccion(TABLA_INPC[mesAdqC]);\r\n            if (TABLA_INPC[mesOtras]) setInpcOtrasDeducciones(TABLA_INPC[mesOtras]);\r\n          }, [fechaEnajenacion, fechaAdqTerreno, fechaAdqConstruccion, fechaOtrasDeducciones]);\r\n\r\n          const buscarUDIAuto = () => {\r\n            setIsBuscandoUDI(true);\r\n            setErrorUDI('');\r\n            setFechaUDI('');\r\n            \r\n            const tokenBanxico = 'd80628eb586dbde7ea3f1d856018318bc05193910cde427a1fc900138d821360';\r\n            const callbackName = 'jsonpCallbackBanxicoUDI';\r\n            const url = `https:\/\/www.banxico.org.mx\/SieAPIRest\/series\/SP68257\/datos\/oportuno?token=${tokenBanxico}&callback=${callbackName}`;\r\n            \r\n            const script = document.createElement('script');\r\n            script.src = url;\r\n            \r\n            window[callbackName] = (data) => {\r\n              const datoOportuno = data?.bmx?.series?.[0]?.datos?.[0];\r\n              if (datoOportuno && datoOportuno.dato) {\r\n                setValorUDI(parseFloat(datoOportuno.dato));\r\n                setFechaUDI(datoOportuno.fecha);\r\n              } else {\r\n                setErrorUDI('No disponible');\r\n              }\r\n              setIsBuscandoUDI(false);\r\n              delete window[callbackName];\r\n              document.body.removeChild(script);\r\n            };\r\n            \r\n            script.onerror = () => {\r\n              setErrorUDI('Error Banxico');\r\n              setIsBuscandoUDI(false);\r\n              delete window[callbackName];\r\n              document.body.removeChild(script);\r\n            };\r\n            \r\n            document.body.appendChild(script);\r\n          };\r\n\r\n          useEffect(() => {\r\n            if (inpcEnajenacion === 0 || inpcAdqTerreno === 0 || inpcAdqConstruccion === 0) return;\r\n\r\n            const calcularLISR = () => {\r\n              const dEna = new Date(fechaEnajenacion);\r\n              const dAdqT = new Date(fechaAdqTerreno);\r\n              const dAdqC = new Date(fechaAdqConstruccion);\r\n              const dOtras = new Date(fechaOtrasDeducciones);\r\n\r\n              let anosTerreno = Math.floor(Math.max(0, (dEna - dAdqT) \/ (1000 * 60 * 60 * 24 * 365.25)));\r\n              let anosConstruccion = Math.floor(Math.max(0, (dEna - dAdqC) \/ (1000 * 60 * 60 * 24 * 365.25)));\r\n              let anosOtras = Math.floor(Math.max(0, (dEna - dOtras) \/ (1000 * 60 * 60 * 24 * 365.25)));\r\n\r\n              if (anosTerreno === 0) anosTerreno = 1; \r\n              if (anosConstruccion === 0) anosConstruccion = 1;\r\n              if (anosOtras === 0) anosOtras = 1;\r\n\r\n              let porcDepreciacion = Math.min(0.80, anosConstruccion * 0.03);\r\n              const montoDepreciacion = round2(valAdqConstruccion * porcDepreciacion);\r\n              const construccionDepreciada = round2(valAdqConstruccion - montoDepreciacion);\r\n\r\n              const factorTerreno = Math.max(1, Math.trunc((inpcEnajenacion \/ inpcAdqTerreno) * 10000) \/ 10000);\r\n              const factorConstruccion = Math.max(1, Math.trunc((inpcEnajenacion \/ inpcAdqConstruccion) * 10000) \/ 10000);\r\n              const factorOtras = Math.max(1, Math.trunc((inpcEnajenacion \/ inpcOtrasDeducciones) * 10000) \/ 10000);\r\n\r\n              const costoActTerreno = round2(valAdqTerreno * factorTerreno);\r\n              const costoActConstruccion = round2(construccionDepreciada * factorConstruccion);\r\n              const costoActOtras = round2(valOtrasDeducciones * factorOtras);\r\n              const costoActualizadoTotal = round2(costoActTerreno + costoActConstruccion + costoActOtras);\r\n\r\n              const valorEnaTotal = round2(valEnaTerreno + valEnaConstruccion);\r\n              const gananciaHistTerreno = round2(Math.max(0, valEnaTerreno - costoActTerreno));\r\n              const gananciaHistConst = round2(Math.max(0, valEnaConstruccion - costoActConstruccion));\r\n              const gananciaHistOtras = round2(-costoActOtras); \r\n              \r\n              const gananciaTotalHist = round2(Math.max(0, gananciaHistTerreno + gananciaHistConst + gananciaHistOtras));\r\n\r\n              const gananciaAcumHistTerreno = round2(gananciaHistTerreno \/ Math.min(20, anosTerreno));\r\n              const gananciaAcumHistConst = round2(gananciaHistConst \/ Math.min(20, anosConstruccion));\r\n              const gananciaAcumHistOtras = round2(gananciaHistOtras \/ Math.min(20, anosOtras));\r\n              const gananciaAcumTotalHist = round2(Math.max(0, gananciaAcumHistTerreno + gananciaAcumHistConst + gananciaAcumHistOtras));\r\n\r\n              const limiteExencion = aplicaExencion ? round2(700000 * valorUDI) : 0;\r\n              let exencionAplicada = 0;\r\n              let valorEnaGravado = valorEnaTotal;\r\n              let costoActualizadoGravado = costoActualizadoTotal;\r\n              let proporcionGravada = 1;\r\n\r\n              if (aplicaExencion) {\r\n                exencionAplicada = Math.min(valorEnaTotal, limiteExencion);\r\n                valorEnaGravado = round2(Math.max(0, valorEnaTotal - limiteExencion));\r\n                proporcionGravada = valorEnaTotal > 0 ? valorEnaGravado \/ valorEnaTotal : 0;\r\n                costoActualizadoGravado = round2(costoActualizadoTotal * proporcionGravada);\r\n              }\r\n\r\n              const gananciaGravada = round2(Math.max(0, valorEnaGravado - costoActualizadoGravado));\r\n\r\n              if (gananciaGravada <= 0) {\r\n                setResultados({ \r\n                  pagoProvisional: 0, gananciaTotal: 0, detalle: 'P\u00e9rdida fiscal', valorEnaTotal, \r\n                  exencionAplicada, costoActualizadoGravado \r\n                });\r\n                return;\r\n              }\r\n\r\n              const propAcumulable = gananciaAcumTotalHist \/ gananciaTotalHist;\r\n              const gananciaAcumulableFinal = round2(gananciaGravada * propAcumulable);\r\n              const gananciaNoAcumulableFinal = round2(gananciaGravada - gananciaAcumulableFinal);\r\n\r\n              const gananciaAcumEnajenante = round2(gananciaAcumulableFinal \/ Math.max(1, numEnajenantes));\r\n              const impuestoAnualAcumulable = round2(calcularImpuesto(gananciaAcumEnajenante));\r\n              \r\n              const cociente = Math.trunc((impuestoAnualAcumulable \/ gananciaAcumEnajenante) * 10000) \/ 10000;\r\n              \r\n              const gananciaNoAcumEnajenante = round2(gananciaNoAcumulableFinal \/ Math.max(1, numEnajenantes));\r\n              const impuestoNoAcumulable = round2(gananciaNoAcumEnajenante * cociente);\r\n              \r\n              const impuestoProvisionalEnajenante = round2(impuestoAnualAcumulable + impuestoNoAcumulable);\r\n              \r\n              const gananciaGravadaEnajenante = round2(gananciaGravada \/ Math.max(1, numEnajenantes));\r\n              const impuestoEstadoEnajenante = round2(gananciaGravadaEnajenante * 0.05);\r\n              const impuestoFederacionEnajenante = round2(Math.max(0, impuestoProvisionalEnajenante - impuestoEstadoEnajenante));\r\n\r\n              setResultados({\r\n                anosTerreno, anosConstruccion, anosOtras, montoDepreciacion, construccionDepreciada,\r\n                factorTerreno, factorConstruccion, factorOtras, costoActTerreno, costoActConstruccion, costoActOtras,\r\n                costoActualizadoTotal, gananciaHistTerreno, gananciaHistConst, gananciaHistOtras,\r\n                gananciaTotalHist, gananciaAcumHistTerreno, gananciaAcumHistConst, gananciaAcumHistOtras,\r\n                gananciaAcumTotalHist, exencionAplicada, valorEnaGravado, proporcionGravada,\r\n                gananciaGravada, gananciaAcumulableFinal, gananciaNoAcumulableFinal, cociente, \r\n                impuestoEstadoEnajenante, impuestoFederacionEnajenante, pagoProvisional: impuestoProvisionalEnajenante,\r\n                valorEnaTotal, costoActualizadoGravado\r\n              });\r\n            };\r\n\r\n            calcularLISR();\r\n          }, [\r\n            fechaEnajenacion, fechaAdqTerreno, fechaAdqConstruccion, fechaOtrasDeducciones, valAdqTerreno, valAdqConstruccion, valEnaTerreno, valEnaConstruccion,\r\n            inpcEnajenacion, inpcAdqTerreno, inpcAdqConstruccion, inpcOtrasDeducciones, numEnajenantes, aplicaExencion, valorUDI\r\n          ]);\r\n\r\n          const formatMx = (val) => new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(val || 0);\r\n          const formatNum = (val) => new Intl.NumberFormat('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val || 0);\r\n\r\n          return (\r\n            <div className=\"bg-slate-300 p-2 md:p-6 font-sans text-slate-800 rounded-xl min-h-full\">\r\n              <div className=\"max-w-6xl mx-auto bg-slate-50 border border-slate-400 shadow-[8px_8px_0px_0px_rgba(0,0,0,0.3)] rounded-sm\">\r\n                <div className=\"bg-gradient-to-r from-rose-800 to-rose-600 text-white px-3 py-1 flex justify-between items-center border-b border-rose-900\">\r\n                  <span className=\"font-bold text-sm tracking-wide shadow-black drop-shadow-md\">\r\n                    DETERMINACI\u00d3N DEL IMPUESTO SOBRE LA RENTA POR ENAJENACI\u00d3N DE BIENES\r\n                  <\/span>\r\n                  <span className=\"text-[10px] bg-green-500 px-2 rounded-sm font-bold shadow-sm\">Auto INPC ON<\/span>\r\n                <\/div>\r\n\r\n                <div className=\"p-4 bg-[#f8f7f3] border-b-2 border-slate-300\">\r\n                  <div className=\"grid grid-cols-1 md:grid-cols-12 gap-4\">\r\n                    <div className=\"md:col-span-12 bg-white p-3 border border-slate-300 shadow-sm grid grid-cols-1 md:grid-cols-4 gap-3 items-end\">\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">F. Enajenaci\u00f3n (Firma):<\/label><input type=\"date\" value={fechaEnajenacion} onChange={e => setFechaEnajenacion(e.target.value)} className=\"border p-1 w-full text-xs outline-none focus:bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">INPC Venta (Mes Ant.):<\/label><input type=\"number\" step=\"0.001\" value={inpcEnajenacion} onChange={e => setInpcEnajenacion(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right outline-none bg-yellow-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">F. Adq. Terreno:<\/label><input type=\"date\" value={fechaAdqTerreno} onChange={e => setFechaAdqTerreno(e.target.value)} className=\"border p-1 w-full text-xs outline-none focus:bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">INPC Adq. Terreno:<\/label><input type=\"number\" step=\"0.001\" value={inpcAdqTerreno} onChange={e => setInpcAdqTerreno(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right outline-none bg-yellow-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">F. Adq. Construcci\u00f3n:<\/label><input type=\"date\" value={fechaAdqConstruccion} onChange={e => setFechaAdqConstruccion(e.target.value)} className=\"border p-1 w-full text-xs outline-none focus:bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">INPC Adq. Const.:<\/label><input type=\"number\" step=\"0.001\" value={inpcAdqConstruccion} onChange={e => setInpcAdqConstruccion(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right outline-none bg-yellow-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">F. Pago Impuestos Adq.:<\/label><input type=\"date\" value={fechaOtrasDeducciones} onChange={e => setFechaOtrasDeducciones(e.target.value)} className=\"border p-1 w-full text-xs outline-none focus:bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-slate-600\">INPC Impuestos\/Gastos:<\/label><input type=\"number\" step=\"0.001\" value={inpcOtrasDeducciones} onChange={e => setInpcOtrasDeducciones(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right outline-none bg-yellow-50\" \/><\/div>\r\n                    <\/div>\r\n                    <div className=\"md:col-span-12 bg-white p-3 border border-slate-300 shadow-sm grid grid-cols-1 md:grid-cols-5 gap-3\">\r\n                      <div><label className=\"text-[10px] font-bold\">Valor Adq. Terreno:<\/label><input type=\"number\" value={valAdqTerreno} onChange={e => setValAdqTerreno(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right focus:bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold\">Valor Adq. Const.:<\/label><input type=\"number\" value={valAdqConstruccion} onChange={e => setValAdqConstruccion(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right focus:bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-purple-800\" title=\"Impuestos de transmisi\u00f3n, notario, aval\u00faos\">Otras Deducciones:<\/label><input type=\"number\" value={valOtrasDeducciones} onChange={e => setValOtrasDeducciones(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right focus:bg-purple-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-rose-800\">Valor Venta Terreno:<\/label><input type=\"number\" value={valEnaTerreno} onChange={e => setValEnaTerreno(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right bg-rose-50\" \/><\/div>\r\n                      <div><label className=\"text-[10px] font-bold text-rose-800\">Valor Venta Const.:<\/label><input type=\"number\" value={valEnaConstruccion} onChange={e => setValEnaConstruccion(parseFloat(e.target.value)||0)} className=\"border p-1 w-full text-xs text-right bg-rose-50\" \/><\/div>\r\n                    <\/div>\r\n                    <div className=\"md:col-span-12 bg-white p-3 border border-slate-300 shadow-sm flex flex-col md:flex-row gap-4 items-center\">\r\n                      <div className=\"flex items-center space-x-2\">\r\n                        <input type=\"checkbox\" checked={aplicaExencion} onChange={(e) => setAplicaExencion(e.target.checked)} className=\"w-4 h-4 cursor-pointer accent-rose-600\" \/>\r\n                        <label className=\"text-xs font-bold cursor-pointer\">Aplicar Exenci\u00f3n 700,000 UDIS (Art. 93)<\/label>\r\n                      <\/div>\r\n                      {aplicaExencion && (\r\n                        <>\r\n                          <div className=\"flex items-center space-x-2\"><label className=\"text-[10px] font-bold\">Valor UDI:<\/label><input type=\"number\" step=\"0.000001\" value={valorUDI} onChange={e => setValorUDI(parseFloat(e.target.value)||0)} className=\"border p-1 w-24 text-xs text-right\" \/><\/div>\r\n                          <button onClick={buscarUDIAuto} className=\"bg-slate-200 border border-slate-400 px-2 py-1 text-[10px] font-bold hover:bg-slate-300\">{isBuscandoUDI ? '\u23f3' : 'Obtener Banxico'}<\/button>\r\n                          <div className=\"text-[10px] bg-slate-100 p-1 border ml-auto font-mono\">L\u00edmite Exento: {formatMx(700000 * valorUDI)}<\/div>\r\n                          {fechaUDI && <div className=\"text-[9px] text-green-700 italic\">UDI al: {fechaUDI}<\/div>}\r\n                          {errorUDI && <div className=\"text-[9px] text-red-700 italic\">{errorUDI}<\/div>}\r\n                        <\/>\r\n                      )}\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                {resultados && resultados.gananciaTotalHist > 0 && (\r\n                  <div className=\"bg-white p-2 md:p-6 text-[10px] md:text-[11px] font-mono\">\r\n                    <div className=\"text-left font-bold mb-2 uppercase text-[12px]\">Valores Base Hist\u00f3ricos (Ajuste)<\/div>\r\n                    <div className=\"overflow-x-auto\">\r\n                      <table className=\"w-full border-collapse border border-slate-800 text-right mb-6\">\r\n                        <thead>\r\n                          <tr className=\"bg-slate-100 border-b border-slate-800 text-[9px] md:text-[10px]\">\r\n                            <th className=\"border-r border-slate-800 p-1 text-left\">Concepto<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1 text-center\">Edad<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Valor de Adquisici\u00f3n<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Depreciaci\u00f3n<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1 text-center\">Factor I\/F<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Valor Ajustado<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Valor de Enajenaci\u00f3n<\/th>\r\n                            <th className=\"p-1\">Ganancia<\/th>\r\n                          <\/tr>\r\n                        <\/thead>\r\n                        <tbody>\r\n                          <tr className=\"border-b border-slate-300\">\r\n                            <td className=\"border-r border-slate-800 p-1 text-left font-bold\">Terreno<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-center\">{resultados.anosTerreno}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(valAdqTerreno)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\"><\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-center\">{resultados.factorTerreno.toFixed(4)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.costoActTerreno)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(valEnaTerreno)}<\/td>\r\n                            <td className=\"p-1\">{formatNum(resultados.gananciaHistTerreno)}<\/td>\r\n                          <\/tr>\r\n                          <tr className=\"border-b border-slate-800\">\r\n                            <td className=\"border-r border-slate-800 p-1 text-left font-bold\">Construcci\u00f3n<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-center\">{resultados.anosConstruccion}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(valAdqConstruccion)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.montoDepreciacion)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-center\">{resultados.factorConstruccion.toFixed(4)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.costoActConstruccion)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(valEnaConstruccion)}<\/td>\r\n                            <td className=\"p-1\">{formatNum(resultados.gananciaHistConst)}<\/td>\r\n                          <\/tr>\r\n                          <tr className=\"border-b border-slate-800 text-purple-900 bg-purple-50\/30\">\r\n                            <td className=\"border-r border-slate-800 p-1 text-left font-bold\">Otras Deducc. (Impuestos\/Gastos)<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-center\">{resultados.anosOtras}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(valOtrasDeducciones)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\"><\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-center\">{resultados.factorOtras.toFixed(4)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.costoActOtras)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">0.00<\/td>\r\n                            <td className=\"p-1\">{formatNum(resultados.gananciaHistOtras)}<\/td>\r\n                          <\/tr>\r\n                          <tr className=\"font-bold bg-slate-50\">\r\n                            <td colSpan=\"2\" className=\"border-r border-slate-800 p-1 text-left\">Total<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(valAdqTerreno + valAdqConstruccion + valOtrasDeducciones)}<\/td>\r\n                            <td colSpan=\"2\" className=\"border-r border-slate-800 p-1\"><\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.costoActualizadoTotal)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.valorEnaTotal)}<\/td>\r\n                            <td className=\"p-1\">{formatNum(resultados.gananciaTotalHist)}<\/td>\r\n                          <\/tr>\r\n                        <\/tbody>\r\n                      <\/table>\r\n                    <\/div>\r\n\r\n                    <div className=\"flex flex-col md:flex-row justify-between text-[11px] mb-6 border-b border-slate-400 pb-2\">\r\n                      <div>\r\n                        <span className=\"font-bold\">Ganancia Acumulable Terreno: <\/span> {formatNum(resultados.gananciaAcumHistTerreno)} <br\/>\r\n                        <span className=\"font-bold\">Ganancia Acumulable Construcci\u00f3n: <\/span> {formatNum(resultados.gananciaAcumHistConst)} <br\/>\r\n                        <span className=\"font-bold\">Ganancia Acumulable Deducciones: <\/span> {formatNum(resultados.gananciaAcumHistOtras)} <br\/>\r\n                        <span className=\"font-bold text-rose-900\">Ganancia Acumulable Total: <\/span> {formatNum(resultados.gananciaAcumTotalHist)}\r\n                      <\/div>\r\n                      <div className=\"text-right mt-2 md:mt-0\">\r\n                        <span className=\"font-bold\">Cociente: <\/span> <span className=\"px-1 font-bold\">{resultados.cociente.toFixed(4)}<\/span> <br\/>\r\n                        <span className=\"text-[9px] text-slate-500\">(Art. 200 R.L.I.S.R.)<\/span>\r\n                      <\/div>\r\n                    <\/div>\r\n\r\n                    <div className=\"text-left font-bold mb-2 uppercase flex justify-between items-center text-[12px]\">\r\n                       <span>Enajenantes - Pago provisional<\/span>\r\n                       <div className=\"flex items-center gap-2 text-[10px] font-normal\">\r\n                          <label>No. Enajenantes:<\/label>\r\n                          <input type=\"number\" min=\"1\" max=\"10\" value={numEnajenantes} onChange={e => setNumEnajenantes(parseInt(e.target.value)||1)} className=\"border border-slate-800 p-1 w-10 text-center bg-white focus:outline-none focus:ring-1 focus:ring-rose-500\" \/>\r\n                       <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div className=\"overflow-x-auto\">\r\n                      <table className=\"w-full border-collapse border border-slate-800 text-right mb-4\">\r\n                        <thead>\r\n                          <tr className=\"bg-slate-100 border-b border-slate-800 text-[9px] md:text-[10px]\">\r\n                            <th className=\"border-r border-slate-800 p-1 text-left\">Proporci\u00f3n %<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Monto Contraprest.<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Ingresos Exentos<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Deducciones<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1 font-bold\">Ganancia o P\u00e9rdida<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Ganancia Acumul.<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1\">Ganancia No Acum.<\/th>\r\n                            <th className=\"border-r border-slate-800 p-1 text-rose-900\">Pago Provisional<\/th>\r\n                            <th className=\"p-1\">ISR Ent. Federativa<\/th>\r\n                          <\/tr>\r\n                        <\/thead>\r\n                        <tbody>\r\n                          <tr className=\"border-b border-slate-800 font-bold\">\r\n                            <td className=\"border-r border-slate-800 p-1 text-left\">{(100\/Math.max(1, numEnajenantes)).toFixed(4)}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.valorEnaTotal \/ Math.max(1, numEnajenantes))}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.exencionAplicada \/ Math.max(1, numEnajenantes))}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.costoActualizadoGravado \/ Math.max(1, numEnajenantes))}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.gananciaGravada \/ Math.max(1, numEnajenantes))}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.gananciaAcumulableFinal \/ Math.max(1, numEnajenantes))}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1\">{formatNum(resultados.gananciaNoAcumulableFinal \/ Math.max(1, numEnajenantes))}<\/td>\r\n                            <td className=\"border-r border-slate-800 p-1 text-rose-900\">{formatNum(resultados.pagoProvisional)}<\/td>\r\n                            <td className=\"p-1\">{formatNum(resultados.impuestoEstadoEnajenante)}<\/td>\r\n                          <\/tr>\r\n                        <\/tbody>\r\n                      <\/table>\r\n                    <\/div>\r\n\r\n                    <div className=\"flex flex-col md:flex-row justify-between items-end pt-2 mt-4\">\r\n                      <div className=\"text-[10px] text-slate-600 mb-4 md:mb-0 max-w-lg\">\r\n                        <p>La columna \"I\/F\" indica que se us\u00f3 para el ajuste de valores: INPC's (Art. 124 L.I.S.R.) o tabla de Factores (Regla R.M.F.)<\/p>\r\n                        {aplicaExencion && (\r\n                          <p className=\"mt-1 font-bold text-slate-800\">Se aplic\u00f3 la exenci\u00f3n contemplada en el Art 93 Fracc XIX inciso a) 1er p\u00e1rrafo L.I.S.R. de 700,000.00 U.D.I.s a ${valorUDI} equivalente a {formatMx(700000 * valorUDI)}<\/p>\r\n                        )}\r\n                      <\/div>\r\n                      \r\n                      <div className=\"grid grid-cols-2 gap-x-4 gap-y-1 text-right text-[11px] font-bold\">\r\n                        <div className=\"text-slate-600\">Estatal $<\/div>\r\n                        <div className=\"border-b border-slate-400\">{formatNum(resultados.impuestoEstadoEnajenante)}<\/div>\r\n                        <div className=\"text-slate-600\">Federal $<\/div>\r\n                        <div className=\"border-b border-slate-400\">{formatNum(resultados.impuestoFederacionEnajenante)}<\/div>\r\n                        <div className=\"text-slate-900 mt-2 text-sm uppercase font-bold\">Suma pago provisional por enajenaci\u00f3n $<\/div>\r\n                        <div className=\"text-slate-900 mt-2 text-sm font-bold border-b-2 border-slate-900\">{formatNum(resultados.pagoProvisional)}<\/div>\r\n                      <\/div>\r\n                    <\/div>\r\n                    \r\n                    <div className=\"mt-8 bg-[#fdfdfc] p-4 border border-slate-300 shadow-sm text-[11px] font-sans text-left\">\r\n                      <h3 className=\"font-bold text-sm text-slate-800 border-b pb-1 mb-2 uppercase\">\r\n                        Anexo Explicativo: Marco Legal (LISR y CFF)\r\n                      <\/h3>\r\n                      {resultados.anosTerreno <= 1 || resultados.anosConstruccion <= 1 ? (\r\n                        <div className=\"mb-4 bg-red-50 border-l-4 border-red-500 p-3 text-red-900 text-justify\">\r\n                          <span className=\"font-bold block mb-1\">\u26a0\ufe0f NOTA NOTARIAL SOBRE EL IMPUESTO ALTO (Tenencia menor a 2 a\u00f1os):<\/span>\r\n                          El c\u00e1lculo del impuesto arroja una cantidad elevada debido a que el tiempo transcurrido entre la compra y la venta es de 1 a\u00f1o. Seg\u00fan el <strong>Art. 120 de la LISR<\/strong>, la \"Ganancia\" generada se divide entre los a\u00f1os transcurridos. Al ser solo 1 a\u00f1o, <strong>el 100% de la ganancia se acumula en un solo ejercicio fiscal<\/strong>, lo que dispara autom\u00e1ticamente el c\u00e1lculo hacia la tarifa marginal m\u00e1s alta del SAT (hasta un 35%). Si la propiedad tuviera una antig\u00fcedad de 10 o 20 a\u00f1os, la ganancia se dividir\u00eda entre ese factor, reduciendo radicalmente el impuesto a pagar.\r\n                        <\/div>\r\n                      ) : null}\r\n\r\n                      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 text-justify\">\r\n                        <div className=\"bg-white p-3 border border-slate-200\">\r\n                          <h4 className=\"font-bold text-slate-800 mb-1 border-b pb-1\">1. Utilidad Real (Ganancia Gravable)<\/h4>\r\n                          <p className=\"mb-2\">\r\n                            El impuesto se cobra exclusivamente sobre la utilidad, no sobre el valor de la propiedad.\r\n                            <br\/><strong>Monto Contraprestaci\u00f3n (Venta Gravada):<\/strong> {formatMx(resultados.valorEnaGravado)}\r\n                            <br\/><strong>(-) Deducciones Autorizadas (Costo Ajustado):<\/strong> {formatMx(resultados.costoActualizadoGravado)}\r\n                            <br\/><strong className=\"text-green-800 mt-1 inline-block\">(=) Ganancia o P\u00e9rdida: {formatMx(resultados.gananciaGravada)}<\/strong>\r\n                          <\/p>\r\n                        <\/div>\r\n                        <div className=\"bg-white p-3 border border-slate-200\">\r\n                          <h4 className=\"font-bold text-slate-800 mb-1 border-b pb-1\">2. Fundamento Legal Aplicado<\/h4>\r\n                          <ul className=\"list-disc pl-4 space-y-1\">\r\n                            <li><strong>Art. 121 LISR:<\/strong> Autoriza la deducci\u00f3n del costo comprobado, y expl\u00edcitamente los gastos notariales, impuestos y derechos pagados en la adquisici\u00f3n.<\/li>\r\n                            <li><strong>Art. 124 LISR \/ 17-A CFF:<\/strong> Actualizaci\u00f3n del costo base (Factor INPC) truncado a 4 decimales para reconocer la inflaci\u00f3n.<\/li>\r\n                            <li><strong>Art. 120 LISR:<\/strong> Separaci\u00f3n de la ganancia en Acumulable y No Acumulable para c\u00e1lculo de tarifa.<\/li>\r\n                            <li><strong>Art. 126 LISR:<\/strong> Pago provisional del 5% s\/ ganancia para la Entidad Federativa, el remanente a la Federaci\u00f3n.<\/li>\r\n                          <\/ul>\r\n                        <\/div>\r\n                      <\/div>\r\n                    <\/div>\r\n\r\n                  <\/div>\r\n                )}\r\n\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n        }\r\n\r\n        function App() {\r\n          const [activeTab, setActiveTab] = useState('dashboard');\r\n          \r\n          const [initialCapital, setInitialCapital] = useState(10000000); \r\n          const [liabilities, setLiabilities] = useState(0); \r\n\r\n          const [savedStatements, setSavedStatements] = useState(() => {\r\n            const statementsGuardados = localStorage.getItem('misEstadosCuentaCRM');\r\n            if (statementsGuardados) {\r\n              return JSON.parse(statementsGuardados);\r\n            }\r\n            return [];\r\n          });\r\n\r\n          const [selectedStatement, setSelectedStatement] = useState(null); \r\n          const [selectedHistoryProperty, setSelectedHistoryProperty] = useState(null);\r\n\r\n          const [properties, setProperties] = useState(() => {\r\n            const propiedadesGuardadas = localStorage.getItem('misPropiedadesCRM');\r\n            if (propiedadesGuardadas) {\r\n              return JSON.parse(propiedadesGuardadas);\r\n            }\r\n            return [\r\n              { id: 1, title: \"Casa en Providencia\", type: \"Casa\", cost: 2500000, propertyTax: 50000, notaryFees: 30000, siapa: 5000, cfe: 2000, predial: 12000, mantenimiento: 15000, remodelacion: 120000, askingPrice: 3200000, status: \"Disponible\", dateAdded: \"2026-01-10\", description: \"Hermosa propiedad con acabados de lujo.\" },\r\n              { id: 2, title: \"Terreno en Zapopan\", type: \"Terreno\", cost: 800000, propertyTax: 15000, notaryFees: 12000, askingPrice: 1100000, status: \"Disponible\", dateAdded: \"2026-01-15\", description: \"Excelente oportunidad de inversi\u00f3n en zona de alta plusval\u00eda.\" },\r\n              { id: 3, title: \"Casa Centro Hist\u00f3rico\", type: \"Casa\", cost: 1200000, propertyTax: 25000, notaryFees: 18000, askingPrice: 1600000, salePrice: 1550000, status: \"Vendido\", dateAdded: \"2025-11-01\", dateSold: \"2026-02-10\", description: \"Propiedad con valor hist\u00f3rico y ubicaci\u00f3n privilegiada.\" }\r\n            ];\r\n          });\r\n\r\n          const [clients, setClients] = useState(() => {\r\n            const clientesGuardados = localStorage.getItem('misClientesCRM');\r\n            if (clientesGuardados) {\r\n              return JSON.parse(clientesGuardados);\r\n            }\r\n            return [\r\n              { id: 1, name: 'Juan P\u00e9rez', phone: '33 1234 5678', email: 'juan@ejemplo.com', type: 'Comprador', budget: 3000000, status: 'En Seguimiento', notes: 'Busca casa en Zapopan, 3 rec\u00e1maras. Cr\u00e9dito pre-aprobado.' },\r\n              { id: 2, name: 'Inversiones GDL', phone: '33 9876 5432', email: 'contacto@invgdl.com', type: 'Inversionista', budget: 10000000, status: 'Cita Agendada', notes: 'Interesados en terrenos para desarrollo vertical.' }\r\n            ];\r\n          });\r\n\r\n          useEffect(() => {\r\n            localStorage.setItem('misPropiedadesCRM', JSON.stringify(properties));\r\n          }, [properties]);\r\n\r\n          useEffect(() => {\r\n            localStorage.setItem('misClientesCRM', JSON.stringify(clients));\r\n          }, [clients]);\r\n\r\n          useEffect(() => {\r\n            localStorage.setItem('misEstadosCuentaCRM', JSON.stringify(savedStatements));\r\n          }, [savedStatements]);\r\n\r\n          const [isPropertyModalOpen, setIsPropertyModalOpen] = useState(false);\r\n          const [isSellModalOpen, setIsSellModalOpen] = useState(false);\r\n          const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\r\n          const [editingProperty, setEditingProperty] = useState(null);\r\n          const [propertyToDelete, setPropertyToDelete] = useState(null);\r\n          const [isGeneratingDesc, setIsGeneratingDesc] = useState(false);\r\n          const [isGeneratingFinance, setIsGeneratingFinance] = useState(false);\r\n          const [isCapitalModalOpen, setIsCapitalModalOpen] = useState(false);\r\n          const [isLiabilitiesModalOpen, setIsLiabilitiesModalOpen] = useState(false);\r\n          const [isSaveStatementModalOpen, setIsSaveStatementModalOpen] = useState(false);\r\n          const [isDeleteStatementModalOpen, setIsDeleteStatementModalOpen] = useState(false);\r\n          const [statementToDelete, setStatementToDelete] = useState(null);\r\n          const [financialInsight, setFinancialInsight] = useState('');\r\n          \r\n          const [aiChatInput, setAiChatInput] = useState('');\r\n          const [aiChatResponse, setAiChatResponse] = useState('');\r\n          const [isChatLoading, setIsChatLoading] = useState(false);\r\n          const [isContractModalOpen, setIsContractModalOpen] = useState(false);\r\n          const [contractDraft, setContractDraft] = useState('');\r\n          const [isGeneratingContract, setIsGeneratingContract] = useState(false);\r\n          const [contractProperty, setContractProperty] = useState(null);\r\n          const [isCopied, setIsCopied] = useState(false);\r\n\r\n          const [isMessageModalOpen, setIsMessageModalOpen] = useState(false);\r\n          const [messageDraft, setMessageDraft] = useState('');\r\n          const [isGeneratingMessage, setIsGeneratingMessage] = useState(false);\r\n          const [messageProperty, setMessageProperty] = useState(null);\r\n\r\n          const [isRoiModalOpen, setIsRoiModalOpen] = useState(false);\r\n          const [roiAnalysis, setRoiAnalysis] = useState('');\r\n          const [isGeneratingRoi, setIsGeneratingRoi] = useState(false);\r\n          const [roiProperty, setRoiProperty] = useState(null);\r\n\r\n          const [isClientModalOpen, setIsClientModalOpen] = useState(false);\r\n          const [editingClient, setEditingClient] = useState(null);\r\n          const [formDataClient, setFormDataClient] = useState({ name: '', phone: '', email: '', type: 'Comprador', budget: '', status: 'Prospecto Nuevo', notes: '' });\r\n          const [isAiClientModalOpen, setIsAiClientModalOpen] = useState(false);\r\n          const [aiClientDraft, setAiClientDraft] = useState('');\r\n          const [isGeneratingClientMsg, setIsGeneratingClientMsg] = useState(false);\r\n\r\n          const [formData, setFormData] = useState({ \r\n            title: '', type: 'Casa', cost: '', propertyTax: '', notaryFees: '', askingPrice: '', description: '',\r\n            siapa: '', cfe: '', predial: '', mantenimiento: '', remodelacion: ''\r\n          });\r\n          const [sellData, setSellData] = useState({ id: null, salePrice: '', isr: '' });\r\n          const [capitalInput, setCapitalInput] = useState('');\r\n          const [liabilitiesInput, setLiabilitiesInput] = useState('');\r\n          const [statementForm, setStatementForm] = useState({ year: '2026', month: 'Enero' });\r\n\r\n          const months = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];\r\n          const years = Array.from({length: 15}, (_, i) => (2026 + i).toString());\r\n\r\n          const financials = useMemo(() => {\r\n            const available = properties.filter(p => p.status === 'Disponible');\r\n            const soldThisPeriod = properties.filter(p => p.status === 'Vendido');\r\n            const soldPastPeriods = properties.filter(p => p.status === 'Archivado');\r\n            const allSold = [...soldThisPeriod, ...soldPastPeriods];\r\n\r\n            const soldSiapa = soldThisPeriod.reduce((acc, curr) => acc + (curr.siapa || 0), 0);\r\n            const soldCfe = soldThisPeriod.reduce((acc, curr) => acc + (curr.cfe || 0), 0);\r\n            const soldPredial = soldThisPeriod.reduce((acc, curr) => acc + (curr.predial || 0), 0);\r\n            const soldMantenimiento = soldThisPeriod.reduce((acc, curr) => acc + (curr.mantenimiento || 0), 0);\r\n            const soldRemodelacion = soldThisPeriod.reduce((acc, curr) => acc + (curr.remodelacion || 0), 0);\r\n            \r\n            const soldServices = soldSiapa + soldCfe + soldPredial;\r\n            const soldRemodeling = soldMantenimiento + soldRemodelacion;\r\n\r\n            const totalRevenue = soldThisPeriod.reduce((acc, curr) => acc + (curr.salePrice || 0), 0);\r\n            const costOfGoodsSold = soldThisPeriod.reduce((acc, curr) => acc + curr.cost, 0);\r\n            const soldPropertyTax = soldThisPeriod.reduce((acc, curr) => acc + (curr.propertyTax || 0), 0);\r\n            const soldNotaryFees = soldThisPeriod.reduce((acc, curr) => acc + (curr.notaryFees || 0), 0);\r\n            \r\n            const grossProfit = totalRevenue - costOfGoodsSold - soldPropertyTax - soldNotaryFees - soldServices - soldRemodeling; \r\n            const totalIsrPaid = soldThisPeriod.reduce((acc, curr) => acc + (curr.isrPaid || 0), 0);\r\n            const netProfit = grossProfit - totalIsrPaid; \r\n\r\n            const allTimeRevenue = allSold.reduce((acc, curr) => acc + (curr.salePrice || 0), 0);\r\n            const allTimeIsrPaid = allSold.reduce((acc, curr) => acc + (curr.isrPaid || 0), 0);\r\n            const allTimeNetProfit = allSold.reduce((acc, curr) => {\r\n              const expenses = (curr.siapa || 0) + (curr.cfe || 0) + (curr.predial || 0) + (curr.mantenimiento || 0) + (curr.remodelacion || 0);\r\n              return acc + ((curr.salePrice || 0) - curr.cost - (curr.propertyTax || 0) - (curr.notaryFees || 0) - expenses - (curr.isrPaid || 0));\r\n            }, 0);\r\n\r\n            const allSiapa = properties.reduce((acc, curr) => acc + (curr.siapa || 0), 0);\r\n            const allCfe = properties.reduce((acc, curr) => acc + (curr.cfe || 0), 0);\r\n            const allPredial = properties.reduce((acc, curr) => acc + (curr.predial || 0), 0);\r\n            const allMantenimiento = properties.reduce((acc, curr) => acc + (curr.mantenimiento || 0), 0);\r\n            const allRemodelacion = properties.reduce((acc, curr) => acc + (curr.remodelacion || 0), 0);\r\n            \r\n            const allServices = allSiapa + allCfe + allPredial;\r\n            const allRemodeling = allMantenimiento + allRemodelacion;\r\n\r\n            const inventoryValue = available.reduce((acc, curr) => acc + curr.cost + (curr.propertyTax || 0) + (curr.notaryFees || 0) + (curr.siapa || 0) + (curr.cfe || 0) + (curr.predial || 0) + (curr.mantenimiento || 0) + (curr.remodelacion || 0), 0);\r\n            \r\n            const basePurchases = properties.reduce((acc, curr) => acc + curr.cost, 0);\r\n            const allPropertyTax = properties.reduce((acc, curr) => acc + (curr.propertyTax || 0), 0);\r\n            const allNotaryFees = properties.reduce((acc, curr) => acc + (curr.notaryFees || 0), 0);\r\n            const totalPurchases = basePurchases + allPropertyTax + allNotaryFees + allServices + allRemodeling;\r\n            \r\n            const currentCash = initialCapital - totalPurchases + allTimeRevenue + liabilities - allTimeIsrPaid;\r\n\r\n            const totalAssets = currentCash + inventoryValue;\r\n            const totalLiabilities = liabilities;\r\n            const totalEquity = initialCapital + allTimeNetProfit; \r\n\r\n            const propertyTypesBreakdown = properties.reduce((acc, curr) => {\r\n              const type = curr.type || 'Casa';\r\n              if (!acc[type]) acc[type] = { disponible: 0, vendida: 0, total: 0 };\r\n              \r\n              acc[type].total += 1;\r\n              if (curr.status === 'Disponible') {\r\n                acc[type].disponible += 1;\r\n              } else {\r\n                acc[type].vendida += 1;\r\n              }\r\n              return acc;\r\n            }, {});\r\n\r\n            return {\r\n              availableCount: available.length, soldCount: soldThisPeriod.length, allSoldCount: allSold.length,\r\n              totalRevenue, costOfGoodsSold, soldPropertyTax, soldNotaryFees, soldServices, soldRemodeling, \r\n              grossProfit, totalIsrPaid, netProfit, allTimeRevenue, allTimeIsrPaid, allTimeNetProfit,\r\n              inventoryValue, basePurchases, allPropertyTax, allNotaryFees, allServices, allRemodeling, \r\n              totalPurchases, currentCash, totalAssets, totalLiabilities, totalEquity, propertyTypesBreakdown\r\n            };\r\n          }, [properties, initialCapital, liabilities]);\r\n\r\n          const handleOpenDeleteModal = (property) => { setPropertyToDelete(property); setIsDeleteModalOpen(true); };\r\n          const handleConfirmDelete = () => { setProperties(properties.filter(p => p.id !== propertyToDelete.id)); setIsDeleteModalOpen(false); setPropertyToDelete(null); };\r\n          const handleOpenDeleteStatementModal = (statement) => { setStatementToDelete(statement); setIsDeleteStatementModalOpen(true); };\r\n          const handleConfirmDeleteStatement = () => { setSavedStatements(savedStatements.filter(p => p.id !== statementToDelete.id)); setIsDeleteStatementModalOpen(false); setStatementToDelete(null); if(selectedStatement && selectedStatement.id === statementToDelete?.id) { setSelectedStatement(null); } };\r\n\r\n          const handleGenerateDescription = async () => {\r\n            if (!formData.title || !formData.askingPrice) {\r\n              setFormData({ ...formData, description: \"\u26a0\ufe0f Por favor, escribe un T\u00edtulo y un Precio de Venta primero para que la IA pueda redactar la descripci\u00f3n correctamente.\" });\r\n              return;\r\n            }\r\n            setIsGeneratingDesc(true);\r\n            const prompt = `Eres un experto agente de bienes ra\u00edces de lujo. Escribe una descripci\u00f3n atractiva y persuasiva (m\u00e1ximo 2 p\u00e1rrafos cortos) para vender la siguiente propiedad: T\u00edtulo: ${formData.title}, Tipo de bien: ${formData.type}, Precio de venta: ${formatCurrency(formData.askingPrice)}. Resalta el valor de inversi\u00f3n para compradores potenciales.`;\r\n            const generatedText = await callGeminiAPI(prompt);\r\n            setFormData({ ...formData, description: generatedText });\r\n            setIsGeneratingDesc(false);\r\n          };\r\n\r\n          const handleGenerateFinancialInsight = async () => {\r\n            setIsGeneratingFinance(true);\r\n            const prompt = `Eres un Asesor Financiero CFO experto analizando una agencia de bienes ra\u00edces. Aqu\u00ed est\u00e1n los datos actuales de la empresa: Efectivo Disponible: ${formatCurrency(financials.currentCash)}, Utilidad Bruta: ${formatCurrency(financials.grossProfit)}, Valor del Inventario: ${formatCurrency(financials.inventoryValue)}, Propiedades vendidas: ${financials.soldCount}, Disponibles: ${financials.availableCount}. Escribe un resumen ejecutivo muy breve (3 vi\u00f1etas o bullet points) destacando la salud financiera de la empresa y dando un consejo estrat\u00e9gico para los pr\u00f3ximos meses.`;\r\n            const insight = await callGeminiAPI(prompt);\r\n            setFinancialInsight(insight);\r\n            setIsGeneratingFinance(false);\r\n          };\r\n\r\n          const handleAskAI = async () => {\r\n            if (!aiChatInput.trim()) return;\r\n            setIsChatLoading(true);\r\n            const availableProps = properties.filter(p => p.status === 'Disponible').map(p => ({ titulo: p.title, tipo: p.type, precio: p.askingPrice, descripcion: p.description }));\r\n            const prompt = `Eres el asistente de ventas IA de un CRM Inmobiliario. Aqu\u00ed tienes el inventario actual de propiedades DISPONIBLES (en JSON): ${JSON.stringify(availableProps)}. Un agente de ventas te hace esta consulta: \"${aiChatInput}\". Analiza el inventario y responde de forma experta, concisa y persuasiva. Si el cliente busca algo espec\u00edfico, recomienda la mejor opci\u00f3n de la lista de manera clara.`;\r\n            const response = await callGeminiAPI(prompt);\r\n            setAiChatResponse(response);\r\n            setIsChatLoading(false);\r\n          };\r\n\r\n          const handleOpenContractModal = async (property) => {\r\n            setContractProperty(property); setIsContractModalOpen(true); setIsGeneratingContract(true); setContractDraft('');\r\n            const prompt = `Act\u00faa como un abogado inmobiliario. Redacta un borrador sencillo de \"Promesa de Compraventa\" o \"Carta Intenci\u00f3n de Compra\" para la siguiente propiedad: T\u00edtulo\/Direcci\u00f3n: \"${property.title}\", Tipo: ${property.type}, Precio de Venta: $${property.askingPrice} MXN. Usa lenguaje legal formal pero claro. Incluye espacios en blanco [  ] para los nombres del comprador, vendedor y fecha. Usa formato de texto plano con saltos de l\u00ednea (no uses formato markdown como asteriscos o negritas).`;\r\n            const response = await callGeminiAPI(prompt);\r\n            setContractDraft(response); setIsGeneratingContract(false);\r\n          };\r\n\r\n          const handleCopyContract = () => {\r\n            const el = document.createElement('textarea'); el.value = contractDraft; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el);\r\n            setIsCopied(true); setTimeout(() => setIsCopied(false), 2000);\r\n          };\r\n\r\n          const handleOpenMessageModal = async (property) => {\r\n            setMessageProperty(property); setIsMessageModalOpen(true); setIsGeneratingMessage(true); setMessageDraft('');\r\n            const prompt = `Act\u00faa como un agente inmobiliario top. Redacta un mensaje persuasivo, emocionante y amigable dise\u00f1ado espec\u00edficamente para enviarse por WhatsApp a un cliente potencial sobre la siguiente propiedad: \"${property.title}\", Tipo: ${property.type}, Precio: $${formatCurrency(property.askingPrice)}. Usa emojis adecuados, vi\u00f1etas cortas si es necesario, y un fuerte llamado a la acci\u00f3n (Call to Action) al final para agendar una visita o llamada. Hazlo corto para que se lea f\u00e1cil en un celular.`;\r\n            const response = await callGeminiAPI(prompt);\r\n            setMessageDraft(response); setIsGeneratingMessage(false);\r\n          };\r\n\r\n          const handleCopyMessage = () => {\r\n            const el = document.createElement('textarea'); el.value = messageDraft; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el);\r\n            setIsCopied(true); setTimeout(() => setIsCopied(false), 2000);\r\n          };\r\n\r\n          const handleOpenRoiModal = async (property) => {\r\n            setRoiProperty(property); setIsRoiModalOpen(true); setIsGeneratingRoi(true); setRoiAnalysis('');\r\n            const totalCost = property.cost + (property.propertyTax || 0) + (property.notaryFees || 0) + (property.siapa || 0) + (property.cfe || 0) + (property.predial || 0) + (property.mantenimiento || 0) + (property.remodelacion || 0);\r\n            const projectedProfit = property.askingPrice - totalCost;\r\n            const margin = ((projectedProfit \/ totalCost) * 100).toFixed(2);\r\n            const prompt = `Act\u00faa como un analista financiero experto en bienes ra\u00edces. Analiza la siguiente propiedad de mi inventario: \r\n            - Propiedad: ${property.title}\r\n            - Inversi\u00f3n Total: ${formatCurrency(totalCost)}\r\n            - Precio de Salida: ${formatCurrency(property.askingPrice)}\r\n            - Utilidad Bruta Proyectada: ${formatCurrency(projectedProfit)} (Margen del ${margin}%)\r\n            Dame un an\u00e1lisis r\u00e1pido e intuitivo (2 a 3 p\u00e1rrafos cortos) abordando:\r\n            1. Si este margen es atractivo\/saludable para el mercado.\r\n            2. \u00bfQu\u00e9 riesgos financieros hay si el cliente hace una contraoferta baja?\r\n            3. Dame 1 consejo estrat\u00e9gico de ventas para defender el precio.`;\r\n            const response = await callGeminiAPI(prompt);\r\n            setRoiAnalysis(response); setIsGeneratingRoi(false);\r\n          };\r\n\r\n          const handleOpenAddModal = () => {\r\n            setEditingProperty(null);\r\n            setFormData({ title: '', type: 'Casa', cost: '', propertyTax: '', notaryFees: '', askingPrice: '', description: '', siapa: '', cfe: '', predial: '', mantenimiento: '', remodelacion: '' });\r\n            setIsPropertyModalOpen(true);\r\n          };\r\n\r\n          const handleOpenEditModal = (property) => {\r\n            setEditingProperty(property);\r\n            setFormData({ title: property.title, type: property.type, cost: property.cost, propertyTax: property.propertyTax || '', notaryFees: property.notaryFees || '', siapa: property.siapa || '', cfe: property.cfe || '', predial: property.predial || '', mantenimiento: property.mantenimiento || '', remodelacion: property.remodelacion || '', askingPrice: property.askingPrice, description: property.description || '' });\r\n            setIsPropertyModalOpen(true);\r\n          };\r\n\r\n          const handleSaveProperty = (e) => {\r\n            e.preventDefault();\r\n            const newProp = {\r\n              ...formData,\r\n              cost: parseFloat(formData.cost) || 0, propertyTax: parseFloat(formData.propertyTax) || 0, notaryFees: parseFloat(formData.notaryFees) || 0, siapa: parseFloat(formData.siapa) || 0, cfe: parseFloat(formData.cfe) || 0, predial: parseFloat(formData.predial) || 0, mantenimiento: parseFloat(formData.mantenimiento) || 0, remodelacion: parseFloat(formData.remodelacion) || 0, askingPrice: parseFloat(formData.askingPrice) || 0,\r\n            };\r\n            if (editingProperty) {\r\n              setProperties(properties.map(p => p.id === editingProperty.id ? { ...p, ...newProp } : p));\r\n            } else {\r\n              setProperties([...properties, { ...newProp, id: Date.now(), status: 'Disponible', dateAdded: new Date().toISOString().split('T')[0] }]);\r\n            }\r\n            setIsPropertyModalOpen(false);\r\n          };\r\n\r\n          const handleOpenSellModal = (property) => { setSellData({ id: property.id, salePrice: property.askingPrice, isr: '' }); setIsSellModalOpen(true); };\r\n\r\n          const handleConfirmSale = (e) => {\r\n            e.preventDefault();\r\n            setProperties(properties.map(p => {\r\n              if (p.id === sellData.id) return { ...p, status: 'Vendido', salePrice: parseFloat(sellData.salePrice), isrPaid: parseFloat(sellData.isr) || 0, dateSold: new Date().toISOString().split('T')[0] };\r\n              return p;\r\n            }));\r\n            setIsSellModalOpen(false);\r\n          };\r\n\r\n          const handleSaveCapital = (e) => { e.preventDefault(); setInitialCapital(parseFloat(capitalInput)); setIsCapitalModalOpen(false); };\r\n          const handleSaveLiabilities = (e) => { e.preventDefault(); setLiabilities(parseFloat(liabilitiesInput)); setIsLiabilitiesModalOpen(false); };\r\n\r\n          const handleSaveStatement = (e) => {\r\n            e.preventDefault();\r\n            const newStatement = { id: `${statementForm.year}-${statementForm.month}-${Date.now()}`, year: statementForm.year, month: statementForm.month, dateSaved: new Date().toLocaleString('es-MX'), financials: { ...financials }, snapshotCapital: initialCapital, snapshotLiabilities: liabilities };\r\n            setSavedStatements([...savedStatements, newStatement].sort((a, b) => { if(a.year !== b.year) return b.year - a.year; return months.indexOf(b.month) - months.indexOf(a.month); }));\r\n            setProperties(properties.map(p => p.status === 'Vendido' ? { ...p, status: 'Archivado' } : p ));\r\n            setIsSaveStatementModalOpen(false); setActiveTab('statements');\r\n          };\r\n\r\n          const handleOpenAddClientModal = () => { setEditingClient(null); setFormDataClient({ name: '', phone: '', email: '', type: 'Comprador', budget: '', status: 'Prospecto Nuevo', notes: '' }); setIsClientModalOpen(true); };\r\n          const handleOpenEditClientModal = (client) => { setEditingClient(client); setFormDataClient({ name: client.name, phone: client.phone || '', email: client.email || '', type: client.type, budget: client.budget || '', status: client.status, notes: client.notes || '' }); setIsClientModalOpen(true); };\r\n\r\n          const handleSaveClient = (e) => {\r\n            e.preventDefault();\r\n            const newClient = { ...formDataClient, budget: parseFloat(formDataClient.budget) || 0 };\r\n            if (editingClient) { setClients(clients.map(c => c.id === editingClient.id ? { ...c, ...newClient } : c)); } else { setClients([...clients, { ...newClient, id: Date.now() }]); }\r\n            setIsClientModalOpen(false);\r\n          };\r\n\r\n          const handleDeleteClient = (id) => { setClients(clients.filter(c => c.id !== id)); };\r\n\r\n          const handleGenerateClientStrategy = async (client) => {\r\n            setIsAiClientModalOpen(true); setIsGeneratingClientMsg(true); setAiClientDraft('');\r\n            const prompt = `Act\u00faa como un experto en ventas inmobiliarias. Tengo un cliente llamado ${client.name}. Es un ${client.type} con un presupuesto de ${formatCurrency(client.budget)}. Notas: \"${client.notes}\". Estatus: ${client.status}. Redacta un mensaje corto, persuasivo y profesional para WhatsApp para darle seguimiento y empujar el proceso. Genera urgencia y confianza.`;\r\n            const response = await callGeminiAPI(prompt);\r\n            setAiClientDraft(response); setIsGeneratingClientMsg(false);\r\n          };\r\n\r\n          const handleCopyClientMsg = () => {\r\n            const el = document.createElement('textarea'); el.value = aiClientDraft; document.body.appendChild(el); el.select(); document.execCommand('copy'); document.body.removeChild(el);\r\n            setIsCopied(true); setTimeout(() => setIsCopied(false), 2000);\r\n          };\r\n\r\n          const getTypeIcon = (type) => {\r\n            switch(type) {\r\n              case 'Casa': return <Home size={24} \/>;\r\n              case 'Terreno': return <Map size={24} \/>;\r\n              case 'Departamento': return <Building size={24} \/>;\r\n              case 'Local':\r\n              case 'Local Comercial': return <Store size={24} \/>;\r\n              default: return <Home size={24} \/>;\r\n            }\r\n          };\r\n\r\n          const renderDashboard = () => {\r\n            const maxFinValue = Math.max(financials.totalPurchases, financials.allTimeRevenue, Math.abs(financials.allTimeNetProfit), 1);\r\n            const pipelineCounts = clients.reduce((acc, client) => { acc[client.status] = (acc[client.status] || 0) + 1; return acc; }, {});\r\n            const pipelineOrder = ['Prospecto Nuevo', 'Contactado', 'En Seguimiento', 'Cita Agendada', 'En Negociaci\u00f3n', 'Cerrado', 'Descartado'];\r\n            const maxPipeline = Math.max(...pipelineOrder.map(s => pipelineCounts[s] || 0), 1);\r\n\r\n            return (\r\n              <div className=\"space-y-6\">\r\n                <h2 className=\"text-2xl font-bold text-gray-800\">Panel de Control General<\/h2>\r\n                <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n                  <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center space-x-4\">\r\n                    <div className=\"p-3 bg-zinc-100 text-zinc-800 rounded-lg\"><Home size={24} \/><\/div>\r\n                    <div><p className=\"text-sm text-gray-500\">Propiedades en Venta<\/p><p className=\"text-2xl font-bold text-gray-800\">{financials.availableCount}<\/p><\/div>\r\n                  <\/div>\r\n                  <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center space-x-4\">\r\n                    <div className=\"p-3 bg-green-100 text-green-700 rounded-lg\"><DollarSign size={24} \/><\/div>\r\n                    <div><p className=\"text-sm text-gray-500\">Valor del Inventario<\/p><p className=\"text-2xl font-bold text-gray-800\">{formatCurrency(financials.inventoryValue)}<\/p><\/div>\r\n                  <\/div>\r\n                  <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex items-center space-x-4\">\r\n                    <div className=\"p-3 bg-rose-100 text-rose-600 rounded-lg\"><Check size={24} \/><\/div>\r\n                    <div><p className=\"text-sm text-gray-500\">Propiedades Vendidas (Total)<\/p><p className=\"text-2xl font-bold text-gray-800\">{financials.allSoldCount}<\/p><\/div>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6\">\r\n                  <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col\">\r\n                    <h3 className=\"text-lg font-semibold text-gray-800 mb-6 flex items-center\"><BarChart3 className=\"mr-2 text-rose-500\" \/> Rendimiento Financiero Hist\u00f3rico<\/h3>\r\n                    <div className=\"flex-1 flex items-end justify-around h-48 pt-6 border-b border-gray-200 pb-2\">\r\n                      {[ { label: 'Inversi\u00f3n', value: financials.totalPurchases, color: 'bg-blue-500' }, { label: 'Ingresos', value: financials.allTimeRevenue, color: 'bg-emerald-500' }, { label: 'Utilidad Neta', value: financials.allTimeNetProfit, color: financials.allTimeNetProfit >= 0 ? 'bg-green-500' : 'bg-red-500' } ].map((item, idx) => (\r\n                        <div key={idx} className=\"flex flex-col items-center w-1\/3 h-full justify-end group relative cursor-pointer\">\r\n                          <span className=\"text-xs font-bold text-gray-600 mb-2 truncate max-w-full hidden md:block\" title={formatCurrency(item.value)}>{formatCurrency(item.value)}<\/span>\r\n                          <div className={`w-full max-w-[4rem] ${item.color} rounded-t-md transition-all duration-1000 opacity-90 group-hover:opacity-100`} style={{ height: `${Math.max((Math.abs(item.value) \/ maxFinValue) * 100, 2)}%` }}><\/div>\r\n                          <span className=\"text-xs font-medium text-gray-500 mt-3 text-center\">{item.label}<\/span>\r\n                        <\/div>\r\n                      ))}\r\n                    <\/div>\r\n                    <div className=\"flex justify-between items-center mt-4 text-sm text-gray-500\">\r\n                       <span>Efectivo en Caja: <strong className=\"text-gray-800\">{formatCurrency(financials.currentCash)}<\/strong><\/span>\r\n                    <\/div>\r\n                  <\/div>\r\n\r\n                  <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col\">\r\n                    <h3 className=\"text-lg font-semibold text-gray-800 mb-6 flex items-center\"><Users className=\"mr-2 text-indigo-500\" \/> Pipeline de Clientes<\/h3>\r\n                    <div className=\"flex-1 space-y-3 overflow-y-auto pr-2\">\r\n                      {pipelineOrder.map(status => {\r\n                          const count = pipelineCounts[status] || 0;\r\n                          const width = `${(count \/ maxPipeline) * 100}%`;\r\n                          const barColor = status === 'Cerrado' ? 'bg-emerald-500' : status === 'Descartado' ? 'bg-gray-400' : 'bg-indigo-500';\r\n                          return (\r\n                              <div key={status} className=\"flex items-center text-sm group cursor-pointer\">\r\n                                <div className=\"w-28 md:w-32 text-gray-600 truncate font-medium\" title={status}>{status}<\/div>\r\n                                <div className=\"flex-1 h-5 bg-gray-100 rounded-full overflow-hidden mx-3 relative\">\r\n                                    <div className={`h-full ${barColor} rounded-full transition-all duration-1000`} style={{ width: width === '0%' ? '0%' : width }}><\/div>\r\n                                <\/div>\r\n                                <div className=\"w-8 text-right font-bold text-gray-800\">{count}<\/div>\r\n                              <\/div>\r\n                          );\r\n                      })}\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <h3 className=\"text-xl font-bold text-gray-800 mb-4 mt-8 pt-4 border-t border-gray-200\">Desglose por Tipo de Propiedad<\/h3>\r\n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n                  {Object.entries(financials.propertyTypesBreakdown).map(([type, stats]) => (\r\n                    <div key={type} className=\"bg-white p-5 rounded-xl shadow-sm border border-gray-100 flex flex-col justify-between\">\r\n                      <div className=\"flex items-center space-x-3 mb-4\">\r\n                        <div className=\"p-2 bg-rose-50 text-rose-600 rounded-lg\">{getTypeIcon(type)}<\/div>\r\n                        <h4 className=\"font-bold text-gray-800 text-lg\">{type === 'Local' ? 'Local Com.' : type}<\/h4>\r\n                      <\/div>\r\n                      <div>\r\n                        <p className=\"text-3xl font-black text-gray-900 mb-2\">{stats.total}<\/p>\r\n                        <div className=\"flex justify-between text-xs font-semibold border-t border-gray-100 pt-2\">\r\n                          <span className=\"text-emerald-600 bg-emerald-50 px-2 py-1 rounded\">Venta: {stats.disponible}<\/span>\r\n                          <span className=\"text-zinc-600 bg-zinc-100 px-2 py-1 rounded\">Vendida: {stats.vendida}<\/span>\r\n                        <\/div>\r\n                      <\/div>\r\n                    <\/div>\r\n                  ))}\r\n                  {Object.keys(financials.propertyTypesBreakdown).length === 0 && (\r\n                    <div className=\"col-span-full p-4 text-center text-gray-500 bg-zinc-50 rounded-lg border border-gray-200\">No hay propiedades registradas.<\/div>\r\n                  )}\r\n                <\/div>\r\n              <\/div>\r\n            );\r\n          };\r\n\r\n          const renderInventory = () => (\r\n            <div className=\"space-y-6\">\r\n              <div className=\"bg-gradient-to-r from-zinc-100 to-rose-50 p-6 rounded-xl shadow-sm border border-zinc-200\">\r\n                <div className=\"flex items-center mb-4\">\r\n                  <Bot className=\"text-zinc-800 mr-2\" \/>\r\n                  <h3 className=\"text-lg font-bold text-zinc-900\">\u2728 Matchmaker IA - Busca la propiedad ideal<\/h3>\r\n                <\/div>\r\n                <div className=\"flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2 mb-4\">\r\n                  <input type=\"text\" value={aiChatInput} onChange={e => setAiChatInput(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAskAI()} placeholder=\"Ej. Tengo un cliente con 2 millones que busca casa...\" className=\"flex-1 p-3 border border-zinc-300 rounded-lg focus:ring-2 focus:ring-zinc-500 focus:outline-none\" \/>\r\n                  <button onClick={handleAskAI} disabled={isChatLoading || !aiChatInput.trim()} className=\"bg-zinc-800 hover:bg-zinc-900 text-white px-6 py-3 rounded-lg flex justify-center items-center font-medium disabled:opacity-50 transition-colors\">\r\n                    {isChatLoading ? <Loader2 size={18} className=\"animate-spin\" \/> : <Send size={18} className=\"mr-2\" \/>} Consultar IA\r\n                  <\/button>\r\n                <\/div>\r\n                {aiChatResponse && (\r\n                  <div className=\"bg-white p-4 rounded-lg border border-zinc-200 text-gray-700 whitespace-pre-wrap shadow-sm\">\r\n                    <span className=\"font-semibold text-zinc-800 flex items-center mb-2\"><Sparkles size={16} className=\"mr-1 text-yellow-500\"\/> Recomendaci\u00f3n de Gemini:<\/span>\r\n                    {aiChatResponse}\r\n                  <\/div>\r\n                )}\r\n              <\/div>\r\n\r\n              <div className=\"flex justify-between items-center\">\r\n                <h2 className=\"text-2xl font-bold text-gray-800\">Inventario de Propiedades<\/h2>\r\n                <button onClick={handleOpenAddModal} className=\"bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors\">\r\n                  <Plus size={18} className=\"mr-2\" \/> Agregar Propiedad\r\n                <\/button>\r\n              <\/div>\r\n\r\n              <div className=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden\">\r\n                <table className=\"w-full text-left border-collapse\">\r\n                  <thead>\r\n                    <tr className=\"bg-gray-50 border-b border-gray-200\">\r\n                      <th className=\"p-4 text-sm font-semibold text-gray-600\">Propiedad<\/th>\r\n                      <th className=\"p-4 text-sm font-semibold text-gray-600\">Tipo<\/th>\r\n                      <th className=\"p-4 text-sm font-semibold text-gray-600\">Costo (Inversi\u00f3n)<\/th>\r\n                      <th className=\"p-4 text-sm font-semibold text-gray-600\">Precio Esperado \/ Venta<\/th>\r\n                      <th className=\"p-4 text-sm font-semibold text-gray-600\">Estatus<\/th>\r\n                      <th className=\"p-4 text-sm font-semibold text-gray-600 text-right\">Acciones<\/th>\r\n                    <\/tr>\r\n                  <\/thead>\r\n                  <tbody>\r\n                    {properties.map(prop => {\r\n                      const totalInvestment = prop.cost + (prop.propertyTax || 0) + (prop.notaryFees || 0) + (prop.siapa || 0) + (prop.cfe || 0) + (prop.predial || 0) + (prop.mantenimiento || 0) + (prop.remodelacion || 0);\r\n                      return (\r\n                        <tr key={prop.id} className=\"border-b border-gray-100 hover:bg-gray-50\">\r\n                          <td className=\"p-4 font-medium text-gray-800\">{prop.title}<\/td>\r\n                          <td className=\"p-4\"><span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${prop.type === 'Casa' ? 'bg-zinc-100 text-zinc-800' : 'bg-rose-100 text-rose-800'}`}>{prop.type}<\/span><\/td>\r\n                          <td className=\"p-4 text-gray-600\">{formatCurrency(totalInvestment)}<\/td>\r\n                          <td className=\"p-4\">{prop.status === 'Vendido' || prop.status === 'Archivado' ? <span className=\"text-green-600 font-semibold\">{formatCurrency(prop.salePrice)}<\/span> : <span className=\"text-gray-600\">{formatCurrency(prop.askingPrice)}<\/span>}<\/td>\r\n                          <td className=\"p-4\"><span className={`px-2 py-1 rounded text-xs font-semibold ${prop.status === 'Disponible' ? 'bg-green-100 text-green-700' : prop.status === 'Vendido' ? 'bg-zinc-800 text-white' : 'bg-gray-200 text-gray-600'}`}>{prop.status === 'Archivado' ? 'Vendido (Cierre Ant.)' : prop.status}<\/span><\/td>\r\n                          <td className=\"p-4 text-right space-x-2\">\r\n                            {prop.status === 'Disponible' && (\r\n                              <>\r\n                                <button onClick={() => handleOpenRoiModal(prop)} className=\"p-2 text-emerald-600 hover:bg-emerald-50 rounded\" title=\"\u2728 Analizar Inversi\u00f3n IA\"><LineChart size={18} \/><\/button>\r\n                                <button onClick={() => handleOpenMessageModal(prop)} className=\"p-2 text-sky-600 hover:bg-sky-50 rounded\" title=\"\u2728 Generar WhatsApp IA\"><MessageCircle size={18} \/><\/button>\r\n                                <button onClick={() => handleOpenContractModal(prop)} className=\"p-2 text-rose-600 hover:bg-rose-50 rounded\" title=\"\u2728 Generar Borrador de Contrato IA\"><FileSignature size={18} \/><\/button>\r\n                                <button onClick={() => handleOpenEditModal(prop)} className=\"p-2 text-zinc-800 hover:bg-zinc-100 rounded\" title=\"Editar\"><Edit3 size={18} \/><\/button>\r\n                                <button onClick={() => handleOpenSellModal(prop)} className=\"p-2 text-green-600 hover:bg-green-50 rounded font-medium text-sm border border-green-200\" title=\"Marcar como Vendido\">Vender<\/button>\r\n                              <\/>\r\n                            )}\r\n                            <button onClick={() => handleOpenDeleteModal(prop)} className=\"p-2 text-red-600 hover:bg-red-50 rounded\" title=\"Eliminar\"><Trash2 size={18} \/><\/button>\r\n                          <\/td>\r\n                        <\/tr>\r\n                      );\r\n                    })}\r\n                  <\/tbody>\r\n                <\/table>\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n\r\n          const renderFinancials = () => (\r\n            <div className=\"space-y-6\">\r\n              <div className=\"flex flex-col sm:flex-row sm:items-center justify-between gap-4\">\r\n                <div>\r\n                  <h2 className=\"text-2xl font-bold text-gray-800\">Reportes Financieros<\/h2>\r\n                  <p className=\"text-gray-500\">Calculados en tiempo real basados en tu inventario y ventas.<\/p>\r\n                <\/div>\r\n                <button onClick={() => setIsSaveStatementModalOpen(true)} className=\"bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors font-medium shadow-sm whitespace-nowrap\"><Save size={18} className=\"mr-2\" \/> Guardar Cierre<\/button>\r\n              <\/div>\r\n\r\n              <div className=\"bg-gradient-to-r from-rose-50 to-zinc-50 p-6 rounded-xl shadow-sm border border-rose-100\">\r\n                <div className=\"flex flex-col sm:flex-row sm:items-center justify-between mb-4 space-y-3 sm:space-y-0\">\r\n                  <div className=\"flex items-center\"><Sparkles className=\"text-rose-600 mr-2\" \/><h3 className=\"text-xl font-bold text-zinc-900\">Asesor Financiero IA<\/h3><\/div>\r\n                  <button onClick={handleGenerateFinancialInsight} disabled={isGeneratingFinance} className=\"bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors text-sm font-medium disabled:opacity-50\">\r\n                    {isGeneratingFinance ? <><Loader2 size={16} className=\"mr-2 animate-spin\" \/> Analizando...<\/> : <><Sparkles size={16} className=\"mr-2 text-yellow-300\" \/> Analizar Inteligencia Financiera<\/>}\r\n                  <\/button>\r\n                <\/div>\r\n                {financialInsight ? (\r\n                  <div className=\"bg-white p-5 rounded-lg border border-rose-100 text-gray-700 whitespace-pre-wrap leading-relaxed shadow-sm\">{financialInsight}<\/div>\r\n                ) : (\r\n                  <p className=\"text-sm text-zinc-600 italic\">Presiona el bot\u00f3n para que Gemini analice la salud de tu negocio.<\/p>\r\n                )}\r\n              <\/div>\r\n\r\n              <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6\">\r\n                <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100\">\r\n                  <div className=\"flex items-center mb-4 pb-2 border-b border-gray-200\"><FileText className=\"text-rose-600 mr-2\" \/><h3 className=\"text-xl font-bold text-gray-800\">Estado de Resultados<\/h3><\/div>\r\n                  <div className=\"space-y-3\">\r\n                    <div className=\"flex justify-between text-gray-600\"><span>Ingresos por Ventas<\/span><span className=\"font-semibold text-gray-800\">{formatCurrency(financials.totalRevenue)}<\/span><\/div>\r\n                    <div className=\"flex justify-between text-red-500 border-b border-gray-100 pb-2\"><span>(-) Costos y Gastos (Vendidas)<\/span><span>- {formatCurrency(financials.costOfGoodsSold + financials.soldPropertyTax + financials.soldNotaryFees + financials.soldServices + financials.soldRemodeling)}<\/span><\/div>\r\n                    <div className=\"flex justify-between font-bold text-lg pt-2\"><span className=\"text-gray-800\">Utilidad Bruta<\/span><span className={financials.grossProfit >= 0 ? \"text-green-600\" : \"text-red-600\"}>{formatCurrency(financials.grossProfit)}<\/span><\/div>\r\n                    <div className=\"flex justify-between text-red-500 border-b border-gray-100 pb-2 mt-2\"><span>(-) Impuestos (ISR Pagado)<\/span><span>- {formatCurrency(financials.totalIsrPaid)}<\/span><\/div>\r\n                    <div className=\"flex justify-between font-bold text-xl pt-2\"><span className=\"text-gray-900\">Utilidad Neta<\/span><span className={financials.netProfit >= 0 ? \"text-green-600\" : \"text-red-600\"}>{formatCurrency(financials.netProfit)}<\/span><\/div>\r\n                  <\/div>\r\n                <\/div>\r\n\r\n                <div className=\"bg-white p-6 rounded-xl shadow-sm border border-gray-100 lg:col-span-2\">\r\n                  <div className=\"flex items-center mb-4 pb-2 border-b border-gray-200\"><PieChart className=\"text-rose-600 mr-2\" \/><h3 className=\"text-xl font-bold text-gray-800\">Balance General<\/h3><\/div>\r\n                  <div className=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n                    <div>\r\n                      <h4 className=\"font-semibold text-gray-700 mb-3 bg-gray-50 p-2 rounded\">ACTIVOS<\/h4>\r\n                      <div className=\"space-y-2 pl-2\">\r\n                        <div className=\"flex justify-between text-gray-600\"><span>Efectivo y Bancos<\/span><span>{formatCurrency(financials.currentCash)}<\/span><\/div>\r\n                        <div className=\"flex justify-between text-gray-600 border-b border-gray-200 pb-2\"><span>Inventario (Propiedades Disponibles)<\/span><span>{formatCurrency(financials.inventoryValue)}<\/span><\/div>\r\n                        <div className=\"flex justify-between font-bold pt-1\"><span>Total Activos<\/span><span>{formatCurrency(financials.totalAssets)}<\/span><\/div>\r\n                      <\/div>\r\n                    <\/div>\r\n                    <div>\r\n                      <h4 className=\"font-semibold text-gray-700 mb-3 bg-gray-50 p-2 rounded\">PASIVOS Y CAPITAL<\/h4>\r\n                      <div className=\"space-y-2 pl-2\">\r\n                        <div className=\"flex justify-between text-gray-600\"><span className=\"flex items-center\">Pasivos (Deudas)<button onClick={() => { setLiabilitiesInput(liabilities); setIsLiabilitiesModalOpen(true); }} className=\"ml-2 text-rose-500\"><Edit3 size={14} \/><\/button><\/span><span>{formatCurrency(financials.totalLiabilities)}<\/span><\/div>\r\n                        <div className=\"flex justify-between text-gray-600 mt-4\"><span className=\"flex items-center\">Capital Contribuido<button onClick={() => { setCapitalInput(initialCapital); setIsCapitalModalOpen(true); }} className=\"ml-2 text-rose-500\"><Edit3 size={14} \/><\/button><\/span><span>{formatCurrency(initialCapital)}<\/span><\/div>\r\n                        <div className=\"flex justify-between text-gray-600 border-b border-gray-200 pb-2\"><span>Utilidades Acumuladas<\/span><span className={financials.allTimeNetProfit >= 0 ? 'text-green-600' : 'text-red-600'}>{formatCurrency(financials.allTimeNetProfit)}<\/span><\/div>\r\n                        <div className=\"flex justify-between font-bold pt-1\"><span>Total Pasivos y Capital<\/span><span>{formatCurrency(financials.totalLiabilities + financials.totalEquity)}<\/span><\/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          const renderStatements = () => { \/* Contenido truncado por espacio, usa la l\u00f3gica base *\/ \r\n             return <div className=\"p-8 text-center text-gray-500 bg-white rounded-lg shadow\">Estados de cuenta guardados se ver\u00e1n aqu\u00ed. (L\u00f3gica incluida en el c\u00f3digo fuente principal)<\/div>; \r\n          };\r\n          const renderPropertyHistory = () => { \/* Contenido truncado por espacio, usa la l\u00f3gica base *\/ \r\n             return <div className=\"p-8 text-center text-gray-500 bg-white rounded-lg shadow\">Hist\u00f3rico de Propiedades. (L\u00f3gica incluida en el c\u00f3digo fuente principal)<\/div>; \r\n          };\r\n\r\n          const renderClients = () => {\r\n             return (\r\n               <div className=\"space-y-6\">\r\n                 <div className=\"flex justify-between items-center mb-6\">\r\n                   <div className=\"flex items-center space-x-3\"><Users className=\"text-rose-600\" size={28} \/><h2 className=\"text-2xl font-bold text-gray-800\">Directorio de Clientes \/ Leads<\/h2><\/div>\r\n                   <button onClick={handleOpenAddClientModal} className=\"bg-rose-600 hover:bg-rose-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors shadow-md\"><UserPlus size={18} className=\"mr-2\" \/> Agregar Cliente<\/button>\r\n                 <\/div>\r\n                 <div className=\"bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden\">\r\n                    <table className=\"w-full text-left border-collapse\">\r\n                      <thead>\r\n                        <tr className=\"bg-gray-50 border-b border-gray-200\">\r\n                          <th className=\"p-4 text-sm font-semibold text-gray-600\">Cliente<\/th>\r\n                          <th className=\"p-4 text-sm font-semibold text-gray-600\">Contacto<\/th>\r\n                          <th className=\"p-4 text-sm font-semibold text-gray-600\">Tipo & Estatus<\/th>\r\n                          <th className=\"p-4 text-sm font-semibold text-gray-600 text-center\">Acciones<\/th>\r\n                        <\/tr>\r\n                      <\/thead>\r\n                      <tbody>\r\n                        {clients.map(client => (\r\n                          <tr key={client.id} className=\"border-b border-gray-100 hover:bg-gray-50\">\r\n                            <td className=\"p-4\"><p className=\"font-bold text-gray-800\">{client.name}<\/p><\/td>\r\n                            <td className=\"p-4\"><p className=\"text-sm text-gray-700\">{client.phone} | {client.email}<\/p><\/td>\r\n                            <td className=\"p-4\"><span className=\"text-xs font-semibold text-zinc-600 border border-zinc-200 bg-white px-2 py-0.5 rounded\">{client.status}<\/span><\/td>\r\n                            <td className=\"p-4 text-center space-x-2\">\r\n                              <button onClick={() => handleGenerateClientStrategy(client)} className=\"p-2 text-rose-600 hover:bg-rose-50 rounded\"><Sparkles size={18} \/><\/button>\r\n                              <button onClick={() => handleDeleteClient(client.id)} className=\"p-2 text-red-600 hover:bg-red-50 rounded\"><Trash2 size={18} \/><\/button>\r\n                            <\/td>\r\n                          <\/tr>\r\n                        ))}\r\n                      <\/tbody>\r\n                    <\/table>\r\n                 <\/div>\r\n               <\/div>\r\n             )\r\n          };\r\n\r\n          return (\r\n            <div className=\"flex h-screen bg-gray-50 font-sans text-gray-900\">\r\n              <div className=\"w-64 bg-zinc-950 text-white flex flex-col shadow-xl print:hidden\">\r\n                <div className=\"p-6 border-b border-zinc-800\">\r\n                  <div className=\"flex flex-col items-center justify-center space-y-3\">\r\n                    <img src={logoSactor} alt=\"Sactor\" className=\"w-40 h-auto object-contain drop-shadow-lg\" \/>\r\n                    <h1 className=\"text-lg font-bold tracking-tight text-center text-zinc-300\">Sistema SactorTech<\/h1>\r\n                  <\/div>\r\n                <\/div>\r\n                <nav className=\"flex-1 p-4 space-y-2 overflow-y-auto pb-8\">\r\n                  <button onClick={() => setActiveTab('dashboard')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg ${activeTab === 'dashboard' ? 'bg-rose-600 text-white' : 'text-zinc-400 hover:bg-zinc-800 hover:text-white'}`}><LayoutDashboard size={20} \/> <span>Dashboard<\/span><\/button>\r\n                  <button onClick={() => setActiveTab('inventory')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg ${activeTab === 'inventory' ? 'bg-rose-600 text-white' : 'text-zinc-400 hover:bg-zinc-800 hover:text-white'}`}><Home size={20} \/> <span>Inventario<\/span><\/button>\r\n                  <button onClick={() => setActiveTab('financials')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg ${activeTab === 'financials' ? 'bg-rose-600 text-white' : 'text-zinc-400 hover:bg-zinc-800 hover:text-white'}`}><PieChart size={20} \/> <span>Finanzas<\/span><\/button>\r\n                  <button onClick={() => setActiveTab('isr')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg ${activeTab === 'isr' ? 'bg-rose-600 text-white' : 'text-zinc-400 hover:bg-zinc-800 hover:text-white'}`}><FileText size={20} \/><span>Determinaci\u00f3n de ISR<\/span><\/button>\r\n                  <button onClick={() => setActiveTab('clients')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg ${activeTab === 'clients' ? 'bg-rose-600 text-white' : 'text-zinc-400 hover:bg-zinc-800 hover:text-white'}`}><Users size={20} \/><span>Directorio de Clientes<\/span><\/button>\r\n                <\/nav>\r\n              <\/div>\r\n\r\n              <div className=\"flex-1 overflow-auto p-8 print:p-0 print:overflow-visible\">\r\n                {activeTab === 'dashboard' && renderDashboard()}\r\n                {activeTab === 'inventory' && renderInventory()}\r\n                {activeTab === 'financials' && renderFinancials()}\r\n                {activeTab === 'statements' && renderStatements()}\r\n                {activeTab === 'propertyHistory' && renderPropertyHistory()}\r\n                {activeTab === 'isr' && <CalculadoraISR \/>}\r\n                {activeTab === 'clients' && renderClients()}\r\n              <\/div>\r\n\r\n{\/* MODAL: Agregar \/ Editar Propiedad *\/}\r\n              {isPropertyModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-3xl overflow-hidden max-h-[90vh] flex flex-col\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center\">\r\n                      <h3 className=\"text-lg font-bold text-gray-800\">{editingProperty ? 'Editar Propiedad y Gastos' : 'Nueva Propiedad'}<\/h3>\r\n                      <button onClick={() => setIsPropertyModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    \r\n                    <form onSubmit={handleSaveProperty} className=\"p-6 overflow-y-auto space-y-6\">\r\n                      {\/* Secci\u00f3n 1: Datos Generales *\/}\r\n                      <div className=\"bg-gray-50 p-4 rounded-lg border border-gray-200 space-y-4\">\r\n                        <h4 className=\"font-bold text-zinc-800 border-b border-zinc-200 pb-1\">1. Datos de la Propiedad<\/h4>\r\n                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">T\u00edtulo \/ Direcci\u00f3n<\/label>\r\n                            <input required type=\"text\" value={formData.title} onChange={e => setFormData({...formData, title: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"Ej. Casa en Lomas...\" \/>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Tipo de Bien<\/label>\r\n                            <select value={formData.type} onChange={e => setFormData({...formData, type: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\">\r\n                              <option value=\"Casa\">Casa<\/option>\r\n                              <option value=\"Terreno\">Terreno<\/option>\r\n                              <option value=\"Departamento\">Departamento<\/option>\r\n                              <option value=\"Local\">Local Comercial<\/option>\r\n                            <\/select>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Precio de Venta Esperado ($)<\/label>\r\n                            <input required type=\"number\" min=\"0\" value={formData.askingPrice} onChange={e => setFormData({...formData, askingPrice: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"A cu\u00e1nto la vas a vender...\" \/>\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/div>\r\n\r\n                      {\/* Secci\u00f3n 2: Inversi\u00f3n Inicial *\/}\r\n                      <div className=\"bg-gray-50 p-4 rounded-lg border border-gray-200 space-y-4\">\r\n                        <h4 className=\"font-bold text-rose-800 border-b border-rose-200 pb-1\">2. Costos de Adquisici\u00f3n<\/h4>\r\n                        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Costo Base ($)<\/label>\r\n                            <input required type=\"number\" min=\"0\" value={formData.cost} onChange={e => setFormData({...formData, cost: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"Costo del inmueble...\" \/>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Imp. Patrimonial ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.propertyTax} onChange={e => setFormData({...formData, propertyTax: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"ISAI \/ Traslado...\" \/>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Notar\u00eda ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.notaryFees} onChange={e => setFormData({...formData, notaryFees: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"Honorarios...\" \/>\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/div>\r\n\r\n                      {\/* Secci\u00f3n 3: Servicios, Mantenimiento *\/}\r\n                      <div className=\"bg-gray-50 p-4 rounded-lg border border-gray-200 space-y-4\">\r\n                        <h4 className=\"font-bold text-emerald-800 border-b border-emerald-200 pb-1\">3. Gastos Operativos y Remodelaci\u00f3n<\/h4>\r\n                        <p className=\"text-xs text-gray-500\">Estos gastos se descontar\u00e1n del flujo de efectivo al registrarse y de la utilidad bruta al venderse la propiedad.<\/p>\r\n                        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">SIAPA \/ Agua ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.siapa} onChange={e => setFormData({...formData, siapa: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\" placeholder=\"Adeudos o consumo...\" \/>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">CFE \/ Luz ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.cfe} onChange={e => setFormData({...formData, cfe: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\" placeholder=\"Adeudos o consumo...\" \/>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Predial ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.predial} onChange={e => setFormData({...formData, predial: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\" placeholder=\"Pagos de predial...\" \/>\r\n                          <\/div>\r\n                          <div>\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Mantenimiento ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.mantenimiento} onChange={e => setFormData({...formData, mantenimiento: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\" placeholder=\"Limpieza, cuotas...\" \/>\r\n                          <\/div>\r\n                          <div className=\"md:col-span-2\">\r\n                            <label className=\"block text-sm font-medium text-gray-700 mb-1\">Remodelaci\u00f3n ($)<\/label>\r\n                            <input type=\"number\" min=\"0\" value={formData.remodelacion} onChange={e => setFormData({...formData, remodelacion: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\" placeholder=\"Pintura, electricidad, muebles, decoraci\u00f3n, pisos...\" \/>\r\n                          <\/div>\r\n                        <\/div>\r\n                      <\/div>\r\n\r\n                      {\/* CAMPO DESCRIPCI\u00d3N CON IA *\/}\r\n                      <div className=\"col-span-full pt-2\">\r\n                        <div className=\"flex justify-between items-center mb-1\">\r\n                          <label className=\"block text-sm font-medium text-gray-700\">Descripci\u00f3n para Marketing<\/label>\r\n                          <button \r\n                            type=\"button\" \r\n                            onClick={handleGenerateDescription}\r\n                            disabled={isGeneratingDesc}\r\n                            className=\"text-xs flex items-center text-rose-700 hover:text-rose-900 font-bold bg-rose-100 px-3 py-1.5 rounded-md disabled:opacity-50 transition-colors\"\r\n                          >\r\n                            {isGeneratingDesc ? <Loader2 size={14} className=\"mr-1 animate-spin\" \/> : <Sparkles size={14} className=\"mr-1 text-yellow-500\" \/>}\r\n                            \u2728 Redactar con IA\r\n                          <\/button>\r\n                        <\/div>\r\n                        <textarea \r\n                          value={formData.description} \r\n                          onChange={e => setFormData({...formData, description: e.target.value})} \r\n                          className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none min-h-[100px] text-sm text-gray-700\" \r\n                          placeholder=\"Describe la propiedad o usa el bot\u00f3n m\u00e1gico para que la IA redacte un texto persuasivo usando el t\u00edtulo y el precio...\" \r\n                        \/>\r\n                      <\/div>\r\n\r\n                      <div className=\"pt-4 flex justify-end space-x-2 pb-2\">\r\n                        <button type=\"button\" onClick={() => setIsPropertyModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button type=\"submit\" className=\"px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg\">Guardar<\/button>\r\n                      <\/div>\r\n                    <\/form>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Vender Propiedad (Confirmar precio final) *\/}\r\n              {isSellModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-green-50\">\r\n                      <h3 className=\"text-lg font-bold text-green-800\">Cerrar Venta<\/h3>\r\n                      <button onClick={() => setIsSellModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <form onSubmit={handleConfirmSale} className=\"p-6 space-y-4\">\r\n                      <p className=\"text-sm text-gray-600 mb-4\">Ingresa el precio final al que se concret\u00f3 la venta. Esto actualizar\u00e1 tus estados financieros autom\u00e1ticamente.<\/p>\r\n                      <div>\r\n                        <label className=\"block text-sm font-bold text-gray-700 mb-1\">Precio Final de Cierre ($)<\/label>\r\n                        <input \r\n                          required \r\n                          type=\"number\" \r\n                          min=\"0\" \r\n                          value={sellData.salePrice} \r\n                          onChange={e => setSellData({...sellData, salePrice: e.target.value})} \r\n                          className=\"w-full p-3 border-2 border-green-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:outline-none text-lg font-semibold\" \r\n                        \/>\r\n                      <\/div>\r\n                      <div>\r\n                        <label className=\"block text-sm font-bold text-gray-700 mb-1\">ISR Pagado ($) <span className=\"text-gray-400 font-normal text-xs\">(Opcional)<\/span><\/label>\r\n                        <input \r\n                          type=\"number\" \r\n                          min=\"0\" \r\n                          value={sellData.isr} \r\n                          onChange={e => setSellData({...sellData, isr: e.target.value})} \r\n                          className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:outline-none text-lg\" \r\n                          placeholder=\"Ej. 50000\"\r\n                        \/>\r\n                      <\/div>\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button type=\"button\" onClick={() => setIsSellModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button type=\"submit\" className=\"px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-bold\">Confirmar Venta<\/button>\r\n                      <\/div>\r\n                    <\/form>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Eliminar Propiedad *\/}\r\n              {isDeleteModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-red-50\">\r\n                      <h3 className=\"text-lg font-bold text-red-800\">Eliminar Propiedad<\/h3>\r\n                      <button onClick={() => setIsDeleteModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <div className=\"p-6 space-y-4\">\r\n                      <p className=\"text-sm text-gray-600\">\r\n                        \u00bfEst\u00e1s seguro de que deseas eliminar <strong>{propertyToDelete?.title}<\/strong>? Esta acci\u00f3n no se puede deshacer.\r\n                      <\/p>\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button onClick={() => setIsDeleteModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button onClick={handleConfirmDelete} className=\"px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-bold\">S\u00ed, Eliminar<\/button>\r\n                      <\/div>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Editar Capital *\/}\r\n              {isCapitalModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center\">\r\n                      <h3 className=\"text-lg font-bold text-gray-800\">Modificar Capital Inicial<\/h3>\r\n                      <button onClick={() => setIsCapitalModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <form onSubmit={handleSaveCapital} className=\"p-6 space-y-4\">\r\n                      <p className=\"text-sm text-gray-600 mb-2\">Ajusta el capital con el que arrancaste o el dinero disponible original. Esto recalcular\u00e1 todo el balance general.<\/p>\r\n                      <div>\r\n                        <label className=\"block text-sm font-bold text-gray-700 mb-1\">Capital ($)<\/label>\r\n                        <input \r\n                          required \r\n                          type=\"number\" \r\n                          min=\"0\" \r\n                          value={capitalInput} \r\n                          onChange={e => setCapitalInput(e.target.value)} \r\n                          className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none text-lg\" \r\n                        \/>\r\n                      <\/div>\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button type=\"button\" onClick={() => setIsCapitalModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button type=\"submit\" className=\"px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-bold\">Guardar Cambios<\/button>\r\n                      <\/div>\r\n                    <\/form>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Editar Pasivos *\/}\r\n              {isLiabilitiesModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-red-50\">\r\n                      <h3 className=\"text-lg font-bold text-red-800\">Modificar Pasivos (Deudas)<\/h3>\r\n                      <button onClick={() => setIsLiabilitiesModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <form onSubmit={handleSaveLiabilities} className=\"p-6 space-y-4\">\r\n                      <p className=\"text-sm text-gray-600 mb-2\">Ingresa el total de tus deudas, cr\u00e9ditos o pr\u00e9stamos vigentes. En contabilidad, al adquirir una deuda, tu efectivo disponible aumenta para mantener el balance (Activo = Pasivo + Capital).<\/p>\r\n                      <div>\r\n                        <label className=\"block text-sm font-bold text-gray-700 mb-1\">Pasivos ($)<\/label>\r\n                        <input \r\n                          required \r\n                          type=\"number\" \r\n                          min=\"0\" \r\n                          value={liabilitiesInput} \r\n                          onChange={e => setLiabilitiesInput(e.target.value)} \r\n                          className=\"w-full p-3 border border-red-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:outline-none text-lg font-semibold\" \r\n                        \/>\r\n                      <\/div>\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button type=\"button\" onClick={() => setIsLiabilitiesModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button type=\"submit\" className=\"px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-bold\">Guardar Deuda<\/button>\r\n                      <\/div>\r\n                    <\/form>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Guardar Estado de Cuenta *\/}\r\n              {isSaveStatementModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden\">\r\n                    <div className=\"px-6 py-4 border-b border-emerald-100 flex justify-between items-center bg-emerald-50\">\r\n                      <h3 className=\"text-lg font-bold text-emerald-800 flex items-center\"><Save size={20} className=\"mr-2\"\/> Guardar Estado de Cuenta<\/h3>\r\n                      <button onClick={() => setIsSaveStatementModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <form onSubmit={handleSaveStatement} className=\"p-6 space-y-4\">\r\n                      <p className=\"text-sm text-gray-600 mb-4\">Guarda un documento formal con la \"foto\" exacta de tus finanzas actuales para revisi\u00f3n y entrega.<\/p>\r\n                      \r\n                      <div className=\"grid grid-cols-2 gap-4\">\r\n                        <div>\r\n                          <label className=\"block text-sm font-bold text-gray-700 mb-1\">A\u00f1o<\/label>\r\n                          <select \r\n                            value={statementForm.year} \r\n                            onChange={e => setStatementForm({...statementForm, year: e.target.value})}\r\n                            className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\"\r\n                          >\r\n                            {years.map(y => <option key={y} value={y}>{y}<\/option>)}\r\n                          <\/select>\r\n                        <\/div>\r\n                        <div>\r\n                          <label className=\"block text-sm font-bold text-gray-700 mb-1\">Mes<\/label>\r\n                          <select \r\n                            value={statementForm.month} \r\n                            onChange={e => setStatementForm({...statementForm, month: e.target.value})}\r\n                            className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:outline-none\"\r\n                          >\r\n                            {months.map(m => <option key={m} value={m}>{m}<\/option>)}\r\n                          <\/select>\r\n                        <\/div>\r\n                      <\/div>\r\n\r\n                      <div className=\"bg-gray-50 p-3 rounded-lg border border-gray-200 mt-4\">\r\n                        <p className=\"text-xs text-gray-500 text-center\">Se guardar\u00e1 el balance general actual con un efectivo de:<\/p>\r\n                        <p className=\"text-sm font-black text-center text-emerald-700 mt-1\">{formatCurrency(financials.currentCash)}<\/p>\r\n                      <\/div>\r\n\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button type=\"button\" onClick={() => setIsSaveStatementModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button type=\"submit\" className=\"px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg font-bold\">Crear Estado de Cuenta<\/button>\r\n                      <\/div>\r\n                    <\/form>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Eliminar Estado de Cuenta *\/}\r\n              {isDeleteStatementModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-red-50\">\r\n                      <h3 className=\"text-lg font-bold text-red-800\">Eliminar Estado de Cuenta<\/h3>\r\n                      <button onClick={() => setIsDeleteStatementModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <div className=\"p-6 space-y-4\">\r\n                      <p className=\"text-sm text-gray-600\">\r\n                        \u00bfEst\u00e1s seguro de que deseas eliminar el documento de <strong>{statementToDelete?.month} {statementToDelete?.year}<\/strong>? Esta acci\u00f3n no se puede deshacer.\r\n                      <\/p>\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button onClick={() => setIsDeleteStatementModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button onClick={handleConfirmDeleteStatement} className=\"px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-bold\">S\u00ed, Eliminar<\/button>\r\n                      <\/div>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Agregar\/Editar Cliente *\/}\r\n              {isClientModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden flex flex-col\">\r\n                    <div className=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-zinc-50\">\r\n                      <h3 className=\"text-lg font-bold text-zinc-800\">{editingClient ? 'Editar Cliente' : 'Nuevo Cliente'}<\/h3>\r\n                      <button onClick={() => setIsClientModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <form onSubmit={handleSaveClient} className=\"p-6 overflow-y-auto space-y-4\">\r\n                      <div>\r\n                        <label className=\"block text-sm font-medium text-gray-700 mb-1\">Nombre Completo<\/label>\r\n                        <input required type=\"text\" value={formDataClient.name} onChange={e => setFormDataClient({...formDataClient, name: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"Ej. Ana S\u00e1nchez\" \/>\r\n                      <\/div>\r\n                      <div className=\"grid grid-cols-2 gap-4\">\r\n                        <div>\r\n                          <label className=\"block text-sm font-medium text-gray-700 mb-1\">Tel\u00e9fono<\/label>\r\n                          <input type=\"text\" value={formDataClient.phone} onChange={e => setFormDataClient({...formDataClient, phone: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"10 d\u00edgitos\" \/>\r\n                        <\/div>\r\n                        <div>\r\n                          <label className=\"block text-sm font-medium text-gray-700 mb-1\">Email<\/label>\r\n                          <input type=\"email\" value={formDataClient.email} onChange={e => setFormDataClient({...formDataClient, email: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"correo@ejemplo.com\" \/>\r\n                        <\/div>\r\n                      <\/div>\r\n                      <div className=\"grid grid-cols-2 gap-4\">\r\n                        <div>\r\n                          <label className=\"block text-sm font-medium text-gray-700 mb-1\">Tipo de Cliente<\/label>\r\n                          <select value={formDataClient.type} onChange={e => setFormDataClient({...formDataClient, type: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\">\r\n                            <option value=\"Comprador\">Comprador<\/option>\r\n                            <option value=\"Vendedor\">Vendedor<\/option>\r\n                            <option value=\"Inversionista\">Inversionista<\/option>\r\n                            <option value=\"Arrendador\">Arrendador<\/option>\r\n                            <option value=\"Arrendatario\">Arrendatario<\/option>\r\n                          <\/select>\r\n                        <\/div>\r\n                        <div>\r\n                          <label className=\"block text-sm font-medium text-gray-700 mb-1\">Estatus (Pipeline)<\/label>\r\n                          <select value={formDataClient.status} onChange={e => setFormDataClient({...formDataClient, status: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\">\r\n                            <option value=\"Prospecto Nuevo\">Prospecto Nuevo<\/option>\r\n                            <option value=\"Contactado\">Contactado<\/option>\r\n                            <option value=\"En Seguimiento\">En Seguimiento<\/option>\r\n                            <option value=\"Cita Agendada\">Cita Agendada<\/option>\r\n                            <option value=\"En Negociaci\u00f3n\">En Negociaci\u00f3n<\/option>\r\n                            <option value=\"Cerrado\">Cerrado (Ganado)<\/option>\r\n                            <option value=\"Descartado\">Descartado<\/option>\r\n                          <\/select>\r\n                        <\/div>\r\n                      <\/div>\r\n                      <div>\r\n                        <label className=\"block text-sm font-medium text-gray-700 mb-1\">Presupuesto ($)<\/label>\r\n                        <input type=\"number\" min=\"0\" value={formDataClient.budget} onChange={e => setFormDataClient({...formDataClient, budget: e.target.value})} className=\"w-full p-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none\" placeholder=\"Aprox. a invertir \/ recibir\" \/>\r\n                      <\/div>\r\n                      <div>\r\n                        <label className=\"block text-sm font-medium text-gray-700 mb-1\">Notas \/ Propiedad de inter\u00e9s<\/label>\r\n                        <textarea value={formDataClient.notes} onChange={e => setFormDataClient({...formDataClient, notes: e.target.value})} className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:outline-none min-h-[80px] text-sm text-gray-700\" placeholder=\"\u00bfQu\u00e9 est\u00e1 buscando?...\" \/>\r\n                      <\/div>\r\n                      <div className=\"pt-4 flex justify-end space-x-2\">\r\n                        <button type=\"button\" onClick={() => setIsClientModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cancelar<\/button>\r\n                        <button type=\"submit\" className=\"px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg\">Guardar Cliente<\/button>\r\n                      <\/div>\r\n                    <\/form>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Mensaje IA WhatsApp Inventario *\/}\r\n              {isMessageModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col\">\r\n                    <div className=\"px-6 py-4 border-b border-sky-100 flex justify-between items-center bg-sky-50\">\r\n                      <h3 className=\"text-lg font-bold text-sky-900 flex items-center\"><MessageCircle size={20} className=\"mr-2\"\/> \u2728 Mensaje para Clientes<\/h3>\r\n                      <button onClick={() => setIsMessageModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <div className=\"p-6 overflow-y-auto flex-1 bg-gray-50 flex flex-col max-h-[60vh]\">\r\n                      {isGeneratingMessage ? (\r\n                        <div className=\"flex flex-col items-center justify-center py-8 text-sky-600 h-full\">\r\n                          <Loader2 size={40} className=\"animate-spin mb-4\" \/>\r\n                          <p className=\"font-medium\">Redactando el mensaje perfecto...<\/p>\r\n                        <\/div>\r\n                      ) : (\r\n                        <div className=\"flex flex-col space-y-3\">\r\n                          <p className=\"text-sm text-gray-600\">Mensaje optimizado para WhatsApp sobre <strong>{messageProperty?.title}<\/strong>:<\/p>\r\n                          <div className=\"bg-white p-4 rounded-xl border border-sky-200 shadow-sm relative\">\r\n                            <pre className=\"whitespace-pre-wrap font-sans text-sm text-gray-800 leading-relaxed\">{messageDraft}<\/pre>\r\n                          <\/div>\r\n                        <\/div>\r\n                      )}\r\n                    <\/div>\r\n                    <div className=\"px-6 py-4 border-t border-gray-100 bg-white flex justify-end space-x-2\">\r\n                      <button onClick={() => setIsMessageModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cerrar<\/button>\r\n                      <button \r\n                        onClick={handleCopyMessage} \r\n                        disabled={isGeneratingMessage || !messageDraft}\r\n                        className=\"px-4 py-2 bg-sky-600 hover:bg-sky-700 text-white rounded-lg font-bold disabled:opacity-50 transition-colors flex items-center\"\r\n                      >\r\n                        <Copy size={16} className=\"mr-2\"\/> {isCopied ? \"\u00a1Copiado!\" : \"Copiar Texto\"}\r\n                      <\/button>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Mensaje IA Seguimiento de CLIENTES *\/}\r\n              {isAiClientModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-lg overflow-hidden flex flex-col\">\r\n                    <div className=\"px-6 py-4 border-b border-rose-100 flex justify-between items-center bg-rose-50\">\r\n                      <h3 className=\"text-lg font-bold text-rose-900 flex items-center\"><Sparkles size={20} className=\"mr-2\"\/> \u2728 Estrategia de Seguimiento IA<\/h3>\r\n                      <button onClick={() => setIsAiClientModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <div className=\"p-6 overflow-y-auto flex-1 bg-gray-50 flex flex-col max-h-[60vh]\">\r\n                      {isGeneratingClientMsg ? (\r\n                        <div className=\"flex flex-col items-center justify-center py-8 text-rose-600 h-full\">\r\n                          <Loader2 size={40} className=\"animate-spin mb-4\" \/>\r\n                          <p className=\"font-medium text-sm\">Generando mensaje de cierre persuasivo...<\/p>\r\n                        <\/div>\r\n                      ) : (\r\n                        <div className=\"flex flex-col space-y-3\">\r\n                          <p className=\"text-sm text-gray-600\">Mensaje generado por IA para dar seguimiento a este lead. C\u00f3pialo y env\u00edalo por WhatsApp o Correo:<\/p>\r\n                          <div className=\"bg-white p-4 rounded-xl border border-rose-200 shadow-sm relative\">\r\n                            <pre className=\"whitespace-pre-wrap font-sans text-sm text-gray-800 leading-relaxed\">{aiClientDraft}<\/pre>\r\n                          <\/div>\r\n                        <\/div>\r\n                      )}\r\n                    <\/div>\r\n                    <div className=\"px-6 py-4 border-t border-gray-100 bg-white flex justify-end space-x-2\">\r\n                      <button onClick={() => setIsAiClientModalOpen(false)} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg\">Cerrar<\/button>\r\n                      <button \r\n                        onClick={handleCopyClientMsg} \r\n                        disabled={isGeneratingClientMsg || !aiClientDraft}\r\n                        className=\"px-4 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-lg font-bold disabled:opacity-50 transition-colors flex items-center\"\r\n                      >\r\n                        <Copy size={16} className=\"mr-2\"\/> {isCopied ? \"\u00a1Copiado!\" : \"Copiar Texto\"}\r\n                      <\/button>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n              {\/* MODAL: Analizador de Inversi\u00f3n IA *\/}\r\n              {isRoiModalOpen && (\r\n                <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 print:hidden\">\r\n                  <div className=\"bg-white rounded-xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col\">\r\n                    <div className=\"px-6 py-4 border-b border-emerald-100 flex justify-between items-center bg-emerald-50\">\r\n                      <h3 className=\"text-lg font-bold text-emerald-900 flex items-center\"><LineChart size={20} className=\"mr-2\"\/> \u2728 Analizador de Rentabilidad IA<\/h3>\r\n                      <button onClick={() => setIsRoiModalOpen(false)} className=\"text-gray-400 hover:text-gray-600\"><X size={20}\/><\/button>\r\n                    <\/div>\r\n                    <div className=\"p-6 overflow-y-auto flex-1 bg-gray-50 flex flex-col max-h-[70vh]\">\r\n                      {isGeneratingRoi ? (\r\n                        <div className=\"flex flex-col items-center justify-center py-12 text-emerald-600 h-full\">\r\n                          <Loader2 size={48} className=\"animate-spin mb-4\" \/>\r\n                          <p className=\"font-medium text-lg\">Analizando m\u00e1rgenes y riesgos...<\/p>\r\n                          <p className=\"text-sm text-emerald-500 mt-2\">Gemini est\u00e1 evaluando el potencial financiero de esta propiedad.<\/p>\r\n                        <\/div>\r\n                      ) : (\r\n                        <div className=\"flex flex-col space-y-4\">\r\n                          <div className=\"grid grid-cols-3 gap-4 bg-white p-4 rounded-xl border border-gray-200 shadow-sm\">\r\n                            <div>\r\n                              <p className=\"text-xs text-gray-500 uppercase tracking-wider\">Inversi\u00f3n Total<\/p>\r\n                              <p className=\"font-bold text-gray-800\">{formatCurrency(roiProperty?.cost + (roiProperty?.propertyTax || 0) + (roiProperty?.notaryFees || 0) + (roiProperty?.siapa || 0) + (roiProperty?.cfe || 0) + (roiProperty?.predial || 0) + (roiProperty?.mantenimiento || 0) + (roiProperty?.remodelacion || 0))}<\/p>\r\n                            <\/div>\r\n                            <div>\r\n                              <p className=\"text-xs text-gray-500 uppercase tracking-wider\">Precio Salida<\/p>\r\n                              <p className=\"font-bold text-rose-600\">{formatCurrency(roiProperty?.askingPrice)}<\/p>\r\n                            <\/div>\r\n                            <div>\r\n                              <p className=\"text-xs text-gray-500 uppercase tracking-wider\">Utilidad Proyectada<\/p>\r\n                              <p className=\"font-bold text-emerald-600\">{formatCurrency(roiProperty?.askingPrice - (roiProperty?.cost + (roiProperty?.propertyTax || 0) + (roiProperty?.notaryFees || 0) + (roiProperty?.siapa || 0) + (roiProperty?.cfe || 0) + (roiProperty?.predial || 0) + (roiProperty?.mantenimiento || 0) + (roiProperty?.remodelacion || 0)))}<\/p>\r\n                            <\/div>\r\n                          <\/div>\r\n                          <div className=\"bg-white p-5 rounded-xl border border-emerald-200 text-gray-700 whitespace-pre-wrap leading-relaxed shadow-sm text-sm\">\r\n                            {roiAnalysis}\r\n                          <\/div>\r\n                        <\/div>\r\n                      )}\r\n                    <\/div>\r\n                    <div className=\"px-6 py-4 border-t border-gray-100 bg-white flex justify-end\">\r\n                      <button onClick={() => setIsRoiModalOpen(false)} className=\"px-6 py-2 bg-zinc-800 hover:bg-zinc-900 text-white rounded-lg font-bold transition-colors\">Entendido<\/button>\r\n                    <\/div>\r\n                  <\/div>\r\n                <\/div>\r\n              )}\r\n\r\n            <\/div>\r\n          );\r\n        }\r\n\r\n        \/\/ ==========================================\r\n        \/\/ AQU\u00cd TERMINA TU C\u00d3DIGO ORIGINAL\r\n        \/\/ ==========================================\r\n\r\n        const root = createRoot(document.getElementById('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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Future Dream Home Providing the best Real Estate services 11 Dic diciembre 11, 2025 @ 8:00 am International Architecture 2025 11 Dic diciembre 11, 2025 @ 8:00 am Nairobi Design&#8230;<a href=\"https:\/\/inmobiliariasactor.com\/?page_id=26\" class=\"epl-more-link\">Leer m\u00e1s&rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Events Page - Inmobiliaria Sactor<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/inmobiliariasactor.com\/?page_id=26\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Events Page - Inmobiliaria Sactor\" \/>\n<meta property=\"og:description\" content=\"Future Dream Home Providing the best Real Estate services 11 Dic diciembre 11, 2025 @ 8:00 am International Architecture 2025 11 Dic diciembre 11, 2025 @ 8:00 am Nairobi Design...Leer m\u00e1s&rarr;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/inmobiliariasactor.com\/?page_id=26\" \/>\n<meta property=\"og:site_name\" content=\"Inmobiliaria Sactor\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-30T16:34:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/inmobiliariasactor.com\/wp-content\/uploads\/2024\/11\/listing-8-600x540.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26\",\"url\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26\",\"name\":\"Events Page - Inmobiliaria Sactor\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/inmobiliariasactor.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/listing-8-600x540.jpg\",\"datePublished\":\"2024-11-04T04:29:48+00:00\",\"dateModified\":\"2026-03-30T16:34:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26#primaryimage\",\"url\":\"https:\\\/\\\/inmobiliariasactor.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/listing-8.jpg\",\"contentUrl\":\"https:\\\/\\\/inmobiliariasactor.com\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/listing-8.jpg\",\"width\":1000,\"height\":580},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?page_id=26#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\\\/\\\/inmobiliariasactor.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Events Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/inmobiliariasactor.com\\\/#website\",\"url\":\"https:\\\/\\\/inmobiliariasactor.com\\\/\",\"name\":\"Inmobiliaria Sactor\",\"description\":\"Bienvenidos a una inmobiliaria de alto valor\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/inmobiliariasactor.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Events Page - Inmobiliaria Sactor","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/inmobiliariasactor.com\/?page_id=26","og_locale":"es_MX","og_type":"article","og_title":"Events Page - Inmobiliaria Sactor","og_description":"Future Dream Home Providing the best Real Estate services 11 Dic diciembre 11, 2025 @ 8:00 am International Architecture 2025 11 Dic diciembre 11, 2025 @ 8:00 am Nairobi Design...Leer m\u00e1s&rarr;","og_url":"https:\/\/inmobiliariasactor.com\/?page_id=26","og_site_name":"Inmobiliaria Sactor","article_modified_time":"2026-03-30T16:34:52+00:00","og_image":[{"url":"https:\/\/inmobiliariasactor.com\/wp-content\/uploads\/2024\/11\/listing-8-600x540.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/inmobiliariasactor.com\/?page_id=26","url":"https:\/\/inmobiliariasactor.com\/?page_id=26","name":"Events Page - Inmobiliaria Sactor","isPartOf":{"@id":"https:\/\/inmobiliariasactor.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/inmobiliariasactor.com\/?page_id=26#primaryimage"},"image":{"@id":"https:\/\/inmobiliariasactor.com\/?page_id=26#primaryimage"},"thumbnailUrl":"https:\/\/inmobiliariasactor.com\/wp-content\/uploads\/2024\/11\/listing-8-600x540.jpg","datePublished":"2024-11-04T04:29:48+00:00","dateModified":"2026-03-30T16:34:52+00:00","breadcrumb":{"@id":"https:\/\/inmobiliariasactor.com\/?page_id=26#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/inmobiliariasactor.com\/?page_id=26"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/inmobiliariasactor.com\/?page_id=26#primaryimage","url":"https:\/\/inmobiliariasactor.com\/wp-content\/uploads\/2024\/11\/listing-8.jpg","contentUrl":"https:\/\/inmobiliariasactor.com\/wp-content\/uploads\/2024\/11\/listing-8.jpg","width":1000,"height":580},{"@type":"BreadcrumbList","@id":"https:\/\/inmobiliariasactor.com\/?page_id=26#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/inmobiliariasactor.com\/"},{"@type":"ListItem","position":2,"name":"Events Page"}]},{"@type":"WebSite","@id":"https:\/\/inmobiliariasactor.com\/#website","url":"https:\/\/inmobiliariasactor.com\/","name":"Inmobiliaria Sactor","description":"Bienvenidos a una inmobiliaria de alto valor","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/inmobiliariasactor.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"}]}},"_links":{"self":[{"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26"}],"version-history":[{"count":13,"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":497,"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=\/wp\/v2\/pages\/26\/revisions\/497"}],"wp:attachment":[{"href":"https:\/\/inmobiliariasactor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}