{"id":443,"date":"2025-12-02T15:39:42","date_gmt":"2025-12-02T15:39:42","guid":{"rendered":"https:\/\/5.olasdevida.es\/?page_id=443"},"modified":"2025-12-04T17:05:16","modified_gmt":"2025-12-04T17:05:16","slug":"deep1-pac","status":"publish","type":"page","link":"https:\/\/5.olasdevida.es\/index.php\/deep1-pac\/","title":{"rendered":"Deep1 pac"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n Olas de Vida \u00b7 Panel M\u00e9dico Avanzado<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta name=\"description\" content=\"Panel de monitorizaci\u00f3n oncol\u00f3gica para seguimiento de pacientes\">\r\n \r\n <!-- Fuentes Google -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Favicon -->\r\n <link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udfe5<\/text><\/svg>\">\r\n\r\n <style>\r\n \/* RESET Y BASE *\/\r\n * {\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n margin: 0;\r\n padding: 0;\r\n background: #020617;\r\n font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\r\n line-height: 1.5;\r\n }\r\n \r\n body.modal-open {\r\n overflow: hidden;\r\n }\r\n \r\n .ov-root {\r\n font-family: 'Open Sans', sans-serif;\r\n color: #e5e7eb;\r\n padding: 16px;\r\n min-height: 100vh;\r\n background: linear-gradient(135deg, #020617 0%, #0b1220 100%);\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .ov-wrapper {\r\n max-width: 1200px;\r\n margin: 0 auto 32px;\r\n background: #020617;\r\n border-radius: 18px;\r\n box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);\r\n overflow: hidden;\r\n border: 1px solid rgba(148, 163, 184, 0.5);\r\n }\r\n \r\n \/* CABECERA *\/\r\n .ov-header {\r\n background: radial-gradient(circle at top left, #38bdf8 0%, #0f172a 40%, #020617 100%);\r\n color: #e5f2ff;\r\n padding: 22px 24px 18px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .ov-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 200px;\r\n height: 200px;\r\n background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%);\r\n }\r\n \r\n .ov-header-left {\r\n max-width: 60%;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .ov-header-title {\r\n font-family: 'Poppins', system-ui, sans-serif;\r\n font-size: 24px;\r\n font-weight: 600;\r\n margin: 0 0 6px 0;\r\n background: linear-gradient(90deg, #e5f2ff, #93c5fd);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n .ov-header-sub {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin: 0 0 8px 0;\r\n }\r\n \r\n .ov-header-tag {\r\n display: inline-block;\r\n margin-top: 8px;\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n color: #93c5fd;\r\n background: rgba(15, 23, 42, 0.6);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(148, 163, 184, 0.3);\r\n }\r\n \r\n .ov-header-right {\r\n text-align: right;\r\n font-size: 13px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .ov-header-doc {\r\n font-weight: 600;\r\n color: #bfdbfe;\r\n margin-bottom: 4px;\r\n }\r\n \r\n \/* CONTENIDO PRINCIPAL *\/\r\n .ov-inner {\r\n background: linear-gradient(135deg, #020617 0%, #020617 35%, #0b1220 100%);\r\n padding: 24px 20px;\r\n color: #e5e7eb;\r\n }\r\n \r\n \/* TARJETAS SUPERIORES *\/\r\n .ov-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 12px;\r\n margin-bottom: 24px;\r\n }\r\n \r\n .ov-card {\r\n background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.85));\r\n border-radius: 12px;\r\n padding: 16px;\r\n border: 1px solid rgba(148, 163, 184, 0.35);\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .ov-card:hover {\r\n transform: translateY(-2px);\r\n border-color: rgba(56, 189, 248, 0.4);\r\n box-shadow: 0 6px 16px rgba(15, 23, 42, 0.6);\r\n }\r\n \r\n .ov-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, #38bdf8, #2563eb);\r\n }\r\n \r\n .ov-card-label {\r\n font-size: 11px;\r\n text-transform: uppercase;\r\n letter-spacing: 0.06em;\r\n color: #9ca3af;\r\n margin-bottom: 8px;\r\n font-weight: 500;\r\n }\r\n \r\n .ov-card-value {\r\n font-family: 'Poppins', system-ui, sans-serif;\r\n font-size: 22px;\r\n font-weight: 600;\r\n margin: 0;\r\n color: #f8fafc;\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 background: rgba(110, 231, 183, 0.1);\r\n padding: 3px 8px;\r\n border-radius: 8px;\r\n display: inline-block;\r\n }\r\n \r\n \/* BANDEJA PACIENTES *\/\r\n .ov-panel {\r\n background: rgba(15, 23, 42, 0.96);\r\n border-radius: 12px;\r\n border: 1px solid rgba(55, 65, 81, 0.9);\r\n padding: 16px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-panel-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin: 0 0 6px 0;\r\n color: #e5f2ff;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .ov-panel-title::before {\r\n content: '\ud83d\udce5';\r\n font-size: 18px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #9ca3af;\r\n margin: 0 0 16px 0;\r\n }\r\n \r\n .ov-scroll {\r\n max-height: 300px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 4px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-thumb {\r\n background: #4b5563;\r\n border-radius: 4px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-thumb:hover {\r\n background: #6b7280;\r\n }\r\n \r\n \/* TABLA *\/\r\n .ov-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 13px;\r\n }\r\n \r\n .ov-table thead {\r\n position: sticky;\r\n top: 0;\r\n z-index: 10;\r\n }\r\n \r\n .ov-table th {\r\n background: rgba(15, 23, 42, 0.98);\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 12px;\r\n color: #9ca3af;\r\n font-weight: 600;\r\n text-align: left;\r\n padding: 12px 10px;\r\n border-bottom: 2px solid rgba(31, 41, 55, 1);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n white-space: nowrap;\r\n }\r\n \r\n .ov-table td {\r\n padding: 10px;\r\n border-bottom: 1px solid rgba(31, 41, 55, 0.8);\r\n vertical-align: middle;\r\n }\r\n \r\n .ov-table tbody tr {\r\n transition: background-color 0.2s ease;\r\n }\r\n \r\n .ov-table tbody tr:hover {\r\n background: rgba(30, 41, 59, 0.4);\r\n }\r\n \r\n .ov-name-link {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font: inherit;\r\n color: #e5e7eb;\r\n text-decoration: none;\r\n cursor: pointer;\r\n transition: color 0.2s ease;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .ov-name-link:hover {\r\n color: #bfdbfe;\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto-riesgo { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR *\/\r\n .ov-bottom-layout {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 16px;\r\n margin-top: 20px;\r\n }\r\n \r\n .ov-side-box {\r\n background: rgba(15, 23, 42, 0.96);\r\n border-radius: 12px;\r\n border: 1px solid rgba(55, 65, 81, 0.9);\r\n padding: 16px;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .ov-side-box:hover {\r\n border-color: rgba(56, 189, 248, 0.4);\r\n box-shadow: 0 8px 20px rgba(15, 23, 42, 0.6);\r\n }\r\n \r\n .ov-side-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin: 0 0 6px 0;\r\n color: #e5f2ff;\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: 12px;\r\n color: #9ca3af;\r\n margin: 0 0 12px 0;\r\n line-height: 1.4;\r\n }\r\n \r\n \/* BOTONES *\/\r\n .ov-btn {\r\n padding: 10px 20px;\r\n border-radius: 999px;\r\n background: linear-gradient(135deg, #38bdf8, #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 text-transform: uppercase;\r\n letter-spacing: 0.07em;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n text-decoration: none;\r\n }\r\n \r\n .ov-btn:hover {\r\n filter: brightness(1.1);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);\r\n }\r\n \r\n .ov-btn:active {\r\n transform: translateY(0);\r\n }\r\n \r\n \/* MODAL *\/\r\n .ov-modal {\r\n position: fixed;\r\n inset: 0;\r\n backdrop-filter: blur(4px);\r\n background: rgba(0, 0, 0, 0.7);\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 2000;\r\n padding: 20px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .ov-modal.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n \r\n .ov-modal-dialog {\r\n background: linear-gradient(135deg, #0f172a, #1e293b);\r\n border-radius: 16px;\r\n border: 1px solid #4b5563;\r\n width: 100%;\r\n max-width: 800px;\r\n max-height: 85vh;\r\n overflow: hidden;\r\n transform: translateY(20px);\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .ov-modal.active .ov-modal-dialog {\r\n transform: translateY(0);\r\n }\r\n \r\n .ov-modal-header {\r\n padding: 20px 24px;\r\n border-bottom: 1px solid rgba(75, 85, 99, 0.5);\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 .ov-modal-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin: 0;\r\n color: #f1f5f9;\r\n }\r\n \r\n .ov-modal-close {\r\n background: none;\r\n border: none;\r\n color: #e5e7eb;\r\n font-size: 24px;\r\n cursor: pointer;\r\n padding: 4px;\r\n border-radius: 6px;\r\n transition: all 0.2s ease;\r\n width: 36px;\r\n height: 36px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .ov-modal-close:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: #fff;\r\n }\r\n \r\n .ov-modal-body {\r\n padding: 24px;\r\n font-size: 14px;\r\n color: #e2e8f0;\r\n line-height: 1.6;\r\n overflow-y: auto;\r\n max-height: calc(85vh - 80px);\r\n }\r\n \r\n .ov-modal-body h3 {\r\n color: #bfdbfe;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin: 20px 0 10px 0;\r\n padding-bottom: 6px;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\r\n }\r\n \r\n .ov-modal-body h3:first-child {\r\n margin-top: 0;\r\n }\r\n \r\n .ov-modal-body p {\r\n margin: 0 0 12px 0;\r\n }\r\n \r\n .ov-modal-body ul {\r\n margin: 0 0 16px 0;\r\n padding-left: 20px;\r\n }\r\n \r\n .ov-modal-body li {\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-modal-body table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 16px 0;\r\n font-size: 13px;\r\n }\r\n \r\n .ov-modal-body th {\r\n background: rgba(30, 41, 59, 0.5);\r\n padding: 10px;\r\n text-align: left;\r\n font-weight: 600;\r\n border-bottom: 2px solid rgba(56, 189, 248, 0.3);\r\n }\r\n \r\n .ov-modal-body td {\r\n padding: 10px;\r\n border-bottom: 1px solid rgba(75, 85, 99, 0.3);\r\n }\r\n \r\n .ov-modal-body tr:hover {\r\n background: rgba(30, 41, 59, 0.2);\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 768px) {\r\n .ov-root {\r\n padding: 12px;\r\n }\r\n \r\n .ov-header {\r\n flex-direction: column;\r\n gap: 12px;\r\n padding: 18px 16px;\r\n }\r\n \r\n .ov-header-left,\r\n .ov-header-right {\r\n max-width: 100%;\r\n text-align: left;\r\n }\r\n \r\n .ov-header-right {\r\n text-align: left;\r\n }\r\n \r\n .ov-header-title {\r\n font-size: 20px;\r\n }\r\n \r\n .ov-cards {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n }\r\n \r\n .ov-card {\r\n padding: 14px;\r\n }\r\n \r\n .ov-card-value {\r\n font-size: 20px;\r\n }\r\n \r\n .ov-bottom-layout {\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n }\r\n \r\n .ov-table {\r\n font-size: 12px;\r\n }\r\n \r\n .ov-table th,\r\n .ov-table td {\r\n padding: 8px 6px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .ov-cards {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .ov-header-title {\r\n font-size: 18px;\r\n }\r\n \r\n .ov-modal-dialog {\r\n margin: 0;\r\n max-height: 90vh;\r\n }\r\n \r\n .ov-modal-body {\r\n padding: 16px;\r\n font-size: 13px;\r\n }\r\n }\r\n \r\n \/* ANIMACIONES *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n .ov-card,\r\n .ov-panel,\r\n .ov-side-box {\r\n animation: fadeIn 0.4s ease forwards;\r\n }\r\n \r\n \/* ESTILOS PARA IMPRESI\u00d3N *\/\r\n @media print {\r\n .ov-btn,\r\n .ov-name-link,\r\n .ov-modal,\r\n iframe {\r\n display: none !important;\r\n }\r\n \r\n body {\r\n background: white !important;\r\n color: black !important;\r\n }\r\n \r\n .ov-wrapper {\r\n box-shadow: none !important;\r\n border: 1px solid #ddd !important;\r\n }\r\n \r\n .ov-card,\r\n .ov-panel,\r\n .ov-side-box {\r\n border: 1px solid #ddd !important;\r\n background: white !important;\r\n color: black !important;\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 <!-- CABECERA -->\r\n <header class=\"ov-header\">\r\n <div class=\"ov-header-left\">\r\n <h1 class=\"ov-header-title\">Olas de Vida \u00b7 Panel M\u00e9dico Avanzado<\/h1>\r\n <p class=\"ov-header-sub\">Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/p>\r\n <span class=\"ov-header-tag\">vista demo \u00b7 pensada para wordpress \/ elementor<\/span>\r\n <\/div>\r\n\r\n <div class=\"ov-header-right\">\r\n <div class=\"ov-header-doc\">Unidad de Oncolog\u00eda \u00b7 Olas de Vida<\/div>\r\n <div>Versi\u00f3n demostraci\u00f3n con 10 pacientes<\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <main class=\"ov-inner\">\r\n\r\n <!-- TARJETAS SUPERIORES -->\r\n <section class=\"ov-cards\">\r\n <article class=\"ov-card\">\r\n <div class=\"ov-card-label\">Pacientes activos<\/div>\r\n <div class=\"ov-card-value\">10<\/div>\r\n <span class=\"ov-card-tag\">Muestra<\/span>\r\n <\/article>\r\n\r\n <article class=\"ov-card\">\r\n <div class=\"ov-card-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"ov-card-value\">3<\/div>\r\n <span class=\"ov-card-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/span>\r\n <\/article>\r\n\r\n <article class=\"ov-card\">\r\n <div class=\"ov-card-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"ov-card-value\">4<\/div>\r\n <span class=\"ov-card-tag\">Seguimiento cercano<\/span>\r\n <\/article>\r\n\r\n <article class=\"ov-card\">\r\n <div class=\"ov-card-label\">Adherencia<\/div>\r\n <div class=\"ov-card-value\">87%<\/div>\r\n <span class=\"ov-card-tag\">\u00daltimos 14 d\u00edas<\/span>\r\n <\/article>\r\n <\/section>\r\n\r\n <!-- BANDEJA PACIENTES -->\r\n <section class=\"ov-panel\" aria-labelledby=\"bandeja-titulo\">\r\n <h2 id=\"bandeja-titulo\" class=\"ov-panel-title\">Bandeja de pacientes<\/h2>\r\n <p class=\"ov-panel-sub\">Haz clic en el nombre para abrir su ficha completa.<\/p>\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\r\n <tbody>\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV001\" aria-label=\"Abrir ficha de Mar\u00eda Garc\u00eda L\u00f3pez\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td><span class=\"estado-critico\">CR\u00cdTICO<\/span><\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV002\" aria-label=\"Abrir ficha de Roberto Silva Jim\u00e9nez\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td><span class=\"estado-alto-riesgo\">ALTO RIESGO<\/span><\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV003\" aria-label=\"Abrir ficha de Ana Fern\u00e1ndez L\u00f3pez\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td><span class=\"estado-moderada\">MODERADA<\/span><\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV004\" aria-label=\"Abrir ficha de Javier Rodr\u00edguez Santos\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td><span class=\"estado-estable\">ESTABLE<\/span><\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV005\" aria-label=\"Abrir ficha de Laura Herrera Funes\">Laura Herrera Funes<\/button><\/td>\r\n <td>ODV005<\/td>\r\n <td>Ca ovario \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td><span class=\"estado-moderada\">MODERADA<\/span><\/td>\r\n <td>Hoy \u00b7 10:15<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV006\" aria-label=\"Abrir ficha de Carmen Ramos Vidal\">Carmen Ramos Vidal<\/button><\/td>\r\n <td>ODV006<\/td>\r\n <td>Ca colon \u00b7 Ciclo 1\/8<\/td>\r\n <td>7\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td><span class=\"estado-alto-riesgo\">ALTO RIESGO<\/span><\/td>\r\n <td>Hace 3h<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV007\" aria-label=\"Abrir ficha de Daniel Mu\u00f1oz Ortega\">Daniel Mu\u00f1oz Ortega<\/button><\/td>\r\n <td>ODV007<\/td>\r\n <td>Ca p\u00e1ncreas \u00b7 Ciclo 3\/12<\/td>\r\n <td>8\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td><span class=\"estado-critico\">CR\u00cdTICO<\/span><\/td>\r\n <td>Hoy \u00b7 09:10<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV008\" aria-label=\"Abrir ficha de Elena Torres D\u00edaz\">Elena Torres D\u00edaz<\/button><\/td>\r\n <td>ODV008<\/td>\r\n <td>Ca mama \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td><span class=\"estado-critico\">CR\u00cdTICO<\/span><\/td>\r\n <td>Hace 45 min<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV009\" aria-label=\"Abrir ficha de Alberto Paredes Luna\">Alberto Paredes Luna<\/button><\/td>\r\n <td>ODV009<\/td>\r\n <td>Ca pr\u00f3stata \u00b7 Hormono + RT<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td><span class=\"estado-moderada\">MODERADA<\/span><\/td>\r\n <td>Ayer \u00b7 14:22<\/td>\r\n <\/tr>\r\n\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"ODV010\" aria-label=\"Abrir ficha de Luc\u00eda Romero Salvat\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td><span class=\"estado-alto-riesgo\">ALTO RIESGO<\/span><\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- PANEL INFERIOR -->\r\n <div class=\"ov-bottom-layout\">\r\n\r\n <!-- PDF -->\r\n <section class=\"ov-side-box\">\r\n <h3 class=\"ov-side-title\">\ud83d\udcc4 PDF m\u00e9dico \/ paciente<\/h3>\r\n <p id=\"ov-pdf-body\" class=\"ov-side-sub\">\r\n Selecciona un paciente para preparar su informe m\u00e9dico\/paciente.\r\n <\/p>\r\n <button id=\"ov-pdf-btn\" class=\"ov-btn\" style=\"display:none;\">\r\n <span>\ud83d\udcc4<\/span> Generar PDF\r\n <\/button>\r\n <\/section>\r\n\r\n <!-- JULI\u00c1N -->\r\n <section class=\"ov-side-box\">\r\n <h3 class=\"ov-side-title\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/h3>\r\n <p class=\"ov-side-sub\">Asistente de apoyo m\u00e9dico integrado con inteligencia artificial.<\/p>\r\n\r\n <div style=\"border: 1px solid #3b4252; border-radius: 10px; overflow: hidden; margin-top: 12px;\">\r\n <iframe\r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n style=\"width:100%; height:260px; border:0;\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n loading=\"lazy\">\r\n <\/iframe>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- EVOLUCI\u00d3N -->\r\n <section class=\"ov-side-box\">\r\n <h3 id=\"ov-evo-title\" class=\"ov-side-title\">\ud83d\udcc8 Evoluci\u00f3n semanal<\/h3>\r\n <p id=\"ov-evo-sub\" class=\"ov-side-sub\">Selecciona un paciente para ver su evoluci\u00f3n detallada.<\/p>\r\n\r\n <div id=\"ov-evo-charts\" style=\"display:none; margin-top: 12px;\">\r\n <img decoding=\"async\" \r\n src=\"https:\/\/placehold.co\/300x120\/1e293b\/93c5fd?text=Gr\u00e1fica+Dolor+\u00c1nimo\" \r\n alt=\"Gr\u00e1fica de evoluci\u00f3n del paciente\"\r\n style=\"width:100%; border-radius:10px;\"\r\n loading=\"lazy\">\r\n <\/div>\r\n <\/section>\r\n\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL -->\r\n<div id=\"ov-modal\" class=\"ov-modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"ov-modal-title\" aria-hidden=\"true\">\r\n <div class=\"ov-modal-dialog\">\r\n <div class=\"ov-modal-header\">\r\n <h2 id=\"ov-modal-title\" class=\"ov-modal-title\">Ficha del paciente<\/h2>\r\n <button id=\"ov-modal-close\" class=\"ov-modal-close\" aria-label=\"Cerrar ventana\">\r\n \u2715\r\n <\/button>\r\n <\/div>\r\n <div id=\"ov-modal-body\" class=\"ov-modal-body\">\r\n <!-- Contenido din\u00e1mico -->\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n \ud83d\udd25 FICHAS (contenidos HTML que se cargan dentro del popup)\r\n ============================================================ *\/\r\nconst fichas = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 52 a\u00f1os con carcinoma ductal invasivo. Actualmente en tratamiento con quimioterapia neoadyuvante. Presenta dolor mamario intenso (9\/10) que impacta significativamente en la calidad del sue\u00f1o y movilidad del brazo izquierdo.<\/p>\r\n\r\n <h3>\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 a pesar del dolor)<\/li>\r\n <li><strong>Fiebre:<\/strong> No presente<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy \u00b7 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>Anal\u00edticas recientes<\/h3>\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Fecha<\/th>\r\n <th>Hb (g\/dL)<\/th>\r\n <th>Neutr\u00f3filos (x10\u00b3\/\u03bcL)<\/th>\r\n <th>Plaquetas (x10\u00b3\/\u03bcL)<\/th>\r\n <th>Observaciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>13\/01\/2024<\/td>\r\n <td>11.2<\/td>\r\n <td>1.3<\/td>\r\n <td>180<\/td>\r\n <td>Neutropenia grado 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>06\/01\/2024<\/td>\r\n <td>11.8<\/td>\r\n <td>1.8<\/td>\r\n <td>192<\/td>\r\n <td>Dentro de l\u00edmites<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>30\/12\/2023<\/td>\r\n <td>12.1<\/td>\r\n <td>2.1<\/td>\r\n <td>210<\/td>\r\n <td>Pre-quimioterapia<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\n <h3>Medicaci\u00f3n actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h (dolor)<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim 30MU\/0.5mL (d\u00edas 2-7 del ciclo)<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h (n\u00e1useas)<\/li>\r\n <\/ul>\r\n\r\n <h3>Formulario de seguimiento<\/h3>\r\n <a class=\"ov-btn\" target=\"_blank\" rel=\"noopener noreferrer\"\r\n href=\"https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103\">\r\n <span>\ud83d\udccb<\/span> Abrir formulario completo\r\n <\/a>\r\n `\r\n },\r\n\r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 45 a\u00f1os con linfoma difuso de c\u00e9lulas B grandes. Presenta s\u00edntomas depresivos marcados (\u00e1nimo 3\/10) y p\u00e9rdida de peso involuntaria de 4kg en las \u00faltimas 2 semanas. Refiere aislamiento social y p\u00e9rdida de inter\u00e9s en actividades cotidianas.<\/p>\r\n\r\n <h3>\u00daltimos registros<\/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>P\u00e9rdida de peso:<\/strong> 4kg (2 semanas)<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Ayer \u00b7 20:10<\/li>\r\n <\/ul>\r\n\r\n <h3>Recomendaciones<\/h3>\r\n <ul>\r\n <li>Valoraci\u00f3n por psico-oncolog\u00eda urgente<\/li>\r\n <li>Suplementaci\u00f3n nutricional hipercal\u00f3rica<\/li>\r\n <li>Seguimiento estrecho por trabajo social<\/li>\r\n <\/ul>\r\n\r\n <h3>Formulario de seguimiento<\/h3>\r\n <a class=\"ov-btn\" target=\"_blank\" rel=\"noopener noreferrer\"\r\n href=\"https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103\">\r\n <span>\ud83d\udccb<\/span> Abrir formulario completo\r\n <\/a>\r\n `\r\n },\r\n\r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 48 a\u00f1os con respuesta favorable al tratamiento. Presenta buena tolerancia a la quimioterapia con efectos secundarios manejables.<\/p>\r\n\r\n <h3>\u00daltimos registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (controlado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 7\/10 (estable)<\/li>\r\n <li><strong>N\u00e1useas:<\/strong> Leves, controladas con medicaci\u00f3n<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy \u00b7 07:50<\/li>\r\n <\/ul>\r\n\r\n <h3>Formulario de seguimiento<\/h3>\r\n <a class=\"ov-btn\" target=\"_blank\" rel=\"noopener noreferrer\"\r\n href=\"https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103\">\r\n <span>\ud83d\udccb<\/span> Abrir formulario completo\r\n <\/a>\r\n `\r\n },\r\n\r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de pulm\u00f3n \u00b7 Ciclo 5\/6<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 65 a\u00f1os con carcinoma pulmonar de c\u00e9lulas no peque\u00f1as en estadio IIIB. Excelente respuesta al tratamiento con mejor\u00eda significativa de s\u00edntomas respiratorios.<\/p>\r\n\r\n <h3>\u00daltimos registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 3\/10 (leve)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 7\/10 (positivo)<\/li>\r\n <li><strong>Dificultad respiratoria:<\/strong> Mejor\u00eda notable<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Ayer \u00b7 18:33<\/li>\r\n <\/ul>\r\n `\r\n },\r\n\r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 56 a\u00f1os con carcinoma ov\u00e1rico seroso de alto grado. En tratamiento combinado con buena tolerancia inicial.<\/p>\r\n\r\n <h3>Pr\u00f3ximos pasos<\/h3>\r\n <ul>\r\n <li>Ecograf\u00eda abdominal programada para pr\u00f3xima semana<\/li>\r\n <li>Control de marcador CA-125 en 15 d\u00edas<\/li>\r\n <li>Seguimiento estrecho de funci\u00f3n renal<\/li>\r\n <\/ul>\r\n `\r\n },\r\n\r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 62 a\u00f1os con adenocarcinoma de colon derecho. Inici\u00f3 tratamiento con quimioterapia adyuvante. Presenta s\u00edntomas gastrointestinales moderados.<\/p>\r\n\r\n <h3>Atenci\u00f3n requerida<\/h3>\r\n <ul>\r\n <li>Control de diarrea (actualmente 3-4 deposiciones\/d\u00eda)<\/li>\r\n <li>Monitorizaci\u00f3n de neuropat\u00eda perif\u00e9rica<\/li>\r\n <li>Asesoramiento nutricional espec\u00edfico<\/li>\r\n <\/ul>\r\n `\r\n },\r\n\r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de p\u00e1ncreas \u00b7 Ciclo 3\/12<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 58 a\u00f1os con adenocarcinoma pancre\u00e1tico localmente avanzado. Presenta dolor abdominal intenso (8\/10) que requiere ajuste de analgesia.<\/p>\r\n\r\n <h3>Urgencia<\/h3>\r\n <p><strong>\u00a1Atenci\u00f3n requerida inmediata!<\/strong> Paciente refiere ictericia leve y coluria. Valorar posible obstrucci\u00f3n biliar.<\/p>\r\n `\r\n },\r\n\r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 2\/6<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 49 a\u00f1os con fiebre de 38.8\u00baC y posible neutropenia febril. Requiere valoraci\u00f3n urgente.<\/p>\r\n\r\n <h3>Urgencia<\/h3>\r\n <p><strong>\u26a0\ufe0f NEUTROPENIA FEBRIL SOSPECHADA<\/strong><\/p>\r\n <ul>\r\n <li>Fiebre: 38.8\u00baC<\/li>\r\n <li>Tiempo de evoluci\u00f3n: 6 horas<\/li>\r\n <li>Escalofr\u00edos: S\u00ed<\/li>\r\n <li>\u00daltimo hemograma: Neutr\u00f3filos 0.8<\/li>\r\n <\/ul>\r\n <p><strong>Acci\u00f3n inmediata:<\/strong> Derivaci\u00f3n a Urgencias para antibioterapia intravenosa.<\/p>\r\n `\r\n },\r\n\r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de pr\u00f3stata \u00b7 Hormonoterapia + Radioterapia<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 72 a\u00f1os con buen control de enfermedad. Efectos secundarios de hormonoterapia manejables.<\/p>\r\n\r\n <h3>Control<\/h3>\r\n <ul>\r\n <li>PSA indetectable en \u00faltimo control<\/li>\r\n <li>Control de sofocos con medidas no farmacol\u00f3gicas<\/li>\r\n <li>Monitorizaci\u00f3n de salud \u00f3sea<\/li>\r\n <\/ul>\r\n `\r\n },\r\n\r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n html: `\r\n <h3>Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Terapia dirigida (HER2+)<\/strong><\/p>\r\n\r\n <h3>Resumen cl\u00ednico<\/h3>\r\n <p>Paciente de 41 a\u00f1os con excelente respuesta a terapia anti-HER2. Control card\u00edaco normal en \u00faltima ecograf\u00eda.<\/p>\r\n\r\n <h3>Seguimiento<\/h3>\r\n <ul>\r\n <li>Funci\u00f3n card\u00edaca preservada (FEVI 65%)<\/li>\r\n <li>Control de toxicidades cut\u00e1neas<\/li>\r\n <li>Pr\u00f3xima evaluaci\u00f3n de respuesta por RMN<\/li>\r\n <\/ul>\r\n `\r\n },\r\n};\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 L\u00d3GICA DEL SISTEMA\r\n ============================================================ *\/\r\nconst modal = document.getElementById(\"ov-modal\");\r\nconst modalTitle = document.getElementById(\"ov-modal-title\");\r\nconst modalBody = document.getElementById(\"ov-modal-body\");\r\nconst modalClose = document.getElementById(\"ov-modal-close\");\r\n\r\n\/* --- Abrir ficha del paciente --- *\/\r\nfunction abrirFicha(id) {\r\n const data = fichas[id];\r\n if (!data) {\r\n console.error(`No se encontr\u00f3 ficha para el ID: ${id}`);\r\n return;\r\n }\r\n\r\n \/\/ Actualizar contenido del modal\r\n modalTitle.textContent = `${data.nombre} \u00b7 ${id}`;\r\n modalBody.innerHTML = data.html;\r\n \r\n \/\/ Mostrar modal con animaci\u00f3n\r\n modal.setAttribute('aria-hidden', 'false');\r\n modal.classList.add('active');\r\n document.body.classList.add('modal-open');\r\n \r\n \/\/ Enfocar el bot\u00f3n de cerrar para accesibilidad\r\n setTimeout(() => {\r\n modalClose.focus();\r\n }, 100);\r\n\r\n \/\/ Actualizar panel PDF\r\n const pdfTitle = document.querySelector('#ov-pdf-title');\r\n const pdfBody = document.getElementById('ov-pdf-body');\r\n const pdfBtn = document.getElementById('ov-pdf-btn');\r\n \r\n if (pdfTitle) pdfTitle.textContent = `\ud83d\udcc4 PDF de ${data.nombre}`;\r\n if (pdfBody) pdfBody.textContent = `Informe cl\u00ednico preparado para ${data.nombre}. Contiene diagn\u00f3stico, evoluci\u00f3n y tratamiento.`;\r\n if (pdfBtn) pdfBtn.style.display = 'inline-flex';\r\n\r\n \/\/ Actualizar panel evoluci\u00f3n\r\n const evoTitle = document.getElementById('ov-evo-title');\r\n const evoSub = document.getElementById('ov-evo-sub');\r\n const evoCharts = document.getElementById('ov-evo-charts');\r\n \r\n if (evoTitle) evoTitle.textContent = `\ud83d\udcc8 Evoluci\u00f3n \u00b7 ${data.nombre}`;\r\n if (evoSub) evoSub.textContent = `Gr\u00e1fica de seguimiento de dolor y \u00e1nimo`;\r\n if (evoCharts) evoCharts.style.display = 'block';\r\n}\r\n\r\n\/* --- Cerrar modal --- *\/\r\nfunction cerrarModal() {\r\n modal.classList.remove('active');\r\n modal.setAttribute('aria-hidden', 'true');\r\n document.body.classList.remove('modal-open');\r\n \r\n \/\/ Devolver foco al elemento que abri\u00f3 el modal\r\n if (ultimoBotonFoco) {\r\n setTimeout(() => {\r\n ultimoBotonFoco.focus();\r\n }, 100);\r\n }\r\n}\r\n\r\nlet ultimoBotonFoco = null;\r\n\r\n\/* --- Event Listeners --- *\/\r\nmodalClose.addEventListener(\"click\", cerrarModal);\r\n\r\nmodal.addEventListener(\"click\", (e) => {\r\n if (e.target === modal) {\r\n cerrarModal();\r\n }\r\n});\r\n\r\n\/\/ Cerrar con tecla ESC\r\ndocument.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape' && modal.classList.contains('active')) {\r\n cerrarModal();\r\n }\r\n});\r\n\r\n\/\/ Conectar botones de nombres con sus fichas\r\ndocument.querySelectorAll(\".ov-name-link\").forEach(btn => {\r\n btn.addEventListener(\"click\", () => {\r\n ultimoBotonFoco = btn;\r\n abrirFicha(btn.dataset.id);\r\n });\r\n \r\n \/\/ Permitir abrir con Enter\r\n btn.addEventListener('keydown', (e) => {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n ultimoBotonFoco = btn;\r\n abrirFicha(btn.dataset.id);\r\n }\r\n });\r\n});\r\n\r\n\/* --- Funci\u00f3n de impresi\u00f3n mejorada --- *\/\r\nfunction generarPDF() {\r\n \/\/ Guardar t\u00edtulo actual para restaurar despu\u00e9s\r\n const tituloOriginal = document.title;\r\n \r\n \/\/ Configurar t\u00edtulo para el PDF\r\n const paciente = modalTitle.textContent;\r\n document.title = `Informe M\u00e9dico - ${paciente} - ${new Date().toLocaleDateString()}`;\r\n \r\n \/\/ Activar estilos de impresi\u00f3n\r\n const estilo = document.createElement('style');\r\n estilo.innerHTML = `\r\n @media print {\r\n body * {\r\n visibility: hidden;\r\n }\r\n .ov-modal.active .ov-modal-dialog,\r\n .ov-modal.active .ov-modal-dialog * {\r\n visibility: visible;\r\n }\r\n .ov-modal.active {\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n width: 100%;\r\n height: auto;\r\n background: white;\r\n }\r\n .ov-modal.active .ov-modal-dialog {\r\n box-shadow: none;\r\n border: 1px solid #ddd;\r\n max-height: none;\r\n }\r\n .ov-modal-close {\r\n display: none !important;\r\n }\r\n }\r\n `;\r\n document.head.appendChild(estilo);\r\n \r\n \/\/ Imprimir\r\n window.print();\r\n \r\n \/\/ Restaurar\r\n setTimeout(() => {\r\n document.title = tituloOriginal;\r\n document.head.removeChild(estilo);\r\n }, 100);\r\n}\r\n\r\n\/\/ Conectar bot\u00f3n PDF\r\ndocument.getElementById('ov-pdf-btn')?.addEventListener('click', generarPDF);\r\n\r\n\/* --- Inicializaci\u00f3n --- *\/\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n \/\/ A\u00f1adir animaci\u00f3n de carga inicial\r\n document.body.style.opacity = '0';\r\n document.body.style.transition = 'opacity 0.3s ease';\r\n \r\n setTimeout(() => {\r\n document.body.style.opacity = '1';\r\n }, 100);\r\n \r\n \/\/ Asegurar que los iframes carguen correctamente\r\n document.querySelectorAll('iframe').forEach(iframe => {\r\n iframe.onload = () => {\r\n iframe.style.opacity = '1';\r\n iframe.style.transition = 'opacity 0.3s ease';\r\n };\r\n });\r\n \r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\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-f15ab51 e-con-full e-flex e-con e-parent\" data-id=\"f15ab51\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69cd81d elementor-widget elementor-widget-html\" data-id=\"69cd81d\" 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 Avanzado<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta name=\"description\" content=\"Panel de monitorizaci\u00f3n oncol\u00f3gica para seguimiento de pacientes\">\r\n \r\n <!-- Fuentes Google -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Chart.js para gr\u00e1ficos -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <!-- Favicon -->\r\n <link rel=\"icon\" href=\"data:image\/svg+xml,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>\ud83c\udfe5<\/text><\/svg>\">\r\n\r\n <style>\r\n \/* RESET Y BASE *\/\r\n :root {\r\n --primary: #3b82f6;\r\n --primary-dark: #2563eb;\r\n --primary-light: #60a5fa;\r\n --secondary: #8b5cf6;\r\n --success: #10b981;\r\n --warning: #f59e0b;\r\n --danger: #ef4444;\r\n --info: #06b6d4;\r\n \r\n --bg-dark: #0f172a;\r\n --bg-card: #1e293b;\r\n --bg-hover: #334155;\r\n --border: #475569;\r\n --text-primary: #f1f5f9;\r\n --text-secondary: #94a3b8;\r\n --text-muted: #64748b;\r\n \r\n --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);\r\n --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.3);\r\n --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);\r\n \r\n --radius-lg: 16px;\r\n --radius-md: 12px;\r\n --radius-sm: 8px;\r\n }\r\n \r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n color: var(--text-primary);\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n }\r\n \r\n body.modal-open {\r\n overflow: hidden;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .ov-root {\r\n padding: 24px;\r\n min-height: 100vh;\r\n }\r\n \r\n .ov-wrapper {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n background: var(--bg-dark);\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-lg);\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n }\r\n \r\n \/* CABECERA *\/\r\n .ov-header {\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\r\n padding: 28px 32px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .ov-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\r\n }\r\n \r\n .ov-header-content {\r\n position: relative;\r\n z-index: 2;\r\n }\r\n \r\n .ov-header-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin: 0 0 8px 0;\r\n background: linear-gradient(90deg, #ffffff, #e0f2fe);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n .ov-header-sub {\r\n font-size: 15px;\r\n color: rgba(255, 255, 255, 0.9);\r\n margin: 0 0 16px 0;\r\n font-weight: 400;\r\n }\r\n \r\n .ov-header-meta {\r\n display: flex;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .ov-meta-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 13px;\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n \r\n \/* CONTENIDO PRINCIPAL *\/\r\n .ov-inner {\r\n padding: 32px;\r\n }\r\n \r\n \/* TARJETAS SUPERIORES *\/\r\n .ov-cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 32px;\r\n }\r\n \r\n .ov-stat-card {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n padding: 24px;\r\n border: 1px solid var(--border);\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .ov-stat-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--primary), var(--secondary));\r\n }\r\n \r\n .ov-stat-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-md);\r\n border-color: var(--primary);\r\n }\r\n \r\n .ov-stat-icon {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 12px;\r\n background: rgba(59, 130, 246, 0.1);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin-bottom: 16px;\r\n font-size: 24px;\r\n }\r\n \r\n .ov-stat-value {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 32px;\r\n font-weight: 700;\r\n margin: 0 0 4px 0;\r\n color: var(--text-primary);\r\n }\r\n \r\n .ov-stat-label {\r\n font-size: 13px;\r\n color: var(--text-secondary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n font-weight: 500;\r\n }\r\n \r\n .ov-stat-trend {\r\n font-size: 12px;\r\n margin-top: 8px;\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n \r\n .trend-up { color: var(--success); }\r\n .trend-down { color: var(--danger); }\r\n \r\n \/* BANDEJA PACIENTES *\/\r\n .ov-section {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n border: 1px solid var(--border);\r\n padding: 24px;\r\n margin-bottom: 24px;\r\n }\r\n \r\n .ov-section-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-section-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n color: var(--text-primary);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n .ov-section-title::before {\r\n content: '';\r\n width: 4px;\r\n height: 20px;\r\n background: var(--primary);\r\n border-radius: 2px;\r\n }\r\n \r\n .ov-table-container {\r\n overflow-x: auto;\r\n border-radius: var(--radius-sm);\r\n }\r\n \r\n .ov-data-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 14px;\r\n }\r\n \r\n .ov-data-table thead {\r\n background: rgba(30, 41, 59, 0.8);\r\n }\r\n \r\n .ov-data-table th {\r\n padding: 16px 12px;\r\n text-align: left;\r\n font-weight: 600;\r\n color: var(--text-secondary);\r\n text-transform: uppercase;\r\n font-size: 12px;\r\n letter-spacing: 0.05em;\r\n border-bottom: 2px solid var(--border);\r\n white-space: nowrap;\r\n }\r\n \r\n .ov-data-table td {\r\n padding: 16px 12px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.5);\r\n }\r\n \r\n .ov-data-table tbody tr {\r\n transition: background-color 0.2s ease;\r\n }\r\n \r\n .ov-data-table tbody tr:hover {\r\n background: var(--bg-hover);\r\n }\r\n \r\n \/* BOTONES DE ACCI\u00d3N *\/\r\n .ov-action-btn {\r\n background: none;\r\n border: none;\r\n color: var(--primary);\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 6px 0;\r\n text-align: left;\r\n font-weight: 500;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: color 0.2s ease;\r\n }\r\n \r\n .ov-action-btn:hover {\r\n color: var(--primary-light);\r\n }\r\n \r\n \/* INDICADORES DE ESTADO *\/\r\n .status-badge {\r\n padding: 4px 10px;\r\n border-radius: 20px;\r\n font-size: 11px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .status-critical {\r\n background: rgba(239, 68, 68, 0.15);\r\n color: var(--danger);\r\n border: 1px solid rgba(239, 68, 68, 0.3);\r\n }\r\n \r\n .status-high {\r\n background: rgba(245, 158, 11, 0.15);\r\n color: var(--warning);\r\n border: 1px solid rgba(245, 158, 11, 0.3);\r\n }\r\n \r\n .status-moderate {\r\n background: rgba(59, 130, 246, 0.15);\r\n color: var(--primary);\r\n border: 1px solid rgba(59, 130, 246, 0.3);\r\n }\r\n \r\n .status-stable {\r\n background: rgba(16, 185, 129, 0.15);\r\n color: var(--success);\r\n border: 1px solid rgba(16, 185, 129, 0.3);\r\n }\r\n \r\n \/* PANEL INFERIOR *\/\r\n .ov-dashboard-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 24px;\r\n margin-top: 32px;\r\n }\r\n \r\n .ov-dashboard-card {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n border: 1px solid var(--border);\r\n padding: 24px;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .ov-dashboard-card:hover {\r\n border-color: var(--primary);\r\n box-shadow: var(--shadow-sm);\r\n }\r\n \r\n .ov-card-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-card-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: var(--text-primary);\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n \r\n \/* MODAL MODERNO *\/\r\n .ov-modal-overlay {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(15, 23, 42, 0.9);\r\n backdrop-filter: blur(10px);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10000;\r\n padding: 20px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .ov-modal-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n \r\n .ov-modal-container {\r\n width: 100%;\r\n max-width: 1200px;\r\n max-height: 90vh;\r\n background: var(--bg-card);\r\n border-radius: var(--radius-lg);\r\n border: 1px solid var(--border);\r\n overflow: hidden;\r\n transform: translateY(30px) scale(0.95);\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\r\n box-shadow: var(--shadow-lg);\r\n }\r\n \r\n .ov-modal-overlay.active .ov-modal-container {\r\n transform: translateY(0) scale(1);\r\n }\r\n \r\n .ov-modal-header {\r\n padding: 24px 32px;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(15, 23, 42, 0.8);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .ov-modal-header-content {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n }\r\n \r\n .patient-avatar {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n color: white;\r\n font-weight: 600;\r\n }\r\n \r\n .patient-info h2 {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 20px;\r\n font-weight: 600;\r\n margin: 0 0 4px 0;\r\n }\r\n \r\n .patient-meta {\r\n display: flex;\r\n gap: 16px;\r\n font-size: 13px;\r\n color: var(--text-secondary);\r\n }\r\n \r\n .ov-modal-close {\r\n background: none;\r\n border: none;\r\n color: var(--text-secondary);\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 40px;\r\n height: 40px;\r\n border-radius: var(--radius-sm);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s ease;\r\n }\r\n \r\n .ov-modal-close:hover {\r\n background: var(--bg-hover);\r\n color: var(--text-primary);\r\n }\r\n \r\n \/* CONTENIDO MODAL - FICHA AVANZADA *\/\r\n .patient-dashboard {\r\n padding: 0;\r\n }\r\n \r\n .dashboard-tabs {\r\n display: flex;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(15, 23, 42, 0.5);\r\n padding: 0 32px;\r\n }\r\n \r\n .tab-btn {\r\n padding: 16px 24px;\r\n background: none;\r\n border: none;\r\n color: var(--text-secondary);\r\n font: inherit;\r\n cursor: pointer;\r\n font-weight: 500;\r\n position: relative;\r\n transition: color 0.2s ease;\r\n }\r\n \r\n .tab-btn:hover {\r\n color: var(--text-primary);\r\n }\r\n \r\n .tab-btn.active {\r\n color: var(--primary);\r\n }\r\n \r\n .tab-btn.active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -1px;\r\n left: 0;\r\n right: 0;\r\n height: 2px;\r\n background: var(--primary);\r\n }\r\n \r\n .tab-content {\r\n display: none;\r\n padding: 32px;\r\n animation: fadeIn 0.3s ease;\r\n }\r\n \r\n .tab-content.active {\r\n display: block;\r\n }\r\n \r\n \/* GR\u00c1FICOS *\/\r\n .metrics-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 20px;\r\n margin-bottom: 32px;\r\n }\r\n \r\n .metric-card {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: var(--radius-md);\r\n padding: 20px;\r\n border: 1px solid var(--border);\r\n }\r\n \r\n .metric-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n }\r\n \r\n .metric-title {\r\n font-size: 14px;\r\n color: var(--text-secondary);\r\n font-weight: 500;\r\n }\r\n \r\n .metric-value {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 32px;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .metric-trend {\r\n font-size: 12px;\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n \r\n \/* LINEA TEMPORAL *\/\r\n .timeline {\r\n position: relative;\r\n padding-left: 30px;\r\n }\r\n \r\n .timeline::before {\r\n content: '';\r\n position: absolute;\r\n left: 11px;\r\n top: 0;\r\n bottom: 0;\r\n width: 2px;\r\n background: var(--border);\r\n }\r\n \r\n .timeline-item {\r\n position: relative;\r\n margin-bottom: 24px;\r\n }\r\n \r\n .timeline-item::before {\r\n content: '';\r\n position: absolute;\r\n left: -30px;\r\n top: 4px;\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n background: var(--primary);\r\n border: 3px solid var(--bg-card);\r\n }\r\n \r\n .timeline-date {\r\n font-size: 12px;\r\n color: var(--text-secondary);\r\n margin-bottom: 4px;\r\n }\r\n \r\n .timeline-content {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: var(--radius-sm);\r\n padding: 12px 16px;\r\n border: 1px solid var(--border);\r\n }\r\n \r\n \/* GRID DE DATOS *\/\r\n .data-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n }\r\n \r\n .data-group {\r\n background: rgba(30, 41, 59, 0.5);\r\n border-radius: var(--radius-md);\r\n padding: 20px;\r\n border: 1px solid var(--border);\r\n }\r\n \r\n .data-group-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n margin-bottom: 16px;\r\n color: var(--text-primary);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .data-row {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 12px 0;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.3);\r\n }\r\n \r\n .data-row:last-child {\r\n border-bottom: none;\r\n }\r\n \r\n .data-label {\r\n color: var(--text-secondary);\r\n font-size: 14px;\r\n }\r\n \r\n .data-value {\r\n font-weight: 500;\r\n color: var(--text-primary);\r\n }\r\n \r\n \/* BOTONES DE ACCI\u00d3N *\/\r\n .action-buttons {\r\n display: flex;\r\n gap: 12px;\r\n margin-top: 32px;\r\n flex-wrap: wrap;\r\n }\r\n \r\n .btn {\r\n padding: 12px 24px;\r\n border-radius: var(--radius-sm);\r\n border: none;\r\n font: inherit;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n color: white;\r\n }\r\n \r\n .btn-primary:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);\r\n }\r\n \r\n .btn-secondary {\r\n background: rgba(71, 85, 105, 0.3);\r\n color: var(--text-primary);\r\n border: 1px solid var(--border);\r\n }\r\n \r\n .btn-secondary:hover {\r\n background: rgba(71, 85, 105, 0.5);\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .ov-inner {\r\n padding: 24px;\r\n }\r\n \r\n .ov-modal-container {\r\n max-width: 95%;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .ov-root {\r\n padding: 16px;\r\n }\r\n \r\n .ov-header {\r\n padding: 24px;\r\n }\r\n \r\n .ov-header-title {\r\n font-size: 24px;\r\n }\r\n \r\n .ov-cards-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .dashboard-tabs {\r\n overflow-x: auto;\r\n padding: 0 16px;\r\n }\r\n \r\n .tab-btn {\r\n padding: 12px 16px;\r\n white-space: nowrap;\r\n }\r\n \r\n .tab-content {\r\n padding: 24px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .ov-cards-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .ov-dashboard-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .metrics-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .data-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n \r\n \/* ANIMACIONES *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.7; }\r\n }\r\n \r\n .pulse {\r\n animation: pulse 2s infinite;\r\n }\r\n \r\n \/* UTILIDADES *\/\r\n .color-primary { color: var(--primary); }\r\n .color-success { color: var(--success); }\r\n .color-warning { color: var(--warning); }\r\n .color-danger { color: var(--danger); }\r\n .color-info { color: var(--info); }\r\n \r\n .text-sm { font-size: 12px; }\r\n .text-md { font-size: 14px; }\r\n .text-lg { font-size: 16px; }\r\n \r\n .font-semibold { font-weight: 600; }\r\n .font-bold { font-weight: 700; }\r\n \r\n .mb-4 { margin-bottom: 16px; }\r\n .mb-8 { margin-bottom: 32px; }\r\n .mt-4 { margin-top: 16px; }\r\n .mt-8 { margin-top: 32px; }\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 <!-- CABECERA -->\r\n <header class=\"ov-header\">\r\n <div class=\"ov-header-content\">\r\n <h1 class=\"ov-header-title\">Olas de Vida \u00b7 Panel M\u00e9dico Avanzado<\/h1>\r\n <p class=\"ov-header-sub\">Monitorizaci\u00f3n oncol\u00f3gica en tiempo real \u00b7 Integraci\u00f3n con datos de paciente<\/p>\r\n \r\n <div class=\"ov-header-meta\">\r\n <div class=\"ov-meta-item\">\r\n <span>\ud83c\udfe5<\/span>\r\n <span>Unidad de Oncolog\u00eda Integral<\/span>\r\n <\/div>\r\n <div class=\"ov-meta-item\">\r\n <span>\ud83d\udc68\u200d\u2695\ufe0f<\/span>\r\n <span>Dr. Alejandro Mart\u00ednez \u00b7 M\u00e9dico Responsable<\/span>\r\n <\/div>\r\n <div class=\"ov-meta-item\">\r\n <span>\ud83d\udd04<\/span>\r\n <span>\u00daltima actualizaci\u00f3n: Hoy 14:30<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- CONTENIDO PRINCIPAL -->\r\n <main class=\"ov-inner\">\r\n\r\n <!-- KPI CARDS -->\r\n <div class=\"ov-cards-grid\">\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-icon\">\ud83d\udc65<\/div>\r\n <div class=\"ov-stat-value\">24<\/div>\r\n <div class=\"ov-stat-label\">Pacientes Activos<\/div>\r\n <div class=\"ov-stat-trend trend-up\">\u2191 8% este mes<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-icon\">\u26a0\ufe0f<\/div>\r\n <div class=\"ov-stat-value\">6<\/div>\r\n <div class=\"ov-stat-label\">Alertas Activas<\/div>\r\n <div class=\"ov-stat-trend trend-down\">\u2193 2 desde ayer<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-icon\">\ud83d\udcca<\/div>\r\n <div class=\"ov-stat-value\">92%<\/div>\r\n <div class=\"ov-stat-label\">Adherencia Media<\/div>\r\n <div class=\"ov-stat-trend trend-up\">\u2191 4% esta semana<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-icon\">\u2705<\/div>\r\n <div class=\"ov-stat-value\">18<\/div>\r\n <div class=\"ov-stat-label\">Formularios Hoy<\/div>\r\n <div class=\"ov-stat-trend trend-up\">\u2191 12 desde ayer<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- BANDEJA DE PACIENTES -->\r\n <section class=\"ov-section\">\r\n <div class=\"ov-section-header\">\r\n <h2 class=\"ov-section-title\">Bandeja de Pacientes<\/h2>\r\n <button class=\"btn btn-secondary\">\r\n <span>\u2699\ufe0f<\/span> Filtrar\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"ov-table-container\">\r\n <table class=\"ov-data-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>S\u00edntomas<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo Registro<\/th>\r\n <th>Acciones<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- Paciente 1 -->\r\n <tr>\r\n <td>\r\n <button class=\"ov-action-btn\" data-id=\"ODV001\">\r\n <span>\ud83d\udc69<\/span> Mar\u00eda Garc\u00eda L\u00f3pez\r\n <\/button>\r\n <\/td>\r\n <td>ODV001<\/td>\r\n <td>C\u00e1ncer de mama \u00b7 Estadio II<\/td>\r\n <td>\r\n <div class=\"text-sm\">\r\n <span class=\"color-danger\">Dolor 9\/10<\/span> \u00b7 \r\n <span class=\"color-warning\">Fiebre 38.5\u00b0C<\/span>\r\n <\/div>\r\n <\/td>\r\n <td><span class=\"status-badge status-critical\">Cr\u00edtico<\/span><\/td>\r\n <td>Hoy 08:40 \u00b7 Formulario completo<\/td>\r\n <td>\r\n <button class=\"btn btn-secondary text-sm\" data-id=\"ODV001\">\r\n Ver Detalles\r\n <\/button>\r\n <\/td>\r\n <\/tr>\r\n\r\n <!-- Paciente 2 -->\r\n <tr>\r\n <td>\r\n <button class=\"ov-action-btn\" data-id=\"ODV002\">\r\n <span>\ud83d\udc68<\/span> Roberto Silva Jim\u00e9nez\r\n <\/button>\r\n <\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>\r\n <div class=\"text-sm\">\r\n <span class=\"color-warning\">Dolor 6\/10<\/span> \u00b7 \r\n <span class=\"color-danger\">\u00c1nimo 3\/10<\/span>\r\n <\/div>\r\n <\/td>\r\n <td><span class=\"status-badge status-high\">Alto Riesgo<\/span><\/td>\r\n <td>Ayer 20:10 \u00b7 Formulario parcial<\/td>\r\n <td>\r\n <button class=\"btn btn-secondary text-sm\" data-id=\"ODV002\">\r\n Ver Detalles\r\n <\/button>\r\n <\/td>\r\n <\/tr>\r\n\r\n <!-- M\u00e1s pacientes... -->\r\n <tr>\r\n <td>\r\n <button class=\"ov-action-btn\" data-id=\"ODV003\">\r\n <span>\ud83d\udc69<\/span> Ana Fern\u00e1ndez L\u00f3pez\r\n <\/button>\r\n <\/td>\r\n <td>ODV003<\/td>\r\n <td>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>\r\n <div class=\"text-sm\">\r\n <span class=\"color-warning\">Dolor 6\/10<\/span> \u00b7 \r\n <span class=\"color-success\">\u00c1nimo 7\/10<\/span>\r\n <\/div>\r\n <\/td>\r\n <td><span class=\"status-badge status-moderate\">Moderado<\/span><\/td>\r\n <td>Hoy 07:50 \u00b7 Formulario completo<\/td>\r\n <td>\r\n <button class=\"btn btn-secondary text-sm\" data-id=\"ODV003\">\r\n Ver Detalles\r\n <\/button>\r\n <\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- DASHBOARD INFERIOR -->\r\n <div class=\"ov-dashboard-grid\">\r\n <!-- IA Assistant -->\r\n <div class=\"ov-dashboard-card\">\r\n <div class=\"ov-card-header\">\r\n <h3 class=\"ov-card-title\">\r\n <span>\ud83e\udd16<\/span> Juli\u00e1n \u00b7 Asistente IA\r\n <\/h3>\r\n <span class=\"pulse\">\ud83d\udfe2 En l\u00ednea<\/span>\r\n <\/div>\r\n <p class=\"text-sm color-text-secondary mb-4\">\r\n Asistente m\u00e9dico inteligente para an\u00e1lisis predictivo y recomendaciones.\r\n <\/p>\r\n <iframe\r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n style=\"width:100%; height:300px; border:0; border-radius: var(--radius-sm);\"\r\n title=\"Asistente IA Juli\u00e1n\">\r\n <\/iframe>\r\n <\/div>\r\n\r\n <!-- Alertas -->\r\n <div class=\"ov-dashboard-card\">\r\n <div class=\"ov-card-header\">\r\n <h3 class=\"ov-card-title\">\r\n <span>\ud83d\udea8<\/span> Alertas Recientes\r\n <\/h3>\r\n <span class=\"status-badge status-critical\">3 cr\u00edticas<\/span>\r\n <\/div>\r\n <div class=\"timeline\">\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-date\">Hoy 10:30<\/div>\r\n <div class=\"timeline-content\">\r\n <strong>Fiebre alta >39\u00b0C<\/strong>\r\n <div class=\"text-sm\">Mar\u00eda Garc\u00eda \u00b7 Posible neutropenia febril<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-date\">Hoy 09:15<\/div>\r\n <div class=\"timeline-content\">\r\n <strong>Dolor intenso 9\/10<\/strong>\r\n <div class=\"text-sm\">Daniel Mu\u00f1oz \u00b7 Requiere ajuste analgesia<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-date\">Ayer 22:45<\/div>\r\n <div class=\"timeline-content\">\r\n <strong>\u00c1nimo cr\u00edtico 2\/10<\/strong>\r\n <div class=\"text-sm\">Roberto Silva \u00b7 Derivaci\u00f3n psico-oncolog\u00eda<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Evoluci\u00f3n -->\r\n <div class=\"ov-dashboard-card\">\r\n <div class=\"ov-card-header\">\r\n <h3 class=\"ov-card-title\">\r\n <span>\ud83d\udcc8<\/span> Evoluci\u00f3n Semanal\r\n <\/h3>\r\n <span class=\"text-sm color-text-secondary\">Promedio pacientes<\/span>\r\n <\/div>\r\n <canvas id=\"weeklyChart\" style=\"width:100%; height:250px;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL FICHA PACIENTE AVANZADA -->\r\n<div id=\"patientModal\" class=\"ov-modal-overlay\" aria-hidden=\"true\">\r\n <div class=\"ov-modal-container\">\r\n <!-- Cabecera Modal -->\r\n <div class=\"ov-modal-header\">\r\n <div class=\"ov-modal-header-content\">\r\n <div class=\"patient-avatar\" id=\"patientAvatar\">ML<\/div>\r\n <div class=\"patient-info\">\r\n <h2 id=\"patientName\">Mar\u00eda Garc\u00eda L\u00f3pez<\/h2>\r\n <div class=\"patient-meta\">\r\n <span>ID: <strong id=\"patientId\">ODV001<\/strong><\/span>\r\n <span>Edad: <strong id=\"patientAge\">52 a\u00f1os<\/strong><\/span>\r\n <span>Contacto: <strong id=\"patientContact\">maria.garcia@email.com<\/strong><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button class=\"ov-modal-close\" aria-label=\"Cerrar\">\u00d7<\/button>\r\n <\/div>\r\n\r\n <!-- Tabs de Navegaci\u00f3n -->\r\n <div class=\"dashboard-tabs\">\r\n <button class=\"tab-btn active\" data-tab=\"overview\">\ud83d\udccb Resumen<\/button>\r\n <button class=\"tab-btn\" data-tab=\"metrics\">\ud83d\udcca M\u00e9tricas<\/button>\r\n <button class=\"tab-btn\" data-tab=\"treatment\">\ud83d\udc8a Tratamiento<\/button>\r\n <button class=\"tab-btn\" data-tab=\"analytics\">\ud83d\udd2c Anal\u00edticas<\/button>\r\n <button class=\"tab-btn\" data-tab=\"forms\">\ud83d\udcdd Formularios<\/button>\r\n <\/div>\r\n\r\n <!-- Contenido de Tabs -->\r\n <div class=\"patient-dashboard\">\r\n <!-- Tab Resumen -->\r\n <div id=\"tab-overview\" class=\"tab-content active\">\r\n <div class=\"metrics-grid\">\r\n <div class=\"metric-card\">\r\n <div class=\"metric-header\">\r\n <div class=\"metric-title\">Dolor Actual<\/div>\r\n <span class=\"status-badge status-critical\">Cr\u00edtico<\/span>\r\n <\/div>\r\n <div class=\"metric-value color-danger\">9\/10<\/div>\r\n <div class=\"metric-trend trend-up\">\r\n <span>\u2191 2 puntos desde ayer<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"metric-card\">\r\n <div class=\"metric-header\">\r\n <div class=\"metric-title\">Estado de \u00c1nimo<\/div>\r\n <span class=\"status-badge status-moderate\">Moderado<\/span>\r\n <\/div>\r\n <div class=\"metric-value color-warning\">8\/10<\/div>\r\n <div class=\"metric-trend trend-down\">\r\n <span>\u2193 1 punto esta semana<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"metric-card\">\r\n <div class=\"metric-header\">\r\n <div class=\"metric-title\">Adherencia<\/div>\r\n <span class=\"status-badge status-stable\">Excelente<\/span>\r\n <\/div>\r\n <div class=\"metric-value color-success\">94%<\/div>\r\n <div class=\"metric-trend trend-up\">\r\n <span>\u2191 3% este mes<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"metric-card\">\r\n <div class=\"metric-header\">\r\n <div class=\"metric-title\">Fiebre<\/div>\r\n <span class=\"status-badge status-critical\">Alta<\/span>\r\n <\/div>\r\n <div class=\"metric-value color-danger\">38.8\u00b0C<\/div>\r\n <div class=\"metric-trend\">\r\n <span>Estable desde ayer<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-grid mb-8\">\r\n <div class=\"data-group\">\r\n <h3 class=\"data-group-title\">\ud83d\udccb Diagn\u00f3stico Principal<\/h3>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Tipo<\/span>\r\n <span class=\"data-value\">Carcinoma ductal invasivo<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Estadio<\/span>\r\n <span class=\"data-value\">IIB (T2N1M0)<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Receptores<\/span>\r\n <span class=\"data-value\">ER+\/PR+, HER2-<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Fecha diagn\u00f3stico<\/span>\r\n <span class=\"data-value\">15\/10\/2023<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-group\">\r\n <h3 class=\"data-group-title\">\ud83d\udc68\u200d\u2695\ufe0f Equipo M\u00e9dico<\/h3>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Onc\u00f3logo<\/span>\r\n <span class=\"data-value\">Dr. Alejandro Mart\u00ednez<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Enfermera<\/span>\r\n <span class=\"data-value\">Laura Fern\u00e1ndez<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Psico-onc\u00f3logo<\/span>\r\n <span class=\"data-value\">Dra. Carmen Ruiz<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Pr\u00f3xima cita<\/span>\r\n <span class=\"data-value\">25\/01\/2024 10:30<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Gr\u00e1fico de Evoluci\u00f3n -->\r\n <div class=\"ov-dashboard-card\">\r\n <div class=\"ov-card-header\">\r\n <h3 class=\"ov-card-title\">\ud83d\udcc8 Evoluci\u00f3n Dolor\/\u00c1nimo (\u00daltimos 7 d\u00edas)<\/h3>\r\n <span class=\"text-sm color-text-secondary\">Datos de olasdevida.es<\/span>\r\n <\/div>\r\n <canvas id=\"patientChart\" style=\"width:100%; height:250px;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tab M\u00e9tricas -->\r\n <div id=\"tab-metrics\" class=\"tab-content\">\r\n <div class=\"data-grid\">\r\n <div class=\"data-group\">\r\n <h3 class=\"data-group-title\">\ud83d\udcca S\u00edntomas Diarios<\/h3>\r\n <!-- Los datos se cargar\u00e1n din\u00e1micamente -->\r\n <div id=\"symptomsData\"><\/div>\r\n <\/div>\r\n <div class=\"data-group\">\r\n <h3 class=\"data-group-title\">\ud83d\udcc8 Tendencias<\/h3>\r\n <!-- Gr\u00e1ficos adicionales -->\r\n <canvas id=\"metricsChart\" style=\"width:100%; height:200px;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Tab Tratamiento -->\r\n <div id=\"tab-treatment\" class=\"tab-content\">\r\n <div class=\"data-grid\">\r\n <div class=\"data-group\">\r\n <h3 class=\"data-group-title\">\ud83d\udc8a Medicaci\u00f3n Actual<\/h3>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Quimioterapia<\/span>\r\n <span class=\"data-value\">AC-T (Ciclo 4\/6)<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Analgesia<\/span>\r\n <span class=\"data-value\">Paracetamol 1g\/8h + Tramadol PRN<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Antiem\u00e9tico<\/span>\r\n <span class=\"data-value\">Ondansetr\u00f3n 8mg\/12h<\/span>\r\n <\/div>\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">Factor crecimiento<\/span>\r\n <span class=\"data-value\">Filgrastim d\u00edas 2-7<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"data-group\">\r\n <h3 class=\"data-group-title\">\ud83d\udcc5 Calendario Tratamiento<\/h3>\r\n <div class=\"timeline\">\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-date\">Hoy<\/div>\r\n <div class=\"timeline-content\">\r\n <strong>Quimioterapia ciclo 4<\/strong>\r\n <div class=\"text-sm\">Hospital Universitario \u00b7 Sala 3<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-date\">Ma\u00f1ana<\/div>\r\n <div class=\"timeline-content\">\r\n <strong>Inyecci\u00f3n Filgrastim<\/strong>\r\n <div class=\"text-sm\">Autoadministraci\u00f3n en domicilio<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline-item\">\r\n <div class=\"timeline-date\">25 Ene<\/div>\r\n <div class=\"timeline-content\">\r\n <strong>Control anal\u00edtico<\/strong>\r\n <div class=\"text-sm\">Extracci\u00f3n sangre + consulta<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Botones de Acci\u00f3n -->\r\n <div class=\"action-buttons\" style=\"padding: 0 32px 32px;\">\r\n <button class=\"btn btn-primary\" onclick=\"window.print()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Generar Informe\r\n <\/button>\r\n <button class=\"btn btn-secondary\" id=\"openFormBtn\">\r\n <span>\ud83d\udcdd<\/span> Abrir Formulario\r\n <\/button>\r\n <button class=\"btn btn-secondary\" id=\"contactPatientBtn\">\r\n <span>\ud83d\udcde<\/span> Contactar Paciente\r\n <\/button>\r\n <button class=\"btn btn-secondary\" id=\"addNoteBtn\">\r\n <span>\u270f\ufe0f<\/span> A\u00f1adir Nota\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n \ud83d\udd25 DATOS DE PACIENTES (Simulados - despu\u00e9s vendr\u00e1n de API)\r\n ============================================================ *\/\r\nconst pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n iniciales: \"ML\",\r\n edad: \"52 a\u00f1os\",\r\n contacto: \"maria.garcia@email.com \u00b7 612345678\",\r\n diagnostico: \"Carcinoma ductal invasivo \u00b7 Estadio IIB\",\r\n equipo: {\r\n oncologo: \"Dr. Alejandro Mart\u00ednez\",\r\n enfermera: \"Laura Fern\u00e1ndez\",\r\n psicooncologo: \"Dra. Carmen Ruiz\"\r\n },\r\n tratamiento: {\r\n tipo: \"Quimioterapia neoadyuvante AC-T\",\r\n ciclo: \"4\/6\",\r\n proximaCita: \"25\/01\/2024 10:30\"\r\n },\r\n metricas: {\r\n dolor: { valor: 9, tendencia: \"up\", historico: [8, 7, 6, 7, 8, 9, 9] },\r\n animo: { valor: 8, tendencia: \"down\", historico: [9, 8, 8, 7, 7, 8, 8] },\r\n fiebre: { valor: 38.8, tendencia: \"stable\" },\r\n adherencia: { valor: 94, tendencia: \"up\" }\r\n },\r\n sintomas: [\r\n \"Dolor mamario intenso\",\r\n \"Fiebre intermitente\",\r\n \"Insomnio\",\r\n \"Limitaci\u00f3n movilidad brazo\"\r\n ],\r\n alertas: [\r\n \"Fiebre >38.5\u00b0C - Posible neutropenia\",\r\n \"Dolor 9\/10 - Requiere ajuste analgesia\",\r\n \"Necesita apoyo psico-oncol\u00f3gico\"\r\n ]\r\n },\r\n \r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n iniciales: \"RS\",\r\n edad: \"45 a\u00f1os\",\r\n contacto: \"roberto.silva@email.com \u00b7 623456789\",\r\n diagnostico: \"Linfoma no Hodgkin \u00b7 Ciclo 2\/8\",\r\n metricas: {\r\n dolor: { valor: 6, tendencia: \"stable\" },\r\n animo: { valor: 3, tendencia: \"down\" }\r\n }\r\n },\r\n \r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n iniciales: \"AF\",\r\n edad: \"48 a\u00f1os\",\r\n contacto: \"ana.fernandez@email.com \u00b7 634567890\",\r\n diagnostico: \"C\u00e1ncer de mama \u00b7 Ciclo 3\/6\",\r\n metricas: {\r\n dolor: { valor: 6, tendencia: \"stable\" },\r\n animo: { valor: 7, tendencia: \"up\" }\r\n }\r\n }\r\n};\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 CONFIGURACI\u00d3N DE GR\u00c1FICOS\r\n ============================================================ *\/\r\nfunction initCharts() {\r\n \/\/ Gr\u00e1fico semanal (dashboard)\r\n const weeklyCtx = document.getElementById('weeklyChart')?.getContext('2d');\r\n if (weeklyCtx) {\r\n new Chart(weeklyCtx, {\r\n type: 'line',\r\n data: {\r\n labels: ['Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b', 'Dom'],\r\n datasets: [\r\n {\r\n label: 'Dolor promedio',\r\n data: [5.2, 5.8, 6.1, 5.9, 6.3, 5.7, 5.5],\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.4\r\n },\r\n {\r\n label: '\u00c1nimo promedio',\r\n data: [6.8, 6.5, 6.2, 6.4, 6.1, 6.7, 6.9],\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.4\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 labels: { color: '#94a3b8' }\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n grid: { color: 'rgba(71, 85, 105, 0.3)' },\r\n ticks: { color: '#94a3b8' }\r\n },\r\n x: {\r\n grid: { color: 'rgba(71, 85, 105, 0.3)' },\r\n ticks: { color: '#94a3b8' }\r\n }\r\n }\r\n }\r\n });\r\n }\r\n}\r\n\r\nfunction createPatientChart(patientData) {\r\n const ctx = document.getElementById('patientChart')?.getContext('2d');\r\n if (!ctx) return;\r\n \r\n \/\/ Destruir gr\u00e1fico anterior si existe\r\n if (window.patientChartInstance) {\r\n window.patientChartInstance.destroy();\r\n }\r\n \r\n window.patientChartInstance = new Chart(ctx, {\r\n type: 'line',\r\n data: {\r\n labels: ['-6d', '-5d', '-4d', '-3d', '-2d', '-1d', 'Hoy'],\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: patientData.metricas.dolor.historico || [8, 7, 6, 7, 8, 9, 9],\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n borderWidth: 3,\r\n tension: 0.4,\r\n fill: true\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: patientData.metricas.animo.historico || [9, 8, 8, 7, 7, 8, 8],\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n borderWidth: 3,\r\n tension: 0.4,\r\n fill: true\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 labels: {\r\n color: '#94a3b8',\r\n font: { size: 12 }\r\n }\r\n },\r\n tooltip: {\r\n backgroundColor: 'rgba(15, 23, 42, 0.9)',\r\n titleColor: '#f1f5f9',\r\n bodyColor: '#cbd5e1',\r\n borderColor: '#475569',\r\n borderWidth: 1\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)',\r\n drawBorder: false\r\n },\r\n ticks: {\r\n color: '#94a3b8',\r\n stepSize: 2\r\n }\r\n },\r\n x: {\r\n grid: {\r\n color: 'rgba(71, 85, 105, 0.3)',\r\n drawBorder: false\r\n },\r\n ticks: {\r\n color: '#94a3b8'\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 GESTI\u00d3N DEL MODAL\r\n ============================================================ *\/\r\nconst modal = document.getElementById('patientModal');\r\nconst closeBtn = modal.querySelector('.ov-modal-close');\r\nconst tabBtns = modal.querySelectorAll('.tab-btn');\r\nconst tabContents = modal.querySelectorAll('.tab-content');\r\n\r\n\/\/ Abrir modal con datos del paciente\r\nfunction openPatientModal(patientId) {\r\n const paciente = pacientes[patientId];\r\n if (!paciente) return;\r\n \r\n \/\/ Actualizar informaci\u00f3n b\u00e1sica\r\n document.getElementById('patientName').textContent = paciente.nombre;\r\n document.getElementById('patientId').textContent = patientId;\r\n document.getElementById('patientAge').textContent = paciente.edad;\r\n document.getElementById('patientContact').textContent = paciente.contacto;\r\n document.getElementById('patientAvatar').textContent = paciente.iniciales;\r\n \r\n \/\/ Actualizar contenido din\u00e1mico\r\n updatePatientContent(paciente);\r\n \r\n \/\/ Crear gr\u00e1fico del paciente\r\n createPatientChart(paciente);\r\n \r\n \/\/ Mostrar modal\r\n modal.setAttribute('aria-hidden', 'false');\r\n modal.classList.add('active');\r\n document.body.classList.add('modal-open');\r\n \r\n \/\/ Enfocar el modal para accesibilidad\r\n setTimeout(() => {\r\n modal.focus();\r\n }, 100);\r\n}\r\n\r\n\/\/ Actualizar contenido espec\u00edfico del paciente\r\nfunction updatePatientContent(paciente) {\r\n \/\/ Actualizar s\u00edntomas\r\n const symptomsDiv = document.getElementById('symptomsData');\r\n if (symptomsDiv && paciente.sintomas) {\r\n symptomsDiv.innerHTML = paciente.sintomas.map(sintoma => `\r\n <div class=\"data-row\">\r\n <span class=\"data-label\">${sintoma}<\/span>\r\n <span class=\"data-value\">\r\n <span class=\"status-badge ${getSymptomSeverity(sintoma)}\">\r\n ${getSymptomStatus(sintoma)}\r\n <\/span>\r\n <\/span>\r\n <\/div>\r\n `).join('');\r\n }\r\n}\r\n\r\n\/\/ Funciones auxiliares\r\nfunction getSymptomSeverity(symptom) {\r\n if (symptom.includes('intenso') || symptom.includes('fiebre')) {\r\n return 'status-critical';\r\n } else if (symptom.includes('moderado')) {\r\n return 'status-moderate';\r\n }\r\n return 'status-stable';\r\n}\r\n\r\nfunction getSymptomStatus(symptom) {\r\n if (symptom.includes('intenso')) return 'Cr\u00edtico';\r\n if (symptom.includes('fiebre')) return 'Alta';\r\n if (symptom.includes('moderado')) return 'Moderado';\r\n return 'Estable';\r\n}\r\n\r\n\/\/ Cerrar modal\r\nfunction closePatientModal() {\r\n modal.classList.remove('active');\r\n modal.setAttribute('aria-hidden', 'true');\r\n document.body.classList.remove('modal-open');\r\n}\r\n\r\n\/\/ Cambiar tabs\r\ntabBtns.forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const tabId = btn.dataset.tab;\r\n \r\n \/\/ Remover clase active de todos\r\n tabBtns.forEach(b => b.classList.remove('active'));\r\n tabContents.forEach(c => c.classList.remove('active'));\r\n \r\n \/\/ Activar tab seleccionado\r\n btn.classList.add('active');\r\n document.getElementById(`tab-${tabId}`).classList.add('active');\r\n });\r\n});\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 EVENT LISTENERS\r\n ============================================================ *\/\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n \/\/ Inicializar gr\u00e1ficos\r\n initCharts();\r\n \r\n \/\/ Botones de pacientes\r\n document.querySelectorAll('.ov-action-btn, .btn[data-id]').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n const patientId = btn.dataset.id;\r\n if (patientId) {\r\n openPatientModal(patientId);\r\n }\r\n });\r\n });\r\n \r\n \/\/ Cerrar modal\r\n closeBtn.addEventListener('click', closePatientModal);\r\n modal.addEventListener('click', (e) => {\r\n if (e.target === modal) {\r\n closePatientModal();\r\n }\r\n });\r\n \r\n \/\/ Cerrar con ESC\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'Escape' && modal.classList.contains('active')) {\r\n closePatientModal();\r\n }\r\n });\r\n \r\n \/\/ Botones de acci\u00f3n del modal\r\n document.getElementById('openFormBtn')?.addEventListener('click', () => {\r\n const patientId = document.getElementById('patientId').textContent;\r\n window.open(`https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103?paciente=${patientId}`, '_blank');\r\n });\r\n \r\n document.getElementById('contactPatientBtn')?.addEventListener('click', () => {\r\n const contact = document.getElementById('patientContact').textContent;\r\n alert(`Contactar a: ${contact}`);\r\n });\r\n \r\n console.log('\u2705 Panel m\u00e9dico avanzado cargado');\r\n});\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 FUNCIONES PARA INTEGRACI\u00d3N FUTURA\r\n ============================================================ *\/\r\n\/\/ Esta funci\u00f3n simular\u00e1 la obtenci\u00f3n de datos de olasdevida.es\r\nasync function fetchPatientDataFromAPI(patientId) {\r\n \/\/ En producci\u00f3n, esto ser\u00eda una llamada real a la API\r\n return new Promise(resolve => {\r\n setTimeout(() => {\r\n resolve({\r\n success: true,\r\n data: pacientes[patientId] || null,\r\n lastUpdated: new Date().toISOString()\r\n });\r\n }, 300);\r\n });\r\n}\r\n\r\n\/\/ Funci\u00f3n para actualizar datos en tiempo real\r\nfunction startLiveUpdates() {\r\n \/\/ En producci\u00f3n, esto usar\u00eda WebSockets o polling\r\n setInterval(() => {\r\n console.log('\ud83d\udd04 Buscando actualizaciones...');\r\n \/\/ Aqu\u00ed ir\u00eda la l\u00f3gica de actualizaci\u00f3n\r\n }, 30000); \/\/ Cada 30 segundos\r\n}\r\n\r\n\/\/ Iniciar actualizaciones autom\u00e1ticas\r\n\/\/ startLiveUpdates();\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-4155102 e-con-full e-flex e-con e-parent\" data-id=\"4155102\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-30e5924 elementor-widget elementor-widget-html\" data-id=\"30e5924\" 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 <!-- Fuentes -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- Chart.js -->\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\r\n \/* VARIABLES Y RESET *\/\r\n :root {\r\n --primary: #3b82f6;\r\n --primary-dark: #2563eb;\r\n --primary-light: #60a5fa;\r\n --secondary: #8b5cf6;\r\n --success: #10b981;\r\n --warning: #f59e0b;\r\n --danger: #ef4444;\r\n --info: #06b6d4;\r\n --bg-dark: #0f172a;\r\n --bg-card: #1e293b;\r\n --bg-hover: #334155;\r\n --border: #475569;\r\n --text-primary: #f1f5f9;\r\n --text-secondary: #94a3b8;\r\n --text-muted: #64748b;\r\n --radius-lg: 16px;\r\n --radius-md: 12px;\r\n --radius-sm: 8px;\r\n }\r\n \r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);\r\n color: var(--text-primary);\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n }\r\n \r\n body.modal-open { overflow: hidden; }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .ov-root { padding: 20px; min-height: 100vh; }\r\n .ov-wrapper {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n background: var(--bg-dark);\r\n border-radius: var(--radius-lg);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n }\r\n \r\n \/* CABECERA *\/\r\n .ov-header {\r\n background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);\r\n padding: 24px 28px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .ov-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 200px;\r\n height: 200px;\r\n background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\r\n }\r\n \r\n .ov-header-content { position: relative; z-index: 2; }\r\n \r\n .ov-header-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin: 0 0 6px 0;\r\n background: linear-gradient(90deg, #ffffff, #e0f2fe);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n \r\n .ov-header-sub {\r\n font-size: 14px;\r\n color: rgba(255, 255, 255, 0.9);\r\n margin: 0 0 12px 0;\r\n }\r\n \r\n .ov-header-tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n color: rgba(255, 255, 255, 0.8);\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .ov-inner { padding: 24px; }\r\n \r\n \/* TARJETAS KPI *\/\r\n .ov-cards-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n }\r\n \r\n .ov-stat-card {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n padding: 20px;\r\n border: 1px solid var(--border);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .ov-stat-card:hover {\r\n transform: translateY(-2px);\r\n border-color: var(--primary);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .ov-stat-value {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin: 0 0 4px 0;\r\n }\r\n \r\n .ov-stat-label {\r\n font-size: 12px;\r\n color: var(--text-secondary);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .ov-stat-tag {\r\n font-size: 11px;\r\n margin-top: 6px;\r\n color: #6ee7b7;\r\n display: inline-block;\r\n }\r\n \r\n \/* TABLA DE PACIENTES *\/\r\n .ov-panel {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n border: 1px solid var(--border);\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-panel-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin: 0 0 6px 0;\r\n color: var(--text-primary);\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: var(--text-secondary);\r\n margin: 0 0 16px 0;\r\n }\r\n \r\n .ov-scroll {\r\n max-height: 400px;\r\n overflow: auto;\r\n border-radius: var(--radius-sm);\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-track {\r\n background: rgba(15, 23, 42, 0.5);\r\n border-radius: 4px;\r\n }\r\n \r\n .ov-scroll::-webkit-scrollbar-thumb {\r\n background: #4b5563;\r\n border-radius: 4px;\r\n }\r\n \r\n \/* TABLA *\/\r\n .ov-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 13px;\r\n }\r\n \r\n .ov-table th {\r\n background: rgba(15, 23, 42, 0.98);\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 11px;\r\n color: var(--text-secondary);\r\n font-weight: 600;\r\n text-align: left;\r\n padding: 12px 10px;\r\n border-bottom: 2px solid var(--border);\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\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: var(--bg-hover);\r\n }\r\n \r\n \/* BOTONES DE NOMBRE *\/\r\n .ov-name-link {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font: inherit;\r\n color: var(--text-primary);\r\n text-decoration: none;\r\n cursor: pointer;\r\n text-align: left;\r\n font-weight: 500;\r\n }\r\n \r\n .ov-name-link:hover {\r\n color: var(--primary-light);\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR *\/\r\n .ov-bottom-layout {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\r\n margin-top: 20px;\r\n }\r\n \r\n .ov-side-box {\r\n background: var(--bg-card);\r\n border-radius: var(--radius-md);\r\n border: 1px solid var(--border);\r\n padding: 20px;\r\n }\r\n \r\n .ov-side-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin: 0 0 6px 0;\r\n color: var(--text-primary);\r\n }\r\n \r\n .ov-side-sub {\r\n font-size: 13px;\r\n color: var(--text-secondary);\r\n margin: 0 0 12px 0;\r\n }\r\n \r\n \/* BOTONES *\/\r\n .ov-btn {\r\n padding: 10px 20px;\r\n border-radius: 999px;\r\n background: linear-gradient(135deg, var(--primary), var(--primary-dark));\r\n border: none;\r\n color: white;\r\n cursor: pointer;\r\n font-size: 12px;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 0.07em;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\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 \/* MODAL - FICHA M\u00c9DICA *\/\r\n .ov-modal {\r\n position: fixed;\r\n inset: 0;\r\n backdrop-filter: blur(4px);\r\n background: rgba(0, 0, 0, 0.7);\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10000;\r\n padding: 20px;\r\n display: none;\r\n }\r\n \r\n .ov-modal.active {\r\n display: flex;\r\n }\r\n \r\n .ov-modal-dialog {\r\n background: linear-gradient(135deg, var(--bg-card), #1e293b);\r\n border-radius: var(--radius-lg);\r\n border: 1px solid var(--border);\r\n width: 100%;\r\n max-width: 900px;\r\n max-height: 85vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .ov-modal-header {\r\n padding: 20px 24px;\r\n border-bottom: 1px solid var(--border);\r\n background: rgba(15, 23, 42, 0.9);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n \r\n .ov-modal-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n margin: 0;\r\n color: var(--text-primary);\r\n }\r\n \r\n .ov-modal-close {\r\n background: none;\r\n border: none;\r\n color: var(--text-secondary);\r\n font-size: 24px;\r\n cursor: pointer;\r\n width: 36px;\r\n height: 36px;\r\n border-radius: var(--radius-sm);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.2s ease;\r\n }\r\n \r\n .ov-modal-close:hover {\r\n background: var(--bg-hover);\r\n color: var(--text-primary);\r\n }\r\n \r\n .ov-modal-body {\r\n padding: 24px;\r\n font-size: 14px;\r\n color: var(--text-primary);\r\n line-height: 1.6;\r\n overflow-y: auto;\r\n max-height: calc(85vh - 80px);\r\n }\r\n \r\n \/* CONTENIDO FICHA *\/\r\n .ficha-content h3 {\r\n color: var(--primary-light);\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin: 20px 0 10px 0;\r\n padding-bottom: 6px;\r\n border-bottom: 1px solid rgba(148, 163, 184, 0.2);\r\n }\r\n \r\n .ficha-content h3:first-child { margin-top: 0; }\r\n .ficha-content p { margin: 0 0 12px 0; }\r\n .ficha-content ul { margin: 0 0 16px 0; padding-left: 20px; }\r\n .ficha-content li { margin-bottom: 6px; }\r\n \r\n .ficha-content table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin: 16px 0;\r\n font-size: 13px;\r\n }\r\n \r\n .ficha-content th {\r\n background: rgba(30, 41, 59, 0.5);\r\n padding: 10px;\r\n text-align: left;\r\n font-weight: 600;\r\n border-bottom: 2px solid rgba(56, 189, 248, 0.3);\r\n }\r\n \r\n .ficha-content td {\r\n padding: 10px;\r\n border-bottom: 1px solid rgba(75, 85, 99, 0.3);\r\n }\r\n \r\n .ficha-content tr:hover {\r\n background: rgba(30, 41, 59, 0.2);\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 768px) {\r\n .ov-root { padding: 12px; }\r\n .ov-header { padding: 20px; }\r\n .ov-header-title { font-size: 20px; }\r\n .ov-inner { padding: 16px; }\r\n .ov-cards-grid { grid-template-columns: repeat(2, 1fr); }\r\n .ov-bottom-layout { grid-template-columns: 1fr; }\r\n .ov-table { font-size: 12px; }\r\n .ov-table th, .ov-table td { padding: 8px 6px; }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .ov-cards-grid { grid-template-columns: 1fr; }\r\n .ov-modal-dialog { margin: 0; max-height: 90vh; }\r\n .ov-modal-body { padding: 16px; font-size: 13px; }\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 <!-- CABECERA -->\r\n <div class=\"ov-header\">\r\n <div class=\"ov-header-content\">\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 <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n <!-- TARJETAS KPI -->\r\n <div class=\"ov-cards-grid\">\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-value\">10<\/div>\r\n <div class=\"ov-stat-label\">Pacientes activos<\/div>\r\n <div class=\"ov-stat-tag\">Muestra completa<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-value\">3<\/div>\r\n <div class=\"ov-stat-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"ov-stat-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-value\">4<\/div>\r\n <div class=\"ov-stat-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"ov-stat-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-stat-card\">\r\n <div class=\"ov-stat-value\">87%<\/div>\r\n <div class=\"ov-stat-label\">Adherencia<\/div>\r\n <div class=\"ov-stat-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TABLA DE PACIENTES (10 REGISTROS) -->\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 completa.<\/div>\r\n\r\n <div class=\"ov-scroll\">\r\n <table class=\"ov-table\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES COMPLETOS -->\r\n <tr>\r\n <td><button class=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"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=\"ov-name-link\" data-id=\"ODV010\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- PANEL INFERIOR -->\r\n <div class=\"ov-bottom-layout\">\r\n\r\n <!-- PDF -->\r\n <div class=\"ov-side-box\">\r\n <div id=\"ov-pdf-title\" class=\"ov-side-title\">\ud83d\udcc4 PDF m\u00e9dico \/ paciente<\/div>\r\n <div id=\"ov-pdf-body\" class=\"ov-side-sub\">\r\n Selecciona un paciente para preparar su informe m\u00e9dico\/paciente.\r\n <\/div>\r\n <button id=\"ov-pdf-btn\" class=\"ov-btn\" style=\"display:none;\" onclick=\"window.print()\">\r\n <span>\ud83d\udcc4<\/span> Generar PDF\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- JULI\u00c1N - ASISTENTE IA (JOTFORM) -->\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 de apoyo m\u00e9dico integrado con JotForm.<\/div>\r\n\r\n <div style=\"border:1px solid #3b4252; border-radius:10px; overflow:hidden; margin-top:12px;\">\r\n <iframe\r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n style=\"width:100%; height:280px; border:0;\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n loading=\"lazy\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EVOLUCI\u00d3N -->\r\n <div class=\"ov-side-box\">\r\n <div id=\"ov-evo-title\" class=\"ov-side-title\">\ud83d\udcc8 Evoluci\u00f3n semanal<\/div>\r\n <div id=\"ov-evo-sub\" class=\"ov-side-sub\">Selecciona un paciente para ver su evoluci\u00f3n.<\/div>\r\n\r\n <div id=\"ov-evo-charts\" style=\"display:none; margin-top:12px;\">\r\n <canvas id=\"patientChart\" style=\"width:100%; height:180px;\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div> <!-- cierre bottom-layout -->\r\n\r\n <\/div> <!-- cierre ov-inner -->\r\n <\/div> <!-- cierre ov-wrapper -->\r\n<\/div> <!-- cierre ov-root -->\r\n\r\n<!-- MODAL FICHA M\u00c9DICA -->\r\n<div id=\"ov-modal\" class=\"ov-modal\">\r\n <div class=\"ov-modal-dialog\">\r\n <div class=\"ov-modal-header\">\r\n <div id=\"ov-modal-title\" class=\"ov-modal-title\">Ficha del paciente<\/div>\r\n <button id=\"ov-modal-close\" class=\"ov-modal-close\" aria-label=\"Cerrar\">\r\n \u2715\r\n <\/button>\r\n <\/div>\r\n <div id=\"ov-modal-body\" class=\"ov-modal-body\">\r\n <div class=\"ficha-content\">\r\n <!-- Contenido din\u00e1mico -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* ============================================================\r\n \ud83d\udd25 DATOS DE LAS FICHAS M\u00c9DICAS\r\n ============================================================ *\/\r\nconst fichasMedicas = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n contenido: `\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 \u00b7 Receptores: ER+\/PR+, HER2-<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso, requiere ajuste analgesia)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista a pesar del dolor)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C (monitorizaci\u00f3n estrecha)<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <table>\r\n <tr><th>Medicaci\u00f3n<\/th><th>Dosis<\/th><th>Frecuencia<\/th><th>Indicaci\u00f3n<\/th><\/tr>\r\n <tr><td>Paracetamol<\/td><td>1g<\/td><td>Cada 8h<\/td><td>Dolor<\/td><\/tr>\r\n <tr><td>Tramadol<\/td><td>50mg<\/td><td>PRN<\/td><td>Dolor intenso<\/td><\/tr>\r\n <tr><td>Filgrastim<\/td><td>30MU\/0.5mL<\/td><td>D\u00edas 2-7 ciclo<\/td><td>Neutropenia<\/td><\/tr>\r\n <tr><td>Ondansetr\u00f3n<\/td><td>8mg<\/td><td>Cada 12h<\/td><td>N\u00e1useas<\/td><\/tr>\r\n <\/table>\r\n\r\n <h3>\ud83d\udd2c Anal\u00edticas Recientes<\/h3>\r\n <table>\r\n <tr><th>Fecha<\/th><th>Hb<\/th><th>Neutr\u00f3filos<\/th><th>Plaquetas<\/th><th>Observaciones<\/th><\/tr>\r\n <tr><td>13\/01<\/td><td>11.2<\/td><td>1.3<\/td><td>180k<\/td><td>Neutropenia grado 2<\/td><\/tr>\r\n <tr><td>06\/01<\/td><td>11.8<\/td><td>1.8<\/td><td>192k<\/td><td>Dentro l\u00edmites<\/td><\/tr>\r\n <\/table>\r\n\r\n <h3>\ud83d\udcdd Formulario de Seguimiento<\/h3>\r\n <p>Formulario completo enviado hoy a las 08:40<\/p>\r\n <a class=\"ov-btn\" target=\"_blank\" href=\"https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103\">\r\n <span>\ud83d\udccb<\/span> Ver formulario completo\r\n <\/a>\r\n `\r\n },\r\n\r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n contenido: `\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 de quimioterapia<\/strong><\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 3\/10 (depresivo, requiere atenci\u00f3n psico-oncol\u00f3gica)<\/li>\r\n <li><strong>P\u00e9rdida de peso:<\/strong> 4kg en 2 semanas<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udea8 Alertas<\/h3>\r\n <p style=\"color:#fca5a5;\"><strong>\u26a0\ufe0f ATENCI\u00d3N:<\/strong> S\u00edntomas depresivos marcados. Derivaci\u00f3n urgente a psico-oncolog\u00eda.<\/p>\r\n `\r\n },\r\n\r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n contenido: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <p>Buena tolerancia al tratamiento. Efectos secundarios manejables.<\/p>\r\n `\r\n },\r\n\r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n contenido: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV004<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de pulm\u00f3n \u00b7 Ciclo 5\/6<\/strong><\/p>\r\n\r\n <h3>\u2705 Estado<\/h3>\r\n <p>Excelente respuesta al tratamiento. Estable.<\/p>\r\n `\r\n },\r\n\r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n contenido: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV005<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/strong><\/p>\r\n `\r\n },\r\n\r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n contenido: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV006<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/strong><\/p>\r\n `\r\n },\r\n\r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n contenido: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV007<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de p\u00e1ncreas \u00b7 Ciclo 3\/12<\/strong><\/p>\r\n\r\n <h3>\ud83d\udea8 Alerta<\/h3>\r\n <p>Dolor intenso (8\/10). Requiere ajuste de analgesia.<\/p>\r\n `\r\n },\r\n\r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n contenido: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV008<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 2\/6<\/strong><\/p>\r\n\r\n <h3>\ud83d\udea8 URGENTE<\/h3>\r\n <p>Fiebre 38.8\u00b0C \u00b7 Posible neutropenia febril<\/p>\r\n `\r\n },\r\n\r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n contenido: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV009<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de pr\u00f3stata \u00b7 Hormonoterapia + Radioterapia<\/strong><\/p>\r\n `\r\n },\r\n\r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n contenido: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV010<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/strong><\/p>\r\n\r\n <h3>\ud83d\udcca Seguimiento<\/h3>\r\n <p>Control card\u00edaco normal. Buena respuesta al tratamiento.<\/p>\r\n `\r\n }\r\n};\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 GESTI\u00d3N DEL MODAL (CORREGIDO)\r\n ============================================================ *\/\r\nconst modal = document.getElementById('ov-modal');\r\nconst modalTitle = document.getElementById('ov-modal-title');\r\nconst modalBody = document.querySelector('.ficha-content');\r\nconst modalClose = document.getElementById('ov-modal-close');\r\n\r\n\/\/ Gr\u00e1fico de evoluci\u00f3n\r\nlet patientChart = null;\r\n\r\n\/\/ Abrir ficha m\u00e9dica\r\nfunction abrirFichaMedica(id) {\r\n const ficha = fichasMedicas[id];\r\n if (!ficha) {\r\n console.error('Ficha no encontrada:', id);\r\n return;\r\n }\r\n\r\n console.log('Abriendo ficha:', id, ficha.nombre); \/\/ Debug\r\n \r\n \/\/ Actualizar contenido del modal\r\n modalTitle.textContent = `${ficha.nombre} \u00b7 ${id}`;\r\n modalBody.innerHTML = ficha.contenido;\r\n \r\n \/\/ Mostrar modal\r\n modal.classList.add('active');\r\n document.body.classList.add('modal-open');\r\n \r\n \/\/ Actualizar panel PDF\r\n document.getElementById('ov-pdf-title').textContent = `\ud83d\udcc4 PDF de ${ficha.nombre}`;\r\n document.getElementById('ov-pdf-body').textContent = `Informe cl\u00ednico preparado para ${ficha.nombre}`;\r\n document.getElementById('ov-pdf-btn').style.display = 'inline-flex';\r\n \r\n \/\/ Actualizar panel evoluci\u00f3n\r\n document.getElementById('ov-evo-title').textContent = `\ud83d\udcc8 Evoluci\u00f3n \u00b7 ${ficha.nombre}`;\r\n document.getElementById('ov-evo-sub').textContent = `Gr\u00e1fica de seguimiento`;\r\n document.getElementById('ov-evo-charts').style.display = 'block';\r\n \r\n \/\/ Crear o actualizar gr\u00e1fico\r\n crearGraficoEvolucion(id);\r\n \r\n \/\/ Enfocar el modal para accesibilidad\r\n setTimeout(() => modal.focus(), 100);\r\n}\r\n\r\n\/\/ Crear gr\u00e1fico de evoluci\u00f3n\r\nfunction crearGraficoEvolucion(patientId) {\r\n const ctx = document.getElementById('patientChart');\r\n if (!ctx) return;\r\n \r\n \/\/ Datos de ejemplo (en producci\u00f3n vendr\u00edan de API)\r\n const datos = {\r\n labels: ['Lun', 'Mar', 'Mi\u00e9', 'Jue', 'Vie', 'S\u00e1b', 'Dom'],\r\n dolor: [6, 7, 8, 7, 8, 9, 9],\r\n animo: [7, 7, 6, 7, 7, 8, 8]\r\n };\r\n \r\n \/\/ Destruir gr\u00e1fico anterior si existe\r\n if (patientChart) {\r\n patientChart.destroy();\r\n }\r\n \r\n \/\/ Crear nuevo gr\u00e1fico\r\n patientChart = new Chart(ctx.getContext('2d'), {\r\n type: 'line',\r\n data: {\r\n labels: datos.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: datos.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 },\r\n {\r\n label: '\u00c1nimo',\r\n data: datos.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 }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: {\r\n stepSize: 2\r\n }\r\n }\r\n }\r\n }\r\n });\r\n}\r\n\r\n\/\/ Cerrar modal\r\nfunction cerrarModal() {\r\n modal.classList.remove('active');\r\n document.body.classList.remove('modal-open');\r\n}\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 EVENT LISTENERS (CORREGIDOS)\r\n ============================================================ *\/\r\n\r\n\/\/ Asegurar que el DOM est\u00e1 cargado\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n console.log('DOM cargado, configurando eventos...'); \/\/ Debug\r\n \r\n \/\/ 1. Botones de nombres de pacientes\r\n const nameButtons = document.querySelectorAll('.ov-name-link');\r\n console.log('Botones encontrados:', nameButtons.length); \/\/ Debug\r\n \r\n nameButtons.forEach(button => {\r\n button.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const patientId = this.getAttribute('data-id');\r\n console.log('Bot\u00f3n clickeado, ID:', patientId); \/\/ Debug\r\n abrirFichaMedica(patientId);\r\n });\r\n \r\n \/\/ Tambi\u00e9n soporte para Enter\/Espacio\r\n button.addEventListener('keydown', function(e) {\r\n if (e.key === 'Enter' || e.key === ' ') {\r\n e.preventDefault();\r\n const patientId = this.getAttribute('data-id');\r\n abrirFichaMedica(patientId);\r\n }\r\n });\r\n });\r\n \r\n \/\/ 2. Bot\u00f3n cerrar modal\r\n modalClose.addEventListener('click', cerrarModal);\r\n \r\n \/\/ 3. Cerrar modal haciendo click fuera\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === modal) {\r\n cerrarModal();\r\n }\r\n });\r\n \r\n \/\/ 4. Cerrar con tecla ESC\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.classList.contains('active')) {\r\n cerrarModal();\r\n }\r\n });\r\n \r\n \/\/ 5. Bot\u00f3n PDF\r\n document.getElementById('ov-pdf-btn')?.addEventListener('click', function() {\r\n window.print();\r\n });\r\n \r\n console.log('\u2705 Panel m\u00e9dico configurado correctamente');\r\n});\r\n\r\n\/* ============================================================\r\n \ud83d\udd25 FUNCIONES PARA WORDPRESS\/ELEMENTOR\r\n ============================================================ *\/\r\n\r\n\/\/ Esta funci\u00f3n se puede llamar desde WordPress para actualizar datos\r\nfunction actualizarDatosPaciente(patientId, nuevosDatos) {\r\n if (fichasMedicas[patientId]) {\r\n \/\/ Actualizar datos existentes\r\n Object.assign(fichasMedicas[patientId], nuevosDatos);\r\n \r\n \/\/ Si el modal est\u00e1 abierto para este paciente, actualizarlo\r\n if (modal.classList.contains('active') && \r\n modalTitle.textContent.includes(patientId)) {\r\n abrirFichaMedica(patientId);\r\n }\r\n \r\n console.log(`Datos actualizados para ${patientId}`);\r\n }\r\n}\r\n\r\n\/\/ Funci\u00f3n para agregar nuevo paciente\r\nfunction agregarNuevoPaciente(id, datos) {\r\n fichasMedicas[id] = datos;\r\n console.log(`Nuevo paciente agregado: ${id}`);\r\n}\r\n\r\n\/\/ Exportar funciones para uso global (si se integra en WordPress)\r\nwindow.OV_Panel = {\r\n abrirFicha: abrirFichaMedica,\r\n cerrarFicha: cerrarModal,\r\n actualizarDatos: actualizarDatosPaciente,\r\n agregarPaciente: agregarNuevoPaciente,\r\n fichas: fichasMedicas\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-3ec4467 e-con-full e-flex e-con e-parent\" data-id=\"3ec4467\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb72a58 elementor-widget elementor-widget-html\" data-id=\"eb72a58\" 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 <!-- Fuentes -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* RESET B\u00c1SICO *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\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 \/* CABECERA *\/\r\n .ov-header {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 24px 28px;\r\n color: white;\r\n }\r\n \r\n .ov-header-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .ov-header-sub {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .ov-header-tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .ov-inner {\r\n padding: 24px;\r\n }\r\n \r\n \/* TARJETAS *\/\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-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .ov-card-label {\r\n font-size: 12px;\r\n color: #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 \/* TABLA *\/\r\n .ov-panel {\r\n background: rgba(30, 41, 59, 0.8);\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-panel-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #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 \/* BOTONES DE NOMBRE *\/\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 \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR *\/\r\n .ov-bottom-layout {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\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: 20px;\r\n }\r\n \r\n .ov-side-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 6px;\r\n }\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 \/* BOTONES *\/\r\n .ov-btn {\r\n padding: 10px 20px;\r\n border-radius: 999px;\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.3s ease;\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 \/* MODAL - FIJO Y VISIBLE *\/\r\n #patient-modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n padding: 20px;\r\n }\r\n \r\n #patient-modal.active {\r\n display: flex;\r\n }\r\n \r\n .modal-content {\r\n background: #1e293b;\r\n border-radius: 16px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 800px;\r\n max-height: 80vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .modal-header {\r\n padding: 20px 24px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-close {\r\n background: none;\r\n border: none;\r\n color: #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 \/* IFRAME JOTFORM *\/\r\n .jotform-iframe-container {\r\n border: 1px solid #475569;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n margin-top: 12px;\r\n }\r\n \r\n .jotform-iframe-container iframe {\r\n width: 100%;\r\n height: 280px;\r\n border: 0;\r\n }\r\n \r\n \/* RESPONSIVE *\/\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-table {\r\n font-size: 12px;\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 <!-- CABECERA -->\r\n <div class=\"ov-header\">\r\n <div class=\"ov-header-title\">Olas de Vida \u00b7 Panel M\u00e9dico<\/div>\r\n <div class=\"ov-header-sub\">Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/div>\r\n <div class=\"ov-header-tag\">vista demo \u00b7 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n <!-- TARJETAS KPI -->\r\n <div class=\"ov-cards\">\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">10<\/div>\r\n <div class=\"ov-card-label\">Pacientes activos<\/div>\r\n <div class=\"ov-card-tag\">Muestra completa<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">3<\/div>\r\n <div class=\"ov-card-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"ov-card-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">4<\/div>\r\n <div class=\"ov-card-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"ov-card-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">87%<\/div>\r\n <div class=\"ov-card-label\">Adherencia<\/div>\r\n <div class=\"ov-card-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TABLA DE PACIENTES (10 REGISTROS) -->\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 completa.<\/div>\r\n\r\n <div class=\"ov-scroll\">\r\n <table class=\"ov-table\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES COMPLETOS -->\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 <!-- PANEL INFERIOR -->\r\n <div class=\"ov-bottom-layout\">\r\n\r\n <!-- PDF -->\r\n <div class=\"ov-side-box\">\r\n <div id=\"pdf-title\" class=\"ov-side-title\">\ud83d\udcc4 PDF m\u00e9dico \/ paciente<\/div>\r\n <div id=\"pdf-description\" class=\"ov-side-sub\">\r\n Selecciona un paciente para preparar su informe m\u00e9dico\/paciente.\r\n <\/div>\r\n <button id=\"pdf-btn\" class=\"ov-btn\" style=\"display:none;\" onclick=\"generatePDF()\">\r\n Generar PDF\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- JULI\u00c1N - ASISTENTE IA (JOTFORM) -->\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 de apoyo m\u00e9dico integrado con JotForm.<\/div>\r\n \r\n <div class=\"jotform-iframe-container\">\r\n <iframe \r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n sandbox=\"allow-scripts allow-same-origin allow-forms\"\r\n allow=\"microphone\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EVOLUCI\u00d3N -->\r\n <div class=\"ov-side-box\">\r\n <div id=\"evolution-title\" class=\"ov-side-title\">\ud83d\udcc8 Evoluci\u00f3n semanal<\/div>\r\n <div id=\"evolution-description\" class=\"ov-side-sub\">\r\n Selecciona un paciente para ver su evoluci\u00f3n.\r\n <\/div>\r\n <div id=\"evolution-chart\" style=\"display:none; margin-top:12px;\">\r\n <div style=\"background:#334155; padding:12px; border-radius:8px; text-align:center;\">\r\n Gr\u00e1fico de evoluci\u00f3n del paciente seleccionado\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL FICHA M\u00c9DICA -->\r\n<div id=\"patient-modal\">\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\">\r\n <!-- Contenido se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE LAS FICHAS M\u00c9DICAS\r\n\/\/ ============================================\r\nconst patientRecords = {\r\n ODV001: {\r\n name: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento<\/h3>\r\n <p>Paracetamol 1g\/8h \u00b7 Tramadol PRN \u00b7 Filgrastim d\u00edas 2-7<\/p>\r\n\r\n <h3>\ud83d\udcdd Formulario<\/h3>\r\n <button class=\"ov-btn\" onclick=\"openPatientForm('ODV001')\">\r\n Ver formulario completo\r\n <\/button>\r\n `\r\n },\r\n \r\n ODV002: {\r\n name: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n\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<\/h3>\r\n <p>Dolor 6\/10 \u00b7 \u00c1nimo 3\/10 \u00b7 Requiere atenci\u00f3n psico-oncol\u00f3gica<\/p>\r\n `\r\n },\r\n \r\n ODV003: {\r\n name: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n\r\n <h3>\u2705 Estado<\/h3>\r\n <p>Buena tolerancia al tratamiento<\/p>\r\n `\r\n },\r\n \r\n ODV004: {\r\n name: \"Javier Rodr\u00edguez Santos\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>C\u00e1ncer de pulm\u00f3n \u00b7 Estable<\/p>`\r\n },\r\n \r\n ODV005: {\r\n name: \"Laura Herrera Funes\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/p>`\r\n },\r\n \r\n ODV006: {\r\n name: \"Carmen Ramos Vidal\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/p>`\r\n },\r\n \r\n ODV007: {\r\n name: \"Daniel Mu\u00f1oz Ortega\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>C\u00e1ncer de p\u00e1ncreas \u00b7 Dolor intenso<\/p>`\r\n },\r\n \r\n ODV008: {\r\n name: \"Elena Torres D\u00edaz\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>C\u00e1ncer de mama \u00b7 Fiebre 38.8\u00b0C<\/p>`\r\n },\r\n \r\n ODV009: {\r\n name: \"Alberto Paredes Luna\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>C\u00e1ncer de pr\u00f3stata \u00b7 Estable<\/p>`\r\n },\r\n \r\n ODV010: {\r\n name: \"Luc\u00eda Romero Salvat\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/p>`\r\n }\r\n};\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES DEL MODAL (SIMPLE Y FUNCIONAL)\r\n\/\/ ============================================\r\n\r\n\/\/ Funci\u00f3n para abrir el modal\r\nfunction openPatientModal(patientId) {\r\n console.log('Intentando abrir modal para:', patientId);\r\n \r\n const patient = patientRecords[patientId];\r\n if (!patient) {\r\n console.error('Paciente no encontrado:', patientId);\r\n alert('Error: Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar t\u00edtulo del modal\r\n document.getElementById('modal-title').textContent = `${patient.name} \u00b7 ${patientId}`;\r\n \r\n \/\/ Actualizar contenido del modal\r\n document.getElementById('patient-info').innerHTML = patient.info;\r\n \r\n \/\/ Mostrar el modal\r\n document.getElementById('patient-modal').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar panel PDF\r\n document.getElementById('pdf-title').textContent = `\ud83d\udcc4 PDF de ${patient.name}`;\r\n document.getElementById('pdf-description').textContent = `Informe preparado para ${patient.name}`;\r\n document.getElementById('pdf-btn').style.display = 'block';\r\n \r\n \/\/ Actualizar panel evoluci\u00f3n\r\n document.getElementById('evolution-title').textContent = `\ud83d\udcc8 Evoluci\u00f3n \u00b7 ${patient.name}`;\r\n document.getElementById('evolution-description').textContent = `Seguimiento de ${patient.name}`;\r\n document.getElementById('evolution-chart').style.display = 'block';\r\n \r\n console.log('Modal abierto correctamente');\r\n}\r\n\r\n\/\/ Funci\u00f3n para cerrar el modal\r\nfunction closePatientModal() {\r\n console.log('Cerrando modal');\r\n document.getElementById('patient-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n}\r\n\r\n\/\/ Funci\u00f3n para abrir formulario\r\nfunction openPatientForm(patientId) {\r\n window.open(`https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103?paciente=${patientId}`, '_blank');\r\n}\r\n\r\n\/\/ Funci\u00f3n para generar PDF\r\nfunction generatePDF() {\r\n const patientName = document.getElementById('modal-title').textContent;\r\n alert(`Generando PDF para: ${patientName}`);\r\n \/\/ window.print(); \/\/ Descomentar para impresi\u00f3n real\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ EVENT LISTENERS SEGUROS\r\n\/\/ ============================================\r\n\r\n\/\/ Cerrar modal al hacer clic fuera\r\ndocument.getElementById('patient-modal').addEventListener('click', function(e) {\r\n if (e.target === this) {\r\n closePatientModal();\r\n }\r\n});\r\n\r\n\/\/ Cerrar modal con tecla ESC\r\ndocument.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') {\r\n closePatientModal();\r\n }\r\n});\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N\r\n\/\/ ============================================\r\n\r\n\/\/ Verificar que todo est\u00e1 listo\r\nwindow.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n console.log('\u2139\ufe0f Botones de pacientes disponibles:', document.querySelectorAll('.patient-name-btn').length);\r\n console.log('\u2139\ufe0f Modal disponible:', document.getElementById('patient-modal') ? 'S\u00ed' : 'No');\r\n \r\n \/\/ A\u00f1adir tooltips a los botones\r\n document.querySelectorAll('.patient-name-btn').forEach(btn => {\r\n btn.title = 'Haz clic para ver la ficha m\u00e9dica';\r\n });\r\n});\r\n\r\n\/\/ ============================================\r\n\/\/ DEPURACI\u00d3N - Verificar que todo funciona\r\n\/\/ ============================================\r\nconsole.log('Script cargado correctamente');\r\nconsole.log('Total de pacientes:', Object.keys(patientRecords).length);\r\nconsole.log('Para probar manualmente en consola: openPatientModal(\"ODV001\")');\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-cecba93 e-con-full e-flex e-con e-parent\" data-id=\"cecba93\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-17aad04 elementor-widget elementor-widget-html\" data-id=\"17aad04\" 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 <!-- Fuentes -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n \/* RESET B\u00c1SICO *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.6;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\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 \/* CABECERA *\/\r\n .ov-header {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 24px 28px;\r\n color: white;\r\n }\r\n \r\n .ov-header-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .ov-header-sub {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin-bottom: 8px;\r\n }\r\n \r\n .ov-header-tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n background: rgba(255, 255, 255, 0.1);\r\n padding: 4px 10px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .ov-inner {\r\n padding: 24px;\r\n }\r\n \r\n \/* TARJETAS *\/\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-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 4px;\r\n }\r\n \r\n .ov-card-label {\r\n font-size: 12px;\r\n color: #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 \/* TABLA *\/\r\n .ov-panel {\r\n background: rgba(30, 41, 59, 0.8);\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n padding: 20px;\r\n margin-bottom: 20px;\r\n }\r\n \r\n .ov-panel-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .ov-panel-sub {\r\n font-size: 13px;\r\n color: #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 \/* BOTONES DE NOMBRE *\/\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 \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR *\/\r\n .ov-bottom-layout {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 20px;\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: 20px;\r\n }\r\n \r\n .ov-side-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 6px;\r\n }\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 \/* BOTONES *\/\r\n .ov-btn {\r\n padding: 10px 20px;\r\n border-radius: 999px;\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.3s ease;\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 \/* MODAL - FIJO Y VISIBLE *\/\r\n #patient-modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.8);\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n padding: 20px;\r\n }\r\n \r\n #patient-modal.active {\r\n display: flex;\r\n }\r\n \r\n .modal-content {\r\n background: #1e293b;\r\n border-radius: 16px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 800px;\r\n max-height: 80vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .modal-header {\r\n padding: 20px 24px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-title {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-close {\r\n background: none;\r\n border: none;\r\n color: #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 \/* IFRAME JOTFORM *\/\r\n .jotform-iframe-container {\r\n border: 1px solid #475569;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n margin-top: 12px;\r\n }\r\n \r\n .jotform-iframe-container iframe {\r\n width: 100%;\r\n height: 280px;\r\n border: 0;\r\n }\r\n \r\n \/* RESPONSIVE *\/\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-table {\r\n font-size: 12px;\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 <!-- CABECERA -->\r\n <div class=\"ov-header\">\r\n <div class=\"ov-header-title\">Olas de Vida \u00b7 Panel M\u00e9dico<\/div>\r\n <div class=\"ov-header-sub\">Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/div>\r\n <div class=\"ov-header-tag\">vista demo \u00b7 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n <!-- TARJETAS KPI -->\r\n <div class=\"ov-cards\">\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">10<\/div>\r\n <div class=\"ov-card-label\">Pacientes activos<\/div>\r\n <div class=\"ov-card-tag\">Muestra completa<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">3<\/div>\r\n <div class=\"ov-card-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"ov-card-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">4<\/div>\r\n <div class=\"ov-card-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"ov-card-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">87%<\/div>\r\n <div class=\"ov-card-label\">Adherencia<\/div>\r\n <div class=\"ov-card-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TABLA DE PACIENTES (10 REGISTROS) -->\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 completa.<\/div>\r\n\r\n <div class=\"ov-scroll\">\r\n <table class=\"ov-table\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES COMPLETOS -->\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 <!-- PANEL INFERIOR -->\r\n <div class=\"ov-bottom-layout\">\r\n\r\n <!-- PDF -->\r\n <div class=\"ov-side-box\">\r\n <div id=\"pdf-title\" class=\"ov-side-title\">\ud83d\udcc4 PDF m\u00e9dico \/ paciente<\/div>\r\n <div id=\"pdf-description\" class=\"ov-side-sub\">\r\n Selecciona un paciente para preparar su informe m\u00e9dico\/paciente.\r\n <\/div>\r\n <button id=\"pdf-btn\" class=\"ov-btn\" style=\"display:none;\" onclick=\"generatePDF()\">\r\n Generar PDF\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- JULI\u00c1N - ASISTENTE IA (JOTFORM) -->\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 de apoyo m\u00e9dico integrado con JotForm.<\/div>\r\n \r\n <div class=\"jotform-iframe-container\">\r\n <iframe \r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n sandbox=\"allow-scripts allow-same-origin allow-forms\"\r\n allow=\"microphone\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- EVOLUCI\u00d3N -->\r\n <div class=\"ov-side-box\">\r\n <div id=\"evolution-title\" class=\"ov-side-title\">\ud83d\udcc8 Evoluci\u00f3n semanal<\/div>\r\n <div id=\"evolution-description\" class=\"ov-side-sub\">\r\n Selecciona un paciente para ver su evoluci\u00f3n.\r\n <\/div>\r\n <div id=\"evolution-chart\" style=\"display:none; margin-top:12px;\">\r\n <div style=\"background:#334155; padding:12px; border-radius:8px; text-align:center;\">\r\n Gr\u00e1fico de evoluci\u00f3n del paciente seleccionado\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL FICHA M\u00c9DICA -->\r\n<div id=\"patient-modal\">\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\">\r\n <!-- Contenido se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE LAS FICHAS M\u00c9DICAS\r\n\/\/ ============================================\r\nconst patientRecords = {\r\n ODV001: {\r\n name: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento<\/h3>\r\n <p>Paracetamol 1g\/8h \u00b7 Tramadol PRN \u00b7 Filgrastim d\u00edas 2-7<\/p>\r\n\r\n <h3>\ud83d\udcdd Formulario<\/h3>\r\n <button class=\"ov-btn\" onclick=\"openPatientForm('ODV001')\">\r\n Ver formulario completo\r\n <\/button>\r\n `\r\n },\r\n \r\n ODV002: {\r\n name: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n\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<\/h3>\r\n <p>Dolor 6\/10 \u00b7 \u00c1nimo 3\/10 \u00b7 Requiere atenci\u00f3n psico-oncol\u00f3gica<\/p>\r\n `\r\n },\r\n \r\n ODV003: {\r\n name: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n\r\n <h3>\u2705 Estado<\/h3>\r\n <p>Buena tolerancia al tratamiento<\/p>\r\n `\r\n },\r\n \r\n ODV004: {\r\n name: \"Javier Rodr\u00edguez Santos\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>C\u00e1ncer de pulm\u00f3n \u00b7 Estable<\/p>`\r\n },\r\n \r\n ODV005: {\r\n name: \"Laura Herrera Funes\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>C\u00e1ncer de ovario \u00b7 Ciclo 2\/6<\/p>`\r\n },\r\n \r\n ODV006: {\r\n name: \"Carmen Ramos Vidal\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>C\u00e1ncer de colon \u00b7 Ciclo 1\/8<\/p>`\r\n },\r\n \r\n ODV007: {\r\n name: \"Daniel Mu\u00f1oz Ortega\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>C\u00e1ncer de p\u00e1ncreas \u00b7 Dolor intenso<\/p>`\r\n },\r\n \r\n ODV008: {\r\n name: \"Elena Torres D\u00edaz\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>C\u00e1ncer de mama \u00b7 Fiebre 38.8\u00b0C<\/p>`\r\n },\r\n \r\n ODV009: {\r\n name: \"Alberto Paredes Luna\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>C\u00e1ncer de pr\u00f3stata \u00b7 Estable<\/p>`\r\n },\r\n \r\n ODV010: {\r\n name: \"Luc\u00eda Romero Salvat\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>C\u00e1ncer de mama \u00b7 Terapia dirigida<\/p>`\r\n }\r\n};\r\n\r\n\/\/ ============================================\r\n\/\/ FUNCIONES DEL MODAL (SIMPLE Y FUNCIONAL)\r\n\/\/ ============================================\r\n\r\n\/\/ Funci\u00f3n para abrir el modal\r\nfunction openPatientModal(patientId) {\r\n console.log('Intentando abrir modal para:', patientId);\r\n \r\n const patient = patientRecords[patientId];\r\n if (!patient) {\r\n console.error('Paciente no encontrado:', patientId);\r\n alert('Error: Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar t\u00edtulo del modal\r\n document.getElementById('modal-title').textContent = `${patient.name} \u00b7 ${patientId}`;\r\n \r\n \/\/ Actualizar contenido del modal\r\n document.getElementById('patient-info').innerHTML = patient.info;\r\n \r\n \/\/ Mostrar el modal\r\n document.getElementById('patient-modal').classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar panel PDF\r\n document.getElementById('pdf-title').textContent = `\ud83d\udcc4 PDF de ${patient.name}`;\r\n document.getElementById('pdf-description').textContent = `Informe preparado para ${patient.name}`;\r\n document.getElementById('pdf-btn').style.display = 'block';\r\n \r\n \/\/ Actualizar panel evoluci\u00f3n\r\n document.getElementById('evolution-title').textContent = `\ud83d\udcc8 Evoluci\u00f3n \u00b7 ${patient.name}`;\r\n document.getElementById('evolution-description').textContent = `Seguimiento de ${patient.name}`;\r\n document.getElementById('evolution-chart').style.display = 'block';\r\n \r\n console.log('Modal abierto correctamente');\r\n}\r\n\r\n\/\/ Funci\u00f3n para cerrar el modal\r\nfunction closePatientModal() {\r\n console.log('Cerrando modal');\r\n document.getElementById('patient-modal').classList.remove('active');\r\n document.body.style.overflow = 'auto';\r\n}\r\n\r\n\/\/ Funci\u00f3n para abrir formulario\r\nfunction openPatientForm(patientId) {\r\n window.open(`https:\/\/eu.jotform.com\/agent\/01994df43a8c7e41adb1e4e88e9367ca3103?paciente=${patientId}`, '_blank');\r\n}\r\n\r\n\/\/ Funci\u00f3n para generar PDF\r\nfunction generatePDF() {\r\n const patientName = document.getElementById('modal-title').textContent;\r\n alert(`Generando PDF para: ${patientName}`);\r\n \/\/ window.print(); \/\/ Descomentar para impresi\u00f3n real\r\n}\r\n\r\n\/\/ ============================================\r\n\/\/ EVENT LISTENERS SEGUROS\r\n\/\/ ============================================\r\n\r\n\/\/ Cerrar modal al hacer clic fuera\r\ndocument.getElementById('patient-modal').addEventListener('click', function(e) {\r\n if (e.target === this) {\r\n closePatientModal();\r\n }\r\n});\r\n\r\n\/\/ Cerrar modal con tecla ESC\r\ndocument.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape') {\r\n closePatientModal();\r\n }\r\n});\r\n\r\n\/\/ ============================================\r\n\/\/ INICIALIZACI\u00d3N\r\n\/\/ ============================================\r\n\r\n\/\/ Verificar que todo est\u00e1 listo\r\nwindow.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n console.log('\u2139\ufe0f Botones de pacientes disponibles:', document.querySelectorAll('.patient-name-btn').length);\r\n console.log('\u2139\ufe0f Modal disponible:', document.getElementById('patient-modal') ? 'S\u00ed' : 'No');\r\n \r\n \/\/ A\u00f1adir tooltips a los botones\r\n document.querySelectorAll('.patient-name-btn').forEach(btn => {\r\n btn.title = 'Haz clic para ver la ficha m\u00e9dica';\r\n });\r\n});\r\n\r\n\/\/ ============================================\r\n\/\/ DEPURACI\u00d3N - Verificar que todo funciona\r\n\/\/ ============================================\r\nconsole.log('Script cargado correctamente');\r\nconsole.log('Total de pacientes:', Object.keys(patientRecords).length);\r\nconsole.log('Para probar manualmente en consola: openPatientModal(\"ODV001\")');\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-69b7732 e-con-full e-flex e-con e-parent\" data-id=\"69b7732\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d252f99 elementor-widget elementor-widget-html\" data-id=\"d252f99\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Panel M\u00e9dico - Olas de Vida<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\r\n \/* RESET Y BASE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.5;\r\n padding: 15px;\r\n min-height: 100vh;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .panel-medico {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: #1e293b;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n \r\n \/* CABECERA *\/\r\n .cabecera {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 20px 25px;\r\n color: white;\r\n }\r\n \r\n .cabecera h1 {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera p {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera-tag {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 4px 12px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .contenido {\r\n padding: 25px;\r\n }\r\n \r\n \/* KPI CARDS *\/\r\n .kpi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 15px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .kpi-card {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n }\r\n \r\n .kpi-valor {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 3px;\r\n }\r\n \r\n .kpi-label {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .kpi-tag {\r\n font-size: 10px;\r\n margin-top: 5px;\r\n color: #6ee7b7;\r\n }\r\n \r\n \/* TABLA *\/\r\n .seccion-tabla {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .seccion-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .seccion-subtitulo {\r\n font-size: 13px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .contenedor-tabla {\r\n max-height: 350px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n border: 1px solid #334155;\r\n }\r\n \r\n .tabla-pacientes {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 13px;\r\n }\r\n \r\n .tabla-pacientes thead {\r\n background: rgba(15, 23, 42, 0.9);\r\n position: sticky;\r\n top: 0;\r\n }\r\n \r\n .tabla-pacientes th {\r\n padding: 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 }\r\n \r\n .tabla-pacientes td {\r\n padding: 12px 10px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.3);\r\n }\r\n \r\n .tabla-pacientes tbody tr:hover {\r\n background: rgba(51, 65, 85, 0.2);\r\n }\r\n \r\n .btn-paciente {\r\n background: none;\r\n border: none;\r\n color: #e2e8f0;\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n transition: color 0.2s;\r\n }\r\n \r\n .btn-paciente:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR - 3 COLUMNAS *\/\r\n .panel-inferior {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 18px;\r\n }\r\n \r\n .columna {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 400px;\r\n }\r\n \r\n .columna-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 6px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .columna-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n min-height: 36px;\r\n }\r\n \r\n \/* COLUMNA 1: PDFs *\/\r\n .contenedor-pdfs {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-top: auto;\r\n }\r\n \r\n .btn {\r\n padding: 11px 15px;\r\n border-radius: 8px;\r\n border: none;\r\n font-size: 13px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n text-decoration: none;\r\n color: white;\r\n }\r\n \r\n .btn-primario {\r\n background: linear-gradient(135deg, #3b82f6, #2563eb);\r\n }\r\n \r\n .btn-primario:hover {\r\n filter: brightness(1.1);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);\r\n }\r\n \r\n .btn-secundario {\r\n background: transparent;\r\n border: 1px solid #475569;\r\n color: #e2e8f0;\r\n }\r\n \r\n .btn-secundario:hover {\r\n background: rgba(71, 85, 105, 0.2);\r\n border-color: #3b82f6;\r\n }\r\n \r\n \/* COLUMNA 2: ASISTENTE IA - BOT\u00d3N FUNCIONAL *\/\r\n .contenedor-asistente {\r\n flex: 1;\r\n border-radius: 8px;\r\n border: 1px solid #475569;\r\n background: #0f172a;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n text-align: center;\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 48px;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-texto {\r\n color: #94a3b8;\r\n font-size: 14px;\r\n margin-bottom: 20px;\r\n max-width: 250px;\r\n }\r\n \r\n .btn-asistente {\r\n padding: 12px 24px;\r\n font-size: 14px;\r\n background: linear-gradient(135deg, #8b5cf6, #7c3aed);\r\n }\r\n \r\n \/* COLUMNA 3: GR\u00c1FICOS - ESTRUCTURA CUADRADA Y BOTONES DE COLORES *\/\r\n .contenedor-graficos {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n min-height: 280px;\r\n }\r\n \r\n .grafico-box {\r\n background: #0f172a;\r\n border-radius: 8px;\r\n padding: 10px;\r\n border: 1px solid #475569;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 120px;\r\n }\r\n \r\n .grafico-titulo {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-align: center;\r\n margin-bottom: 6px;\r\n font-weight: 500;\r\n }\r\n \r\n .grafico-canvas {\r\n width: 100% !important;\r\n flex: 1;\r\n }\r\n \r\n \/* BOTONES DE COLORES PARA GR\u00c1FICOS *\/\r\n .controles-grafico {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 8px;\r\n }\r\n \r\n .btn-color {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n \r\n .btn-color:hover {\r\n transform: scale(1.1);\r\n border-color: white;\r\n }\r\n \r\n .btn-color.active {\r\n border-color: white;\r\n box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);\r\n }\r\n \r\n .btn-rojo {\r\n background-color: #ef4444;\r\n }\r\n \r\n .btn-verde {\r\n background-color: #10b981;\r\n }\r\n \r\n .btn-azul {\r\n background-color: #3b82f6;\r\n }\r\n \r\n .btn-amarillo {\r\n background-color: #f59e0b;\r\n }\r\n \r\n \/* MINI ESTAD\u00cdSTICAS - MEJOR DISE\u00d1O *\/\r\n .mini-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 8px;\r\n margin-top: 10px;\r\n }\r\n \r\n .mini-stat {\r\n padding: 10px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 11px;\r\n border: 1px solid transparent;\r\n transition: all 0.2s;\r\n }\r\n \r\n .mini-stat:hover {\r\n transform: translateY(-2px);\r\n border-color: #475569;\r\n }\r\n \r\n .mini-stat-label {\r\n font-size: 10px;\r\n margin-bottom: 3px;\r\n opacity: 0.8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n \r\n .mini-stat-valor {\r\n font-size: 14px;\r\n font-weight: 700;\r\n }\r\n \r\n .stat-mejoria { \r\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));\r\n color: #6ee7b7;\r\n border-left: 3px solid #10b981;\r\n }\r\n \r\n .stat-dolor { \r\n background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));\r\n color: #fca5a5;\r\n border-left: 3px solid #ef4444;\r\n }\r\n \r\n .stat-adherencia { \r\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));\r\n color: #93c5fd;\r\n border-left: 3px solid #3b82f6;\r\n }\r\n \r\n \/* MODAL *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.9);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n padding: 20px;\r\n }\r\n \r\n .modal-contenido {\r\n background: #1e293b;\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 700px;\r\n max-height: 85vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .modal-cabecera {\r\n padding: 18px 22px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-cerrar {\r\n background: none;\r\n border: none;\r\n color: #94a3b8;\r\n font-size: 22px;\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 transition: all 0.2s;\r\n }\r\n \r\n .modal-cerrar:hover {\r\n background: #334155;\r\n color: #e2e8f0;\r\n }\r\n \r\n .modal-cuerpo {\r\n padding: 25px;\r\n overflow-y: auto;\r\n max-height: calc(85vh - 70px);\r\n }\r\n \r\n .ficha-paciente h3 {\r\n color: #93c5fd;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin: 18px 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-paciente p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\r\n line-height: 1.5;\r\n }\r\n \r\n .ficha-paciente ul {\r\n margin: 0 0 15px 0;\r\n padding-left: 20px;\r\n }\r\n \r\n .ficha-paciente li {\r\n margin-bottom: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .panel-inferior {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .columna:nth-child(3) {\r\n grid-column: span 2;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .panel-inferior {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna:nth-child(3) {\r\n grid-column: span 1;\r\n }\r\n \r\n .columna {\r\n height: 380px;\r\n }\r\n \r\n .kpi-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .contenido {\r\n padding: 18px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .kpi-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 360px;\r\n }\r\n \r\n .contenido {\r\n padding: 15px;\r\n }\r\n \r\n .cabecera {\r\n padding: 15px;\r\n }\r\n \r\n .cabecera h1 {\r\n font-size: 20px;\r\n }\r\n \r\n .mini-stats {\r\n grid-template-columns: 1fr;\r\n gap: 6px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- PANEL M\u00c9DICO -->\r\n <div class=\"panel-medico\">\r\n <!-- CABECERA -->\r\n <div class=\"cabecera\">\r\n <h1>Olas de Vida \u00b7 Panel M\u00e9dico<\/h1>\r\n <p>Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/p>\r\n <span class=\"cabecera-tag\">vista demo \u00b7 optimizado para Elementor<\/span>\r\n <\/div>\r\n \r\n <!-- CONTENIDO PRINCIPAL -->\r\n <div class=\"contenido\">\r\n <!-- KPI -->\r\n <div class=\"kpi-grid\">\r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">10<\/div>\r\n <div class=\"kpi-label\">Pacientes activos<\/div>\r\n <div class=\"kpi-tag\">Muestra completa<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">3<\/div>\r\n <div class=\"kpi-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"kpi-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">4<\/div>\r\n <div class=\"kpi-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"kpi-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">87%<\/div>\r\n <div class=\"kpi-label\">Adherencia<\/div>\r\n <div class=\"kpi-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- TABLA DE PACIENTES (10 PACIENTES) -->\r\n <div class=\"seccion-tabla\">\r\n <div class=\"seccion-titulo\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"seccion-subtitulo\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver gr\u00e1ficos<\/div>\r\n \r\n <div class=\"contenedor-tabla\">\r\n <table class=\"tabla-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES -->\r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV001')\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV002')\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV003')\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV004')\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-estable\">ESTABLE<\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV005')\">Laura Herrera Funes<\/button><\/td>\r\n <td>ODV005<\/td>\r\n <td>Ca ovario \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 10:15<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV006')\">Carmen Ramos Vidal<\/button><\/td>\r\n <td>ODV006<\/td>\r\n <td>Ca colon \u00b7 Ciclo 1\/8<\/td>\r\n <td>7\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hace 3h<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV007')\">Daniel Mu\u00f1oz Ortega<\/button><\/td>\r\n <td>ODV007<\/td>\r\n <td>Ca p\u00e1ncreas \u00b7 Ciclo 3\/12<\/td>\r\n <td>8\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 09:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV008')\">Elena Torres D\u00edaz<\/button><\/td>\r\n <td>ODV008<\/td>\r\n <td>Ca mama \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hace 45 min<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV009')\">Alberto Paredes Luna<\/button><\/td>\r\n <td>ODV009<\/td>\r\n <td>Ca pr\u00f3stata \u00b7 Hormono + RT<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Ayer \u00b7 14:22<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV010')\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- PANEL INFERIOR - 3 COLUMNAS -->\r\n <div class=\"panel-inferior\">\r\n <!-- COLUMNA 1: PDFs -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83d\udcc4 Informes PDF<\/div>\r\n <div class=\"columna-subtitulo\">Descarga informes m\u00e9dicos completos<\/div>\r\n \r\n <div class=\"contenedor-pdfs\">\r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/01994df43a8c7e41adb1e4e88e9367ca3103\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/a>\r\n \r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/019ad9bc86b471129ecafec7a28f03a41b91\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/a>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"generarResumen()\">\r\n <span>\ud83d\udcc4<\/span> Resumen ejecutivo\r\n <\/button>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"window.print()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Imprimir panel\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 2: ASISTENTE IA - BOT\u00d3N FUNCIONAL -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/div>\r\n <div class=\"columna-subtitulo\">Asistente m\u00e9dico con inteligencia artificial<\/div>\r\n \r\n <div class=\"contenedor-asistente\">\r\n <div class=\"asistente-icono\">\ud83e\udd16<\/div>\r\n <div class=\"asistente-texto\">\r\n Haz clic para abrir el asistente IA en una nueva ventana y comenzar una conversaci\u00f3n\r\n <\/div>\r\n <button class=\"btn btn-asistente\" onclick=\"abrirAsistenteIA()\">\r\n <span>\ud83e\udd16<\/span> Abrir Asistente IA\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 3: GR\u00c1FICOS - CUADRADOS CON BOTONES DE COLORES -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\" id=\"titulo-graficos\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"columna-subtitulo\" id=\"subtitulo-graficos\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"contenedor-graficos\" id=\"contenedor-graficos\">\r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">\u00daltimo ciclo (dolor vs \u00e1nimo)<\/div>\r\n <canvas id=\"grafico-ciclo\" class=\"grafico-canvas\"><\/canvas>\r\n <div class=\"controles-grafico\">\r\n <button class=\"btn-color btn-rojo active\" data-grafico=\"ciclo\" data-linea=\"dolor\" title=\"Mostrar\/Ocultar dolor\"><\/button>\r\n <button class=\"btn-color btn-verde active\" data-grafico=\"ciclo\" data-linea=\"animo\" title=\"Mostrar\/Ocultar \u00e1nimo\"><\/button>\r\n <button class=\"btn-color btn-azul\" data-grafico=\"ciclo\" data-linea=\"fatiga\" title=\"Mostrar\/Ocultar fatiga\"><\/button>\r\n <button class=\"btn-color btn-amarillo\" data-grafico=\"ciclo\" data-linea=\"nauseas\" title=\"Mostrar\/Ocultar n\u00e1useas\"><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">Evoluci\u00f3n general (semanas)<\/div>\r\n <canvas id=\"grafico-general\" class=\"grafico-canvas\"><\/canvas>\r\n <div class=\"controles-grafico\">\r\n <button class=\"btn-color btn-rojo active\" data-grafico=\"general\" data-linea=\"dolor\" title=\"Mostrar\/Ocultar dolor\"><\/button>\r\n <button class=\"btn-color btn-verde active\" data-grafico=\"general\" data-linea=\"animo\" title=\"Mostrar\/Ocultar \u00e1nimo\"><\/button>\r\n <button class=\"btn-color btn-azul\" data-grafico=\"general\" data-linea=\"calidad\" title=\"Mostrar\/Ocultar calidad de vida\"><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mini-stats\">\r\n <div class=\"mini-stat stat-mejoria\">\r\n <div class=\"mini-stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-dolor\">\r\n <div class=\"mini-stat-label\">Dolor pico<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-adherencia\">\r\n <div class=\"mini-stat-label\">Adherencia<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- MODAL FICHA M\u00c9DICA -->\r\n <div class=\"modal\" id=\"modal-paciente\">\r\n <div class=\"modal-contenido\">\r\n <div class=\"modal-cabecera\">\r\n <div class=\"modal-titulo\" id=\"modal-titulo\">Ficha del paciente<\/div>\r\n <button class=\"modal-cerrar\" onclick=\"cerrarModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-cuerpo\">\r\n <div id=\"info-paciente\" class=\"ficha-paciente\">\r\n <!-- Informaci\u00f3n se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATOS COMPLETOS DE 10 PACIENTES\r\n \/\/ ============================================\r\n const pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim d\u00edas 2-7 del ciclo<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14'],\r\n dolor: [6, 7, 8, 7, 8, 9],\r\n animo: [7, 7, 6, 7, 7, 8],\r\n fatiga: [7, 8, 8, 7, 8, 7],\r\n nauseas: [5, 6, 7, 6, 5, 4]\r\n },\r\n general: {\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 calidad: [6, 6, 7, 7, 7, 8]\r\n },\r\n stats: {\r\n mejoria: '+15%',\r\n dolorPico: '9\/10',\r\n adherencia: '92%'\r\n }\r\n }\r\n },\r\n \r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> roberto.s@email.com \u00b7 623456789<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n <p>Estadio IIIA \u00b7 Quimioterapia R-CHOP<\/p>\r\n `,\r\n 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 fatiga: [6, 7, 6, 5, 6],\r\n nauseas: [7, 6, 5, 4, 3]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [5, 6, 6, 5],\r\n animo: [4, 3, 3, 3],\r\n calidad: [5, 4, 4, 5]\r\n },\r\n stats: {\r\n mejoria: '-5%',\r\n dolorPico: '6\/10',\r\n adherencia: '85%'\r\n }\r\n }\r\n },\r\n \r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> ana.fernandez@email.com \u00b7 634567890<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n <p>Estadio II \u00b7 Quimioterapia adyuvante<\/p>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [6, 6, 5, 6, 6],\r\n animo: [7, 6, 7, 7, 7],\r\n fatiga: [5, 6, 5, 5, 4],\r\n nauseas: [4, 5, 4, 3, 2]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [7, 6, 6],\r\n animo: [6, 7, 7],\r\n calidad: [6, 7, 8]\r\n },\r\n stats: {\r\n mejoria: '+8%',\r\n dolorPico: '6\/10',\r\n adherencia: '94%'\r\n }\r\n }\r\n },\r\n \r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7],\r\n fatiga: [4, 3, 4, 3],\r\n nauseas: [2, 1, 2, 1]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [3, 3, 3],\r\n animo: [7, 7, 7],\r\n calidad: [8, 8, 8]\r\n },\r\n stats: {\r\n mejoria: '+12%',\r\n dolorPico: '3\/10',\r\n adherencia: '96%'\r\n }\r\n }\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 4, 5, 5],\r\n animo: [6, 6, 6, 6],\r\n fatiga: [6, 5, 6, 5],\r\n nauseas: [4, 3, 3, 2]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [5, 5],\r\n animo: [6, 6],\r\n calidad: [7, 7]\r\n },\r\n stats: {\r\n mejoria: '+3%',\r\n dolorPico: '5\/10',\r\n adherencia: '88%'\r\n }\r\n }\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ VARIABLES GLOBALES\r\n \/\/ ============================================\r\n let graficoCiclo = null;\r\n let graficoGeneral = null;\r\n let graficosActivos = {\r\n ciclo: { dolor: true, animo: true, fatiga: false, nauseas: false },\r\n general: { dolor: true, animo: true, calidad: false }\r\n };\r\n \r\n \/\/ Gr\u00e1ficos por defecto\r\n const graficosPorDefecto = pacientes.ODV001.graficos;\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PRINCIPALES\r\n \/\/ ============================================\r\n \r\n \/\/ Abrir modal del paciente\r\n function abrirPaciente(id) {\r\n console.log('Abriendo paciente:', id);\r\n \r\n const paciente = pacientes[id];\r\n \r\n if (!paciente) {\r\n alert('Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar modal\r\n document.getElementById('modal-titulo').textContent = `${paciente.nombre} \u00b7 ${id}`;\r\n document.getElementById('info-paciente').innerHTML = paciente.info;\r\n document.getElementById('modal-paciente').style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n actualizarGraficos(id, paciente);\r\n }\r\n \r\n \/\/ Cerrar modal\r\n function cerrarModal() {\r\n document.getElementById('modal-paciente').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n function actualizarGraficos(id, paciente) {\r\n console.log('Actualizando gr\u00e1ficos para:', id);\r\n \r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('titulo-graficos').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('subtitulo-graficos').textContent = `ID: ${id}`;\r\n \r\n \/\/ Obtener datos\r\n const datos = paciente.graficos || graficosPorDefecto;\r\n const stats = datos.stats || graficosPorDefecto.stats;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n document.getElementById('stat-mejoria').textContent = stats.mejoria;\r\n document.getElementById('stat-dolor').textContent = stats.dolorPico;\r\n document.getElementById('stat-adherencia').textContent = stats.adherencia;\r\n \r\n \/\/ Crear o actualizar gr\u00e1ficos\r\n crearGraficos(datos);\r\n }\r\n \r\n \/\/ Crear\/actualizar gr\u00e1ficos\r\n function crearGraficos(datos) {\r\n const cicloData = datos.ciclo || graficosPorDefecto.ciclo;\r\n const generalData = datos.general || graficosPorDefecto.general;\r\n \r\n const ctx1 = document.getElementById('grafico-ciclo');\r\n const ctx2 = document.getElementById('grafico-general');\r\n \r\n \/\/ Asegurar que los canvas tengan dimensiones correctas\r\n ctx1.style.height = '100%';\r\n ctx2.style.height = '100%';\r\n \r\n \/\/ Destruir gr\u00e1ficos existentes si existen\r\n if (graficoCiclo) graficoCiclo.destroy();\r\n if (graficoGeneral) graficoGeneral.destroy();\r\n \r\n \/\/ Preparar datasets para ciclo\r\n const datasetsCiclo = [];\r\n if (graficosActivos.ciclo.dolor) {\r\n datasetsCiclo.push({\r\n label: 'Dolor',\r\n data: cicloData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.ciclo.animo) {\r\n datasetsCiclo.push({\r\n label: '\u00c1nimo',\r\n data: cicloData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.ciclo.fatiga && cicloData.fatiga) {\r\n datasetsCiclo.push({\r\n label: 'Fatiga',\r\n data: cicloData.fatiga,\r\n borderColor: '#3b82f6',\r\n backgroundColor: 'rgba(59, 130, 246, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.ciclo.nauseas && cicloData.nauseas) {\r\n datasetsCiclo.push({\r\n label: 'N\u00e1useas',\r\n data: cicloData.nauseas,\r\n borderColor: '#f59e0b',\r\n backgroundColor: 'rgba(245, 158, 11, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n graficoCiclo = new Chart(ctx1, {\r\n type: 'line',\r\n data: {\r\n labels: cicloData.labels,\r\n datasets: datasetsCiclo\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { \r\n enabled: true,\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 10 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Preparar datasets para general\r\n const datasetsGeneral = [];\r\n if (graficosActivos.general.dolor) {\r\n datasetsGeneral.push({\r\n label: 'Dolor',\r\n data: generalData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.general.animo) {\r\n datasetsGeneral.push({\r\n label: '\u00c1nimo',\r\n data: generalData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.general.calidad && generalData.calidad) {\r\n datasetsGeneral.push({\r\n label: 'Calidad',\r\n data: generalData.calidad,\r\n borderColor: '#3b82f6',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n });\r\n }\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n graficoGeneral = new Chart(ctx2, {\r\n type: 'line',\r\n data: {\r\n labels: generalData.labels,\r\n datasets: datasetsGeneral\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { \r\n enabled: true,\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 10 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n console.log('Gr\u00e1ficos actualizados correctamente');\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PARA BOTONES DE COLORES\r\n \/\/ ============================================\r\n function toggleLinea(grafico, linea) {\r\n \/\/ Cambiar estado\r\n graficosActivos[grafico][linea] = !graficosActivos[grafico][linea];\r\n \r\n \/\/ Actualizar bot\u00f3n\r\n const btn = document.querySelector(`[data-grafico=\"${grafico}\"][data-linea=\"${linea}\"]`);\r\n if (btn) {\r\n btn.classList.toggle('active', graficosActivos[grafico][linea]);\r\n }\r\n \r\n \/\/ Volver a crear gr\u00e1ficos\r\n const pacienteActual = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n const pacienteId = Object.keys(pacientes).find(id => pacientes[id].nombre === pacienteActual) || 'ODV001';\r\n const datos = pacientes[pacienteId]?.graficos || graficosPorDefecto;\r\n crearGraficos(datos);\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PDF Y ASISTENTE\r\n \/\/ ============================================\r\n function generarResumen() {\r\n const nombre = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n const pacienteNombre = nombre || \"Paciente seleccionado\";\r\n \r\n \/\/ Crear PDF simulado\r\n const pdfWindow = window.open('', '_blank');\r\n pdfWindow.document.write(`\r\n <html>\r\n <head><title>Resumen Ejecutivo - ${pacienteNombre}<\/title><\/head>\r\n <body style=\"font-family: Arial, sans-serif; padding: 20px;\">\r\n <h1>Resumen Ejecutivo<\/h1>\r\n <h2>${pacienteNombre}<\/h2>\r\n <p>Fecha: ${new Date().toLocaleDateString()}<\/p>\r\n <hr>\r\n <h3>An\u00e1lisis de Evoluci\u00f3n<\/h3>\r\n <p>\u2022 Mejor\u00eda general: ${document.getElementById('stat-mejoria').textContent}<\/p>\r\n <p>\u2022 Dolor m\u00e1ximo: ${document.getElementById('stat-dolor').textContent}<\/p>\r\n <p>\u2022 Adherencia al tratamiento: ${document.getElementById('stat-adherencia').textContent}<\/p>\r\n <h3>Recomendaciones<\/h3>\r\n <p>1. Seguimiento continuo del dolor<\/p>\r\n <p>2. Revisi\u00f3n de medicaci\u00f3n analg\u00e9sica<\/p>\r\n <p>3. Soporte psicol\u00f3gico recomendado<\/p>\r\n <p>4. Pr\u00f3xima revisi\u00f3n en 15 d\u00edas<\/p>\r\n <\/body>\r\n <\/html>\r\n `);\r\n pdfWindow.document.close();\r\n }\r\n \r\n function abrirAsistenteIA() {\r\n window.open('https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91', '_blank', 'width=800,height=600');\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n \r\n \/\/ Inicializar con datos del primer paciente\r\n document.getElementById('titulo-graficos').textContent = '\ud83d\udcc8 Mar\u00eda Garc\u00eda L\u00f3pez';\r\n document.getElementById('subtitulo-graficos').textContent = 'ID: ODV001';\r\n \r\n \/\/ Crear gr\u00e1ficos iniciales\r\n crearGraficos(graficosPorDefecto);\r\n \r\n \/\/ Configurar eventos de los botones de colores\r\n document.querySelectorAll('.btn-color').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n const grafico = this.getAttribute('data-grafico');\r\n const linea = this.getAttribute('data-linea');\r\n toggleLinea(grafico, linea);\r\n });\r\n });\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('modal-paciente');\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === this) cerrarModal();\r\n });\r\n \r\n \/\/ Cerrar modal con ESC\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.style.display === 'flex') {\r\n cerrarModal();\r\n }\r\n });\r\n \r\n \/\/ Simular actualizaci\u00f3n peri\u00f3dica\r\n setInterval(() => {\r\n const hora = new Date().toLocaleTimeString('es-ES', {hour: '2-digit', minute:'2-digit'});\r\n const celdasHora = document.querySelectorAll('.tabla-pacientes td:last-child');\r\n if (celdasHora.length > 0) {\r\n const randomIndex = Math.floor(Math.random() * celdasHora.length);\r\n celdasHora[randomIndex].textContent = `Hoy \u00b7 ${hora}`;\r\n }\r\n }, 30000);\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-a7904b7 e-con-full e-flex e-con e-parent\" data-id=\"a7904b7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d739cd9 elementor-widget elementor-widget-html\" data-id=\"d739cd9\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Panel M\u00e9dico - Olas de Vida<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\r\n \/* RESET Y BASE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.5;\r\n padding: 15px;\r\n min-height: 100vh;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .panel-medico {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: #1e293b;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n \r\n \/* CABECERA *\/\r\n .cabecera {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 20px 25px;\r\n color: white;\r\n }\r\n \r\n .cabecera h1 {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera p {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera-tag {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 4px 12px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .contenido {\r\n padding: 25px;\r\n }\r\n \r\n \/* KPI CARDS *\/\r\n .kpi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 15px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .kpi-card {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n }\r\n \r\n .kpi-valor {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 3px;\r\n }\r\n \r\n .kpi-label {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .kpi-tag {\r\n font-size: 10px;\r\n margin-top: 5px;\r\n color: #6ee7b7;\r\n }\r\n \r\n \/* TABLA *\/\r\n .seccion-tabla {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .seccion-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .seccion-subtitulo {\r\n font-size: 13px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .contenedor-tabla {\r\n max-height: 350px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n border: 1px solid #334155;\r\n }\r\n \r\n .tabla-pacientes {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 13px;\r\n }\r\n \r\n .tabla-pacientes thead {\r\n background: rgba(15, 23, 42, 0.9);\r\n position: sticky;\r\n top: 0;\r\n }\r\n \r\n .tabla-pacientes th {\r\n padding: 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 }\r\n \r\n .tabla-pacientes td {\r\n padding: 12px 10px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.3);\r\n }\r\n \r\n .tabla-pacientes tbody tr:hover {\r\n background: rgba(51, 65, 85, 0.2);\r\n }\r\n \r\n .btn-paciente {\r\n background: none;\r\n border: none;\r\n color: #e2e8f0;\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n transition: color 0.2s;\r\n }\r\n \r\n .btn-paciente:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR - 3 COLUMNAS *\/\r\n .panel-inferior {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 18px;\r\n }\r\n \r\n .columna {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 400px;\r\n }\r\n \r\n .columna-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 6px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .columna-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n min-height: 36px;\r\n }\r\n \r\n \/* COLUMNA 1: PDFs *\/\r\n .contenedor-pdfs {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-top: auto;\r\n }\r\n \r\n .btn {\r\n padding: 11px 15px;\r\n border-radius: 8px;\r\n border: none;\r\n font-size: 13px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n text-decoration: none;\r\n color: white;\r\n }\r\n \r\n .btn-primario {\r\n background: linear-gradient(135deg, #3b82f6, #2563eb);\r\n }\r\n \r\n .btn-primario:hover {\r\n filter: brightness(1.1);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);\r\n }\r\n \r\n .btn-secundario {\r\n background: transparent;\r\n border: 1px solid #475569;\r\n color: #e2e8f0;\r\n }\r\n \r\n .btn-secundario:hover {\r\n background: rgba(71, 85, 105, 0.2);\r\n border-color: #3b82f6;\r\n }\r\n \r\n \/* COLUMNA 2: ASISTENTE IA - BOT\u00d3N FUNCIONAL *\/\r\n .contenedor-asistente {\r\n flex: 1;\r\n border-radius: 8px;\r\n border: 1px solid #475569;\r\n background: #0f172a;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 20px;\r\n text-align: center;\r\n }\r\n \r\n .asistente-icono {\r\n font-size: 48px;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .asistente-texto {\r\n color: #94a3b8;\r\n font-size: 14px;\r\n margin-bottom: 20px;\r\n max-width: 250px;\r\n }\r\n \r\n .btn-asistente {\r\n padding: 12px 24px;\r\n font-size: 14px;\r\n background: linear-gradient(135deg, #8b5cf6, #7c3aed);\r\n }\r\n \r\n \/* COLUMNA 3: GR\u00c1FICOS - ESTRUCTURA CUADRADA Y BOTONES DE COLORES *\/\r\n .contenedor-graficos {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n min-height: 280px;\r\n }\r\n \r\n .grafico-box {\r\n background: #0f172a;\r\n border-radius: 8px;\r\n padding: 10px;\r\n border: 1px solid #475569;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 120px;\r\n }\r\n \r\n .grafico-titulo {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-align: center;\r\n margin-bottom: 6px;\r\n font-weight: 500;\r\n }\r\n \r\n .grafico-canvas {\r\n width: 100% !important;\r\n flex: 1;\r\n }\r\n \r\n \/* BOTONES DE COLORES PARA GR\u00c1FICOS *\/\r\n .controles-grafico {\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n margin-top: 8px;\r\n }\r\n \r\n .btn-color {\r\n width: 24px;\r\n height: 24px;\r\n border-radius: 4px;\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n \r\n .btn-color:hover {\r\n transform: scale(1.1);\r\n border-color: white;\r\n }\r\n \r\n .btn-color.active {\r\n border-color: white;\r\n box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);\r\n }\r\n \r\n .btn-rojo {\r\n background-color: #ef4444;\r\n }\r\n \r\n .btn-verde {\r\n background-color: #10b981;\r\n }\r\n \r\n .btn-azul {\r\n background-color: #3b82f6;\r\n }\r\n \r\n .btn-amarillo {\r\n background-color: #f59e0b;\r\n }\r\n \r\n \/* MINI ESTAD\u00cdSTICAS - MEJOR DISE\u00d1O *\/\r\n .mini-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 8px;\r\n margin-top: 10px;\r\n }\r\n \r\n .mini-stat {\r\n padding: 10px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 11px;\r\n border: 1px solid transparent;\r\n transition: all 0.2s;\r\n }\r\n \r\n .mini-stat:hover {\r\n transform: translateY(-2px);\r\n border-color: #475569;\r\n }\r\n \r\n .mini-stat-label {\r\n font-size: 10px;\r\n margin-bottom: 3px;\r\n opacity: 0.8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n \r\n .mini-stat-valor {\r\n font-size: 14px;\r\n font-weight: 700;\r\n }\r\n \r\n .stat-mejoria { \r\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));\r\n color: #6ee7b7;\r\n border-left: 3px solid #10b981;\r\n }\r\n \r\n .stat-dolor { \r\n background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));\r\n color: #fca5a5;\r\n border-left: 3px solid #ef4444;\r\n }\r\n \r\n .stat-adherencia { \r\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));\r\n color: #93c5fd;\r\n border-left: 3px solid #3b82f6;\r\n }\r\n \r\n \/* MODAL *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.9);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n padding: 20px;\r\n }\r\n \r\n .modal-contenido {\r\n background: #1e293b;\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 700px;\r\n max-height: 85vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .modal-cabecera {\r\n padding: 18px 22px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-cerrar {\r\n background: none;\r\n border: none;\r\n color: #94a3b8;\r\n font-size: 22px;\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 transition: all 0.2s;\r\n }\r\n \r\n .modal-cerrar:hover {\r\n background: #334155;\r\n color: #e2e8f0;\r\n }\r\n \r\n .modal-cuerpo {\r\n padding: 25px;\r\n overflow-y: auto;\r\n max-height: calc(85vh - 70px);\r\n }\r\n \r\n .ficha-paciente h3 {\r\n color: #93c5fd;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin: 18px 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-paciente p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\r\n line-height: 1.5;\r\n }\r\n \r\n .ficha-paciente ul {\r\n margin: 0 0 15px 0;\r\n padding-left: 20px;\r\n }\r\n \r\n .ficha-paciente li {\r\n margin-bottom: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .panel-inferior {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .columna:nth-child(3) {\r\n grid-column: span 2;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .panel-inferior {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna:nth-child(3) {\r\n grid-column: span 1;\r\n }\r\n \r\n .columna {\r\n height: 380px;\r\n }\r\n \r\n .kpi-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .contenido {\r\n padding: 18px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .kpi-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 360px;\r\n }\r\n \r\n .contenido {\r\n padding: 15px;\r\n }\r\n \r\n .cabecera {\r\n padding: 15px;\r\n }\r\n \r\n .cabecera h1 {\r\n font-size: 20px;\r\n }\r\n \r\n .mini-stats {\r\n grid-template-columns: 1fr;\r\n gap: 6px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- PANEL M\u00c9DICO -->\r\n <div class=\"panel-medico\">\r\n <!-- CABECERA -->\r\n <div class=\"cabecera\">\r\n <h1>Olas de Vida \u00b7 Panel M\u00e9dico<\/h1>\r\n <p>Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/p>\r\n <span class=\"cabecera-tag\">vista demo \u00b7 optimizado para Elementor<\/span>\r\n <\/div>\r\n \r\n <!-- CONTENIDO PRINCIPAL -->\r\n <div class=\"contenido\">\r\n <!-- KPI -->\r\n <div class=\"kpi-grid\">\r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">10<\/div>\r\n <div class=\"kpi-label\">Pacientes activos<\/div>\r\n <div class=\"kpi-tag\">Muestra completa<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">3<\/div>\r\n <div class=\"kpi-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"kpi-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">4<\/div>\r\n <div class=\"kpi-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"kpi-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">87%<\/div>\r\n <div class=\"kpi-label\">Adherencia<\/div>\r\n <div class=\"kpi-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- TABLA DE PACIENTES (10 PACIENTES) -->\r\n <div class=\"seccion-tabla\">\r\n <div class=\"seccion-titulo\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"seccion-subtitulo\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver gr\u00e1ficos<\/div>\r\n \r\n <div class=\"contenedor-tabla\">\r\n <table class=\"tabla-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES -->\r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV001')\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV002')\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV003')\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV004')\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-estable\">ESTABLE<\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV005')\">Laura Herrera Funes<\/button><\/td>\r\n <td>ODV005<\/td>\r\n <td>Ca ovario \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 10:15<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV006')\">Carmen Ramos Vidal<\/button><\/td>\r\n <td>ODV006<\/td>\r\n <td>Ca colon \u00b7 Ciclo 1\/8<\/td>\r\n <td>7\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hace 3h<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV007')\">Daniel Mu\u00f1oz Ortega<\/button><\/td>\r\n <td>ODV007<\/td>\r\n <td>Ca p\u00e1ncreas \u00b7 Ciclo 3\/12<\/td>\r\n <td>8\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 09:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV008')\">Elena Torres D\u00edaz<\/button><\/td>\r\n <td>ODV008<\/td>\r\n <td>Ca mama \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hace 45 min<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV009')\">Alberto Paredes Luna<\/button><\/td>\r\n <td>ODV009<\/td>\r\n <td>Ca pr\u00f3stata \u00b7 Hormono + RT<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Ayer \u00b7 14:22<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV010')\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- PANEL INFERIOR - 3 COLUMNAS -->\r\n <div class=\"panel-inferior\">\r\n <!-- COLUMNA 1: PDFs -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83d\udcc4 Informes PDF<\/div>\r\n <div class=\"columna-subtitulo\">Descarga informes m\u00e9dicos completos<\/div>\r\n \r\n <div class=\"contenedor-pdfs\">\r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/01994df43a8c7e41adb1e4e88e9367ca3103\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/a>\r\n \r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/019ad9bc86b471129ecafec7a28f03a41b91\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/a>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"generarResumen()\">\r\n <span>\ud83d\udcc4<\/span> Resumen ejecutivo\r\n <\/button>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"window.print()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Imprimir panel\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 2: ASISTENTE IA - BOT\u00d3N FUNCIONAL -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/div>\r\n <div class=\"columna-subtitulo\">Asistente m\u00e9dico con inteligencia artificial<\/div>\r\n \r\n <div class=\"contenedor-asistente\">\r\n <div class=\"asistente-icono\">\ud83e\udd16<\/div>\r\n <div class=\"asistente-texto\">\r\n Haz clic para abrir el asistente IA en una nueva ventana y comenzar una conversaci\u00f3n\r\n <\/div>\r\n <button class=\"btn btn-asistente\" onclick=\"abrirAsistenteIA()\">\r\n <span>\ud83e\udd16<\/span> Abrir Asistente IA\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 3: GR\u00c1FICOS - CUADRADOS CON BOTONES DE COLORES -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\" id=\"titulo-graficos\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"columna-subtitulo\" id=\"subtitulo-graficos\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"contenedor-graficos\" id=\"contenedor-graficos\">\r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">\u00daltimo ciclo (dolor vs \u00e1nimo)<\/div>\r\n <canvas id=\"grafico-ciclo\" class=\"grafico-canvas\"><\/canvas>\r\n <div class=\"controles-grafico\">\r\n <button class=\"btn-color btn-rojo active\" data-grafico=\"ciclo\" data-linea=\"dolor\" title=\"Mostrar\/Ocultar dolor\"><\/button>\r\n <button class=\"btn-color btn-verde active\" data-grafico=\"ciclo\" data-linea=\"animo\" title=\"Mostrar\/Ocultar \u00e1nimo\"><\/button>\r\n <button class=\"btn-color btn-azul\" data-grafico=\"ciclo\" data-linea=\"fatiga\" title=\"Mostrar\/Ocultar fatiga\"><\/button>\r\n <button class=\"btn-color btn-amarillo\" data-grafico=\"ciclo\" data-linea=\"nauseas\" title=\"Mostrar\/Ocultar n\u00e1useas\"><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">Evoluci\u00f3n general (semanas)<\/div>\r\n <canvas id=\"grafico-general\" class=\"grafico-canvas\"><\/canvas>\r\n <div class=\"controles-grafico\">\r\n <button class=\"btn-color btn-rojo active\" data-grafico=\"general\" data-linea=\"dolor\" title=\"Mostrar\/Ocultar dolor\"><\/button>\r\n <button class=\"btn-color btn-verde active\" data-grafico=\"general\" data-linea=\"animo\" title=\"Mostrar\/Ocultar \u00e1nimo\"><\/button>\r\n <button class=\"btn-color btn-azul\" data-grafico=\"general\" data-linea=\"calidad\" title=\"Mostrar\/Ocultar calidad de vida\"><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"mini-stats\">\r\n <div class=\"mini-stat stat-mejoria\">\r\n <div class=\"mini-stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-dolor\">\r\n <div class=\"mini-stat-label\">Dolor pico<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-adherencia\">\r\n <div class=\"mini-stat-label\">Adherencia<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- MODAL FICHA M\u00c9DICA -->\r\n <div class=\"modal\" id=\"modal-paciente\">\r\n <div class=\"modal-contenido\">\r\n <div class=\"modal-cabecera\">\r\n <div class=\"modal-titulo\" id=\"modal-titulo\">Ficha del paciente<\/div>\r\n <button class=\"modal-cerrar\" onclick=\"cerrarModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-cuerpo\">\r\n <div id=\"info-paciente\" class=\"ficha-paciente\">\r\n <!-- Informaci\u00f3n se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATOS COMPLETOS DE 10 PACIENTES\r\n \/\/ ============================================\r\n const pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim d\u00edas 2-7 del ciclo<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', 'D\u00eda 14'],\r\n dolor: [6, 7, 8, 7, 8, 9],\r\n animo: [7, 7, 6, 7, 7, 8],\r\n fatiga: [7, 8, 8, 7, 8, 7],\r\n nauseas: [5, 6, 7, 6, 5, 4]\r\n },\r\n general: {\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 calidad: [6, 6, 7, 7, 7, 8]\r\n },\r\n stats: {\r\n mejoria: '+15%',\r\n dolorPico: '9\/10',\r\n adherencia: '92%'\r\n }\r\n }\r\n },\r\n \r\n ODV002: {\r\n nombre: \"Roberto Silva Jim\u00e9nez\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> roberto.s@email.com \u00b7 623456789<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n <p>Estadio IIIA \u00b7 Quimioterapia R-CHOP<\/p>\r\n `,\r\n 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 fatiga: [6, 7, 6, 5, 6],\r\n nauseas: [7, 6, 5, 4, 3]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [5, 6, 6, 5],\r\n animo: [4, 3, 3, 3],\r\n calidad: [5, 4, 4, 5]\r\n },\r\n stats: {\r\n mejoria: '-5%',\r\n dolorPico: '6\/10',\r\n adherencia: '85%'\r\n }\r\n }\r\n },\r\n \r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> ana.fernandez@email.com \u00b7 634567890<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n <p>Estadio II \u00b7 Quimioterapia adyuvante<\/p>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [6, 6, 5, 6, 6],\r\n animo: [7, 6, 7, 7, 7],\r\n fatiga: [5, 6, 5, 5, 4],\r\n nauseas: [4, 5, 4, 3, 2]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [7, 6, 6],\r\n animo: [6, 7, 7],\r\n calidad: [6, 7, 8]\r\n },\r\n stats: {\r\n mejoria: '+8%',\r\n dolorPico: '6\/10',\r\n adherencia: '94%'\r\n }\r\n }\r\n },\r\n \r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV004<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7],\r\n fatiga: [4, 3, 4, 3],\r\n nauseas: [2, 1, 2, 1]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [3, 3, 3],\r\n animo: [7, 7, 7],\r\n calidad: [8, 8, 8]\r\n },\r\n stats: {\r\n mejoria: '+12%',\r\n dolorPico: '3\/10',\r\n adherencia: '96%'\r\n }\r\n }\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 4, 5, 5],\r\n animo: [6, 6, 6, 6],\r\n fatiga: [6, 5, 6, 5],\r\n nauseas: [4, 3, 3, 2]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [5, 5],\r\n animo: [6, 6],\r\n calidad: [7, 7]\r\n },\r\n stats: {\r\n mejoria: '+3%',\r\n dolorPico: '5\/10',\r\n adherencia: '88%'\r\n }\r\n }\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ VARIABLES GLOBALES\r\n \/\/ ============================================\r\n let graficoCiclo = null;\r\n let graficoGeneral = null;\r\n let graficosActivos = {\r\n ciclo: { dolor: true, animo: true, fatiga: false, nauseas: false },\r\n general: { dolor: true, animo: true, calidad: false }\r\n };\r\n \r\n \/\/ Gr\u00e1ficos por defecto\r\n const graficosPorDefecto = pacientes.ODV001.graficos;\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PRINCIPALES\r\n \/\/ ============================================\r\n \r\n \/\/ Abrir modal del paciente\r\n function abrirPaciente(id) {\r\n console.log('Abriendo paciente:', id);\r\n \r\n const paciente = pacientes[id];\r\n \r\n if (!paciente) {\r\n alert('Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar modal\r\n document.getElementById('modal-titulo').textContent = `${paciente.nombre} \u00b7 ${id}`;\r\n document.getElementById('info-paciente').innerHTML = paciente.info;\r\n document.getElementById('modal-paciente').style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n actualizarGraficos(id, paciente);\r\n }\r\n \r\n \/\/ Cerrar modal\r\n function cerrarModal() {\r\n document.getElementById('modal-paciente').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n function actualizarGraficos(id, paciente) {\r\n console.log('Actualizando gr\u00e1ficos para:', id);\r\n \r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('titulo-graficos').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('subtitulo-graficos').textContent = `ID: ${id}`;\r\n \r\n \/\/ Obtener datos\r\n const datos = paciente.graficos || graficosPorDefecto;\r\n const stats = datos.stats || graficosPorDefecto.stats;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n document.getElementById('stat-mejoria').textContent = stats.mejoria;\r\n document.getElementById('stat-dolor').textContent = stats.dolorPico;\r\n document.getElementById('stat-adherencia').textContent = stats.adherencia;\r\n \r\n \/\/ Crear o actualizar gr\u00e1ficos\r\n crearGraficos(datos);\r\n }\r\n \r\n \/\/ Crear\/actualizar gr\u00e1ficos\r\n function crearGraficos(datos) {\r\n const cicloData = datos.ciclo || graficosPorDefecto.ciclo;\r\n const generalData = datos.general || graficosPorDefecto.general;\r\n \r\n const ctx1 = document.getElementById('grafico-ciclo');\r\n const ctx2 = document.getElementById('grafico-general');\r\n \r\n \/\/ Asegurar que los canvas tengan dimensiones correctas\r\n ctx1.style.height = '100%';\r\n ctx2.style.height = '100%';\r\n \r\n \/\/ Destruir gr\u00e1ficos existentes si existen\r\n if (graficoCiclo) graficoCiclo.destroy();\r\n if (graficoGeneral) graficoGeneral.destroy();\r\n \r\n \/\/ Preparar datasets para ciclo\r\n const datasetsCiclo = [];\r\n if (graficosActivos.ciclo.dolor) {\r\n datasetsCiclo.push({\r\n label: 'Dolor',\r\n data: cicloData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.ciclo.animo) {\r\n datasetsCiclo.push({\r\n label: '\u00c1nimo',\r\n data: cicloData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.ciclo.fatiga && cicloData.fatiga) {\r\n datasetsCiclo.push({\r\n label: 'Fatiga',\r\n data: cicloData.fatiga,\r\n borderColor: '#3b82f6',\r\n backgroundColor: 'rgba(59, 130, 246, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.ciclo.nauseas && cicloData.nauseas) {\r\n datasetsCiclo.push({\r\n label: 'N\u00e1useas',\r\n data: cicloData.nauseas,\r\n borderColor: '#f59e0b',\r\n backgroundColor: 'rgba(245, 158, 11, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n });\r\n }\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n graficoCiclo = new Chart(ctx1, {\r\n type: 'line',\r\n data: {\r\n labels: cicloData.labels,\r\n datasets: datasetsCiclo\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { \r\n enabled: true,\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 10 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Preparar datasets para general\r\n const datasetsGeneral = [];\r\n if (graficosActivos.general.dolor) {\r\n datasetsGeneral.push({\r\n label: 'Dolor',\r\n data: generalData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.general.animo) {\r\n datasetsGeneral.push({\r\n label: '\u00c1nimo',\r\n data: generalData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n });\r\n }\r\n if (graficosActivos.general.calidad && generalData.calidad) {\r\n datasetsGeneral.push({\r\n label: 'Calidad',\r\n data: generalData.calidad,\r\n borderColor: '#3b82f6',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n });\r\n }\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n graficoGeneral = new Chart(ctx2, {\r\n type: 'line',\r\n data: {\r\n labels: generalData.labels,\r\n datasets: datasetsGeneral\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { \r\n enabled: true,\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 10 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n console.log('Gr\u00e1ficos actualizados correctamente');\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PARA BOTONES DE COLORES\r\n \/\/ ============================================\r\n function toggleLinea(grafico, linea) {\r\n \/\/ Cambiar estado\r\n graficosActivos[grafico][linea] = !graficosActivos[grafico][linea];\r\n \r\n \/\/ Actualizar bot\u00f3n\r\n const btn = document.querySelector(`[data-grafico=\"${grafico}\"][data-linea=\"${linea}\"]`);\r\n if (btn) {\r\n btn.classList.toggle('active', graficosActivos[grafico][linea]);\r\n }\r\n \r\n \/\/ Volver a crear gr\u00e1ficos\r\n const pacienteActual = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n const pacienteId = Object.keys(pacientes).find(id => pacientes[id].nombre === pacienteActual) || 'ODV001';\r\n const datos = pacientes[pacienteId]?.graficos || graficosPorDefecto;\r\n crearGraficos(datos);\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PDF Y ASISTENTE\r\n \/\/ ============================================\r\n function generarResumen() {\r\n const nombre = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n const pacienteNombre = nombre || \"Paciente seleccionado\";\r\n \r\n \/\/ Crear PDF simulado\r\n const pdfWindow = window.open('', '_blank');\r\n pdfWindow.document.write(`\r\n <html>\r\n <head><title>Resumen Ejecutivo - ${pacienteNombre}<\/title><\/head>\r\n <body style=\"font-family: Arial, sans-serif; padding: 20px;\">\r\n <h1>Resumen Ejecutivo<\/h1>\r\n <h2>${pacienteNombre}<\/h2>\r\n <p>Fecha: ${new Date().toLocaleDateString()}<\/p>\r\n <hr>\r\n <h3>An\u00e1lisis de Evoluci\u00f3n<\/h3>\r\n <p>\u2022 Mejor\u00eda general: ${document.getElementById('stat-mejoria').textContent}<\/p>\r\n <p>\u2022 Dolor m\u00e1ximo: ${document.getElementById('stat-dolor').textContent}<\/p>\r\n <p>\u2022 Adherencia al tratamiento: ${document.getElementById('stat-adherencia').textContent}<\/p>\r\n <h3>Recomendaciones<\/h3>\r\n <p>1. Seguimiento continuo del dolor<\/p>\r\n <p>2. Revisi\u00f3n de medicaci\u00f3n analg\u00e9sica<\/p>\r\n <p>3. Soporte psicol\u00f3gico recomendado<\/p>\r\n <p>4. Pr\u00f3xima revisi\u00f3n en 15 d\u00edas<\/p>\r\n <\/body>\r\n <\/html>\r\n `);\r\n pdfWindow.document.close();\r\n }\r\n \r\n function abrirAsistenteIA() {\r\n window.open('https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91', '_blank', 'width=800,height=600');\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n \r\n \/\/ Inicializar con datos del primer paciente\r\n document.getElementById('titulo-graficos').textContent = '\ud83d\udcc8 Mar\u00eda Garc\u00eda L\u00f3pez';\r\n document.getElementById('subtitulo-graficos').textContent = 'ID: ODV001';\r\n \r\n \/\/ Crear gr\u00e1ficos iniciales\r\n crearGraficos(graficosPorDefecto);\r\n \r\n \/\/ Configurar eventos de los botones de colores\r\n document.querySelectorAll('.btn-color').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n const grafico = this.getAttribute('data-grafico');\r\n const linea = this.getAttribute('data-linea');\r\n toggleLinea(grafico, linea);\r\n });\r\n });\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('modal-paciente');\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === this) cerrarModal();\r\n });\r\n \r\n \/\/ Cerrar modal con ESC\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.style.display === 'flex') {\r\n cerrarModal();\r\n }\r\n });\r\n \r\n \/\/ Simular actualizaci\u00f3n peri\u00f3dica\r\n setInterval(() => {\r\n const hora = new Date().toLocaleTimeString('es-ES', {hour: '2-digit', minute:'2-digit'});\r\n const celdasHora = document.querySelectorAll('.tabla-pacientes td:last-child');\r\n if (celdasHora.length > 0) {\r\n const randomIndex = Math.floor(Math.random() * celdasHora.length);\r\n celdasHora[randomIndex].textContent = `Hoy \u00b7 ${hora}`;\r\n }\r\n }, 30000);\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-20c48e4 e-con-full e-flex e-con e-parent\" data-id=\"20c48e4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2613019 elementor-widget elementor-widget-html\" data-id=\"2613019\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Panel M\u00e9dico - Olas de Vida<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n \r\n <style>\r\n \/* RESET Y BASE *\/\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background: #0f172a;\r\n color: #f1f5f9;\r\n line-height: 1.5;\r\n padding: 15px;\r\n min-height: 100vh;\r\n }\r\n \r\n \/* CONTENEDOR PRINCIPAL *\/\r\n .panel-medico {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background: #1e293b;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid #334155;\r\n }\r\n \r\n \/* CABECERA *\/\r\n .cabecera {\r\n background: linear-gradient(135deg, #3b82f6, #8b5cf6);\r\n padding: 20px 25px;\r\n color: white;\r\n }\r\n \r\n .cabecera h1 {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera p {\r\n font-size: 14px;\r\n opacity: 0.9;\r\n margin-bottom: 5px;\r\n }\r\n \r\n .cabecera-tag {\r\n display: inline-block;\r\n background: rgba(255, 255, 255, 0.15);\r\n padding: 4px 12px;\r\n border-radius: 12px;\r\n font-size: 11px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n \r\n \/* CONTENIDO *\/\r\n .contenido {\r\n padding: 25px;\r\n }\r\n \r\n \/* KPI CARDS *\/\r\n .kpi-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\r\n gap: 15px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .kpi-card {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n }\r\n \r\n .kpi-valor {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n margin-bottom: 3px;\r\n }\r\n \r\n .kpi-label {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.05em;\r\n }\r\n \r\n .kpi-tag {\r\n font-size: 10px;\r\n margin-top: 5px;\r\n color: #6ee7b7;\r\n }\r\n \r\n \/* TABLA *\/\r\n .seccion-tabla {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n margin-bottom: 25px;\r\n }\r\n \r\n .seccion-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 16px;\r\n margin-bottom: 6px;\r\n }\r\n \r\n .seccion-subtitulo {\r\n font-size: 13px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n }\r\n \r\n .contenedor-tabla {\r\n max-height: 350px;\r\n overflow: auto;\r\n border-radius: 8px;\r\n border: 1px solid #334155;\r\n }\r\n \r\n .tabla-pacientes {\r\n width: 100%;\r\n border-collapse: collapse;\r\n font-size: 13px;\r\n }\r\n \r\n .tabla-pacientes thead {\r\n background: rgba(15, 23, 42, 0.9);\r\n position: sticky;\r\n top: 0;\r\n }\r\n \r\n .tabla-pacientes th {\r\n padding: 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 }\r\n \r\n .tabla-pacientes td {\r\n padding: 12px 10px;\r\n border-bottom: 1px solid rgba(71, 85, 105, 0.3);\r\n }\r\n \r\n .tabla-pacientes tbody tr:hover {\r\n background: rgba(51, 65, 85, 0.2);\r\n }\r\n \r\n .btn-paciente {\r\n background: none;\r\n border: none;\r\n color: #e2e8f0;\r\n font: inherit;\r\n cursor: pointer;\r\n padding: 0;\r\n text-align: left;\r\n font-weight: 500;\r\n transition: color 0.2s;\r\n }\r\n \r\n .btn-paciente:hover {\r\n color: #93c5fd;\r\n text-decoration: underline;\r\n }\r\n \r\n \/* ESTADOS *\/\r\n .estado-critico { color: #fca5a5; font-weight: 600; }\r\n .estado-alto { color: #fed7aa; font-weight: 600; }\r\n .estado-moderada { color: #93c5fd; font-weight: 600; }\r\n .estado-estable { color: #6ee7b7; font-weight: 600; }\r\n \r\n \/* PANEL INFERIOR - 3 COLUMNAS *\/\r\n .panel-inferior {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 18px;\r\n }\r\n \r\n .columna {\r\n background: rgba(30, 41, 59, 0.8);\r\n border: 1px solid #475569;\r\n border-radius: 10px;\r\n padding: 18px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 400px;\r\n }\r\n \r\n .columna-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin-bottom: 6px;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n \r\n .columna-subtitulo {\r\n font-size: 12px;\r\n color: #94a3b8;\r\n margin-bottom: 15px;\r\n min-height: 36px;\r\n }\r\n \r\n \/* COLUMNA 1: PDFs (PERFECTO) *\/\r\n .contenedor-pdfs {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n margin-top: auto;\r\n }\r\n \r\n .btn {\r\n padding: 11px 15px;\r\n border-radius: 8px;\r\n border: none;\r\n font-size: 13px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n justify-content: center;\r\n transition: all 0.2s;\r\n text-decoration: none;\r\n color: white;\r\n }\r\n \r\n .btn-primario {\r\n background: linear-gradient(135deg, #3b82f6, #2563eb);\r\n }\r\n \r\n .btn-primario:hover {\r\n filter: brightness(1.1);\r\n transform: translateY(-1px);\r\n box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);\r\n }\r\n \r\n .btn-secundario {\r\n background: transparent;\r\n border: 1px solid #475569;\r\n color: #e2e8f0;\r\n }\r\n \r\n .btn-secundario:hover {\r\n background: rgba(71, 85, 105, 0.2);\r\n border-color: #3b82f6;\r\n }\r\n \r\n \/* COLUMNA 2: ASISTENTE IA DE JOTFORM - PERFECTO *\/\r\n .contenedor-asistente {\r\n flex: 1;\r\n border-radius: 8px;\r\n overflow: hidden;\r\n border: 1px solid #475569;\r\n background: #0f172a;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n \r\n .asistente-header {\r\n padding: 12px 15px;\r\n background: linear-gradient(135deg, #8b5cf6, #7c3aed);\r\n color: white;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n \r\n .iframe-asistente {\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n flex: 1;\r\n min-height: 200px;\r\n }\r\n \r\n \/* COLUMNA 3: GR\u00c1FICOS - ESTRUCTURA PERFECTA *\/\r\n .contenedor-graficos {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n min-height: 280px;\r\n }\r\n \r\n .grafico-box {\r\n background: #0f172a;\r\n border-radius: 8px;\r\n padding: 10px;\r\n border: 1px solid #475569;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n min-height: 120px;\r\n }\r\n \r\n .grafico-titulo {\r\n font-size: 11px;\r\n color: #94a3b8;\r\n text-align: center;\r\n margin-bottom: 6px;\r\n font-weight: 500;\r\n }\r\n \r\n .grafico-canvas {\r\n width: 100% !important;\r\n flex: 1;\r\n }\r\n \r\n .mini-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 8px;\r\n margin-top: 10px;\r\n }\r\n \r\n .mini-stat {\r\n padding: 10px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 11px;\r\n border: 1px solid transparent;\r\n transition: all 0.2s;\r\n }\r\n \r\n .mini-stat:hover {\r\n transform: translateY(-2px);\r\n border-color: #475569;\r\n }\r\n \r\n .mini-stat-label {\r\n font-size: 10px;\r\n margin-bottom: 3px;\r\n opacity: 0.8;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n \r\n .mini-stat-valor {\r\n font-size: 14px;\r\n font-weight: 700;\r\n }\r\n \r\n .stat-mejoria { \r\n background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));\r\n color: #6ee7b7;\r\n border-left: 3px solid #10b981;\r\n }\r\n \r\n .stat-dolor { \r\n background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));\r\n color: #fca5a5;\r\n border-left: 3px solid #ef4444;\r\n }\r\n \r\n .stat-adherencia { \r\n background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));\r\n color: #93c5fd;\r\n border-left: 3px solid #3b82f6;\r\n }\r\n \r\n \/* MODAL *\/\r\n .modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.9);\r\n display: none;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 10000;\r\n padding: 20px;\r\n }\r\n \r\n .modal-contenido {\r\n background: #1e293b;\r\n border-radius: 12px;\r\n border: 1px solid #475569;\r\n width: 100%;\r\n max-width: 700px;\r\n max-height: 85vh;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);\r\n }\r\n \r\n .modal-cabecera {\r\n padding: 18px 22px;\r\n border-bottom: 1px solid #475569;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n \r\n .modal-titulo {\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 18px;\r\n font-weight: 600;\r\n }\r\n \r\n .modal-cerrar {\r\n background: none;\r\n border: none;\r\n color: #94a3b8;\r\n font-size: 22px;\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 transition: all 0.2s;\r\n }\r\n \r\n .modal-cerrar:hover {\r\n background: #334155;\r\n color: #e2e8f0;\r\n }\r\n \r\n .modal-cuerpo {\r\n padding: 25px;\r\n overflow-y: auto;\r\n max-height: calc(85vh - 70px);\r\n }\r\n \r\n .ficha-paciente h3 {\r\n color: #93c5fd;\r\n font-family: 'Poppins', sans-serif;\r\n font-size: 15px;\r\n margin: 18px 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-paciente p {\r\n margin: 0 0 12px 0;\r\n color: #e2e8f0;\r\n line-height: 1.5;\r\n }\r\n \r\n .ficha-paciente ul {\r\n margin: 0 0 15px 0;\r\n padding-left: 20px;\r\n }\r\n \r\n .ficha-paciente li {\r\n margin-bottom: 6px;\r\n color: #cbd5e1;\r\n }\r\n \r\n \/* RESPONSIVE *\/\r\n @media (max-width: 1024px) {\r\n .panel-inferior {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .columna:nth-child(3) {\r\n grid-column: span 2;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .panel-inferior {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna:nth-child(3) {\r\n grid-column: span 1;\r\n }\r\n \r\n .columna {\r\n height: 380px;\r\n }\r\n \r\n .kpi-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n \r\n .contenido {\r\n padding: 18px;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .kpi-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .columna {\r\n height: 360px;\r\n }\r\n \r\n .contenido {\r\n padding: 15px;\r\n }\r\n \r\n .cabecera {\r\n padding: 15px;\r\n }\r\n \r\n .cabecera h1 {\r\n font-size: 20px;\r\n }\r\n \r\n .mini-stats {\r\n grid-template-columns: 1fr;\r\n gap: 6px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- PANEL M\u00c9DICO -->\r\n <div class=\"panel-medico\">\r\n <!-- CABECERA -->\r\n <div class=\"cabecera\">\r\n <h1>Olas de Vida \u00b7 Panel M\u00e9dico<\/h1>\r\n <p>Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/p>\r\n <span class=\"cabecera-tag\">vista demo \u00b7 optimizado para Elementor<\/span>\r\n <\/div>\r\n \r\n <!-- CONTENIDO PRINCIPAL -->\r\n <div class=\"contenido\">\r\n <!-- KPI -->\r\n <div class=\"kpi-grid\">\r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">10<\/div>\r\n <div class=\"kpi-label\">Pacientes activos<\/div>\r\n <div class=\"kpi-tag\">Muestra completa<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">3<\/div>\r\n <div class=\"kpi-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"kpi-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">4<\/div>\r\n <div class=\"kpi-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"kpi-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n \r\n <div class=\"kpi-card\">\r\n <div class=\"kpi-valor\">87%<\/div>\r\n <div class=\"kpi-label\">Adherencia<\/div>\r\n <div class=\"kpi-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- TABLA DE PACIENTES (10 PACIENTES) -->\r\n <div class=\"seccion-tabla\">\r\n <div class=\"seccion-titulo\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"seccion-subtitulo\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver gr\u00e1ficos<\/div>\r\n \r\n <div class=\"contenedor-tabla\">\r\n <table class=\"tabla-pacientes\">\r\n <thead>\r\n <tr>\r\n <th>Paciente<\/th>\r\n <th>ID<\/th>\r\n <th>Diagn\u00f3stico<\/th>\r\n <th>Dolor<\/th>\r\n <th>\u00c1nimo<\/th>\r\n <th>Estado<\/th>\r\n <th>\u00daltimo formulario<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <!-- 10 PACIENTES -->\r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV001')\">Mar\u00eda Garc\u00eda L\u00f3pez<\/button><\/td>\r\n <td>ODV001<\/td>\r\n <td>Ca mama \u00b7 Ciclo 4\/6<\/td>\r\n <td>9\/10<\/td>\r\n <td>8\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 08:40<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV002')\">Roberto Silva Jim\u00e9nez<\/button><\/td>\r\n <td>ODV002<\/td>\r\n <td>Linfoma \u00b7 Ciclo 2\/8<\/td>\r\n <td>6\/10<\/td>\r\n <td>3\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Ayer \u00b7 20:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV003')\">Ana Fern\u00e1ndez L\u00f3pez<\/button><\/td>\r\n <td>ODV003<\/td>\r\n <td>Ca mama \u00b7 Ciclo 3\/6<\/td>\r\n <td>6\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 07:50<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV004')\">Javier Rodr\u00edguez Santos<\/button><\/td>\r\n <td>ODV004<\/td>\r\n <td>Ca pulm\u00f3n \u00b7 Ciclo 5\/6<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-estable\">ESTABLE<\/td>\r\n <td>Ayer \u00b7 18:33<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV005')\">Laura Herrera Funes<\/button><\/td>\r\n <td>ODV005<\/td>\r\n <td>Ca ovario \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Hoy \u00b7 10:15<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV006')\">Carmen Ramos Vidal<\/button><\/td>\r\n <td>ODV006<\/td>\r\n <td>Ca colon \u00b7 Ciclo 1\/8<\/td>\r\n <td>7\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hace 3h<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV007')\">Daniel Mu\u00f1oz Ortega<\/button><\/td>\r\n <td>ODV007<\/td>\r\n <td>Ca p\u00e1ncreas \u00b7 Ciclo 3\/12<\/td>\r\n <td>8\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hoy \u00b7 09:10<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV008')\">Elena Torres D\u00edaz<\/button><\/td>\r\n <td>ODV008<\/td>\r\n <td>Ca mama \u00b7 Ciclo 2\/6<\/td>\r\n <td>5\/10<\/td>\r\n <td>6\/10<\/td>\r\n <td class=\"estado-critico\">CR\u00cdTICO<\/td>\r\n <td>Hace 45 min<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV009')\">Alberto Paredes Luna<\/button><\/td>\r\n <td>ODV009<\/td>\r\n <td>Ca pr\u00f3stata \u00b7 Hormono + RT<\/td>\r\n <td>3\/10<\/td>\r\n <td>7\/10<\/td>\r\n <td class=\"estado-moderada\">MODERADA<\/td>\r\n <td>Ayer \u00b7 14:22<\/td>\r\n <\/tr>\r\n \r\n <tr>\r\n <td><button class=\"btn-paciente\" onclick=\"abrirPaciente('ODV010')\">Luc\u00eda Romero Salvat<\/button><\/td>\r\n <td>ODV010<\/td>\r\n <td>Ca mama \u00b7 Terapia dirigida<\/td>\r\n <td>4\/10<\/td>\r\n <td>5\/10<\/td>\r\n <td class=\"estado-alto\">ALTO RIESGO<\/td>\r\n <td>Hoy \u00b7 11:05<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- PANEL INFERIOR - 3 COLUMNAS -->\r\n <div class=\"panel-inferior\">\r\n <!-- COLUMNA 1: PDFs (PERFECTO - NO TOCAR) -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83d\udcc4 Informes PDF<\/div>\r\n <div class=\"columna-subtitulo\">Descarga informes m\u00e9dicos completos<\/div>\r\n \r\n <div class=\"contenedor-pdfs\">\r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/01994df43a8c7e41adb1e4e88e9367ca3103\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udccb<\/span> \u00daltimo ciclo\r\n <\/a>\r\n \r\n <a href=\"https:\/\/eu.jotform.com\/pdf\/019ad9bc86b471129ecafec7a28f03a41b91\" target=\"_blank\" class=\"btn btn-primario\">\r\n <span>\ud83d\udcca<\/span> Evoluci\u00f3n global\r\n <\/a>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"generarResumen()\">\r\n <span>\ud83d\udcc4<\/span> Resumen ejecutivo\r\n <\/button>\r\n \r\n <button class=\"btn btn-secundario\" onclick=\"window.print()\">\r\n <span>\ud83d\udda8\ufe0f<\/span> Imprimir panel\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 2: ASISTENTE IA DE JOTFORM - IFRAME REAL -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\">\ud83e\udd16 Juli\u00e1n \u2014 Asistente IA<\/div>\r\n <div class=\"columna-subtitulo\">Asistente m\u00e9dico con inteligencia artificial<\/div>\r\n \r\n <div class=\"contenedor-asistente\">\r\n <div class=\"asistente-header\">\r\n <span>\ud83e\udd16<\/span>\r\n Juli\u00e1n - Asistente IA (voz y texto)\r\n <\/div>\r\n <!-- IFRAME REAL DE JOTFORM - AJUSTADO AL TAMA\u00d1O DEL MINIBLOQUE -->\r\n <iframe \r\n class=\"iframe-asistente\"\r\n src=\"https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91\"\r\n title=\"Asistente IA Juli\u00e1n\"\r\n sandbox=\"allow-scripts allow-same-origin allow-forms allow-popups allow-modals\"\r\n allow=\"microphone; camera\"\r\n loading=\"lazy\">\r\n <\/iframe>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- COLUMNA 3: GR\u00c1FICOS - CICLO Y GLOBAL -->\r\n <div class=\"columna\">\r\n <div class=\"columna-titulo\" id=\"titulo-graficos\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"columna-subtitulo\" id=\"subtitulo-graficos\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"contenedor-graficos\" id=\"contenedor-graficos\">\r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">\u00daltimo ciclo (dolor vs \u00e1nimo)<\/div>\r\n <canvas id=\"grafico-ciclo\" class=\"grafico-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <div class=\"grafico-box\">\r\n <div class=\"grafico-titulo\">Evoluci\u00f3n general (semanas)<\/div>\r\n <canvas id=\"grafico-general\" class=\"grafico-canvas\"><\/canvas>\r\n <\/div>\r\n \r\n <div class=\"mini-stats\">\r\n <div class=\"mini-stat stat-mejoria\">\r\n <div class=\"mini-stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-dolor\">\r\n <div class=\"mini-stat-label\">Dolor pico<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"mini-stat stat-adherencia\">\r\n <div class=\"mini-stat-label\">Adherencia<\/div>\r\n <div class=\"mini-stat-valor\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- MODAL FICHA M\u00c9DICA -->\r\n <div class=\"modal\" id=\"modal-paciente\">\r\n <div class=\"modal-contenido\">\r\n <div class=\"modal-cabecera\">\r\n <div class=\"modal-titulo\" id=\"modal-titulo\">Ficha del paciente<\/div>\r\n <button class=\"modal-cerrar\" onclick=\"cerrarModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-cuerpo\">\r\n <div id=\"info-paciente\" class=\"ficha-paciente\">\r\n <!-- Informaci\u00f3n se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATOS COMPLETOS DE PACIENTES (10 PACIENTES)\r\n \/\/ ============================================\r\n const pacientes = {\r\n ODV001: {\r\n nombre: \"Mar\u00eda Garc\u00eda L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV001<\/p>\r\n <p><strong>Edad:<\/strong> 52 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> maria.garcia@email.com \u00b7 612345678<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 4\/6 de quimioterapia<\/strong><\/p>\r\n <p>Carcinoma ductal invasivo \u00b7 Estadio IIB<\/p>\r\n\r\n <h3>\ud83d\udcca \u00daltimos Registros<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 9\/10 (intenso)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 8\/10 (optimista)<\/li>\r\n <li><strong>Fiebre:<\/strong> 38.8\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 08:40<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Paracetamol 1g cada 8h<\/li>\r\n <li>Tramadol 50mg seg\u00fan necesidad<\/li>\r\n <li>Filgrastim d\u00edas 2-7 del ciclo<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 12h<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10', '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 general: {\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 info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV002<\/p>\r\n <p><strong>Edad:<\/strong> 45 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> roberto.s@email.com \u00b7 623456789<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>Linfoma no Hodgkin \u00b7 Ciclo 2\/8<\/strong><\/p>\r\n <p>Estadio IIIA \u00b7 Quimioterapia R-CHOP<\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 3\/10 (depresivo)<\/li>\r\n <li><strong>Fiebre:<\/strong> 37.5\u00b0C<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Ayer 20:10<\/li>\r\n <\/ul>\r\n\r\n <h3>\ud83d\udc8a Tratamiento Actual<\/h3>\r\n <ul>\r\n <li>Rituximab + CHOP ciclo 2\/8<\/li>\r\n <li>Ondansetr\u00f3n 8mg cada 8h<\/li>\r\n <li>Prednisona 100mg d\u00edas 1-5<\/li>\r\n <li>Antibi\u00f3tico profil\u00e1ctico<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [5, 6, 6, 5, 6],\r\n animo: [3, 2, 3, 4, 3]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3', 'Sem 4'],\r\n dolor: [5, 6, 6, 5],\r\n animo: [4, 3, 3, 3]\r\n },\r\n stats: {\r\n mejoria: '-5%',\r\n dolorPico: '6\/10',\r\n adherencia: '85%'\r\n }\r\n }\r\n },\r\n \r\n ODV003: {\r\n nombre: \"Ana Fern\u00e1ndez L\u00f3pez\",\r\n info: `\r\n <h3>\ud83d\udc69 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV003<\/p>\r\n <p><strong>Edad:<\/strong> 48 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> ana.fernandez@email.com \u00b7 634567890<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de mama \u00b7 Ciclo 3\/6<\/strong><\/p>\r\n <p>Estadio II \u00b7 Quimioterapia adyuvante<\/p>\r\n\r\n <h3>\ud83d\udcca Estado Actual<\/h3>\r\n <ul>\r\n <li><strong>Dolor:<\/strong> 6\/10 (moderado)<\/li>\r\n <li><strong>\u00c1nimo:<\/strong> 7\/10 (positivo)<\/li>\r\n <li><strong>\u00daltima actualizaci\u00f3n:<\/strong> Hoy 07:50<\/li>\r\n <\/ul>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7', 'D\u00eda 10'],\r\n dolor: [6, 6, 5, 6, 6],\r\n animo: [7, 6, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [7, 6, 6],\r\n animo: [6, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+8%',\r\n dolorPico: '6\/10',\r\n adherencia: '94%'\r\n }\r\n }\r\n },\r\n \r\n ODV004: {\r\n nombre: \"Javier Rodr\u00edguez Santos\",\r\n info: `\r\n <h3>\ud83d\udc68 Informaci\u00f3n del Paciente<\/h3>\r\n <p><strong>ID:<\/strong> ODV004<\/p>\r\n <p><strong>Edad:<\/strong> 68 a\u00f1os<\/p>\r\n <p><strong>Contacto:<\/strong> javier.rodriguez@email.com \u00b7 645678901<\/p>\r\n\r\n <h3>\ud83c\udfe5 Diagn\u00f3stico<\/h3>\r\n <p><strong>C\u00e1ncer de pulm\u00f3n \u00b7 Ciclo 5\/6<\/strong><\/p>\r\n <p>Estadio IIIB \u00b7 Quimioterapia con cisplatino<\/p>\r\n `,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2', 'Sem 3'],\r\n dolor: [3, 3, 3],\r\n animo: [7, 7, 7]\r\n },\r\n stats: {\r\n mejoria: '+12%',\r\n dolorPico: '3\/10',\r\n adherencia: '96%'\r\n }\r\n }\r\n },\r\n \r\n ODV005: {\r\n nombre: \"Laura Herrera Funes\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV005<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [5, 4, 5, 5],\r\n animo: [6, 6, 6, 6]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [5, 5],\r\n animo: [6, 6]\r\n },\r\n stats: {\r\n mejoria: '+3%',\r\n dolorPico: '5\/10',\r\n adherencia: '88%'\r\n }\r\n }\r\n },\r\n \r\n ODV006: {\r\n nombre: \"Carmen Ramos Vidal\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV006<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5'],\r\n dolor: [7, 6, 7],\r\n animo: [5, 5, 5]\r\n },\r\n general: {\r\n labels: ['Sem 1'],\r\n dolor: [7],\r\n animo: [5]\r\n },\r\n stats: {\r\n mejoria: '-2%',\r\n dolorPico: '7\/10',\r\n adherencia: '82%'\r\n }\r\n }\r\n },\r\n \r\n ODV007: {\r\n nombre: \"Daniel Mu\u00f1oz Ortega\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV007<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [8, 7, 8, 8],\r\n animo: [5, 5, 5, 5]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [8, 8],\r\n animo: [5, 5]\r\n },\r\n stats: {\r\n mejoria: '0%',\r\n dolorPico: '8\/10',\r\n adherencia: '79%'\r\n }\r\n }\r\n },\r\n \r\n ODV008: {\r\n nombre: \"Elena Torres D\u00edaz\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV008<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5'],\r\n dolor: [5, 4, 5],\r\n animo: [6, 6, 6]\r\n },\r\n general: {\r\n labels: ['Sem 1'],\r\n dolor: [5],\r\n animo: [6]\r\n },\r\n stats: {\r\n mejoria: '+5%',\r\n dolorPico: '5\/10',\r\n adherencia: '91%'\r\n }\r\n }\r\n },\r\n \r\n ODV009: {\r\n nombre: \"Alberto Paredes Luna\",\r\n info: `<h3>\ud83d\udc68 Paciente ODV009<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5', 'D\u00eda 7'],\r\n dolor: [3, 2, 3, 3],\r\n animo: [7, 7, 7, 7]\r\n },\r\n general: {\r\n labels: ['Sem 1', 'Sem 2'],\r\n dolor: [3, 3],\r\n animo: [7, 7]\r\n },\r\n stats: {\r\n mejoria: '+10%',\r\n dolorPico: '3\/10',\r\n adherencia: '95%'\r\n }\r\n }\r\n },\r\n \r\n ODV010: {\r\n nombre: \"Luc\u00eda Romero Salvat\",\r\n info: `<h3>\ud83d\udc69 Paciente ODV010<\/h3><p>Informaci\u00f3n detallada del paciente.<\/p>`,\r\n graficos: {\r\n ciclo: {\r\n labels: ['D\u00eda 1', 'D\u00eda 3', 'D\u00eda 5'],\r\n dolor: [4, 3, 4],\r\n animo: [5, 5, 5]\r\n },\r\n general: {\r\n labels: ['Sem 1'],\r\n dolor: [4],\r\n animo: [5]\r\n },\r\n stats: {\r\n mejoria: '+2%',\r\n dolorPico: '4\/10',\r\n adherencia: '87%'\r\n }\r\n }\r\n }\r\n };\r\n \r\n \/\/ ============================================\r\n \/\/ VARIABLES GLOBALES\r\n \/\/ ============================================\r\n let graficoCiclo = null;\r\n let graficoGeneral = null;\r\n const graficosPorDefecto = pacientes.ODV001.graficos;\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PRINCIPALES\r\n \/\/ ============================================\r\n \r\n function abrirPaciente(id) {\r\n console.log('Abriendo paciente:', id);\r\n \r\n const paciente = pacientes[id];\r\n \r\n if (!paciente) {\r\n alert('Paciente no encontrado');\r\n return;\r\n }\r\n \r\n \/\/ Actualizar modal\r\n document.getElementById('modal-titulo').textContent = `${paciente.nombre} \u00b7 ${id}`;\r\n document.getElementById('info-paciente').innerHTML = paciente.info;\r\n document.getElementById('modal-paciente').style.display = 'flex';\r\n document.body.style.overflow = 'hidden';\r\n \r\n \/\/ Actualizar gr\u00e1ficos\r\n actualizarGraficos(id, paciente);\r\n }\r\n \r\n function cerrarModal() {\r\n document.getElementById('modal-paciente').style.display = 'none';\r\n document.body.style.overflow = 'auto';\r\n }\r\n \r\n function actualizarGraficos(id, paciente) {\r\n console.log('Actualizando gr\u00e1ficos para:', id);\r\n \r\n \/\/ Actualizar t\u00edtulos\r\n document.getElementById('titulo-graficos').textContent = `\ud83d\udcc8 ${paciente.nombre}`;\r\n document.getElementById('subtitulo-graficos').textContent = `ID: ${id}`;\r\n \r\n \/\/ Obtener datos\r\n const datos = paciente.graficos || graficosPorDefecto;\r\n const stats = datos.stats || graficosPorDefecto.stats;\r\n \r\n \/\/ Actualizar estad\u00edsticas\r\n document.getElementById('stat-mejoria').textContent = stats.mejoria;\r\n document.getElementById('stat-dolor').textContent = stats.dolorPico;\r\n document.getElementById('stat-adherencia').textContent = stats.adherencia;\r\n \r\n \/\/ Crear o actualizar gr\u00e1ficos\r\n crearGraficos(datos);\r\n }\r\n \r\n function crearGraficos(datos) {\r\n const cicloData = datos.ciclo || graficosPorDefecto.ciclo;\r\n const generalData = datos.general || graficosPorDefecto.general;\r\n \r\n const ctx1 = document.getElementById('grafico-ciclo');\r\n const ctx2 = document.getElementById('grafico-general');\r\n \r\n \/\/ Asegurar que los canvas tengan dimensiones correctas\r\n ctx1.style.height = '100%';\r\n ctx2.style.height = '100%';\r\n \r\n \/\/ Destruir gr\u00e1ficos existentes si existen\r\n if (graficoCiclo) graficoCiclo.destroy();\r\n if (graficoGeneral) graficoGeneral.destroy();\r\n \r\n \/\/ Gr\u00e1fico 1: \u00daltimo ciclo\r\n graficoCiclo = new Chart(ctx1, {\r\n type: 'line',\r\n data: {\r\n labels: cicloData.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: cicloData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'rgba(239, 68, 68, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: cicloData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\r\n tension: 0.3,\r\n fill: false,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { \r\n enabled: true,\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 10 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n \/\/ Gr\u00e1fico 2: Evoluci\u00f3n general\r\n graficoGeneral = new Chart(ctx2, {\r\n type: 'line',\r\n data: {\r\n labels: generalData.labels,\r\n datasets: [\r\n {\r\n label: 'Dolor',\r\n data: generalData.dolor,\r\n borderColor: '#ef4444',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n },\r\n {\r\n label: '\u00c1nimo',\r\n data: generalData.animo,\r\n borderColor: '#10b981',\r\n backgroundColor: 'transparent',\r\n tension: 0.3,\r\n borderWidth: 2\r\n }\r\n ]\r\n },\r\n options: {\r\n responsive: true,\r\n maintainAspectRatio: false,\r\n plugins: { \r\n legend: { display: false },\r\n tooltip: { \r\n enabled: true,\r\n mode: 'index',\r\n intersect: false\r\n }\r\n },\r\n scales: {\r\n y: {\r\n min: 0,\r\n max: 10,\r\n ticks: { \r\n stepSize: 2, \r\n color: '#94a3b8',\r\n font: { size: 10 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n },\r\n x: {\r\n ticks: { \r\n color: '#94a3b8',\r\n font: { size: 9 }\r\n },\r\n grid: { \r\n color: 'rgba(71, 85, 105, 0.2)',\r\n drawBorder: false\r\n }\r\n }\r\n }\r\n }\r\n });\r\n \r\n console.log('Gr\u00e1ficos actualizados correctamente');\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ FUNCIONES PDF\r\n \/\/ ============================================\r\n function generarResumen() {\r\n const nombre = document.getElementById('titulo-graficos').textContent.replace('\ud83d\udcc8 ', '');\r\n const pacienteNombre = nombre || \"Paciente seleccionado\";\r\n \r\n \/\/ Crear PDF simulado\r\n const pdfWindow = window.open('', '_blank');\r\n pdfWindow.document.write(`\r\n <html>\r\n <head><title>Resumen Ejecutivo - ${pacienteNombre}<\/title><\/head>\r\n <body style=\"font-family: Arial, sans-serif; padding: 20px;\">\r\n <h1>Resumen Ejecutivo<\/h1>\r\n <h2>${pacienteNombre}<\/h2>\r\n <p>Fecha: ${new Date().toLocaleDateString()}<\/p>\r\n <hr>\r\n <h3>An\u00e1lisis de Evoluci\u00f3n<\/h3>\r\n <p>\u2022 Mejor\u00eda general: ${document.getElementById('stat-mejoria').textContent}<\/p>\r\n <p>\u2022 Dolor m\u00e1ximo: ${document.getElementById('stat-dolor').textContent}<\/p>\r\n <p>\u2022 Adherencia al tratamiento: ${document.getElementById('stat-adherencia').textContent}<\/p>\r\n <h3>Recomendaciones<\/h3>\r\n <p>1. Seguimiento continuo del dolor<\/p>\r\n <p>2. Revisi\u00f3n de medicaci\u00f3n analg\u00e9sica<\/p>\r\n <p>3. Soporte psicol\u00f3gico recomendado<\/p>\r\n <p>4. Pr\u00f3xima revisi\u00f3n en 15 d\u00edas<\/p>\r\n <\/body>\r\n <\/html>\r\n `);\r\n pdfWindow.document.close();\r\n }\r\n \r\n \/\/ ============================================\r\n \/\/ INICIALIZACI\u00d3N\r\n \/\/ ============================================\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('\u2705 Panel m\u00e9dico cargado correctamente');\r\n \r\n \/\/ Inicializar con datos del primer paciente\r\n document.getElementById('titulo-graficos').textContent = '\ud83d\udcc8 Mar\u00eda Garc\u00eda L\u00f3pez';\r\n document.getElementById('subtitulo-graficos').textContent = 'ID: ODV001';\r\n \r\n \/\/ Crear gr\u00e1ficos iniciales\r\n crearGraficos(graficosPorDefecto);\r\n \r\n \/\/ Configurar eventos del modal\r\n const modal = document.getElementById('modal-paciente');\r\n modal.addEventListener('click', function(e) {\r\n if (e.target === this) cerrarModal();\r\n });\r\n \r\n \/\/ Cerrar modal con ESC\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'Escape' && modal.style.display === 'flex') {\r\n cerrarModal();\r\n }\r\n });\r\n \r\n \/\/ Cargar iframe del asistente IA con efecto de carga\r\n setTimeout(() => {\r\n const iframe = document.querySelector('.iframe-asistente');\r\n if (iframe) {\r\n iframe.style.opacity = '0';\r\n iframe.addEventListener('load', function() {\r\n this.style.transition = 'opacity 0.5s ease';\r\n this.style.opacity = '1';\r\n console.log('\u2705 Asistente IA de JotForm cargado correctamente');\r\n });\r\n \r\n \/\/ Si hay error en el iframe, mostrar opci\u00f3n alternativa\r\n iframe.addEventListener('error', function() {\r\n console.error('Error cargando el asistente IA');\r\n this.parentElement.innerHTML = `\r\n <div style=\"padding: 20px; text-align: center;\">\r\n <div style=\"font-size: 24px; margin-bottom: 10px;\">\ud83e\udd16<\/div>\r\n <h3 style=\"color: white; margin-bottom: 10px;\">Asistente IA no disponible<\/h3>\r\n <p style=\"color: #94a3b8; margin-bottom: 20px;\">Por favor, accede al asistente desde:<\/p>\r\n <button class=\"btn\" onclick=\"abrirAsistenteExterno()\" style=\"background: linear-gradient(135deg, #8b5cf6, #7c3aed);\">\r\n <span>\ud83e\udd16<\/span> Abrir Asistente Juli\u00e1n\r\n <\/button>\r\n <\/div>\r\n `;\r\n });\r\n }\r\n }, 500);\r\n });\r\n \r\n \/\/ Funci\u00f3n alternativa si falla el iframe\r\n function abrirAsistenteExterno() {\r\n window.open('https:\/\/eu.jotform.com\/agent\/019ad9bc86b471129ecafec7a28f03a41b91', '_blank');\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-67d910c e-con-full e-flex e-con e-parent\" data-id=\"67d910c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-493735f elementor-widget elementor-widget-html\" data-id=\"493735f\" 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 <!-- Chart.js para gr\u00e1ficos -->\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 <!-- CABECERA -->\r\n <div class=\"ov-header\">\r\n <div class=\"ov-header-title\">Olas de Vida \u00b7 Panel M\u00e9dico<\/div>\r\n <div class=\"ov-header-sub\">Monitorizaci\u00f3n oncol\u00f3gica \u00b7 Pacientes, evoluci\u00f3n, anal\u00edticas<\/div>\r\n <div class=\"ov-header-tag\">vista demo \u00b7 pensada para wordpress \/ elementor<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-inner\">\r\n\r\n <!-- TARJETAS KPI -->\r\n <div class=\"ov-cards\">\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">10<\/div>\r\n <div class=\"ov-card-label\">Pacientes activos<\/div>\r\n <div class=\"ov-card-tag\">Muestra completa<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">3<\/div>\r\n <div class=\"ov-card-label\">Alertas cr\u00edticas<\/div>\r\n <div class=\"ov-card-tag\">Dolor \/ fiebre \/ \u00e1nimo<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">4<\/div>\r\n <div class=\"ov-card-label\">Alta supervisi\u00f3n<\/div>\r\n <div class=\"ov-card-tag\">Seguimiento cercano<\/div>\r\n <\/div>\r\n\r\n <div class=\"ov-card\">\r\n <div class=\"ov-card-value\">87%<\/div>\r\n <div class=\"ov-card-label\">Adherencia<\/div>\r\n <div class=\"ov-card-tag\">\u00daltimos 14 d\u00edas<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- TABLA DE PACIENTES -->\r\n <div class=\"ov-panel\">\r\n <div class=\"ov-panel-title\">\ud83d\udce5 Bandeja de pacientes<\/div>\r\n <div class=\"ov-panel-sub\">Haz clic en el nombre para abrir su ficha m\u00e9dica y ver 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 <!-- 10 PACIENTES COMPLETOS -->\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 src=\"https:\/\/www.jotform.com\/app\/230155277271048\"\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 <!-- PANEL INFERIOR - 3 COLUMNAS -->\r\n <div class=\"ov-bottom-layout\">\r\n\r\n <!-- COLUMNA 1: PDFs -->\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 <!-- COLUMNA 2: ASISTENTE IA EMBEBIDO -->\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 <!-- COLUMNA 3: GR\u00c1FICOS DIN\u00c1MICOS -->\r\n <div class=\"ov-side-box\">\r\n <div class=\"ov-side-title\" id=\"charts-title\">\ud83d\udcc8 Evoluci\u00f3n paciente<\/div>\r\n <div class=\"ov-side-sub\" id=\"charts-subtitle\">\r\n Selecciona un paciente para ver gr\u00e1ficos\r\n <\/div>\r\n \r\n <div class=\"charts-container\" id=\"charts-container\">\r\n <!-- Gr\u00e1fico 1: \u00daltimo ciclo -->\r\n <div class=\"chart-box\">\r\n <div class=\"chart-title\" 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 <!-- Gr\u00e1fico 2: Evoluci\u00f3n general -->\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 <!-- Mini estad\u00edsticas -->\r\n <div class=\"mini-stats\">\r\n <div class=\"stat-box stat-improvement\">\r\n <div class=\"stat-label\">Mejor\u00eda<\/div>\r\n <div class=\"stat-value\" id=\"stat-mejoria\">+15%<\/div>\r\n <\/div>\r\n <div class=\"stat-box stat-pain\">\r\n <div class=\"stat-label\">Dolor pico<\/div>\r\n <div class=\"stat-value\" id=\"stat-dolor\">8\/10<\/div>\r\n <\/div>\r\n <div class=\"stat-box stat-adherence\">\r\n <div class=\"stat-label\">Adherencia<\/div>\r\n <div class=\"stat-value\" id=\"stat-adherencia\">92%<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- MODAL FICHA M\u00c9DICA -->\r\n<div id=\"patient-modal\">\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 <!-- Contenido se carga aqu\u00ed -->\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================\r\n\/\/ DATOS DE PACIENTES 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-8e567c8 e-con-full e-flex e-con e-parent\" data-id=\"8e567c8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-781b6a4 elementor-widget elementor-widget-html\" data-id=\"781b6a4\" 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>Aplicaci\u00f3n Web Funcional<\/title>\r\n <style>\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: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);\r\n color: #333;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background-color: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n }\r\n \r\n header {\r\n background: linear-gradient(to right, #2c3e50, #4a6491);\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n \r\n h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n }\r\n \r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n \r\n .panel {\r\n flex: 1;\r\n min-width: 300px;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n border-top: 5px solid #3498db;\r\n }\r\n \r\n .panel h2 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f1f1;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n input, select, button {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n }\r\n \r\n input:focus, select:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\r\n }\r\n \r\n button {\r\n background: linear-gradient(to right, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n }\r\n \r\n button:hover {\r\n background: linear-gradient(to right, #2980b9, #1c5a87);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .resultado {\r\n background-color: #f8f9fa;\r\n border-left: 4px solid #2ecc71;\r\n padding: 20px;\r\n margin-top: 25px;\r\n border-radius: 0 6px 6px 0;\r\n display: none;\r\n }\r\n \r\n .resultado.visible {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .lista-item {\r\n padding: 12px 15px;\r\n background: #f8f9fa;\r\n margin-bottom: 10px;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-left: 4px solid #3498db;\r\n }\r\n \r\n .contador {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n text-align: center;\r\n margin: 20px 0;\r\n }\r\n \r\n .acciones {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n \r\n .acciones button {\r\n flex: 1;\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: #2c3e50;\r\n color: white;\r\n margin-top: 30px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n main {\r\n flex-direction: column;\r\n }\r\n \r\n .panel {\r\n min-width: 100%;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>Aplicaci\u00f3n Web Funcional<\/h1>\r\n <p class=\"subtitle\">Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo<\/p>\r\n <\/header>\r\n \r\n <main>\r\n <div class=\"panel\">\r\n <h2>Formulario de Ejemplo<\/h2>\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Escribe tu nombre\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo Electr\u00f3nico:<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"opcion\">Selecciona una opci\u00f3n:<\/label>\r\n <select id=\"opcion\">\r\n <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n <option value=\"1\">Opci\u00f3n 1<\/option>\r\n <option value=\"2\">Opci\u00f3n 2<\/option>\r\n <option value=\"3\">Opci\u00f3n 3<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"btnEnviar\">Enviar Datos<\/button>\r\n \r\n <div class=\"resultado\" id=\"resultadoForm\">\r\n <h3>Datos Enviados:<\/h3>\r\n <p id=\"datosMostrados\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"panel\">\r\n <h2>Contador Interactivo<\/h2>\r\n <div class=\"contador\" id=\"contador\">0<\/div>\r\n \r\n <div class=\"acciones\">\r\n <button id=\"btnAumentar\">Aumentar<\/button>\r\n <button id=\"btnDisminuir\">Disminuir<\/button>\r\n <button id=\"btnReset\">Reiniciar<\/button>\r\n <\/div>\r\n \r\n <h2 style=\"margin-top: 30px;\">Lista de Elementos<\/h2>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nuevoElemento\" placeholder=\"Escribe un nuevo elemento\">\r\n <button id=\"btnAgregar\">Agregar a la lista<\/button>\r\n <\/div>\r\n \r\n <div id=\"listaElementos\">\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 1<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 2<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <footer>\r\n <p>Aplicaci\u00f3n web funcional - Todos los elementos est\u00e1n operativos<\/p>\r\n <p>Prueba los diferentes componentes para verificar su funcionamiento<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Esperar a que el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('Documento cargado y listo');\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const btnEnviar = document.getElementById('btnEnviar');\r\n const resultadoForm = document.getElementById('resultadoForm');\r\n const datosMostrados = document.getElementById('datosMostrados');\r\n const contador = document.getElementById('contador');\r\n const btnAumentar = document.getElementById('btnAumentar');\r\n const btnDisminuir = document.getElementById('btnDisminuir');\r\n const btnReset = document.getElementById('btnReset');\r\n const btnAgregar = document.getElementById('btnAgregar');\r\n const nuevoElemento = document.getElementById('nuevoElemento');\r\n const listaElementos = document.getElementById('listaElementos');\r\n \r\n \/\/ Variables de estado\r\n let contadorValor = 0;\r\n \r\n \/\/ Funci\u00f3n para actualizar el contador\r\n function actualizarContador() {\r\n contador.textContent = contadorValor;\r\n \/\/ Cambiar color seg\u00fan el valor\r\n if (contadorValor > 0) {\r\n contador.style.color = '#2ecc71';\r\n } else if (contadorValor < 0) {\r\n contador.style.color = '#e74c3c';\r\n } else {\r\n contador.style.color = '#3498db';\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para agregar elemento a la lista\r\n function agregarElemento(texto) {\r\n if (!texto.trim()) {\r\n alert('Por favor, escribe algo para agregar a la lista');\r\n return;\r\n }\r\n \r\n const nuevoItem = document.createElement('div');\r\n nuevoItem.className = 'lista-item';\r\n \r\n const span = document.createElement('span');\r\n span.textContent = texto;\r\n \r\n const btnEliminar = document.createElement('button');\r\n btnEliminar.textContent = 'Eliminar';\r\n btnEliminar.style.cssText = 'width: auto; padding: 5px 10px;';\r\n btnEliminar.className = 'btnEliminar';\r\n \r\n btnEliminar.addEventListener('click', function() {\r\n nuevoItem.remove();\r\n });\r\n \r\n nuevoItem.appendChild(span);\r\n nuevoItem.appendChild(btnEliminar);\r\n listaElementos.appendChild(nuevoItem);\r\n \r\n \/\/ Limpiar el campo de entrada\r\n nuevoElemento.value = '';\r\n nuevoElemento.focus();\r\n }\r\n \r\n \/\/ Event Listeners\r\n \r\n \/\/ Formulario\r\n btnEnviar.addEventListener('click', function() {\r\n const nombre = document.getElementById('nombre').value;\r\n const email = document.getElementById('email').value;\r\n const opcion = document.getElementById('opcion').value;\r\n \r\n if (!nombre || !email || !opcion) {\r\n alert('Por favor, completa todos los campos del formulario');\r\n return;\r\n }\r\n \r\n const opcionTexto = document.getElementById('opcion').options[document.getElementById('opcion').selectedIndex].text;\r\n \r\n datosMostrados.innerHTML = `\r\n <strong>Nombre:<\/strong> ${nombre}<br>\r\n <strong>Email:<\/strong> ${email}<br>\r\n <strong>Opci\u00f3n seleccionada:<\/strong> ${opcionTexto}\r\n `;\r\n \r\n resultadoForm.classList.add('visible');\r\n \r\n \/\/ Mostrar mensaje de \u00e9xito\r\n setTimeout(() => {\r\n alert('Formulario enviado correctamente');\r\n }, 300);\r\n });\r\n \r\n \/\/ Contador\r\n btnAumentar.addEventListener('click', function() {\r\n contadorValor++;\r\n actualizarContador();\r\n });\r\n \r\n btnDisminuir.addEventListener('click', function() {\r\n contadorValor--;\r\n actualizarContador();\r\n });\r\n \r\n btnReset.addEventListener('click', function() {\r\n contadorValor = 0;\r\n actualizarContador();\r\n });\r\n \r\n \/\/ Lista de elementos\r\n btnAgregar.addEventListener('click', function() {\r\n agregarElemento(nuevoElemento.value);\r\n });\r\n \r\n \/\/ Permitir agregar con Enter\r\n nuevoElemento.addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n agregarElemento(this.value);\r\n }\r\n });\r\n \r\n \/\/ Asignar eventos a los botones de eliminar existentes\r\n document.querySelectorAll('.btnEliminar').forEach(boton => {\r\n boton.addEventListener('click', function() {\r\n this.parentElement.remove();\r\n });\r\n });\r\n \r\n \/\/ Inicializar contador\r\n actualizarContador();\r\n \r\n \/\/ Mostrar mensaje de que todo est\u00e1 listo\r\n console.log('Aplicaci\u00f3n inicializada correctamente');\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-40a7c71 e-con-full e-flex e-con e-parent\" data-id=\"40a7c71\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e637238 elementor-widget elementor-widget-html\" data-id=\"e637238\" 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>Aplicaci\u00f3n Web Funcional<\/title>\r\n <style>\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: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);\r\n color: #333;\r\n min-height: 100vh;\r\n padding: 20px;\r\n }\r\n \r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n background-color: rgba(255, 255, 255, 0.95);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n overflow: hidden;\r\n }\r\n \r\n header {\r\n background: linear-gradient(to right, #2c3e50, #4a6491);\r\n color: white;\r\n padding: 25px;\r\n text-align: center;\r\n }\r\n \r\n h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n }\r\n \r\n .subtitle {\r\n font-size: 1.2rem;\r\n opacity: 0.9;\r\n }\r\n \r\n main {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 30px;\r\n gap: 30px;\r\n }\r\n \r\n .panel {\r\n flex: 1;\r\n min-width: 300px;\r\n background: white;\r\n border-radius: 10px;\r\n padding: 25px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n border-top: 5px solid #3498db;\r\n }\r\n \r\n .panel h2 {\r\n color: #2c3e50;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f1f1;\r\n }\r\n \r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n \r\n label {\r\n display: block;\r\n margin-bottom: 8px;\r\n font-weight: 600;\r\n color: #2c3e50;\r\n }\r\n \r\n input, select, button {\r\n width: 100%;\r\n padding: 12px 15px;\r\n border: 2px solid #ddd;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n transition: all 0.3s;\r\n }\r\n \r\n input:focus, select:focus {\r\n border-color: #3498db;\r\n outline: none;\r\n box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);\r\n }\r\n \r\n button {\r\n background: linear-gradient(to right, #3498db, #2980b9);\r\n color: white;\r\n border: none;\r\n cursor: pointer;\r\n font-weight: 600;\r\n letter-spacing: 0.5px;\r\n margin-top: 10px;\r\n }\r\n \r\n button:hover {\r\n background: linear-gradient(to right, #2980b9, #1c5a87);\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n \r\n .resultado {\r\n background-color: #f8f9fa;\r\n border-left: 4px solid #2ecc71;\r\n padding: 20px;\r\n margin-top: 25px;\r\n border-radius: 0 6px 6px 0;\r\n display: none;\r\n }\r\n \r\n .resultado.visible {\r\n display: block;\r\n animation: fadeIn 0.5s;\r\n }\r\n \r\n .lista-item {\r\n padding: 12px 15px;\r\n background: #f8f9fa;\r\n margin-bottom: 10px;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-left: 4px solid #3498db;\r\n }\r\n \r\n .contador {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3498db;\r\n text-align: center;\r\n margin: 20px 0;\r\n }\r\n \r\n .acciones {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n \r\n .acciones button {\r\n flex: 1;\r\n }\r\n \r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n background-color: #2c3e50;\r\n color: white;\r\n margin-top: 30px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n main {\r\n flex-direction: column;\r\n }\r\n \r\n .panel {\r\n min-width: 100%;\r\n }\r\n \r\n h1 {\r\n font-size: 2rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <header>\r\n <h1>Aplicaci\u00f3n Web Funcional<\/h1>\r\n <p class=\"subtitle\">Soluci\u00f3n completa HTML + CSS + JavaScript en un solo archivo<\/p>\r\n <\/header>\r\n \r\n <main>\r\n <div class=\"panel\">\r\n <h2>Formulario de Ejemplo<\/h2>\r\n <div class=\"form-group\">\r\n <label for=\"nombre\">Nombre:<\/label>\r\n <input type=\"text\" id=\"nombre\" placeholder=\"Escribe tu nombre\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"email\">Correo Electr\u00f3nico:<\/label>\r\n <input type=\"email\" id=\"email\" placeholder=\"ejemplo@correo.com\">\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label for=\"opcion\">Selecciona una opci\u00f3n:<\/label>\r\n <select id=\"opcion\">\r\n <option value=\"\">-- Elige una opci\u00f3n --<\/option>\r\n <option value=\"1\">Opci\u00f3n 1<\/option>\r\n <option value=\"2\">Opci\u00f3n 2<\/option>\r\n <option value=\"3\">Opci\u00f3n 3<\/option>\r\n <\/select>\r\n <\/div>\r\n \r\n <button id=\"btnEnviar\">Enviar Datos<\/button>\r\n \r\n <div class=\"resultado\" id=\"resultadoForm\">\r\n <h3>Datos Enviados:<\/h3>\r\n <p id=\"datosMostrados\"><\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"panel\">\r\n <h2>Contador Interactivo<\/h2>\r\n <div class=\"contador\" id=\"contador\">0<\/div>\r\n \r\n <div class=\"acciones\">\r\n <button id=\"btnAumentar\">Aumentar<\/button>\r\n <button id=\"btnDisminuir\">Disminuir<\/button>\r\n <button id=\"btnReset\">Reiniciar<\/button>\r\n <\/div>\r\n \r\n <h2 style=\"margin-top: 30px;\">Lista de Elementos<\/h2>\r\n <div class=\"form-group\">\r\n <input type=\"text\" id=\"nuevoElemento\" placeholder=\"Escribe un nuevo elemento\">\r\n <button id=\"btnAgregar\">Agregar a la lista<\/button>\r\n <\/div>\r\n \r\n <div id=\"listaElementos\">\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 1<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <div class=\"lista-item\">\r\n <span>Elemento de ejemplo 2<\/span>\r\n <button class=\"btnEliminar\" style=\"width: auto; padding: 5px 10px;\">Eliminar<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/main>\r\n \r\n <footer>\r\n <p>Aplicaci\u00f3n web funcional - Todos los elementos est\u00e1n operativos<\/p>\r\n <p>Prueba los diferentes componentes para verificar su funcionamiento<\/p>\r\n <\/footer>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Esperar a que el DOM est\u00e9 completamente cargado\r\n document.addEventListener('DOMContentLoaded', function() {\r\n console.log('Documento cargado y listo');\r\n \r\n \/\/ Referencias a elementos del DOM\r\n const btnEnviar = document.getElementById('btnEnviar');\r\n const resultadoForm = document.getElementById('resultadoForm');\r\n const datosMostrados = document.getElementById('datosMostrados');\r\n const contador = document.getElementById('contador');\r\n const btnAumentar = document.getElementById('btnAumentar');\r\n const btnDisminuir = document.getElementById('btnDisminuir');\r\n const btnReset = document.getElementById('btnReset');\r\n const btnAgregar = document.getElementById('btnAgregar');\r\n const nuevoElemento = document.getElementById('nuevoElemento');\r\n const listaElementos = document.getElementById('listaElementos');\r\n \r\n \/\/ Variables de estado\r\n let contadorValor = 0;\r\n \r\n \/\/ Funci\u00f3n para actualizar el contador\r\n function actualizarContador() {\r\n contador.textContent = contadorValor;\r\n \/\/ Cambiar color seg\u00fan el valor\r\n if (contadorValor > 0) {\r\n contador.style.color = '#2ecc71';\r\n } else if (contadorValor < 0) {\r\n contador.style.color = '#e74c3c';\r\n } else {\r\n contador.style.color = '#3498db';\r\n }\r\n }\r\n \r\n \/\/ Funci\u00f3n para agregar elemento a la lista\r\n function agregarElemento(texto) {\r\n if (!texto.trim()) {\r\n alert('Por favor, escribe algo para agregar a la lista');\r\n return;\r\n }\r\n \r\n const nuevoItem = document.createElement('div');\r\n nuevoItem.className = 'lista-item';\r\n \r\n const span = document.createElement('span');\r\n span.textContent = texto;\r\n \r\n const btnEliminar = document.createElement('button');\r\n btnEliminar.textContent = 'Eliminar';\r\n btnEliminar.style.cssText = 'width: auto; padding: 5px 10px;';\r\n btnEliminar.className = 'btnEliminar';\r\n \r\n btnEliminar.addEventListener('click', function() {\r\n nuevoItem.remove();\r\n });\r\n \r\n nuevoItem.appendChild(span);\r\n nuevoItem.appendChild(btnEliminar);\r\n listaElementos.appendChild(nuevoItem);\r\n \r\n \/\/ Limpiar el campo de entrada\r\n nuevoElemento.value = '';\r\n nuevoElemento.focus();\r\n }\r\n \r\n \/\/ Event Listeners\r\n \r\n \/\/ Formulario\r\n btnEnviar.addEventListener('click', function() {\r\n const nombre = document.getElementById('nombre').value;\r\n const email = document.getElementById('email').value;\r\n const opcion = document.getElementById('opcion').value;\r\n \r\n if (!nombre || !email || !opcion) {\r\n alert('Por favor, completa todos los campos del formulario');\r\n return;\r\n }\r\n \r\n const opcionTexto = document.getElementById('opcion').options[document.getElementById('opcion').selectedIndex].text;\r\n \r\n datosMostrados.innerHTML = `\r\n <strong>Nombre:<\/strong> ${nombre}<br>\r\n <strong>Email:<\/strong> ${email}<br>\r\n <strong>Opci\u00f3n seleccionada:<\/strong> ${opcionTexto}\r\n `;\r\n \r\n resultadoForm.classList.add('visible');\r\n \r\n \/\/ Mostrar mensaje de \u00e9xito\r\n setTimeout(() => {\r\n alert('Formulario enviado correctamente');\r\n }, 300);\r\n });\r\n \r\n \/\/ Contador\r\n btnAumentar.addEventListener('click', function() {\r\n contadorValor++;\r\n actualizarContador();\r\n });\r\n \r\n btnDisminuir.addEventListener('click', function() {\r\n contadorValor--;\r\n actualizarContador();\r\n });\r\n \r\n btnReset.addEventListener('click', function() {\r\n contadorValor = 0;\r\n actualizarContador();\r\n });\r\n \r\n \/\/ Lista de elementos\r\n btnAgregar.addEventListener('click', function() {\r\n agregarElemento(nuevoElemento.value);\r\n });\r\n \r\n \/\/ Permitir agregar con Enter\r\n nuevoElemento.addEventListener('keypress', function(e) {\r\n if (e.key === 'Enter') {\r\n agregarElemento(this.value);\r\n }\r\n });\r\n \r\n \/\/ Asignar eventos a los botones de eliminar existentes\r\n document.querySelectorAll('.btnEliminar').forEach(boton => {\r\n boton.addEventListener('click', function() {\r\n this.parentElement.remove();\r\n });\r\n });\r\n \r\n \/\/ Inicializar contador\r\n actualizarContador();\r\n \r\n \/\/ Mostrar mensaje de que todo est\u00e1 listo\r\n console.log('Aplicaci\u00f3n inicializada correctamente');\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Olas de Vida \u00b7 Panel M\u00e9dico Avanzado<\/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-443","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/443","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=443"}],"version-history":[{"count":46,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/443\/revisions"}],"predecessor-version":[{"id":650,"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/pages\/443\/revisions\/650"}],"wp:attachment":[{"href":"https:\/\/5.olasdevida.es\/index.php\/wp-json\/wp\/v2\/media?parent=443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}