{"id":487,"date":"2025-12-02T19:42:33","date_gmt":"2025-12-02T19:42:33","guid":{"rendered":"https:\/\/5.olasdevida.es\/?page_id=487"},"modified":"2025-12-03T08:13:58","modified_gmt":"2025-12-03T08:13:58","slug":"pm2","status":"publish","type":"page","link":"https:\/\/5.olasdevida.es\/index.php\/pm2\/","title":{"rendered":"pm2"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n Olas de Vida \u00b7 Panel M\u00e9dico<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta name=\"description\" content=\"Panel m\u00e9dico de seguimiento oncol\u00f3gico - Olas de Vida\">\r\n <meta name=\"keywords\" content=\"oncolog\u00eda, panel m\u00e9dico, seguimiento pacientes, salud\">\r\n \r\n <!-- Fuentes optimizadas -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Chart.js con versi\u00f3n espec\u00edfica para estabilidad -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.0\/dist\/chart.umd.min.js\"><\/script>\r\n \r\n <style>\r\n \/* ===== RESET SEGURO PARA ELEMENTOR ===== *\/\r\n .ov-elementor-widget * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box !important;\r\n font-family: 'Inter', sans-serif !important;\r\n }\r\n \r\n \/* ===== ESTILOS PRINCIPALES ===== *\/\r\n .ov-elementor-widget {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n padding: 20px;\r\n width: 100%;\r\n overflow-x: hidden;\r\n }\r\n \r\n \/* Contenedor principal *\/\r\n .ov-wrapper {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: #1e293b;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n \r\n \/* CABECERA *\/\r\n .ov-header {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 24px 28px;\r\n color: white;\r\n }\r\n \r\n .ov-header-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .ov-header-sub {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .ov-header-tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .ov-inner {\r\n padding: 24px;\r\n }\r\n \r\n \/* TARJETAS KPI *\/\r\n .ov-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n }\r\n \r\n .ov-card {\r\n background: rgba(30, 41, 59, 0.8);\r\n border-radius: 12px;\r\n padding: 20px;\r\n border: 1px solid #475569;\r\n transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n }\r\n \r\n .ov-card:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .ov-card-value {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .ov-card-label {\r\n font-size: 12px;\r\n color: #cbd5e1;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .ov-card-tag {\r\n font-size: 11px;\r\n margin-top: 6px;\r\n color: #6ee7b7;\r\n }\r\n \r\n \/* PANEL TABLA *\/\r\n .ov-panel {\r\n background: rgba(30, 41, 59, 0.8);\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-panel-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #cbd5e1;\r\n margin-bottom: 16px;\r\n }\r\n \r\n .ov-scroll {\r\n max-height: 400px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n scrollbar-width: thin;\r\n scrollbar-color: #475569 #1e293b;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-track {\r\n background: #1e293b;\r\n border-radius: 4px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-thumb {\r\n background: #475569;\r\n border-radius: 4px;\r\n }\r\n \r\n \/* TABLA *\/\r\n .ov-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 13px;\r\n }\r\n \r\n .ov-table th {\r\n background: rgba(15, 23, 42, 0.9);\r\n padding: 12px 10px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: #cbd5e1;\r\n border-bottom: 2px solid #475569;\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .ov-table td {\r\n padding: 12px 10px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.5);\r\n }\r\n \r\n .ov-table tbody tr:hover {\r\n background: rgba(51, 65, 85, 0.3);\r\n }\r\n \r\n \/* BOTONES DE NOMBRE - ACCESIBLES *\/\r\n .patient-name-btn {\r\n background: none;\r\n border: none;\r\n color: #e2e8f0;\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 4px 8px;\r\n text-align: left;\r\n font-weight: 500;\r\n border-radius: 4px;\r\n transition: background-color 0.2s ease;\r\n }\r\n \r\n .patient-name-btn:hover {\r\n background: rgba(59, 130, 246, 0.1);\r\n color: #93c5fd;\r\n }\r\n \r\n .patient-name-btn:focus-visible {\r\n outline: 2px solid #3b82f6;\r\n outline-offset: 2px;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR - 3 COLUMNAS *\/\r\n .ov-bottom-layout {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 16px;\r\n }\r\n \r\n .ov-side-box {\r\n background: rgba(30, 41, 59, 0.8);\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n padding: 16px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 380px;\r\n }\r\n \r\n .ov-side-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 6px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .ov-side-sub {\r\n font-size: 13px;\r\n color: #cbd5e1;\r\n margin-bottom: 12px;\r\n }\r\n \r\n \/* BOTONES PDF *\/\r\n .pdf-links-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-top: auto;\r\n }\r\n \r\n .ov-btn {\r\n padding: 10px 16px;\r\n border-radius: 8px;\r\n background: linear-gradient(135deg, #3b82f6, #2563eb);\r\n border: none;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 13px;\r\n font-weight: 600;\r\n transition: all 0.2s ease;\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n width: 100%;\r\n min-height: 44px;\r\n }\r\n \r\n .ov-btn:hover {\r\n filter: brightness(1.1);\r\n transform: translateY(-1px);\r\n }\r\n \r\n .ov-btn:focus-visible {\r\n outline: 2px solid #3b82f6;\r\n outline-offset: 2px;\r\n }\r\n \r\n .ov-btn-outline {\r\n background: transparent;\r\n border: 1px solid #475569;\r\n color: #e2e8f0;\r\n }\r\n \r\n .ov-btn-outline:hover {\r\n background: rgba(71, 85, 105, 0.3);\r\n border-color: #3b82f6;\r\n }\r\n \r\n \/* IFRAME JOTFORM *\/\r\n .jotform-container {\r\n flex-grow: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n background: rgba(15, 23, 42, 0.5);\r\n position: relative;\r\n min-height: 200px;\r\n }\r\n \r\n .jotform-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n display: block;\r\n }\r\n \r\n \/* GR\u00c1FICOS *\/\r\n .charts-container {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n \r\n .chart-box {\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 8px;\r\n padding: 10px;\r\n border: 1px solid #475569;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .chart-title {\r\n font-size: 11px;\r\n color: #cbd5e1;\r\n margin-bottom: 6px;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n .chart-canvas {\r\n width: 100% !important;\r\n flex-grow: 1;\r\n }\r\n \r\n \/* MINI ESTAD\u00cdSTICAS *\/\r\n .mini-stats {\r\n display: flex;\r\n gap: 6px;\r\n margin-top: 8px;\r\n }\r\n \r\n .stat-box {\r\n flex: 1;\r\n padding: 8px;\r\n border-radius: 6px;\r\n text-align: center;\r\n font-size: 11px;\r\n }\r\n \r\n .stat-label {\r\n font-size: 10px;\r\n margin-bottom: 2px;\r\n opacity: 0.9;\r\n }\r\n \r\n .stat-value {\r\n font-size: 12px;\r\n font-weight: 600;\r\n }\r\n \r\n .stat-improvement { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }\r\n .stat-pain { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }\r\n .stat-adherence { background: rgba(59, 130, 246, 0.1); color: #93c5fd; }\r\n \r\n \/* MODAL - ACCESIBLE *\/\r\n #patient-modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n padding: 20px;\r\n }\r\n \r\n #patient-modal.active {\r\n display: flex;\r\n }\r\n \r\n .modal-content {\r\n background: #1e293b;\r\n border-radius: 16px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 800px;\r\n max-height: 80vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .modal-header {\r\n padding: 20px 24px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-close {\r\n background: none;\r\n border: none;\r\n color: #cbd5e1;\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 44px;\r\n height: 44px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: background-color 0.2s ease;\r\n }\r\n \r\n .modal-close:hover,\r\n .modal-close:focus {\r\n background: #334155;\r\n color: #e2e8f0;\r\n outline: none;\r\n }\r\n \r\n .modal-body {\r\n padding: 24px;\r\n overflow-y: auto;\r\n max-height: 60vh;\r\n }\r\n \r\n \/* CONTENIDO FICHA *\/\r\n .ficha-content h3 {\r\n color: #93c5fd;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin: 20px 0 10px 0;\r\n padding-bottom: 6px;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\r\n }\r\n \r\n .ficha-content p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\r\n line-height: 1.5;\r\n }\r\n \r\n .ficha-content ul {\r\n margin: 0 0 16px 0;\r\n padding-left: 20px;\r\n }\r\n \r\n .ficha-content li {\r\n margin-bottom: 8px;\r\n color: #cbd5e1;\r\n }\r\n \r\n \/* LOADING STATE *\/\r\n .ov-loading {\r\n display: none;\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n z-index: 100;\r\n }\r\n \r\n .ov-loading.active {\r\n display: block;\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 768px) {\r\n .ov-elementor-widget {\r\n padding: 10px;\r\n }\r\n \r\n .ov-cards {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .ov-bottom-layout {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .ov-side-box {\r\n height: 360px;\r\n }\r\n \r\n .ov-table {\r\n font-size: 12px;\r\n }\r\n \r\n .mini-stats {\r\n flex-direction: column;\r\n }\r\n \r\n .ov-header {\r\n padding: 16px 20px;\r\n }\r\n \r\n .ov-inner {\r\n padding: 16px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .ov-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .ov-side-box {\r\n height: 340px;\r\n }\r\n \r\n .ov-header-title {\r\n font-size: 20px;\r\n }\r\n \r\n .ov-table th,\r\n .ov-table td {\r\n padding: 8px 6px;\r\n }\r\n }\r\n \r\n \/* Soporte para prefers-reduced-motion *\/\r\n @media (prefers-reduced-motion: reduce) {\r\n .ov-card,\r\n .ov-btn,\r\n .patient-name-btn,\r\n .modal-close {\r\n transition: none !important;\r\n transform: none !important;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"ov-elementor-widget\">\r\n <div class=\"ov-wrapper\">\r\n\r\n <!-- CABECERA -->\r\n <div class=\"ov-header\">\r\n <div class=\"ov-header-title\">Olas de Vida \u00b7 Panel M\u00e9dico<\/div>\r\n <div class=\"ov-header-sub\">Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/div>\r\n <div class=\"ov-header-tag\">vista demo \u00b7 optimizado para elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n <!-- TARJETAS KPI -->\r\n <div class=\"ov-cards\">\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">10<\/div>\r\n <div class=\"ov-card-label\">Pacientes activos<\/div>\r\n <div class=\"ov-card-tag\">Muestra completa<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">3<\/div>\r\n <div class=\"ov-card-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"ov-card-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">4<\/div>\r\n <div class=\"ov-card-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"ov-card-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">87%<\/div>\r\n <div class=\"ov-card-label\">Adherencia<\/div>\r\n <div class=\"ov-card-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TABLA DE PACIENTES -->\r\n <div class=\"ov-panel\">\r\n <div class=\"ov-panel-title\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"ov-panel-sub\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver gr\u00e1ficos<\/div>\r\n\r\n <div class=\"ov-scroll\">\r\n <table class=\"ov-table\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES -->\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV001')\" aria-label=\"Abrir ficha de Mar\u00eda Garc\u00eda L\u00f3pez\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV002')\" aria-label=\"Abrir ficha de Roberto Silva Jim\u00e9nez\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV003')\" aria-label=\"Abrir ficha de Ana Fern\u00e1ndez L\u00f3pez\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV004')\" aria-label=\"Abrir ficha de Javier Rodr\u00edguez Santos\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-estable\">ESTABLE<\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV005')\" aria-label=\"Abrir ficha de Laura Herrera Funes\">Laura Herrera Funes<\/button><\/td>\r\n <td>ODV005<\/td>\r\n <td>Ca ovario \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 10:15<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV006')\" aria-label=\"Abrir ficha de Carmen Ramos Vidal\">Carmen Ramos Vidal<\/button><\/td>\r\n <td>ODV006<\/td>\r\n <td>Ca colon \u00b7 Ciclo 1\/8<\/td>\r\n <td>7\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hace 3h<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV007')\" aria-label=\"Abrir ficha de Daniel Mu\u00f1oz Ortega\">Daniel Mu\u00f1oz Ortega<\/button><\/td>\r\n <td>ODV007<\/td>\r\n <td>Ca p\u00e1ncreas \u00b7 Ciclo 3\/12<\/td>\r\n <td>8\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 09:10<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV008')\" aria-label=\"Abrir ficha de Elena Torres D\u00edaz\">Elena Torres D\u00edaz<\/button><\/td>\r\n <td>ODV008<\/td>\r\n <td>Ca mama \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hace 45 min<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV009')\" aria-label=\"Abrir ficha de Alberto Paredes Luna\">Alberto Paredes Luna<\/button><\/td>\r\n <td>ODV009<\/td>\r\n <td>Ca pr\u00f3stata \u00b7 Hormono + RT<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Ayer \u00b7 14:22<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"OV.openPatientModal('ODV010')\" aria-label=\"Abrir ficha de Luc\u00eda Romero Salvat\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PANEL INFERIOR - 3 COLUMNAS UNIFORMES -->\r\n <div class=\"ov-bottom-layout\">\r\n\r\n <!-- COLUMNA 1: PDFs FUNCIONANDO -->\r\n <div class=\"ov-side-box\">\r\n <div class=\"ov-side-title\">\ud83d\udcc4 Informes PDF<\/div>\r\n <div class=\"ov-side-sub\">Descarga informes m\u00e9dicos completos<\/div>\r\n \r\n <div class=\"pdf-links-container\">\r\n <a class=\"ov-btn\" href=\"https:\/\/eu.jotform.com\/pdf\/01994df43a8c7e41adb1e4e88e9367ca3103\" target=\"_blank\" rel=\"noopener noreferrer\" download=\"ultimo_ciclo.pdf\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/a>\r\n \r\n <a class=\"ov-btn\" href=\"https:\/\/eu.jotform.com\/pdf\/019ad9bc86b471129ecafec7a28f03a41b91\" target=\"_blank\" rel=\"noopener noreferrer\" download=\"evolucion_global.pdf\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/a>\r\n \r\n <button class=\"ov-btn ov-btn-outline\" onclick=\"OV.generateCustomPDF()\">\r\n <span>\ud83d\udcc4<\/span> Resumen ejecutivo\r\n <\/button>\r\n \r\n <button class=\"ov-btn ov-btn-outline\" onclick=\"window.print()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Imprimir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- COLUMNA 2: JULI\u00c1N - ASISTENTE IA -->\r\n <div class=\"ov-side-box\">\r\n <div class=\"ov-side-title\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/div>\r\n <div class=\"ov-side-sub\">Asistente m\u00e9dico con inteligencia artificial<\/div>\r\n \r\n <div class=\"jotform-container\">\r\n <iframe \r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-modals\"\r\n allow=\"microphone\"\r\n loading=\"lazy\"\r\n aria-label=\"Formulario del asistente IA Juli\u00e1n\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- COLUMNA 3: GR\u00c1FICOS COMPACTOS -->\r\n <div class=\"ov-side-box\">\r\n <div class=\"ov-side-title\" id=\"charts-title\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"ov-side-sub\" id=\"charts-subtitle\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"charts-container\" id=\"charts-container\">\r\n <!-- Gr\u00e1fico 1: \u00daltimo ciclo -->\r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\">\u00daltimo ciclo<\/div>\r\n <canvas id=\"cycle-chart\" class=\"chart-canvas\" aria-label=\"Gr\u00e1fico del \u00faltimo ciclo de tratamiento\"><\/canvas>\r\n <\/div>\r\n \r\n <!-- Gr\u00e1fico 2: Evoluci\u00f3n general -->\r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\">Evoluci\u00f3n general<\/div>\r\n <canvas id=\"general-chart\" class=\"chart-canvas\" aria-label=\"Gr\u00e1fico de evoluci\u00f3n general\"><\/canvas>\r\n <\/div>\r\n \r\n <!-- Mini estad\u00edsticas -->\r\n <div class=\"mini-stats\">\r\n <div class=\"stat-box stat-improvement\">\r\n <div class=\"stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"stat-value\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"stat-box stat-pain\">\r\n <div class=\"stat-label\">Dolor pico<\/div>\r\n <div class=\"stat-value\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"stat-box stat-adherence\">\r\n <div class=\"stat-label\">Adherencia<\/div>\r\n <div class=\"stat-value\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL FICHA M\u00c9DICA -->\r\n<div id=\"patient-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"modal-title\" aria-hidden=\"true\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <div id=\"modal-title\" class=\"modal-title\">Ficha del paciente<\/div>\r\n <button class=\"modal-close\" onclick=\"OV.closePatientModal()\" aria-label=\"Cerrar modal\">\u2715<\/button>\r\n <\/div>\r\n <div id=\"modal-body\" class=\"modal-body\">\r\n <div id=\"patient-info\" class=\"ficha-content\">\r\n <!-- Contenido se carga din\u00e1micamente -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- SPINNER DE CARGA -->\r\n<div class=\"ov-loading\" id=\"ov-loading\">\r\n <svg width=\"50\" height=\"50\" viewBox=\"0 0 50 50\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <circle cx=\"25\" cy=\"25\" r=\"20\" stroke=\"#3b82f6\" stroke-width=\"4\" fill=\"none\" stroke-dasharray=\"80\" stroke-linecap=\"round\">\r\n <animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1s\" repeatCount=\"indefinite\"\/>\r\n <\/circle>\r\n <\/svg>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ M\u00d3DULO PRINCIPAL - EVITA CONFLICTOS EN ELEMENTOR\r\n\/\/ ============================================\r\nconst OV = (function() {\r\n 'use strict';\r\n \r\n \/\/ ============================================\r\n \/\/ CONFIGURACI\u00d3N Y DATOS\r\n \/\/ ============================================\r\n const config = {\r\n debug: false,\r\n chartColors: {\r\n dolor: '#ef4444',\r\n animo: '#10b981',\r\n grid: 'rgba(71, 85, 105, 0.3)',\r\n text: '#94a3b8'\r\n }\r\n };\r\n \r\n const patientRecords = {\r\n ODV001: {\r\n name: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim d\u00edas 2-7 del ciclo<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udcdd Formulario<\/h3>\r\n <button class=\"ov-btn\" onclick=\"OV.openPatientForm('ODV001')\" style=\"width: auto; padding: 8px 16px;\">\r\n <span>\ud83d\udccb<\/span> Ver formulario\r\n <\/button>\r\n `,\r\n charts: {\r\n cycle: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14', 'D\u00eda 17'],\r\n dolor: [6, 7, 8, 7, 8, 9, 9],\r\n animo: [7, 7, 6, 7, 7, 8, 8]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6', 'Sem 7'],\r\n dolor: [8, 7, 6, 7, 6, 7, 8],\r\n animo: [5, 6, 6, 7, 7, 7, 8]\r\n },\r\n stats: {\r\n mejoria: '+15%',\r\n dolorPico: '9\/10',\r\n adherencia: '92%'\r\n }\r\n }\r\n },\r\n \r\n ODV002: {\r\n name: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> roberto.s@email.com \u00b7 623456789<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n <p>Estadio IIIA \u00b7 Quimioterapia R-CHOP<\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 3\/10 (depresivo)<\/li>\r\n <li><strong>Fiebre:<\/strong> 37.5\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Ayer 20:10<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Rituximab + CHOP ciclo 2\/8<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 8h<\/li>\r\n <li>Prednisona 100mg d\u00edas 1-5<\/li>\r\n <li>Antibi\u00f3tico profil\u00e1ctico<\/li>\r\n <\/ul>\r\n `,\r\n charts: {\r\n cycle: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [5, 6, 6, 5, 6],\r\n animo: [3, 2, 3, 4, 3]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [5, 6, 6, 5],\r\n animo: [4, 3, 3, 3]\r\n },\r\n stats: {\r\n mejoria: '-5%',\r\n dolorPico: '6\/10',\r\n adherencia: '85%'\r\n }\r\n }\r\n },\r\n \r\n ODV003: {\r\n name: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> ana.fernandez@email.com \u00b7 634567890<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n <p>Estadio II \u00b7 Quimioterapia adyuvante<\/p>\r\n `,\r\n charts: {\r\n cycle: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [6, 6, 5, 6, 6],\r\n animo: [7, 6, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [7, 6, 6],\r\n animo: [6, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+8%',\r\n dolorPico: '6\/10',\r\n adherencia: '94%'\r\n }\r\n }\r\n }\r\n };\r\n \r\n const defaultCharts = {\r\n cycle: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 6, 5, 6],\r\n animo: [6, 6, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [6, 5, 6, 5],\r\n animo: [6, 6, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+10%',\r\n dolorPico: '6\/10',\r\n adherencia: '90%'\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ VARIABLES DEL M\u00d3DULO\r\n \/\/ ============================================\r\n let cycleChart = null;\r\n let generalChart = null;\r\n let currentPatientId = null;\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES UTILITARIAS\r\n \/\/ ============================================\r\n function log(message, data = null) {\r\n if (config.debug) {\r\n console.log(`[OV Panel] ${message}`, data);\r\n }\r\n }\r\n \r\n function showLoading(show) {\r\n const loadingEl = document.getElementById('ov-loading');\r\n if (loadingEl) {\r\n loadingEl.classList.toggle('active', show);\r\n }\r\n }\r\n \r\n function sanitizeHTML(text) {\r\n const div = document.createElement('div');\r\n div.textContent = text;\r\n return div.innerHTML;\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES DE GR\u00c1FICOS\r\n \/\/ ============================================\r\n function initCharts() {\r\n try {\r\n const ctx1 = document.getElementById('cycle-chart');\r\n const ctx2 = document.getElementById('general-chart');\r\n \r\n if (!ctx1 || !ctx2) {\r\n log('Canvas elements not found');\r\n return;\r\n }\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n cycleChart = new Chart(ctx1, {\r\n type: 'line',\r\n data: {\r\n labels: defaultCharts.cycle.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: defaultCharts.cycle.dolor,\r\n borderColor: config.chartColors.dolor,\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.4,\r\n fill: true,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: defaultCharts.cycle.animo,\r\n borderColor: config.chartColors.animo,\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.4,\r\n fill: true,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: {\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: config.chartColors.text \r\n },\r\n grid: { color: config.chartColors.grid }\r\n },\r\n x: {\r\n ticks: { color: config.chartColors.text },\r\n grid: { color: config.chartColors.grid }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n generalChart = new Chart(ctx2, {\r\n type: 'line',\r\n data: {\r\n labels: defaultCharts.general.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: defaultCharts.general.dolor,\r\n borderColor: config.chartColors.dolor,\r\n backgroundColor: 'transparent',\r\n tension: 0.4,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: defaultCharts.general.animo,\r\n borderColor: config.chartColors.animo,\r\n backgroundColor: 'transparent',\r\n tension: 0.4,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: {\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: config.chartColors.text \r\n },\r\n grid: { color: config.chartColors.grid }\r\n },\r\n x: {\r\n ticks: { color: config.chartColors.text },\r\n grid: { color: config.chartColors.grid }\r\n }\r\n }\r\n }\r\n });\r\n \r\n log('Charts initialized successfully');\r\n } catch (error) {\r\n console.error('Error initializing charts:', error);\r\n }\r\n }\r\n \r\n function updateCharts(chartData) {\r\n try {\r\n if (!cycleChart || !generalChart) {\r\n log('Charts not initialized');\r\n return;\r\n }\r\n \r\n const data = chartData || defaultCharts;\r\n \r\n \/\/ Actualizar datos de gr\u00e1ficos\r\n cycleChart.data.labels = data.cycle.labels;\r\n cycleChart.data.datasets[0].data = data.cycle.dolor;\r\n cycleChart.data.datasets[1].data = data.cycle.animo;\r\n cycleChart.update('none');\r\n \r\n generalChart.data.labels = data.general.labels;\r\n generalChart.data.datasets[0].data = data.general.dolor;\r\n generalChart.data.datasets[1].data = data.general.animo;\r\n generalChart.update('none');\r\n \r\n log('Charts updated');\r\n } catch (error) {\r\n console.error('Error updating charts:', error);\r\n }\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES DE PACIENTES\r\n \/\/ ============================================\r\n function openPatientModal(patientId) {\r\n try {\r\n log('Opening patient modal', { patientId });\r\n \r\n const patient = patientRecords[patientId];\r\n if (!patient) {\r\n showErrorModal(`Paciente ${patientId} no encontrado`);\r\n return;\r\n }\r\n \r\n currentPatientId = patientId;\r\n \r\n \/\/ Actualizar modal\r\n document.getElementById('modal-title').textContent = `${patient.name} \u00b7 ${patientId}`;\r\n document.getElementById('patient-info').innerHTML = patient.info;\r\n \r\n \/\/ Mostrar modal\r\n const modal = document.getElementById('patient-modal');\r\n modal.classList.add('active');\r\n modal.setAttribute('aria-hidden', 'false');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n updateChartsPanel(patientId, patient);\r\n \r\n \/\/ Enfocar el bot\u00f3n de cerrar para accesibilidad\r\n setTimeout(() => {\r\n document.querySelector('.modal-close').focus();\r\n }, 100);\r\n \r\n } catch (error) {\r\n console.error('Error opening patient modal:', error);\r\n showErrorModal('Error al cargar datos del paciente');\r\n }\r\n }\r\n \r\n function updateChartsPanel(patientId, patient) {\r\n try {\r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('charts-title').textContent = `\ud83d\udcc8 ${patient.name}`;\r\n document.getElementById('charts-subtitle').textContent = `ID: ${patientId}`;\r\n \r\n \/\/ Obtener datos\r\n const chartData = patient.charts || defaultCharts;\r\n const stats = chartData.stats || defaultCharts.stats;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n document.getElementById('stat-mejoria').textContent = stats.mejoria;\r\n document.getElementById('stat-dolor').textContent = stats.dolorPico;\r\n document.getElementById('stat-adherencia').textContent = stats.adherencia;\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n updateCharts(chartData);\r\n \r\n log('Charts panel updated', { patientId });\r\n } catch (error) {\r\n console.error('Error updating charts panel:', error);\r\n }\r\n }\r\n \r\n function closePatientModal() {\r\n const modal = document.getElementById('patient-modal');\r\n modal.classList.remove('active');\r\n modal.setAttribute('aria-hidden', 'true');\r\n document.body.style.overflow = 'auto';\r\n log('Patient modal closed');\r\n }\r\n \r\n function showErrorModal(message) {\r\n document.getElementById('modal-title').textContent = 'Error';\r\n document.getElementById('patient-info').innerHTML = `\r\n <h3>\u26a0\ufe0f Error<\/h3>\r\n <p>${sanitizeHTML(message)}<\/p>\r\n <button class=\"ov-btn\" onclick=\"OV.closePatientModal()\" style=\"margin-top: 20px;\">\r\n Cerrar\r\n <\/button>\r\n `;\r\n \r\n const modal = document.getElementById('patient-modal');\r\n modal.classList.add('active');\r\n modal.setAttribute('aria-hidden', 'false');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PDF Y EXPORTACI\u00d3N\r\n \/\/ ============================================\r\n function generateCustomPDF() {\r\n try {\r\n const patientName = document.getElementById('charts-title').textContent.replace('\ud83d\udcc8 ', '') || 'Paciente';\r\n \r\n \/\/ Simular generaci\u00f3n de PDF\r\n alert(`\ud83d\udccb Generando resumen ejecutivo para: ${patientName}\\n\\nEste PDF incluir\u00eda:\\n\u2022 An\u00e1lisis m\u00e9dico detallado\\n\u2022 Gr\u00e1ficos de evoluci\u00f3n\\n\u2022 Recomendaciones terap\u00e9uticas\\n\u2022 Plan de tratamiento`);\r\n \r\n log('PDF generation requested', { patientName });\r\n } catch (error) {\r\n console.error('Error generating PDF:', error);\r\n alert('Error al generar el PDF');\r\n }\r\n }\r\n \r\n function exportToCSV() {\r\n try {\r\n const rows = [];\r\n const headers = ['Paciente', 'ID', 'Diagn\u00f3stico', 'Dolor', '\u00c1nimo', 'Estado'];\r\n \r\n rows.push(headers.join(','));\r\n \r\n \/\/ Recoger datos de la tabla\r\n document.querySelectorAll('.ov-table tbody tr').forEach(row => {\r\n const cells = Array.from(row.cells);\r\n const rowData = cells.map(cell => {\r\n if (cell.querySelector('.patient-name-btn')) {\r\n return cell.querySelector('.patient-name-btn').textContent.trim();\r\n }\r\n return cell.textContent.trim().replace(',', '');\r\n });\r\n rows.push(rowData.join(','));\r\n });\r\n \r\n const csvContent = rows.join('\\n');\r\n const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\r\n const link = document.createElement('a');\r\n \r\n link.href = URL.createObjectURL(blob);\r\n link.download = `pacientes_${new Date().toISOString().split('T')[0]}.csv`;\r\n link.click();\r\n \r\n log('CSV exported successfully');\r\n } catch (error) {\r\n console.error('Error exporting CSV:', error);\r\n alert('Error al exportar CSV');\r\n }\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES JOTFORM\r\n \/\/ ============================================\r\n function openPatientForm(patientId) {\r\n try {\r\n const url = `https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103?paciente=${patientId}`;\r\n window.open(url, '_blank', 'noopener,noreferrer');\r\n log('Patient form opened', { patientId, url });\r\n } catch (error) {\r\n console.error('Error opening patient form:', error);\r\n }\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n function init() {\r\n try {\r\n log('Initializing OV Panel...');\r\n \r\n \/\/ Inicializar gr\u00e1ficos\r\n initCharts();\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('patient-modal');\r\n if (modal) {\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === this) closePatientModal();\r\n });\r\n }\r\n \r\n \/\/ Configurar evento Escape\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.classList.contains('active')) {\r\n closePatientModal();\r\n }\r\n });\r\n \r\n \/\/ Cargar iframe con retraso para mejor rendimiento\r\n setTimeout(() => {\r\n const iframe = document.querySelector('.jotform-container iframe');\r\n if (iframe) {\r\n iframe.style.opacity = '0';\r\n iframe.addEventListener('load', () => {\r\n iframe.style.transition = 'opacity 0.5s ease';\r\n iframe.style.opacity = '1';\r\n log('JotForm iframe loaded');\r\n });\r\n }\r\n }, 1000);\r\n \r\n \/\/ Simular actualizaciones en tiempo real\r\n setInterval(() => {\r\n \/\/ Actualizar timestamp de la tabla cada minuto\r\n const now = new Date();\r\n const timeStr = now.toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });\r\n \r\n \/\/ Actualizar un paciente aleatorio para simular actividad\r\n const randomRows = document.querySelectorAll('.ov-table tbody tr');\r\n if (randomRows.length > 0) {\r\n const randomRow = randomRows[Math.floor(Math.random() * randomRows.length)];\r\n const timeCell = randomRow.cells[6];\r\n if (timeCell) {\r\n timeCell.textContent = `Hoy \u00b7 ${timeStr}`;\r\n }\r\n }\r\n }, 60000); \/\/ Cada minuto\r\n \r\n log('OV Panel initialized successfully');\r\n } catch (error) {\r\n console.error('Error during initialization:', error);\r\n }\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ API P\u00daBLICA\r\n \/\/ ============================================\r\n return {\r\n \/\/ Inicializaci\u00f3n\r\n init: init,\r\n \r\n \/\/ Pacientes\r\n openPatientModal: openPatientModal,\r\n closePatientModal: closePatientModal,\r\n updateChartsPanel: updateChartsPanel,\r\n \r\n \/\/ PDF y exportaci\u00f3n\r\n generateCustomPDF: generateCustomPDF,\r\n exportToCSV: exportToCSV,\r\n \r\n \/\/ JotForm\r\n openPatientForm: openPatientForm,\r\n \r\n \/\/ Utilidades\r\n log: log,\r\n \r\n \/\/ Datos (solo para debugging)\r\n _getPatientRecords: () => patientRecords,\r\n _getConfig: () => config\r\n };\r\n})();\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR\r\n\/\/ ============================================\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Peque\u00f1o retraso para asegurar que Elementor haya cargado\r\n setTimeout(() => {\r\n OV.init();\r\n }, 300);\r\n});\r\n\r\n\/\/ Fallback si DOMContentLoaded ya ocurri\u00f3\r\nif (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', OV.init);\r\n} else {\r\n setTimeout(OV.init, 100);\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-17f09fc e-con-full e-flex e-con e-parent\" data-id=\"17f09fc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d8e98 elementor-widget elementor-widget-html\" data-id=\"d7d8e98\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\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>Panel M\u00e9dico - Olas de Vida<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\r\n \/* RESET Y BASE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.5;\r\n padding: 10px;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .panel-medico {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: #1e293b;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n \r\n \/* CABECERA *\/\r\n .cabecera {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 20px;\r\n color: white;\r\n }\r\n \r\n .cabecera h1 {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 22px;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera p {\r\n font-size: 13px;\r\n opacity: 0.9;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera-tag {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .contenido {\r\n padding: 20px;\r\n }\r\n \r\n \/* KPI CARDS *\/\r\n .kpi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .kpi-card {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 15px;\r\n }\r\n \r\n .kpi-valor {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 26px;\r\n font-weight: 700;\r\n margin-bottom: 3px;\r\n }\r\n \r\n .kpi-label {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .kpi-tag {\r\n font-size: 10px;\r\n margin-top: 5px;\r\n color: #6ee7b7;\r\n }\r\n \r\n \/* TABLA *\/\r\n .seccion-tabla {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 15px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .seccion-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .seccion-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .contenedor-tabla {\r\n max-height: 350px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n border: 1px solid #334155;\r\n }\r\n \r\n .tabla-pacientes {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 12px;\r\n }\r\n \r\n .tabla-pacientes thead {\r\n background: rgba(15, 23, 42, 0.9);\r\n position: sticky;\r\n top: 0;\r\n }\r\n \r\n .tabla-pacientes th {\r\n padding: 10px 8px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: #94a3b8;\r\n border-bottom: 2px solid #475569;\r\n }\r\n \r\n .tabla-pacientes td {\r\n padding: 10px 8px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.3);\r\n }\r\n \r\n .tabla-pacientes tbody tr:hover {\r\n background: rgba(51, 65, 85, 0.2);\r\n }\r\n \r\n .btn-paciente {\r\n background: none;\r\n border: none;\r\n color: #e2e8f0;\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .btn-paciente:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR - 3 COLUMNAS *\/\r\n .panel-inferior {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 15px;\r\n }\r\n \r\n .columna {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 340px;\r\n }\r\n \r\n .columna-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .columna-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 10px;\r\n }\r\n \r\n \/* COLUMNA 1: PDFs *\/\r\n .contenedor-pdfs {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-top: auto;\r\n }\r\n \r\n .btn {\r\n padding: 8px 12px;\r\n border-radius: 6px;\r\n border: none;\r\n font-size: 12px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n }\r\n \r\n .btn-primario {\r\n background: linear-gradient(135deg, #3b82f6, #2563eb);\r\n color: white;\r\n }\r\n \r\n .btn-primario:hover {\r\n filter: brightness(1.1);\r\n }\r\n \r\n .btn-secundario {\r\n background: transparent;\r\n border: 1px solid #475569;\r\n color: #e2e8f0;\r\n }\r\n \r\n .btn-secundario:hover {\r\n background: rgba(71, 85, 105, 0.2);\r\n }\r\n \r\n \/* COLUMNA 2: ASISTENTE IA *\/\r\n .contenedor-asistente {\r\n flex: 1;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n background: #0f172a;\r\n }\r\n \r\n .iframe-asistente {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n display: block;\r\n }\r\n \r\n \/* COLUMNA 3: GR\u00c1FICOS *\/\r\n .contenedor-graficos {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n \r\n .grafico-box {\r\n background: #0f172a;\r\n border-radius: 6px;\r\n padding: 8px;\r\n border: 1px solid #475569;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-titulo {\r\n font-size: 10px;\r\n color: #94a3b8;\r\n text-align: center;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .grafico-canvas {\r\n width: 100% !important;\r\n flex: 1;\r\n min-height: 100px;\r\n }\r\n \r\n .mini-stats {\r\n display: flex;\r\n gap: 6px;\r\n margin-top: 8px;\r\n }\r\n \r\n .mini-stat {\r\n flex: 1;\r\n padding: 6px;\r\n border-radius: 5px;\r\n text-align: center;\r\n font-size: 10px;\r\n }\r\n \r\n .mini-stat-label {\r\n font-size: 9px;\r\n margin-bottom: 2px;\r\n opacity: 0.8;\r\n }\r\n \r\n .mini-stat-valor {\r\n font-size: 11px;\r\n font-weight: 600;\r\n }\r\n \r\n .stat-mejoria { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }\r\n .stat-dolor { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }\r\n .stat-adherencia { background: rgba(59, 130, 246, 0.1); color: #93c5fd; }\r\n \r\n \/* MODAL *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n padding: 15px;\r\n }\r\n \r\n .modal-contenido {\r\n background: #1e293b;\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 600px;\r\n max-height: 80vh;\r\n overflow: hidden;\r\n }\r\n \r\n .modal-cabecera {\r\n padding: 15px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-cerrar {\r\n background: none;\r\n border: none;\r\n color: #94a3b8;\r\n font-size: 20px;\r\n cursor: pointer;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .modal-cerrar:hover {\r\n background: #334155;\r\n color: #e2e8f0;\r\n }\r\n \r\n .modal-cuerpo {\r\n padding: 20px;\r\n overflow-y: auto;\r\n max-height: 60vh;\r\n }\r\n \r\n .ficha-paciente h3 {\r\n color: #93c5fd;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n margin: 15px 0 8px 0;\r\n padding-bottom: 5px;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\r\n }\r\n \r\n .ficha-paciente p {\r\n margin: 0 0 10px 0;\r\n color: #e2e8f0;\r\n }\r\n \r\n .ficha-paciente ul {\r\n margin: 0 0 12px 0;\r\n padding-left: 18px;\r\n }\r\n \r\n .ficha-paciente li {\r\n margin-bottom: 5px;\r\n color: #cbd5e1;\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 768px) {\r\n .panel-inferior {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 320px;\r\n }\r\n \r\n .kpi-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .kpi-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 300px;\r\n }\r\n \r\n .contenido {\r\n padding: 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- PANEL M\u00c9DICO -->\r\n <div class=\"panel-medico\">\r\n <!-- CABECERA -->\r\n <div class=\"cabecera\">\r\n <h1>Olas de Vida \u00b7 Panel M\u00e9dico<\/h1>\r\n <p>Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/p>\r\n <span class=\"cabecera-tag\">vista demo \u00b7 optimizado para Elementor<\/span>\r\n <\/div>\r\n \r\n <!-- CONTENIDO PRINCIPAL -->\r\n <div class=\"contenido\">\r\n <!-- KPI -->\r\n <div class=\"kpi-grid\">\r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">10<\/div>\r\n <div class=\"kpi-label\">Pacientes activos<\/div>\r\n <div class=\"kpi-tag\">Muestra completa<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">3<\/div>\r\n <div class=\"kpi-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"kpi-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">4<\/div>\r\n <div class=\"kpi-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"kpi-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">87%<\/div>\r\n <div class=\"kpi-label\">Adherencia<\/div>\r\n <div class=\"kpi-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- TABLA DE PACIENTES -->\r\n <div class=\"seccion-tabla\">\r\n <div class=\"seccion-titulo\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"seccion-subtitulo\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver gr\u00e1ficos<\/div>\r\n \r\n <div class=\"contenedor-tabla\">\r\n <table class=\"tabla-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV001')\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV002')\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV003')\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV004')\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-estable\">ESTABLE<\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- PANEL INFERIOR - 3 COLUMNAS -->\r\n <div class=\"panel-inferior\">\r\n <!-- COLUMNA 1: PDFs -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83d\udcc4 Informes PDF<\/div>\r\n <div class=\"columna-subtitulo\">Descarga informes m\u00e9dicos completos<\/div>\r\n \r\n <div class=\"contenedor-pdfs\">\r\n <button class=\"btn btn-primario\" onclick=\"descargarPDF('ultimo_ciclo')\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/button>\r\n \r\n <button class=\"btn btn-primario\" onclick=\"descargarPDF('evolucion_global')\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/button>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"generarResumen()\">\r\n <span>\ud83d\udcc4<\/span> Resumen ejecutivo\r\n <\/button>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"imprimirPanel()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Imprimir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 2: ASISTENTE IA -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/div>\r\n <div class=\"columna-subtitulo\">Asistente m\u00e9dico con inteligencia artificial<\/div>\r\n \r\n <div class=\"contenedor-asistente\">\r\n <iframe \r\n class=\"iframe-asistente\"\r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"\r\n allow=\"microphone\"\r\n loading=\"lazy\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 3: GR\u00c1FICOS -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\" id=\"titulo-graficos\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"columna-subtitulo\" id=\"subtitulo-graficos\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"contenedor-graficos\">\r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">\u00daltimo ciclo<\/div>\r\n <canvas id=\"grafico-ciclo\" class=\"grafico-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">Evoluci\u00f3n general<\/div>\r\n <canvas id=\"grafico-general\" class=\"grafico-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <div class=\"mini-stats\">\r\n <div class=\"mini-stat stat-mejoria\">\r\n <div class=\"mini-stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-dolor\">\r\n <div class=\"mini-stat-label\">Dolor pico<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-adherencia\">\r\n <div class=\"mini-stat-label\">Adherencia<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- MODAL FICHA M\u00c9DICA -->\r\n <div class=\"modal\" id=\"modal-paciente\">\r\n <div class=\"modal-contenido\">\r\n <div class=\"modal-cabecera\">\r\n <div class=\"modal-titulo\" id=\"modal-titulo\">Ficha del paciente<\/div>\r\n <button class=\"modal-cerrar\" onclick=\"cerrarModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-cuerpo\">\r\n <div id=\"info-paciente\" class=\"ficha-paciente\">\r\n <!-- Informaci\u00f3n se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATOS DE PACIENTES\r\n \/\/ ============================================\r\n const pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim d\u00edas 2-7 del ciclo<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [6, 7, 8, 7, 8],\r\n animo: [7, 7, 6, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [8, 7, 6, 7],\r\n animo: [5, 6, 6, 7]\r\n },\r\n stats: {\r\n mejoria: '+15%',\r\n dolorPico: '9\/10',\r\n adherencia: '92%'\r\n }\r\n }\r\n },\r\n \r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 3\/10 (depresivo)<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Ayer 20:10<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 6, 6, 5],\r\n animo: [3, 2, 3, 4]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [5, 6, 6],\r\n animo: [4, 3, 3]\r\n },\r\n stats: {\r\n mejoria: '-5%',\r\n dolorPico: '6\/10',\r\n adherencia: '85%'\r\n }\r\n }\r\n },\r\n \r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV003<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 5, 6, 5],\r\n animo: [6, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [6, 6, 5],\r\n animo: [7, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+8%',\r\n dolorPico: '6\/10',\r\n adherencia: '94%'\r\n }\r\n }\r\n },\r\n \r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [3, 3, 3],\r\n animo: [7, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+12%',\r\n dolorPico: '3\/10',\r\n adherencia: '96%'\r\n }\r\n }\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ VARIABLES GLOBALES\r\n \/\/ ============================================\r\n let graficoCiclo = null;\r\n let graficoGeneral = null;\r\n const graficosPorDefecto = {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 6, 5, 6],\r\n animo: [6, 6, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [6, 5, 6, 5],\r\n animo: [6, 6, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+10%',\r\n dolorPico: '6\/10',\r\n adherencia: '90%'\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PRINCIPALES\r\n \/\/ ============================================\r\n \r\n \/\/ Abrir modal del paciente\r\n function abrirPaciente(id) {\r\n const paciente = pacientes[id];\r\n \r\n if (!paciente) {\r\n alert('Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar modal\r\n document.getElementById('modal-titulo').textContent = `${paciente.nombre} \u00b7 ${id}`;\r\n document.getElementById('info-paciente').innerHTML = paciente.info;\r\n document.getElementById('modal-paciente').style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n actualizarGraficos(id, paciente);\r\n }\r\n \r\n \/\/ Cerrar modal\r\n function cerrarModal() {\r\n document.getElementById('modal-paciente').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n function actualizarGraficos(id, paciente) {\r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('titulo-graficos').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('subtitulo-graficos').textContent = `ID: ${id}`;\r\n \r\n \/\/ Obtener datos\r\n const datos = paciente.graficos || graficosPorDefecto;\r\n const stats = datos.stats || graficosPorDefecto.stats;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n document.getElementById('stat-mejoria').textContent = stats.mejoria;\r\n document.getElementById('stat-dolor').textContent = stats.dolorPico;\r\n document.getElementById('stat-adherencia').textContent = stats.adherencia;\r\n \r\n \/\/ Crear o actualizar gr\u00e1ficos\r\n crearGraficos(datos);\r\n }\r\n \r\n \/\/ Crear gr\u00e1ficos\r\n function crearGraficos(datos) {\r\n const cicloData = datos.ciclo || graficosPorDefecto.ciclo;\r\n const generalData = datos.general || graficosPorDefecto.general;\r\n \r\n const ctx1 = document.getElementById('grafico-ciclo');\r\n const ctx2 = document.getElementById('grafico-general');\r\n \r\n \/\/ Destruir gr\u00e1ficos existentes\r\n if (graficoCiclo) graficoCiclo.destroy();\r\n if (graficoGeneral) graficoGeneral.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n graficoCiclo = new Chart(ctx1, {\r\n type: 'line',\r\n data: {\r\n labels: cicloData.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: cicloData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.3,\r\n fill: true,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: cicloData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.3,\r\n fill: true,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { enabled: true }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n graficoGeneral = new Chart(ctx2, {\r\n type: 'line',\r\n data: {\r\n labels: generalData.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: generalData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: generalData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { enabled: true }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PDF\r\n \/\/ ============================================\r\n function descargarPDF(tipo) {\r\n alert(`Descargando PDF: ${tipo}\\n\\nEn una versi\u00f3n real, esto descargar\u00eda el archivo PDF correspondiente.`);\r\n }\r\n \r\n function generarResumen() {\r\n const nombre = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n alert(`Generando resumen ejecutivo para: ${nombre || \"paciente seleccionado\"}`);\r\n }\r\n \r\n function imprimirPanel() {\r\n window.print();\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n \r\n \/\/ Crear gr\u00e1ficos iniciales\r\n crearGraficos(graficosPorDefecto);\r\n \r\n \/\/ Cerrar modal al hacer clic fuera\r\n document.getElementById('modal-paciente').addEventListener('click', function(e) {\r\n if (e.target === this) cerrarModal();\r\n });\r\n \r\n \/\/ Cerrar modal con ESC\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') cerrarModal();\r\n });\r\n \r\n \/\/ Asegurar que el iframe cargue correctamente\r\n setTimeout(() => {\r\n const iframe = document.querySelector('.iframe-asistente');\r\n if (iframe) {\r\n iframe.style.opacity = '0';\r\n iframe.addEventListener('load', function() {\r\n this.style.transition = 'opacity 0.5s ease';\r\n this.style.opacity = '1';\r\n console.log('\u2705 Asistente IA cargado');\r\n });\r\n }\r\n }, 1000);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f6624fc e-con-full e-flex e-con e-parent\" data-id=\"f6624fc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1740173 elementor-widget elementor-widget-html\" data-id=\"1740173\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\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>Panel M\u00e9dico - Olas de Vida<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\r\n \/* RESET Y BASE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.5;\r\n padding: 10px;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .panel-medico {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: #1e293b;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n \r\n \/* CABECERA *\/\r\n .cabecera {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 20px;\r\n color: white;\r\n }\r\n \r\n .cabecera h1 {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 22px;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera p {\r\n font-size: 13px;\r\n opacity: 0.9;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera-tag {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .contenido {\r\n padding: 20px;\r\n }\r\n \r\n \/* KPI CARDS *\/\r\n .kpi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .kpi-card {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 15px;\r\n }\r\n \r\n .kpi-valor {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 26px;\r\n font-weight: 700;\r\n margin-bottom: 3px;\r\n }\r\n \r\n .kpi-label {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .kpi-tag {\r\n font-size: 10px;\r\n margin-top: 5px;\r\n color: #6ee7b7;\r\n }\r\n \r\n \/* TABLA *\/\r\n .seccion-tabla {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 15px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .seccion-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .seccion-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .contenedor-tabla {\r\n max-height: 350px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n border: 1px solid #334155;\r\n }\r\n \r\n .tabla-pacientes {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 12px;\r\n }\r\n \r\n .tabla-pacientes thead {\r\n background: rgba(15, 23, 42, 0.9);\r\n position: sticky;\r\n top: 0;\r\n }\r\n \r\n .tabla-pacientes th {\r\n padding: 10px 8px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: #94a3b8;\r\n border-bottom: 2px solid #475569;\r\n }\r\n \r\n .tabla-pacientes td {\r\n padding: 10px 8px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.3);\r\n }\r\n \r\n .tabla-pacientes tbody tr:hover {\r\n background: rgba(51, 65, 85, 0.2);\r\n }\r\n \r\n .btn-paciente {\r\n background: none;\r\n border: none;\r\n color: #e2e8f0;\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .btn-paciente:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR - 3 COLUMNAS *\/\r\n .panel-inferior {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 15px;\r\n }\r\n \r\n .columna {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 380px;\r\n }\r\n \r\n .columna-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .columna-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n height: 36px;\r\n }\r\n \r\n \/* COLUMNA 1: PDFs *\/\r\n .contenedor-pdfs {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-top: auto;\r\n }\r\n \r\n .btn {\r\n padding: 10px 12px;\r\n border-radius: 6px;\r\n border: none;\r\n font-size: 12px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n text-decoration: none;\r\n color: white;\r\n }\r\n \r\n .btn-primario {\r\n background: linear-gradient(135deg, #3b82f6, #2563eb);\r\n }\r\n \r\n .btn-primario:hover {\r\n filter: brightness(1.1);\r\n transform: translateY(-1px);\r\n }\r\n \r\n .btn-secundario {\r\n background: transparent;\r\n border: 1px solid #475569;\r\n color: #e2e8f0;\r\n }\r\n \r\n .btn-secundario:hover {\r\n background: rgba(71, 85, 105, 0.2);\r\n border-color: #3b82f6;\r\n }\r\n \r\n \/* COLUMNA 2: ASISTENTE IA *\/\r\n .contenedor-asistente {\r\n flex: 1;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n background: #0f172a;\r\n min-height: 200px;\r\n position: relative;\r\n }\r\n \r\n .iframe-asistente {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n display: block;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n }\r\n \r\n \/* COLUMNA 3: GR\u00c1FICOS - CORREGIDO *\/\r\n .contenedor-graficos {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n min-height: 250px;\r\n }\r\n \r\n .grafico-box {\r\n background: #0f172a;\r\n border-radius: 6px;\r\n padding: 8px;\r\n border: 1px solid #475569;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 100px;\r\n }\r\n \r\n .grafico-titulo {\r\n font-size: 10px;\r\n color: #94a3b8;\r\n text-align: center;\r\n margin-bottom: 5px;\r\n flex-shrink: 0;\r\n }\r\n \r\n .grafico-canvas {\r\n width: 100% !important;\r\n flex: 1;\r\n min-height: 80px;\r\n }\r\n \r\n .mini-stats {\r\n display: flex;\r\n gap: 6px;\r\n margin-top: 8px;\r\n flex-shrink: 0;\r\n }\r\n \r\n .mini-stat {\r\n flex: 1;\r\n padding: 6px;\r\n border-radius: 5px;\r\n text-align: center;\r\n font-size: 10px;\r\n }\r\n \r\n .mini-stat-label {\r\n font-size: 9px;\r\n margin-bottom: 2px;\r\n opacity: 0.8;\r\n }\r\n \r\n .mini-stat-valor {\r\n font-size: 11px;\r\n font-weight: 600;\r\n }\r\n \r\n .stat-mejoria { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; }\r\n .stat-dolor { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }\r\n .stat-adherencia { background: rgba(59, 130, 246, 0.1); color: #93c5fd; }\r\n \r\n \/* MODAL *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.85);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n padding: 15px;\r\n }\r\n \r\n .modal-contenido {\r\n background: #1e293b;\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 600px;\r\n max-height: 80vh;\r\n overflow: hidden;\r\n }\r\n \r\n .modal-cabecera {\r\n padding: 15px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-cerrar {\r\n background: none;\r\n border: none;\r\n color: #94a3b8;\r\n font-size: 20px;\r\n cursor: pointer;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .modal-cerrar:hover {\r\n background: #334155;\r\n color: #e2e8f0;\r\n }\r\n \r\n .modal-cuerpo {\r\n padding: 20px;\r\n overflow-y: auto;\r\n max-height: 60vh;\r\n }\r\n \r\n .ficha-paciente h3 {\r\n color: #93c5fd;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 14px;\r\n margin: 15px 0 8px 0;\r\n padding-bottom: 5px;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\r\n }\r\n \r\n .ficha-paciente p {\r\n margin: 0 0 10px 0;\r\n color: #e2e8f0;\r\n }\r\n \r\n .ficha-paciente ul {\r\n margin: 0 0 12px 0;\r\n padding-left: 18px;\r\n }\r\n \r\n .ficha-paciente li {\r\n margin-bottom: 5px;\r\n color: #cbd5e1;\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 768px) {\r\n .panel-inferior {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 360px;\r\n }\r\n \r\n .kpi-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .kpi-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 340px;\r\n }\r\n \r\n .contenido {\r\n padding: 15px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- PANEL M\u00c9DICO -->\r\n <div class=\"panel-medico\">\r\n <!-- CABECERA -->\r\n <div class=\"cabecera\">\r\n <h1>Olas de Vida \u00b7 Panel M\u00e9dico<\/h1>\r\n <p>Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/p>\r\n <span class=\"cabecera-tag\">vista demo \u00b7 optimizado para Elementor<\/span>\r\n <\/div>\r\n \r\n <!-- CONTENIDO PRINCIPAL -->\r\n <div class=\"contenido\">\r\n <!-- KPI -->\r\n <div class=\"kpi-grid\">\r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">10<\/div>\r\n <div class=\"kpi-label\">Pacientes activos<\/div>\r\n <div class=\"kpi-tag\">Muestra completa<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">3<\/div>\r\n <div class=\"kpi-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"kpi-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">4<\/div>\r\n <div class=\"kpi-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"kpi-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">87%<\/div>\r\n <div class=\"kpi-label\">Adherencia<\/div>\r\n <div class=\"kpi-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- TABLA DE PACIENTES (10 PACIENTES) -->\r\n <div class=\"seccion-tabla\">\r\n <div class=\"seccion-titulo\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"seccion-subtitulo\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver gr\u00e1ficos<\/div>\r\n \r\n <div class=\"contenedor-tabla\">\r\n <table class=\"tabla-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES -->\r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV001')\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV002')\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV003')\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV004')\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-estable\">ESTABLE<\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV005')\">Laura Herrera Funes<\/button><\/td>\r\n <td>ODV005<\/td>\r\n <td>Ca ovario \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 10:15<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV006')\">Carmen Ramos Vidal<\/button><\/td>\r\n <td>ODV006<\/td>\r\n <td>Ca colon \u00b7 Ciclo 1\/8<\/td>\r\n <td>7\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hace 3h<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV007')\">Daniel Mu\u00f1oz Ortega<\/button><\/td>\r\n <td>ODV007<\/td>\r\n <td>Ca p\u00e1ncreas \u00b7 Ciclo 3\/12<\/td>\r\n <td>8\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 09:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV008')\">Elena Torres D\u00edaz<\/button><\/td>\r\n <td>ODV008<\/td>\r\n <td>Ca mama \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hace 45 min<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV009')\">Alberto Paredes Luna<\/button><\/td>\r\n <td>ODV009<\/td>\r\n <td>Ca pr\u00f3stata \u00b7 Hormono + RT<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Ayer \u00b7 14:22<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV010')\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- PANEL INFERIOR - 3 COLUMNAS -->\r\n <div class=\"panel-inferior\">\r\n <!-- COLUMNA 1: PDFs -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83d\udcc4 Informes PDF<\/div>\r\n <div class=\"columna-subtitulo\">Descarga informes m\u00e9dicos completos<\/div>\r\n \r\n <div class=\"contenedor-pdfs\">\r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/01994df43a8c7e41adb1e4e88e9367ca3103\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/a>\r\n \r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/019ad9bc86b471129ecafec7a28f03a41b91\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/a>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"generarResumen()\">\r\n <span>\ud83d\udcc4<\/span> Resumen ejecutivo\r\n <\/button>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"window.print()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Imprimir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 2: ASISTENTE IA -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/div>\r\n <div class=\"columna-subtitulo\">Asistente m\u00e9dico con inteligencia artificial<\/div>\r\n \r\n <div class=\"contenedor-asistente\">\r\n <iframe \r\n class=\"iframe-asistente\"\r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups\"\r\n allow=\"microphone\"\r\n loading=\"lazy\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 3: GR\u00c1FICOS -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\" id=\"titulo-graficos\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"columna-subtitulo\" id=\"subtitulo-graficos\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"contenedor-graficos\" id=\"contenedor-graficos\">\r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">\u00daltimo ciclo<\/div>\r\n <canvas id=\"grafico-ciclo\" class=\"grafico-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">Evoluci\u00f3n general<\/div>\r\n <canvas id=\"grafico-general\" class=\"grafico-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <div class=\"mini-stats\">\r\n <div class=\"mini-stat stat-mejoria\">\r\n <div class=\"mini-stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-dolor\">\r\n <div class=\"mini-stat-label\">Dolor pico<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-adherencia\">\r\n <div class=\"mini-stat-label\">Adherencia<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- MODAL FICHA M\u00c9DICA -->\r\n <div class=\"modal\" id=\"modal-paciente\">\r\n <div class=\"modal-contenido\">\r\n <div class=\"modal-cabecera\">\r\n <div class=\"modal-titulo\" id=\"modal-titulo\">Ficha del paciente<\/div>\r\n <button class=\"modal-cerrar\" onclick=\"cerrarModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-cuerpo\">\r\n <div id=\"info-paciente\" class=\"ficha-paciente\">\r\n <!-- Informaci\u00f3n se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATOS DE PACIENTES (10 PACIENTES)\r\n \/\/ ============================================\r\n const pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim d\u00edas 2-7 del ciclo<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [6, 7, 8, 7, 8],\r\n animo: [7, 7, 6, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [8, 7, 6, 7],\r\n animo: [5, 6, 6, 7]\r\n },\r\n stats: {\r\n mejoria: '+15%',\r\n dolorPico: '9\/10',\r\n adherencia: '92%'\r\n }\r\n }\r\n },\r\n \r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> roberto.s@email.com \u00b7 623456789<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n <p>Estadio IIIA \u00b7 Quimioterapia R-CHOP<\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 3\/10 (depresivo)<\/li>\r\n <li><strong>Fiebre:<\/strong> 37.5\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Ayer 20:10<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Rituximab + CHOP ciclo 2\/8<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 8h<\/li>\r\n <li>Prednisona 100mg d\u00edas 1-5<\/li>\r\n <li>Antibi\u00f3tico profil\u00e1ctico<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 6, 6, 5],\r\n animo: [3, 2, 3, 4]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [5, 6, 6],\r\n animo: [4, 3, 3]\r\n },\r\n stats: {\r\n mejoria: '-5%',\r\n dolorPico: '6\/10',\r\n adherencia: '85%'\r\n }\r\n }\r\n },\r\n \r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> ana.fernandez@email.com \u00b7 634567890<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n <p>Estadio II \u00b7 Quimioterapia adyuvante<\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 7\/10 (positivo)<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 07:50<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 5, 6, 5],\r\n animo: [6, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [6, 6, 5],\r\n animo: [7, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+8%',\r\n dolorPico: '6\/10',\r\n adherencia: '94%'\r\n }\r\n }\r\n },\r\n \r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV004<\/p>\r\n <p><strong>Edad:<\/strong> 68 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> javier.rodriguez@email.com \u00b7 645678901<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de pulm\u00f3n \u00b7 Ciclo 5\/6<\/strong><\/p>\r\n <p>Estadio IIIB \u00b7 Quimioterapia con cisplatino<\/p>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [3, 3, 3],\r\n animo: [7, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+12%',\r\n dolorPico: '3\/10',\r\n adherencia: '96%'\r\n }\r\n }\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 4, 5, 5],\r\n animo: [6, 6, 6, 6]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [5, 5],\r\n animo: [6, 6]\r\n },\r\n stats: {\r\n mejoria: '+3%',\r\n dolorPico: '5\/10',\r\n adherencia: '88%'\r\n }\r\n }\r\n },\r\n \r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5'],\r\n dolor: [7, 6, 7],\r\n animo: [5, 5, 5]\r\n },\r\n general: {\r\n labels: ['Sem 1'],\r\n dolor: [7],\r\n animo: [5]\r\n },\r\n stats: {\r\n mejoria: '-2%',\r\n dolorPico: '7\/10',\r\n adherencia: '82%'\r\n }\r\n }\r\n },\r\n \r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [8, 7, 8, 8],\r\n animo: [5, 5, 5, 5]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [8, 8],\r\n animo: [5, 5]\r\n },\r\n stats: {\r\n mejoria: '0%',\r\n dolorPico: '8\/10',\r\n adherencia: '79%'\r\n }\r\n }\r\n },\r\n \r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5'],\r\n dolor: [5, 4, 5],\r\n animo: [6, 6, 6]\r\n },\r\n general: {\r\n labels: ['Sem 1'],\r\n dolor: [5],\r\n animo: [6]\r\n },\r\n stats: {\r\n mejoria: '+5%',\r\n dolorPico: '5\/10',\r\n adherencia: '91%'\r\n }\r\n }\r\n },\r\n \r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [3, 3],\r\n animo: [7, 7]\r\n },\r\n stats: {\r\n mejoria: '+10%',\r\n dolorPico: '3\/10',\r\n adherencia: '95%'\r\n }\r\n }\r\n },\r\n \r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5'],\r\n dolor: [4, 3, 4],\r\n animo: [5, 5, 5]\r\n },\r\n general: {\r\n labels: ['Sem 1'],\r\n dolor: [4],\r\n animo: [5]\r\n },\r\n stats: {\r\n mejoria: '+2%',\r\n dolorPico: '4\/10',\r\n adherencia: '87%'\r\n }\r\n }\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ VARIABLES GLOBALES\r\n \/\/ ============================================\r\n let graficoCiclo = null;\r\n let graficoGeneral = null;\r\n const graficosPorDefecto = {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 6, 5, 6],\r\n animo: [6, 6, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [6, 5, 6, 5],\r\n animo: [6, 6, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+10%',\r\n dolorPico: '6\/10',\r\n adherencia: '90%'\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PRINCIPALES\r\n \/\/ ============================================\r\n \r\n \/\/ Abrir modal del paciente\r\n function abrirPaciente(id) {\r\n const paciente = pacientes[id];\r\n \r\n if (!paciente) {\r\n alert('Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar modal\r\n document.getElementById('modal-titulo').textContent = `${paciente.nombre} \u00b7 ${id}`;\r\n document.getElementById('info-paciente').innerHTML = paciente.info;\r\n document.getElementById('modal-paciente').style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n actualizarGraficos(id, paciente);\r\n }\r\n \r\n \/\/ Cerrar modal\r\n function cerrarModal() {\r\n document.getElementById('modal-paciente').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n function actualizarGraficos(id, paciente) {\r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('titulo-graficos').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('subtitulo-graficos').textContent = `ID: ${id}`;\r\n \r\n \/\/ Obtener datos\r\n const datos = paciente.graficos || graficosPorDefecto;\r\n const stats = datos.stats || graficosPorDefecto.stats;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n document.getElementById('stat-mejoria').textContent = stats.mejoria;\r\n document.getElementById('stat-dolor').textContent = stats.dolorPico;\r\n document.getElementById('stat-adherencia').textContent = stats.adherencia;\r\n \r\n \/\/ Crear o actualizar gr\u00e1ficos\r\n crearGraficos(datos);\r\n }\r\n \r\n \/\/ Crear gr\u00e1ficos\r\n function crearGraficos(datos) {\r\n const cicloData = datos.ciclo || graficosPorDefecto.ciclo;\r\n const generalData = datos.general || graficosPorDefecto.general;\r\n \r\n const ctx1 = document.getElementById('grafico-ciclo');\r\n const ctx2 = document.getElementById('grafico-general');\r\n \r\n \/\/ Limpiar canvases\r\n ctx1.width = ctx1.offsetWidth;\r\n ctx1.height = ctx1.offsetHeight;\r\n ctx2.width = ctx2.offsetWidth;\r\n ctx2.height = ctx2.offsetHeight;\r\n \r\n \/\/ Destruir gr\u00e1ficos existentes\r\n if (graficoCiclo) graficoCiclo.destroy();\r\n if (graficoGeneral) graficoGeneral.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n graficoCiclo = new Chart(ctx1, {\r\n type: 'line',\r\n data: {\r\n labels: cicloData.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: cicloData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.3,\r\n fill: true,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: cicloData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.3,\r\n fill: true,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { enabled: true }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n graficoGeneral = new Chart(ctx2, {\r\n type: 'line',\r\n data: {\r\n labels: generalData.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: generalData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: generalData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { enabled: true }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { color: 'rgba(71, 85, 105, 0.2)' }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PDF\r\n \/\/ ============================================\r\n function generarResumen() {\r\n const nombre = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n alert(`Generando resumen ejecutivo para: ${nombre || \"paciente seleccionado\"}`);\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n \r\n \/\/ Crear gr\u00e1ficos iniciales\r\n crearGraficos(graficosPorDefecto);\r\n \r\n \/\/ Cerrar modal al hacer clic fuera\r\n document.getElementById('modal-paciente').addEventListener('click', function(e) {\r\n if (e.target === this) cerrarModal();\r\n });\r\n \r\n \/\/ Cerrar modal con ESC\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') cerrarModal();\r\n });\r\n \r\n \/\/ Asegurar que el iframe cargue correctamente\r\n setTimeout(() => {\r\n const iframe = document.querySelector('.iframe-asistente');\r\n if (iframe) {\r\n iframe.style.opacity = '0';\r\n iframe.addEventListener('load', function() {\r\n this.style.transition = 'opacity 0.5s ease';\r\n this.style.opacity = '1';\r\n console.log('\u2705 Asistente IA cargado');\r\n });\r\n }\r\n }, 1000);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-499048f e-con-full e-flex e-con e-parent\" data-id=\"499048f\" data-element_type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Olas de Vida \u00b7 Panel M\u00e9dico Olas de Vida \u00b7 Panel M\u00e9dico Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas vista demo \u00b7 optimizado para elementor 10 Pacientes activos Muestra completa 3 Alertas cr\u00edticas Dolor \/ fiebre \/ \u00e1nimo 4 Alta supervisi\u00f3n Seguimiento cercano 87% Adherencia \u00daltimos 14 d\u00edas \ud83d\udce5 Bandeja de pacientes Haz clic en el […]<\/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-487","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/comments?post=487"}],"version-history":[{"count":13,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/487\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/487\/revisions\/541"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}