Olas de Vida \u00b7 Panel M\u00e9dico<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n }\r\n \r\n .ov-root {\r\n padding: 20px;\r\n min-height: 100vh;\r\n }\r\n \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 .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-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 .ov-inner {\r\n padding: 24px;\r\n }\r\n \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 }\r\n \r\n .ov-card-value {\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: #94a3b8;\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 .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-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #94a3b8;\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 }\r\n \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: #94a3b8;\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 .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: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .patient-name-btn:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \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 .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 min-height: 350px;\r\n }\r\n \r\n .ov-side-title {\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: #94a3b8;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .pdf-links-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n margin-top: auto;\r\n }\r\n \r\n .ov-btn {\r\n padding: 8px 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: 12px;\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 gap: 6px;\r\n width: 100%;\r\n justify-content: center;\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-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 \/* ASISTENTE IA - IFRAME EMBEBIDO *\/\r\n .ai-iframe-container {\r\n flex-grow: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n margin-top: 8px;\r\n position: relative;\r\n background: rgba(15, 23, 42, 0.5);\r\n }\r\n \r\n .ai-iframe-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n display: block;\r\n min-height: 250px;\r\n }\r\n \r\n \/* CONTENEDOR DE 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: 12px;\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: #94a3b8;\r\n margin-bottom: 8px;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n .chart-canvas-container {\r\n flex-grow: 1;\r\n position: relative;\r\n min-height: 120px;\r\n }\r\n \r\n .chart-canvas {\r\n width: 100% !important;\r\n height: 100% !important;\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 .stat-box {\r\n flex: 1;\r\n padding: 6px;\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.8;\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 #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-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: #94a3b8;\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .modal-close:hover {\r\n background: #334155;\r\n color: #e2e8f0;\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 .ficha-content h3 {\r\n color: #93c5fd;\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 h3:first-child {\r\n margin-top: 0;\r\n }\r\n \r\n .ficha-content p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\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: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n @media (max-width: 768px) {\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 min-height: 320px;\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 .ai-iframe-container iframe {\r\n min-height: 200px;\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 <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"ov-root\">\r\n <div class=\"ov-wrapper\">\r\n\r\n \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 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n \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 \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 sus 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 \r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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 \r\n <div class=\"ov-bottom-layout\">\r\n\r\n \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 <button class=\"ov-btn\" onclick=\"downloadPDF('ultimo-ciclo')\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/button>\r\n \r\n <button class=\"ov-btn\" onclick=\"downloadPDF('evolucion-global')\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/button>\r\n \r\n <button class=\"ov-btn ov-btn-outline\" onclick=\"downloadPDF('resumen-ejecutivo')\">\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 informe\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \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=\"ai-iframe-container\" id=\"ai-container\">\r\n <iframe \r\n src=\"https:\/\/www.jotform.com\/app\/230155277271048\"\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 <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n \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 \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"cycle-chart-title\">\u00daltimo ciclo (dolor\/\u00e1nimo)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"cycle-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"general-chart-title\">Evoluci\u00f3n general (semanas)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"general-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \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\r\n<div id=\"patient-modal\">\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=\"closePatientModal()\">\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 \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE PACIENTES CON GR\u00c1FICOS\r\n\/\/ ============================================\r\nconst pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n ficha: `\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 graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14'],\r\n dolor: [6, 7, 8, 7, 8, 9],\r\n animo: [7, 7, 6, 7, 7, 8]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6'],\r\n dolor: [8, 7, 6, 7, 6, 7],\r\n animo: [5, 6, 6, 7, 7, 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 ficha: `\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', 'D\u00eda 10'],\r\n dolor: [5, 6, 6, 5, 6],\r\n animo: [3, 2, 3, 4, 3]\r\n },\r\n evolucion: {\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 nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV003<\/h3><p>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/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, 6, 5, 6],\r\n animo: [6, 7, 7, 7]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [6, 5, 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 \/\/ ... m\u00e1s pacientes con datos b\u00e1sicos\r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>C\u00e1ncer de pulm\u00f3n \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>C\u00e1ncer de p\u00e1ncreas \u00b7 Dolor intenso<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>C\u00e1ncer de mama \u00b7 Fiebre 38.8\u00b0C<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>C\u00e1ncer de pr\u00f3stata \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/p>`,\r\n graficos: defaultGraficos()\r\n }\r\n};\r\n\r\n\/\/ Funci\u00f3n para gr\u00e1ficos por defecto\r\nfunction defaultGraficos() {\r\n return {\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 evolucion: {\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\/\/ ============================================\r\n\/\/ VARIABLES PARA GR\u00c1FICOS\r\n\/\/ ============================================\r\nlet cicloChart = null;\r\nlet evolucionChart = null;\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PRINCIPALES\r\n\/\/ ============================================\r\n\r\n\/\/ Funci\u00f3n para abrir modal Y actualizar gr\u00e1ficos\r\nfunction openPatientModal(pacienteId) {\r\n console.log(\"Abriendo:\", pacienteId);\r\n \r\n const paciente = pacientes[pacienteId];\r\n if (!paciente) {\r\n alert(\"Paciente no encontrado\");\r\n return;\r\n }\r\n \r\n \/\/ 1. ACTUALIZAR MODAL\r\n document.getElementById('modal-title').textContent = `${paciente.nombre} \u00b7 ${pacienteId}`;\r\n document.getElementById('patient-info').innerHTML = paciente.ficha;\r\n document.getElementById('patient-modal').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ 2. ACTUALIZAR GR\u00c1FICOS\r\n updateGraficos(pacienteId, paciente);\r\n}\r\n\r\n\/\/ Funci\u00f3n para actualizar gr\u00e1ficos\r\nfunction updateGraficos(pacienteId, paciente) {\r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('charts-title').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('charts-subtitle').textContent = `ID: ${pacienteId}`;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n const stats = paciente.graficos.stats;\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 t\u00edtulos de gr\u00e1ficos\r\n document.getElementById('cycle-chart-title').textContent = `\u00daltimo ciclo \u00b7 Dolor: ${pacienteId === 'ODV001' ? '9\/10' : '6\/10'}`;\r\n document.getElementById('general-chart-title').textContent = `Evoluci\u00f3n \u00b7 ${paciente.nombre.split(' ')[0]}`;\r\n \r\n \/\/ Crear\/actualizar gr\u00e1ficos\r\n crearGraficos(paciente.graficos);\r\n}\r\n\r\n\/\/ Funci\u00f3n para crear gr\u00e1ficos con Chart.js\r\nfunction crearGraficos(datosGraficos) {\r\n const ctxCiclo = document.getElementById('cycle-chart');\r\n const ctxEvolucion = document.getElementById('general-chart');\r\n \r\n \/\/ Destruir gr\u00e1ficos anteriores si existen\r\n if (cicloChart) cicloChart.destroy();\r\n if (evolucionChart) evolucionChart.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n cicloChart = new Chart(ctxCiclo, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.ciclo.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.ciclo.dolor,\r\n borderColor: '#ef4444',\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: datosGraficos.ciclo.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n evolucionChart = new Chart(ctxEvolucion, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.evolucion.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.evolucion.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.4,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: datosGraficos.evolucion.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para cerrar modal\r\nfunction closePatientModal() {\r\n document.getElementById('patient-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PDF\r\n\/\/ ============================================\r\n\r\nfunction downloadPDF(tipo) {\r\n const pacienteNombre = document.getElementById('charts-title').textContent.replace('\ud83d\udcc8 ', '');\r\n \r\n let mensaje = '';\r\n switch(tipo) {\r\n case 'ultimo-ciclo':\r\n mensaje = `Generando PDF del \u00faltimo ciclo para: ${pacienteNombre}`;\r\n break;\r\n case 'evolucion-global':\r\n mensaje = `Generando evoluci\u00f3n global para: ${pacienteNombre}`;\r\n break;\r\n case 'resumen-ejecutivo':\r\n mensaje = `Generando resumen ejecutivo para: ${pacienteNombre}`;\r\n break;\r\n }\r\n \r\n alert(mensaje);\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N\r\n\/\/ ============================================\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico inicializado');\r\n \r\n \/\/ Inicializar gr\u00e1ficos con primer paciente\r\n updateGraficos('ODV001', pacientes.ODV001);\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('patient-modal');\r\n \r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n closePatientModal();\r\n }\r\n });\r\n \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 \/\/ Configurar iframe de IA\r\n const aiIframe = document.querySelector('#ai-container iframe');\r\n if (aiIframe) {\r\n aiIframe.onload = function() {\r\n console.log('\u2705 Iframe de IA cargado');\r\n };\r\n }\r\n});\r\n<\/script>\r\n\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-675e0b7 e-con-full e-flex e-con e-parent\" data-id=\"675e0b7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-317f672 elementor-widget elementor-widget-html\" data-id=\"317f672\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { id: \"PAC-001\", nombre: \"Mar\u00eda Gonz\u00e1lez\", edad: 58, diagnostico: \"C\u00e1ncer de mama\", ultimaRevision: \"28\/05\/2023\", estado: \"estable\", estadoEmocional: \"Estable\", tratamiento: \"Quimioterapia - Ciclo 4\/6\" },\r\n { id: \"PAC-002\", nombre: \"Carlos Ruiz\", edad: 62, diagnostico: \"C\u00e1ncer de pulm\u00f3n\", ultimaRevision: \"27\/05\/2023\", estado: \"observacion\", estadoEmocional: \"Ansioso\", tratamiento: \"Quimioterapia - Ciclo 2\/6\" },\r\n { id: \"PAC-003\", nombre: \"Ana L\u00f3pez\", edad: 45, diagnostico: \"C\u00e1ncer de colon\", ultimaRevision: \"26\/05\/2023\", estado: \"estable\", estadoEmocional: \"Positivo\", tratamiento: \"Quimioterapia - Ciclo 5\/6\" },\r\n { id: \"PAC-004\", nombre: \"Javier Mart\u00ednez\", edad: 70, diagnostico: \"C\u00e1ncer de pr\u00f3stata\", ultimaRevision: \"25\/05\/2023\", estado: \"critico\", estadoEmocional: \"Deprimido\", tratamiento: \"Quimioterapia - Ciclo 3\/6\" },\r\n { id: \"PAC-005\", nombre: \"Laura S\u00e1nchez\", edad: 52, diagnostico: \"C\u00e1ncer de ovario\", ultimaRevision: \"24\/05\/2023\", estado: \"estable\", estadoEmocional: \"Estable\", tratamiento: \"Quimioterapia - Ciclo 4\/6\" },\r\n { id: \"PAC-006\", nombre: \"Pedro D\u00edaz\", edad: 61, diagnostico: \"Linfoma\", ultimaRevision: \"23\/05\/2023\", estado: \"observacion\", estadoEmocional: \"Preocupado\", tratamiento: \"Quimioterapia - Ciclo 1\/6\" },\r\n { id: \"PAC-007\", nombre: \"Elena Castro\", edad: 48, diagnostico: \"C\u00e1ncer de mama\", ultimaRevision: \"22\/05\/2023\", estado: \"estable\", estadoEmocional: \"Optimista\", tratamiento: \"Quimioterapia - Ciclo 6\/6\" },\r\n { id: \"PAC-008\", nombre: \"Miguel \u00c1ngel Torres\", edad: 55, diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", ultimaRevision: \"21\/05\/2023\", estado: \"critico\", estadoEmocional: \"Angustiado\", tratamiento: \"Quimioterapia - Ciclo 2\/6\" },\r\n { id: \"PAC-009\", nombre: \"Isabel Ram\u00edrez\", edad: 67, diagnostico: \"C\u00e1ncer de est\u00f3mago\", ultimaRevision: \"20\/05\/2023\", estado: \"observacion\", estadoEmocional: \"Inseguro\", tratamiento: \"Quimioterapia - Ciclo 3\/6\" },\r\n { id: \"PAC-010\", nombre: \"Francisco Navarro\", edad: 59, diagnostico: \"C\u00e1ncer de vejiga\", ultimaRevision: \"19\/05\/2023\", estado: \"estable\", estadoEmocional: \"Tranquilo\", tratamiento: \"Quimioterapia - Ciclo 5\/6\" }\r\n ];\r\n \r\n \/\/ Cargar pacientes en la tabla\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n \r\n function cargarPacientes(listaPacientes) {\r\n tablaPacientes.innerHTML = '';\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = 'Estable';\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = 'Observaci\u00f3n';\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = 'Prioritario';\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${paciente.estadoEmocional}<\/span><\/td>\r\n <td><button class=\"descargar-btn\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n \/\/ A\u00f1adir evento para seleccionar paciente\r\n fila.addEventListener('click', function() {\r\n seleccionarPaciente(paciente);\r\n });\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n }\r\n \r\n \/\/ Cargar pacientes al iniciar\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente\r\n function seleccionarPaciente(paciente) {\r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Resaltar fila seleccionada\r\n const filas = document.querySelectorAll('#tablaPacientes tr');\r\n filas.forEach(fila => fila.style.backgroundColor = '');\r\n \r\n const filaSeleccionada = document.querySelector(`tr[data-id=\"${paciente.id}\"]`);\r\n if (filaSeleccionada) {\r\n filaSeleccionada.style.backgroundColor = 'var(--azul-suave)';\r\n }\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ Inicializar con primer paciente seleccionado\r\n setTimeout(() => {\r\n seleccionarPaciente(pacientes[0]);\r\n }, 500);\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-f96b17f e-con-full e-flex e-con e-parent\" data-id=\"f96b17f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-946e9e6 elementor-widget elementor-widget-html\" data-id=\"946e9e6\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Cargar pacientes en la tabla\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n function cargarPacientes(listaPacientes) {\r\n tablaPacientes.innerHTML = '';\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = 'Estable';\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = 'Observaci\u00f3n';\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = 'Prioritario';\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${paciente.estadoEmocional}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\"\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ Inicializar con primer paciente seleccionado\r\n cargarPacientes(pacientes);\r\n setTimeout(() => {\r\n seleccionarPaciente(pacientes[0]);\r\n }, 500);\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-23def1d e-con-full e-flex e-con e-parent\" data-id=\"23def1d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e66e389 elementor-widget elementor-widget-html\" data-id=\"e66e389\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n \/\/ Cargar pacientes en la tabla - FUNCI\u00d3N CORREGIDA\r\n function cargarPacientes(listaPacientes) {\r\n console.log(\"Cargando pacientes...\", listaPacientes.length);\r\n tablaPacientes.innerHTML = '';\r\n \r\n if (listaPacientes.length === 0) {\r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `<td colspan=\"7\" style=\"text-align: center; padding: 40px;\">No se encontraron pacientes<\/td>`;\r\n tablaPacientes.appendChild(fila);\r\n return;\r\n }\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${estadoTexto}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\" - FUNCI\u00d3N CORREGIDA\r\n setTimeout(() => {\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n if (fila.dataset.id) {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n }\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n console.log(\"Abriendo ficha de:\", paciente.nombre);\r\n \r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n console.log(\"Seleccionando paciente:\", paciente.nombre);\r\n \r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR LA P\u00c1GINA\r\n window.addEventListener('DOMContentLoaded', (event) => {\r\n console.log('DOM completamente cargado');\r\n \/\/ Cargar los pacientes autom\u00e1ticamente\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Seleccionar el primer paciente por defecto\r\n setTimeout(() => {\r\n if (pacientes.length > 0) {\r\n seleccionarPaciente(pacientes[0]);\r\n }\r\n }, 500);\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-c0ca28f e-con-full e-flex e-con e-parent\" data-id=\"c0ca28f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92033b6 elementor-widget elementor-widget-html\" data-id=\"92033b6\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n \/\/ Cargar pacientes en la tabla - FUNCI\u00d3N CORREGIDA\r\n function cargarPacientes(listaPacientes) {\r\n console.log(\"Cargando pacientes...\", listaPacientes.length);\r\n tablaPacientes.innerHTML = '';\r\n \r\n if (listaPacientes.length === 0) {\r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `<td colspan=\"7\" style=\"text-align: center; padding: 40px;\">No se encontraron pacientes<\/td>`;\r\n tablaPacientes.appendChild(fila);\r\n return;\r\n }\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${estadoTexto}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\" - FUNCI\u00d3N CORREGIDA\r\n setTimeout(() => {\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n if (fila.dataset.id) {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n }\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n console.log(\"Abriendo ficha de:\", paciente.nombre);\r\n \r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n console.log(\"Seleccionando paciente:\", paciente.nombre);\r\n \r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR LA P\u00c1GINA\r\n window.addEventListener('DOMContentLoaded', (event) => {\r\n console.log('DOM completamente cargado');\r\n \/\/ Cargar los pacientes autom\u00e1ticamente\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Seleccionar el primer paciente por defecto\r\n setTimeout(() => {\r\n if (pacientes.length > 0) {\r\n seleccionarPaciente(pacientes[0]);\r\n }\r\n }, 500);\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-0e00579 e-con-full e-flex e-con e-parent\" data-id=\"0e00579\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb5eafa elementor-widget elementor-widget-html\" data-id=\"eb5eafa\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n \/\/ Cargar pacientes en la tabla - FUNCI\u00d3N CORREGIDA\r\n function cargarPacientes(listaPacientes) {\r\n console.log(\"Cargando pacientes...\", listaPacientes.length);\r\n tablaPacientes.innerHTML = '';\r\n \r\n if (listaPacientes.length === 0) {\r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `<td colspan=\"7\" style=\"text-align: center; padding: 40px;\">No se encontraron pacientes<\/td>`;\r\n tablaPacientes.appendChild(fila);\r\n return;\r\n }\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${estadoTexto}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\" - FUNCI\u00d3N CORREGIDA\r\n setTimeout(() => {\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n if (fila.dataset.id) {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n }\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n console.log(\"Abriendo ficha de:\", paciente.nombre);\r\n \r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n console.log(\"Seleccionando paciente:\", paciente.nombre);\r\n \r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR LA P\u00c1GINA\r\n window.addEventListener('DOMContentLoaded', (event) => {\r\n console.log('DOM completamente cargado');\r\n \/\/ Cargar los pacientes autom\u00e1ticamente\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Seleccionar el primer paciente por defecto\r\n setTimeout(() => {\r\n if (pacientes.length > 0) {\r\n seleccionarPaciente(pacientes[0]);\r\n }\r\n }, 500);\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-4a53bd4 e-con-full e-flex e-con e-parent\" data-id=\"4a53bd4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-590c19c elementor-widget elementor-widget-html\" data-id=\"590c19c\" 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 <title>Olas de Vida \u00b7 Panel M\u00e9dico<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n }\r\n \r\n .ov-root {\r\n padding: 20px;\r\n min-height: 100vh;\r\n }\r\n \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 .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-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 .ov-inner {\r\n padding: 24px;\r\n }\r\n \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 }\r\n \r\n .ov-card-value {\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: #94a3b8;\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 .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-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #94a3b8;\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 }\r\n \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: #94a3b8;\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 .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: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .patient-name-btn:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \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 .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 min-height: 350px;\r\n }\r\n \r\n .ov-side-title {\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: #94a3b8;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .pdf-links-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n margin-top: auto;\r\n }\r\n \r\n .ov-btn {\r\n padding: 8px 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: 12px;\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 gap: 6px;\r\n width: 100%;\r\n justify-content: center;\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-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 \/* ASISTENTE IA - IFRAME EMBEBIDO *\/\r\n .ai-iframe-container {\r\n flex-grow: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n margin-top: 8px;\r\n position: relative;\r\n background: rgba(15, 23, 42, 0.5);\r\n }\r\n \r\n .ai-iframe-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n display: block;\r\n min-height: 250px;\r\n }\r\n \r\n \/* CONTENEDOR DE 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: 12px;\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: #94a3b8;\r\n margin-bottom: 8px;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n .chart-canvas-container {\r\n flex-grow: 1;\r\n position: relative;\r\n min-height: 120px;\r\n }\r\n \r\n .chart-canvas {\r\n width: 100% !important;\r\n height: 100% !important;\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 .stat-box {\r\n flex: 1;\r\n padding: 6px;\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.8;\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 #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-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: #94a3b8;\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .modal-close:hover {\r\n background: #334155;\r\n color: #e2e8f0;\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 .ficha-content h3 {\r\n color: #93c5fd;\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 h3:first-child {\r\n margin-top: 0;\r\n }\r\n \r\n .ficha-content p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\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: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n @media (max-width: 768px) {\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 min-height: 320px;\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 .ai-iframe-container iframe {\r\n min-height: 200px;\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 <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"ov-root\">\r\n <div class=\"ov-wrapper\">\r\n\r\n \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 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n \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 \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 sus 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 \r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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 \r\n <div class=\"ov-bottom-layout\">\r\n\r\n \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 <button class=\"ov-btn\" onclick=\"downloadPDF('ultimo-ciclo')\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/button>\r\n \r\n <button class=\"ov-btn\" onclick=\"downloadPDF('evolucion-global')\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/button>\r\n \r\n <button class=\"ov-btn ov-btn-outline\" onclick=\"downloadPDF('resumen-ejecutivo')\">\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 informe\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \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=\"ai-iframe-container\" id=\"ai-container\">\r\n <iframe \r\n src=\"https:\/\/www.jotform.com\/app\/230155277271048\"\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 <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n \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 \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"cycle-chart-title\">\u00daltimo ciclo (dolor\/\u00e1nimo)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"cycle-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"general-chart-title\">Evoluci\u00f3n general (semanas)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"general-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \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\r\n<div id=\"patient-modal\">\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=\"closePatientModal()\">\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 \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE PACIENTES CON GR\u00c1FICOS\r\n\/\/ ============================================\r\nconst pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n ficha: `\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 graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14'],\r\n dolor: [6, 7, 8, 7, 8, 9],\r\n animo: [7, 7, 6, 7, 7, 8]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6'],\r\n dolor: [8, 7, 6, 7, 6, 7],\r\n animo: [5, 6, 6, 7, 7, 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 ficha: `\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', 'D\u00eda 10'],\r\n dolor: [5, 6, 6, 5, 6],\r\n animo: [3, 2, 3, 4, 3]\r\n },\r\n evolucion: {\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 nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV003<\/h3><p>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/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, 6, 5, 6],\r\n animo: [6, 7, 7, 7]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [6, 5, 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 \/\/ ... m\u00e1s pacientes con datos b\u00e1sicos\r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>C\u00e1ncer de pulm\u00f3n \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>C\u00e1ncer de p\u00e1ncreas \u00b7 Dolor intenso<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>C\u00e1ncer de mama \u00b7 Fiebre 38.8\u00b0C<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>C\u00e1ncer de pr\u00f3stata \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/p>`,\r\n graficos: defaultGraficos()\r\n }\r\n};\r\n\r\n\/\/ Funci\u00f3n para gr\u00e1ficos por defecto\r\nfunction defaultGraficos() {\r\n return {\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 evolucion: {\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\/\/ ============================================\r\n\/\/ VARIABLES PARA GR\u00c1FICOS\r\n\/\/ ============================================\r\nlet cicloChart = null;\r\nlet evolucionChart = null;\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PRINCIPALES\r\n\/\/ ============================================\r\n\r\n\/\/ Funci\u00f3n para abrir modal Y actualizar gr\u00e1ficos\r\nfunction openPatientModal(pacienteId) {\r\n console.log(\"Abriendo:\", pacienteId);\r\n \r\n const paciente = pacientes[pacienteId];\r\n if (!paciente) {\r\n alert(\"Paciente no encontrado\");\r\n return;\r\n }\r\n \r\n \/\/ 1. ACTUALIZAR MODAL\r\n document.getElementById('modal-title').textContent = `${paciente.nombre} \u00b7 ${pacienteId}`;\r\n document.getElementById('patient-info').innerHTML = paciente.ficha;\r\n document.getElementById('patient-modal').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ 2. ACTUALIZAR GR\u00c1FICOS\r\n updateGraficos(pacienteId, paciente);\r\n}\r\n\r\n\/\/ Funci\u00f3n para actualizar gr\u00e1ficos\r\nfunction updateGraficos(pacienteId, paciente) {\r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('charts-title').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('charts-subtitle').textContent = `ID: ${pacienteId}`;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n const stats = paciente.graficos.stats;\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 t\u00edtulos de gr\u00e1ficos\r\n document.getElementById('cycle-chart-title').textContent = `\u00daltimo ciclo \u00b7 Dolor: ${pacienteId === 'ODV001' ? '9\/10' : '6\/10'}`;\r\n document.getElementById('general-chart-title').textContent = `Evoluci\u00f3n \u00b7 ${paciente.nombre.split(' ')[0]}`;\r\n \r\n \/\/ Crear\/actualizar gr\u00e1ficos\r\n crearGraficos(paciente.graficos);\r\n}\r\n\r\n\/\/ Funci\u00f3n para crear gr\u00e1ficos con Chart.js\r\nfunction crearGraficos(datosGraficos) {\r\n const ctxCiclo = document.getElementById('cycle-chart');\r\n const ctxEvolucion = document.getElementById('general-chart');\r\n \r\n \/\/ Destruir gr\u00e1ficos anteriores si existen\r\n if (cicloChart) cicloChart.destroy();\r\n if (evolucionChart) evolucionChart.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n cicloChart = new Chart(ctxCiclo, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.ciclo.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.ciclo.dolor,\r\n borderColor: '#ef4444',\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: datosGraficos.ciclo.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n evolucionChart = new Chart(ctxEvolucion, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.evolucion.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.evolucion.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.4,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: datosGraficos.evolucion.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para cerrar modal\r\nfunction closePatientModal() {\r\n document.getElementById('patient-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PDF\r\n\/\/ ============================================\r\n\r\nfunction downloadPDF(tipo) {\r\n const pacienteNombre = document.getElementById('charts-title').textContent.replace('\ud83d\udcc8 ', '');\r\n \r\n let mensaje = '';\r\n switch(tipo) {\r\n case 'ultimo-ciclo':\r\n mensaje = `Generando PDF del \u00faltimo ciclo para: ${pacienteNombre}`;\r\n break;\r\n case 'evolucion-global':\r\n mensaje = `Generando evoluci\u00f3n global para: ${pacienteNombre}`;\r\n break;\r\n case 'resumen-ejecutivo':\r\n mensaje = `Generando resumen ejecutivo para: ${pacienteNombre}`;\r\n break;\r\n }\r\n \r\n alert(mensaje);\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N\r\n\/\/ ============================================\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico inicializado');\r\n \r\n \/\/ Inicializar gr\u00e1ficos con primer paciente\r\n updateGraficos('ODV001', pacientes.ODV001);\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('patient-modal');\r\n \r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n closePatientModal();\r\n }\r\n });\r\n \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 \/\/ Configurar iframe de IA\r\n const aiIframe = document.querySelector('#ai-container iframe');\r\n if (aiIframe) {\r\n aiIframe.onload = function() {\r\n console.log('\u2705 Iframe de IA cargado');\r\n };\r\n }\r\n});\r\n<\/script>\r\n\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-ce9845c e-con-full e-flex e-con e-parent\" data-id=\"ce9845c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-881a859 elementor-widget elementor-widget-html\" data-id=\"881a859\" 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>Videoteca \u00b7 Olas de Vida<\/title>\r\n <style>\r\n \/* CONTENEDOR GENERAL *\/\r\n .ov-video-admin{\r\n font-family:system-ui,-apple-system,sans-serif;\r\n color:#e5e7eb;\r\n padding: 20px;\r\n background: #0f172a;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* LAYOUT PRINCIPAL: REPRODUCTOR + LISTA *\/\r\n .ov-video-shell{\r\n background:radial-gradient(circle at top,#0f172a,#020617 60%);\r\n border-radius:1.8rem;\r\n border:1px solid #1f2937;\r\n padding:1.5rem 1.7rem;\r\n box-shadow:0 20px 60px rgba(0,0,0,.65);\r\n max-width:1200px;\r\n margin:0 auto;\r\n }\r\n\r\n .ov-video-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:1rem;\r\n }\r\n .ov-video-title{\r\n font-size:1.8rem;\r\n font-weight:800;\r\n background:linear-gradient(90deg,#0ea5e9,#7dd3fc);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n .ov-video-sub{\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n\r\n \/* BARRA DE B\u00daSQUEDA *\/\r\n .ov-search-container{\r\n margin:0.8rem 0;\r\n display:flex;\r\n gap:0.5rem;\r\n }\r\n .ov-search-input{\r\n flex:1;\r\n padding:0.6rem 1rem;\r\n border-radius:0.9rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.9rem;\r\n }\r\n .ov-search-input:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n\r\n \/* ICONO ENGRANAJE (ADMIN) *\/\r\n .ov-gear-btn{\r\n width:38px;\r\n height:38px;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n cursor:pointer;\r\n transition:.18s;\r\n }\r\n .ov-gear-btn:hover{\r\n background:#0ea5e9;\r\n color:#020617;\r\n transform:translateY(-1px);\r\n }\r\n\r\n \/* GRID PRINCIPAL: PLAYER + LISTA *\/\r\n .ov-main-grid{\r\n display:grid;\r\n grid-template-columns:2fr 1.1fr;\r\n gap:1.2rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-main-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* PLAYER *\/\r\n .ov-player{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:1rem;\r\n animation:fadeIn 0.3s ease;\r\n }\r\n .ov-player-iframe{\r\n width:100%;\r\n aspect-ratio:16\/9;\r\n border-radius:1rem;\r\n border:none;\r\n background:#000;\r\n }\r\n .ov-player-meta{\r\n margin-top:0.8rem;\r\n }\r\n .ov-player-title{\r\n font-size:1rem;\r\n font-weight:600;\r\n }\r\n .ov-player-desc{\r\n margin-top:0.25rem;\r\n font-size:.85rem;\r\n color:#9ca3af;\r\n }\r\n\r\n \/* LISTA DE V\u00cdDEOS *\/\r\n .ov-list{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n max-height:460px;\r\n overflow:auto;\r\n }\r\n .ov-list-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-bottom:0.8rem;\r\n }\r\n .ov-list-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n }\r\n .ov-list-count{\r\n font-size:.75rem;\r\n color:#6b7280;\r\n background:#111827;\r\n padding:0.2rem 0.6rem;\r\n border-radius:1rem;\r\n }\r\n .ov-list-item{\r\n display:flex;\r\n flex-direction:row;\r\n gap:0.4rem;\r\n padding:0.4rem 0.35rem;\r\n border-radius:0.6rem;\r\n cursor:pointer;\r\n align-items:flex-start;\r\n transition:all 0.2s ease;\r\n }\r\n .ov-list-item:hover{\r\n background:rgba(14,165,233,.18);\r\n transform:translateX(4px);\r\n }\r\n .ov-list-item.active{\r\n background:rgba(14,165,233,.32);\r\n border-left:3px solid #0ea5e9;\r\n }\r\n .ov-thumb{\r\n width:80px;\r\n height:45px;\r\n border-radius:0.4rem;\r\n background:#111827;\r\n flex-shrink:0;\r\n overflow:hidden;\r\n position:relative;\r\n }\r\n .ov-thumb img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n .ov-thumb::after{\r\n content:\"\u25b6\";\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n font-size:.7rem;\r\n color:white;\r\n opacity:0;\r\n transition:opacity 0.2s;\r\n }\r\n .ov-list-item:hover .ov-thumb::after{\r\n opacity:1;\r\n }\r\n .ov-list-text{\r\n flex:1;\r\n }\r\n .ov-list-item-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n }\r\n .ov-list-item-desc{\r\n font-size:.78rem;\r\n color:#9ca3af;\r\n display:-webkit-box;\r\n -webkit-line-clamp:2;\r\n -webkit-box-orient:vertical;\r\n overflow:hidden;\r\n }\r\n\r\n \/* TOAST *\/\r\n #ov-toast{\r\n position:fixed;\r\n bottom:24px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:#10b981;\r\n color:#01110a;\r\n padding:0.6rem 1.5rem;\r\n border-radius:999px;\r\n font-size:.85rem;\r\n font-weight:600;\r\n z-index:9999;\r\n opacity:0;\r\n transition:all .25s;\r\n box-shadow:0 8px 25px rgba(16,185,129,.3);\r\n }\r\n #ov-toast.show{\r\n opacity:1;\r\n transform:translateX(-50%) translateY(-8px);\r\n }\r\n #ov-toast.error{\r\n background:#ef4444;\r\n color:#f9fafb;\r\n }\r\n\r\n \/* OVERLAY GENERAL (LOGIN + PANEL) *\/\r\n .ov-overlay{\r\n position:fixed;\r\n inset:0;\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n background:rgba(15,23,42,.95);\r\n backdrop-filter:blur(8px);\r\n z-index:9990;\r\n padding:1rem;\r\n animation:fadeIn 0.3s ease;\r\n }\r\n\r\n \/* TARJETA LOGIN ADMIN *\/\r\n .ov-login-card{\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.8rem 1.5rem;\r\n width:100%;\r\n max-width:380px;\r\n box-shadow:0 24px 70px rgba(0,0,0,.8);\r\n text-align:center;\r\n animation:slideUp 0.4s ease;\r\n }\r\n .ov-login-title{\r\n font-size:1.1rem;\r\n font-weight:700;\r\n }\r\n .ov-login-sub{\r\n margin-top:0.3rem;\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n .ov-login-input{\r\n width:100%;\r\n margin-top:1.1rem;\r\n padding:0.7rem 0.9rem;\r\n border-radius:0.9rem;\r\n border:2px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.9rem;\r\n }\r\n .ov-login-input:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-login-btns{\r\n margin-top:1rem;\r\n display:flex;\r\n gap:0.6rem;\r\n justify-content:center;\r\n }\r\n .ov-btn{\r\n padding:0.6rem 1.3rem;\r\n border-radius:999px;\r\n border:none;\r\n cursor:pointer;\r\n font-size:.85rem;\r\n font-weight:600;\r\n transition:all 0.2s;\r\n }\r\n .ov-btn:hover{\r\n transform:translateY(-1px);\r\n }\r\n .ov-btn:active{\r\n transform:translateY(0);\r\n }\r\n .ov-btn-primary{background:#0ea5e9;color:#031016;}\r\n .ov-btn-secondary{background:#020617;color:#e5e7eb;border:1px solid #4b5563;}\r\n .ov-login-error{\r\n margin-top:0.6rem;\r\n min-height:1.1rem;\r\n font-size:.8rem;\r\n color:#fca5a5;\r\n transition:opacity 0.3s;\r\n }\r\n\r\n \/* PANEL ADMIN *\/\r\n .ov-admin-panel{\r\n display:none;\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.4rem 1.4rem;\r\n width:100%;\r\n max-width:1100px;\r\n max-height:90vh;\r\n box-shadow:0 24px 70px rgba(0,0,0,.9);\r\n overflow:auto;\r\n animation:slideUp 0.4s ease;\r\n }\r\n .ov-admin-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:0.8rem;\r\n }\r\n .ov-admin-title{\r\n font-size:1.2rem;\r\n font-weight:700;\r\n color:#e5e7eb;\r\n }\r\n .ov-admin-badge{\r\n font-size:.8rem;\r\n color:#9ca3af;\r\n }\r\n .ov-admin-tools{\r\n display:flex;\r\n gap:0.5rem;\r\n }\r\n .ov-admin-close{\r\n padding:0.4rem 0.9rem;\r\n border-radius:999px;\r\n border:none;\r\n background:#ef4444;\r\n color:#f9fafb;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-close:hover{\r\n background:#dc2626;\r\n transform:translateY(-1px);\r\n }\r\n .ov-admin-export{\r\n padding:0.4rem 0.9rem;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#1f2937;\r\n color:#e5e7eb;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-export:hover{\r\n background:#374151;\r\n transform:translateY(-1px);\r\n }\r\n\r\n \/* GRID PANEL *\/\r\n .ov-admin-grid{\r\n display:grid;\r\n grid-template-columns:1.6fr 1.1fr;\r\n gap:1rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-admin-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* LISTA ADMIN (TABLA SIMPLE) *\/\r\n .ov-admin-block{\r\n background:#020617;\r\n border-radius:1rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n }\r\n .ov-admin-block-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n margin-bottom:0.4rem;\r\n }\r\n .ov-admin-table-wrap{\r\n max-height:380px;\r\n overflow:auto;\r\n border-radius:0.8rem;\r\n border:1px solid #111827;\r\n }\r\n .ov-admin-table{\r\n width:100%;\r\n border-collapse:collapse;\r\n font-size:.8rem;\r\n }\r\n .ov-admin-table th,\r\n .ov-admin-table td{\r\n padding:0.45rem 0.5rem;\r\n border-bottom:1px solid #111827;\r\n }\r\n .ov-admin-table th{\r\n text-align:left;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n font-size:.7rem;\r\n color:#9ca3af;\r\n position:sticky;\r\n top:0;\r\n background:#020617;\r\n }\r\n .ov-admin-table tr{\r\n transition:background 0.2s;\r\n }\r\n .ov-admin-table tr:hover{\r\n background:rgba(14,165,233,.12);\r\n }\r\n .ov-admin-actions{\r\n display:flex;\r\n gap:0.2rem;\r\n }\r\n .ov-admin-actions button{\r\n border:none;\r\n border-radius:0.4rem;\r\n font-size:.7rem;\r\n padding:0.3rem 0.6rem;\r\n cursor:pointer;\r\n transition:all 0.2s;\r\n display:flex;\r\n align-items:center;\r\n gap:0.2rem;\r\n }\r\n .ov-btn-edit{background:#f59e0b;color:#111827;}\r\n .ov-btn-del{background:#ef4444;color:#f9fafb;}\r\n .ov-btn-up{background:#1e293b;color:#e5e7eb;}\r\n .ov-btn-down{background:#1f2937;color:#e5e7eb;}\r\n .ov-admin-actions button:hover{\r\n transform:translateY(-1px);\r\n filter:brightness(1.1);\r\n }\r\n\r\n \/* FORM ADMIN *\/\r\n .ov-admin-input,\r\n .ov-admin-textarea{\r\n width:100%;\r\n padding:0.65rem 0.75rem;\r\n border-radius:0.7rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.85rem;\r\n margin-bottom:0.6rem;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-textarea{\r\n min-height:80px;\r\n resize:vertical;\r\n }\r\n .ov-admin-input:focus,\r\n .ov-admin-textarea:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-admin-input.error{\r\n border-color:#ef4444;\r\n }\r\n .ov-admin-btn-row{\r\n display:flex;\r\n justify-content:flex-end;\r\n gap:0.5rem;\r\n margin-top:0.4rem;\r\n }\r\n .ov-admin-btn-sm{\r\n padding:0.5rem 1rem;\r\n border-radius:999px;\r\n border:none;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n font-weight:600;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-btn-sm:hover{\r\n transform:translateY(-1px);\r\n }\r\n .ov-admin-btn-secondary{\r\n background:#020617;\r\n color:#e5e7eb;\r\n border:1px solid #4b5563;\r\n }\r\n .ov-admin-btn-primary{\r\n background:#0ea5e9;\r\n color:#02131e;\r\n }\r\n\r\n \/* IMPORTAR *\/\r\n .ov-import-container{\r\n margin-top:1rem;\r\n padding:1rem;\r\n border:1px dashed #4b5563;\r\n border-radius:0.8rem;\r\n background:rgba(30,41,59,.3);\r\n }\r\n .ov-import-title{\r\n font-size:.85rem;\r\n color:#9ca3af;\r\n margin-bottom:0.5rem;\r\n }\r\n .ov-import-textarea{\r\n width:100%;\r\n min-height:80px;\r\n padding:0.6rem;\r\n border-radius:0.6rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.8rem;\r\n font-family:monospace;\r\n margin-bottom:0.5rem;\r\n resize:vertical;\r\n }\r\n .ov-import-note{\r\n font-size:.7rem;\r\n color:#6b7280;\r\n margin-top:0.3rem;\r\n }\r\n\r\n \/* ANIMACIONES *\/\r\n @keyframes fadeIn{\r\n from{opacity:0;}\r\n to{opacity:1;}\r\n }\r\n @keyframes slideUp{\r\n from{\r\n opacity:0;\r\n transform:translateY(20px);\r\n }\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n }\r\n\r\n \/* ESTADOS VAC\u00cdOS *\/\r\n .ov-empty-state{\r\n text-align:center;\r\n padding:2rem 1rem;\r\n color:#6b7280;\r\n }\r\n .ov-empty-icon{\r\n font-size:2rem;\r\n margin-bottom:0.5rem;\r\n opacity:0.5;\r\n }\r\n .ov-empty-text{\r\n font-size:.9rem;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"ov-video-admin\">\r\n \r\n <div id=\"ov-toast\"><\/div>\r\n\r\n \r\n <div class=\"ov-video-shell\">\r\n <div class=\"ov-video-header\">\r\n <div>\r\n <div class=\"ov-video-title\">Videoteca \u00b7 Olas de Vida<\/div>\r\n <div class=\"ov-video-sub\">Selecciona un v\u00eddeo para verlo. El engranaje es solo para administraci\u00f3n.<\/div>\r\n <\/div>\r\n <button class=\"ov-gear-btn\" id=\"ov-open-admin\" title=\"Panel de control\">\r\n \u2699\ufe0f\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-search-container\">\r\n <input type=\"text\" class=\"ov-search-input\" id=\"ov-search-input\" placeholder=\"Buscar v\u00eddeos por t\u00edtulo o descripci\u00f3n...\" \/>\r\n <\/div>\r\n\r\n <div class=\"ov-main-grid\">\r\n \r\n <div class=\"ov-player\">\r\n <iframe\r\n id=\"ov-player-frame\"\r\n class=\"ov-player-iframe\"\r\n src=\"\"\r\n allowfullscreen\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n title=\"Reproductor de video\"\r\n ><\/iframe>\r\n <div class=\"ov-player-meta\">\r\n <div class=\"ov-player-title\" id=\"ov-player-title\">Selecciona un v\u00eddeo de la lista<\/div>\r\n <div class=\"ov-player-desc\" id=\"ov-player-desc\">Haz clic en cualquier v\u00eddeo para comenzar a reproducirlo.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-list\">\r\n <div class=\"ov-list-header\">\r\n <div class=\"ov-list-title\">Listado de v\u00eddeos<\/div>\r\n <div class=\"ov-list-count\" id=\"ov-video-count\">0 videos<\/div>\r\n <\/div>\r\n <div id=\"ov-video-list\" class=\"ov-video-list-container\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-overlay\" id=\"ov-overlay\">\r\n \r\n <div class=\"ov-login-card\" id=\"ov-login-card\">\r\n <div class=\"ov-login-title\">\ud83d\udd10 Acceso administraci\u00f3n<\/div>\r\n <div class=\"ov-login-sub\">Introduce la contrase\u00f1a para abrir el panel de control.<\/div>\r\n <input\r\n type=\"password\"\r\n id=\"ov-admin-pass\"\r\n class=\"ov-login-input\"\r\n placeholder=\"Contrase\u00f1a\"\r\n autocomplete=\"off\"\r\n \/>\r\n <div class=\"ov-login-btns\">\r\n <button class=\"ov-btn ov-btn-secondary\" id=\"ov-login-cancel\">Cancelar<\/button>\r\n <button class=\"ov-btn ov-btn-primary\" id=\"ov-login-submit\">Entrar<\/button>\r\n <\/div>\r\n <div class=\"ov-login-error\" id=\"ov-login-error\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-panel\" id=\"ov-admin-panel\">\r\n <div class=\"ov-admin-header\">\r\n <div>\r\n <div class=\"ov-admin-title\">\ud83c\udfac Panel de control de v\u00eddeos<\/div>\r\n <div class=\"ov-admin-badge\">Olas de Vida \u00b7 Gesti\u00f3n local (navegador)<\/div>\r\n <\/div>\r\n <div class=\"ov-admin-tools\">\r\n <button class=\"ov-admin-export\" id=\"ov-admin-export\">\ud83d\udce5 Exportar<\/button>\r\n <button class=\"ov-admin-close\" id=\"ov-admin-close\">\u2715 Cerrar<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-admin-grid\">\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\">\ud83d\udccb Listado actual (<span id=\"ov-admin-count\">0<\/span> v\u00eddeos)<\/div>\r\n <div class=\"ov-admin-table-wrap\">\r\n <table class=\"ov-admin-table\">\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>T\u00edtulo<\/th>\r\n <th>ID YouTube<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"ov-admin-tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n \r\n \r\n <div class=\"ov-import-container\">\r\n <div class=\"ov-import-title\">\ud83d\udce4 Importar v\u00eddeos (JSON)<\/div>\r\n <textarea class=\"ov-import-textarea\" id=\"ov-import-textarea\" placeholder='[{\"title\":\"Ejemplo\",\"youtubeId\":\"dQw4w9WgXcQ\",\"desc\":\"Descripci\u00f3n...\"}]'><\/textarea>\r\n <div class=\"ov-admin-btn-row\">\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-secondary\" id=\"ov-import-clear\">Limpiar<\/button>\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-primary\" id=\"ov-import-submit\">Importar<\/button>\r\n <\/div>\r\n <div class=\"ov-import-note\">Pega aqu\u00ed el JSON exportado para restaurar los v\u00eddeos.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\" id=\"ov-admin-form-title\">\u2795 A\u00f1adir nuevo v\u00eddeo<\/div>\r\n <input type=\"text\" id=\"ov-admin-title\" class=\"ov-admin-input\" placeholder=\"T\u00edtulo del v\u00eddeo *\" \/>\r\n <input type=\"text\" id=\"ov-admin-url\" class=\"ov-admin-input\" placeholder=\"URL completa o ID de YouTube *\" \/>\r\n <textarea id=\"ov-admin-desc\" class=\"ov-admin-textarea\" placeholder=\"Descripci\u00f3n (opcional)\"><\/textarea>\r\n <div class=\"ov-admin-btn-row\">\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-secondary\" id=\"ov-admin-cancel\">Cancelar<\/button>\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-primary\" id=\"ov-admin-save\">\ud83d\udcbe Guardar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n console.log(\"=== INICIANDO REPRODUCTOR OLAS DE VIDA ===\");\r\n \r\n \/\/ Contrase\u00f1a encriptada (SHA-256 de \"olas2025\")\r\n const PASSWORD_HASH = \"8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918\";\r\n const STORAGE_KEY = \"olasdevida_videos_v2\";\r\n\r\n \/\/ V\u00cdDEOS POR DEFECTO (TEM\u00c1TICA ONCOL\u00d3GICA)\r\n const DEFAULT_VIDEOS = [\r\n {\r\n id: 1,\r\n title: \"Introducci\u00f3n al cuidado oncol\u00f3gico\",\r\n desc: \"Conceptos b\u00e1sicos para pacientes y familias sobre el proceso de tratamiento.\",\r\n youtubeId: \"dQw4w9WgXcQ\" \/\/ REEMPLAZA ESTE ID\r\n },\r\n {\r\n id: 2,\r\n title: \"Nutrici\u00f3n durante la quimioterapia\",\r\n desc: \"Gu\u00eda pr\u00e1ctica de alimentos recomendados y a evitar.\",\r\n youtubeId: \"9bZkp7q19f0\" \/\/ REEMPLAZA ESTE ID\r\n },\r\n {\r\n id: 3,\r\n title: \"Ejercicios de relajaci\u00f3n y respiraci\u00f3n\",\r\n desc: \"T\u00e9cnicas para manejar el estr\u00e9s y la ansiedad durante el tratamiento.\",\r\n youtubeId: \"kJQP7kiw5Fk\" \/\/ REEMPLAZA ESTE ID\r\n }\r\n ];\r\n\r\n let videos = [];\r\n let currentIndex = 0;\r\n let adminLogged = false;\r\n let editIndex = null;\r\n let searchTerm = '';\r\n\r\n \/\/ ---------- FUNCIONES DE SEGURIDAD ----------\r\n async function sha256(message) {\r\n const msgBuffer = new TextEncoder().encode(message);\r\n const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);\r\n const hashArray = Array.from(new Uint8Array(hashBuffer));\r\n return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');\r\n }\r\n\r\n \/\/ ---------- TOAST ----------\r\n function ovToast(msg, isError = false){\r\n const t = document.getElementById(\"ov-toast\");\r\n if(!t) return;\r\n t.textContent = msg;\r\n t.className = isError ? \"error\" : \"\";\r\n t.classList.add(\"show\");\r\n setTimeout(()=>t.classList.remove(\"show\"), 3000);\r\n }\r\n\r\n \/\/ ---------- DATA ----------\r\n function loadVideos(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n const parsed = raw ? JSON.parse(raw) : null;\r\n if(Array.isArray(parsed) && parsed.length){\r\n videos = parsed;\r\n console.log(\"V\u00eddeos cargados desde localStorage:\", videos.length);\r\n }else{\r\n videos = [...DEFAULT_VIDEOS];\r\n console.log(\"Cargados v\u00eddeos por defecto:\", videos.length);\r\n }\r\n }catch(e){\r\n console.error(\"Error cargando videos:\", e);\r\n videos = [...DEFAULT_VIDEOS];\r\n }\r\n updateVideoCount();\r\n }\r\n\r\n function saveVideos(){\r\n try{\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(videos));\r\n renderPlayer();\r\n renderVideoList();\r\n renderAdminTable();\r\n updateVideoCount();\r\n ovToast(\"Cambios guardados correctamente\");\r\n }catch(e){\r\n ovToast(\"Error al guardar\", true);\r\n }\r\n }\r\n\r\n function updateVideoCount(){\r\n const count = document.getElementById(\"ov-video-count\");\r\n const adminCount = document.getElementById(\"ov-admin-count\");\r\n if(count) count.textContent = `${videos.length} video${videos.length !== 1 ? 's' : ''}`;\r\n if(adminCount) adminCount.textContent = videos.length;\r\n }\r\n\r\n \/\/ ---------- VALIDACI\u00d3N Y EXTRACCI\u00d3N ----------\r\n function extractId(url){\r\n if(!url) return \"\";\r\n url = url.trim();\r\n \r\n \/\/ Si ya es un ID v\u00e1lido de YouTube\r\n if(\/^[a-zA-Z0-9_-]{11}$\/.test(url)) return url;\r\n \r\n \/\/ Patrones comunes de YouTube\r\n const patterns = [\r\n \/(?:youtube\\.com\\\/watch\\?v=|youtu\\.be\\\/|youtube\\.com\\\/embed\\\/|youtube\\.com\\\/v\\\/)([a-zA-Z0-9_-]{11})\/,\r\n \/youtube\\.com\\\/watch\\?.*&v=([a-zA-Z0-9_-]{11})\/,\r\n \/youtube\\.com\\\/shorts\\\/([a-zA-Z0-9_-]{11})\/\r\n ];\r\n \r\n for(const pattern of patterns){\r\n const match = url.match(pattern);\r\n if(match) return match[1];\r\n }\r\n \r\n return \"\";\r\n }\r\n\r\n function validateYouTubeUrl(url){\r\n const id = extractId(url);\r\n return {\r\n valid: id.length === 11,\r\n id: id,\r\n message: id ? \"\u2705 ID v\u00e1lido\" : \"\u274c URL de YouTube no v\u00e1lida\"\r\n };\r\n }\r\n\r\n \/\/ ---------- PLAYER P\u00daBLICO ----------\r\n function renderPlayer(){\r\n console.log(\"\ud83d\udd27 renderPlayer() ejecutado. \u00cdndice actual:\", currentIndex);\r\n \r\n const playerFrame = document.getElementById(\"ov-player-frame\");\r\n const playerTitle = document.getElementById(\"ov-player-title\");\r\n const playerDesc = document.getElementById(\"ov-player-desc\");\r\n \r\n if(!videos.length){\r\n playerFrame.src = \"\";\r\n playerTitle.textContent = \"No hay v\u00eddeos disponibles\";\r\n playerDesc.textContent = \"A\u00f1ade v\u00eddeos desde el panel de control.\";\r\n return;\r\n }\r\n\r\n if(currentIndex < 0 || currentIndex >= videos.length) {\r\n currentIndex = 0;\r\n console.log(\"\u00cdndice corregido a 0\");\r\n }\r\n \r\n const video = videos[currentIndex];\r\n console.log(\"Reproduciendo v\u00eddeo:\", video.title);\r\n \r\n \/\/ Construir URL con par\u00e1metros\r\n const videoId = video.youtubeId || video.id;\r\n const autoplay = videos.length > 0 ? \"1\" : \"0\";\r\n playerFrame.src = `https:\/\/www.youtube.com\/embed\/${videoId}?rel=0&autoplay=${autoplay}&modestbranding=1`;\r\n \r\n playerTitle.textContent = video.title || \"(Sin t\u00edtulo)\";\r\n playerDesc.textContent = video.desc || \"Sin descripci\u00f3n\";\r\n }\r\n\r\n \/\/ ---------- RENDER LISTA DE VIDEOS (VERSI\u00d3N CORREGIDA) ----------\r\n function renderVideoList() {\r\n console.log(\"\ud83d\udd27 renderVideoList() ejecutado\");\r\n console.log(\"\ud83d\udce6 Total de v\u00eddeos:\", videos.length);\r\n console.log(\"\ud83c\udfaf \u00cdndice activo:\", currentIndex);\r\n \r\n const listContainer = document.getElementById('ov-video-list');\r\n if (!listContainer) {\r\n console.error('ERROR: No se encontr\u00f3 el contenedor ov-video-list');\r\n return;\r\n }\r\n\r\n if (!videos.length) {\r\n listContainer.innerHTML = `<div class=\"ov-empty-state\">No hay v\u00eddeos cargados.<\/div>`;\r\n return;\r\n }\r\n\r\n let filteredVideos = videos;\r\n if(searchTerm.trim()){\r\n const term = searchTerm.toLowerCase();\r\n filteredVideos = videos.filter(video => \r\n (video.title && video.title.toLowerCase().includes(term)) ||\r\n (video.desc && video.desc.toLowerCase().includes(term))\r\n );\r\n console.log(\"\ud83d\udd0d B\u00fasqueda activa. Resultados:\", filteredVideos.length);\r\n }\r\n \r\n if(!filteredVideos.length){\r\n listContainer.innerHTML = `\r\n <div class=\"ov-empty-state\">\r\n <div class=\"ov-empty-icon\">\ud83d\udced<\/div>\r\n <div class=\"ov-empty-text\">No se encontraron v\u00eddeos con \"${searchTerm}\"<\/div>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n let html = '';\r\n filteredVideos.forEach((video, index) => {\r\n const originalIndex = videos.findIndex(v => v.id === video.id);\r\n const isActive = originalIndex === currentIndex;\r\n \r\n html += `\r\n <div class=\"ov-list-item ${isActive ? 'active' : ''}\" data-index=\"${originalIndex}\">\r\n <div class=\"ov-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/${video.youtubeId}\/hqdefault.jpg\" \r\n alt=\"${video.title || 'Video'}\"\r\n loading=\"lazy\">\r\n <\/div>\r\n <div class=\"ov-list-text\">\r\n <div class=\"ov-list-item-title\">${video.title || '(Sin t\u00edtulo)'}<\/div>\r\n <div class=\"ov-list-item-desc\">${video.desc || ''}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n \r\n listContainer.innerHTML = html;\r\n console.log(\"\u2705 Lista renderizada. Elementos creados:\", filteredVideos.length);\r\n \r\n \/\/ --- ASIGNAR LOS EVENTOS DE CLIC CORRECTAMENTE ---\r\n const items = listContainer.querySelectorAll('.ov-list-item');\r\n console.log(\"\ud83d\uddb1\ufe0f Asignando eventos a\", items.length, \"elementos\");\r\n \r\n items.forEach(item => {\r\n item.addEventListener('click', function() {\r\n const newIndex = parseInt(this.getAttribute('data-index'));\r\n console.log(`\ud83d\uddb1\ufe0f CLIC RECIBIDO! Cambiando al \u00edndice: ${newIndex} - ${videos[newIndex].title}`);\r\n \r\n if (newIndex !== currentIndex) {\r\n currentIndex = newIndex;\r\n renderPlayer(); \/\/ Cambia el v\u00eddeo grande\r\n renderVideoList(); \/\/ Vuelve a pintar la lista para marcar el activo\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ ---------- BUSCADOR ----------\r\n function setupSearch(){\r\n const searchInput = document.getElementById('ov-search-input');\r\n if(!searchInput) return;\r\n \r\n let searchTimeout;\r\n searchInput.addEventListener('input', (e) => {\r\n clearTimeout(searchTimeout);\r\n searchTerm = e.target.value;\r\n \r\n searchTimeout = setTimeout(() => {\r\n console.log(\"\ud83d\udd0d B\u00fasqueda:\", searchTerm);\r\n renderVideoList();\r\n }, 300);\r\n });\r\n \r\n searchInput.addEventListener('search', () => {\r\n searchTerm = '';\r\n renderVideoList();\r\n });\r\n }\r\n\r\n \/\/ ---------- PANEL ADMIN ----------\r\n function renderAdminTable(){\r\n const tbody = document.getElementById(\"ov-admin-tbody\");\r\n if(!tbody) return;\r\n \r\n if(!videos.length){\r\n tbody.innerHTML = `\r\n <tr>\r\n <td colspan=\"4\" style=\"text-align:center; padding:2rem;\">\r\n No hay v\u00eddeos. A\u00f1ade el primero usando el formulario.\r\n <\/td>\r\n <\/tr>\r\n `;\r\n return;\r\n }\r\n \r\n let html = '';\r\n videos.forEach((video, index) => {\r\n html += `\r\n <tr>\r\n <td style=\"color:#9ca3af\">${index + 1}<\/td>\r\n <td style=\"font-weight:500\">${video.title || \"(Sin t\u00edtulo)\"}<\/td>\r\n <td style=\"font-family:monospace;color:#7dd3fc;font-size:.75rem\">${video.youtubeId}<\/td>\r\n <td class=\"ov-admin-actions\">\r\n <button class=\"ov-btn-up\" title=\"Mover arriba\" data-index=\"${index}\">\u2b06<\/button>\r\n <button class=\"ov-btn-down\" title=\"Mover abajo\" data-index=\"${index}\">\u2b07<\/button>\r\n <button class=\"ov-btn-edit\" title=\"Editar\" data-index=\"${index}\">\u270f\ufe0f<\/button>\r\n <button class=\"ov-btn-del\" title=\"Eliminar\" data-index=\"${index}\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n \r\n tbody.innerHTML = html;\r\n \r\n \/\/ A\u00f1adir event listeners a los botones\r\n tbody.querySelectorAll('.ov-btn-edit').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n editVideo(index);\r\n });\r\n });\r\n \r\n tbody.querySelectorAll('.ov-btn-del').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n deleteVideo(index);\r\n });\r\n });\r\n \r\n tbody.querySelectorAll('.ov-btn-up').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n moveVideoUp(index);\r\n });\r\n });\r\n \r\n tbody.querySelectorAll('.ov-btn-down').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n moveVideoDown(index);\r\n });\r\n });\r\n }\r\n\r\n function editVideo(index){\r\n if(index < 0 || index >= videos.length) return;\r\n \r\n editIndex = index;\r\n const video = videos[index];\r\n \r\n document.getElementById(\"ov-admin-form-title\").textContent = \"\u270f\ufe0f Editar v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = video.title || \"\";\r\n document.getElementById(\"ov-admin-url\").value = video.youtubeId || \"\";\r\n document.getElementById(\"ov-admin-desc\").value = video.desc || \"\";\r\n \r\n document.getElementById(\"ov-admin-title\").focus();\r\n }\r\n\r\n function deleteVideo(index){\r\n if(index < 0 || index >= videos.length) return;\r\n \r\n const videoTitle = videos[index].title || \"este v\u00eddeo\";\r\n if(confirm(`\u00bfEst\u00e1s seguro de que quieres eliminar \"${videoTitle}\"?`)){\r\n videos.splice(index, 1);\r\n if(currentIndex >= index && currentIndex > 0){\r\n currentIndex--;\r\n }\r\n saveVideos();\r\n ovToast(\"V\u00eddeo eliminado\");\r\n }\r\n }\r\n\r\n function moveVideoUp(index){\r\n if(index <= 0) return;\r\n \r\n [videos[index], videos[index-1]] = [videos[index-1], videos[index]];\r\n if(currentIndex === index) currentIndex--;\r\n else if(currentIndex === index-1) currentIndex++;\r\n \r\n saveVideos();\r\n }\r\n\r\n function moveVideoDown(index){\r\n if(index >= videos.length - 1) return;\r\n \r\n [videos[index], videos[index+1]] = [videos[index+1], videos[index]];\r\n if(currentIndex === index) currentIndex++;\r\n else if(currentIndex === index+1) currentIndex--;\r\n \r\n saveVideos();\r\n }\r\n\r\n function clearAdminForm(){\r\n editIndex = null;\r\n document.getElementById(\"ov-admin-form-title\").textContent = \"\u2795 A\u00f1adir nuevo v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = \"\";\r\n document.getElementById(\"ov-admin-url\").value = \"\";\r\n document.getElementById(\"ov-admin-desc\").value = \"\";\r\n \r\n document.querySelectorAll('.ov-admin-input').forEach(input => {\r\n input.classList.remove('error');\r\n });\r\n }\r\n\r\n \/\/ ---------- FORM ADMIN ----------\r\n function saveFromAdmin(){\r\n const title = document.getElementById(\"ov-admin-title\").value.trim();\r\n const url = document.getElementById(\"ov-admin-url\").value.trim();\r\n const desc = document.getElementById(\"ov-admin-desc\").value.trim();\r\n \r\n if(!title){\r\n ovToast(\"El t\u00edtulo es obligatorio\", true);\r\n document.getElementById(\"ov-admin-title\").classList.add('error');\r\n document.getElementById(\"ov-admin-title\").focus();\r\n return;\r\n }\r\n \r\n const validation = validateYouTubeUrl(url);\r\n if(!validation.valid){\r\n ovToast(validation.message, true);\r\n document.getElementById(\"ov-admin-url\").classList.add('error');\r\n document.getElementById(\"ov-admin-url\").focus();\r\n return;\r\n }\r\n \r\n const videoData = {\r\n id: editIndex !== null ? videos[editIndex].id : Date.now(),\r\n title: title,\r\n desc: desc,\r\n youtubeId: validation.id\r\n };\r\n \r\n if(editIndex !== null){\r\n videos[editIndex] = videoData;\r\n ovToast(\"V\u00eddeo actualizado\");\r\n } else {\r\n videos.push(videoData);\r\n ovToast(\"V\u00eddeo a\u00f1adido\");\r\n }\r\n \r\n clearAdminForm();\r\n saveVideos();\r\n }\r\n\r\n \/\/ ---------- EXPORT\/IMPORT ----------\r\n function exportVideos(){\r\n const data = JSON.stringify(videos, null, 2);\r\n const blob = new Blob([data], {type: 'application\/json'});\r\n const url = URL.createObjectURL(blob);\r\n \r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `olasdevida-videos-${new Date().toISOString().split('T')[0]}.json`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n \r\n ovToast(\"V\u00eddeos exportados correctamente\");\r\n }\r\n\r\n function importVideos(){\r\n const textarea = document.getElementById('ov-import-textarea');\r\n if(!textarea) return;\r\n \r\n try{\r\n const imported = JSON.parse(textarea.value.trim());\r\n if(!Array.isArray(imported)){\r\n throw new Error(\"El formato debe ser un array de videos\");\r\n }\r\n \r\n const isValid = imported.every(item => \r\n item && typeof item === 'object' && \r\n (item.youtubeId || item.id)\r\n );\r\n \r\n if(!isValid){\r\n throw new Error(\"Estructura de datos inv\u00e1lida\");\r\n }\r\n \r\n if(confirm(`\u00bfImportar ${imported.length} v\u00eddeo(s)? Esto reemplazar\u00e1 la lista actual.`)){\r\n videos = imported.map((item, index) => ({\r\n id: item.id || Date.now() + index,\r\n title: item.title || `Video ${index + 1}`,\r\n desc: item.desc || \"\",\r\n youtubeId: item.youtubeId || item.id || \"\"\r\n }));\r\n \r\n currentIndex = 0;\r\n saveVideos();\r\n textarea.value = \"\";\r\n ovToast(`${imported.length} v\u00eddeos importados`);\r\n }\r\n }catch(e){\r\n ovToast(`Error al importar: ${e.message}`, true);\r\n }\r\n }\r\n\r\n \/\/ ---------- LOGIN + OVERLAY ----------\r\n async function openOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n\r\n overlay.style.display = \"flex\";\r\n document.getElementById(\"ov-login-error\").textContent = \"\";\r\n\r\n if(adminLogged){\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n }else{\r\n document.getElementById(\"ov-login-card\").style.display = \"block\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"none\";\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n passInput.value = \"\";\r\n setTimeout(()=>passInput.focus(), 200);\r\n }\r\n }\r\n\r\n function closeOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n overlay.style.display = \"none\";\r\n clearAdminForm();\r\n }\r\n\r\n async function handleLogin(){\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n const error = document.getElementById(\"ov-login-error\");\r\n if(!passInput || !error) return;\r\n\r\n const inputHash = await sha256(passInput.value.trim());\r\n if(inputHash === PASSWORD_HASH){\r\n adminLogged = true;\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n ovToast(\"Acceso al panel concedido\");\r\n }else{\r\n error.textContent = \"Contrase\u00f1a incorrecta\";\r\n passInput.value = \"\";\r\n passInput.focus();\r\n }\r\n }\r\n\r\n \/\/ ---------- INIT ----------\r\n document.addEventListener(\"DOMContentLoaded\", function(){\r\n console.log(\"\u2705 DOM cargado. Inicializando reproductor...\");\r\n \r\n loadVideos();\r\n renderPlayer();\r\n renderVideoList();\r\n setupSearch();\r\n\r\n document.getElementById(\"ov-open-admin\").addEventListener(\"click\", openOverlay);\r\n document.getElementById(\"ov-login-submit\").addEventListener(\"click\", handleLogin);\r\n document.getElementById(\"ov-login-cancel\").addEventListener(\"click\", closeOverlay);\r\n document.getElementById(\"ov-admin-pass\").addEventListener(\"keydown\", e=>{\r\n if(e.key===\"Enter\") handleLogin();\r\n });\r\n document.getElementById(\"ov-admin-close\").addEventListener(\"click\", closeOverlay);\r\n document.getElementById(\"ov-admin-save\").addEventListener(\"click\", saveFromAdmin);\r\n document.getElementById(\"ov-admin-cancel\").addEventListener(\"click\", clearAdminForm);\r\n document.getElementById(\"ov-admin-export\").addEventListener(\"click\", exportVideos);\r\n document.getElementById(\"ov-import-submit\").addEventListener(\"click\", importVideos);\r\n document.getElementById(\"ov-import-clear\").addEventListener(\"click\", function(){\r\n document.getElementById('ov-import-textarea').value = '';\r\n });\r\n\r\n document.addEventListener('keydown', function(e){\r\n if(e.key === 'Escape' && document.getElementById(\"ov-overlay\").style.display === 'flex'){\r\n closeOverlay();\r\n }\r\n });\r\n\r\n document.getElementById(\"ov-overlay\").addEventListener(\"click\", function(e){\r\n if(e.target === this){\r\n closeOverlay();\r\n }\r\n });\r\n \r\n console.log(\"\ud83c\udf89 Reproductor completamente inicializado y listo.\");\r\n console.log(\"\ud83d\udca1 Consejo: Abre la Consola (F12) para ver mensajes de depuraci\u00f3n.\");\r\n });\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-3cbac8f e-con-full e-flex e-con e-parent\" data-id=\"3cbac8f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a846a9 elementor-widget elementor-widget-html\" data-id=\"0a846a9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!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>Videoteca \u00b7 Olas de Vida<\/title>\r\n <style>\r\n \/* CONTENEDOR GENERAL *\/\r\n .ov-video-admin{\r\n font-family:system-ui,-apple-system,sans-serif;\r\n color:#e5e7eb;\r\n padding: 20px;\r\n background: #0f172a;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* LAYOUT PRINCIPAL: REPRODUCTOR + LISTA *\/\r\n .ov-video-shell{\r\n background:radial-gradient(circle at top,#0f172a,#020617 60%);\r\n border-radius:1.8rem;\r\n border:1px solid #1f2937;\r\n padding:1.5rem 1.7rem;\r\n box-shadow:0 20px 60px rgba(0,0,0,.65);\r\n max-width:1200px;\r\n margin:0 auto;\r\n }\r\n\r\n .ov-video-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:1rem;\r\n }\r\n .ov-video-title{\r\n font-size:1.8rem;\r\n font-weight:800;\r\n background:linear-gradient(90deg,#0ea5e9,#7dd3fc);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n .ov-video-sub{\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n\r\n \/* ICONO ENGRANAJE (ADMIN) *\/\r\n .ov-gear-btn{\r\n width:38px;\r\n height:38px;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n cursor:pointer;\r\n transition:.18s;\r\n }\r\n .ov-gear-btn:hover{\r\n background:#0ea5e9;\r\n color:#020617;\r\n transform:translateY(-1px);\r\n }\r\n\r\n \/* GRID PRINCIPAL: PLAYER + LISTA *\/\r\n .ov-main-grid{\r\n display:grid;\r\n grid-template-columns:2fr 1.1fr;\r\n gap:1.2rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-main-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* PLAYER *\/\r\n .ov-player{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:1rem;\r\n }\r\n .ov-player-iframe{\r\n width:100%;\r\n aspect-ratio:16\/9;\r\n border-radius:1rem;\r\n border:none;\r\n background:#000;\r\n }\r\n .ov-player-meta{\r\n margin-top:0.8rem;\r\n }\r\n .ov-player-title{\r\n font-size:1rem;\r\n font-weight:600;\r\n }\r\n .ov-player-desc{\r\n margin-top:0.25rem;\r\n font-size:.85rem;\r\n color:#9ca3af;\r\n }\r\n\r\n \/* LISTA DE V\u00cdDEOS *\/\r\n .ov-list{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n max-height:460px;\r\n overflow:auto;\r\n }\r\n .ov-list-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n margin-bottom:0.4rem;\r\n }\r\n .ov-list-item{\r\n display:flex;\r\n flex-direction:row;\r\n gap:0.4rem;\r\n padding:0.4rem 0.35rem;\r\n border-radius:0.6rem;\r\n cursor:pointer;\r\n align-items:flex-start;\r\n transition: background-color 0.2s;\r\n }\r\n .ov-list-item:hover{\r\n background:rgba(14,165,233,.18);\r\n }\r\n .ov-list-item.active{\r\n background:rgba(14,165,233,.32);\r\n border-left:3px solid #0ea5e9;\r\n }\r\n .ov-thumb{\r\n width:80px;\r\n height:45px;\r\n border-radius:0.4rem;\r\n background:#111827;\r\n flex-shrink:0;\r\n overflow:hidden;\r\n }\r\n .ov-thumb img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n .ov-list-text{\r\n flex:1;\r\n }\r\n .ov-list-item-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n }\r\n .ov-list-item-desc{\r\n font-size:.78rem;\r\n color:#9ca3af;\r\n }\r\n\r\n \/* TOAST *\/\r\n #ov-toast{\r\n position:fixed;\r\n bottom:24px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:#10b981;\r\n color:#01110a;\r\n padding:0.6rem 1.5rem;\r\n border-radius:999px;\r\n font-size:.85rem;\r\n font-weight:600;\r\n z-index:9999;\r\n opacity:0;\r\n transition:all .25s;\r\n }\r\n #ov-toast.show{\r\n opacity:1;\r\n transform:translateX(-50%) translateY(-8px);\r\n }\r\n\r\n \/* OVERLAY GENERAL (LOGIN + PANEL) *\/\r\n .ov-overlay{\r\n position:fixed;\r\n inset:0;\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n background:rgba(15,23,42,.92);\r\n z-index:9990;\r\n padding:1rem;\r\n }\r\n\r\n \/* TARJETA LOGIN ADMIN *\/\r\n .ov-login-card{\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.8rem 1.5rem;\r\n width:100%;\r\n max-width:380px;\r\n box-shadow:0 24px 70px rgba(0,0,0,.8);\r\n text-align:center;\r\n }\r\n .ov-login-title{\r\n font-size:1.1rem;\r\n font-weight:700;\r\n }\r\n .ov-login-sub{\r\n margin-top:0.3rem;\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n .ov-login-input{\r\n width:100%;\r\n margin-top:1.1rem;\r\n padding:0.7rem 0.9rem;\r\n border-radius:0.9rem;\r\n border:2px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n }\r\n .ov-login-input:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-login-btns{\r\n margin-top:1rem;\r\n display:flex;\r\n gap:0.6rem;\r\n justify-content:center;\r\n }\r\n .ov-btn{\r\n padding:0.6rem 1.3rem;\r\n border-radius:999px;\r\n border:none;\r\n cursor:pointer;\r\n font-size:.85rem;\r\n font-weight:600;\r\n }\r\n .ov-btn-primary{background:#0ea5e9;color:#031016;}\r\n .ov-btn-secondary{background:#020617;color:#e5e7eb;border:1px solid #4b5563;}\r\n .ov-login-error{\r\n margin-top:0.6rem;\r\n min-height:1.1rem;\r\n font-size:.8rem;\r\n color:#fca5a5;\r\n }\r\n\r\n \/* PANEL ADMIN *\/\r\n .ov-admin-panel{\r\n display:none;\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.4rem 1.4rem;\r\n width:100%;\r\n max-width:1100px;\r\n max-height:90vh;\r\n box-shadow:0 24px 70px rgba(0,0,0,.9);\r\n overflow:auto;\r\n }\r\n .ov-admin-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:0.8rem;\r\n }\r\n .ov-admin-title{\r\n font-size:1.2rem;\r\n font-weight:700;\r\n color:#e5e7eb;\r\n }\r\n .ov-admin-badge{\r\n font-size:.8rem;\r\n color:#9ca3af;\r\n }\r\n .ov-admin-close{\r\n padding:0.4rem 0.9rem;\r\n border-radius:999px;\r\n border:none;\r\n background:#ef4444;\r\n color:#f9fafb;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n }\r\n\r\n \/* GRID PANEL *\/\r\n .ov-admin-grid{\r\n display:grid;\r\n grid-template-columns:1.6fr 1.1fr;\r\n gap:1rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-admin-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* LISTA ADMIN (TABLA SIMPLE) *\/\r\n .ov-admin-block{\r\n background:#020617;\r\n border-radius:1rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n }\r\n .ov-admin-block-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n margin-bottom:0.4rem;\r\n }\r\n .ov-admin-table-wrap{\r\n max-height:380px;\r\n overflow:auto;\r\n border-radius:0.8rem;\r\n border:1px solid #111827;\r\n }\r\n .ov-admin-table{\r\n width:100%;\r\n border-collapse:collapse;\r\n font-size:.8rem;\r\n }\r\n .ov-admin-table th,\r\n .ov-admin-table td{\r\n padding:0.45rem 0.5rem;\r\n border-bottom:1px solid #111827;\r\n }\r\n .ov-admin-table th{\r\n text-align:left;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n font-size:.7rem;\r\n color:#9ca3af;\r\n }\r\n .ov-admin-table tr:hover{\r\n background:rgba(14,165,233,.12);\r\n }\r\n .ov-admin-actions button{\r\n border:none;\r\n border-radius:999px;\r\n font-size:.7rem;\r\n padding:0.2rem 0.6rem;\r\n margin-right:0.2rem;\r\n cursor:pointer;\r\n }\r\n .ov-btn-edit{background:#f59e0b;color:#111827;}\r\n .ov-btn-del{background:#ef4444;color:#f9fafb;}\r\n .ov-btn-up{background:#1e293b;color:#e5e7eb;}\r\n .ov-btn-down{background:#1f2937;color:#e5e7eb;}\r\n\r\n \/* FORM ADMIN *\/\r\n .ov-admin-input,\r\n .ov-admin-textarea{\r\n width:100%;\r\n padding:0.65rem 0.75rem;\r\n border-radius:0.7rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.85rem;\r\n margin-bottom:0.6rem;\r\n }\r\n .ov-admin-textarea{\r\n min-height:80px;\r\n resize:vertical;\r\n }\r\n .ov-admin-input:focus,\r\n .ov-admin-textarea:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-admin-btn-row{\r\n display:flex;\r\n justify-content:flex-end;\r\n gap:0.5rem;\r\n margin-top:0.4rem;\r\n }\r\n .ov-admin-btn-sm{\r\n padding:0.5rem 1rem;\r\n border-radius:999px;\r\n border:none;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n font-weight:600;\r\n }\r\n .ov-admin-btn-secondary{\r\n background:#020617;\r\n color:#e5e7eb;\r\n border:1px solid #4b5563;\r\n }\r\n .ov-admin-btn-primary{\r\n background:#0ea5e9;\r\n color:#02131e;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"ov-video-admin\">\r\n \r\n <div id=\"ov-toast\"><\/div>\r\n\r\n \r\n <div class=\"ov-video-shell\">\r\n <div class=\"ov-video-header\">\r\n <div>\r\n <div class=\"ov-video-title\">Videoteca \u00b7 Olas de Vida<\/div>\r\n <div class=\"ov-video-sub\">Selecciona un v\u00eddeo para verlo. El engranaje es solo para administraci\u00f3n.<\/div>\r\n <\/div>\r\n <button class=\"ov-gear-btn\" id=\"ov-open-admin\" title=\"Panel de control\">\r\n \u2699\ufe0f\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"ov-main-grid\">\r\n \r\n <div class=\"ov-player\">\r\n <iframe\r\n id=\"ov-player-frame\"\r\n class=\"ov-player-iframe\"\r\n src=\"\"\r\n allowfullscreen\r\n allow=\"autoplay\"\r\n ><\/iframe>\r\n <div class=\"ov-player-meta\">\r\n <div class=\"ov-player-title\" id=\"ov-player-title\">Selecciona un v\u00eddeo de la lista<\/div>\r\n <div class=\"ov-player-desc\" id=\"ov-player-desc\">Haz clic en cualquier v\u00eddeo para comenzar a reproducirlo.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-list\">\r\n <div class=\"ov-list-title\">Listado de v\u00eddeos<\/div>\r\n <div id=\"ov-video-list\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-overlay\" id=\"ov-overlay\">\r\n \r\n <div class=\"ov-login-card\" id=\"ov-login-card\">\r\n <div class=\"ov-login-title\">Acceso administraci\u00f3n<\/div>\r\n <div class=\"ov-login-sub\">Introduce la contrase\u00f1a para abrir el panel de control.<\/div>\r\n <input\r\n type=\"password\"\r\n id=\"ov-admin-pass\"\r\n class=\"ov-login-input\"\r\n placeholder=\"Contrase\u00f1a\"\r\n autocomplete=\"off\"\r\n \/>\r\n <div class=\"ov-login-btns\">\r\n <button class=\"ov-btn ov-btn-secondary\" id=\"ov-login-cancel\">Cancelar<\/button>\r\n <button class=\"ov-btn ov-btn-primary\" id=\"ov-login-submit\">Entrar<\/button>\r\n <\/div>\r\n <div class=\"ov-login-error\" id=\"ov-login-error\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-panel\" id=\"ov-admin-panel\">\r\n <div class=\"ov-admin-header\">\r\n <div>\r\n <div class=\"ov-admin-title\">Panel de control de v\u00eddeos<\/div>\r\n <div class=\"ov-admin-badge\">Olas de Vida \u00b7 Gesti\u00f3n local (navegador)<\/div>\r\n <\/div>\r\n <button class=\"ov-admin-close\" id=\"ov-admin-close\">Cerrar<\/button>\r\n <\/div>\r\n\r\n <div class=\"ov-admin-grid\">\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\">Listado actual<\/div>\r\n <div class=\"ov-admin-table-wrap\">\r\n <table class=\"ov-admin-table\">\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>T\u00edtulo<\/th>\r\n <th>ID YouTube<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"ov-admin-tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\" id=\"ov-admin-form-title\">A\u00f1adir nuevo v\u00eddeo<\/div>\r\n <input type=\"text\" id=\"ov-admin-title\" class=\"ov-admin-input\" placeholder=\"T\u00edtulo del v\u00eddeo\" \/>\r\n <input type=\"text\" id=\"ov-admin-url\" class=\"ov-admin-input\" placeholder=\"URL completa o ID de YouTube\" \/>\r\n <textarea id=\"ov-admin-desc\" class=\"ov-admin-textarea\" placeholder=\"Descripci\u00f3n (opcional)\"><\/textarea>\r\n <div class=\"ov-admin-btn-row\">\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-secondary\" id=\"ov-admin-clear\">Limpiar<\/button>\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-primary\" id=\"ov-admin-save\">Guardar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n console.log(\"=== INICIANDO REPRODUCTOR OLAS DE VIDA ===\");\r\n \r\n const PASSWORD = \"olas2025\";\r\n const STORAGE_KEY = \"olasdevida_videos_v1\";\r\n\r\n \/\/ V\u00cdDEOS POR DEFECTO (ACTUALIZADOS CON TEM\u00c1TICA ONCOL\u00d3GICA)\r\n const DEFAULT_VIDEOS = [\r\n {\r\n id: 1,\r\n title: \"Introducci\u00f3n al cuidado oncol\u00f3gico integral\",\r\n desc: \"Acompa\u00f1amiento y cuidados durante el tratamiento del c\u00e1ncer.\",\r\n youtubeId: \"dQw4w9WgXcQ\" \/\/ REEMPLAZA CON ID REAL\r\n },\r\n {\r\n id: 2,\r\n title: \"Nutrici\u00f3n especializada para pacientes oncol\u00f3gicos\",\r\n desc: \"Gu\u00eda de alimentaci\u00f3n durante quimioterapia y radioterapia.\",\r\n youtubeId: \"9bZkp7q19f0\" \/\/ REEMPLAZA CON ID REAL\r\n },\r\n {\r\n id: 3,\r\n title: \"Ejercicio terap\u00e9utico y manejo de la fatiga\",\r\n desc: \"Rutinas adaptadas para mantener la movilidad y energ\u00eda.\",\r\n youtubeId: \"kJQP7kiw5Fk\" \/\/ REEMPLAZA CON ID REAL\r\n }\r\n ];\r\n\r\n let videos = [];\r\n let currentIndex = 0;\r\n let adminLogged = false;\r\n let editIndex = null;\r\n\r\n \/\/ ---------- TOAST ----------\r\n function ovToast(msg){\r\n const t = document.getElementById(\"ov-toast\");\r\n if(!t) return;\r\n t.textContent = msg;\r\n t.classList.add(\"show\");\r\n setTimeout(()=>t.classList.remove(\"show\"), 2200);\r\n }\r\n\r\n \/\/ ---------- DATA ----------\r\n function loadVideos(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n const parsed = raw ? JSON.parse(raw) : null;\r\n if(Array.isArray(parsed) && parsed.length){\r\n videos = parsed;\r\n console.log(\"V\u00eddeos cargados desde localStorage:\", videos.length);\r\n }else{\r\n videos = [...DEFAULT_VIDEOS];\r\n console.log(\"Cargados v\u00eddeos por defecto:\", videos.length);\r\n }\r\n }catch(e){\r\n console.error(\"Error cargando videos:\", e);\r\n videos = [...DEFAULT_VIDEOS];\r\n }\r\n }\r\n\r\n function saveVideos(){\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(videos));\r\n renderPlayer(); \/\/ Esto tambi\u00e9n actualizar\u00e1 la lista\r\n renderAdminTable();\r\n ovToast(\"Cambios guardados\");\r\n }\r\n\r\n function extractId(u){\r\n if(!u) return \"\";\r\n u = u.trim();\r\n if(\/^[a-zA-Z0-9_-]{11}$\/.test(u)) return u;\r\n const m = u.match(\/(?:youtube\\.com\\\/watch\\?v=|youtu\\.be\\\/|youtube\\.com\\\/embed\\\/|youtube\\.com\\\/v\\\/)([a-zA-Z0-9_-]{11})\/);\r\n return m ? m[1] : \"\";\r\n }\r\n\r\n \/\/ ---------- PLAYER P\u00daBLICO (VERSI\u00d3N CORREGIDA) ----------\r\n function renderPlayer(){\r\n console.log(\"renderPlayer() ejecutado. currentIndex =\", currentIndex);\r\n \r\n if(!videos.length){\r\n document.getElementById(\"ov-player-frame\").src = \"\";\r\n document.getElementById(\"ov-player-title\").textContent = \"No hay v\u00eddeos disponibles\";\r\n document.getElementById(\"ov-player-desc\").textContent = \"A\u00f1ade v\u00eddeos desde el panel de control.\";\r\n document.getElementById(\"ov-video-list\").innerHTML = \"\";\r\n return;\r\n }\r\n\r\n if(currentIndex < 0 || currentIndex >= videos.length) {\r\n currentIndex = 0;\r\n console.log(\"\u00cdndice corregido a 0\");\r\n }\r\n \r\n const v = videos[currentIndex];\r\n console.log(\"Reproduciendo v\u00eddeo:\", v.title);\r\n\r\n const frame = document.getElementById(\"ov-player-frame\");\r\n frame.src = \"https:\/\/www.youtube.com\/embed\/\" + v.youtubeId + \"?rel=0&autoplay=1\";\r\n\r\n document.getElementById(\"ov-player-title\").textContent = v.title || \"(Sin t\u00edtulo)\";\r\n document.getElementById(\"ov-player-desc\").textContent = v.desc || \"\";\r\n\r\n \/\/ RENDERIZAR LA LISTA (VERSI\u00d3N CORREGIDA)\r\n const listContainer = document.getElementById(\"ov-video-list\");\r\n listContainer.innerHTML = \"\"; \/\/ Limpiar primero\r\n\r\n videos.forEach((item, idx)=>{\r\n const el = document.createElement(\"div\");\r\n el.className = \"ov-list-item\" + (idx === currentIndex ? \" active\" : \"\");\r\n el.setAttribute(\"data-index\", idx); \/\/ A\u00f1adir atributo para referencia\r\n \r\n \/\/ USAR addEventListener EN LUGAR DE onclick DIRECTAMENTE\r\n el.addEventListener(\"click\", function() {\r\n console.log(\"Clic en v\u00eddeo \u00edndice:\", idx, \"T\u00edtulo:\", item.title);\r\n currentIndex = idx;\r\n renderPlayer(); \/\/ Esto volver\u00e1 a renderizar todo\r\n });\r\n\r\n const thumb = document.createElement(\"div\");\r\n thumb.className = \"ov-thumb\";\r\n const img = document.createElement(\"img\");\r\n img.src = \"https:\/\/img.youtube.com\/vi\/\" + item.youtubeId + \"\/hqdefault.jpg\";\r\n img.alt = item.title || \"V\u00eddeo\";\r\n thumb.appendChild(img);\r\n\r\n const text = document.createElement(\"div\");\r\n text.className = \"ov-list-text\";\r\n\r\n const tTitle = document.createElement(\"div\");\r\n tTitle.className = \"ov-list-item-title\";\r\n tTitle.textContent = item.title || \"(Sin t\u00edtulo)\";\r\n\r\n const tDesc = document.createElement(\"div\");\r\n tDesc.className = \"ov-list-item-desc\";\r\n tDesc.textContent = item.desc || \"\";\r\n\r\n text.appendChild(tTitle);\r\n text.appendChild(tDesc);\r\n\r\n el.appendChild(thumb);\r\n el.appendChild(text);\r\n listContainer.appendChild(el);\r\n });\r\n \r\n console.log(\"Lista renderizada con\", videos.length, \"v\u00eddeos\");\r\n }\r\n\r\n \/\/ ---------- PANEL ADMIN ----------\r\n function renderAdminTable(){\r\n const tbody = document.getElementById(\"ov-admin-tbody\");\r\n if(!tbody) return;\r\n tbody.innerHTML = \"\";\r\n\r\n videos.forEach((v, i)=>{\r\n const tr = document.createElement(\"tr\");\r\n tr.innerHTML = `\r\n <td>${i+1}<\/td>\r\n <td>${v.title || \"(Sin t\u00edtulo)\"}<\/td>\r\n <td style=\"font-family:monospace;color:#7dd3fc\">${v.youtubeId}<\/td>\r\n <td class=\"ov-admin-actions\">\r\n <button class=\"ov-btn-up\">\u25b2<\/button>\r\n <button class=\"ov-btn-down\">\u25bc<\/button>\r\n <button class=\"ov-btn-edit\">Editar<\/button>\r\n <button class=\"ov-btn-del\">Borrar<\/button>\r\n <\/td>\r\n `;\r\n\r\n tr.querySelector(\".ov-btn-edit\").onclick = ()=> {\r\n editIndex = i;\r\n document.getElementById(\"ov-admin-form-title\").textContent = \"Editar v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = v.title || \"\";\r\n document.getElementById(\"ov-admin-url\").value = v.youtubeId || \"\";\r\n document.getElementById(\"ov-admin-desc\").value = v.desc || \"\";\r\n };\r\n tr.querySelector(\".ov-btn-del\").onclick = ()=> {\r\n if(confirm(\"\u00bfBorrar este v\u00eddeo?\")){\r\n videos.splice(i,1);\r\n saveVideos();\r\n }\r\n };\r\n tr.querySelector(\".ov-btn-up\").onclick = ()=> {\r\n if(i>0){\r\n const tmp = videos[i-1];\r\n videos[i-1] = videos[i];\r\n videos[i] = tmp;\r\n saveVideos();\r\n }\r\n };\r\n tr.querySelector(\".ov-btn-down\").onclick = ()=> {\r\n if(i<videos.length-1){\r\n const tmp = videos[i+1];\r\n videos[i+1] = videos[i];\r\n videos[i] = tmp;\r\n saveVideos();\r\n }\r\n };\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n function clearAdminForm(){\r\n editIndex = null;\r\n document.getElementById(\"ov-admin-form-title\").textContent = \"A\u00f1adir nuevo v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = \"\";\r\n document.getElementById(\"ov-admin-url\").value = \"\";\r\n document.getElementById(\"ov-admin-desc\").value = \"\";\r\n }\r\n\r\n \/\/ ---------- LOGIN + OVERLAY ----------\r\n function openOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n\r\n overlay.style.display = \"flex\";\r\n document.getElementById(\"ov-login-error\").textContent = \"\";\r\n\r\n if(adminLogged){\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n }else{\r\n document.getElementById(\"ov-login-card\").style.display = \"block\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"none\";\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n passInput.value = \"\";\r\n setTimeout(()=>passInput.focus(), 200);\r\n }\r\n }\r\n\r\n function closeOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n overlay.style.display = \"none\";\r\n }\r\n\r\n function handleLogin(){\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n const error = document.getElementById(\"ov-login-error\");\r\n if(!passInput || !error) return;\r\n\r\n const v = passInput.value.trim();\r\n if(v === PASSWORD){\r\n adminLogged = true;\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n ovToast(\"Acceso al panel concedido\");\r\n }else{\r\n error.textContent = \"Contrase\u00f1a incorrecta\";\r\n }\r\n }\r\n\r\n \/\/ ---------- FORM ADMIN ----------\r\n function saveFromAdmin(){\r\n const t = document.getElementById(\"ov-admin-title\").value.trim();\r\n const u = document.getElementById(\"ov-admin-url\").value.trim();\r\n const d = document.getElementById(\"ov-admin-desc\").value.trim();\r\n const youtubeId = extractId(u);\r\n\r\n if(!t || !youtubeId){\r\n alert(\"T\u00edtulo o ID de YouTube inv\u00e1lidos.\");\r\n return;\r\n }\r\n\r\n if(editIndex !== null){\r\n videos[editIndex] = {\r\n ...videos[editIndex],\r\n title:t,\r\n desc:d,\r\n youtubeId\r\n };\r\n }else{\r\n const newId = videos.length ? Math.max(...videos.map(v=>v.id||0))+1 : 1;\r\n videos.push({id:newId,title:t,desc:d,youtubeId});\r\n }\r\n\r\n clearAdminForm();\r\n saveVideos();\r\n }\r\n\r\n \/\/ ---------- INIT ----------\r\n document.addEventListener(\"DOMContentLoaded\", function(){\r\n console.log(\"DOM cargado. Inicializando...\");\r\n \r\n \/\/ Cargar datos\r\n loadVideos();\r\n renderPlayer();\r\n\r\n \/\/ Gear \u2192 overlay\r\n document.getElementById(\"ov-open-admin\").addEventListener(\"click\", openOverlay);\r\n\r\n \/\/ Login eventos\r\n document.getElementById(\"ov-login-submit\").addEventListener(\"click\", handleLogin);\r\n document.getElementById(\"ov-login-cancel\").addEventListener(\"click\", closeOverlay);\r\n \r\n document.getElementById(\"ov-admin-pass\").addEventListener(\"keydown\", e=>{\r\n if(e.key===\"Enter\") handleLogin();\r\n });\r\n\r\n \/\/ Cerrar panel admin\r\n document.getElementById(\"ov-admin-close\").addEventListener(\"click\", closeOverlay);\r\n\r\n \/\/ Botones form admin\r\n document.getElementById(\"ov-admin-save\").addEventListener(\"click\", saveFromAdmin);\r\n document.getElementById(\"ov-admin-clear\").addEventListener(\"click\", clearAdminForm);\r\n \r\n console.log(\"Reproductor inicializado correctamente\");\r\n });\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-0a48e7d e-con-full e-flex e-con e-parent\" data-id=\"0a48e7d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5931505 elementor-widget elementor-widget-html\" data-id=\"5931505\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ov-reproductor-wp\">\r\n <style>#ov-reproductor-wp *{box-sizing:border-box}#ov-reproductor-wp .ov-container{max-width:1200px;margin:auto;background:#0f172a;padding:20px;border-radius:20px}#ov-reproductor-wp .ov-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}@media(max-width:768px){#ov-reproductor-wp .ov-grid{grid-template-columns:1fr}}#ov-reproductor-wp .ov-player iframe{width:100%;height:400px;border-radius:10px}#ov-reproductor-wp .ov-list{max-height:400px;overflow-y:auto}#ov-reproductor-wp .ov-item{padding:10px;cursor:pointer;border-bottom:1px solid #334155}#ov-reproductor-wp .ov-item:hover{background:#1e293b}#ov-reproductor-wp .ov-item.active{background:#0ea5e9;color:white}<\/style>\r\n \r\n <div class=\"ov-container\">\r\n <h2 style=\"color:#0ea5e9;text-align:center\">Videoteca Olas de Vida<\/h2>\r\n <div class=\"ov-grid\">\r\n <div class=\"ov-player\">\r\n <iframe id=\"ov-iframe\" src=\"\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n <h3 id=\"ov-title\">Selecciona un v\u00eddeo<\/h3>\r\n <p id=\"ov-desc\"><\/p>\r\n <\/div>\r\n <div class=\"ov-list\" id=\"ov-list\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n jQuery(document).ready(function($){\r\n const videos = [\r\n {id:1, title:\"Cuidado oncol\u00f3gico\", desc:\"Introducci\u00f3n al tratamiento\", youtubeId:\"dQw4w9WgXcQ\"},\r\n {id:2, title:\"Nutrici\u00f3n especializada\", desc:\"Gu\u00eda de alimentaci\u00f3n\", youtubeId:\"9bZkp7q19f0\"},\r\n {id:3, title:\"Ejercicio terap\u00e9utico\", desc:\"Rutinas adaptadas\", youtubeId:\"kJQP7kiw5Fk\"}\r\n ];\r\n \r\n let currentIndex = 0;\r\n \r\n function render(){\r\n const video = videos[currentIndex];\r\n $('#ov-iframe').attr('src', 'https:\/\/www.youtube.com\/embed\/' + video.youtubeId);\r\n $('#ov-title').text(video.title);\r\n $('#ov-desc').text(video.desc);\r\n \r\n $('#ov-list').empty();\r\n videos.forEach((v, i) => {\r\n $('#ov-list').append(`\r\n <div class=\"ov-item ${i===currentIndex?'active':''}\" data-index=\"${i}\">\r\n <strong>${v.title}<\/strong><br>\r\n <small>${v.desc}<\/small>\r\n <\/div>\r\n `);\r\n });\r\n \r\n $('.ov-item').off('click').on('click', function(){\r\n currentIndex = $(this).data('index');\r\n render();\r\n });\r\n }\r\n \r\n render();\r\n });\r\n <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7bdd24f e-con-full e-flex e-con e-parent\" data-id=\"7bdd24f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ba683d elementor-widget elementor-widget-html\" data-id=\"9ba683d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<?php\r\n\/**\r\n* Plugin Name: Reproductor Olas de Vida\r\n*\/\r\nfunction ov_reproductor_shortcode() {\r\n ob_start();\r\n ?>\r\n \r\n <?php\r\n return ob_get_clean();\r\n}\r\nadd_shortcode('reproductor_olasdevida', 'ov_reproductor_shortcode');\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>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 pensada para wordpress \/ 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 […]<\/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-618","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/618","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=618"}],"version-history":[{"count":31,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/618\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/618\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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 \r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n }\r\n \r\n .ov-root {\r\n padding: 20px;\r\n min-height: 100vh;\r\n }\r\n \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 .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-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 .ov-inner {\r\n padding: 24px;\r\n }\r\n \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 }\r\n \r\n .ov-card-value {\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: #94a3b8;\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 .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-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #94a3b8;\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 }\r\n \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: #94a3b8;\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 .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: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .patient-name-btn:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \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 .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 min-height: 350px;\r\n }\r\n \r\n .ov-side-title {\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: #94a3b8;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .pdf-links-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n margin-top: auto;\r\n }\r\n \r\n .ov-btn {\r\n padding: 8px 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: 12px;\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 gap: 6px;\r\n width: 100%;\r\n justify-content: center;\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-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 \/* ASISTENTE IA - IFRAME EMBEBIDO *\/\r\n .ai-iframe-container {\r\n flex-grow: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n margin-top: 8px;\r\n position: relative;\r\n background: rgba(15, 23, 42, 0.5);\r\n }\r\n \r\n .ai-iframe-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n display: block;\r\n min-height: 250px;\r\n }\r\n \r\n \/* CONTENEDOR DE 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: 12px;\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: #94a3b8;\r\n margin-bottom: 8px;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n .chart-canvas-container {\r\n flex-grow: 1;\r\n position: relative;\r\n min-height: 120px;\r\n }\r\n \r\n .chart-canvas {\r\n width: 100% !important;\r\n height: 100% !important;\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 .stat-box {\r\n flex: 1;\r\n padding: 6px;\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.8;\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 #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-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: #94a3b8;\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .modal-close:hover {\r\n background: #334155;\r\n color: #e2e8f0;\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 .ficha-content h3 {\r\n color: #93c5fd;\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 h3:first-child {\r\n margin-top: 0;\r\n }\r\n \r\n .ficha-content p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\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: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n @media (max-width: 768px) {\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 min-height: 320px;\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 .ai-iframe-container iframe {\r\n min-height: 200px;\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 <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"ov-root\">\r\n <div class=\"ov-wrapper\">\r\n\r\n \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 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n \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 \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 sus 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 \r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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 \r\n <div class=\"ov-bottom-layout\">\r\n\r\n \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 <button class=\"ov-btn\" onclick=\"downloadPDF('ultimo-ciclo')\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/button>\r\n \r\n <button class=\"ov-btn\" onclick=\"downloadPDF('evolucion-global')\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/button>\r\n \r\n <button class=\"ov-btn ov-btn-outline\" onclick=\"downloadPDF('resumen-ejecutivo')\">\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 informe\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \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=\"ai-iframe-container\" id=\"ai-container\">\r\n <iframe \r\n src=\"https:\/\/www.jotform.com\/app\/230155277271048\"\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 <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n \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 \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"cycle-chart-title\">\u00daltimo ciclo (dolor\/\u00e1nimo)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"cycle-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"general-chart-title\">Evoluci\u00f3n general (semanas)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"general-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \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\r\n<div id=\"patient-modal\">\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=\"closePatientModal()\">\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 \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE PACIENTES CON GR\u00c1FICOS\r\n\/\/ ============================================\r\nconst pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n ficha: `\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 graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14'],\r\n dolor: [6, 7, 8, 7, 8, 9],\r\n animo: [7, 7, 6, 7, 7, 8]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6'],\r\n dolor: [8, 7, 6, 7, 6, 7],\r\n animo: [5, 6, 6, 7, 7, 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 ficha: `\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', 'D\u00eda 10'],\r\n dolor: [5, 6, 6, 5, 6],\r\n animo: [3, 2, 3, 4, 3]\r\n },\r\n evolucion: {\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 nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV003<\/h3><p>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/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, 6, 5, 6],\r\n animo: [6, 7, 7, 7]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [6, 5, 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 \/\/ ... m\u00e1s pacientes con datos b\u00e1sicos\r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>C\u00e1ncer de pulm\u00f3n \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>C\u00e1ncer de p\u00e1ncreas \u00b7 Dolor intenso<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>C\u00e1ncer de mama \u00b7 Fiebre 38.8\u00b0C<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>C\u00e1ncer de pr\u00f3stata \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/p>`,\r\n graficos: defaultGraficos()\r\n }\r\n};\r\n\r\n\/\/ Funci\u00f3n para gr\u00e1ficos por defecto\r\nfunction defaultGraficos() {\r\n return {\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 evolucion: {\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\/\/ ============================================\r\n\/\/ VARIABLES PARA GR\u00c1FICOS\r\n\/\/ ============================================\r\nlet cicloChart = null;\r\nlet evolucionChart = null;\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PRINCIPALES\r\n\/\/ ============================================\r\n\r\n\/\/ Funci\u00f3n para abrir modal Y actualizar gr\u00e1ficos\r\nfunction openPatientModal(pacienteId) {\r\n console.log(\"Abriendo:\", pacienteId);\r\n \r\n const paciente = pacientes[pacienteId];\r\n if (!paciente) {\r\n alert(\"Paciente no encontrado\");\r\n return;\r\n }\r\n \r\n \/\/ 1. ACTUALIZAR MODAL\r\n document.getElementById('modal-title').textContent = `${paciente.nombre} \u00b7 ${pacienteId}`;\r\n document.getElementById('patient-info').innerHTML = paciente.ficha;\r\n document.getElementById('patient-modal').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ 2. ACTUALIZAR GR\u00c1FICOS\r\n updateGraficos(pacienteId, paciente);\r\n}\r\n\r\n\/\/ Funci\u00f3n para actualizar gr\u00e1ficos\r\nfunction updateGraficos(pacienteId, paciente) {\r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('charts-title').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('charts-subtitle').textContent = `ID: ${pacienteId}`;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n const stats = paciente.graficos.stats;\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 t\u00edtulos de gr\u00e1ficos\r\n document.getElementById('cycle-chart-title').textContent = `\u00daltimo ciclo \u00b7 Dolor: ${pacienteId === 'ODV001' ? '9\/10' : '6\/10'}`;\r\n document.getElementById('general-chart-title').textContent = `Evoluci\u00f3n \u00b7 ${paciente.nombre.split(' ')[0]}`;\r\n \r\n \/\/ Crear\/actualizar gr\u00e1ficos\r\n crearGraficos(paciente.graficos);\r\n}\r\n\r\n\/\/ Funci\u00f3n para crear gr\u00e1ficos con Chart.js\r\nfunction crearGraficos(datosGraficos) {\r\n const ctxCiclo = document.getElementById('cycle-chart');\r\n const ctxEvolucion = document.getElementById('general-chart');\r\n \r\n \/\/ Destruir gr\u00e1ficos anteriores si existen\r\n if (cicloChart) cicloChart.destroy();\r\n if (evolucionChart) evolucionChart.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n cicloChart = new Chart(ctxCiclo, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.ciclo.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.ciclo.dolor,\r\n borderColor: '#ef4444',\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: datosGraficos.ciclo.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n evolucionChart = new Chart(ctxEvolucion, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.evolucion.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.evolucion.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.4,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: datosGraficos.evolucion.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para cerrar modal\r\nfunction closePatientModal() {\r\n document.getElementById('patient-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PDF\r\n\/\/ ============================================\r\n\r\nfunction downloadPDF(tipo) {\r\n const pacienteNombre = document.getElementById('charts-title').textContent.replace('\ud83d\udcc8 ', '');\r\n \r\n let mensaje = '';\r\n switch(tipo) {\r\n case 'ultimo-ciclo':\r\n mensaje = `Generando PDF del \u00faltimo ciclo para: ${pacienteNombre}`;\r\n break;\r\n case 'evolucion-global':\r\n mensaje = `Generando evoluci\u00f3n global para: ${pacienteNombre}`;\r\n break;\r\n case 'resumen-ejecutivo':\r\n mensaje = `Generando resumen ejecutivo para: ${pacienteNombre}`;\r\n break;\r\n }\r\n \r\n alert(mensaje);\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N\r\n\/\/ ============================================\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico inicializado');\r\n \r\n \/\/ Inicializar gr\u00e1ficos con primer paciente\r\n updateGraficos('ODV001', pacientes.ODV001);\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('patient-modal');\r\n \r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n closePatientModal();\r\n }\r\n });\r\n \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 \/\/ Configurar iframe de IA\r\n const aiIframe = document.querySelector('#ai-container iframe');\r\n if (aiIframe) {\r\n aiIframe.onload = function() {\r\n console.log('\u2705 Iframe de IA cargado');\r\n };\r\n }\r\n});\r\n<\/script>\r\n\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-675e0b7 e-con-full e-flex e-con e-parent\" data-id=\"675e0b7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-317f672 elementor-widget elementor-widget-html\" data-id=\"317f672\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { id: \"PAC-001\", nombre: \"Mar\u00eda Gonz\u00e1lez\", edad: 58, diagnostico: \"C\u00e1ncer de mama\", ultimaRevision: \"28\/05\/2023\", estado: \"estable\", estadoEmocional: \"Estable\", tratamiento: \"Quimioterapia - Ciclo 4\/6\" },\r\n { id: \"PAC-002\", nombre: \"Carlos Ruiz\", edad: 62, diagnostico: \"C\u00e1ncer de pulm\u00f3n\", ultimaRevision: \"27\/05\/2023\", estado: \"observacion\", estadoEmocional: \"Ansioso\", tratamiento: \"Quimioterapia - Ciclo 2\/6\" },\r\n { id: \"PAC-003\", nombre: \"Ana L\u00f3pez\", edad: 45, diagnostico: \"C\u00e1ncer de colon\", ultimaRevision: \"26\/05\/2023\", estado: \"estable\", estadoEmocional: \"Positivo\", tratamiento: \"Quimioterapia - Ciclo 5\/6\" },\r\n { id: \"PAC-004\", nombre: \"Javier Mart\u00ednez\", edad: 70, diagnostico: \"C\u00e1ncer de pr\u00f3stata\", ultimaRevision: \"25\/05\/2023\", estado: \"critico\", estadoEmocional: \"Deprimido\", tratamiento: \"Quimioterapia - Ciclo 3\/6\" },\r\n { id: \"PAC-005\", nombre: \"Laura S\u00e1nchez\", edad: 52, diagnostico: \"C\u00e1ncer de ovario\", ultimaRevision: \"24\/05\/2023\", estado: \"estable\", estadoEmocional: \"Estable\", tratamiento: \"Quimioterapia - Ciclo 4\/6\" },\r\n { id: \"PAC-006\", nombre: \"Pedro D\u00edaz\", edad: 61, diagnostico: \"Linfoma\", ultimaRevision: \"23\/05\/2023\", estado: \"observacion\", estadoEmocional: \"Preocupado\", tratamiento: \"Quimioterapia - Ciclo 1\/6\" },\r\n { id: \"PAC-007\", nombre: \"Elena Castro\", edad: 48, diagnostico: \"C\u00e1ncer de mama\", ultimaRevision: \"22\/05\/2023\", estado: \"estable\", estadoEmocional: \"Optimista\", tratamiento: \"Quimioterapia - Ciclo 6\/6\" },\r\n { id: \"PAC-008\", nombre: \"Miguel \u00c1ngel Torres\", edad: 55, diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", ultimaRevision: \"21\/05\/2023\", estado: \"critico\", estadoEmocional: \"Angustiado\", tratamiento: \"Quimioterapia - Ciclo 2\/6\" },\r\n { id: \"PAC-009\", nombre: \"Isabel Ram\u00edrez\", edad: 67, diagnostico: \"C\u00e1ncer de est\u00f3mago\", ultimaRevision: \"20\/05\/2023\", estado: \"observacion\", estadoEmocional: \"Inseguro\", tratamiento: \"Quimioterapia - Ciclo 3\/6\" },\r\n { id: \"PAC-010\", nombre: \"Francisco Navarro\", edad: 59, diagnostico: \"C\u00e1ncer de vejiga\", ultimaRevision: \"19\/05\/2023\", estado: \"estable\", estadoEmocional: \"Tranquilo\", tratamiento: \"Quimioterapia - Ciclo 5\/6\" }\r\n ];\r\n \r\n \/\/ Cargar pacientes en la tabla\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n \r\n function cargarPacientes(listaPacientes) {\r\n tablaPacientes.innerHTML = '';\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = 'Estable';\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = 'Observaci\u00f3n';\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = 'Prioritario';\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${paciente.estadoEmocional}<\/span><\/td>\r\n <td><button class=\"descargar-btn\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n \/\/ A\u00f1adir evento para seleccionar paciente\r\n fila.addEventListener('click', function() {\r\n seleccionarPaciente(paciente);\r\n });\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n }\r\n \r\n \/\/ Cargar pacientes al iniciar\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente\r\n function seleccionarPaciente(paciente) {\r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Resaltar fila seleccionada\r\n const filas = document.querySelectorAll('#tablaPacientes tr');\r\n filas.forEach(fila => fila.style.backgroundColor = '');\r\n \r\n const filaSeleccionada = document.querySelector(`tr[data-id=\"${paciente.id}\"]`);\r\n if (filaSeleccionada) {\r\n filaSeleccionada.style.backgroundColor = 'var(--azul-suave)';\r\n }\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ Inicializar con primer paciente seleccionado\r\n setTimeout(() => {\r\n seleccionarPaciente(pacientes[0]);\r\n }, 500);\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-f96b17f e-con-full e-flex e-con e-parent\" data-id=\"f96b17f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-946e9e6 elementor-widget elementor-widget-html\" data-id=\"946e9e6\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Cargar pacientes en la tabla\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n function cargarPacientes(listaPacientes) {\r\n tablaPacientes.innerHTML = '';\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = 'Estable';\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = 'Observaci\u00f3n';\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = 'Prioritario';\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${paciente.estadoEmocional}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\"\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ Inicializar con primer paciente seleccionado\r\n cargarPacientes(pacientes);\r\n setTimeout(() => {\r\n seleccionarPaciente(pacientes[0]);\r\n }, 500);\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-23def1d e-con-full e-flex e-con e-parent\" data-id=\"23def1d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e66e389 elementor-widget elementor-widget-html\" data-id=\"e66e389\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n \/\/ Cargar pacientes en la tabla - FUNCI\u00d3N CORREGIDA\r\n function cargarPacientes(listaPacientes) {\r\n console.log(\"Cargando pacientes...\", listaPacientes.length);\r\n tablaPacientes.innerHTML = '';\r\n \r\n if (listaPacientes.length === 0) {\r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `<td colspan=\"7\" style=\"text-align: center; padding: 40px;\">No se encontraron pacientes<\/td>`;\r\n tablaPacientes.appendChild(fila);\r\n return;\r\n }\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${estadoTexto}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\" - FUNCI\u00d3N CORREGIDA\r\n setTimeout(() => {\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n if (fila.dataset.id) {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n }\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n console.log(\"Abriendo ficha de:\", paciente.nombre);\r\n \r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n console.log(\"Seleccionando paciente:\", paciente.nombre);\r\n \r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR LA P\u00c1GINA\r\n window.addEventListener('DOMContentLoaded', (event) => {\r\n console.log('DOM completamente cargado');\r\n \/\/ Cargar los pacientes autom\u00e1ticamente\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Seleccionar el primer paciente por defecto\r\n setTimeout(() => {\r\n if (pacientes.length > 0) {\r\n seleccionarPaciente(pacientes[0]);\r\n }\r\n }, 500);\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-c0ca28f e-con-full e-flex e-con e-parent\" data-id=\"c0ca28f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92033b6 elementor-widget elementor-widget-html\" data-id=\"92033b6\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n \/\/ Cargar pacientes en la tabla - FUNCI\u00d3N CORREGIDA\r\n function cargarPacientes(listaPacientes) {\r\n console.log(\"Cargando pacientes...\", listaPacientes.length);\r\n tablaPacientes.innerHTML = '';\r\n \r\n if (listaPacientes.length === 0) {\r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `<td colspan=\"7\" style=\"text-align: center; padding: 40px;\">No se encontraron pacientes<\/td>`;\r\n tablaPacientes.appendChild(fila);\r\n return;\r\n }\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${estadoTexto}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\" - FUNCI\u00d3N CORREGIDA\r\n setTimeout(() => {\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n if (fila.dataset.id) {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n }\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n console.log(\"Abriendo ficha de:\", paciente.nombre);\r\n \r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n console.log(\"Seleccionando paciente:\", paciente.nombre);\r\n \r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR LA P\u00c1GINA\r\n window.addEventListener('DOMContentLoaded', (event) => {\r\n console.log('DOM completamente cargado');\r\n \/\/ Cargar los pacientes autom\u00e1ticamente\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Seleccionar el primer paciente por defecto\r\n setTimeout(() => {\r\n if (pacientes.length > 0) {\r\n seleccionarPaciente(pacientes[0]);\r\n }\r\n }, 500);\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-0e00579 e-con-full e-flex e-con e-parent\" data-id=\"0e00579\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb5eafa elementor-widget elementor-widget-html\" data-id=\"eb5eafa\" 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=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n \/* Estilos generales - Dise\u00f1o m\u00e1s alegre y profesional *\/\r\n :root {\r\n --azul-principal: #1a73e8;\r\n --azul-suave: #e8f0fe;\r\n --verde: #34a853;\r\n --naranja: #ff9800;\r\n --gris-claro: #f5f5f5;\r\n --gris-medio: #dadce0;\r\n --gris-oscuro: #3c4043;\r\n --blanco: #ffffff;\r\n --sombra: 0 4px 12px rgba(0, 0, 0, 0.08);\r\n --borde-redondeado: 12px;\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n }\r\n \r\n body {\r\n background-color: #f8f9fa;\r\n color: var(--gris-oscuro);\r\n line-height: 1.6;\r\n padding: 20px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n \r\n \/* ZONA A - Encabezado *\/\r\n .zona-a {\r\n background: linear-gradient(135deg, var(--azul-principal), #0d47a1);\r\n color: white;\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px 30px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .zona-a::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50px;\r\n width: 200px;\r\n height: 200px;\r\n background-color: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n }\r\n \r\n .zona-a h1 {\r\n font-size: 2.2rem;\r\n margin-bottom: 8px;\r\n font-weight: 700;\r\n }\r\n \r\n .zona-a p {\r\n font-size: 1.1rem;\r\n opacity: 0.9;\r\n max-width: 800px;\r\n }\r\n \r\n .estadisticas {\r\n display: flex;\r\n gap: 25px;\r\n margin-top: 25px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .estadistica-item {\r\n background-color: rgba(255, 255, 255, 0.15);\r\n padding: 15px 20px;\r\n border-radius: 10px;\r\n min-width: 180px;\r\n backdrop-filter: blur(10px);\r\n transition: transform 0.3s;\r\n }\r\n \r\n .estadistica-item:hover {\r\n transform: translateY(-5px);\r\n }\r\n \r\n .estadistica-item .numero {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n display: block;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .estadistica-item .texto {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n }\r\n \r\n \/* ZONA B - Listado de pacientes *\/\r\n .zona-b {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n margin-bottom: 25px;\r\n box-shadow: var(--sombra);\r\n }\r\n \r\n .zona-b h2 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 15px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.6rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .zona-b h2 i {\r\n color: var(--naranja);\r\n }\r\n \r\n .controles-lista {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n }\r\n \r\n .busqueda input {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n width: 300px;\r\n font-size: 1rem;\r\n transition: border 0.3s;\r\n }\r\n \r\n .busqueda input:focus {\r\n outline: none;\r\n border-color: var(--azul-principal);\r\n }\r\n \r\n .filtros select {\r\n padding: 12px 20px;\r\n border: 2px solid var(--gris-medio);\r\n border-radius: 8px;\r\n background-color: white;\r\n font-size: 1rem;\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes-contenedor {\r\n max-height: 600px; \/* Aproximadamente 10 pacientes *\/\r\n overflow-y: auto;\r\n border-radius: 10px;\r\n border: 1px solid var(--gris-medio);\r\n }\r\n \r\n \/* Estilo de la scrollbar *\/\r\n .lista-pacientes-contenedor::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-track {\r\n background: #f1f1f1;\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes-contenedor::-webkit-scrollbar-thumb {\r\n background: var(--azul-principal);\r\n border-radius: 10px;\r\n }\r\n \r\n .lista-pacientes {\r\n width: 100%;\r\n }\r\n \r\n .lista-pacientes thead {\r\n background-color: var(--azul-suave);\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .lista-pacientes th {\r\n padding: 18px 15px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--azul-principal);\r\n border-bottom: 2px solid var(--gris-medio);\r\n }\r\n \r\n .lista-pacientes tbody tr {\r\n border-bottom: 1px solid var(--gris-claro);\r\n transition: background-color 0.2s;\r\n }\r\n \r\n .lista-pacientes tbody tr:hover {\r\n background-color: var(--azul-suave);\r\n cursor: pointer;\r\n }\r\n \r\n .lista-pacientes td {\r\n padding: 18px 15px;\r\n }\r\n \r\n .estado {\r\n display: inline-block;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n }\r\n \r\n .estado.estable {\r\n background-color: #e6f4ea;\r\n color: var(--verde);\r\n }\r\n \r\n .estado.observacion {\r\n background-color: #fef7e0;\r\n color: #f9ab00;\r\n }\r\n \r\n .estado.critico {\r\n background-color: #fce8e6;\r\n color: #d93025;\r\n }\r\n \r\n \/* ZONA C - Minibloques *\/\r\n .zona-c {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .zona-c {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .zona-c {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n .minibloque {\r\n background-color: var(--blanco);\r\n border-radius: var(--borde-redondeado);\r\n padding: 25px;\r\n box-shadow: var(--sombra);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .minibloque h3 {\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n padding-bottom: 12px;\r\n border-bottom: 2px solid var(--gris-claro);\r\n font-size: 1.4rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .minibloque h3 i {\r\n color: var(--naranja);\r\n }\r\n \r\n \/* Minibloque 1 - Informes PDF *\/\r\n .informes-lista {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px;\r\n margin-bottom: 12px;\r\n background-color: var(--gris-claro);\r\n border-radius: 8px;\r\n border-left: 4px solid var(--azul-principal);\r\n transition: transform 0.2s;\r\n }\r\n \r\n .informe-item:hover {\r\n transform: translateX(5px);\r\n background-color: var(--azul-suave);\r\n }\r\n \r\n .informe-info {\r\n flex-grow: 1;\r\n }\r\n \r\n .informe-nombre {\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .informe-fecha {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n }\r\n \r\n .descargar-btn {\r\n background-color: var(--azul-principal);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 8px 15px;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n font-weight: 600;\r\n }\r\n \r\n .descargar-btn:hover {\r\n background-color: #0d47a1;\r\n }\r\n \r\n \/* Minibloque 2 - Asistente Virtual Julian *\/\r\n .asistente-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n padding: 20px 0;\r\n border: 2px dashed var(--gris-medio);\r\n border-radius: 10px;\r\n background-color: var(--gris-claro);\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 3.5rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-contenedor h4 {\r\n margin-bottom: 10px;\r\n color: var(--gris-oscuro);\r\n }\r\n \r\n .asistente-contenedor p {\r\n margin-bottom: 20px;\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n .jotforms-btn {\r\n background-color: var(--verde);\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n padding: 12px 25px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n font-size: 1rem;\r\n transition: background-color 0.3s;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .jotforms-btn:hover {\r\n background-color: #2e7d32;\r\n }\r\n \r\n .error-conexion {\r\n color: #d93025;\r\n font-size: 0.9rem;\r\n margin-top: 15px;\r\n background-color: #fce8e6;\r\n padding: 10px;\r\n border-radius: 6px;\r\n width: 90%;\r\n }\r\n \r\n \/* Minibloque 3 - Gr\u00e1ficos *\/\r\n .graficos-contenedor {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .grafico-info {\r\n background-color: var(--azul-suave);\r\n padding: 20px;\r\n border-radius: 10px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .grafico-info p {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .paciente-seleccionado {\r\n font-weight: 700;\r\n color: var(--azul-principal);\r\n font-size: 1.2rem;\r\n }\r\n \r\n .placeholder-grafico {\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n background-color: var(--gris-claro);\r\n border-radius: 10px;\r\n border: 2px dashed var(--gris-medio);\r\n padding: 30px;\r\n text-align: center;\r\n }\r\n \r\n .placeholder-grafico i {\r\n font-size: 4rem;\r\n color: var(--azul-principal);\r\n margin-bottom: 20px;\r\n opacity: 0.7;\r\n }\r\n \r\n .placeholder-grafico p {\r\n color: #5f6368;\r\n max-width: 80%;\r\n }\r\n \r\n \/* Utilidades *\/\r\n .texto-centro {\r\n text-align: center;\r\n }\r\n \r\n .mensaje-ayuda {\r\n font-size: 0.9rem;\r\n color: #5f6368;\r\n margin-top: 10px;\r\n font-style: italic;\r\n }\r\n \r\n \/* Estilos para la ficha del paciente que se abrir\u00e1 *\/\r\n .ficha-paciente-overlay {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n \r\n .ficha-paciente-contenido {\r\n background-color: white;\r\n border-radius: var(--borde-redondeado);\r\n width: 90%;\r\n max-width: 1000px;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .cerrar-ficha {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n color: var(--gris-oscuro);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <section class=\"zona-a\">\r\n <h1><i class=\"fas fa-stethoscope\"><\/i> Panel M\u00e9dico - Olas de Vida<\/h1>\r\n <p>Seguimiento integral de pacientes oncol\u00f3gicos. Informaci\u00f3n cl\u00ednica y emocional entre sesiones de quimioterapia.<\/p>\r\n \r\n <div class=\"estadisticas\">\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">24<\/span>\r\n <span class=\"texto\">Pacientes activos<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">18<\/span>\r\n <span class=\"texto\">Con seguimiento esta semana<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">6<\/span>\r\n <span class=\"texto\">Requieren atenci\u00f3n prioritaria<\/span>\r\n <\/div>\r\n <div class=\"estadistica-item\">\r\n <span class=\"numero\">94%<\/span>\r\n <span class=\"texto\">Satisfacci\u00f3n pacientes<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-b\">\r\n <h2><i class=\"fas fa-users\"><\/i> Listado de Pacientes<\/h2>\r\n \r\n <div class=\"controles-lista\">\r\n <div class=\"busqueda\">\r\n <input type=\"text\" id=\"buscarPaciente\" placeholder=\"Buscar paciente por nombre o ID...\">\r\n <\/div>\r\n <div class=\"filtros\">\r\n <select id=\"filtroEstado\">\r\n <option value=\"todos\">Todos los pacientes<\/option>\r\n <option value=\"estable\">Estado estable<\/option>\r\n <option value=\"observacion\">En observaci\u00f3n<\/option>\r\n <option value=\"critico\">Prioritarios<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"lista-pacientes-contenedor\">\r\n <table class=\"lista-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Nombre del Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Edad<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>\u00daltima revisi\u00f3n<\/th>\r\n <th>Estado emocional<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"tablaPacientes\">\r\n \r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Haz clic en cualquier paciente para ver sus gr\u00e1ficos detallados en la secci\u00f3n inferior.<\/p>\r\n <\/section>\r\n \r\n \r\n <section class=\"zona-c\">\r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-file-pdf\"><\/i> Informes PDF Recientes<\/h3>\r\n <div class=\"informes-lista\">\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Informe Mensual - Mayo 2023<\/div>\r\n <div class=\"informe-fecha\">Actualizado: 28\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">An\u00e1lisis Comparativo Q1-Q2<\/div>\r\n <div class=\"informe-fecha\">Generado: 25\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Seguimiento Emocional Grupal<\/div>\r\n <div class=\"informe-fecha\">Generado: 20\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <div class=\"informe-item\">\r\n <div class=\"informe-info\">\r\n <div class=\"informe-nombre\">Efectividad Intervenciones<\/div>\r\n <div class=\"informe-fecha\">Generado: 15\/05\/2023<\/div>\r\n <\/div>\r\n <button class=\"descargar-btn\"><i class=\"fas fa-download\"><\/i> Descargar<\/button>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los informes se actualizan autom\u00e1ticamente cada 7 d\u00edas.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-robot\"><\/i> Asistente Virtual \"Julian\"<\/h3>\r\n <div class=\"asistente-contenedor\">\r\n <div class=\"asistente-icono\">\r\n <i class=\"fas fa-robot\"><\/i>\r\n <\/div>\r\n <h4>Asistente de JotForms<\/h4>\r\n <p>Julian te ayuda a gestionar formularios, respuestas de pacientes y generar reportes autom\u00e1ticos.<\/p>\r\n \r\n \r\n <button class=\"jotforms-btn\" id=\"activarJulian\">\r\n <i class=\"fas fa-comment-medical\"><\/i> Activar Asistente\r\n <\/button>\r\n \r\n \r\n <div class=\"error-conexion\">\r\n <i class=\"fas fa-exclamation-triangle\"><\/i> \r\n <strong>Posible error de conexi\u00f3n con JotForms<\/strong>\r\n <p>Verifica la configuraci\u00f3n de la API key y el ID del formulario.<\/p>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Si Julian no se visualiza, revisa la integraci\u00f3n con JotForms en la configuraci\u00f3n.<\/p>\r\n <\/div>\r\n \r\n \r\n <div class=\"minibloque\">\r\n <h3><i class=\"fas fa-chart-line\"><\/i> Gr\u00e1ficos del Paciente<\/h3>\r\n <div class=\"graficos-contenedor\">\r\n <div class=\"grafico-info\">\r\n <p>Selecciona un paciente del listado para visualizar sus gr\u00e1ficos:<\/p>\r\n <p class=\"paciente-seleccionado\" id=\"nombrePacienteSeleccionado\">Ning\u00fan paciente seleccionado<\/p>\r\n <p id=\"infoTratamiento\">Tratamiento: No seleccionado | Ciclo: No seleccionado<\/p>\r\n <\/div>\r\n \r\n <div class=\"placeholder-grafico\">\r\n <i class=\"fas fa-chart-bar\"><\/i>\r\n <h4>Gr\u00e1ficos de seguimiento<\/h4>\r\n <p>Al seleccionar un paciente, aqu\u00ed se mostrar\u00e1n:<\/p>\r\n <ul style=\"text-align: left; margin-top: 10px;\">\r\n <li>Evoluci\u00f3n emocional cada 14 d\u00edas<\/li>\r\n <li>Progreso general desde inicio del tratamiento<\/li>\r\n <li>Comparativa s\u00edntomas f\u00edsicos\/emocionales<\/li>\r\n <li>Adherencia al tratamiento<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mensaje-ayuda\">Los gr\u00e1ficos se actualizan con cada formulario completado por el paciente.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <div class=\"ficha-paciente-overlay\" id=\"fichaOverlay\">\r\n <div class=\"ficha-paciente-contenido\">\r\n <button class=\"cerrar-ficha\" id=\"cerrarFicha\">×<\/button>\r\n <h2 id=\"fichaTitulo\">Ficha del Paciente<\/h2>\r\n <div id=\"fichaContenido\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Datos de ejemplo para 10 pacientes\r\n const pacientes = [\r\n { \r\n id: \"PAC-001\", \r\n nombre: \"Mar\u00eda Gonz\u00e1lez\", \r\n edad: 58, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"28\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Javier Mart\u00ednez\",\r\n detalles: \"Paciente responde bien al tratamiento. Leve fatiga reportada.\",\r\n evolucion: [\r\n { fecha: \"01\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"15\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"28\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-002\", \r\n nombre: \"Carlos Ruiz\", \r\n edad: 62, \r\n diagnostico: \"C\u00e1ncer de pulm\u00f3n\", \r\n ultimaRevision: \"27\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Ansioso\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Ana L\u00f3pez\",\r\n detalles: \"Requiere apoyo emocional adicional. Reporta ansiedad pre-quimio.\",\r\n evolucion: [\r\n { fecha: \"10\/05\/2023\", emocional: 4, fisico: 5 },\r\n { fecha: \"24\/05\/2023\", emocional: 3, fisico: 6 },\r\n { fecha: \"27\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-003\", \r\n nombre: \"Ana L\u00f3pez\", \r\n edad: 45, \r\n diagnostico: \"C\u00e1ncer de colon\", \r\n ultimaRevision: \"26\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Positivo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dr. Roberto S\u00e1nchez\",\r\n detalles: \"Excelente respuesta al tratamiento. Mantener seguimiento.\",\r\n evolucion: [\r\n { fecha: \"05\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"26\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-004\", \r\n nombre: \"Javier Mart\u00ednez\", \r\n edad: 70, \r\n diagnostico: \"C\u00e1ncer de pr\u00f3stata\", \r\n ultimaRevision: \"25\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Deprimido\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"01\/06\/2023\",\r\n oncologo: \"Dra. Laura Torres\",\r\n detalles: \"Atenci\u00f3n prioritaria. Reporta dolor constante y des\u00e1nimo.\",\r\n evolucion: [\r\n { fecha: \"08\/05\/2023\", emocional: 2, fisico: 3 },\r\n { fecha: \"22\/05\/2023\", emocional: 3, fisico: 4 },\r\n { fecha: \"25\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-005\", \r\n nombre: \"Laura S\u00e1nchez\", \r\n edad: 52, \r\n diagnostico: \"C\u00e1ncer de ovario\", \r\n ultimaRevision: \"24\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Estable\", \r\n tratamiento: \"Quimioterapia - Ciclo 4\/6\",\r\n proximaCita: \"03\/06\/2023\",\r\n oncologo: \"Dr. Miguel \u00c1ngel D\u00edaz\",\r\n detalles: \"Evoluci\u00f3n favorable. Controlar n\u00e1useas post-tratamiento.\",\r\n evolucion: [\r\n { fecha: \"03\/05\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"17\/05\/2023\", emocional: 7, fisico: 7 },\r\n { fecha: \"24\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-006\", \r\n nombre: \"Pedro D\u00edaz\", \r\n edad: 61, \r\n diagnostico: \"Linfoma\", \r\n ultimaRevision: \"23\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Preocupado\", \r\n tratamiento: \"Quimioterapia - Ciclo 1\/6\",\r\n proximaCita: \"06\/06\/2023\",\r\n oncologo: \"Dra. Elena Castro\",\r\n detalles: \"Primer ciclo. Monitorear efectos secundarios iniciales.\",\r\n evolucion: [\r\n { fecha: \"20\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"23\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-007\", \r\n nombre: \"Elena Castro\", \r\n edad: 48, \r\n diagnostico: \"C\u00e1ncer de mama\", \r\n ultimaRevision: \"22\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Optimista\", \r\n tratamiento: \"Quimioterapia - Ciclo 6\/6\",\r\n proximaCita: \"07\/06\/2023\",\r\n oncologo: \"Dr. Francisco Navarro\",\r\n detalles: \"\u00daltimo ciclo completado. Preparar evaluaci\u00f3n final.\",\r\n evolucion: [\r\n { fecha: \"01\/04\/2023\", emocional: 6, fisico: 5 },\r\n { fecha: \"15\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"29\/04\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"13\/05\/2023\", emocional: 9, fisico: 8 },\r\n { fecha: \"22\/05\/2023\", emocional: 9, fisico: 8 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-008\", \r\n nombre: \"Miguel \u00c1ngel Torres\", \r\n edad: 55, \r\n diagnostico: \"C\u00e1ncer de p\u00e1ncreas\", \r\n ultimaRevision: \"21\/05\/2023\", \r\n estado: \"critico\", \r\n estadoEmocional: \"Angustiado\", \r\n tratamiento: \"Quimioterapia - Ciclo 2\/6\",\r\n proximaCita: \"02\/06\/2023\",\r\n oncologo: \"Dra. Isabel Ram\u00edrez\",\r\n detalles: \"Dolor intenso reportado. Requiere ajuste medicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"07\/05\/2023\", emocional: 3, fisico: 2 },\r\n { fecha: \"21\/05\/2023\", emocional: 2, fisico: 3 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-009\", \r\n nombre: \"Isabel Ram\u00edrez\", \r\n edad: 67, \r\n diagnostico: \"C\u00e1ncer de est\u00f3mago\", \r\n ultimaRevision: \"20\/05\/2023\", \r\n estado: \"observacion\", \r\n estadoEmocional: \"Inseguro\", \r\n tratamiento: \"Quimioterapia - Ciclo 3\/6\",\r\n proximaCita: \"04\/06\/2023\",\r\n oncologo: \"Dr. Carlos Ruiz\",\r\n detalles: \"Duda sobre eficacia tratamiento. Reforzar comunicaci\u00f3n.\",\r\n evolucion: [\r\n { fecha: \"06\/05\/2023\", emocional: 5, fisico: 4 },\r\n { fecha: \"20\/05\/2023\", emocional: 4, fisico: 5 }\r\n ]\r\n },\r\n { \r\n id: \"PAC-010\", \r\n nombre: \"Francisco Navarro\", \r\n edad: 59, \r\n diagnostico: \"C\u00e1ncer de vejiga\", \r\n ultimaRevision: \"19\/05\/2023\", \r\n estado: \"estable\", \r\n estadoEmocional: \"Tranquilo\", \r\n tratamiento: \"Quimioterapia - Ciclo 5\/6\",\r\n proximaCita: \"05\/06\/2023\",\r\n oncologo: \"Dra. Mar\u00eda Gonz\u00e1lez\",\r\n detalles: \"Progreso constante. Minimizados efectos secundarios.\",\r\n evolucion: [\r\n { fecha: \"28\/04\/2023\", emocional: 7, fisico: 6 },\r\n { fecha: \"12\/05\/2023\", emocional: 8, fisico: 7 },\r\n { fecha: \"19\/05\/2023\", emocional: 8, fisico: 7 }\r\n ]\r\n }\r\n ];\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const tablaPacientes = document.getElementById('tablaPacientes');\r\n const fichaOverlay = document.getElementById('fichaOverlay');\r\n const cerrarFicha = document.getElementById('cerrarFicha');\r\n \r\n \/\/ Cargar pacientes en la tabla - FUNCI\u00d3N CORREGIDA\r\n function cargarPacientes(listaPacientes) {\r\n console.log(\"Cargando pacientes...\", listaPacientes.length);\r\n tablaPacientes.innerHTML = '';\r\n \r\n if (listaPacientes.length === 0) {\r\n const fila = document.createElement('tr');\r\n fila.innerHTML = `<td colspan=\"7\" style=\"text-align: center; padding: 40px;\">No se encontraron pacientes<\/td>`;\r\n tablaPacientes.appendChild(fila);\r\n return;\r\n }\r\n \r\n listaPacientes.forEach(paciente => {\r\n let estadoTexto = '';\r\n let estadoClase = '';\r\n \r\n if (paciente.estado === 'estable') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'estable';\r\n } else if (paciente.estado === 'observacion') {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'observacion';\r\n } else {\r\n estadoTexto = paciente.estadoEmocional;\r\n estadoClase = 'critico';\r\n }\r\n \r\n const fila = document.createElement('tr');\r\n fila.dataset.id = paciente.id;\r\n fila.innerHTML = `\r\n <td><strong>${paciente.nombre}<\/strong><\/td>\r\n <td>${paciente.id}<\/td>\r\n <td>${paciente.edad} a\u00f1os<\/td>\r\n <td>${paciente.diagnostico}<\/td>\r\n <td>${paciente.ultimaRevision}<\/td>\r\n <td><span class=\"estado ${estadoClase}\">${estadoTexto}<\/span><\/td>\r\n <td><button class=\"descargar-btn ver-detalles\" data-id=\"${paciente.id}\" style=\"padding: 6px 12px; font-size: 0.9rem;\">Ver detalles<\/button><\/td>\r\n `;\r\n \r\n tablaPacientes.appendChild(fila);\r\n });\r\n \r\n \/\/ A\u00f1adir eventos a los botones \"Ver detalles\" - FUNCI\u00d3N CORREGIDA\r\n setTimeout(() => {\r\n document.querySelectorAll('.ver-detalles').forEach(boton => {\r\n boton.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n const id = this.getAttribute('data-id');\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Tambi\u00e9n hacer que toda la fila sea clickeable\r\n document.querySelectorAll('#tablaPacientes tr').forEach(fila => {\r\n if (fila.dataset.id) {\r\n fila.addEventListener('click', function() {\r\n const id = this.dataset.id;\r\n const paciente = pacientes.find(p => p.id === id);\r\n if (paciente) {\r\n abrirFichaPaciente(paciente);\r\n }\r\n });\r\n }\r\n });\r\n }, 100);\r\n }\r\n \r\n \/\/ Funci\u00f3n para abrir la ficha del paciente\r\n function abrirFichaPaciente(paciente) {\r\n console.log(\"Abriendo ficha de:\", paciente.nombre);\r\n \r\n \/\/ Actualizar t\u00edtulo\r\n document.getElementById('fichaTitulo').textContent = `Ficha de ${paciente.nombre}`;\r\n \r\n \/\/ Crear contenido de la ficha\r\n let contenidoHTML = `\r\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px;\">\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Informaci\u00f3n Personal<\/h3>\r\n <p><strong>ID:<\/strong> ${paciente.id}<\/p>\r\n <p><strong>Edad:<\/strong> ${paciente.edad} a\u00f1os<\/p>\r\n <p><strong>Diagn\u00f3stico:<\/strong> ${paciente.diagnostico}<\/p>\r\n <p><strong>Tratamiento actual:<\/strong> ${paciente.tratamiento}<\/p>\r\n <\/div>\r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Seguimiento<\/h3>\r\n <p><strong>\u00daltima revisi\u00f3n:<\/strong> ${paciente.ultimaRevision}<\/p>\r\n <p><strong>Pr\u00f3xima cita:<\/strong> ${paciente.proximaCita}<\/p>\r\n <p><strong>Onc\u00f3logo asignado:<\/strong> ${paciente.oncologo}<\/p>\r\n <p><strong>Estado emocional:<\/strong> <span class=\"estado ${paciente.estado}\">${paciente.estadoEmocional}<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-bottom: 30px;\">\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Observaciones<\/h3>\r\n <p>${paciente.detalles}<\/p>\r\n <\/div>\r\n \r\n <div>\r\n <h3 style=\"color: var(--azul-principal); margin-bottom: 15px;\">Evoluci\u00f3n emocional (escala 1-10)<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px;\">\r\n `;\r\n \r\n \/\/ A\u00f1adir evoluci\u00f3n\r\n paciente.evolucion.forEach(item => {\r\n contenidoHTML += `\r\n <div style=\"background-color: var(--gris-claro); padding: 15px; border-radius: 8px;\">\r\n <p><strong>Fecha:<\/strong> ${item.fecha}<\/p>\r\n <p><strong>Estado emocional:<\/strong> ${item.emocional}\/10<\/p>\r\n <p><strong>Estado f\u00edsico:<\/strong> ${item.fisico}\/10<\/p>\r\n <\/div>\r\n `;\r\n });\r\n \r\n contenidoHTML += `\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 30px; text-align: center;\">\r\n <button class=\"descargar-btn\" style=\"padding: 12px 25px; font-size: 1rem;\">\r\n <i class=\"fas fa-file-medical\"><\/i> Generar informe completo\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.getElementById('fichaContenido').innerHTML = contenidoHTML;\r\n \r\n \/\/ Mostrar el overlay\r\n fichaOverlay.style.display = 'flex';\r\n \r\n \/\/ Tambi\u00e9n actualizar los gr\u00e1ficos en la zona C\r\n seleccionarPaciente(paciente);\r\n }\r\n \r\n \/\/ Funci\u00f3n para seleccionar un paciente (actualiza zona C)\r\n function seleccionarPaciente(paciente) {\r\n console.log(\"Seleccionando paciente:\", paciente.nombre);\r\n \r\n \/\/ Actualizar nombre en gr\u00e1ficos\r\n document.getElementById('nombrePacienteSeleccionado').textContent = paciente.nombre + \" (\" + paciente.id + \")\";\r\n document.getElementById('infoTratamiento').textContent = `Tratamiento: ${paciente.tratamiento}`;\r\n \r\n \/\/ Aqu\u00ed normalmente cargar\u00edas los gr\u00e1ficos del paciente\r\n console.log(`Paciente seleccionado: ${paciente.nombre} (${paciente.id})`);\r\n }\r\n \r\n \/\/ Cerrar ficha\r\n cerrarFicha.addEventListener('click', function() {\r\n fichaOverlay.style.display = 'none';\r\n });\r\n \r\n \/\/ Cerrar al hacer clic fuera del contenido\r\n fichaOverlay.addEventListener('click', function(e) {\r\n if (e.target === fichaOverlay) {\r\n fichaOverlay.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ Funcionalidad de b\u00fasqueda\r\n document.getElementById('buscarPaciente').addEventListener('input', function(e) {\r\n const textoBusqueda = e.target.value.toLowerCase();\r\n \r\n if (textoBusqueda === '') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => \r\n paciente.nombre.toLowerCase().includes(textoBusqueda) || \r\n paciente.id.toLowerCase().includes(textoBusqueda) ||\r\n paciente.diagnostico.toLowerCase().includes(textoBusqueda)\r\n );\r\n \r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Funcionalidad de filtro por estado\r\n document.getElementById('filtroEstado').addEventListener('change', function(e) {\r\n const estado = e.target.value;\r\n \r\n if (estado === 'todos') {\r\n cargarPacientes(pacientes);\r\n return;\r\n }\r\n \r\n const pacientesFiltrados = pacientes.filter(paciente => paciente.estado === estado);\r\n cargarPacientes(pacientesFiltrados);\r\n });\r\n \r\n \/\/ Simular activaci\u00f3n de Julian\r\n document.getElementById('activarJulian').addEventListener('click', function() {\r\n alert(\"Conectando con el asistente virtual Julian...\\n\\nEn una implementaci\u00f3n real, aqu\u00ed se cargar\u00eda el widget de JotForms.\\n\\nPor favor, verifica:\\n1. La API Key de JotForms est\u00e1 configurada\\n2. El ID del formulario es correcto\\n3. Los permisos est\u00e1n habilitados\");\r\n });\r\n \r\n \/\/ INICIALIZACI\u00d3N AUTOM\u00c1TICA AL CARGAR LA P\u00c1GINA\r\n window.addEventListener('DOMContentLoaded', (event) => {\r\n console.log('DOM completamente cargado');\r\n \/\/ Cargar los pacientes autom\u00e1ticamente\r\n cargarPacientes(pacientes);\r\n \r\n \/\/ Seleccionar el primer paciente por defecto\r\n setTimeout(() => {\r\n if (pacientes.length > 0) {\r\n seleccionarPaciente(pacientes[0]);\r\n }\r\n }, 500);\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-4a53bd4 e-con-full e-flex e-con e-parent\" data-id=\"4a53bd4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-590c19c elementor-widget elementor-widget-html\" data-id=\"590c19c\" 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 <title>Olas de Vida \u00b7 Panel M\u00e9dico<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n \r\n \r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\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: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n }\r\n \r\n .ov-root {\r\n padding: 20px;\r\n min-height: 100vh;\r\n }\r\n \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 .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-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 .ov-inner {\r\n padding: 24px;\r\n }\r\n \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 }\r\n \r\n .ov-card-value {\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: #94a3b8;\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 .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-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #94a3b8;\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 }\r\n \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: #94a3b8;\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 .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: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .patient-name-btn:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \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 .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 min-height: 350px;\r\n }\r\n \r\n .ov-side-title {\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: #94a3b8;\r\n margin-bottom: 12px;\r\n }\r\n \r\n .pdf-links-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n margin-top: auto;\r\n }\r\n \r\n .ov-btn {\r\n padding: 8px 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: 12px;\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 gap: 6px;\r\n width: 100%;\r\n justify-content: center;\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-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 \/* ASISTENTE IA - IFRAME EMBEBIDO *\/\r\n .ai-iframe-container {\r\n flex-grow: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n margin-top: 8px;\r\n position: relative;\r\n background: rgba(15, 23, 42, 0.5);\r\n }\r\n \r\n .ai-iframe-container iframe {\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n display: block;\r\n min-height: 250px;\r\n }\r\n \r\n \/* CONTENEDOR DE 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: 12px;\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: #94a3b8;\r\n margin-bottom: 8px;\r\n text-align: center;\r\n font-weight: 500;\r\n }\r\n \r\n .chart-canvas-container {\r\n flex-grow: 1;\r\n position: relative;\r\n min-height: 120px;\r\n }\r\n \r\n .chart-canvas {\r\n width: 100% !important;\r\n height: 100% !important;\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 .stat-box {\r\n flex: 1;\r\n padding: 6px;\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.8;\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 #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-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: #94a3b8;\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .modal-close:hover {\r\n background: #334155;\r\n color: #e2e8f0;\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 .ficha-content h3 {\r\n color: #93c5fd;\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 h3:first-child {\r\n margin-top: 0;\r\n }\r\n \r\n .ficha-content p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\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: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n @media (max-width: 768px) {\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 min-height: 320px;\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 .ai-iframe-container iframe {\r\n min-height: 200px;\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 <\/style>\r\n<\/head>\r\n\r\n<body>\r\n<div class=\"ov-root\">\r\n <div class=\"ov-wrapper\">\r\n\r\n \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 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n \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 \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 sus 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 \r\n <tr>\r\n <td><button class=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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=\"patient-name-btn\" onclick=\"openPatientModal('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 \r\n <div class=\"ov-bottom-layout\">\r\n\r\n \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 <button class=\"ov-btn\" onclick=\"downloadPDF('ultimo-ciclo')\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/button>\r\n \r\n <button class=\"ov-btn\" onclick=\"downloadPDF('evolucion-global')\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/button>\r\n \r\n <button class=\"ov-btn ov-btn-outline\" onclick=\"downloadPDF('resumen-ejecutivo')\">\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 informe\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \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=\"ai-iframe-container\" id=\"ai-container\">\r\n <iframe \r\n src=\"https:\/\/www.jotform.com\/app\/230155277271048\"\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 <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n \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 \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"cycle-chart-title\">\u00daltimo ciclo (dolor\/\u00e1nimo)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"cycle-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" id=\"general-chart-title\">Evoluci\u00f3n general (semanas)<\/div>\r\n <div class=\"chart-canvas-container\">\r\n <canvas id=\"general-chart\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n \r\n \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\r\n<div id=\"patient-modal\">\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=\"closePatientModal()\">\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 \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE PACIENTES CON GR\u00c1FICOS\r\n\/\/ ============================================\r\nconst pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n ficha: `\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 graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14'],\r\n dolor: [6, 7, 8, 7, 8, 9],\r\n animo: [7, 7, 6, 7, 7, 8]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4', 'Sem 5', 'Sem 6'],\r\n dolor: [8, 7, 6, 7, 6, 7],\r\n animo: [5, 6, 6, 7, 7, 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 ficha: `\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', 'D\u00eda 10'],\r\n dolor: [5, 6, 6, 5, 6],\r\n animo: [3, 2, 3, 4, 3]\r\n },\r\n evolucion: {\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 nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV003<\/h3><p>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/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, 6, 5, 6],\r\n animo: [6, 7, 7, 7]\r\n },\r\n evolucion: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [6, 5, 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 \/\/ ... m\u00e1s pacientes con datos b\u00e1sicos\r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>C\u00e1ncer de pulm\u00f3n \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>C\u00e1ncer de p\u00e1ncreas \u00b7 Dolor intenso<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>C\u00e1ncer de mama \u00b7 Fiebre 38.8\u00b0C<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n ficha: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>C\u00e1ncer de pr\u00f3stata \u00b7 Estable<\/p>`,\r\n graficos: defaultGraficos()\r\n },\r\n \r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n ficha: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/p>`,\r\n graficos: defaultGraficos()\r\n }\r\n};\r\n\r\n\/\/ Funci\u00f3n para gr\u00e1ficos por defecto\r\nfunction defaultGraficos() {\r\n return {\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 evolucion: {\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\/\/ ============================================\r\n\/\/ VARIABLES PARA GR\u00c1FICOS\r\n\/\/ ============================================\r\nlet cicloChart = null;\r\nlet evolucionChart = null;\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PRINCIPALES\r\n\/\/ ============================================\r\n\r\n\/\/ Funci\u00f3n para abrir modal Y actualizar gr\u00e1ficos\r\nfunction openPatientModal(pacienteId) {\r\n console.log(\"Abriendo:\", pacienteId);\r\n \r\n const paciente = pacientes[pacienteId];\r\n if (!paciente) {\r\n alert(\"Paciente no encontrado\");\r\n return;\r\n }\r\n \r\n \/\/ 1. ACTUALIZAR MODAL\r\n document.getElementById('modal-title').textContent = `${paciente.nombre} \u00b7 ${pacienteId}`;\r\n document.getElementById('patient-info').innerHTML = paciente.ficha;\r\n document.getElementById('patient-modal').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ 2. ACTUALIZAR GR\u00c1FICOS\r\n updateGraficos(pacienteId, paciente);\r\n}\r\n\r\n\/\/ Funci\u00f3n para actualizar gr\u00e1ficos\r\nfunction updateGraficos(pacienteId, paciente) {\r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('charts-title').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('charts-subtitle').textContent = `ID: ${pacienteId}`;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n const stats = paciente.graficos.stats;\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 t\u00edtulos de gr\u00e1ficos\r\n document.getElementById('cycle-chart-title').textContent = `\u00daltimo ciclo \u00b7 Dolor: ${pacienteId === 'ODV001' ? '9\/10' : '6\/10'}`;\r\n document.getElementById('general-chart-title').textContent = `Evoluci\u00f3n \u00b7 ${paciente.nombre.split(' ')[0]}`;\r\n \r\n \/\/ Crear\/actualizar gr\u00e1ficos\r\n crearGraficos(paciente.graficos);\r\n}\r\n\r\n\/\/ Funci\u00f3n para crear gr\u00e1ficos con Chart.js\r\nfunction crearGraficos(datosGraficos) {\r\n const ctxCiclo = document.getElementById('cycle-chart');\r\n const ctxEvolucion = document.getElementById('general-chart');\r\n \r\n \/\/ Destruir gr\u00e1ficos anteriores si existen\r\n if (cicloChart) cicloChart.destroy();\r\n if (evolucionChart) evolucionChart.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n cicloChart = new Chart(ctxCiclo, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.ciclo.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.ciclo.dolor,\r\n borderColor: '#ef4444',\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: datosGraficos.ciclo.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n evolucionChart = new Chart(ctxEvolucion, {\r\n type: 'line',\r\n data: {\r\n labels: datosGraficos.evolucion.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datosGraficos.evolucion.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.4,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: datosGraficos.evolucion.animo,\r\n borderColor: '#10b981',\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: {\r\n display: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n beginAtZero: true,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2,\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n },\r\n x: {\r\n ticks: {\r\n color: '#94a3b8'\r\n },\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para cerrar modal\r\nfunction closePatientModal() {\r\n document.getElementById('patient-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES PDF\r\n\/\/ ============================================\r\n\r\nfunction downloadPDF(tipo) {\r\n const pacienteNombre = document.getElementById('charts-title').textContent.replace('\ud83d\udcc8 ', '');\r\n \r\n let mensaje = '';\r\n switch(tipo) {\r\n case 'ultimo-ciclo':\r\n mensaje = `Generando PDF del \u00faltimo ciclo para: ${pacienteNombre}`;\r\n break;\r\n case 'evolucion-global':\r\n mensaje = `Generando evoluci\u00f3n global para: ${pacienteNombre}`;\r\n break;\r\n case 'resumen-ejecutivo':\r\n mensaje = `Generando resumen ejecutivo para: ${pacienteNombre}`;\r\n break;\r\n }\r\n \r\n alert(mensaje);\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N\r\n\/\/ ============================================\r\n\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico inicializado');\r\n \r\n \/\/ Inicializar gr\u00e1ficos con primer paciente\r\n updateGraficos('ODV001', pacientes.ODV001);\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('patient-modal');\r\n \r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n closePatientModal();\r\n }\r\n });\r\n \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 \/\/ Configurar iframe de IA\r\n const aiIframe = document.querySelector('#ai-container iframe');\r\n if (aiIframe) {\r\n aiIframe.onload = function() {\r\n console.log('\u2705 Iframe de IA cargado');\r\n };\r\n }\r\n});\r\n<\/script>\r\n\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-ce9845c e-con-full e-flex e-con e-parent\" data-id=\"ce9845c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-881a859 elementor-widget elementor-widget-html\" data-id=\"881a859\" 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>Videoteca \u00b7 Olas de Vida<\/title>\r\n <style>\r\n \/* CONTENEDOR GENERAL *\/\r\n .ov-video-admin{\r\n font-family:system-ui,-apple-system,sans-serif;\r\n color:#e5e7eb;\r\n padding: 20px;\r\n background: #0f172a;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* LAYOUT PRINCIPAL: REPRODUCTOR + LISTA *\/\r\n .ov-video-shell{\r\n background:radial-gradient(circle at top,#0f172a,#020617 60%);\r\n border-radius:1.8rem;\r\n border:1px solid #1f2937;\r\n padding:1.5rem 1.7rem;\r\n box-shadow:0 20px 60px rgba(0,0,0,.65);\r\n max-width:1200px;\r\n margin:0 auto;\r\n }\r\n\r\n .ov-video-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:1rem;\r\n }\r\n .ov-video-title{\r\n font-size:1.8rem;\r\n font-weight:800;\r\n background:linear-gradient(90deg,#0ea5e9,#7dd3fc);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n .ov-video-sub{\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n\r\n \/* BARRA DE B\u00daSQUEDA *\/\r\n .ov-search-container{\r\n margin:0.8rem 0;\r\n display:flex;\r\n gap:0.5rem;\r\n }\r\n .ov-search-input{\r\n flex:1;\r\n padding:0.6rem 1rem;\r\n border-radius:0.9rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.9rem;\r\n }\r\n .ov-search-input:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n\r\n \/* ICONO ENGRANAJE (ADMIN) *\/\r\n .ov-gear-btn{\r\n width:38px;\r\n height:38px;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n cursor:pointer;\r\n transition:.18s;\r\n }\r\n .ov-gear-btn:hover{\r\n background:#0ea5e9;\r\n color:#020617;\r\n transform:translateY(-1px);\r\n }\r\n\r\n \/* GRID PRINCIPAL: PLAYER + LISTA *\/\r\n .ov-main-grid{\r\n display:grid;\r\n grid-template-columns:2fr 1.1fr;\r\n gap:1.2rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-main-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* PLAYER *\/\r\n .ov-player{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:1rem;\r\n animation:fadeIn 0.3s ease;\r\n }\r\n .ov-player-iframe{\r\n width:100%;\r\n aspect-ratio:16\/9;\r\n border-radius:1rem;\r\n border:none;\r\n background:#000;\r\n }\r\n .ov-player-meta{\r\n margin-top:0.8rem;\r\n }\r\n .ov-player-title{\r\n font-size:1rem;\r\n font-weight:600;\r\n }\r\n .ov-player-desc{\r\n margin-top:0.25rem;\r\n font-size:.85rem;\r\n color:#9ca3af;\r\n }\r\n\r\n \/* LISTA DE V\u00cdDEOS *\/\r\n .ov-list{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n max-height:460px;\r\n overflow:auto;\r\n }\r\n .ov-list-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-bottom:0.8rem;\r\n }\r\n .ov-list-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n }\r\n .ov-list-count{\r\n font-size:.75rem;\r\n color:#6b7280;\r\n background:#111827;\r\n padding:0.2rem 0.6rem;\r\n border-radius:1rem;\r\n }\r\n .ov-list-item{\r\n display:flex;\r\n flex-direction:row;\r\n gap:0.4rem;\r\n padding:0.4rem 0.35rem;\r\n border-radius:0.6rem;\r\n cursor:pointer;\r\n align-items:flex-start;\r\n transition:all 0.2s ease;\r\n }\r\n .ov-list-item:hover{\r\n background:rgba(14,165,233,.18);\r\n transform:translateX(4px);\r\n }\r\n .ov-list-item.active{\r\n background:rgba(14,165,233,.32);\r\n border-left:3px solid #0ea5e9;\r\n }\r\n .ov-thumb{\r\n width:80px;\r\n height:45px;\r\n border-radius:0.4rem;\r\n background:#111827;\r\n flex-shrink:0;\r\n overflow:hidden;\r\n position:relative;\r\n }\r\n .ov-thumb img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n .ov-thumb::after{\r\n content:\"\u25b6\";\r\n position:absolute;\r\n top:50%;\r\n left:50%;\r\n transform:translate(-50%,-50%);\r\n font-size:.7rem;\r\n color:white;\r\n opacity:0;\r\n transition:opacity 0.2s;\r\n }\r\n .ov-list-item:hover .ov-thumb::after{\r\n opacity:1;\r\n }\r\n .ov-list-text{\r\n flex:1;\r\n }\r\n .ov-list-item-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n }\r\n .ov-list-item-desc{\r\n font-size:.78rem;\r\n color:#9ca3af;\r\n display:-webkit-box;\r\n -webkit-line-clamp:2;\r\n -webkit-box-orient:vertical;\r\n overflow:hidden;\r\n }\r\n\r\n \/* TOAST *\/\r\n #ov-toast{\r\n position:fixed;\r\n bottom:24px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:#10b981;\r\n color:#01110a;\r\n padding:0.6rem 1.5rem;\r\n border-radius:999px;\r\n font-size:.85rem;\r\n font-weight:600;\r\n z-index:9999;\r\n opacity:0;\r\n transition:all .25s;\r\n box-shadow:0 8px 25px rgba(16,185,129,.3);\r\n }\r\n #ov-toast.show{\r\n opacity:1;\r\n transform:translateX(-50%) translateY(-8px);\r\n }\r\n #ov-toast.error{\r\n background:#ef4444;\r\n color:#f9fafb;\r\n }\r\n\r\n \/* OVERLAY GENERAL (LOGIN + PANEL) *\/\r\n .ov-overlay{\r\n position:fixed;\r\n inset:0;\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n background:rgba(15,23,42,.95);\r\n backdrop-filter:blur(8px);\r\n z-index:9990;\r\n padding:1rem;\r\n animation:fadeIn 0.3s ease;\r\n }\r\n\r\n \/* TARJETA LOGIN ADMIN *\/\r\n .ov-login-card{\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.8rem 1.5rem;\r\n width:100%;\r\n max-width:380px;\r\n box-shadow:0 24px 70px rgba(0,0,0,.8);\r\n text-align:center;\r\n animation:slideUp 0.4s ease;\r\n }\r\n .ov-login-title{\r\n font-size:1.1rem;\r\n font-weight:700;\r\n }\r\n .ov-login-sub{\r\n margin-top:0.3rem;\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n .ov-login-input{\r\n width:100%;\r\n margin-top:1.1rem;\r\n padding:0.7rem 0.9rem;\r\n border-radius:0.9rem;\r\n border:2px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.9rem;\r\n }\r\n .ov-login-input:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-login-btns{\r\n margin-top:1rem;\r\n display:flex;\r\n gap:0.6rem;\r\n justify-content:center;\r\n }\r\n .ov-btn{\r\n padding:0.6rem 1.3rem;\r\n border-radius:999px;\r\n border:none;\r\n cursor:pointer;\r\n font-size:.85rem;\r\n font-weight:600;\r\n transition:all 0.2s;\r\n }\r\n .ov-btn:hover{\r\n transform:translateY(-1px);\r\n }\r\n .ov-btn:active{\r\n transform:translateY(0);\r\n }\r\n .ov-btn-primary{background:#0ea5e9;color:#031016;}\r\n .ov-btn-secondary{background:#020617;color:#e5e7eb;border:1px solid #4b5563;}\r\n .ov-login-error{\r\n margin-top:0.6rem;\r\n min-height:1.1rem;\r\n font-size:.8rem;\r\n color:#fca5a5;\r\n transition:opacity 0.3s;\r\n }\r\n\r\n \/* PANEL ADMIN *\/\r\n .ov-admin-panel{\r\n display:none;\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.4rem 1.4rem;\r\n width:100%;\r\n max-width:1100px;\r\n max-height:90vh;\r\n box-shadow:0 24px 70px rgba(0,0,0,.9);\r\n overflow:auto;\r\n animation:slideUp 0.4s ease;\r\n }\r\n .ov-admin-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:0.8rem;\r\n }\r\n .ov-admin-title{\r\n font-size:1.2rem;\r\n font-weight:700;\r\n color:#e5e7eb;\r\n }\r\n .ov-admin-badge{\r\n font-size:.8rem;\r\n color:#9ca3af;\r\n }\r\n .ov-admin-tools{\r\n display:flex;\r\n gap:0.5rem;\r\n }\r\n .ov-admin-close{\r\n padding:0.4rem 0.9rem;\r\n border-radius:999px;\r\n border:none;\r\n background:#ef4444;\r\n color:#f9fafb;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-close:hover{\r\n background:#dc2626;\r\n transform:translateY(-1px);\r\n }\r\n .ov-admin-export{\r\n padding:0.4rem 0.9rem;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#1f2937;\r\n color:#e5e7eb;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-export:hover{\r\n background:#374151;\r\n transform:translateY(-1px);\r\n }\r\n\r\n \/* GRID PANEL *\/\r\n .ov-admin-grid{\r\n display:grid;\r\n grid-template-columns:1.6fr 1.1fr;\r\n gap:1rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-admin-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* LISTA ADMIN (TABLA SIMPLE) *\/\r\n .ov-admin-block{\r\n background:#020617;\r\n border-radius:1rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n }\r\n .ov-admin-block-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n margin-bottom:0.4rem;\r\n }\r\n .ov-admin-table-wrap{\r\n max-height:380px;\r\n overflow:auto;\r\n border-radius:0.8rem;\r\n border:1px solid #111827;\r\n }\r\n .ov-admin-table{\r\n width:100%;\r\n border-collapse:collapse;\r\n font-size:.8rem;\r\n }\r\n .ov-admin-table th,\r\n .ov-admin-table td{\r\n padding:0.45rem 0.5rem;\r\n border-bottom:1px solid #111827;\r\n }\r\n .ov-admin-table th{\r\n text-align:left;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n font-size:.7rem;\r\n color:#9ca3af;\r\n position:sticky;\r\n top:0;\r\n background:#020617;\r\n }\r\n .ov-admin-table tr{\r\n transition:background 0.2s;\r\n }\r\n .ov-admin-table tr:hover{\r\n background:rgba(14,165,233,.12);\r\n }\r\n .ov-admin-actions{\r\n display:flex;\r\n gap:0.2rem;\r\n }\r\n .ov-admin-actions button{\r\n border:none;\r\n border-radius:0.4rem;\r\n font-size:.7rem;\r\n padding:0.3rem 0.6rem;\r\n cursor:pointer;\r\n transition:all 0.2s;\r\n display:flex;\r\n align-items:center;\r\n gap:0.2rem;\r\n }\r\n .ov-btn-edit{background:#f59e0b;color:#111827;}\r\n .ov-btn-del{background:#ef4444;color:#f9fafb;}\r\n .ov-btn-up{background:#1e293b;color:#e5e7eb;}\r\n .ov-btn-down{background:#1f2937;color:#e5e7eb;}\r\n .ov-admin-actions button:hover{\r\n transform:translateY(-1px);\r\n filter:brightness(1.1);\r\n }\r\n\r\n \/* FORM ADMIN *\/\r\n .ov-admin-input,\r\n .ov-admin-textarea{\r\n width:100%;\r\n padding:0.65rem 0.75rem;\r\n border-radius:0.7rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.85rem;\r\n margin-bottom:0.6rem;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-textarea{\r\n min-height:80px;\r\n resize:vertical;\r\n }\r\n .ov-admin-input:focus,\r\n .ov-admin-textarea:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-admin-input.error{\r\n border-color:#ef4444;\r\n }\r\n .ov-admin-btn-row{\r\n display:flex;\r\n justify-content:flex-end;\r\n gap:0.5rem;\r\n margin-top:0.4rem;\r\n }\r\n .ov-admin-btn-sm{\r\n padding:0.5rem 1rem;\r\n border-radius:999px;\r\n border:none;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n font-weight:600;\r\n transition:all 0.2s;\r\n }\r\n .ov-admin-btn-sm:hover{\r\n transform:translateY(-1px);\r\n }\r\n .ov-admin-btn-secondary{\r\n background:#020617;\r\n color:#e5e7eb;\r\n border:1px solid #4b5563;\r\n }\r\n .ov-admin-btn-primary{\r\n background:#0ea5e9;\r\n color:#02131e;\r\n }\r\n\r\n \/* IMPORTAR *\/\r\n .ov-import-container{\r\n margin-top:1rem;\r\n padding:1rem;\r\n border:1px dashed #4b5563;\r\n border-radius:0.8rem;\r\n background:rgba(30,41,59,.3);\r\n }\r\n .ov-import-title{\r\n font-size:.85rem;\r\n color:#9ca3af;\r\n margin-bottom:0.5rem;\r\n }\r\n .ov-import-textarea{\r\n width:100%;\r\n min-height:80px;\r\n padding:0.6rem;\r\n border-radius:0.6rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.8rem;\r\n font-family:monospace;\r\n margin-bottom:0.5rem;\r\n resize:vertical;\r\n }\r\n .ov-import-note{\r\n font-size:.7rem;\r\n color:#6b7280;\r\n margin-top:0.3rem;\r\n }\r\n\r\n \/* ANIMACIONES *\/\r\n @keyframes fadeIn{\r\n from{opacity:0;}\r\n to{opacity:1;}\r\n }\r\n @keyframes slideUp{\r\n from{\r\n opacity:0;\r\n transform:translateY(20px);\r\n }\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n }\r\n\r\n \/* ESTADOS VAC\u00cdOS *\/\r\n .ov-empty-state{\r\n text-align:center;\r\n padding:2rem 1rem;\r\n color:#6b7280;\r\n }\r\n .ov-empty-icon{\r\n font-size:2rem;\r\n margin-bottom:0.5rem;\r\n opacity:0.5;\r\n }\r\n .ov-empty-text{\r\n font-size:.9rem;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"ov-video-admin\">\r\n \r\n <div id=\"ov-toast\"><\/div>\r\n\r\n \r\n <div class=\"ov-video-shell\">\r\n <div class=\"ov-video-header\">\r\n <div>\r\n <div class=\"ov-video-title\">Videoteca \u00b7 Olas de Vida<\/div>\r\n <div class=\"ov-video-sub\">Selecciona un v\u00eddeo para verlo. El engranaje es solo para administraci\u00f3n.<\/div>\r\n <\/div>\r\n <button class=\"ov-gear-btn\" id=\"ov-open-admin\" title=\"Panel de control\">\r\n \u2699\ufe0f\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-search-container\">\r\n <input type=\"text\" class=\"ov-search-input\" id=\"ov-search-input\" placeholder=\"Buscar v\u00eddeos por t\u00edtulo o descripci\u00f3n...\" \/>\r\n <\/div>\r\n\r\n <div class=\"ov-main-grid\">\r\n \r\n <div class=\"ov-player\">\r\n <iframe\r\n id=\"ov-player-frame\"\r\n class=\"ov-player-iframe\"\r\n src=\"\"\r\n allowfullscreen\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n title=\"Reproductor de video\"\r\n ><\/iframe>\r\n <div class=\"ov-player-meta\">\r\n <div class=\"ov-player-title\" id=\"ov-player-title\">Selecciona un v\u00eddeo de la lista<\/div>\r\n <div class=\"ov-player-desc\" id=\"ov-player-desc\">Haz clic en cualquier v\u00eddeo para comenzar a reproducirlo.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-list\">\r\n <div class=\"ov-list-header\">\r\n <div class=\"ov-list-title\">Listado de v\u00eddeos<\/div>\r\n <div class=\"ov-list-count\" id=\"ov-video-count\">0 videos<\/div>\r\n <\/div>\r\n <div id=\"ov-video-list\" class=\"ov-video-list-container\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-overlay\" id=\"ov-overlay\">\r\n \r\n <div class=\"ov-login-card\" id=\"ov-login-card\">\r\n <div class=\"ov-login-title\">\ud83d\udd10 Acceso administraci\u00f3n<\/div>\r\n <div class=\"ov-login-sub\">Introduce la contrase\u00f1a para abrir el panel de control.<\/div>\r\n <input\r\n type=\"password\"\r\n id=\"ov-admin-pass\"\r\n class=\"ov-login-input\"\r\n placeholder=\"Contrase\u00f1a\"\r\n autocomplete=\"off\"\r\n \/>\r\n <div class=\"ov-login-btns\">\r\n <button class=\"ov-btn ov-btn-secondary\" id=\"ov-login-cancel\">Cancelar<\/button>\r\n <button class=\"ov-btn ov-btn-primary\" id=\"ov-login-submit\">Entrar<\/button>\r\n <\/div>\r\n <div class=\"ov-login-error\" id=\"ov-login-error\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-panel\" id=\"ov-admin-panel\">\r\n <div class=\"ov-admin-header\">\r\n <div>\r\n <div class=\"ov-admin-title\">\ud83c\udfac Panel de control de v\u00eddeos<\/div>\r\n <div class=\"ov-admin-badge\">Olas de Vida \u00b7 Gesti\u00f3n local (navegador)<\/div>\r\n <\/div>\r\n <div class=\"ov-admin-tools\">\r\n <button class=\"ov-admin-export\" id=\"ov-admin-export\">\ud83d\udce5 Exportar<\/button>\r\n <button class=\"ov-admin-close\" id=\"ov-admin-close\">\u2715 Cerrar<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-admin-grid\">\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\">\ud83d\udccb Listado actual (<span id=\"ov-admin-count\">0<\/span> v\u00eddeos)<\/div>\r\n <div class=\"ov-admin-table-wrap\">\r\n <table class=\"ov-admin-table\">\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>T\u00edtulo<\/th>\r\n <th>ID YouTube<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"ov-admin-tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n \r\n \r\n <div class=\"ov-import-container\">\r\n <div class=\"ov-import-title\">\ud83d\udce4 Importar v\u00eddeos (JSON)<\/div>\r\n <textarea class=\"ov-import-textarea\" id=\"ov-import-textarea\" placeholder='[{\"title\":\"Ejemplo\",\"youtubeId\":\"dQw4w9WgXcQ\",\"desc\":\"Descripci\u00f3n...\"}]'><\/textarea>\r\n <div class=\"ov-admin-btn-row\">\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-secondary\" id=\"ov-import-clear\">Limpiar<\/button>\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-primary\" id=\"ov-import-submit\">Importar<\/button>\r\n <\/div>\r\n <div class=\"ov-import-note\">Pega aqu\u00ed el JSON exportado para restaurar los v\u00eddeos.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\" id=\"ov-admin-form-title\">\u2795 A\u00f1adir nuevo v\u00eddeo<\/div>\r\n <input type=\"text\" id=\"ov-admin-title\" class=\"ov-admin-input\" placeholder=\"T\u00edtulo del v\u00eddeo *\" \/>\r\n <input type=\"text\" id=\"ov-admin-url\" class=\"ov-admin-input\" placeholder=\"URL completa o ID de YouTube *\" \/>\r\n <textarea id=\"ov-admin-desc\" class=\"ov-admin-textarea\" placeholder=\"Descripci\u00f3n (opcional)\"><\/textarea>\r\n <div class=\"ov-admin-btn-row\">\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-secondary\" id=\"ov-admin-cancel\">Cancelar<\/button>\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-primary\" id=\"ov-admin-save\">\ud83d\udcbe Guardar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n console.log(\"=== INICIANDO REPRODUCTOR OLAS DE VIDA ===\");\r\n \r\n \/\/ Contrase\u00f1a encriptada (SHA-256 de \"olas2025\")\r\n const PASSWORD_HASH = \"8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918\";\r\n const STORAGE_KEY = \"olasdevida_videos_v2\";\r\n\r\n \/\/ V\u00cdDEOS POR DEFECTO (TEM\u00c1TICA ONCOL\u00d3GICA)\r\n const DEFAULT_VIDEOS = [\r\n {\r\n id: 1,\r\n title: \"Introducci\u00f3n al cuidado oncol\u00f3gico\",\r\n desc: \"Conceptos b\u00e1sicos para pacientes y familias sobre el proceso de tratamiento.\",\r\n youtubeId: \"dQw4w9WgXcQ\" \/\/ REEMPLAZA ESTE ID\r\n },\r\n {\r\n id: 2,\r\n title: \"Nutrici\u00f3n durante la quimioterapia\",\r\n desc: \"Gu\u00eda pr\u00e1ctica de alimentos recomendados y a evitar.\",\r\n youtubeId: \"9bZkp7q19f0\" \/\/ REEMPLAZA ESTE ID\r\n },\r\n {\r\n id: 3,\r\n title: \"Ejercicios de relajaci\u00f3n y respiraci\u00f3n\",\r\n desc: \"T\u00e9cnicas para manejar el estr\u00e9s y la ansiedad durante el tratamiento.\",\r\n youtubeId: \"kJQP7kiw5Fk\" \/\/ REEMPLAZA ESTE ID\r\n }\r\n ];\r\n\r\n let videos = [];\r\n let currentIndex = 0;\r\n let adminLogged = false;\r\n let editIndex = null;\r\n let searchTerm = '';\r\n\r\n \/\/ ---------- FUNCIONES DE SEGURIDAD ----------\r\n async function sha256(message) {\r\n const msgBuffer = new TextEncoder().encode(message);\r\n const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);\r\n const hashArray = Array.from(new Uint8Array(hashBuffer));\r\n return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');\r\n }\r\n\r\n \/\/ ---------- TOAST ----------\r\n function ovToast(msg, isError = false){\r\n const t = document.getElementById(\"ov-toast\");\r\n if(!t) return;\r\n t.textContent = msg;\r\n t.className = isError ? \"error\" : \"\";\r\n t.classList.add(\"show\");\r\n setTimeout(()=>t.classList.remove(\"show\"), 3000);\r\n }\r\n\r\n \/\/ ---------- DATA ----------\r\n function loadVideos(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n const parsed = raw ? JSON.parse(raw) : null;\r\n if(Array.isArray(parsed) && parsed.length){\r\n videos = parsed;\r\n console.log(\"V\u00eddeos cargados desde localStorage:\", videos.length);\r\n }else{\r\n videos = [...DEFAULT_VIDEOS];\r\n console.log(\"Cargados v\u00eddeos por defecto:\", videos.length);\r\n }\r\n }catch(e){\r\n console.error(\"Error cargando videos:\", e);\r\n videos = [...DEFAULT_VIDEOS];\r\n }\r\n updateVideoCount();\r\n }\r\n\r\n function saveVideos(){\r\n try{\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(videos));\r\n renderPlayer();\r\n renderVideoList();\r\n renderAdminTable();\r\n updateVideoCount();\r\n ovToast(\"Cambios guardados correctamente\");\r\n }catch(e){\r\n ovToast(\"Error al guardar\", true);\r\n }\r\n }\r\n\r\n function updateVideoCount(){\r\n const count = document.getElementById(\"ov-video-count\");\r\n const adminCount = document.getElementById(\"ov-admin-count\");\r\n if(count) count.textContent = `${videos.length} video${videos.length !== 1 ? 's' : ''}`;\r\n if(adminCount) adminCount.textContent = videos.length;\r\n }\r\n\r\n \/\/ ---------- VALIDACI\u00d3N Y EXTRACCI\u00d3N ----------\r\n function extractId(url){\r\n if(!url) return \"\";\r\n url = url.trim();\r\n \r\n \/\/ Si ya es un ID v\u00e1lido de YouTube\r\n if(\/^[a-zA-Z0-9_-]{11}$\/.test(url)) return url;\r\n \r\n \/\/ Patrones comunes de YouTube\r\n const patterns = [\r\n \/(?:youtube\\.com\\\/watch\\?v=|youtu\\.be\\\/|youtube\\.com\\\/embed\\\/|youtube\\.com\\\/v\\\/)([a-zA-Z0-9_-]{11})\/,\r\n \/youtube\\.com\\\/watch\\?.*&v=([a-zA-Z0-9_-]{11})\/,\r\n \/youtube\\.com\\\/shorts\\\/([a-zA-Z0-9_-]{11})\/\r\n ];\r\n \r\n for(const pattern of patterns){\r\n const match = url.match(pattern);\r\n if(match) return match[1];\r\n }\r\n \r\n return \"\";\r\n }\r\n\r\n function validateYouTubeUrl(url){\r\n const id = extractId(url);\r\n return {\r\n valid: id.length === 11,\r\n id: id,\r\n message: id ? \"\u2705 ID v\u00e1lido\" : \"\u274c URL de YouTube no v\u00e1lida\"\r\n };\r\n }\r\n\r\n \/\/ ---------- PLAYER P\u00daBLICO ----------\r\n function renderPlayer(){\r\n console.log(\"\ud83d\udd27 renderPlayer() ejecutado. \u00cdndice actual:\", currentIndex);\r\n \r\n const playerFrame = document.getElementById(\"ov-player-frame\");\r\n const playerTitle = document.getElementById(\"ov-player-title\");\r\n const playerDesc = document.getElementById(\"ov-player-desc\");\r\n \r\n if(!videos.length){\r\n playerFrame.src = \"\";\r\n playerTitle.textContent = \"No hay v\u00eddeos disponibles\";\r\n playerDesc.textContent = \"A\u00f1ade v\u00eddeos desde el panel de control.\";\r\n return;\r\n }\r\n\r\n if(currentIndex < 0 || currentIndex >= videos.length) {\r\n currentIndex = 0;\r\n console.log(\"\u00cdndice corregido a 0\");\r\n }\r\n \r\n const video = videos[currentIndex];\r\n console.log(\"Reproduciendo v\u00eddeo:\", video.title);\r\n \r\n \/\/ Construir URL con par\u00e1metros\r\n const videoId = video.youtubeId || video.id;\r\n const autoplay = videos.length > 0 ? \"1\" : \"0\";\r\n playerFrame.src = `https:\/\/www.youtube.com\/embed\/${videoId}?rel=0&autoplay=${autoplay}&modestbranding=1`;\r\n \r\n playerTitle.textContent = video.title || \"(Sin t\u00edtulo)\";\r\n playerDesc.textContent = video.desc || \"Sin descripci\u00f3n\";\r\n }\r\n\r\n \/\/ ---------- RENDER LISTA DE VIDEOS (VERSI\u00d3N CORREGIDA) ----------\r\n function renderVideoList() {\r\n console.log(\"\ud83d\udd27 renderVideoList() ejecutado\");\r\n console.log(\"\ud83d\udce6 Total de v\u00eddeos:\", videos.length);\r\n console.log(\"\ud83c\udfaf \u00cdndice activo:\", currentIndex);\r\n \r\n const listContainer = document.getElementById('ov-video-list');\r\n if (!listContainer) {\r\n console.error('ERROR: No se encontr\u00f3 el contenedor ov-video-list');\r\n return;\r\n }\r\n\r\n if (!videos.length) {\r\n listContainer.innerHTML = `<div class=\"ov-empty-state\">No hay v\u00eddeos cargados.<\/div>`;\r\n return;\r\n }\r\n\r\n let filteredVideos = videos;\r\n if(searchTerm.trim()){\r\n const term = searchTerm.toLowerCase();\r\n filteredVideos = videos.filter(video => \r\n (video.title && video.title.toLowerCase().includes(term)) ||\r\n (video.desc && video.desc.toLowerCase().includes(term))\r\n );\r\n console.log(\"\ud83d\udd0d B\u00fasqueda activa. Resultados:\", filteredVideos.length);\r\n }\r\n \r\n if(!filteredVideos.length){\r\n listContainer.innerHTML = `\r\n <div class=\"ov-empty-state\">\r\n <div class=\"ov-empty-icon\">\ud83d\udced<\/div>\r\n <div class=\"ov-empty-text\">No se encontraron v\u00eddeos con \"${searchTerm}\"<\/div>\r\n <\/div>\r\n `;\r\n return;\r\n }\r\n \r\n let html = '';\r\n filteredVideos.forEach((video, index) => {\r\n const originalIndex = videos.findIndex(v => v.id === video.id);\r\n const isActive = originalIndex === currentIndex;\r\n \r\n html += `\r\n <div class=\"ov-list-item ${isActive ? 'active' : ''}\" data-index=\"${originalIndex}\">\r\n <div class=\"ov-thumb\">\r\n <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/${video.youtubeId}\/hqdefault.jpg\" \r\n alt=\"${video.title || 'Video'}\"\r\n loading=\"lazy\">\r\n <\/div>\r\n <div class=\"ov-list-text\">\r\n <div class=\"ov-list-item-title\">${video.title || '(Sin t\u00edtulo)'}<\/div>\r\n <div class=\"ov-list-item-desc\">${video.desc || ''}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n \r\n listContainer.innerHTML = html;\r\n console.log(\"\u2705 Lista renderizada. Elementos creados:\", filteredVideos.length);\r\n \r\n \/\/ --- ASIGNAR LOS EVENTOS DE CLIC CORRECTAMENTE ---\r\n const items = listContainer.querySelectorAll('.ov-list-item');\r\n console.log(\"\ud83d\uddb1\ufe0f Asignando eventos a\", items.length, \"elementos\");\r\n \r\n items.forEach(item => {\r\n item.addEventListener('click', function() {\r\n const newIndex = parseInt(this.getAttribute('data-index'));\r\n console.log(`\ud83d\uddb1\ufe0f CLIC RECIBIDO! Cambiando al \u00edndice: ${newIndex} - ${videos[newIndex].title}`);\r\n \r\n if (newIndex !== currentIndex) {\r\n currentIndex = newIndex;\r\n renderPlayer(); \/\/ Cambia el v\u00eddeo grande\r\n renderVideoList(); \/\/ Vuelve a pintar la lista para marcar el activo\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ ---------- BUSCADOR ----------\r\n function setupSearch(){\r\n const searchInput = document.getElementById('ov-search-input');\r\n if(!searchInput) return;\r\n \r\n let searchTimeout;\r\n searchInput.addEventListener('input', (e) => {\r\n clearTimeout(searchTimeout);\r\n searchTerm = e.target.value;\r\n \r\n searchTimeout = setTimeout(() => {\r\n console.log(\"\ud83d\udd0d B\u00fasqueda:\", searchTerm);\r\n renderVideoList();\r\n }, 300);\r\n });\r\n \r\n searchInput.addEventListener('search', () => {\r\n searchTerm = '';\r\n renderVideoList();\r\n });\r\n }\r\n\r\n \/\/ ---------- PANEL ADMIN ----------\r\n function renderAdminTable(){\r\n const tbody = document.getElementById(\"ov-admin-tbody\");\r\n if(!tbody) return;\r\n \r\n if(!videos.length){\r\n tbody.innerHTML = `\r\n <tr>\r\n <td colspan=\"4\" style=\"text-align:center; padding:2rem;\">\r\n No hay v\u00eddeos. A\u00f1ade el primero usando el formulario.\r\n <\/td>\r\n <\/tr>\r\n `;\r\n return;\r\n }\r\n \r\n let html = '';\r\n videos.forEach((video, index) => {\r\n html += `\r\n <tr>\r\n <td style=\"color:#9ca3af\">${index + 1}<\/td>\r\n <td style=\"font-weight:500\">${video.title || \"(Sin t\u00edtulo)\"}<\/td>\r\n <td style=\"font-family:monospace;color:#7dd3fc;font-size:.75rem\">${video.youtubeId}<\/td>\r\n <td class=\"ov-admin-actions\">\r\n <button class=\"ov-btn-up\" title=\"Mover arriba\" data-index=\"${index}\">\u2b06<\/button>\r\n <button class=\"ov-btn-down\" title=\"Mover abajo\" data-index=\"${index}\">\u2b07<\/button>\r\n <button class=\"ov-btn-edit\" title=\"Editar\" data-index=\"${index}\">\u270f\ufe0f<\/button>\r\n <button class=\"ov-btn-del\" title=\"Eliminar\" data-index=\"${index}\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/td>\r\n <\/tr>\r\n `;\r\n });\r\n \r\n tbody.innerHTML = html;\r\n \r\n \/\/ A\u00f1adir event listeners a los botones\r\n tbody.querySelectorAll('.ov-btn-edit').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n editVideo(index);\r\n });\r\n });\r\n \r\n tbody.querySelectorAll('.ov-btn-del').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n deleteVideo(index);\r\n });\r\n });\r\n \r\n tbody.querySelectorAll('.ov-btn-up').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n moveVideoUp(index);\r\n });\r\n });\r\n \r\n tbody.querySelectorAll('.ov-btn-down').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n const index = parseInt(e.target.getAttribute('data-index'));\r\n moveVideoDown(index);\r\n });\r\n });\r\n }\r\n\r\n function editVideo(index){\r\n if(index < 0 || index >= videos.length) return;\r\n \r\n editIndex = index;\r\n const video = videos[index];\r\n \r\n document.getElementById(\"ov-admin-form-title\").textContent = \"\u270f\ufe0f Editar v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = video.title || \"\";\r\n document.getElementById(\"ov-admin-url\").value = video.youtubeId || \"\";\r\n document.getElementById(\"ov-admin-desc\").value = video.desc || \"\";\r\n \r\n document.getElementById(\"ov-admin-title\").focus();\r\n }\r\n\r\n function deleteVideo(index){\r\n if(index < 0 || index >= videos.length) return;\r\n \r\n const videoTitle = videos[index].title || \"este v\u00eddeo\";\r\n if(confirm(`\u00bfEst\u00e1s seguro de que quieres eliminar \"${videoTitle}\"?`)){\r\n videos.splice(index, 1);\r\n if(currentIndex >= index && currentIndex > 0){\r\n currentIndex--;\r\n }\r\n saveVideos();\r\n ovToast(\"V\u00eddeo eliminado\");\r\n }\r\n }\r\n\r\n function moveVideoUp(index){\r\n if(index <= 0) return;\r\n \r\n [videos[index], videos[index-1]] = [videos[index-1], videos[index]];\r\n if(currentIndex === index) currentIndex--;\r\n else if(currentIndex === index-1) currentIndex++;\r\n \r\n saveVideos();\r\n }\r\n\r\n function moveVideoDown(index){\r\n if(index >= videos.length - 1) return;\r\n \r\n [videos[index], videos[index+1]] = [videos[index+1], videos[index]];\r\n if(currentIndex === index) currentIndex++;\r\n else if(currentIndex === index+1) currentIndex--;\r\n \r\n saveVideos();\r\n }\r\n\r\n function clearAdminForm(){\r\n editIndex = null;\r\n document.getElementById(\"ov-admin-form-title\").textContent = \"\u2795 A\u00f1adir nuevo v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = \"\";\r\n document.getElementById(\"ov-admin-url\").value = \"\";\r\n document.getElementById(\"ov-admin-desc\").value = \"\";\r\n \r\n document.querySelectorAll('.ov-admin-input').forEach(input => {\r\n input.classList.remove('error');\r\n });\r\n }\r\n\r\n \/\/ ---------- FORM ADMIN ----------\r\n function saveFromAdmin(){\r\n const title = document.getElementById(\"ov-admin-title\").value.trim();\r\n const url = document.getElementById(\"ov-admin-url\").value.trim();\r\n const desc = document.getElementById(\"ov-admin-desc\").value.trim();\r\n \r\n if(!title){\r\n ovToast(\"El t\u00edtulo es obligatorio\", true);\r\n document.getElementById(\"ov-admin-title\").classList.add('error');\r\n document.getElementById(\"ov-admin-title\").focus();\r\n return;\r\n }\r\n \r\n const validation = validateYouTubeUrl(url);\r\n if(!validation.valid){\r\n ovToast(validation.message, true);\r\n document.getElementById(\"ov-admin-url\").classList.add('error');\r\n document.getElementById(\"ov-admin-url\").focus();\r\n return;\r\n }\r\n \r\n const videoData = {\r\n id: editIndex !== null ? videos[editIndex].id : Date.now(),\r\n title: title,\r\n desc: desc,\r\n youtubeId: validation.id\r\n };\r\n \r\n if(editIndex !== null){\r\n videos[editIndex] = videoData;\r\n ovToast(\"V\u00eddeo actualizado\");\r\n } else {\r\n videos.push(videoData);\r\n ovToast(\"V\u00eddeo a\u00f1adido\");\r\n }\r\n \r\n clearAdminForm();\r\n saveVideos();\r\n }\r\n\r\n \/\/ ---------- EXPORT\/IMPORT ----------\r\n function exportVideos(){\r\n const data = JSON.stringify(videos, null, 2);\r\n const blob = new Blob([data], {type: 'application\/json'});\r\n const url = URL.createObjectURL(blob);\r\n \r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = `olasdevida-videos-${new Date().toISOString().split('T')[0]}.json`;\r\n document.body.appendChild(a);\r\n a.click();\r\n document.body.removeChild(a);\r\n URL.revokeObjectURL(url);\r\n \r\n ovToast(\"V\u00eddeos exportados correctamente\");\r\n }\r\n\r\n function importVideos(){\r\n const textarea = document.getElementById('ov-import-textarea');\r\n if(!textarea) return;\r\n \r\n try{\r\n const imported = JSON.parse(textarea.value.trim());\r\n if(!Array.isArray(imported)){\r\n throw new Error(\"El formato debe ser un array de videos\");\r\n }\r\n \r\n const isValid = imported.every(item => \r\n item && typeof item === 'object' && \r\n (item.youtubeId || item.id)\r\n );\r\n \r\n if(!isValid){\r\n throw new Error(\"Estructura de datos inv\u00e1lida\");\r\n }\r\n \r\n if(confirm(`\u00bfImportar ${imported.length} v\u00eddeo(s)? Esto reemplazar\u00e1 la lista actual.`)){\r\n videos = imported.map((item, index) => ({\r\n id: item.id || Date.now() + index,\r\n title: item.title || `Video ${index + 1}`,\r\n desc: item.desc || \"\",\r\n youtubeId: item.youtubeId || item.id || \"\"\r\n }));\r\n \r\n currentIndex = 0;\r\n saveVideos();\r\n textarea.value = \"\";\r\n ovToast(`${imported.length} v\u00eddeos importados`);\r\n }\r\n }catch(e){\r\n ovToast(`Error al importar: ${e.message}`, true);\r\n }\r\n }\r\n\r\n \/\/ ---------- LOGIN + OVERLAY ----------\r\n async function openOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n\r\n overlay.style.display = \"flex\";\r\n document.getElementById(\"ov-login-error\").textContent = \"\";\r\n\r\n if(adminLogged){\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n }else{\r\n document.getElementById(\"ov-login-card\").style.display = \"block\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"none\";\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n passInput.value = \"\";\r\n setTimeout(()=>passInput.focus(), 200);\r\n }\r\n }\r\n\r\n function closeOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n overlay.style.display = \"none\";\r\n clearAdminForm();\r\n }\r\n\r\n async function handleLogin(){\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n const error = document.getElementById(\"ov-login-error\");\r\n if(!passInput || !error) return;\r\n\r\n const inputHash = await sha256(passInput.value.trim());\r\n if(inputHash === PASSWORD_HASH){\r\n adminLogged = true;\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n ovToast(\"Acceso al panel concedido\");\r\n }else{\r\n error.textContent = \"Contrase\u00f1a incorrecta\";\r\n passInput.value = \"\";\r\n passInput.focus();\r\n }\r\n }\r\n\r\n \/\/ ---------- INIT ----------\r\n document.addEventListener(\"DOMContentLoaded\", function(){\r\n console.log(\"\u2705 DOM cargado. Inicializando reproductor...\");\r\n \r\n loadVideos();\r\n renderPlayer();\r\n renderVideoList();\r\n setupSearch();\r\n\r\n document.getElementById(\"ov-open-admin\").addEventListener(\"click\", openOverlay);\r\n document.getElementById(\"ov-login-submit\").addEventListener(\"click\", handleLogin);\r\n document.getElementById(\"ov-login-cancel\").addEventListener(\"click\", closeOverlay);\r\n document.getElementById(\"ov-admin-pass\").addEventListener(\"keydown\", e=>{\r\n if(e.key===\"Enter\") handleLogin();\r\n });\r\n document.getElementById(\"ov-admin-close\").addEventListener(\"click\", closeOverlay);\r\n document.getElementById(\"ov-admin-save\").addEventListener(\"click\", saveFromAdmin);\r\n document.getElementById(\"ov-admin-cancel\").addEventListener(\"click\", clearAdminForm);\r\n document.getElementById(\"ov-admin-export\").addEventListener(\"click\", exportVideos);\r\n document.getElementById(\"ov-import-submit\").addEventListener(\"click\", importVideos);\r\n document.getElementById(\"ov-import-clear\").addEventListener(\"click\", function(){\r\n document.getElementById('ov-import-textarea').value = '';\r\n });\r\n\r\n document.addEventListener('keydown', function(e){\r\n if(e.key === 'Escape' && document.getElementById(\"ov-overlay\").style.display === 'flex'){\r\n closeOverlay();\r\n }\r\n });\r\n\r\n document.getElementById(\"ov-overlay\").addEventListener(\"click\", function(e){\r\n if(e.target === this){\r\n closeOverlay();\r\n }\r\n });\r\n \r\n console.log(\"\ud83c\udf89 Reproductor completamente inicializado y listo.\");\r\n console.log(\"\ud83d\udca1 Consejo: Abre la Consola (F12) para ver mensajes de depuraci\u00f3n.\");\r\n });\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-3cbac8f e-con-full e-flex e-con e-parent\" data-id=\"3cbac8f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0a846a9 elementor-widget elementor-widget-html\" data-id=\"0a846a9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!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>Videoteca \u00b7 Olas de Vida<\/title>\r\n <style>\r\n \/* CONTENEDOR GENERAL *\/\r\n .ov-video-admin{\r\n font-family:system-ui,-apple-system,sans-serif;\r\n color:#e5e7eb;\r\n padding: 20px;\r\n background: #0f172a;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* LAYOUT PRINCIPAL: REPRODUCTOR + LISTA *\/\r\n .ov-video-shell{\r\n background:radial-gradient(circle at top,#0f172a,#020617 60%);\r\n border-radius:1.8rem;\r\n border:1px solid #1f2937;\r\n padding:1.5rem 1.7rem;\r\n box-shadow:0 20px 60px rgba(0,0,0,.65);\r\n max-width:1200px;\r\n margin:0 auto;\r\n }\r\n\r\n .ov-video-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:1rem;\r\n }\r\n .ov-video-title{\r\n font-size:1.8rem;\r\n font-weight:800;\r\n background:linear-gradient(90deg,#0ea5e9,#7dd3fc);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n .ov-video-sub{\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n\r\n \/* ICONO ENGRANAJE (ADMIN) *\/\r\n .ov-gear-btn{\r\n width:38px;\r\n height:38px;\r\n border-radius:999px;\r\n border:1px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n cursor:pointer;\r\n transition:.18s;\r\n }\r\n .ov-gear-btn:hover{\r\n background:#0ea5e9;\r\n color:#020617;\r\n transform:translateY(-1px);\r\n }\r\n\r\n \/* GRID PRINCIPAL: PLAYER + LISTA *\/\r\n .ov-main-grid{\r\n display:grid;\r\n grid-template-columns:2fr 1.1fr;\r\n gap:1.2rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-main-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* PLAYER *\/\r\n .ov-player{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:1rem;\r\n }\r\n .ov-player-iframe{\r\n width:100%;\r\n aspect-ratio:16\/9;\r\n border-radius:1rem;\r\n border:none;\r\n background:#000;\r\n }\r\n .ov-player-meta{\r\n margin-top:0.8rem;\r\n }\r\n .ov-player-title{\r\n font-size:1rem;\r\n font-weight:600;\r\n }\r\n .ov-player-desc{\r\n margin-top:0.25rem;\r\n font-size:.85rem;\r\n color:#9ca3af;\r\n }\r\n\r\n \/* LISTA DE V\u00cdDEOS *\/\r\n .ov-list{\r\n background:#020617;\r\n border-radius:1.3rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n max-height:460px;\r\n overflow:auto;\r\n }\r\n .ov-list-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n margin-bottom:0.4rem;\r\n }\r\n .ov-list-item{\r\n display:flex;\r\n flex-direction:row;\r\n gap:0.4rem;\r\n padding:0.4rem 0.35rem;\r\n border-radius:0.6rem;\r\n cursor:pointer;\r\n align-items:flex-start;\r\n transition: background-color 0.2s;\r\n }\r\n .ov-list-item:hover{\r\n background:rgba(14,165,233,.18);\r\n }\r\n .ov-list-item.active{\r\n background:rgba(14,165,233,.32);\r\n border-left:3px solid #0ea5e9;\r\n }\r\n .ov-thumb{\r\n width:80px;\r\n height:45px;\r\n border-radius:0.4rem;\r\n background:#111827;\r\n flex-shrink:0;\r\n overflow:hidden;\r\n }\r\n .ov-thumb img{\r\n width:100%;\r\n height:100%;\r\n object-fit:cover;\r\n display:block;\r\n }\r\n .ov-list-text{\r\n flex:1;\r\n }\r\n .ov-list-item-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n }\r\n .ov-list-item-desc{\r\n font-size:.78rem;\r\n color:#9ca3af;\r\n }\r\n\r\n \/* TOAST *\/\r\n #ov-toast{\r\n position:fixed;\r\n bottom:24px;\r\n left:50%;\r\n transform:translateX(-50%);\r\n background:#10b981;\r\n color:#01110a;\r\n padding:0.6rem 1.5rem;\r\n border-radius:999px;\r\n font-size:.85rem;\r\n font-weight:600;\r\n z-index:9999;\r\n opacity:0;\r\n transition:all .25s;\r\n }\r\n #ov-toast.show{\r\n opacity:1;\r\n transform:translateX(-50%) translateY(-8px);\r\n }\r\n\r\n \/* OVERLAY GENERAL (LOGIN + PANEL) *\/\r\n .ov-overlay{\r\n position:fixed;\r\n inset:0;\r\n display:none;\r\n align-items:center;\r\n justify-content:center;\r\n background:rgba(15,23,42,.92);\r\n z-index:9990;\r\n padding:1rem;\r\n }\r\n\r\n \/* TARJETA LOGIN ADMIN *\/\r\n .ov-login-card{\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.8rem 1.5rem;\r\n width:100%;\r\n max-width:380px;\r\n box-shadow:0 24px 70px rgba(0,0,0,.8);\r\n text-align:center;\r\n }\r\n .ov-login-title{\r\n font-size:1.1rem;\r\n font-weight:700;\r\n }\r\n .ov-login-sub{\r\n margin-top:0.3rem;\r\n font-size:.85rem;\r\n color:#94a3b8;\r\n }\r\n .ov-login-input{\r\n width:100%;\r\n margin-top:1.1rem;\r\n padding:0.7rem 0.9rem;\r\n border-radius:0.9rem;\r\n border:2px solid #4b5563;\r\n background:#020617;\r\n color:#e5e7eb;\r\n }\r\n .ov-login-input:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-login-btns{\r\n margin-top:1rem;\r\n display:flex;\r\n gap:0.6rem;\r\n justify-content:center;\r\n }\r\n .ov-btn{\r\n padding:0.6rem 1.3rem;\r\n border-radius:999px;\r\n border:none;\r\n cursor:pointer;\r\n font-size:.85rem;\r\n font-weight:600;\r\n }\r\n .ov-btn-primary{background:#0ea5e9;color:#031016;}\r\n .ov-btn-secondary{background:#020617;color:#e5e7eb;border:1px solid #4b5563;}\r\n .ov-login-error{\r\n margin-top:0.6rem;\r\n min-height:1.1rem;\r\n font-size:.8rem;\r\n color:#fca5a5;\r\n }\r\n\r\n \/* PANEL ADMIN *\/\r\n .ov-admin-panel{\r\n display:none;\r\n background:#020617;\r\n border-radius:1.4rem;\r\n border:1px solid #1f2937;\r\n padding:1.4rem 1.4rem;\r\n width:100%;\r\n max-width:1100px;\r\n max-height:90vh;\r\n box-shadow:0 24px 70px rgba(0,0,0,.9);\r\n overflow:auto;\r\n }\r\n .ov-admin-header{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n gap:1rem;\r\n margin-bottom:0.8rem;\r\n }\r\n .ov-admin-title{\r\n font-size:1.2rem;\r\n font-weight:700;\r\n color:#e5e7eb;\r\n }\r\n .ov-admin-badge{\r\n font-size:.8rem;\r\n color:#9ca3af;\r\n }\r\n .ov-admin-close{\r\n padding:0.4rem 0.9rem;\r\n border-radius:999px;\r\n border:none;\r\n background:#ef4444;\r\n color:#f9fafb;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n }\r\n\r\n \/* GRID PANEL *\/\r\n .ov-admin-grid{\r\n display:grid;\r\n grid-template-columns:1.6fr 1.1fr;\r\n gap:1rem;\r\n }\r\n @media (max-width:900px){\r\n .ov-admin-grid{grid-template-columns:1fr}\r\n }\r\n\r\n \/* LISTA ADMIN (TABLA SIMPLE) *\/\r\n .ov-admin-block{\r\n background:#020617;\r\n border-radius:1rem;\r\n border:1px solid #1f2937;\r\n padding:0.9rem;\r\n }\r\n .ov-admin-block-title{\r\n font-size:.9rem;\r\n font-weight:600;\r\n color:#0ea5e9;\r\n margin-bottom:0.4rem;\r\n }\r\n .ov-admin-table-wrap{\r\n max-height:380px;\r\n overflow:auto;\r\n border-radius:0.8rem;\r\n border:1px solid #111827;\r\n }\r\n .ov-admin-table{\r\n width:100%;\r\n border-collapse:collapse;\r\n font-size:.8rem;\r\n }\r\n .ov-admin-table th,\r\n .ov-admin-table td{\r\n padding:0.45rem 0.5rem;\r\n border-bottom:1px solid #111827;\r\n }\r\n .ov-admin-table th{\r\n text-align:left;\r\n text-transform:uppercase;\r\n letter-spacing:.08em;\r\n font-size:.7rem;\r\n color:#9ca3af;\r\n }\r\n .ov-admin-table tr:hover{\r\n background:rgba(14,165,233,.12);\r\n }\r\n .ov-admin-actions button{\r\n border:none;\r\n border-radius:999px;\r\n font-size:.7rem;\r\n padding:0.2rem 0.6rem;\r\n margin-right:0.2rem;\r\n cursor:pointer;\r\n }\r\n .ov-btn-edit{background:#f59e0b;color:#111827;}\r\n .ov-btn-del{background:#ef4444;color:#f9fafb;}\r\n .ov-btn-up{background:#1e293b;color:#e5e7eb;}\r\n .ov-btn-down{background:#1f2937;color:#e5e7eb;}\r\n\r\n \/* FORM ADMIN *\/\r\n .ov-admin-input,\r\n .ov-admin-textarea{\r\n width:100%;\r\n padding:0.65rem 0.75rem;\r\n border-radius:0.7rem;\r\n border:1px solid #374151;\r\n background:#020617;\r\n color:#e5e7eb;\r\n font-size:.85rem;\r\n margin-bottom:0.6rem;\r\n }\r\n .ov-admin-textarea{\r\n min-height:80px;\r\n resize:vertical;\r\n }\r\n .ov-admin-input:focus,\r\n .ov-admin-textarea:focus{\r\n outline:none;\r\n border-color:#0ea5e9;\r\n box-shadow:0 0 0 2px rgba(14,165,233,.35);\r\n }\r\n .ov-admin-btn-row{\r\n display:flex;\r\n justify-content:flex-end;\r\n gap:0.5rem;\r\n margin-top:0.4rem;\r\n }\r\n .ov-admin-btn-sm{\r\n padding:0.5rem 1rem;\r\n border-radius:999px;\r\n border:none;\r\n font-size:.8rem;\r\n cursor:pointer;\r\n font-weight:600;\r\n }\r\n .ov-admin-btn-secondary{\r\n background:#020617;\r\n color:#e5e7eb;\r\n border:1px solid #4b5563;\r\n }\r\n .ov-admin-btn-primary{\r\n background:#0ea5e9;\r\n color:#02131e;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"ov-video-admin\">\r\n \r\n <div id=\"ov-toast\"><\/div>\r\n\r\n \r\n <div class=\"ov-video-shell\">\r\n <div class=\"ov-video-header\">\r\n <div>\r\n <div class=\"ov-video-title\">Videoteca \u00b7 Olas de Vida<\/div>\r\n <div class=\"ov-video-sub\">Selecciona un v\u00eddeo para verlo. El engranaje es solo para administraci\u00f3n.<\/div>\r\n <\/div>\r\n <button class=\"ov-gear-btn\" id=\"ov-open-admin\" title=\"Panel de control\">\r\n \u2699\ufe0f\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"ov-main-grid\">\r\n \r\n <div class=\"ov-player\">\r\n <iframe\r\n id=\"ov-player-frame\"\r\n class=\"ov-player-iframe\"\r\n src=\"\"\r\n allowfullscreen\r\n allow=\"autoplay\"\r\n ><\/iframe>\r\n <div class=\"ov-player-meta\">\r\n <div class=\"ov-player-title\" id=\"ov-player-title\">Selecciona un v\u00eddeo de la lista<\/div>\r\n <div class=\"ov-player-desc\" id=\"ov-player-desc\">Haz clic en cualquier v\u00eddeo para comenzar a reproducirlo.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-list\">\r\n <div class=\"ov-list-title\">Listado de v\u00eddeos<\/div>\r\n <div id=\"ov-video-list\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-overlay\" id=\"ov-overlay\">\r\n \r\n <div class=\"ov-login-card\" id=\"ov-login-card\">\r\n <div class=\"ov-login-title\">Acceso administraci\u00f3n<\/div>\r\n <div class=\"ov-login-sub\">Introduce la contrase\u00f1a para abrir el panel de control.<\/div>\r\n <input\r\n type=\"password\"\r\n id=\"ov-admin-pass\"\r\n class=\"ov-login-input\"\r\n placeholder=\"Contrase\u00f1a\"\r\n autocomplete=\"off\"\r\n \/>\r\n <div class=\"ov-login-btns\">\r\n <button class=\"ov-btn ov-btn-secondary\" id=\"ov-login-cancel\">Cancelar<\/button>\r\n <button class=\"ov-btn ov-btn-primary\" id=\"ov-login-submit\">Entrar<\/button>\r\n <\/div>\r\n <div class=\"ov-login-error\" id=\"ov-login-error\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-panel\" id=\"ov-admin-panel\">\r\n <div class=\"ov-admin-header\">\r\n <div>\r\n <div class=\"ov-admin-title\">Panel de control de v\u00eddeos<\/div>\r\n <div class=\"ov-admin-badge\">Olas de Vida \u00b7 Gesti\u00f3n local (navegador)<\/div>\r\n <\/div>\r\n <button class=\"ov-admin-close\" id=\"ov-admin-close\">Cerrar<\/button>\r\n <\/div>\r\n\r\n <div class=\"ov-admin-grid\">\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\">Listado actual<\/div>\r\n <div class=\"ov-admin-table-wrap\">\r\n <table class=\"ov-admin-table\">\r\n <thead>\r\n <tr>\r\n <th>#<\/th>\r\n <th>T\u00edtulo<\/th>\r\n <th>ID YouTube<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"ov-admin-tbody\"><\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"ov-admin-block\">\r\n <div class=\"ov-admin-block-title\" id=\"ov-admin-form-title\">A\u00f1adir nuevo v\u00eddeo<\/div>\r\n <input type=\"text\" id=\"ov-admin-title\" class=\"ov-admin-input\" placeholder=\"T\u00edtulo del v\u00eddeo\" \/>\r\n <input type=\"text\" id=\"ov-admin-url\" class=\"ov-admin-input\" placeholder=\"URL completa o ID de YouTube\" \/>\r\n <textarea id=\"ov-admin-desc\" class=\"ov-admin-textarea\" placeholder=\"Descripci\u00f3n (opcional)\"><\/textarea>\r\n <div class=\"ov-admin-btn-row\">\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-secondary\" id=\"ov-admin-clear\">Limpiar<\/button>\r\n <button class=\"ov-admin-btn-sm ov-admin-btn-primary\" id=\"ov-admin-save\">Guardar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n console.log(\"=== INICIANDO REPRODUCTOR OLAS DE VIDA ===\");\r\n \r\n const PASSWORD = \"olas2025\";\r\n const STORAGE_KEY = \"olasdevida_videos_v1\";\r\n\r\n \/\/ V\u00cdDEOS POR DEFECTO (ACTUALIZADOS CON TEM\u00c1TICA ONCOL\u00d3GICA)\r\n const DEFAULT_VIDEOS = [\r\n {\r\n id: 1,\r\n title: \"Introducci\u00f3n al cuidado oncol\u00f3gico integral\",\r\n desc: \"Acompa\u00f1amiento y cuidados durante el tratamiento del c\u00e1ncer.\",\r\n youtubeId: \"dQw4w9WgXcQ\" \/\/ REEMPLAZA CON ID REAL\r\n },\r\n {\r\n id: 2,\r\n title: \"Nutrici\u00f3n especializada para pacientes oncol\u00f3gicos\",\r\n desc: \"Gu\u00eda de alimentaci\u00f3n durante quimioterapia y radioterapia.\",\r\n youtubeId: \"9bZkp7q19f0\" \/\/ REEMPLAZA CON ID REAL\r\n },\r\n {\r\n id: 3,\r\n title: \"Ejercicio terap\u00e9utico y manejo de la fatiga\",\r\n desc: \"Rutinas adaptadas para mantener la movilidad y energ\u00eda.\",\r\n youtubeId: \"kJQP7kiw5Fk\" \/\/ REEMPLAZA CON ID REAL\r\n }\r\n ];\r\n\r\n let videos = [];\r\n let currentIndex = 0;\r\n let adminLogged = false;\r\n let editIndex = null;\r\n\r\n \/\/ ---------- TOAST ----------\r\n function ovToast(msg){\r\n const t = document.getElementById(\"ov-toast\");\r\n if(!t) return;\r\n t.textContent = msg;\r\n t.classList.add(\"show\");\r\n setTimeout(()=>t.classList.remove(\"show\"), 2200);\r\n }\r\n\r\n \/\/ ---------- DATA ----------\r\n function loadVideos(){\r\n try{\r\n const raw = localStorage.getItem(STORAGE_KEY);\r\n const parsed = raw ? JSON.parse(raw) : null;\r\n if(Array.isArray(parsed) && parsed.length){\r\n videos = parsed;\r\n console.log(\"V\u00eddeos cargados desde localStorage:\", videos.length);\r\n }else{\r\n videos = [...DEFAULT_VIDEOS];\r\n console.log(\"Cargados v\u00eddeos por defecto:\", videos.length);\r\n }\r\n }catch(e){\r\n console.error(\"Error cargando videos:\", e);\r\n videos = [...DEFAULT_VIDEOS];\r\n }\r\n }\r\n\r\n function saveVideos(){\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(videos));\r\n renderPlayer(); \/\/ Esto tambi\u00e9n actualizar\u00e1 la lista\r\n renderAdminTable();\r\n ovToast(\"Cambios guardados\");\r\n }\r\n\r\n function extractId(u){\r\n if(!u) return \"\";\r\n u = u.trim();\r\n if(\/^[a-zA-Z0-9_-]{11}$\/.test(u)) return u;\r\n const m = u.match(\/(?:youtube\\.com\\\/watch\\?v=|youtu\\.be\\\/|youtube\\.com\\\/embed\\\/|youtube\\.com\\\/v\\\/)([a-zA-Z0-9_-]{11})\/);\r\n return m ? m[1] : \"\";\r\n }\r\n\r\n \/\/ ---------- PLAYER P\u00daBLICO (VERSI\u00d3N CORREGIDA) ----------\r\n function renderPlayer(){\r\n console.log(\"renderPlayer() ejecutado. currentIndex =\", currentIndex);\r\n \r\n if(!videos.length){\r\n document.getElementById(\"ov-player-frame\").src = \"\";\r\n document.getElementById(\"ov-player-title\").textContent = \"No hay v\u00eddeos disponibles\";\r\n document.getElementById(\"ov-player-desc\").textContent = \"A\u00f1ade v\u00eddeos desde el panel de control.\";\r\n document.getElementById(\"ov-video-list\").innerHTML = \"\";\r\n return;\r\n }\r\n\r\n if(currentIndex < 0 || currentIndex >= videos.length) {\r\n currentIndex = 0;\r\n console.log(\"\u00cdndice corregido a 0\");\r\n }\r\n \r\n const v = videos[currentIndex];\r\n console.log(\"Reproduciendo v\u00eddeo:\", v.title);\r\n\r\n const frame = document.getElementById(\"ov-player-frame\");\r\n frame.src = \"https:\/\/www.youtube.com\/embed\/\" + v.youtubeId + \"?rel=0&autoplay=1\";\r\n\r\n document.getElementById(\"ov-player-title\").textContent = v.title || \"(Sin t\u00edtulo)\";\r\n document.getElementById(\"ov-player-desc\").textContent = v.desc || \"\";\r\n\r\n \/\/ RENDERIZAR LA LISTA (VERSI\u00d3N CORREGIDA)\r\n const listContainer = document.getElementById(\"ov-video-list\");\r\n listContainer.innerHTML = \"\"; \/\/ Limpiar primero\r\n\r\n videos.forEach((item, idx)=>{\r\n const el = document.createElement(\"div\");\r\n el.className = \"ov-list-item\" + (idx === currentIndex ? \" active\" : \"\");\r\n el.setAttribute(\"data-index\", idx); \/\/ A\u00f1adir atributo para referencia\r\n \r\n \/\/ USAR addEventListener EN LUGAR DE onclick DIRECTAMENTE\r\n el.addEventListener(\"click\", function() {\r\n console.log(\"Clic en v\u00eddeo \u00edndice:\", idx, \"T\u00edtulo:\", item.title);\r\n currentIndex = idx;\r\n renderPlayer(); \/\/ Esto volver\u00e1 a renderizar todo\r\n });\r\n\r\n const thumb = document.createElement(\"div\");\r\n thumb.className = \"ov-thumb\";\r\n const img = document.createElement(\"img\");\r\n img.src = \"https:\/\/img.youtube.com\/vi\/\" + item.youtubeId + \"\/hqdefault.jpg\";\r\n img.alt = item.title || \"V\u00eddeo\";\r\n thumb.appendChild(img);\r\n\r\n const text = document.createElement(\"div\");\r\n text.className = \"ov-list-text\";\r\n\r\n const tTitle = document.createElement(\"div\");\r\n tTitle.className = \"ov-list-item-title\";\r\n tTitle.textContent = item.title || \"(Sin t\u00edtulo)\";\r\n\r\n const tDesc = document.createElement(\"div\");\r\n tDesc.className = \"ov-list-item-desc\";\r\n tDesc.textContent = item.desc || \"\";\r\n\r\n text.appendChild(tTitle);\r\n text.appendChild(tDesc);\r\n\r\n el.appendChild(thumb);\r\n el.appendChild(text);\r\n listContainer.appendChild(el);\r\n });\r\n \r\n console.log(\"Lista renderizada con\", videos.length, \"v\u00eddeos\");\r\n }\r\n\r\n \/\/ ---------- PANEL ADMIN ----------\r\n function renderAdminTable(){\r\n const tbody = document.getElementById(\"ov-admin-tbody\");\r\n if(!tbody) return;\r\n tbody.innerHTML = \"\";\r\n\r\n videos.forEach((v, i)=>{\r\n const tr = document.createElement(\"tr\");\r\n tr.innerHTML = `\r\n <td>${i+1}<\/td>\r\n <td>${v.title || \"(Sin t\u00edtulo)\"}<\/td>\r\n <td style=\"font-family:monospace;color:#7dd3fc\">${v.youtubeId}<\/td>\r\n <td class=\"ov-admin-actions\">\r\n <button class=\"ov-btn-up\">\u25b2<\/button>\r\n <button class=\"ov-btn-down\">\u25bc<\/button>\r\n <button class=\"ov-btn-edit\">Editar<\/button>\r\n <button class=\"ov-btn-del\">Borrar<\/button>\r\n <\/td>\r\n `;\r\n\r\n tr.querySelector(\".ov-btn-edit\").onclick = ()=> {\r\n editIndex = i;\r\n document.getElementById(\"ov-admin-form-title\").textContent = \"Editar v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = v.title || \"\";\r\n document.getElementById(\"ov-admin-url\").value = v.youtubeId || \"\";\r\n document.getElementById(\"ov-admin-desc\").value = v.desc || \"\";\r\n };\r\n tr.querySelector(\".ov-btn-del\").onclick = ()=> {\r\n if(confirm(\"\u00bfBorrar este v\u00eddeo?\")){\r\n videos.splice(i,1);\r\n saveVideos();\r\n }\r\n };\r\n tr.querySelector(\".ov-btn-up\").onclick = ()=> {\r\n if(i>0){\r\n const tmp = videos[i-1];\r\n videos[i-1] = videos[i];\r\n videos[i] = tmp;\r\n saveVideos();\r\n }\r\n };\r\n tr.querySelector(\".ov-btn-down\").onclick = ()=> {\r\n if(i<videos.length-1){\r\n const tmp = videos[i+1];\r\n videos[i+1] = videos[i];\r\n videos[i] = tmp;\r\n saveVideos();\r\n }\r\n };\r\n tbody.appendChild(tr);\r\n });\r\n }\r\n\r\n function clearAdminForm(){\r\n editIndex = null;\r\n document.getElementById(\"ov-admin-form-title\").textContent = \"A\u00f1adir nuevo v\u00eddeo\";\r\n document.getElementById(\"ov-admin-title\").value = \"\";\r\n document.getElementById(\"ov-admin-url\").value = \"\";\r\n document.getElementById(\"ov-admin-desc\").value = \"\";\r\n }\r\n\r\n \/\/ ---------- LOGIN + OVERLAY ----------\r\n function openOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n\r\n overlay.style.display = \"flex\";\r\n document.getElementById(\"ov-login-error\").textContent = \"\";\r\n\r\n if(adminLogged){\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n }else{\r\n document.getElementById(\"ov-login-card\").style.display = \"block\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"none\";\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n passInput.value = \"\";\r\n setTimeout(()=>passInput.focus(), 200);\r\n }\r\n }\r\n\r\n function closeOverlay(){\r\n const overlay = document.getElementById(\"ov-overlay\");\r\n if(!overlay) return;\r\n overlay.style.display = \"none\";\r\n }\r\n\r\n function handleLogin(){\r\n const passInput = document.getElementById(\"ov-admin-pass\");\r\n const error = document.getElementById(\"ov-login-error\");\r\n if(!passInput || !error) return;\r\n\r\n const v = passInput.value.trim();\r\n if(v === PASSWORD){\r\n adminLogged = true;\r\n document.getElementById(\"ov-login-card\").style.display = \"none\";\r\n document.getElementById(\"ov-admin-panel\").style.display = \"block\";\r\n renderAdminTable();\r\n ovToast(\"Acceso al panel concedido\");\r\n }else{\r\n error.textContent = \"Contrase\u00f1a incorrecta\";\r\n }\r\n }\r\n\r\n \/\/ ---------- FORM ADMIN ----------\r\n function saveFromAdmin(){\r\n const t = document.getElementById(\"ov-admin-title\").value.trim();\r\n const u = document.getElementById(\"ov-admin-url\").value.trim();\r\n const d = document.getElementById(\"ov-admin-desc\").value.trim();\r\n const youtubeId = extractId(u);\r\n\r\n if(!t || !youtubeId){\r\n alert(\"T\u00edtulo o ID de YouTube inv\u00e1lidos.\");\r\n return;\r\n }\r\n\r\n if(editIndex !== null){\r\n videos[editIndex] = {\r\n ...videos[editIndex],\r\n title:t,\r\n desc:d,\r\n youtubeId\r\n };\r\n }else{\r\n const newId = videos.length ? Math.max(...videos.map(v=>v.id||0))+1 : 1;\r\n videos.push({id:newId,title:t,desc:d,youtubeId});\r\n }\r\n\r\n clearAdminForm();\r\n saveVideos();\r\n }\r\n\r\n \/\/ ---------- INIT ----------\r\n document.addEventListener(\"DOMContentLoaded\", function(){\r\n console.log(\"DOM cargado. Inicializando...\");\r\n \r\n \/\/ Cargar datos\r\n loadVideos();\r\n renderPlayer();\r\n\r\n \/\/ Gear \u2192 overlay\r\n document.getElementById(\"ov-open-admin\").addEventListener(\"click\", openOverlay);\r\n\r\n \/\/ Login eventos\r\n document.getElementById(\"ov-login-submit\").addEventListener(\"click\", handleLogin);\r\n document.getElementById(\"ov-login-cancel\").addEventListener(\"click\", closeOverlay);\r\n \r\n document.getElementById(\"ov-admin-pass\").addEventListener(\"keydown\", e=>{\r\n if(e.key===\"Enter\") handleLogin();\r\n });\r\n\r\n \/\/ Cerrar panel admin\r\n document.getElementById(\"ov-admin-close\").addEventListener(\"click\", closeOverlay);\r\n\r\n \/\/ Botones form admin\r\n document.getElementById(\"ov-admin-save\").addEventListener(\"click\", saveFromAdmin);\r\n document.getElementById(\"ov-admin-clear\").addEventListener(\"click\", clearAdminForm);\r\n \r\n console.log(\"Reproductor inicializado correctamente\");\r\n });\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-0a48e7d e-con-full e-flex e-con e-parent\" data-id=\"0a48e7d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5931505 elementor-widget elementor-widget-html\" data-id=\"5931505\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"ov-reproductor-wp\">\r\n <style>#ov-reproductor-wp *{box-sizing:border-box}#ov-reproductor-wp .ov-container{max-width:1200px;margin:auto;background:#0f172a;padding:20px;border-radius:20px}#ov-reproductor-wp .ov-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}@media(max-width:768px){#ov-reproductor-wp .ov-grid{grid-template-columns:1fr}}#ov-reproductor-wp .ov-player iframe{width:100%;height:400px;border-radius:10px}#ov-reproductor-wp .ov-list{max-height:400px;overflow-y:auto}#ov-reproductor-wp .ov-item{padding:10px;cursor:pointer;border-bottom:1px solid #334155}#ov-reproductor-wp .ov-item:hover{background:#1e293b}#ov-reproductor-wp .ov-item.active{background:#0ea5e9;color:white}<\/style>\r\n \r\n <div class=\"ov-container\">\r\n <h2 style=\"color:#0ea5e9;text-align:center\">Videoteca Olas de Vida<\/h2>\r\n <div class=\"ov-grid\">\r\n <div class=\"ov-player\">\r\n <iframe id=\"ov-iframe\" src=\"\" frameborder=\"0\" allowfullscreen><\/iframe>\r\n <h3 id=\"ov-title\">Selecciona un v\u00eddeo<\/h3>\r\n <p id=\"ov-desc\"><\/p>\r\n <\/div>\r\n <div class=\"ov-list\" id=\"ov-list\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n jQuery(document).ready(function($){\r\n const videos = [\r\n {id:1, title:\"Cuidado oncol\u00f3gico\", desc:\"Introducci\u00f3n al tratamiento\", youtubeId:\"dQw4w9WgXcQ\"},\r\n {id:2, title:\"Nutrici\u00f3n especializada\", desc:\"Gu\u00eda de alimentaci\u00f3n\", youtubeId:\"9bZkp7q19f0\"},\r\n {id:3, title:\"Ejercicio terap\u00e9utico\", desc:\"Rutinas adaptadas\", youtubeId:\"kJQP7kiw5Fk\"}\r\n ];\r\n \r\n let currentIndex = 0;\r\n \r\n function render(){\r\n const video = videos[currentIndex];\r\n $('#ov-iframe').attr('src', 'https:\/\/www.youtube.com\/embed\/' + video.youtubeId);\r\n $('#ov-title').text(video.title);\r\n $('#ov-desc').text(video.desc);\r\n \r\n $('#ov-list').empty();\r\n videos.forEach((v, i) => {\r\n $('#ov-list').append(`\r\n <div class=\"ov-item ${i===currentIndex?'active':''}\" data-index=\"${i}\">\r\n <strong>${v.title}<\/strong><br>\r\n <small>${v.desc}<\/small>\r\n <\/div>\r\n `);\r\n });\r\n \r\n $('.ov-item').off('click').on('click', function(){\r\n currentIndex = $(this).data('index');\r\n render();\r\n });\r\n }\r\n \r\n render();\r\n });\r\n <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7bdd24f e-con-full e-flex e-con e-parent\" data-id=\"7bdd24f\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9ba683d elementor-widget elementor-widget-html\" data-id=\"9ba683d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<?php\r\n\/**\r\n* Plugin Name: Reproductor Olas de Vida\r\n*\/\r\nfunction ov_reproductor_shortcode() {\r\n ob_start();\r\n ?>\r\n \r\n <?php\r\n return ob_get_clean();\r\n}\r\nadd_shortcode('reproductor_olasdevida', 'ov_reproductor_shortcode');\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>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 pensada para wordpress \/ 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 […]<\/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-618","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/618","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=618"}],"version-history":[{"count":31,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/618\/revisions"}],"predecessor-version":[{"id":689,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/618\/revisions\/689"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}