Crea un dashboard de una sola página en React usando Tailwind, shadcn/ui y Recharts que resuma un clasificador biomédico multi-etiqueta. La página debe incluir, en este orden: (1) Encabezado + KPIs + botones externos, (2) Gráfico de métricas por tema, (3) Panel interactivo de errores por tema, y un pie educativo + autoría. Todo debe ser responsive, claro y sin jerga.

Estilo y librerías

• Usa shadcn/ui (Card, CardHeader, CardContent, CardFooter, Badge, Tabs, TabsList, TabsTrigger, TabsContent, Separator, Button, Alert).
• Usa Recharts para los gráficos (preferible ComposedChart o BarChart).
• Aplica Tailwind (colores suaves, bordes redondeados, grid) y framer-motion para micro-animaciones de entrada.

---

Datos (déjalos inline como constantes)

KPIs globales:

{ "f1_weighted": 0.905, "accuracy_micro": 0.91, "evaluados": 949 }

Métricas por tema (para el gráfico):

[
  {"tema":"Cardiovascular","precision":0.96,"recall":0.89,"f1":0.92,"support":254,"threshold":0.43},
  {"tema":"Neurológico","precision":0.93,"recall":0.88,"f1":0.90,"support":357,"threshold":0.58},
  {"tema":"Hepatorrenal","precision":0.97,"recall":0.85,"f1":0.90,"support":218,"threshold":0.48},
  {"tema":"Oncológico","precision":0.93,"recall":0.83,"f1":0.88,"support":120,"threshold":0.50}
]

Errores por tema (para el panel interactivo):

{
  "Cardiovascular": {"tp":217,"fp":6,"fn":37,"tn":454,"threshold":0.43},
  "Neurológico":    {"tp":321,"fp":41,"fn":36,"tn":316,"threshold":0.58},
  "Hepatorrenal":   {"tp":176,"fp":5,"fn":42,"tn":491,"threshold":0.48},
  "Oncológico":     {"tp":97, "fp":5,"fn":23,"tn":589,"threshold":0.50}
}

---

(1) Encabezado + KPIs + botones externos

• Título: “Resumen del modelo biomédico (holdout 20%)”.

• Muestra 3 KPI Cards:

  • F1 ponderado = 0.905
  • Accuracy (micro) = 0.91
  • Artículos evaluados = 949

• A la derecha del título coloca tres botones (shadcn Button como <a> con target="_blank" y rel="noopener noreferrer"):

  • Probar la demo → https://huggingface.co/spaces/jennifersalazarduke/clasificador-biomedicoTECH_SPHERE
  • Storytelling (Notion) → https://humorous-polyester-33a.notion.site/Challenge-de-Clasificaci-n-Biom-dica-con-IA-25a30d9b1a1180dba80de926852cc7fd?pvs=74
  • Código (GitHub) → https://github.com/SalazarDukeImpactHub/tech-sphere-clasificador-biomedico-multietiqueta

• Debajo del título agrega una línea educativa breve:

  “Barras más altas ⇒ mejor. Cobertura (recall) alta = se escapan menos artículos; Precisión alta = casi no marca temas que no van.”

---

(2) Gráfico de métricas por tema (con colores diferenciados)

• BarChart o ComposedChart con barras agrupadas: precision, recall, f1 (eje Y 0–1 con ticks 0.0–1.0).
• Eje X: tema.
• Legend con checkboxes para mostrar/ocultar cada métrica.
• Tooltip amigable: Tema, Precisión, Cobertura, F1, Apoyos (n), Nivel usado (= threshold), con 2–3 decimales.
• Colores personalizados (obligatorio) para distinguir claramente las métricas (no usar los colores por defecto de Recharts). Sugerencia:
  • precision → #2563eb (azul)
  • recall → #22c55e (verde)
  • f1 → #a855f7 (púrpura)

---

(3) Panel interactivo de “errores por tema”

• Tabs con 4 pestañas: Cardiovascular, Neurológico, Hepatorrenal, Oncológico.
• En cada tab:
  • Tarjeta con conteos: Aciertos (TP), Falsos positivos (FP), Falsos negativos (FN), Correctos sin el tema (TN) y el nivel usado (umbral).
  • Gráfico de barras apiladas con TP, FP y FN (elige colores distintos; ej. TP=#22c55e, FP=#ef4444, FN=#f59e0b).
  • Texto guía: “Si hay muchos FN, baja el nivel de decisión (umbral); si hay muchos FP, súbelo.”

---

Pie educativo y autoría

• Texto educativo (footnote de la página):

  “Este modelo lee tu título y resumen, compara el texto con muchos ejemplos y calcula la probabilidad de que pertenezca a cada tema. Marcamos un tema cuando su probabilidad supera un nivel de seguridad; si ninguno lo supera, mostramos el más probable.”

• Nota de autoría:

  “Autoría: Jennifer Salazar Duke — Organización: Salazar Duke Impact Hub”

---

Requisitos de implementación

• Coloca los datos como constantes dentro del componente.
• Componentiza: KPICard, MetricsChart, ErrorsPanel.
• Layout con grid: KPIs arriba; debajo dos columnas (izq: gráfico de métricas; der: panel de errores).
• Accesible y educativo: tooltips claros, valores con 2–3 decimales, etiquetas en español.
• Código limpio con CardHeader, CardContent, CardFooter y breve explicación en cada sección.