/* Catalog & Study Detail — DB-driven template
 *
 * SCHEMA (cada estudio en STUDIES puede tener):
 *   id, code, name, departamentos[], color_carta,
 *   descripcion_corta, keywords[],
 *   tipo_muestra, tipo_muestra_icon, tipo_contenedor, tipo_contenedor_color,
 *   preparacion_previa, tiempo_entrega, disponibilidad,
 *   precio_particular, precio_hospital ("convenio"),
 *   incluye_intro, incluye[],
 *   observaciones[],
 *   publico_objetivo,
 *   resistencias[]  → opcional, solo molecular:  [{ titulo, color, descripcion, genes:[] }]
 *   articulo_clinico → opcional: { autor, rol, avatar_initials, badge, titulo, parrafos:[], stats:[], referencias:[] }
 *   estudios_relacionados[] → opcional, ids; si no, se infiere por departamento
 *   tags[] (legacy, para chips visuales)
 */

const DEPT_COLORS = {
  "Molecular":      "#3953A4",
  "Infectología":   "#30477F",
  "Hematología":    "#7EB9C7",
  "Bioquímica":     "#4D4D4D",
  "Endocrinología": "#7EB9C7",
  "Inmunología":    "#FDC345",
  "Microbiología":  "#F04F4C",
  "Genética":       "#3953A4",
};

const STUDIES = [
  /* ──────── Q SEPSIS — ejemplo molecular completo ──────── */
  {
    id: "QS-001",
    code: "QS-001",
    name: "Q Sepsis",
    departamentos: ["Molecular", "Infectología"],
    color_carta: "#3953A4",
    descripcion_corta: "Panel molecular de identificación rápida de patógenos en sangre y detección de genes de resistencia antimicrobiana en pacientes con sospecha de sepsis.",
    keywords: ["sepsis", "molecular", "pcr", "amr", "resistencia"],

    tipo_muestra: "Sangre total",
    tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubo morado EDTA 4 mL",
    tipo_contenedor_color: "#7C53A8",
    preparacion_previa: "No requiere ayuno",
    tiempo_entrega: "4–6 horas",
    disponibilidad: "Disponible los 7 días de la semana",

    precio_particular: 4997,
    precio_hospital: "Solicitar convenio",
    publico_objetivo: "Pacientes con sospecha clínica de sepsis",
    aplica_empresa: false,
    servicio_domicilio: true,
    default_audience: "medico",

    audiencias: {
      paciente: {
        descripcion: "Q Sepsis es un análisis de sangre avanzado que usa tecnología molecular para detectar si tienes una infección grave en sangre (sepsis o bacteriemia) y qué bacteria la causa — todo sin necesidad de hemocultivo y en solo 4 a 6 horas.",
        que_esperar: [
          "Una sola toma de sangre de 4 mL",
          "No necesitas ayuno ni preparación especial",
          "Resultado listo en 4–6 horas, el mismo día",
          "Recibes tu resultado digital con firma del QF certificado",
          "No necesitas hemocultivo ni hospitalización para la prueba",
        ],
      },
      medico: {
        descripcion: "Q Sepsis utiliza PCR molecular multiplex para la detección directa en sangre total de los 20 microorganismos más frecuentes en bacteriemia y sepsis, con identificación simultánea de 16 blancos genéticos de resistencia antimicrobiana. Resultado en 4 a 6 horas con solo 4 mL de muestra.",
        indicaciones: [
          "Paciente con sospecha clínica de sepsis o bacteriemia",
          "Fiebre de origen desconocido con deterioro hemodinámico",
          "Inmunocomprometidos: oncológicos, trasplantados, VIH+",
          "Pacientes con hemocultivos negativos y cuadro clínico persistente",
          "Necesidad de desescalamiento terapéutico basado en evidencia molecular",
          "UCI y urgencias donde cada hora cuenta",
        ],
        comparativo: {
          esta_nombre: "Q Sepsis",
          alt_nombre: "Hemocultivo convencional",
          rows: [
            { feature: "Tiempo de resultado",     esta: "4–6 horas",                  alt: "3–5 días" },
            { feature: "Volumen de muestra",      esta: "4 mL sangre total",          alt: "20–40 mL" },
            { feature: "Detección de gérmenes",   esta: "20 patógenos directos",      alt: "Solo los que crecen en cultivo" },
            { feature: "Resistencias",            esta: "16 blancos moleculares",     alt: "Antibiograma fenotípico posterior" },
            { feature: "Requiere crecimiento",    esta: "No",                          alt: "Sí — depende de viabilidad bacteriana" },
            { feature: "Disponibilidad",          esta: "7 días a la semana",         alt: "Sujeto a turno de laboratorio" },
          ],
        },
        desempeno: {
          sensibilidad: "98.4%",
          especificidad: "96%",
          vpp: "94.1%",
          vpn: "97.6%",
          n: "115 pacientes",
        },
      },
      clinica: {
        descripcion_extra: "Con convenio InfectoLab su clínica accede a Q Sepsis los 7 días del año con tiempo de respuesta garantizado de 4 a 6 horas. Recolección en instalaciones disponible. Soporte técnico de Dr. Samuel Navarro Álvarez para interpretación de resultados complejos.",
        logistica: {
          estabilidad: "6 h a temperatura ambiente / 24 h refrigerada (2–8 °C)",
          contenedor: "Tubo morado EDTA 4 mL",
          recoleccion: "Diaria, en instalaciones de la clínica con convenio activo",
          formato_reporte: "PDF digital con firma QF certificado",
          dias_disponibles: "7 días a la semana, 365 días al año",
        },
      },
    },


    incluye_intro: "Q Sepsis identifica simultáneamente más de 25 patógenos bacterianos y fúngicos asociados a sepsis directamente desde sangre, junto con genes de resistencia antimicrobiana clínicamente relevantes. Reduce el tiempo de orientación etiológica de 48–72 horas a 6–8 horas.",
    incluye: [
      "Detección de 18 bacterias Gram negativas y positivas",
      "Detección de 6 especies de Candida spp.",
      "Identificación de mecanismos de resistencia (BLEE, carbapenemasas, mecA, vanA/B)",
      "Reporte con interpretación clínica orientada",
      "Notificación inmediata ante resultado crítico",
      "Validación por especialista en biología molecular",
    ],

    resistencias: [
      {
        titulo: "Carbapenémicos",
        color: "#F04F4C",
        descripcion: "Pérdida de sensibilidad a último recurso β-lactámico.",
        genes: ["KPC", "NDM", "OXA-48", "VIM", "IMP"],
      },
      {
        titulo: "BLEE",
        color: "#FDC345",
        descripcion: "β-lactamasas de espectro extendido.",
        genes: ["CTX-M", "SHV", "TEM"],
      },
      {
        titulo: "Meticilino-resistencia",
        color: "#F04F4C",
        descripcion: "Marca SARM (MRSA) en Staphylococcus aureus.",
        genes: ["mecA", "mecC"],
      },
      {
        titulo: "Glicopéptidos",
        color: "#7EB9C7",
        descripcion: "Resistencia a vancomicina en enterococos.",
        genes: ["vanA", "vanB"],
      },
      {
        titulo: "Colistín",
        color: "#4D4D4D",
        descripcion: "Resistencia mediada por plásmidos.",
        genes: ["mcr-1"],
      },
      {
        titulo: "Quinolonas",
        color: "#30477F",
        descripcion: "Marcadores plasmídicos de resistencia.",
        genes: ["qnrA", "qnrB", "qnrS"],
      },
    ],

    observaciones: [
      "Tomar la muestra antes del inicio o cambio de antibioticoterapia siempre que sea clínicamente posible.",
      "Idealmente acompañar con hemocultivo convencional para correlación fenotípica.",
      "El estudio no sustituye al hemocultivo; lo complementa y acelera la orientación terapéutica inicial.",
      "Para neonatos solicitar contenedor pediátrico (EDTA 2 mL).",
    ],

    articulo_clinico: {
      autor: "Dr. Samuel Navarro Álvarez",
      rol: "Infectólogo e Internista · InfectoLab",
      avatar_initials: "SN",
      badge: "Artículo clínico",
      titulo: "Sepsis y bacteriemia: diagnóstico molecular como ventaja clínica",
      secciones: [
        {
          label: "Epidemiología",
          heading: "La sepsis: una emergencia médica con mortalidad del 10 al 50%",
          parrafos: [
            "La sepsis severa y el choque séptico continúan representando uno de los mayores desafíos en medicina crítica. La mortalidad oscila entre el 10 y el 50% según múltiples estudios, y cada hora sin tratamiento antimicrobiano dirigido incrementa el riesgo de muerte.",
            "El ABC de la sepsis exige estabilizar la vía aérea, mantener hemodinamia óptima e iniciar de forma inmediata el manejo antibiótico empírico, mientras se investiga simultáneamente la posible fuente y etiología infecciosa.",
          ],
          imagen: "https://assets.cdn.filesafe.space/nzcTy7e8QYhzh5745VIV/media/6a04ce1a51d5d92ddcac0a33.png",
          referencia: "Intensive Care Med. 2025;51(12):2318 · JAMA. 2025 Apr 9;333(19):1724–1726 · Crit Care Med. 2026 Apr 1;54(4):725-812",
        },
        {
          label: "Reto Diagnóstico",
          heading: "El hemocultivo: 3 a 5 días de espera en la era molecular",
          parrafos: [
            "Los hemocultivos han sido la principal herramienta para el diagnóstico etiológico de bacteriemia y sepsis. Sin embargo, el tiempo de espera —entre 3 y 5 días— resulta inapropiado en el contexto de la medicina molecular actual.",
            "Adicionalmente, los hemocultivos requieren hasta 20 mL de sangre y presentan limitaciones en pacientes con cobertura antibiótica.",
          ],
          callout: "Resultado completo en 3 a 6 horas con tan solo 4 mL de muestra, vs. 20 mL de los hemocultivos clásicos con resultados entre 3 y 5 días.",
          imagen: "https://assets.cdn.filesafe.space/nzcTy7e8QYhzh5745VIV/media/6a04ce1a21edbf4eefd085d0.png",
        },
        {
          label: "Q Sepsis · InfectoLab",
          heading: "Detección directa en sangre: 20 gérmenes y resistencias en tiempo real",
          parrafos: [
            "Q Sepsis detecta los 20 gérmenes más comunes causantes de bacteriemia y sepsis directamente en sangre, sin hemocultivo. Resultados en 4 a 6 horas con solo 4 mL de muestra.",
            "La detección de mutaciones de resistencia facilita el desescalamiento terapéutico con base en evidencia molecular en tiempo real.",
          ],
          bullets: [
            "No requiere hemocultivo",
            "Resultados en 4–6 h vs. 3–5 días",
            "Solo 4 mL de muestra vs. 20–40 mL",
            "Disponible los 7 días de la semana",
          ],
          imagen: "https://assets.cdn.filesafe.space/nzcTy7e8QYhzh5745VIV/media/6a04cf9621edbf4eefd0d907.png",
        },
        {
          label: "Resistencia Antimicrobiana",
          heading: "16 blancos genéticos de resistencia detectados en la misma muestra",
          parrafos: [
            "Q Sepsis incluye detección simultánea de 16 blancos genéticos que predicen resistencia a los principales antimicrobianos:",
          ],
          lista_resistencias: [
            { familia: "Carbapenémicos", genes: "VIM · OXA-48 · OXA-23 · IMP · NDM · KPC" },
            { familia: "Glucopéptidos (VRE)", genes: "VanA · VanB" },
            { familia: "Meticilina (SARM)", genes: "mecA" },
            { familia: "Colistimetato", genes: "MCR-1" },
            { familia: "Cefalosporinas / BLEE", genes: "TEM · CTX-M · SHV" },
            { familia: "AmpC", genes: "citM" },
            { familia: "Trimetoprim / Sulfas", genes: "dfrA · dfrA5 · sul2" },
            { familia: "Quinolonas", genes: "aac(6')-Ib-cr" },
          ],
        },
      ],
      stats: [
        { num: "98.4%", label: "Sensibilidad" },
        { num: "96%", label: "Especificidad" },
        { num: "115", label: "Pacientes validados" },
        { num: "4–6 h", label: "Tiempo de resultado" },
      ],
      referencias: [
        "Intensive Care Med. 2025;51(12):2318",
        "JAMA. 2025 Apr 9;333(19):1724–1726",
        "Crit Care Med. 2026 Apr 1;54(4):725-812",
      ],
    },

    estudios_relacionados: ["PCR-301", "PCR-302", "BH-001"],
    tags: ["Molecular", "Urgencia"],
  },

  /* ──────── Estudios básicos / regulares ──────── */
  {
    id: "BH-001",
    code: "BH-001",
    name: "Biometría hemática completa",
    departamentos: ["Hematología"],
    color_carta: "#7EB9C7",
    descripcion_corta: "Evaluación cuantitativa y morfológica de las tres series sanguíneas: eritroide, leucoide y plaquetaria.",

    tipo_muestra: "Sangre total",
    tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubo morado EDTA 4 mL",
    tipo_contenedor_color: "#7C53A8",
    preparacion_previa: "No requiere ayuno",
    tiempo_entrega: "Mismo día",
    disponibilidad: "Lunes a sábado",

    precio_particular: 249.9,
    precio_hospital: "Solicitar convenio",
    publico_objetivo: "General",
    aplica_empresa: true,
    servicio_domicilio: true,
    default_audience: "paciente",

    incluye_intro: "Análisis completo de las células sanguíneas: serie roja, serie blanca y plaquetas. El estudio de rutina más solicitado en medicina general y punto de partida diagnóstico para la mayoría de las condiciones clínicas.",
    incluye: [
      "Eritrocitos",
      "Hemoglobina",
      "Hematocrito",
      "Volumen globular medio (VGM)",
      "Conc. media de Hb corpuscular (CMHC)",
      "Índice de distribución de eritrocito (RDW)",
      "Plaquetas",
      "Volumen plaquetario medio (VPM)",
      "Leucocitos totales",
      "Neutrófilos totales",
      "Monocitos",
      "Linfocitos",
    ],

    observaciones: [
      "No requiere ayuno.",
    ],

    audiencias: {
      paciente: {
        descripcion: "La biometría hemática completa es el análisis de sangre más común y es el punto de partida para entender tu estado de salud. En un solo estudio tu médico puede detectar si tienes anemia, una infección, problemas con tus defensas o alteraciones en las plaquetas que afectan la coagulación.",
        que_esperar: [
          "Una sola toma de sangre en tubo morado EDTA",
          "No necesitas ayuno ni preparación especial",
          "Resultado listo el mismo día",
          "Recibes tu resultado digital con firma del QF certificado",
        ],
      },
      medico: {
        descripcion: "La BHC es el estudio hematológico de referencia para el diagnóstico y seguimiento de anemias, procesos infecciosos, trastornos hematológicos y enfermedades sistémicas. Incluye conteo automatizado con diferencial de 5 partes y morfología eritrocitaria.",
        indicaciones: [
          "Diagnóstico y clasificación de anemias (microcítica, normocítica, macrocítica)",
          "Evaluación de procesos infecciosos bacterianos y virales",
          "Seguimiento de pacientes en quimioterapia o radioterapia",
          "Tamizaje pre-operatorio",
          "Control de enfermedades crónicas (DM, HAS, autoinmunes)",
          "Evaluación de trombocitopenia o trombocitosis",
        ],
      },
      clinica: {
        descripcion_extra: "La BHC es el estudio de mayor volumen en cualquier laboratorio. Con convenio InfectoLab accedes a precio preferencial por volumen, recolección programada y resultados el mismo día.",
        logistica: {
          estabilidad: "6 h temperatura ambiente / 24 h refrigerada (2–8 °C)",
          contenedor: "Tubo morado EDTA",
          recoleccion: "Programada en instalaciones con convenio activo",
          formato_reporte: "PDF digital con firma QF certificado",
          dias_disponibles: "Lunes a sábado",
        },
      },
      empresa: {
        caso_uso: "La biometría hemática es el pilar de los exámenes médicos de ingreso y los chequeos periódicos de salud en empresas. Permite descartar anemias, infecciones activas y alteraciones plaquetarias que pueden afectar el desempeño y seguridad del trabajador.",
        procesos: [
          "Examen médico de ingreso",
          "Control periódico de salud ocupacional",
          "Certificación médica para puestos de riesgo",
          "Programas de bienestar para empleados",
        ],
      },
    },

    estudios_relacionados: ["QS-002", "PL-118"],
    tags: ["General"],
  },

  {
    id: "QS-002",
    code: "QS-002",
    name: "Química sanguínea de 6 elementos",
    departamentos: ["Bioquímica"],
    color_carta: "#4D4D4D",
    descripcion_corta: "Glucosa, urea, creatinina, ácido úrico, colesterol total y triglicéridos.",
    tipo_muestra: "Suero", tipo_muestra_icon: "tube",
    tipo_contenedor: "Tubo rojo o amarillo (SST) 5 mL", tipo_contenedor_color: "#E54141",
    preparacion_previa: "Ayuno 8 h", tiempo_entrega: "24 h", disponibilidad: "Lunes a sábado",
    precio_particular: 320, precio_hospital: "Consultar convenio", publico_objetivo: "General",
    incluye_intro: "Perfil bioquímico básico para tamizaje metabólico y renal.",
    incluye: ["Glucosa en ayuno", "Urea (BUN)", "Creatinina", "Ácido úrico", "Colesterol total", "Triglicéridos"],
    observaciones: ["Ayuno estricto de 8 horas, agua permitida.", "No suspender medicamentos sin indicación médica."],
    estudios_relacionados: ["PL-118", "PT-104"],
    tags: ["Metabólico"],
  },

  {
    id: "PT-104",
    code: "PT-104",
    name: "Perfil tiroideo (TSH, T3, T4 libre)",
    departamentos: ["Endocrinología"],
    color_carta: "#7EB9C7",
    descripcion_corta: "Tres marcadores clave para evaluación de función tiroidea.",
    tipo_muestra: "Suero", tipo_muestra_icon: "tube",
    tipo_contenedor: "Tubo rojo (SST) 5 mL", tipo_contenedor_color: "#E54141",
    preparacion_previa: "Sin preparación específica", tiempo_entrega: "24 h", disponibilidad: "Lunes a viernes",
    precio_particular: 690, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Evaluación de función tiroidea para tamizaje, seguimiento y diagnóstico diferencial.",
    incluye: ["TSH (hormona estimulante tiroidea)", "T3 total", "T4 libre"],
    observaciones: ["Reportar uso de levotiroxina y biotina (suplementos).", "Tomar la muestra antes de la dosis matutina de levotiroxina."],
    estudios_relacionados: ["VIT-611", "QS-002"],
    tags: ["Endocrino"],
  },

  {
    id: "PL-118",
    code: "PL-118",
    name: "Perfil lipídico extendido",
    departamentos: ["Bioquímica"],
    color_carta: "#4D4D4D",
    descripcion_corta: "Colesterol total, LDL, HDL, VLDL, triglicéridos y relación aterogénica.",
    tipo_muestra: "Suero", tipo_muestra_icon: "tube",
    tipo_contenedor: "Tubo rojo (SST) 5 mL", tipo_contenedor_color: "#E54141",
    preparacion_previa: "Ayuno 12 h", tiempo_entrega: "24 h", disponibilidad: "Lunes a sábado",
    precio_particular: 540, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Evaluación del riesgo cardiovascular metabólico.",
    incluye: ["Colesterol total", "Colesterol HDL", "Colesterol LDL (calculado)", "Colesterol VLDL", "Triglicéridos", "Relación aterogénica"],
    observaciones: ["Ayuno estricto de 12 horas.", "Evitar consumo de alcohol 24 h antes."],
    estudios_relacionados: ["QS-002", "VIT-611"],
    tags: ["Cardiovascular"],
  },

  {
    id: "CV-220",
    code: "CV-220",
    name: "Carga viral VIH-1 cuantitativa",
    departamentos: ["Molecular", "Infectología"],
    color_carta: "#3953A4",
    descripcion_corta: "Cuantificación de ARN del VIH-1 por PCR en tiempo real. Límite de detección: 20 copias/mL.",
    tipo_muestra: "Plasma EDTA", tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubo morado EDTA 6 mL", tipo_contenedor_color: "#7C53A8",
    preparacion_previa: "Sin preparación", tiempo_entrega: "3–5 días hábiles", disponibilidad: "Lunes a viernes",
    precio_particular: 2100, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Seguimiento cuantitativo de carga viral en pacientes con VIH-1.",
    incluye: ["Cuantificación de ARN viral", "Reporte en copias/mL y log10", "Interpretación clínica orientada"],
    observaciones: ["Procesar plasma dentro de las 6 horas posteriores a la toma.", "Mantener refrigeración 2–8 °C durante transporte."],
    estudios_relacionados: ["CV-230", "CV-240", "ITS-520"],
    tags: ["Molecular"],
  },

  {
    id: "CV-230",
    code: "CV-230",
    name: "Carga viral hepatitis C",
    departamentos: ["Molecular", "Infectología"],
    color_carta: "#3953A4",
    descripcion_corta: "Cuantificación de ARN del virus de la hepatitis C por PCR en tiempo real.",
    tipo_muestra: "Plasma EDTA", tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubo morado EDTA 6 mL", tipo_contenedor_color: "#7C53A8",
    preparacion_previa: "Sin preparación", tiempo_entrega: "3–5 días hábiles", disponibilidad: "Lunes a viernes",
    precio_particular: 2380, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Cuantificación viral para diagnóstico, evaluación pretratamiento y seguimiento.",
    incluye: ["Cuantificación de ARN VHC", "Reporte en UI/mL y log10"],
    observaciones: ["Mantener plasma a 2–8 °C hasta procesamiento."],
    estudios_relacionados: ["CV-240", "CV-220"],
    tags: ["Molecular"],
  },

  {
    id: "CV-240",
    code: "CV-240",
    name: "Carga viral hepatitis B",
    departamentos: ["Molecular", "Infectología"],
    color_carta: "#3953A4",
    descripcion_corta: "Cuantificación de ADN del virus de la hepatitis B por PCR en tiempo real.",
    tipo_muestra: "Plasma EDTA", tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubo morado EDTA 6 mL", tipo_contenedor_color: "#7C53A8",
    preparacion_previa: "Sin preparación", tiempo_entrega: "3–5 días hábiles", disponibilidad: "Lunes a viernes",
    precio_particular: 2280, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Cuantificación de ADN viral para diagnóstico y seguimiento de hepatitis B crónica.",
    incluye: ["Cuantificación de ADN VHB", "Reporte en UI/mL y log10"],
    observaciones: ["Mantener plasma a 2–8 °C hasta procesamiento."],
    estudios_relacionados: ["CV-220", "CV-230"],
    tags: ["Molecular"],
  },

  {
    id: "PCR-301",
    code: "PCR-301",
    name: "PCR múltiplex respiratorio (22 patógenos)",
    departamentos: ["Molecular", "Infectología"],
    color_carta: "#3953A4",
    descripcion_corta: "Detección simultánea de 22 patógenos respiratorios virales y bacterianos.",
    tipo_muestra: "Hisopado nasofaríngeo", tipo_muestra_icon: "scan",
    tipo_contenedor: "Hisopo flocado + medio viral (UTM/VTM)", tipo_contenedor_color: "#7EB9C7",
    preparacion_previa: "Sin preparación", tiempo_entrega: "24 h", disponibilidad: "Lunes a sábado",
    precio_particular: 1850, precio_hospital: "Consultar convenio", publico_objetivo: "General",
    incluye_intro: "Panel sindrómico respiratorio para diagnóstico diferencial en infecciones agudas.",
    incluye: [
      "Influenza A/B, VRS A/B", "SARS-CoV-2", "Parainfluenza 1–4",
      "Adenovirus, Metaneumovirus, Rinovirus", "Bordetella pertussis y parapertussis",
      "Mycoplasma pneumoniae, Chlamydia pneumoniae", "Otros virus respiratorios estacionales",
    ],
    observaciones: ["Toma idealmente dentro de las primeras 72 h del cuadro clínico.", "Conservar la muestra a 2–8 °C hasta su transporte."],
    estudios_relacionados: ["QS-001", "PCR-302"],
    tags: ["Molecular"],
  },

  {
    id: "PCR-302",
    code: "PCR-302",
    name: "PCR múltiplex gastrointestinal",
    departamentos: ["Molecular"],
    color_carta: "#3953A4",
    descripcion_corta: "Panel ampliado de patógenos gastrointestinales: bacterias, virus y parásitos.",
    tipo_muestra: "Muestra fecal", tipo_muestra_icon: "tube",
    tipo_contenedor: "Frasco estéril con medio Cary-Blair", tipo_contenedor_color: "#7EB9C7",
    preparacion_previa: "Sin preparación", tiempo_entrega: "48 h", disponibilidad: "Lunes a sábado",
    precio_particular: 1980, precio_hospital: "Consultar convenio", publico_objetivo: "General",
    incluye_intro: "Diagnóstico molecular rápido en cuadros de gastroenteritis aguda.",
    incluye: ["Bacterias: Salmonella, Shigella, Campylobacter, E. coli patógenas", "Virus: Norovirus, Rotavirus, Adenovirus 40/41", "Parásitos: Giardia, Cryptosporidium, Entamoeba histolytica"],
    observaciones: ["Recolectar la muestra dentro de las primeras 48 h del cuadro."],
    estudios_relacionados: ["PCR-301", "QS-001"],
    tags: ["Molecular"],
  },

  {
    id: "TB-410",
    code: "TB-410",
    name: "QuantiFERON-TB Gold Plus",
    departamentos: ["Inmunología", "Infectología"],
    color_carta: "#FDC345",
    descripcion_corta: "Detección de infección por Mycobacterium tuberculosis basada en interferón gamma.",
    tipo_muestra: "Sangre total", tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubos QuantiFERON (4 colores)", tipo_contenedor_color: "#4D4D4D",
    preparacion_previa: "Sin preparación", tiempo_entrega: "3 días", disponibilidad: "Lunes a viernes",
    precio_particular: 1640, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Prueba IGRA para tamizaje de tuberculosis latente.",
    incluye: ["Análisis cuantitativo de IFN-γ", "Reporte categorizado: positivo/negativo/indeterminado"],
    observaciones: ["Incubar tubos a 37 °C dentro de 16 h posteriores a la toma."],
    estudios_relacionados: ["QS-001", "PCR-301"],
    tags: ["Tamizaje"],
  },

  {
    id: "ITS-520",
    code: "ITS-520",
    name: "Panel ITS ampliado",
    departamentos: ["Microbiología", "Infectología"],
    color_carta: "#F04F4C",
    descripcion_corta: "VIH, sífilis, hepatitis B y C, clamidia y gonorrea.",
    tipo_muestra: "Sangre + orina", tipo_muestra_icon: "drop",
    tipo_contenedor: "Tubo SST + frasco estéril", tipo_contenedor_color: "#E54141",
    preparacion_previa: "Sin preparación", tiempo_entrega: "48 h", disponibilidad: "Lunes a sábado",
    precio_particular: 1750, precio_hospital: "Consultar convenio", publico_objetivo: "Adulto",
    incluye_intro: "Tamizaje completo de infecciones de transmisión sexual.",
    incluye: ["Anticuerpos VIH 1/2", "Anti-HCV", "HBsAg", "VDRL / RPR para sífilis", "PCR Chlamydia trachomatis", "PCR Neisseria gonorrhoeae"],
    observaciones: ["Muestra de orina del primer chorro, 1 h sin orinar previamente."],
    estudios_relacionados: ["CV-220", "CV-230"],
    tags: ["Tamizaje"],
  },

  {
    id: "VIT-611",
    code: "VIT-611",
    name: "Perfil de vitaminas D, B12 y ácido fólico",
    departamentos: ["Bioquímica"],
    color_carta: "#4D4D4D",
    descripcion_corta: "Evaluación nutricional con tres marcadores fundamentales.",
    tipo_muestra: "Suero", tipo_muestra_icon: "tube",
    tipo_contenedor: "Tubo rojo (SST) 5 mL", tipo_contenedor_color: "#E54141",
    preparacion_previa: "Ayuno 8 h", tiempo_entrega: "48 h", disponibilidad: "Lunes a sábado",
    precio_particular: 1180, precio_hospital: "Consultar convenio", publico_objetivo: "General",
    incluye_intro: "Tamizaje de deficiencias nutricionales más prevalentes.",
    incluye: ["25-OH Vitamina D", "Vitamina B12", "Ácido fólico (folato sérico)"],
    observaciones: ["Suspender suplementos vitamínicos 48 h antes si es posible.", "Reportar uso de biotina."],
    estudios_relacionados: ["PT-104", "PL-118"],
    tags: ["Nutricional"],
  },
];

const CATEGORIES = [
  { key: "all", label: "Todos los estudios" },
  { key: "Molecular", label: "Molecular" },
  { key: "Hematología", label: "Hematología" },
  { key: "Bioquímica", label: "Bioquímica" },
  { key: "Endocrinología", label: "Endocrinología" },
  { key: "Infectología", label: "Infectología" },
  { key: "Inmunología", label: "Inmunología" },
  { key: "Microbiología", label: "Microbiología" },
];

/* ────────────────────────── CATÁLOGO ────────────────────────── */
function CatalogPage({ navigate, openStudy, onOpenLead }) {
  const [cat, setCat] = React.useState("all");
  const [q, setQ] = React.useState("");
  const [sample, setSample] = React.useState("all");

  const filtered = STUDIES.filter(s => {
    if (cat !== "all" && !s.departamentos.includes(cat)) return false;
    if (q) {
      const needle = q.toLowerCase();
      if (!s.name.toLowerCase().includes(needle) && !s.code.toLowerCase().includes(needle) && !(s.keywords || []).some(k => k.includes(needle))) return false;
    }
    if (sample !== "all" && !s.tipo_muestra.toLowerCase().includes(sample.toLowerCase())) return false;
    return true;
  });

  const counts = STUDIES.reduce((acc, s) => {
    s.departamentos.forEach(d => { acc[d] = (acc[d] || 0) + 1; });
    return acc;
  }, {});

  return (
    <main data-screen-label="06 Catálogo">
      <section className="section page-hero" style={{padding: "72px 0 32px"}}>
        <div className="container">
          <div className="eyebrow">Catálogo clínico · {STUDIES.length} estudios</div>
          <h1 className="text-balance" style={{marginTop: 14, maxWidth: 22+"ch"}}>
            Estudios y perfiles, organizados para encontrar lo que buscas.
          </h1>
          <p className="lead text-pretty" style={{marginTop: 18}}>
            Filtra por departamento, busca por nombre o código y consulta preparación,
            tipo de muestra y tiempo de respuesta de cada estudio.
          </p>
        </div>
      </section>

      <section style={{padding: "0 0 96px"}}>
        <div className="container">
          <div className="catalog-shell">
            <aside className="cat-side">
              <div className="cat-search" style={{marginBottom: 28}}>
                <Icon name="search" size={18} />
                <input placeholder="Buscar estudio o código…" value={q} onChange={(e)=>setQ(e.target.value)} />
              </div>

              <div className="filter-group">
                <h5>Departamento</h5>
                <div style={{display:"flex", flexDirection:"column", gap: 2}}>
                  {CATEGORIES.map(c => (
                    <button key={c.key}
                      onClick={() => setCat(c.key)}
                      className={"filter-chip" + (cat === c.key ? " is-on" : "")}>
                      <span style={{display:"flex", alignItems:"center", gap:8}}>
                        {c.key !== "all" && <span style={{width:8, height:8, borderRadius:999, background: DEPT_COLORS[c.key] || "var(--brand-primary)"}}></span>}
                        {c.label}
                      </span>
                      <span className="count">{c.key === "all" ? STUDIES.length : (counts[c.key] || 0)}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="filter-group">
                <h5>Tipo de muestra</h5>
                <div style={{display:"flex", flexDirection:"column", gap:2}}>
                  {[
                    ["all", "Cualquier muestra"],
                    ["sangre", "Sangre total"],
                    ["plasma", "Plasma EDTA"],
                    ["suero", "Suero"],
                    ["hisopado", "Hisopado"],
                    ["fecal", "Muestra fecal"],
                    ["orina", "Orina"],
                  ].map(([k, l]) => (
                    <button key={k}
                      onClick={() => setSample(k)}
                      className={"filter-chip" + (sample === k ? " is-on" : "")}>
                      <span>{l}</span>
                    </button>
                  ))}
                </div>
              </div>

              <div className="filter-group">
                <h5>¿No encuentras un estudio?</h5>
                <p style={{fontSize: 13.5, color:"var(--ink-600)", lineHeight: 1.55, marginBottom: 14}}>
                  Tenemos más de 850 pruebas disponibles bajo solicitud.
                </p>
                <button className="btn btn-secondary btn-sm" onClick={onOpenLead}>Solicitar estudio</button>
              </div>
            </aside>

            <div>
              <div className="cat-toolbar">
                <div className="cat-meta">
                  Mostrando <b style={{color:"var(--ink-900)"}}>{filtered.length}</b> de {STUDIES.length} estudios
                </div>
                <button className="cat-sort">
                  <Icon name="sort" size={14} /> Ordenar: relevancia
                </button>
              </div>

              <div className="studies">
                {filtered.length === 0 && (
                  <div style={{padding: 64, textAlign:"center", border:"1px dashed var(--ink-200)", borderRadius:14}}>
                    <Icon name="search" size={28} style={{color:"var(--ink-400)"}} />
                    <h3 style={{marginTop: 14, fontWeight: 600}}>No encontramos estudios con esos filtros</h3>
                    <p style={{marginTop: 8, color:"var(--ink-500)"}}>Prueba con otra categoría o solicítanos el estudio directamente.</p>
                    <button className="btn btn-primary" style={{marginTop:18}} onClick={onOpenLead}>Solicitar estudio</button>
                  </div>
                )}
                {filtered.map(s => (
                  <div key={s.id} className="study" style={{borderLeft: `4px solid ${s.color_carta}`}}>
                    <div>
                      <div className="study-top">
                        <span style={{fontFamily:"ui-monospace, monospace", fontSize:11.5, color:"var(--ink-500)", letterSpacing:".04em"}}>{s.code}</span>
                        {s.departamentos.map(d => (
                          <span key={d} className="badge" style={{background: `${DEPT_COLORS[d] || "#3953a4"}1A`, color: DEPT_COLORS[d] || "var(--brand-primary)"}}>{d}</span>
                        ))}
                        {s.resistencias && <span className="badge badge--yellow">Detección AMR</span>}
                      </div>
                      <h4>{s.name}</h4>
                      <p className="desc">{s.descripcion_corta}</p>
                      <div className="study-meta">
                        <span><Icon name={s.tipo_muestra_icon} size={14} style={{verticalAlign:"middle", marginRight:6}}/>Muestra: <b>{s.tipo_muestra}</b></span>
                        <span><Icon name="clock" size={14} style={{verticalAlign:"middle", marginRight:6}}/>Entrega: <b>{s.tiempo_entrega}</b></span>
                        <span>Preparación: <b>{s.preparacion_previa}</b></span>
                      </div>
                    </div>
                    <div className="study-actions" style={{display:"flex", flexDirection:"column", alignItems:"flex-end", gap:10}}>
                      <div style={{fontSize: 22, fontWeight: 700, letterSpacing:"-.02em"}}>
                        {s.precio_particular > 0
                          ? <>${s.precio_particular.toLocaleString("es-MX")} <span style={{fontSize: 12, color:"var(--ink-500)", fontWeight:500}}>MXN</span></>
                          : <span style={{fontSize: 15, fontWeight:600, color:"var(--brand-primary)"}}>Consultar precio</span>
                        }
                      </div>
                      <div style={{display:"flex", gap:8}}>
                        <button className="btn btn-ghost btn-sm" onClick={() => openStudy(s.id)}>Ver detalle</button>
                        <button className="btn btn-primary btn-sm" onClick={onOpenLead}>Agendar</button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ────────────────────────── STUDY DETAIL — DYNAMIC TEMPLATE ────────────────────────── */
function StudyDetailPage({ studyId, navigate, openStudy, onOpenLead }) {
  const s = STUDIES.find(x => x.id === studyId) || STUDIES[0];
  const dept = s.departamentos[0];
  const deptColor = s.color_carta || DEPT_COLORS[dept] || "#3953A4";

  const related = (s.estudios_relacionados || [])
    .map(id => STUDIES.find(x => x.id === id))
    .filter(Boolean)
    .slice(0, 3);
  if (related.length === 0) {
    STUDIES.filter(x => x.departamentos.some(d => s.departamentos.includes(d)) && x.id !== s.id).slice(0, 3).forEach(x => related.push(x));
  }

  const aplicaEmpresa = s.aplica_empresa === true;
  const audTabs = [
    ["paciente", "Paciente"],
    ["medico", "Médico"],
    ["clinica", "Clínica / Hospital"],
    ...(aplicaEmpresa ? [["empresa", "Empresa"]] : []),
  ];
  const initialAudience = s.default_audience || "paciente";
  const [audience, setAudience] = React.useState(initialAudience);
  React.useEffect(() => { setAudience(s.default_audience || "paciente"); }, [s.id]);

  const aud = (s.audiencias && s.audiencias[audience]) || {};
  // Clínica hereda Médico para indicaciones/comparativo/desempeño
  const medAud = (s.audiencias && s.audiencias.medico) || {};
  const clinAud = (s.audiencias && s.audiencias.clinica) || {};

  const showIndicaciones = (audience === "medico" || audience === "clinica") && medAud.indicaciones && medAud.indicaciones.length > 0;
  const showComparativo  = (audience === "medico" || audience === "clinica") && medAud.comparativo;
  const showDesempeno    = (audience === "medico" || audience === "clinica") && medAud.desempeno;
  const showLogistica    = audience === "clinica" && clinAud.logistica;
  const showEmpresaCaso  = audience === "empresa" && aud.caso_uso;

  const audDesc = aud.descripcion || s.descripcion_corta;

  return (
    <main data-screen-label="07 Detalle estudio" className="study-detail">
      {/* Breadcrumb */}
      <section style={{padding: "28px 0 16px", background: "var(--ink-50)", borderBottom:"1px solid var(--ink-200)"}}>
        <div className="container">
          <nav style={{fontSize: 13, color:"var(--ink-500)", display:"flex", gap:8, alignItems:"center", flexWrap:"wrap"}}>
            <a href="#" onClick={(e)=>{e.preventDefault(); navigate("home");}} style={{color:"var(--ink-500)"}}>Inicio</a>
            <span>/</span>
            <a href="#" onClick={(e)=>{e.preventDefault(); navigate("catalogo");}} style={{color:"var(--ink-500)"}}>Catálogo</a>
            <span>/</span>
            <span style={{color: deptColor, fontWeight:600}}>{dept}</span>
            <span>/</span>
            <span style={{color:"var(--ink-900)", fontWeight:500}}>{s.name}</span>
          </nav>
        </div>
      </section>

      {/* Color accent bar */}
      <div className="color-bar">
        <span style={{background:"#3953A4"}}></span>
        <span style={{background:"#FDC345"}}></span>
        <span style={{background:"#F04F4C"}}></span>
        <span style={{background:"#7EB9C7"}}></span>
      </div>

      {/* Audience tabs */}
      <div className="aud-tabs">
        <div className="container">
          <div className="aud-tabs-row">
            {audTabs.map(([k, l]) => (
              <button key={k} onClick={() => setAudience(k)}
                className={"aud-tab" + (audience === k ? " is-on" : "")}>
                {l}
              </button>
            ))}
            <div className="aud-hint">Cambia el contenido y los precios según quién consulta</div>
          </div>
        </div>
      </div>

      <section style={{padding: "48px 0 96px"}}>
        <div className="container">
          <div className="study-shell">
            {/* MAIN */}
            <div className="study-main">

              {/* 1. Identificación */}
              <div className="pill-row">
                {s.departamentos.map(d => (
                  <span key={d} className="badge" style={{background: `${DEPT_COLORS[d] || "#3953a4"}1A`, color: DEPT_COLORS[d] || "var(--brand-primary)"}}>{d}</span>
                ))}
                <span style={{fontFamily:"ui-monospace, monospace", fontSize:12, color:"var(--ink-500)", padding:"5px 0", marginLeft: 4}}>Código {s.code}</span>
                {s.resistencias && <span className="badge badge--yellow">Detección AMR</span>}
                {audience !== "paciente" && <span className="badge badge--gray">Vista {audience}</span>}
              </div>
              <h1 style={{marginTop: 18, fontSize: "clamp(34px, 4vw, 50px)", fontWeight: 800, letterSpacing:"-.025em"}}>{s.name}</h1>
              <p className="lead text-pretty" style={{marginTop: 18}}>{audDesc}</p>

              {/* Domicilio banner — copy varies by audience */}
              {s.servicio_domicilio && <DomicilioBanner audience={audience} accent={deptColor} onOpenLead={onOpenLead} />}

              {/* 2. Info grid 2x2 */}
              <div className="info-grid">
                <InfoCard
                  icon={s.tipo_muestra_icon || "drop"}
                  label="Tipo de muestra"
                  value={s.tipo_muestra}
                  accent={deptColor}
                />
                <InfoCard
                  containerColor={s.tipo_contenedor_color}
                  label="Tipo de contenedor"
                  value={s.tipo_contenedor}
                  accent={deptColor}
                />
                <InfoCard
                  icon="clock"
                  label="Tiempo de respuesta"
                  value={s.tiempo_entrega}
                  sub={s.disponibilidad}
                  accent={deptColor}
                />
                <InfoCard
                  icon="check"
                  label="Preparación previa"
                  value={s.preparacion_previa}
                  accent={deptColor}
                />
              </div>

              {/* 3. ¿Qué incluye? */}
              {s.incluye && s.incluye.length > 0 && (
                <section className="ds-block">
                  <h2 className="ds-h2">¿Qué incluye este estudio?</h2>
                  {s.incluye_intro && <p className="ds-p">{s.incluye_intro}</p>}
                  <div className="includes-grid">
                    {s.incluye.map((it, i) => (
                      <div className="include-item" key={i}>
                        <span className="check-circ" style={{background: deptColor}}><Icon name="check" size={12}/></span>
                        <span>{it}</span>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* 4. Resistencias antimicrobianas — solo si aplica */}
              {s.resistencias && audience !== "paciente" && (
                <section className="ds-block">
                  <div style={{display:"flex", alignItems:"baseline", gap:12, flexWrap:"wrap"}}>
                    <h2 className="ds-h2">Detección de resistencia antimicrobiana</h2>
                    <span className="badge badge--yellow" style={{marginBottom:4}}>Solo estudios moleculares</span>
                  </div>
                  <p className="ds-p">Identificación de genes asociados a los principales mecanismos de resistencia clínicamente relevantes.</p>
                  <div className="resist-grid">
                    {s.resistencias.map(r => (
                      <div className="resist-card" key={r.titulo}>
                        <div className="resist-head">
                          <span className="dot" style={{background: r.color}}></span>
                          <h4>{r.titulo}</h4>
                        </div>
                        <p className="resist-desc">{r.descripcion}</p>
                        <div className="gene-row">
                          {r.genes.map(g => <span key={g} className="gene">{g}</span>)}
                        </div>
                      </div>
                    ))}
                  </div>
                </section>
              )}
              {s.resistencias && audience === "paciente" && (
                <section className="ds-block">
                  <h2 className="ds-h2">Este estudio detecta resistencia a antibióticos</h2>
                  <p className="ds-p">
                    Q Sepsis no solo identifica al patógeno: también detecta genes de
                    resistencia que ayudan a tu médico a elegir el antibiótico correcto
                    desde el primer momento. La vista clínica detallada está disponible
                    para personal médico.
                  </p>
                  <button className="btn-link" onClick={() => setAudience("medico")}>Ver detalle clínico →</button>
                </section>
              )}

              {/* 5. Observaciones */}
              {s.observaciones && s.observaciones.length > 0 && (
                <section className="ds-block">
                  <h2 className="ds-h2">Observaciones generales</h2>
                  <div className="obs-card">
                    <ol>
                      {s.observaciones.map((o, i) => (
                        <li key={i}>
                          <span className="num">{i+1}</span>
                          <span>{o}</span>
                        </li>
                      ))}
                    </ol>
                  </div>
                </section>
              )}

              {/* ─────── BLOQUE DE AUDIENCIA ─────── */}

              {/* Paciente · ¿Qué esperar? */}
              {audience === "paciente" && aud.que_esperar && aud.que_esperar.length > 0 && (
                <section className="ds-block">
                  <div className="aud-eyebrow">Vista paciente</div>
                  <h2 className="ds-h2">¿Qué esperar?</h2>
                  <p className="ds-p">El paso a paso desde que llegas al laboratorio hasta que recibes tu resultado digital.</p>
                  <ol className="steps-list">
                    {aud.que_esperar.map((p, i) => (
                      <li key={i}>
                        <span className="step-num">{i+1}</span>
                        <span>{p}</span>
                      </li>
                    ))}
                  </ol>
                </section>
              )}

              {/* Médico / Clínica · Indicaciones clínicas */}
              {showIndicaciones && (
                <section className="ds-block">
                  <div className="aud-eyebrow">Vista clínica</div>
                  <h2 className="ds-h2">Indicaciones clínicas</h2>
                  <p className="ds-p">Escenarios en los que esta prueba aporta mayor valor diagnóstico.</p>
                  <div className="indic-grid">
                    {medAud.indicaciones.map((it, i) => (
                      <div key={i} className="indic-item">
                        <span className="check-circ" style={{background: deptColor}}><Icon name="check" size={12}/></span>
                        <span>{it}</span>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Médico / Clínica · Comparativo vs alternativa convencional */}
              {showComparativo && (
                <section className="ds-block">
                  <h2 className="ds-h2">Comparativo vs. {medAud.comparativo.alt_nombre}</h2>
                  <p className="ds-p">Diferencias operativas y clínicas frente al método convencional.</p>
                  <div className="comp-table">
                    <div className="comp-row comp-head">
                      <div></div>
                      <div className="comp-esta">
                        <span className="dot" style={{background: deptColor}}></span>
                        {medAud.comparativo.esta_nombre}
                      </div>
                      <div className="comp-alt">{medAud.comparativo.alt_nombre}</div>
                    </div>
                    {medAud.comparativo.rows.map((r, i) => (
                      <div className="comp-row" key={i}>
                        <div className="comp-feature">{r.feature}</div>
                        <div className="comp-esta-val">{r.esta}</div>
                        <div className="comp-alt-val">{r.alt}</div>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Médico / Clínica · Datos de desempeño */}
              {showDesempeno && (
                <section className="ds-block">
                  <h2 className="ds-h2">Datos de desempeño diagnóstico</h2>
                  <p className="ds-p">Resultados de validación clínica interna de InfectoLab.</p>
                  <div className="perf-grid">
                    {[
                      ["Sensibilidad",   medAud.desempeno.sensibilidad],
                      ["Especificidad",  medAud.desempeno.especificidad],
                      ["VPP",            medAud.desempeno.vpp],
                      ["VPN",            medAud.desempeno.vpn],
                      ["n",              medAud.desempeno.n],
                    ].filter(([,v]) => v).map(([k, v]) => (
                      <div className="perf-card" key={k}>
                        <div className="perf-val">{v}</div>
                        <div className="perf-lbl">{k}</div>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Clínica · Descripción adicional + Logística */}
              {audience === "clinica" && clinAud.descripcion_extra && (
                <section className="ds-block">
                  <div className="aud-eyebrow">Vista clínica / hospital</div>
                  <h2 className="ds-h2">Para tu institución</h2>
                  <p className="ds-p" style={{maxWidth: "70ch"}}>{clinAud.descripcion_extra}</p>
                </section>
              )}
              {showLogistica && (
                <section className="ds-block">
                  <h2 className="ds-h2">Logística operativa</h2>
                  <p className="ds-p">Parámetros que tu equipo necesita para integrar la prueba a su flujo.</p>
                  <div className="logi-grid">
                    {[
                      ["Estabilidad de muestra", clinAud.logistica.estabilidad, "clock"],
                      ["Tipo de contenedor",     clinAud.logistica.contenedor,  "drop"],
                      ["Frecuencia de recolección", clinAud.logistica.recoleccion, "calendar"],
                      ["Formato de reporte",     clinAud.logistica.formato_reporte, "shield"],
                      ["Días disponibles",       clinAud.logistica.dias_disponibles, "check"],
                    ].filter(([,v]) => v).map(([k, v, ic]) => (
                      <div className="logi-card" key={k}>
                        <div className="logi-ic" style={{background: `${deptColor}14`, color: deptColor}}>
                          <Icon name={ic} size={16}/>
                        </div>
                        <div>
                          <div className="logi-lbl">{k}</div>
                          <div className="logi-val">{v}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </section>
              )}

              {/* Empresa · Caso de uso + procesos */}
              {showEmpresaCaso && (
                <section className="ds-block">
                  <div className="aud-eyebrow">Vista empresa</div>
                  <h2 className="ds-h2">Caso de uso corporativo</h2>
                  <p className="ds-p" style={{maxWidth: "70ch"}}>{aud.caso_uso}</p>
                  {aud.procesos && aud.procesos.length > 0 && (
                    <>
                      <h3 className="ds-h3" style={{marginTop: 28}}>En qué procesos aplica</h3>
                      <div className="indic-grid">
                        {aud.procesos.map((p, i) => (
                          <div key={i} className="indic-item">
                            <span className="check-circ" style={{background: deptColor}}><Icon name="check" size={12}/></span>
                            <span>{p}</span>
                          </div>
                        ))}
                      </div>
                    </>
                  )}
                </section>
              )}

              {/* 6. Relacionados */}
              {related.length > 0 && (
                <section className="ds-block">
                  <h2 className="ds-h2">Estudios relacionados</h2>
                  <div className="related-grid">
                    {related.map(r => (
                      <button className="related-card" key={r.id} onClick={() => openStudy(r.id)}>
                        <span style={{position:"absolute", inset:0, top:0, height:3, background: r.color_carta}}></span>
                        <span style={{fontFamily:"ui-monospace, monospace", fontSize:11, color:"var(--ink-500)"}}>{r.code}</span>
                        <h4>{r.name}</h4>
                        <div className="r-bottom">
                          <span>{r.precio_particular > 0 ? `$${r.precio_particular.toLocaleString("es-MX")} MXN` : "Consultar"}</span>
                          <span style={{color:"var(--brand-primary)", fontWeight:600, fontSize:13}}>Ver →</span>
                        </div>
                      </button>
                    ))}
                  </div>
                </section>
              )}

              {/* 7. Artículo clínico — siempre al final */}
              {s.articulo_clinico && audience !== "paciente" && (
                <section className="ds-block">
                  <ClinicalArticle a={s.articulo_clinico} />
                </section>
              )}

            </div>

            {/* SIDEBAR */}
            <aside className="study-aside">
              <div className="aside-card">
                <div className="aside-dept" style={{color: deptColor}}>
                  <span className="dot" style={{background: deptColor}}></span>
                  {dept}
                </div>

                {/* Precio particular SIEMPRE visible */}
                <div className="aside-price-block">
                  <div className="aside-price-label">Precio particular</div>
                  {s.precio_particular > 0 ? (
                    <>
                      <div className="aside-price">
                        ${s.precio_particular.toLocaleString("es-MX", { minimumFractionDigits: s.precio_particular % 1 ? 2 : 0, maximumFractionDigits: 2 })}
                        <span>MXN</span>
                      </div>
                      <div className="aside-price-sub">Incluye IVA · sin costos ocultos</div>
                    </>
                  ) : (
                    <>
                      <div className="aside-price-text">Consultar precio</div>
                      <div className="aside-price-sub">Estudio especializado con cotización personalizada.</div>
                    </>
                  )}
                </div>

                {/* Bloque de precio según audiencia */}
                {audience === "medico" && (
                  <div className="aside-tier aside-tier--gray">
                    <Icon name="hospital" size={16}/>
                    <div>
                      <div className="aside-tier-lbl">Precio hospital</div>
                      <div className="aside-tier-val">Solicitar convenio →</div>
                    </div>
                  </div>
                )}
                {audience === "clinica" && (
                  <div className="aside-tier aside-tier--brand">
                    <Icon name="hospital" size={16}/>
                    <div>
                      <div className="aside-tier-lbl">Precio especial</div>
                      <div className="aside-tier-val">para clínicas con convenio activo</div>
                    </div>
                  </div>
                )}
                {audience === "empresa" && (
                  <div className="aside-tier aside-tier--yellow">
                    <Icon name="briefcase" size={16}/>
                    <div>
                      <div className="aside-tier-lbl">Precio por volumen</div>
                      <div className="aside-tier-val">contáctanos para tarifa corporativa</div>
                    </div>
                  </div>
                )}

                <ul className="aside-specs">
                  <li>
                    <Icon name={s.tipo_muestra_icon} size={16}/>
                    <span><b>{s.tipo_muestra}</b><small>Tipo de muestra</small></span>
                  </li>
                  <li>
                    <Icon name="clock" size={16}/>
                    <span><b>{s.tiempo_entrega}</b><small>{s.disponibilidad}</small></span>
                  </li>
                  <li>
                    <Icon name="check" size={16}/>
                    <span><b>{s.preparacion_previa}</b><small>Preparación previa</small></span>
                  </li>
                </ul>

                <AudienceActions audience={audience} onOpenLead={onOpenLead} navigate={navigate} />

                <div className="aside-trust">
                  <Icon name="shield" size={20}/>
                  <div>
                    <div style={{fontSize:13, fontWeight:600}}>Resultado validado</div>
                    <div style={{fontSize:12.5, color:"var(--ink-600)", marginTop:4}}>Doble validación con firma digital y liberación por QF certificado.</div>
                  </div>
                </div>
              </div>
            </aside>

          </div>
        </div>
      </section>

      <CtaBand navigate={navigate} onOpenLead={onOpenLead} />
    </main>
  );
}

/* ─────────── helpers ─────────── */
function InfoCard({ icon, containerColor, label, value, sub, accent }) {
  return (
    <div className="info-card">
      <div className="info-card-ic" style={{background: `${accent}14`, color: accent}}>
        {containerColor ? <TubeIcon color={containerColor} /> : <Icon name={icon || "drop"} size={20} />}
      </div>
      <div>
        <div className="info-card-lbl">{label}</div>
        <div className="info-card-val">{value}</div>
        {sub && <div className="info-card-sub">{sub}</div>}
      </div>
    </div>
  );
}

function TubeIcon({ color }) {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="8" y="2" width="8" height="20" rx="3" fill="#fff" stroke="currentColor" strokeWidth="1.6"/>
      <rect x="8" y="3" width="8" height="5" rx="1" fill={color}/>
      <rect x="9.5" y="10" width="5" height="8" rx="1.5" fill={color} opacity=".4"/>
    </svg>
  );
}

function ClinicalArticle({ a }) {
  // Backward-compatible: si viene con `parrafos` plano, lo envuelve en una sección
  const secciones = a.secciones || (a.parrafos ? [{ parrafos: a.parrafos }] : []);
  return (
    <article className="clinical-article">
      <header>
        <div className="ca-avatar">{a.avatar_initials || "MD"}</div>
        <div className="ca-author">
          <div className="ca-name">{a.autor}</div>
          <div className="ca-role">{a.rol}</div>
        </div>
        <span className="ca-badge">{a.badge || "Artículo clínico"}</span>
      </header>
      <div className="ca-body">
        {a.titulo && <h3 className="ca-title">{a.titulo}</h3>}

        {secciones.map((sec, i) => (
          <div className="ca-section" key={i}>
            {sec.label && <div className="ca-label">{sec.label}</div>}
            {sec.heading && <h4 className="ca-heading">{sec.heading}</h4>}
            {(sec.parrafos || []).map((p, j) => <p key={j}>{p}</p>)}

            {sec.callout && (
              <div className="ca-callout">
                <Icon name="pulse" size={18} />
                <span>{sec.callout}</span>
              </div>
            )}

            {sec.imagen && (
              <figure className="ca-figure">
                <img src={sec.imagen} alt={sec.heading || "Figura clínica"} loading="lazy" />
              </figure>
            )}

            {sec.bullets && sec.bullets.length > 0 && (
              <ul className="ca-bullets">
                {sec.bullets.map((b, j) => (
                  <li key={j}><span className="dot"></span>{b}</li>
                ))}
              </ul>
            )}

            {sec.lista_resistencias && sec.lista_resistencias.length > 0 && (
              <div className="ca-resist">
                {sec.lista_resistencias.map((r, j) => (
                  <div className="ca-resist-row" key={j}>
                    <span className="fam">{r.familia}</span>
                    <span className="genes">{r.genes}</span>
                  </div>
                ))}
              </div>
            )}

            {sec.referencia && (
              <div className="ca-section-ref">{sec.referencia}</div>
            )}
          </div>
        ))}

        {a.stats && a.stats.length > 0 && (
          <div className="ca-stats">
            {a.stats.map((st, i) => (
              <div key={i}><b>{st.num}</b><span>{st.label}</span></div>
            ))}
          </div>
        )}
        {a.referencias && a.referencias.length > 0 && (
          <div className="ca-refs">
            <div className="ca-refs-lbl">Referencias</div>
            <ol>
              {a.referencias.map((r, i) => <li key={i}>{r}</li>)}
            </ol>
          </div>
        )}
      </div>
    </article>
  );
}

/* ─────── Audience-specific helpers ─────── */
function DomicilioBanner({ audience, accent, onOpenLead }) {
  const copy = {
    paciente: {
      title: "¿No puedes venir? Te vamos a tu domicilio.",
      sub: "Solo agéndalo. Sin convenio, sin trámite — directo a tu casa.",
      cta: "Agendar toma a domicilio",
    },
    medico: {
      title: "Servicio de toma en consultorio disponible con convenio.",
      sub: "¿Aún no tienes convenio? Habla con nuestra área de ventas para gestionarlo.",
      cta: "Solicitar convenio",
    },
    clinica: {
      title: "Recolección en tus instalaciones con convenio activo.",
      sub: "Consulta ruta y frecuencia con nuestra área de ventas.",
      cta: "Hablar con ventas",
    },
    empresa: {
      title: "Toma masiva en tus instalaciones — sin que tus empleados salgan.",
      sub: "Disponible mediante orden de compra o contrato de servicio corporativo.",
      cta: "Solicitar cotización",
    },
  }[audience] || {};
  if (!copy.title) return null;
  return (
    <div className="domicilio-banner">
      <div className="domicilio-ic" style={{background: `${accent}14`, color: accent}}>
        <Icon name="home" size={22}/>
      </div>
      <div className="domicilio-body">
        <div className="domicilio-tag">Servicio a domicilio · {audience}</div>
        <div className="domicilio-title">{copy.title}</div>
        <div className="domicilio-sub">{copy.sub}</div>
      </div>
      <button className="btn btn-secondary btn-sm" onClick={onOpenLead}>{copy.cta}</button>
    </div>
  );
}

function AudienceActions({ audience, onOpenLead, navigate }) {
  const set = {
    paciente: {
      primary:   { label: "Encuentra tu sucursal más cercana", onClick: () => navigate("contacto") },
      secondary: { label: "Contáctanos por WhatsApp",          onClick: onOpenLead, icon: "whatsapp" },
    },
    medico: {
      primary:   { label: "Generar orden de laboratorio",      onClick: onOpenLead, icon: "arrow", note: "Acceso InfectoApp" },
      secondary: { label: "Solicitar convenio",                onClick: onOpenLead },
    },
    clinica: {
      primary:   { label: "Solicitar convenio",                onClick: onOpenLead, icon: "arrow" },
      secondary: { label: "Agendar cita con área de ventas",   onClick: () => navigate("contacto") },
    },
    empresa: {
      primary:   { label: "Solicitar cotización corporativa",  onClick: onOpenLead, icon: "arrow" },
      secondary: { label: "Contáctanos por WhatsApp",          onClick: onOpenLead, icon: "whatsapp" },
    },
  }[audience] || {};

  return (
    <div className="aside-actions">
      {set.primary && (
        <button className="btn btn-primary" onClick={set.primary.onClick}>
          {set.primary.label}
          {set.primary.icon && <Icon name={set.primary.icon} size={15}/>}
        </button>
      )}
      {set.primary?.note && <div className="aside-action-note">{set.primary.note}</div>}
      {set.secondary && (
        <button className="btn btn-ghost" onClick={set.secondary.onClick}>
          {set.secondary.icon && <Icon name={set.secondary.icon} size={15}/>}
          {set.secondary.label}
        </button>
      )}
    </div>
  );
}

Object.assign(window, { CatalogPage, StudyDetailPage, STUDIES, CATEGORIES, DEPT_COLORS });
