\n\n\n
Dashboard de Gr\u00e1ficas<\/title>\n<style>\n \/* === DEGRADADOS VIVOS Y DE DOS PUNTOS === *\/\n .grad-azul-marino {\n background: linear-gradient(90deg, #022b54 0%, #084c8d 100%) !important;\n }\n .grad-azul-medio {\n background: linear-gradient(90deg, #1b73cb 0%, #4da0f7 100%) !important;\n }\n .grad-granate {\n background: linear-gradient(90deg, #990012 0%, #d62839 100%) !important;\n }\n .grad-cian {\n background: linear-gradient(90deg, #00a4bd 0%, #17e3fe 100%) !important;\n }\n\n \/* COLORES DE TEXTO *\/\n .color-azul-marino { color: #084c8d; }\n .color-azul-medio { color: #1b73cb; }\n .color-granate { color: #C8102E; }\n .color-cian { color: #00a4bd; }\n .text-blanco { color: #ffffff !important; }\n\n \/* === ESTRUCTURA PRINCIPAL DEL DASHBOARD === *\/\n .dashboard-tres-columnas {\n display: grid;\n grid-template-columns: 2.8fr 2.8fr 4.4fr;\n gap: 20px;\n width: 100%;\n max-width: 1380px;\n margin: 30px auto;\n font-family: 'Montserrat', sans-serif;\n color: #222;\n box-sizing: border-box;\n }\n\n .card-grafico {\n background: #ffffff;\n border-radius: 16px;\n padding: 22px 18px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n box-shadow: 0 4px 15px rgba(0,0,0,0.04);\n border: 1px solid #eeeeee;\n box-sizing: border-box;\n }\n\n .card-header h3 {\n font-size: 19px;\n font-weight: 800;\n color: #C8102E;\n margin: 0 0 8px 0;\n line-height: 1.2;\n text-align: right;\n }\n\n .titulo-derecha { text-align: right; }\n\n .linea-roja {\n width: 100%;\n height: 2px;\n background-color: #C8102E;\n }\n\n \/* === FILAS Y PISTAS DE FONDO CON RELIEVE HUNDIDO === *\/\n .cuerpo-filas {\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n flex-grow: 1;\n margin: 18px 0;\n gap: 16px;\n }\n\n .fila-capsula {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n cursor: pointer;\n box-sizing: border-box;\n }\n\n .label-fila {\n font-size: 14px;\n font-weight: 500;\n color: #333333;\n text-align: right;\n white-space: nowrap;\n min-width: 85px;\n flex-shrink: 0;\n transition: color 0.25s ease, font-weight 0.25s ease;\n }\n\n \/* Ancho fijo especial para las etiquetas de la primera gr\u00e1fica *\/\n .label-col1 {\n width: 170px;\n }\n\n \/* Pista general de fondo (efecto inset shadow hundido) *\/\n .pista-fondo {\n position: relative;\n flex-grow: 1;\n height: 32px;\n background: #efefef;\n border-radius: 20px;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.18), inset 0 -1px 2px rgba(255,255,255,0.8);\n display: flex;\n align-items: center;\n transition: background-color 0.3s ease, box-shadow 0.3s ease;\n }\n\n .barra-progreso {\n height: 100%;\n border-radius: 20px;\n transition: filter 0.3s ease, width 0.4s ease;\n }\n\n \/* C\u00cdRCULOS O MEDALLAS CON N\u00daMERO (COLUMNAS 1 Y 2) *\/\n .circulo-marcador {\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 38px;\n height: 38px;\n background: #ffffff;\n border: 3px solid #f2f2f2;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 17px;\n font-weight: 800;\n box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);\n z-index: 2;\n box-sizing: border-box;\n transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;\n }\n\n \/* === ESPEC\u00cdFICO DE COLUMNA 3 (PACIENTES Y CENTROS SEPARADOS) === *\/\n .subencabezados-col3 {\n display: flex;\n justify-content: flex-end;\n gap: 24px;\n padding-right: 12px;\n font-size: 13px;\n color: #444;\n margin-top: 6px;\n font-weight: 500;\n }\n\n .sub-col {\n width: 110px;\n text-align: center;\n }\n\n .contenedor-dos-capsulas {\n display: flex;\n gap: 10px;\n flex-grow: 1;\n min-width: 0; \/* Previene el desbordamiento de flexbox *\/\n }\n\n .capsula-pacientes {\n flex: 1.4;\n height: 32px;\n background: #efefef;\n border-radius: 20px;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.18), inset 0 -1px 2px rgba(255,255,255,0.8);\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n padding: 0 5px 0 14px;\n box-sizing: border-box;\n transition: background-color 0.3s ease;\n }\n\n .capsula-centros {\n width: 95px;\n height: 32px;\n background: #efefef;\n border-radius: 20px;\n box-shadow: inset 0 2px 5px rgba(0,0,0,0.18), inset 0 -1px 2px rgba(255,255,255,0.8);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n padding: 0 12px 0 5px;\n box-sizing: border-box;\n transition: background-color 0.3s ease;\n }\n\n .num-col3 {\n font-size: 17px;\n font-weight: 900;\n letter-spacing: -0.3px;\n transition: transform 0.25s ease;\n }\n\n .pildora-indicador {\n height: 22px;\n border-radius: 12px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.2);\n transition: transform 0.25s ease, filter 0.25s ease;\n }\n\n .capsula-roja-pacientes {\n box-shadow: 0 3px 8px rgba(153,0,18,0.3);\n justify-content: flex-end !important;\n padding: 0 14px !important;\n transition: filter 0.3s ease, transform 0.25s ease;\n }\n\n .capsula-roja-centros {\n box-shadow: 0 3px 8px rgba(153,0,18,0.3);\n justify-content: flex-start !important;\n padding: 0 14px !important;\n transition: filter 0.3s ease, transform 0.25s ease;\n }\n\n \/* === EFECTOS DIN\u00c1MICOS HOVER === *\/\n .fila-capsula:hover .label-fila {\n color: #C8102E;\n font-weight: 700;\n }\n\n .fila-capsula:hover .pista-fondo,\n .fila-capsula:hover .capsula-pacientes,\n .fila-capsula:hover .capsula-centros {\n background: #e5e5e5;\n }\n\n .fila-capsula:hover .barra-progreso {\n filter: brightness(1.15) saturate(1.1);\n }\n\n .fila-capsula:hover .circulo-marcador {\n transform: translate(-50%, -58%) scale(1.12);\n box-shadow: 0 8px 16px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.12);\n }\n\n .fila-capsula:hover .pildora-indicador {\n transform: scale(1.1);\n filter: brightness(1.15);\n }\n\n .fila-capsula:hover .num-col3 {\n transform: scale(1.08);\n }\n\n .fila-capsula:hover .capsula-roja-pacientes,\n .fila-capsula:hover .capsula-roja-centros {\n filter: brightness(1.12);\n transform: translateY(-1px);\n box-shadow: 0 6px 14px rgba(153,0,18,0.4);\n }\n\n \/* === PIE DE P\u00c1GINA Y TOTALES === *\/\n .card-footer {\n margin-top: 5px;\n }\n\n .total-box {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 10px;\n margin-top: 6px;\n }\n\n .totales-col3-box {\n display: flex;\n justify-content: end;\n align-items: center;\n margin-top: 6px;\n }\n\n .valores-total-col3 {\n display: flex;\n gap: 30px;\n padding-right: 12px;\n margin-left: 10px;\n }\n\n .label-total {\n font-size: 20px;\n font-weight: 400;\n color: #C8102E;\n }\n\n .num-total {\n font-size: 32px;\n font-weight: 900;\n color: #C8102E;\n line-height: 1;\n }\n\n \/* RESPONSIVO M\u00d3VIL (AJUSTES PARA EVITAR OVERFLOW) *\/\n @media (max-width: 960px) {\n .dashboard-tres-columnas {\n grid-template-columns: 1fr;\n margin: 15px auto;\n }\n\n .card-grafico {\n width: 100%;\n overflow: hidden; \/* Asegura que ning\u00fan elemento sobresalga de la tarjeta *\/\n }\n\n .label-col1 {\n width: auto;\n max-width: 130px;\n font-size: 13px;\n white-space: normal; \/* Permite salto de l\u00ednea si la etiqueta es muy larga *\/\n line-height: 1.1;\n }\n\n .label-fila {\n min-width: 70px;\n font-size: 13px;\n }\n\n .capsula-pacientes {\n padding: 0 4px 0 8px;\n }\n\n .capsula-centros {\n width: 75px;\n padding: 0 8px 0 4px;\n }\n\n .num-col3 {\n font-size: 14px;\n }\n\n .subencabezados-col3 {\n gap: 10px;\n padding-right: 0;\n }\n\n .sub-col {\n width: 75px;\n font-size: 12px;\n }\n\n .valores-total-col3 {\n gap: 15px;\n padding-right: 0;\n }\n\n .num-total {\n font-size: 26px;\n }\n }\n\n \/* Ajuste adicional para pantallas muy peque\u00f1as (smartphones peque\u00f1os) *\/\n @media (max-width: 480px) {\n .card-grafico {\n padding: 16px 12px;\n }\n\n .fila-capsula {\n gap: 8px;\n }\n\n .label-fila {\n min-width: 60px;\n font-size: 12px;\n }\n\n .num-col3 {\n font-size: 12px;\n }\n\n .capsula-roja-pacientes,\n .capsula-roja-centros {\n padding: 0 6px !important;\n }\n }\n<\/style>\n\n<div class=\"dashboard-tres-columnas\">\n\n <!-- ==================== COLUMNA 1: ESTUDIOS (CON BARRAS PROPORCIONALES) ==================== -->\n <div class=\"card-grafico\">\n <div class=\"card-header\">\n <h3 class=\"titulo-derecha\">Estudios<\/h3>\n <div class=\"linea-roja\"><\/div>\n <\/div>\n\n <div class=\"card-body cuerpo-filas\">\n <!-- Ensayos cl\u00ednicos (11 -> 91%) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila label-col1\">Ensayos cl\u00ednicos<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-azul-marino\" style=\"width: 91%;\"><\/div>\n <div class=\"circulo-marcador color-azul-marino\" style=\"left: 91%;\">11<\/div>\n <\/div>\n <\/div>\n\n <!-- Estudios observacionales (7 -> 58%) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila label-col1\">Estudios observacionales<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-azul-medio\" style=\"width: 58%;\"><\/div>\n <div class=\"circulo-marcador color-azul-medio\" style=\"left: 58%;\">7<\/div>\n <\/div>\n <\/div>\n\n <!-- Registros (11 -> 91%) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila label-col1\">Registros<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-granate\" style=\"width: 91%;\"><\/div>\n <div class=\"circulo-marcador color-granate\" style=\"left: 91%;\">11<\/div>\n <\/div>\n <\/div>\n\n <!-- Otros (6 -> 50%) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila label-col1\">Otros<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-cian\" style=\"width: 50%;\"><\/div>\n <div class=\"circulo-marcador color-cian\" style=\"left: 50%;\">6<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-footer\">\n <div class=\"linea-roja\"><\/div>\n <div class=\"total-box\">\n <span class=\"label-total\">Total<\/span>\n <span class=\"num-total\">35<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ==================== COLUMNA 2: ENSAYOS CL\u00cdNICOS POR FASE (ORIGINAL) ==================== -->\n <div class=\"card-grafico\">\n <div class=\"card-header\">\n <h3>Ensayos cl\u00ednicos por fase<\/h3>\n <div class=\"linea-roja\"><\/div>\n <\/div>\n\n <div class=\"card-body cuerpo-filas\">\n <!-- I-Ib (1) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">I-Ib<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-azul-marino\" style=\"width: 9%;\"><\/div>\n <div class=\"circulo-marcador color-azul-marino\" style=\"left: 9%;\">1<\/div>\n <\/div>\n <\/div>\n\n <!-- II (8) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">II<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-azul-medio\" style=\"width: 72%;\"><\/div>\n <div class=\"circulo-marcador color-azul-medio\" style=\"left: 72%;\">8<\/div>\n <\/div>\n <\/div>\n\n <!-- Otros (2) -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">Otros<\/span>\n <div class=\"pista-fondo\">\n <div class=\"barra-progreso grad-cian\" style=\"width: 18%;\"><\/div>\n <div class=\"circulo-marcador color-cian\" style=\"left: 18%;\">2<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-footer\">\n <div class=\"linea-roja\"><\/div>\n <div class=\"total-box\">\n <span class=\"label-total\">Total<\/span>\n <span class=\"num-total\">11<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- ==================== COLUMNA 3: PACIENTES Y CENTROS POR ESTUDIOS ==================== -->\n <div class=\"card-grafico\">\n <div class=\"card-header\">\n <h3>Pacientes y centros por estudios<\/h3>\n <div class=\"linea-roja\"><\/div>\n <\/div>\n\n <div class=\"subencabezados-col3\">\n <span class=\"sub-col\">Pacientes<\/span>\n <span class=\"sub-col\">Centros<\/span>\n <\/div>\n\n <div class=\"card-body cuerpo-filas\">\n \n <!-- Fila 1: Ensayo cl\u00ednico -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">Ensayo cl\u00ednico<\/span>\n <div class=\"contenedor-dos-capsulas\">\n <div class=\"capsula-pacientes\">\n <span class=\"num-col3 color-azul-marino\">1123<\/span>\n <div class=\"pildora-indicador grad-azul-marino\" style=\"width: 28px;\"><\/div>\n <\/div>\n <div class=\"capsula-centros\">\n <div class=\"pildora-indicador grad-azul-marino\" style=\"width: 24px;\"><\/div>\n <span class=\"num-col3 color-azul-marino\">112<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Fila 2: Observacional -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">Observacional<\/span>\n <div class=\"contenedor-dos-capsulas\">\n <div class=\"capsula-pacientes\">\n <span class=\"num-col3 color-azul-medio\">2456<\/span>\n <div class=\"pildora-indicador grad-azul-medio\" style=\"width: 52px;\"><\/div>\n <\/div>\n <div class=\"capsula-centros\">\n <div class=\"pildora-indicador grad-azul-medio\" style=\"width: 20px;\"><\/div>\n <span class=\"num-col3 color-azul-medio\">82<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Fila 3: Registro -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">Registro<\/span>\n <div class=\"contenedor-dos-capsulas\">\n <div class=\"capsula-pacientes capsula-roja-pacientes grad-granate\">\n <span class=\"num-col3 text-blanco\">28340<\/span>\n <\/div>\n <div class=\"capsula-centros capsula-roja-centros grad-granate\">\n <span class=\"num-col3 text-blanco\">504<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Fila 4: Otros -->\n <div class=\"fila-capsula\">\n <span class=\"label-fila\">Otros<\/span>\n <div class=\"contenedor-dos-capsulas\">\n <div class=\"capsula-pacientes\">\n <span class=\"num-col3 color-cian\">392<\/span>\n <div class=\"pildora-indicador grad-cian\" style=\"width: 14px;\"><\/div>\n <\/div>\n <div class=\"capsula-centros\">\n <div class=\"pildora-indicador grad-cian\" style=\"width: 12px;\"><\/div>\n <span class=\"num-col3 color-cian\">29<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- Pie de p\u00e1gina Columna 3 -->\n <div class=\"card-footer\">\n <div class=\"linea-roja\"><\/div>\n <div class=\"totales-col3-box\">\n <span class=\"label-total\">Total<\/span>\n <div class=\"valores-total-col3\">\n <span class=\"num-total\">32311<\/span>\n <span class=\"num-total\">727<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-feea8ce8 alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\">\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Donut Chart Experiencia RAICH<\/title>\n<style>\n \/* Contenedor principal al 100% de ancho *\/\n .card-grafica-donut {\n background: #ffffff;\n border-radius: 16px;\n padding: 24px 28px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\n border: 1px solid #eeeeee;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n width: 100%;\n box-sizing: border-box;\n }\n\n \/* T\u00edtulo centrado *\/\n .titulo-grafica {\n font-size: 20px;\n font-weight: 800;\n color: #C8102E;\n margin: 0 0 10px 0;\n text-align: center;\n letter-spacing: -0.2px;\n }\n\n .linea-roja {\n width: 100%;\n height: 2px;\n background-color: #C8102E;\n margin-bottom: 24px;\n opacity: 0.85;\n }\n\n \/* Contenedor flexible de 2 columnas al 100% *\/\n .contenido-donut {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 36px;\n width: 100%;\n box-sizing: border-box;\n }\n\n \/* Secci\u00f3n izquierda: Donut SVG (~45% del ancho) *\/\n .wrapper-svg {\n flex: 0 0 45%;\n max-width: 440px;\n min-width: 280px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .svg-donut {\n width: 100%;\n height: auto;\n overflow: visible;\n filter: drop-shadow(0px 8px 18px rgba(0,0,0,0.06));\n }\n\n \/* Sectores interactivos con extremidades redondeadas *\/\n .sector-donut {\n transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, filter 0.25s ease;\n cursor: pointer;\n transform-origin: 160px 160px;\n stroke-linecap: round;\n fill: none;\n }\n\n .sector-donut:hover,\n .sector-donut.activo {\n transform: scale(1.04);\n filter: drop-shadow(0px 6px 14px rgba(0,0,0,0.22));\n opacity: 1 !important;\n }\n\n .atenuado {\n opacity: 0.3 !important;\n }\n\n \/* Texto de Porcentaje sobre el arco del donut *\/\n .texto-porcentaje-sector {\n font-size: 13px;\n font-weight: 900;\n fill: #ffffff;\n text-anchor: middle;\n dominant-baseline: central;\n pointer-events: none; \/* Permite hover en la barra SVG que est\u00e1 debajo *\/\n opacity: 0;\n transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);\n transform-origin: 160px 160px;\n text-shadow: 0px 1px 3px rgba(0,0,0,0.6);\n }\n\n .texto-porcentaje-sector.activo {\n opacity: 1;\n transform: scale(1.04);\n }\n\n \/* Secci\u00f3n derecha: Leyenda interactiva *\/\n .leyenda-columna {\n flex: 1;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 6px;\n }\n\n .item-leyenda {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 12px;\n border-radius: 8px;\n transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;\n cursor: pointer;\n border: 1px solid transparent;\n width: 100%;\n box-sizing: border-box;\n }\n\n .item-leyenda:hover,\n .item-leyenda.activo {\n background-color: #f8f9fa;\n border-color: #e2e8f0;\n transform: translateX(-3px);\n }\n\n .info-leyenda {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .indicador-color {\n width: 14px;\n height: 14px;\n border-radius: 4px;\n flex-shrink: 0;\n box-shadow: 0 2px 4px rgba(0,0,0,0.12);\n }\n\n .nombre-leyenda {\n font-size: 14px;\n font-weight: 500;\n color: #333333;\n }\n\n .valores-leyenda {\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n }\n\n .num-val {\n font-size: 15px;\n font-weight: 800;\n color: #111111;\n }\n\n .porcentaje-val {\n font-size: 13px;\n font-weight: 600;\n color: #666666;\n width: 52px;\n text-align: right;\n }\n\n \/* Responsivo para pantallas peque\u00f1as *\/\n @media (max-width: 768px) {\n .contenido-donut {\n flex-direction: column;\n gap: 24px;\n }\n .wrapper-svg {\n flex: 0 0 100%;\n width: 100%;\n max-width: 320px;\n }\n }\n<\/style>\n\n<div class=\"card-grafica-donut\">\n <h3 class=\"titulo-grafica\">Experiencia de RAICH por grandes \u00e1reas<\/h3>\n <div class=\"linea-roja\"><\/div>\n\n <div class=\"contenido-donut\">\n <!-- GR\u00c1FICO SVG DONUT -->\n <div class=\"wrapper-svg\">\n <svg class=\"svg-donut\" viewBox=\"0 0 320 320\">\n <defs id=\"degradados-svg\">\n <!-- Degradados SVG din\u00e1micos -->\n <\/defs>\n\n <!-- Sectores del Donut -->\n <g id=\"sectores-donut\"><\/g>\n\n <!-- Centro del Donut (Resumen) -->\n <circle cx=\"160\" cy=\"160\" r=\"76\" fill=\"#ffffff\" filter=\"drop-shadow(0px 2px 8px rgba(0,0,0,0.06))\"><\/circle>\n \n <text x=\"160\" y=\"152\" text-anchor=\"middle\" font-size=\"34\" font-weight=\"900\" fill=\"#111111\">35<\/text>\n <text x=\"160\" y=\"174\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" fill=\"#666666\">proyectos<\/text>\n\n <!-- Porcentajes emergentes en hover sobre el donut -->\n <g id=\"textos-porcentajes-donut\"><\/g>\n <\/svg>\n <\/div>\n\n <!-- LEYENDA A LA DERECHA -->\n <div class=\"leyenda-columna\" id=\"leyenda-donut\"><\/div>\n <\/div>\n<\/div>\n\n<script>\n const datosAreas = [\n { \n nombre: \"Patologia eritroide\", \n valor: 7, \n porcentaje: \"25%\", \n gradiente: [\"#990012\", \"#d62839\"]\n },\n { \n nombre: \"Neoplasias mieloides\", \n valor: 6, \n porcentaje: \"21,4%\", \n gradiente: [\"#022b54\", \"#1b73cb\"]\n },\n { \n nombre: \"Trasplante y terapia celular\", \n valor: 6, \n porcentaje: \"21,4%\", \n gradiente: [\"#C8102E\", \"#ff4d6d\"]\n },\n { \n nombre: \"Neoplasias linfoides\", \n valor: 5, \n porcentaje: \"17,9%\", \n gradiente: [\"#1b73cb\", \"#4da0f7\"]\n },\n { \n nombre: \"Mieloma y gammapat\u00edas\", \n valor: 4, \n porcentaje: \"14,3%\", \n gradiente: [\"#d62839\", \"#f28b9c\"]\n },\n { \n nombre: \"Otros \/ transversal\", \n valor: 3, \n porcentaje: \"10,7%\", \n gradiente: [\"#00a4bd\", \"#17e3fe\"]\n },\n { \n nombre: \"Hemostasia y trombosis\", \n valor: 2, \n porcentaje: \"7,1%\", \n gradiente: [\"#084c8d\", \"#3b82f6\"]\n },\n { \n nombre: \"Enfermedades lisosomales\", \n valor: 2, \n porcentaje: \"7,1%\", \n gradiente: [\"#b91c1c\", \"#f87171\"]\n }\n ];\n\n const cx = 160;\n const cy = 160;\n const radioRadio = 110; \/\/ Radio central del trazo del arco\n const grosorAnillo = 44; \/\/ Grosor del donut\n const anguloEspacioGaps = 4; \/\/ Separaci\u00f3n limpia (en grados) entre cada sector\n\n const totalValores = datosAreas.reduce((acc, item) => acc + item.valor, 0);\n let anguloActual = -90; \/\/ Empieza arriba en sentido horario\n\n const contenedorDegradados = document.getElementById('degradados-svg');\n const contenedorSectores = document.getElementById('sectores-donut');\n const contenedorTextosPct = document.getElementById('textos-porcentajes-donut');\n const contenedorLeyenda = document.getElementById('leyenda-donut');\n\n function polarACartesiana(centerX, centerY, radius, angleInDegrees) {\n const rad = (angleInDegrees) * Math.PI \/ 180.0;\n return {\n x: centerX + (radius * Math.cos(rad)),\n y: centerY + (radius * Math.sin(rad))\n };\n }\n\n datosAreas.forEach((item, index) => {\n const gradId = `gradiente-donut-${index}`;\n\n \/\/ 1. Crear degradados SVG din\u00e1micos\n const linearGrad = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'linearGradient');\n linearGrad.setAttribute('id', gradId);\n linearGrad.setAttribute('x1', '0%');\n linearGrad.setAttribute('y1', '0%');\n linearGrad.setAttribute('x2', '100%');\n linearGrad.setAttribute('y2', '100%');\n\n const stop1 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'stop');\n stop1.setAttribute('offset', '0%');\n stop1.setAttribute('stop-color', item.gradiente[0]);\n\n const stop2 = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'stop');\n stop2.setAttribute('offset', '100%');\n stop2.setAttribute('stop-color', item.gradiente[1]);\n\n linearGrad.appendChild(stop1);\n linearGrad.appendChild(stop2);\n contenedorDegradados.appendChild(linearGrad);\n\n \/\/ 2. Calcular arcos con bordes redondeados y separaci\u00f3n (gaps)\n const anguloBarridoTotal = (item.valor \/ totalValores) * 360;\n const anguloInicioArco = anguloActual + (anguloEspacioGaps \/ 2);\n const anguloFinArco = anguloActual + anguloBarridoTotal - (anguloEspacioGaps \/ 2);\n\n const inicio = polarACartesiana(cx, cy, radioRadio, anguloInicioArco);\n const fin = polarACartesiana(cx, cy, radioRadio, anguloFinArco);\n\n const esArcoGrande = (anguloFinArco - anguloInicioArco) > 180 ? 1 : 0;\n\n const d = [\n `M ${inicio.x} ${inicio.y}`,\n `A ${radioRadio} ${radioRadio} 0 ${esArcoGrande} 1 ${fin.x} ${fin.y}`\n ].join(' ');\n\n const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'path');\n path.setAttribute('d', d);\n path.setAttribute('stroke', `url(#${gradId})`);\n path.setAttribute('stroke-width', grosorAnillo);\n path.setAttribute('class', 'sector-donut');\n path.setAttribute('data-index', index);\n contenedorSectores.appendChild(path);\n\n \/\/ 3. Crear texto con el Porcentaje situado exactamente en el centro geom\u00e9trico del arco\n const anguloMedio = anguloActual + (anguloBarridoTotal \/ 2);\n const posTexto = polarACartesiana(cx, cy, radioRadio, anguloMedio);\n\n const textPct = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'text');\n textPct.setAttribute('x', posTexto.x);\n textPct.setAttribute('y', posTexto.y);\n textPct.setAttribute('class', 'texto-porcentaje-sector');\n textPct.setAttribute('data-index', index);\n textPct.textContent = item.porcentaje;\n contenedorTextosPct.appendChild(textPct);\n\n \/\/ 4. Crear leyenda sincronizada\n const itemLeyenda = document.createElement('div');\n itemLeyenda.className = 'item-leyenda';\n itemLeyenda.setAttribute('data-index', index);\n itemLeyenda.innerHTML = `\n <div class=\"info-leyenda\">\n <span class=\"indicador-color\" style=\"background: linear-gradient(135deg, ${item.gradiente[0]}, ${item.gradiente[1]});\"><\/span>\n <span class=\"nombre-leyenda\">${item.nombre}<\/span>\n <\/div>\n <div class=\"valores-leyenda\">\n <span class=\"num-val\">${item.valor}<\/span>\n <span class=\"porcentaje-val\">${item.porcentaje}<\/span>\n <\/div>\n `;\n contenedorLeyenda.appendChild(itemLeyenda);\n\n anguloActual += anguloBarridoTotal;\n });\n\n const sectores = document.querySelectorAll('.sector-donut');\n const textosPct = document.querySelectorAll('.texto-porcentaje-sector');\n const itemsLeyenda = document.querySelectorAll('.item-leyenda');\n\n function activarElemento(idx) {\n sectores.forEach((s, i) => {\n if (i == idx) s.classList.add('activo');\n else s.classList.add('atenuado');\n });\n textosPct.forEach((t, i) => {\n if (i == idx) t.classList.add('activo');\n else t.classList.remove('activo');\n });\n itemsLeyenda.forEach((l, i) => {\n if (i == idx) l.classList.add('activo');\n else l.classList.add('atenuado');\n });\n }\n\n function desactivarElementos() {\n sectores.forEach(s => s.classList.remove('activo', 'atenuado'));\n textosPct.forEach(t => t.classList.remove('activo'));\n itemsLeyenda.forEach(l => l.classList.remove('activo', 'atenuado'));\n }\n\n sectores.forEach(sector => {\n sector.addEventListener('mouseenter', () => activarElemento(sector.dataset.index));\n sector.addEventListener('mouseleave', desactivarElementos);\n });\n\n itemsLeyenda.forEach(item => {\n item.addEventListener('mouseenter', () => activarElemento(item.dataset.index));\n item.addEventListener('mouseleave', desactivarElementos);\n });\n<\/script>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dashboard de Gr\u00e1ficas Estudios Ensayos cl\u00ednicos 11 Estudios observacionales 7 Registros 11 Otros 6 Total 35 Ensayos cl\u00ednicos por fase […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-56","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Experiencia - Raich<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/raich.es\/?page_id=56\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Experiencia - Raich\" \/>\n<meta property=\"og:description\" content=\"Dashboard de Gr\u00e1ficas Estudios Ensayos cl\u00ednicos 11 Estudios observacionales 7 Registros 11 Otros 6 Total 35 Ensayos cl\u00ednicos por fase […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/raich.es\/?page_id=56\" \/>\n<meta property=\"og:site_name\" content=\"Raich\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-28T09:40:26+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/raich.es\\\/?page_id=56\",\"url\":\"https:\\\/\\\/raich.es\\\/?page_id=56\",\"name\":\"Experiencia - Raich\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/raich.es\\\/#website\"},\"datePublished\":\"2026-04-08T15:35:44+00:00\",\"dateModified\":\"2026-09-28T09:40:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/raich.es\\\/?page_id=56#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/raich.es\\\/?page_id=56\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/raich.es\\\/?page_id=56#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/raich.es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Experiencia\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/raich.es\\\/#website\",\"url\":\"https:\\\/\\\/raich.es\\\/\",\"name\":\"Raich\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/raich.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/raich.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/raich.es\\\/#organization\",\"name\":\"Raich\",\"url\":\"https:\\\/\\\/raich.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/raich.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/raich.es\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-logo-raich.png\",\"contentUrl\":\"https:\\\/\\\/raich.es\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-logo-raich.png\",\"width\":495,\"height\":243,\"caption\":\"Raich\"},\"image\":{\"@id\":\"https:\\\/\\\/raich.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Experiencia - Raich","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/raich.es\/?page_id=56","og_locale":"es_ES","og_type":"article","og_title":"Experiencia - Raich","og_description":"Dashboard de Gr\u00e1ficas Estudios Ensayos cl\u00ednicos 11 Estudios observacionales 7 Registros 11 Otros 6 Total 35 Ensayos cl\u00ednicos por fase […]","og_url":"https:\/\/raich.es\/?page_id=56","og_site_name":"Raich","article_modified_time":"2026-09-28T09:40:26+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/raich.es\/?page_id=56","url":"https:\/\/raich.es\/?page_id=56","name":"Experiencia - Raich","isPartOf":{"@id":"https:\/\/raich.es\/#website"},"datePublished":"2026-04-08T15:35:44+00:00","dateModified":"2026-09-28T09:40:26+00:00","breadcrumb":{"@id":"https:\/\/raich.es\/?page_id=56#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/raich.es\/?page_id=56"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/raich.es\/?page_id=56#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/raich.es\/"},{"@type":"ListItem","position":2,"name":"Experiencia"}]},{"@type":"WebSite","@id":"https:\/\/raich.es\/#website","url":"https:\/\/raich.es\/","name":"Raich","description":"","publisher":{"@id":"https:\/\/raich.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/raich.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/raich.es\/#organization","name":"Raich","url":"https:\/\/raich.es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/raich.es\/#\/schema\/logo\/image\/","url":"https:\/\/raich.es\/wp-content\/uploads\/2026\/04\/cropped-logo-raich.png","contentUrl":"https:\/\/raich.es\/wp-content\/uploads\/2026\/04\/cropped-logo-raich.png","width":495,"height":243,"caption":"Raich"},"image":{"@id":"https:\/\/raich.es\/#\/schema\/logo\/image\/"}}]}},"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"admin","author_link":"https:\/\/raich.es\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"Dashboard de Gr\u00e1ficas Estudios Ensayos cl\u00ednicos 11 Estudios observacionales 7 Registros 11 Otros 6 Total 35 Ensayos cl\u00ednicos por fase […]","_links":{"self":[{"href":"https:\/\/raich.es\/index.php?rest_route=\/wp\/v2\/pages\/56","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raich.es\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raich.es\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raich.es\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raich.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=56"}],"version-history":[{"count":83,"href":"https:\/\/raich.es\/index.php?rest_route=\/wp\/v2\/pages\/56\/revisions"}],"predecessor-version":[{"id":1641,"href":"https:\/\/raich.es\/index.php?rest_route=\/wp\/v2\/pages\/56\/revisions\/1641"}],"wp:attachment":[{"href":"https:\/\/raich.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=56"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}