<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Epicrisis - {{ nombre_paciente }}</title>
    <link rel="stylesheet" href="/static/css/app-toast.css">
    <style>
      * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; }
      body { background: #f5f5f5; color: #333; }
      .header { background: linear-gradient(135deg, #1a3a6a 0%, #2a5298 100%); color: white; padding: 1.2rem 2rem; display: flex; align-items: center; justify-content: space-between; }
      .brand { display: flex; align-items: center; gap: 12px; }
      .brand img { height: 42px; }
      .title { font-size: 1.4rem; font-weight: bold; }
      .actions a, .actions button { background: #ffffff22; color: white; border: 1px solid #ffffff44; padding: 8px 12px; border-radius: 6px; margin-left: 8px; text-decoration: none; cursor: pointer; }
      .actions a:hover, .actions button:hover { background: #ffffff33; }

      .container { max-width: 1200px; margin: 20px auto; padding: 0 16px; }
      .card { background: white; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); padding: 25px; margin-bottom: 20px; }
      .card h2 { color: #2a5298; margin-bottom: 15px; border-bottom: 3px solid #2a5298; padding-bottom: 10px; font-size: 1.5em; }
      .card h3 { color: #1e3c72; margin: 20px 0 12px 0; font-size: 1.3em; border-left: 4px solid #2a5298; padding-left: 12px; }
      .card h4 { color: #2a5298; margin: 15px 0 10px 0; font-size: 1.1em; }

      .section-header { background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%); color: white; padding: 14px 20px; margin: 0 -25px 20px -25px; font-size: 1.25em; font-weight: bold; }
      
      .documento-info { background: #f8f9fa; border-left: 4px solid #2a5298; padding: 15px; margin-bottom: 20px; border-radius: 0 4px 4px 0; }
      
      .resumen-texto { background: #f8f9fa; padding: 18px; border-radius: 6px; line-height: 1.8; margin: 15px 0; border-left: 4px solid #007BFF; }
      
      .hallazgos-section { background: #e8f4fd; padding: 18px; border-radius: 6px; margin: 15px 0; border-left: 4px solid #0d6efd; }
      .hallazgos-section h4 { color: #0d6efd; margin-top: 0; margin-bottom: 10px; }
      .hallazgos-section p { line-height: 1.7; text-align: justify; margin-bottom: 12px; }


      table { border-collapse: collapse; width: 100%; margin: 15px 0; }
      th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
      th { background: #2a5298; color: white; font-weight: 600; }
      tr:nth-child(even) { background: #f8f9fa; }
      .muted { color: #666; font-size: 0.95em; }
      
      .badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.85em; font-weight: 600; margin: 0 4px; }
      .badge-pre { background: #d1ecf1; color: #0c5460; }
      .badge-post { background: #d4edda; color: #155724; }
      
      .btn-group { display: flex; gap: 10px; margin-top: 15px; }
      .btn { background: #2a5298; color: white; text-decoration: none; padding: 12px 20px; border-radius: 6px; display: inline-block; border: none; cursor: pointer; font-size: 0.95em; transition: all 0.3s; font-weight: 600; }
      .btn:hover { background: #1e3c72; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
      .btn-secondary { background: #6c757d; }
      .btn-secondary:hover { background: #545b62; }
      .btn-success { background: #28a745; }
      .btn-success:hover { background: #218838; }
      .cache-badge { display: inline-block; margin-left: 8px; padding: 4px 10px; border-radius: 12px; font-size: 0.8em; background: #e3f2fd; color: #0d47a1; }
      .selection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
      .selection-box { background: #f8fafc; border: 1px solid #dbe3ef; border-radius: 8px; padding: 14px; }
      .selection-box h4 { margin: 0 0 10px 0; }
      .selection-list { max-height: 260px; overflow-y: auto; border: 1px solid #e5e7eb; background: white; border-radius: 6px; padding: 8px; }
      .selection-item { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; font-size: 0.92em; }
      .selection-extra { width: 100%; min-height: 90px; margin-top: 10px; padding: 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.9em; }
      @media (max-width: 960px) {
        .selection-grid { grid-template-columns: 1fr; }
      }
    </style>
</head>
<body>
  <header class="header">
    <div class="brand">
      <a href="/dashboard"><img src="/static/logo.png" alt="Logo" /></a>
      <div>
        <div class="title">Epicrisis IA</div>
        <div class="muted">Resumen Clínico Integral</div>
      </div>
    </div>
    <div class="actions">
      <a href="/dashboard">Volver</a>
      {% if regen_url %}
      <button
        type="button"
        id="regenerar_epicrisis_btn"
        data-regen-url="{{ regen_url }}"
        data-case-key="{{ regen_case_key or '' }}"
        onclick="regenerarEpicrisis()"
      >Regenerar epicrisis</button>
      {% endif %}
      <button id="generar_pdf_btn" onclick="generarPdfEpicrisis()">Generar PDF</button>
    </div>
  </header>

  <div class="container">
    <!-- Información del Paciente -->
    <div class="card">
      <h2>📋 Epicrisis: {{ nombre_paciente }}</h2>
      {% if epicrisis_cached %}<span class="cache-badge">Cargada desde cache</span>{% endif %}
      <div class="documento-info">
        <p><strong>Paciente:</strong> {{ nombre_paciente }}</p>
        <p><strong>Usuario:</strong> {{ user.username if user else '---' }}</p>
        <p><strong>Historia clínica:</strong> {{ historia.nombre_archivo if historia else 'No disponible' }} — {{ historia.fecha_analisis if historia else '-' }}</p>
        <p><strong>Documento quirúrgico:</strong> {{ quirurgico.nombre_archivo if quirurgico else 'No disponible' }} — {{ quirurgico.fecha_analisis if quirurgico else '-' }}</p>
        <p><strong>Factura:</strong> {{ factura.nombre_archivo if factura else 'No disponible' }} — {{ factura.fecha_analisis if factura else '-' }}</p>
      </div>
    </div>
    <div class="card" id="seleccion_pdf_card">
      <div class="section-header">Selección de Elementos para PDF</div>
      <p class="muted" style="margin-bottom: 12px;">Desmarca los elementos que no deban salir en la epicrisis y agrega nuevos elementos en los campos de texto.</p>
      <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap;">
        <span id="agente_qx_status" class="muted">Analizando hallazgos quirúrgicos automáticamente...</span>
      </div>
      <div class="selection-grid">
        <div class="selection-box">
          <h4>Diagnósticos</h4>
          <div id="diagnosticos_list" class="selection-list"></div>
          <textarea id="diagnosticos_extra" class="selection-extra" placeholder="Ejemplo: S92.0 - Fractura del dedo(s) del pie&#10;Uno por linea"></textarea>
        </div>
        <div class="selection-box">
          <h4>Procedimientos</h4>
          <div id="procedimientos_list" class="selection-list"></div>
          <textarea id="procedimientos_extra" class="selection-extra" placeholder="Ejemplo: 791201 - Reducción cerrada de fractura&#10;Uno por linea"></textarea>
        </div>
        <div class="selection-box">
          <h4>Medicamentos</h4>
          <div id="medicamentos_list" class="selection-list"></div>
          <textarea id="medicamentos_extra" class="selection-extra" placeholder="Formato recomendado: CÓDIGO - CANTIDAD - MEDICAMENTO - DOSIS&#10;Ejemplo: 5656 - 2 ampollas - Dipirona - 1 g IV c/8h"></textarea>
        </div>
      </div>
      <div class="selection-grid" style="grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px;">
        <div class="selection-box">
          <h4>Ampliación medica: Hallazgos Quirúrgicos</h4>
          <textarea id="hallazgos_extra" class="selection-extra" placeholder="Agrega aquí observaciones adicionales para hallazgos quirúrgicos que deben salir en el PDF."></textarea>
        </div>
        <div class="selection-box">
          <h4>Ampliación medica: Descripción del Procedimiento</h4>
          <textarea id="descripcion_procedimiento_extra" class="selection-extra" placeholder="Agrega aquí detalles adicionales del procedimiento para el PDF final."></textarea>
        </div>
      </div>
    </div>
      <!-- RESUMEN DE HISTORIA CLÍNICA -->
      <div class="card">
        <div class="section-header">📝 Resumen de Historia Clínica</div>
        
        {% if metadatos_hc %}
          <!-- Metadatos del Paciente -->
          <div style="background: #e8f4fd; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #0d6efd;">
            <h4 style="margin: 0 0 15px 0; color: #0d6efd; font-size: 1.2em; border-bottom: 2px solid #0d6efd; padding-bottom: 8px;">Información del Paciente</h4>
            
            <table style="background: white; margin: 0;">
              <tbody>
                {% if metadatos_hc.nombre_paciente %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Nombre del paciente</td>
                  <td style="font-size: 1.05em; font-weight: 600; color: #0d6efd;">{{ metadatos_hc.nombre_paciente }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.datos_identificacion_paciente %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Identificación</td>
                  <td>{{ metadatos_hc.datos_identificacion_paciente }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.sexo %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Sexo</td>
                  <td>{{ metadatos_hc.sexo }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.edad %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Edad</td>
                  <td>{{ metadatos_hc.edad }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.fecha_nacimiento %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Fecha de nacimiento</td>
                  <td>{{ metadatos_hc.fecha_nacimiento }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.prestador_servicio %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Prestador de servicio</td>
                  <td>{{ metadatos_hc.prestador_servicio }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.caso %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">No. de Caso</td>
                  <td><strong>{{ metadatos_hc.caso }}</strong></td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.fecha_ingreso %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Fecha de ingreso</td>
                  <td>{{ metadatos_hc.fecha_ingreso }}</td>
                </tr>
                {% endif %}
                
                {% if metadatos_hc.motivo_consulta %}
                <tr>
                  <td style="width: 35%; font-weight: 600; background: #f1f8ff;">Motivo de consulta</td>
                  <td><strong>{{ metadatos_hc.motivo_consulta }}</strong></td>
                </tr>
                {% endif %}
              </tbody>
            </table>
          </div>
          
          <!-- Resumen Clínico -->
          {% if metadatos_hc.resumen %}
          <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 5px solid #007BFF; margin-bottom: 20px;">
            <h4 style="margin: 0 0 12px 0; color: #2a5298; font-size: 1.1em;">📄 Resumen Clínico</h4>
            <p style="margin: 0; line-height: 1.8; text-align: justify; color: #333;">{{ metadatos_hc.resumen }}</p>
          </div>
          {% endif %}
          
          <!-- Procedimientos de Historia Clínica -->
          {% if procedimientos_hc and procedimientos_hc|length > 0 %}
          <div style="background: #e7f3ff; padding: 20px; border-radius: 8px; border-left: 5px solid #0066cc; margin-bottom: 20px;">
            <h4 style="margin: 0 0 15px 0; color: #0066cc; font-size: 1.1em;">🔧 Procedimientos Realizados (Historia Clínica)</h4>
            <ol style="margin: 0; padding-left: 25px; line-height: 2;">
              {% for proc in procedimientos_hc %}
                <li style="margin-bottom: 8px; color: #333;">{{ proc }}</li>
              {% endfor %}
            </ol>
          </div>
          {% endif %}
          
          <!-- Medicamentos de Historia Clínica -->
          {% if medicamentos_hc_display and medicamentos_hc_display|length > 0 %}
          <div style="background: #f0f9ff; padding: 20px; border-radius: 8px; border-left: 5px solid #06b6d4;">
            <h4 style="margin: 0 0 15px 0; color: #06b6d4; font-size: 1.1em;">💊 Medicamentos Administrados</h4>
            <ol style="margin: 0; padding-left: 25px; line-height: 2;">
              {% for med in medicamentos_hc_display %}
                <li style="margin-bottom: 8px; color: #333; font-family: 'Courier New', monospace; font-size: 0.95em;">{{ med }}</li>
              {% endfor %}
            </ol>
          </div>
          {% endif %}
          
        {% else %}
          <p class="muted">⚠️ No se encontró historia clínica para este paciente o no se pudieron extraer los metadatos.</p>
        {% endif %}
      </div>

    <!-- TABLAS: CIE-10 HISTORIA + CIE-10 QUIRÚRGICO -->
    <div class="card">
      <div class="section-header">📊 Codificación CIE-10</div>
      
      <!-- CIE-10 de Historia Clínica -->
      <h3>1. Diagnósticos - Historia Clínica</h3>
      {% set cie_historia = historia.codigos_cie10 if historia and historia.codigos_cie10 else [] %}
      {% if cie_historia and cie_historia|length > 0 %}
        <table>
          <thead>
            <tr>
              <th style="width: 65%;">Diagnóstico</th>
              <th style="width: 35%;">Código CIE-10</th>
            </tr>
          </thead>
          <tbody>
            {% for item in cie_historia %}
              <tr>
                <td>{{ item.diagnostico }}</td>
                <td><strong>{{ item.codigo_asignado }}</strong></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p class="muted">⚠️ No se encontraron códigos CIE-10 en la historia clínica.</p>
      {% endif %}

      <!-- CIE-10 de Documento Quirúrgico -->
      <h3 style="margin-top: 25px;">2. Diagnósticos Prequirúrgicos y Postquirúrgicos</h3>
      {% set cie_qx = quirurgico.codigos_cie10 if quirurgico and quirurgico.codigos_cie10 else [] %}
      {% if cie_qx and cie_qx|length > 0 %}
        <table>
          <thead>
            <tr>
              <th style="width: 50%;">Diagnóstico Original</th>
              <th style="width: 10%;">Tipo</th>
              <th style="width: 15%;">Código CIE-10</th>
              <th style="width: 25%;">Descripción CIE-10</th>
            </tr>
          </thead>
          <tbody>
            {% for item in cie_qx %}
              <tr>
                <td>{{ item.diagnostico }}</td>
                <td style="text-align: center;">
                  {% if 'POP' in item.diagnostico or 'POST' in item.diagnostico.upper() %}
                    <span class="badge badge-post">POST</span>
                  {% else %}
                    <span class="badge badge-pre">PRE</span>
                  {% endif %}
                </td>
                <td><strong>{{ item.codigo }}</strong></td>
                <td style="font-size: 0.9em;">{{ item.descripcion }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p class="muted">⚠️ No se encontraron códigos CIE-10 en el documento quirúrgico.</p>
      {% endif %}
    </div>

          <!-- HALLAZGOS QUIRÚRGICOS (Solo secciones 5 y 6) -->
      <div class="card">
        <div class="section-header">🔬 Hallazgos y Descripción Quirúrgica</div>
        
        {% if hallazgos_quirurgicos or descripcion_procedimiento %}
          <!-- Sección 5: HALLAZGOS QUIRÚRGICOS -->
          {% if hallazgos_quirurgicos %}
          <div class="hallazgos-section">
            <h4>5. HALLAZGOS QUIRÚRGICOS</h4>
            <p>{{ hallazgos_quirurgicos | safe }}</p>
          </div>
          {% endif %}
          
          <!-- Sección 6: DESCRIPCIÓN DEL PROCEDIMIENTO -->
          {% if descripcion_procedimiento %}
          <div class="hallazgos-section" style="background: #f0f8f0; border-left-color: #28a745;">
            <h4 style="color: #28a745;">6. DESCRIPCIÓN DEL PROCEDIMIENTO</h4>
            <p>{{ descripcion_procedimiento | safe }}</p>
          </div>
          {% endif %}
        {% else %}
          <p class="muted">⚠️ No se encontraron hallazgos quirúrgicos o el documento no está estructurado correctamente.</p>
        {% endif %}

      <!-- Tabla CUPS -->
      <h3 style="margin-top: 25px;">Códigos CUPS Asignados</h3>
      {% set cups = quirurgico.codigos_cups if quirurgico and quirurgico.codigos_cups else [] %}
      {% if cups and cups|length > 0 %}
        <table>
          <thead>
            <tr>
              <th style="width: 65%;">Procedimiento</th>
              <th style="width: 35%;">Código CUPS</th>
            </tr>
          </thead>
          <tbody>
            {% for item in cups %}
              <tr>
                <td>{{ item.procedimiento }}</td>
                <td><strong>{{ item.codigo_cups }}</strong></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p class="muted">⚠️ No se encontraron códigos CUPS.</p>
      {% endif %}
    </div>

    <!-- Mostrar información de factura si existe -->
    {% if factura %}
    <div class="card">
      <div class="section-header">💰 Información de Factura</div>
      <div style="background: #f8f9fa; padding: 15px; border-radius: 6px; border-left: 4px solid #6c757d;">
        <div id="factura_content">{{ factura.analisis_html|safe }}</div>
        <div style="background: #fef3c7; padding: 15px; border-radius: 8px; margin-top: 15px; border-left: 5px solid #f59e0b;">
          <p style="margin: 0; color: #78350f; font-size: 0.95em;">
            <strong>Procesamiento Inteligente:</strong> Los procedimientos de factura se procesan automáticamente al generar la epicrisis.
          </p>
        </div></div>
    </div>
    {% endif %}

    <!-- NUEVA FEATURE: CÓDIGOS GENERADOS DESDE SOAT CON GEMINI -->
    {% if not codigos_desde_soat or codigos_desde_soat|length == 0 %}
    <div class="card" id="form_codigos_soat">
      <div class="section-header" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
        🤖 Codificación Inteligente desde SOAT
      </div>
      
      <div style="background: #fef3c7; padding: 20px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #f59e0b;">
        <h4 style="margin: 0 0 12px 0; color: #92400e;">📝 Ingresar Códigos SOAT</h4>
        <p style="margin: 0 0 15px 0; color: #78350f; font-size: 0.95em;">
          No se detectaron códigos SOAT automáticamente. Puedes ingresar descripciones de procedimientos SOAT para generar códigos CIE-10 y CUPS con IA:
        </p>
        
        <form id="form_generar_codigos">
          <div id="codigos_container" style="margin-bottom: 15px;">
            <div class="codigo-input-group" style="display: flex; gap: 10px; margin-bottom: 10px;">
              <input type="text" name="codigo_soat" placeholder="Código SOAT (ej: 90201)" style="flex: 0 0 120px; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
              <input type="text" name="descripcion" placeholder="Descripción del procedimiento" style="flex: 1; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
              <button type="button" onclick="eliminarCodigo(this)" style="padding: 8px; background: #ef4444; color: white; border: none; border-radius: 4px; cursor: pointer;">✕</button>
            </div>
          </div>
          <div style="display: flex; gap: 10px;">
            <button type="button" onclick="agregarCodigo()" class="btn btn-secondary">+ Agregar</button>
            <button type="submit" class="btn">🤖 Generar</button>
          </div>
        </form>
      </div>
    </div>
    {% endif %}
    
    {% if codigos_desde_soat and codigos_desde_soat|length > 0 %}
    <div class="card">
      <div class="section-header" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
        🤖 Codificación Inteligente desde SOAT
      </div>
      
      <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #8b5cf6;">
        <p style="margin: 0; color: #4b5563; font-size: 0.95em;">
          <strong>ℹ️ Información:</strong> Estos códigos CIE-10 y CUPS han sido generados automáticamente por IA a partir de las descripciones SOAT identificadas en los documentos del paciente. Se recomienda validar con criterio clínico.
        </p>
      </div>

      {% for item in codigos_desde_soat %}
      <div style="background: white; border: 2px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
        
        <!-- Encabezado del código SOAT -->
        <div style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; padding: 15px; border-radius: 8px; margin: -20px -20px 20px -20px;">
          <h4 style="margin: 0; font-size: 1.15em; color: white;">
            {% if item.codigo_soat %}
            📋 Código SOAT: <span style="font-weight: 700; font-size: 1.1em;">{{ item.codigo_soat }}</span>
            {% else %}
            📋 Descripción SOAT
            {% endif %}
          </h4>
          <p style="margin: 8px 0 0 0; font-size: 0.95em; opacity: 0.95;">{{ item.descripcion }}</p>
        </div>

        <!-- CIE-10 PRINCIPAL -->
        {% if item.cie10_principal %}
        <div style="background: #dbeafe; border-left: 5px solid #3b82f6; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
          <h5 style="margin: 0 0 12px 0; color: #1e40af; font-size: 1.1em; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 1.3em;">🏥</span> CIE-10 PRINCIPAL
          </h5>
          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #93c5fd;">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
              <span style="background: #3b82f6; color: white; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 1.05em;">
                {{ item.cie10_principal.codigo }}
              </span>
              <span style="font-weight: 600; color: #1e40af; flex: 1;">{{ item.cie10_principal.descripcion }}</span>
            </div>
            <p style="margin: 10px 0 0 0; padding: 10px; background: #f0f9ff; border-radius: 4px; color: #374151; line-height: 1.6; font-size: 0.9em;">
              <strong style="color: #1e40af;">Justificación:</strong> {{ item.cie10_principal.justificacion }}
            </p>
          </div>
        </div>
        {% endif %}

        <!-- CIE-10 SECUNDARIOS -->
        {% if item.cie10_secundarios and item.cie10_secundarios|length > 0 %}
        <div style="background: #e0e7ff; border-left: 5px solid #6366f1; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
          <h5 style="margin: 0 0 12px 0; color: #4338ca; font-size: 1em; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 1.2em;">📋</span> CIE-10 SECUNDARIOS ({{ item.cie10_secundarios|length }})
          </h5>
          {% for cie10 in item.cie10_secundarios %}
          <div style="background: white; padding: 12px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #c7d2fe;">
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
              <span style="background: #6366f1; color: white; padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 0.9em;">
                {{ cie10.codigo }}
              </span>
              <span style="color: #4338ca; font-weight: 500; font-size: 0.9em;">{{ cie10.descripcion }}</span>
            </div>
            <p style="margin: 6px 0 0 0; padding-left: 12px; color: #6b7280; font-size: 0.85em; line-height: 1.5;">
              <em>{{ cie10.justificacion }}</em>
            </p>
          </div>
          {% endfor %}
        </div>
        {% endif %}

        <!-- CUPS PRINCIPAL -->
        {% if item.cups_principal %}
        <div style="background: #d1fae5; border-left: 5px solid #10b981; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
          <h5 style="margin: 0 0 12px 0; color: #065f46; font-size: 1.1em; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 1.3em;">🔧</span> CUPS PRINCIPAL
          </h5>
          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #6ee7b7;">
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
              <span style="background: #10b981; color: white; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 1.05em; letter-spacing: 1px;">
                {{ item.cups_principal.codigo }}
              </span>
              <span style="font-weight: 600; color: #065f46; flex: 1; font-size: 0.95em;">{{ item.cups_principal.descripcion }}</span>
            </div>
            <p style="margin: 10px 0 0 0; padding: 10px; background: #ecfdf5; border-radius: 4px; color: #374151; line-height: 1.6; font-size: 0.9em;">
              <strong style="color: #065f46;">Justificación:</strong> {{ item.cups_principal.justificacion }}
            </p>
          </div>
        </div>
        {% endif %}

        <!-- CUPS ALTERNATIVOS -->
        {% if item.cups_alternativos and item.cups_alternativos|length > 0 %}
        <div style="background: #d1fae5; border-left: 5px solid #34d399; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
          <h5 style="margin: 0 0 12px 0; color: #047857; font-size: 1em; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 1.2em;">⚙️</span> CUPS ALTERNATIVOS ({{ item.cups_alternativos|length }})
          </h5>
          {% for cups in item.cups_alternativos %}
          <div style="background: white; padding: 12px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #a7f3d0;">
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
              <span style="background: #34d399; color: white; padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 0.9em; letter-spacing: 0.5px;">
                {{ cups.codigo }}
              </span>
              <span style="color: #047857; font-weight: 500; font-size: 0.9em;">{{ cups.descripcion }}</span>
            </div>
            <p style="margin: 6px 0 0 0; padding-left: 12px; color: #6b7280; font-size: 0.85em; line-height: 1.5;">
              <em>{{ cups.justificacion }}</em>
            </p>
          </div>
          {% endfor %}
        </div>
        {% endif %}

        <!-- ANÁLISIS CLÍNICO -->
        {% if item.analisis_clinico %}
        <div style="background: #fef3c7; border-left: 5px solid #f59e0b; padding: 18px; border-radius: 8px;">
          <h5 style="margin: 0 0 12px 0; color: #92400e; font-size: 1em; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 1.2em;">📊</span> ANÁLISIS CLÍNICO DETALLADO
          </h5>
          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #fcd34d; max-height: 400px; overflow-y: auto;">
            <pre style="white-space: pre-wrap; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 0.9em; line-height: 1.7; margin: 0; color: #374151;">{{ item.analisis_clinico }}</pre>
          </div>
        </div>
        {% endif %}

      </div>
      {% endfor %}

      <!-- Resumen estadístico -->
      <div style="background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); padding: 20px; border-radius: 8px; margin-top: 20px; border: 2px solid #d1d5db;">
        <h5 style="margin: 0 0 15px 0; color: #374151; font-size: 1.1em; display: flex; align-items: center; gap: 8px;">
          <span style="font-size: 1.3em;">📈</span> Resumen de Codificación
        </h5>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
          <div style="background: white; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #8b5cf6;">
            <div style="font-size: 2em; font-weight: 700; color: #8b5cf6;">{{ codigos_desde_soat|length }}</div>
            <div style="color: #6b7280; font-size: 0.9em; margin-top: 5px;">Códigos SOAT Procesados</div>
          </div>
          <div style="background: white; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #3b82f6;">
            <div style="font-size: 2em; font-weight: 700; color: #3b82f6;">
              {% set total_cie10 = namespace(count=0) %}
              {% for item in codigos_desde_soat %}
                {% if item.cie10_principal %}{% set total_cie10.count = total_cie10.count + 1 %}{% endif %}
                {% set total_cie10.count = total_cie10.count + (item.cie10_secundarios|length if item.cie10_secundarios else 0) %}
              {% endfor %}
              {{ total_cie10.count }}
            </div>
            <div style="color: #6b7280; font-size: 0.9em; margin-top: 5px;">Códigos CIE-10 Generados</div>
          </div>
          <div style="background: white; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #10b981;">
            <div style="font-size: 2em; font-weight: 700; color: #10b981;">
              {% set total_cups = namespace(count=0) %}
              {% for item in codigos_desde_soat %}
                {% if item.cups_principal %}{% set total_cups.count = total_cups.count + 1 %}{% endif %}
                {% set total_cups.count = total_cups.count + (item.cups_alternativos|length if item.cups_alternativos else 0) %}
              {% endfor %}
              {{ total_cups.count }}
            </div>
            <div style="color: #6b7280; font-size: 0.9em; margin-top: 5px;">Códigos CUPS Generados</div>
          </div>
          
        </div>
      </div>

    </div>
    {% endif %}

    <!-- ANÁLISIS DE POSIBLES GLOSAS -->
    {% if glosa_analisis %}
    <div class="card">
      <div class="section-header">⚠️ Análisis de Posibles Glosas</div>
      
      <div style="background: #fff3cd; padding: 20px; border-radius: 8px; border-left: 5px solid #ffc107;">
        <p style="margin-bottom: 15px; color: #856404; font-size: 0.95em;">
          <strong>📌 Nota:</strong> Este análisis automático identifica posibles riesgos de glosa basado en la coherencia entre diagnósticos, procedimientos y hallazgos quirúrgicos.
        </p>
        
        <div style="background: white; padding: 18px; border-radius: 6px; border: 1px solid #ffc107;">
          {{ glosa_analisis | safe }}
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <script src="/static/js/auth-guard.js"></script>
  <script src="/static/js/app-toast.js"></script>
  <script>
    const EPICRISIS_PDF_DATA = {
      nombrePaciente: {{ (metadatos_hc.nombre_paciente if metadatos_hc and metadatos_hc.nombre_paciente else nombre_paciente)|tojson }},
      metadatos: {{ (metadatos_hc if metadatos_hc else {})|tojson }},
      resumen: {{ (metadatos_hc.resumen if metadatos_hc and metadatos_hc.resumen else "")|tojson }},
      cieHistoria: {{ (historia.codigos_cie10 if historia and historia.codigos_cie10 else [])|tojson }},
      cieQx: {{ (quirurgico.codigos_cie10 if quirurgico and quirurgico.codigos_cie10 else [])|tojson }},
      hallazgos: {{ (hallazgos_quirurgicos if hallazgos_quirurgicos else "")|tojson }},
      descripcionProcedimiento: {{ (descripcion_procedimiento if descripcion_procedimiento else "")|tojson }},
      cups: {{ (quirurgico.codigos_cups if quirurgico and quirurgico.codigos_cups else [])|tojson }},
      procedimientosHC: {{ (procedimientos_hc if procedimientos_hc else [])|tojson }},
      medicamentos: {{ (medicamentos_hc if medicamentos_hc else [])|tojson }},
      codigosDesdeSoat: {{ (codigos_desde_soat if codigos_desde_soat else [])|tojson }},
      facturaJson: {{ (factura.factura_json if factura and factura.factura_json else {})|tojson }},
      historiaId: {{ (historia._id if historia and historia._id else "")|tojson }},
      quirurgicoId: {{ (quirurgico._id if quirurgico and quirurgico._id else "")|tojson }},
      facturaId: {{ (factura._id if factura and factura._id else "")|tojson }}
    };
    const TOAST_PROCESS_IDS = {
      pdf: null,
      qx: null,
      soat: null,
    };
    const TOAST_ACTIONS = {
      verHistorial: () => globalThis.location.href = "/ver_historia",
      reintentarPdf: () => generarPdfEpicrisis(),
      reintentarQx: () => ejecutarAgenteHallazgosQx(),
    };

    function escapeHtml(value) {
      return String(value ?? "")
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
    }

    function stripHtml(value) {
      const node = document.createElement("div");
      node.innerHTML = value || "";
      return (node.textContent || node.innerText || "").trim();
    }

    function extraerCie10Inline(texto) {
      const value = String(texto || "").trim();
      const match = value.match(/^\s*([A-TV-Z][0-9]{2}(?:\.[0-9A-Z]{1,6}|[0-9A-Z]{1,4})?)\s*(?:[-:]|\s)\s*(.+)$/i);
      if (!match) {
        return { codigo: "", descripcion: "" };
      }
      return { codigo: match[1].toUpperCase(), descripcion: match[2].trim() };
    }

    function normalizarCodigoCie10(codigo) {
      const value = String(codigo || "").toUpperCase().replace(/\s+/g, "");
      const match = value.match(/^([A-TV-Z][0-9]{2})(?:\.?([0-9A-Z]{1,6}))?$/);
      if (!match) return "";
      const base = match[1];
      const resto = match[2] || "";
      if (!resto) return base;
      const digito = resto.match(/[0-9]/);
      return `${base}.${digito ? digito[0] : resto[0]}`;
    }

    function limpiarTextoDiagnostico(texto) {
      return String(texto || "").replace(/\s+/g, " ").trim();
    }

    function normalizarDiagnosticoSinCodigo(diagnostico) {
      const limpio = limpiarTextoDiagnostico(diagnostico);
      if (!limpio) return "";
      const inline = extraerCie10Inline(limpio);
      if (inline.codigo) {
        return limpiarTextoDiagnostico(inline.descripcion);
      }
      return limpio;
    }

    function combinarDescripcionYDiagnostico(descripcion, diagnostico) {
      const descripcionLimpia = limpiarTextoDiagnostico(descripcion);
      const diagnosticoLimpio = normalizarDiagnosticoSinCodigo(diagnostico);

      if (descripcionLimpia && diagnosticoLimpio) {
        if (descripcionLimpia.toLowerCase() === diagnosticoLimpio.toLowerCase()) {
          return descripcionLimpia;
        }
        return `${descripcionLimpia}. ${diagnosticoLimpio}`;
      }

      return descripcionLimpia || diagnosticoLimpio;
    }

    function formatearDiagnosticoPresentacion(item) {
      const codigo = limpiarTextoDiagnostico(item?.codigo || item?.codigo_asignado || "").toUpperCase();
      const descripcion = limpiarTextoDiagnostico(item?.descripcion || "");
      const diagnostico = limpiarTextoDiagnostico(item?.diagnostico || "");
      const detalle = combinarDescripcionYDiagnostico(descripcion, diagnostico);

      if (codigo && detalle) {
        return `${codigo} - ${detalle}`;
      }
      return codigo || detalle;
    }

    function construirMapaCie10Canonico() {
      const byCode = new Map();
      const byPrefix = new Map();
      const base = [
        ...normalizarDiagnosticos(EPICRISIS_PDF_DATA.cieHistoria),
        ...normalizarDiagnosticos(EPICRISIS_PDF_DATA.cieQx),
      ];

      base.forEach((item) => {
        const codigoRaw = limpiarTextoDiagnostico(item?.codigo || "").toUpperCase();
        const descripcion = limpiarTextoDiagnostico(item?.descripcion || "");
        const diagnostico = limpiarTextoDiagnostico(item?.diagnostico || "");
        const detalle = combinarDescripcionYDiagnostico(descripcion, diagnostico);
        if (!codigoRaw || !detalle) return;

        const registro = { codigo: codigoRaw, descripcion, diagnostico };
        if (!byCode.has(codigoRaw)) byCode.set(codigoRaw, registro);

        const codigoNorm = normalizarCodigoCie10(codigoRaw);
        if (codigoNorm && !byCode.has(codigoNorm)) byCode.set(codigoNorm, registro);

        const prefijo = codigoRaw.slice(0, 3);
        if (prefijo && !byPrefix.has(prefijo)) byPrefix.set(prefijo, registro);
      });

      return { byCode, byPrefix };
    }

    function parseDiagnosticoParaPdf(texto, mapaCie10Canonico) {
      const value = stripHtml(texto).replace(/\s+/g, " ").trim();
      const match = value.match(/^\s*([A-TV-Z][0-9]{2}(?:\.[0-9A-Z]{1,6}|[0-9A-Z]{1,4})?)\s*(?:[-:]|\s)\s*(.+)$/i);
      if (!match) {
        return { codigo: "", descripcion: value };
      }

      const codigoRaw = match[1].toUpperCase();
      const descripcionRaw = match[2].trim();
      const codigoNorm = normalizarCodigoCie10(codigoRaw);
      const prefijo = codigoRaw.slice(0, 3);

      const canonico =
        mapaCie10Canonico.byCode.get(codigoRaw) ||
        (codigoNorm ? mapaCie10Canonico.byCode.get(codigoNorm) : null) ||
        mapaCie10Canonico.byPrefix.get(prefijo);

      if (canonico) {
        const descripcionCanonica = combinarDescripcionYDiagnostico(canonico.descripcion, canonico.diagnostico);
        return {
          codigo: canonico.codigo || codigoNorm || codigoRaw,
          descripcion: descripcionCanonica || descripcionRaw,
        };
      }

      return {
        codigo: codigoNorm || codigoRaw,
        descripcion: descripcionRaw,
      };
    }

    function normalizarDiagnosticos(lista) {
      return (lista || []).map((item) => {
        const diagnostico = item?.diagnostico || item?.descripcion || "";
        let codigo = item?.codigo || item?.codigo_asignado || "";
        let descripcion = item?.descripcion || "";
        if (!codigo || !descripcion) {
          const inline = extraerCie10Inline(diagnostico);
          if (!codigo && inline.codigo) {
            codigo = inline.codigo;
          }
          if (!descripcion && inline.descripcion) {
            descripcion = inline.descripcion;
          }
        }
        const tipo = (String(diagnostico).toUpperCase().includes("POP") || String(diagnostico).toUpperCase().includes("POST"))
          ? "POST"
          : "PRE";
        return {
          diagnostico,
          tipo,
          codigo: codigo || "",
          descripcion: descripcion || ""
        };
      });
    }

    const MEDICAMENTO_GENERIC_CODES = new Set(["2801"]);
    const MEDICAMENTO_PLACEHOLDER_PATTERN = /\[(?:dato|desc|valor|med|dosis|cant|unit|total|cups|tipo|dias|tarifa|nombre|observaci[oó]n)\]/gi;
    const MEDICAMENTO_ITEM_KEYWORDS = {
      insumo_material: ["sutura", "curacion", "curación", "gasa", "vendaje", "ferula", "férula", "yeso", "algodon", "algodón", "material", "aguja"],
      equipo_dispositivo: ["cateter", "catéter", "abocat", "buretrol", "equipo", "venoclisis", "jeringa", "sonda", "canula", "cánula", "dispositivo"],
      solucion: ["solucion", "solución", "cloruro de sodio", "solucion salina", "solución salina", "lactato de ringer", "dextrosa"],
    };
    window.__pdfSelectionData = window.__pdfSelectionData || {
      diagnosticos: [],
      procedimientos: [],
      medicamentos: [],
    };

    function sanitizarPlaceholderMedicamento(value) {
      const texto = String(value || "").trim();
      if (!texto) return "";
      const limpio = texto.replace(MEDICAMENTO_PLACEHOLDER_PATTERN, "").trim().replace(/^[-:/\s]+|[-:/\s]+$/g, "");
      if (!limpio || ["no disponible", "n/a", "none"].includes(limpio.toLowerCase())) return "";
      return limpio;
    }

    function clasificarTipoItemMedicamento(nombre, fuente) {
      const nombreNorm = sanitizarPlaceholderMedicamento(nombre).toLowerCase();
      if (!nombreNorm) return { tipo_item: "desconocido", tipo_item_origen: "sin_nombre" };
      for (const [tipo, keywords] of Object.entries(MEDICAMENTO_ITEM_KEYWORDS)) {
        if (keywords.some((keyword) => nombreNorm.includes(keyword))) {
          return { tipo_item: tipo, tipo_item_origen: "heuristica_keyword" };
        }
      }
      return {
        tipo_item: fuente === "factura" ? "medicamento" : "medicamento",
        tipo_item_origen: fuente === "factura" ? "fallback_factura" : "fallback_clinico",
      };
    }

    function separarNombreYDosisEnTexto(texto) {
      const limpio = sanitizarPlaceholderMedicamento(texto);
      if (!limpio) return { medicamento: "", dosis: "" };
      const match = limpio.match(/\d/);
      if (!match) return { medicamento: limpio, dosis: "" };
      const idx = match.index || 0;
      const medicamento = limpio.slice(0, idx).trim().replace(/^[-:/\s]+|[-:/\s]+$/g, "");
      const dosis = limpio.slice(idx).trim().replace(/^[-:/\s]+|[-:/\s]+$/g, "");
      if (!medicamento) return { medicamento: limpio, dosis: "" };
      return { medicamento, dosis };
    }

    function resolverEstadoCodigoMedicamento(codigo, codigoTipo, fuente) {
      const codigoNorm = String(codigo || "").trim().toUpperCase();
      if (!codigoNorm) return "no_identificado";
      if (MEDICAMENTO_GENERIC_CODES.has(codigoNorm)) return "pendiente_validacion";
      if (String(fuente || "").trim() === "factura" && codigoTipo !== "medicamento") {
        return "pendiente_validacion";
      }
      return "identificado";
    }

    function normalizarMedicamentoCanonico(item, fuentePredeterminada = "historia_clinica") {
      const fuente = String(fuentePredeterminada || "desconocida").trim() || "desconocida";
      let codigo = "";
      let medicamento = "";
      let dosis = "";
      let cantidad = "";
      let codigoTipo = "desconocido";
      let codigoOrigen = "desconocido";
      let textoOriginal = "";
      let tipoItem = "desconocido";
      let tipoItemOrigen = "desconocido";

      if (item && typeof item === "object" && !Array.isArray(item)) {
        codigo = String(
          item?.codigo_medicamento ||
          item?.cod_medicamento ||
          item?.codigo ||
          ""
        ).trim();
        medicamento = sanitizarPlaceholderMedicamento(item?.medicamento || item?.nombre || item?.detalle);
        dosis = sanitizarPlaceholderMedicamento(item?.dosis);
        cantidad = sanitizarPlaceholderMedicamento(item?.cantidad || item?.cant);
        textoOriginal = sanitizarPlaceholderMedicamento(item?.texto_original);
        codigoTipo = String(item?.codigo_tipo || "").trim() || "desconocido";
        codigoOrigen = String(item?.codigo_origen || "").trim() || "desconocido";
        tipoItem = String(item?.tipo_item || "").trim() || "desconocido";
        tipoItemOrigen = String(item?.tipo_item_origen || "").trim() || "desconocido";

        if (!codigoTipo) {
          codigoTipo = "desconocido";
        }
        if (!codigoOrigen) {
          codigoOrigen = "desconocido";
        }

        if (!codigoTipo || codigoTipo === "desconocido") {
          if (String(item?.codigo_medicamento || item?.cod_medicamento || "").trim()) {
            codigoTipo = "medicamento";
            codigoOrigen = "codigo_medicamento";
          } else if (String(item?.codigo || "").trim()) {
            codigoTipo = fuente === "factura" ? "facturacion" : "medicamento";
            codigoOrigen = "codigo";
          }
        }
      } else {
        textoOriginal = sanitizarPlaceholderMedicamento(stripHtml(item).replace(/\s+/g, " ").trim());
        const partes = textoOriginal.split(/\s*-\s*/).map((p) => p.trim()).filter(Boolean);
        const esCodigo = (value) => /^[A-Z0-9]{2,12}$/i.test(String(value || "").trim());
        const tieneCodigo = Boolean(partes[0] && esCodigo(partes[0]));

        if (partes.length >= 4 && tieneCodigo) {
          codigo = partes[0];
          cantidad = partes[1] || "";
          medicamento = partes[2] || "";
          dosis = partes.slice(3).join(" - ");
        } else if (partes.length >= 3 && tieneCodigo) {
          codigo = partes[0];
          medicamento = partes[1] || "";
          dosis = partes[2] || "";
          cantidad = partes[3] || "";
        } else if (partes.length >= 3) {
          cantidad = partes[0] || "";
          medicamento = partes[1] || partes[0] || "";
          dosis = partes.slice(2).join(" - ");
        } else if (partes.length === 2) {
          if (esCodigo(partes[0])) {
            codigo = partes[0];
            medicamento = partes[1] || "";
          } else {
            medicamento = partes[0] || "";
            dosis = partes[1] || "";
          }
        } else if (partes.length === 1) {
          const split = separarNombreYDosisEnTexto(partes[0]);
          medicamento = split.medicamento;
          dosis = split.dosis;
        }

        if (codigo) {
          codigoTipo = ["historia_clinica", "manual", "cache_pdf"].includes(fuente)
            ? "medicamento"
            : "desconocido";
          codigoOrigen = "texto";
        }
      }

      const codigoEstado = String(item?.codigo_estado || "").trim()
        || resolverEstadoCodigoMedicamento(codigo, codigoTipo, fuente);
      if (!tipoItem || tipoItem === "desconocido") {
        const clasificacion = clasificarTipoItemMedicamento(medicamento || textoOriginal, fuente);
        tipoItem = clasificacion.tipo_item;
        tipoItemOrigen = clasificacion.tipo_item_origen;
      }
      const codigoNormalizado = codigoEstado === "identificado" ? codigo : (codigoEstado === "pendiente_validacion" ? codigo : "");

      return {
        codigo: codigoNormalizado,
        codigo_estado: codigoEstado,
        codigo_tipo: codigoTipo || "desconocido",
        codigo_origen: codigoOrigen || "desconocido",
        medicamento: medicamento || "",
        dosis: dosis || "",
        cantidad: cantidad || "",
        fuente: String(item?.fuente || fuente || "desconocida").trim() || "desconocida",
        texto_original: textoOriginal || medicamento || "",
        tipo_item: tipoItem,
        tipo_item_origen: tipoItemOrigen,
      };
    }

    function obtenerCodigoMedicamentoVisible(item) {
      const med = normalizarMedicamentoCanonico(item);
      return med.codigo_estado === "identificado" && med.codigo
        ? med.codigo
        : "Código no identificado";
    }

    function obtenerEtiquetaPrincipalMedicamento(item) {
      const med = normalizarMedicamentoCanonico(item);
      if (med.tipo_item === "insumo_material") {
        return `INSUMO / MATERIAL${med.medicamento ? ` - ${med.medicamento}` : ""}`;
      }
      if (med.tipo_item === "equipo_dispositivo") {
        return `EQUIPO / DISPOSITIVO${med.medicamento ? ` - ${med.medicamento}` : ""}`;
      }
      return `${obtenerCodigoMedicamentoVisible(med)}${med.medicamento ? ` - ${med.medicamento}` : ""}`;
    }

    function formatearMedicamentoPresentacion(item) {
      const med = normalizarMedicamentoCanonico(item);
      const principal = obtenerEtiquetaPrincipalMedicamento(med);
      return [principal, med.cantidad || "", med.dosis || ""].filter(Boolean).join(" - ");
    }

    function parseMedicamentoParaPdf(item) {
      return normalizarMedicamentoCanonico(item);
    }

    function normalizarMedicamentos(lista, fuentePredeterminada = "historia_clinica") {
      return (lista || [])
        .map((item) => normalizarMedicamentoCanonico(item, fuentePredeterminada))
        .filter((m) => m.medicamento || m.dosis || m.cantidad);
    }

    function deduplicarMedicamentos(items) {
      const seen = new Set();
      const out = [];
      (items || []).forEach((raw) => {
        const med = normalizarMedicamentoCanonico(raw);
        const key = [
          med.codigo || "",
          med.codigo_estado || "",
          med.medicamento || "",
          med.dosis || "",
          med.cantidad || "",
          med.fuente || "",
        ].join("|").toLowerCase();
        if (!key.replace(/\|/g, "").trim() || seen.has(key)) return;
        seen.add(key);
        out.push(med);
      });
      return out;
    }

    function deduplicarTextos(items) {
      const seen = new Set();
      const out = [];
      (items || []).forEach((raw) => {
        const texto = stripHtml(raw).replace(/\s+/g, " ").trim();
        if (!texto) return;
        const key = texto.toLowerCase();
        if (seen.has(key)) return;
        seen.add(key);
        out.push(texto);
      });
      return out;
    }

    function obtenerResultadosSoatCombinados() {
      const base = Array.isArray(EPICRISIS_PDF_DATA.codigosDesdeSoat)
        ? EPICRISIS_PDF_DATA.codigosDesdeSoat
        : [];
      const qx = Array.isArray(window.__qxAgentResults)
        ? window.__qxAgentResults
        : [];
      const dinamicos = Array.isArray(window.__dynamicSoatResults)
        ? window.__dynamicSoatResults
        : [];
      return [...base, ...qx, ...dinamicos];
    }

    function actualizarEstadoAgenteQx(texto, esError = false) {
      const statusEl = document.getElementById("agente_qx_status");
      if (!statusEl) return;
      statusEl.textContent = texto;
      statusEl.style.color = esError ? "#b91c1c" : "#4b5563";
    }

    async function ejecutarAgenteHallazgosQx() {
      const hallazgos = stripHtml(EPICRISIS_PDF_DATA.hallazgos || "");
      const descripcion = stripHtml(EPICRISIS_PDF_DATA.descripcionProcedimiento || "");

      if (!hallazgos && !descripcion) {
        actualizarEstadoAgenteQx("Sin hallazgos ni descripcion quirurgica para analizar.");
        AppToast.show("No hay hallazgos quirúrgicos para analizar.", {
          type: "info",
          duration: 3200,
        });
        return;
      }

      const previos = Array.isArray(window.__qxAgentResults) ? window.__qxAgentResults : [];
      if (previos.length > 0) {
        actualizarEstadoAgenteQx(`Agente QX cargado: ${previos.length} resultado(s).`);
        AppToast.show(`Agente QX ya tenía ${previos.length} resultado(s) disponibles.`, {
          type: "info",
          duration: 3200,
        });
        return;
      }

      actualizarEstadoAgenteQx("Analizando hallazgos quirurgicos con IA...");
      TOAST_PROCESS_IDS.qx = AppToast.start("Iniciando análisis del agente QX...", {
        description: "Evaluando hallazgos y descripción quirúrgica.",
        actionLabel: "Ver historial",
        onAction: TOAST_ACTIONS.verHistorial,
      });

      try {
        AppToast.progress(TOAST_PROCESS_IDS.qx, "Agente QX en ejecución...", {
          description: "Generando diagnósticos y procedimientos sugeridos.",
        });
        const response = await fetch("/agente/analizar_hallazgos_qx", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            hallazgos: hallazgos,
            descripcion_procedimiento: descripcion,
          }),
        });

        if (!response.ok) {
          let detalle = `HTTP ${response.status}`;
          try {
            const errorData = await response.json();
            if (errorData?.detail) detalle = errorData.detail;
          } catch (_) {}
          throw new Error(detalle);
        }

        const data = await response.json();
        window.__qxAgentResults = Array.isArray(data?.resultados) ? data.resultados : [];
        inicializarSeleccionPDF();

        const totalDx = Number(data?.total_diagnosticos || 0);
        const totalProc = Number(data?.total_procedimientos || 0);
        if (window.__qxAgentResults.length > 0) {
          actualizarEstadoAgenteQx(`Agente QX: ${totalDx} diagnostico(s) y ${totalProc} procedimiento(s) sugeridos.`);
          AppToast.success(TOAST_PROCESS_IDS.qx, "Agente QX finalizado.", {
            description: `${totalDx} diagnóstico(s) y ${totalProc} procedimiento(s) sugeridos.`,
          });
        } else {
          actualizarEstadoAgenteQx("Agente QX sin sugerencias nuevas.");
          AppToast.success(TOAST_PROCESS_IDS.qx, "Agente QX finalizado sin sugerencias nuevas.", {
            duration: 3500,
          });
        }
      } catch (error) {
        console.error("Error ejecutando agente de hallazgos QX:", error);
        actualizarEstadoAgenteQx(`Error agente QX: ${error.message}`, true);
        AppToast.error(TOAST_PROCESS_IDS.qx, `Error en agente QX: ${error.message}`, {
          actionLabel: "Reintentar",
          onAction: TOAST_ACTIONS.reintentarQx,
        });
      }
    }

    function construirListasAgrupadas() {
      const diagnosticos = [];
      const procedimientos = [];
      const medicamentos = [];

      const cieHistoria = normalizarDiagnosticos(EPICRISIS_PDF_DATA.cieHistoria);
      const cieQx = normalizarDiagnosticos(EPICRISIS_PDF_DATA.cieQx);
      [...cieHistoria, ...cieQx].forEach((d) => {
        const texto = formatearDiagnosticoPresentacion(d);
        diagnosticos.push(texto);
      });

      (EPICRISIS_PDF_DATA.procedimientosHC || []).forEach((p) => procedimientos.push(String(p || "").trim()));

      (EPICRISIS_PDF_DATA.cups || []).forEach((c) => {
        const codigo = String(c?.codigo_cups || "").trim();
        const proc = String(c?.procedimiento || "").trim();
        procedimientos.push(codigo ? `${codigo} - ${proc}` : proc);
      });

      normalizarMedicamentos(EPICRISIS_PDF_DATA.medicamentos, "historia_clinica").forEach((m) => {
        medicamentos.push(m);
      });

      const facturaJson = EPICRISIS_PDF_DATA.facturaJson || {};
      const servicios = facturaJson.servicios_procedimientos || {};
      (servicios.procedimientos_quirurgicos || []).forEach((p) => {
        const codigo = String(p?.codigo_cups || "").trim();
        const descripcion = String(p?.descripcion || p?.concepto || "").trim();
        procedimientos.push(codigo ? `${codigo} - ${descripcion}` : descripcion);
      });
      normalizarMedicamentos(servicios.medicamentos || [], "factura").forEach((m) => {
        medicamentos.push(m);
      });

      obtenerResultadosSoatCombinados().forEach((item) => {
        if (item?.cie10_principal) {
          diagnosticos.push(
            `${item.cie10_principal.codigo || ""} - ${item.cie10_principal.descripcion || ""}`
          );
        }
        (item?.cie10_secundarios || []).forEach((cie) => {
          diagnosticos.push(`${cie.codigo || ""} - ${cie.descripcion || ""}`);
        });
        if (item?.cups_principal) {
          procedimientos.push(`${item.cups_principal.codigo || ""} - ${item.cups_principal.descripcion || ""}`);
        }
        (item?.cups_alternativos || []).forEach((cups) => {
          procedimientos.push(`${cups.codigo || ""} - ${cups.descripcion || ""}`);
        });
      });

      return {
        diagnosticos: deduplicarTextos(diagnosticos),
        procedimientos: deduplicarTextos(procedimientos),
        medicamentos: deduplicarMedicamentos(medicamentos),
      };
    }

    function renderSeccionSeleccion(seccion, items) {
      const list = document.getElementById(`${seccion}_list`);
      if (!list) return;
      window.__pdfSelectionData[seccion] = Array.isArray(items) ? items : [];
      list.innerHTML = "";
      items.forEach((item, index) => {
        const id = `${seccion}_item_${index}`;
        const row = document.createElement("label");
        row.className = "selection-item";
        const texto = seccion === "medicamentos"
          ? formatearMedicamentoPresentacion(item)
          : String(item || "").trim();
        row.innerHTML = `
          <input type="checkbox" id="${id}" checked data-index="${index}">
          <span>${escapeHtml(texto)}</span>
        `;
        list.appendChild(row);
      });
    }

    function inicializarSeleccionPDF() {
      const agrupadas = construirListasAgrupadas();
      renderSeccionSeleccion("diagnosticos", agrupadas.diagnosticos);
      renderSeccionSeleccion("procedimientos", agrupadas.procedimientos);
      renderSeccionSeleccion("medicamentos", agrupadas.medicamentos);
    }

    function obtenerElementosSeleccionados(seccion) {
      const list = document.getElementById(`${seccion}_list`);
      const extra = document.getElementById(`${seccion}_extra`);
      const fuente = window.__pdfSelectionData[seccion] || [];
      const checked = list
        ? Array.from(list.querySelectorAll("input[type='checkbox']:checked"))
            .map((cb) => fuente[Number(cb.dataset.index)])
            .filter((item) => item !== undefined)
        : [];
      const extras = extra
        ? String(extra.value || "")
            .split(/\r?\n/)
            .map((line) => line.trim())
            .filter(Boolean)
        : [];
      if (seccion === "medicamentos") {
        const extrasNormalizados = extras.map((line) => normalizarMedicamentoCanonico(line, "manual"));
        return deduplicarMedicamentos([...checked, ...extrasNormalizados]);
      }
      return deduplicarTextos([...checked, ...extras]);
    }

    function obtenerTextoAmpliacion(idCampo) {
      const el = document.getElementById(idCampo);
      return String(el?.value || "").trim();
    }

    function combinarTextoConAmpliacion(base, ampliacion) {
      const textoBase = stripHtml(base || "").trim();
      const textoExtra = stripHtml(ampliacion || "").trim();
      if (textoBase && textoExtra) {
        return `${textoBase}\n\nAmpliacion medica:\n${textoExtra}`;
      }
      if (textoExtra) return textoExtra;
      if (textoBase) return textoBase;
      return "No especificado";
    }

    function obtenerEpicrisisBaseIdDesdeUrl() {
      const params = new URLSearchParams(window.location.search);
      return params.get("id");
    }

    function obtenerEpicrisisCaseKeyDesdeUrl() {
      const params = new URLSearchParams(window.location.search);
      const queryValue = params.get("case_key");
      if (queryValue) return queryValue;
      const match = window.location.pathname.match(/^\/epicrisis\/caso\/([^/?#]+)/);
      return match ? decodeURIComponent(match[1]) : "";
    }

    async function regenerarEpicrisis() {
      const boton = document.getElementById("regenerar_epicrisis_btn");
      if (!boton) return;
      const caseKey = String(boton.dataset.caseKey || "").trim();
      const regenUrl = String(boton.dataset.regenUrl || "").trim();

      if (!caseKey) {
        if (regenUrl) {
          window.location.href = regenUrl;
        }
        return;
      }

      boton.disabled = true;
      try {
        const response = await fetch(`/epicrisis?case_key=${encodeURIComponent(caseKey)}&regen=1`, {
          method: "POST",
        });
        const data = await response.json();
        if (!response.ok) {
          throw new Error(data.detail || "No se pudo regenerar la epicrisis");
        }
        AppToast.show("Regeneración de epicrisis encolada.", {
          type: "info",
          duration: 4500,
        });
      } catch (error) {
        AppToast.show(`Error al regenerar epicrisis: ${error.message}`, {
          type: "error",
          duration: 5000,
        });
      } finally {
        boton.disabled = false;
      }
    }

    // Estado compartido del flujo de impresion para evitar reentradas y iframes huerfanos.
    window.__epicrisisPdfPrintState = window.__epicrisisPdfPrintState || {
      isGenerating: false,
      activeFrame: null,
      printRequested: false,
      cleanupTimerId: null,
      focusFallbackTimerId: null,
      releaseListeners: null,
    };

    // Obtiene el boton principal para centralizar su bloqueo y restauracion.
    function obtenerBotonGenerarPdf() {
      return document.getElementById("generar_pdf_btn");
    }

    // Sincroniza el estado visual del boton con el estado interno del flujo PDF.
    function actualizarBotonGenerarPdf(options = {}) {
      const btn = obtenerBotonGenerarPdf();
      if (!btn) return;
      if (!btn.dataset.originalText) {
        btn.dataset.originalText = String(btn.textContent || "Generar PDF").trim() || "Generar PDF";
      }
      if (typeof options.disabled === "boolean") {
        btn.disabled = options.disabled;
        btn.setAttribute("aria-busy", options.disabled ? "true" : "false");
      }
      if (typeof options.text === "string" && options.text.trim()) {
        btn.textContent = options.text;
      } else if (options.resetText) {
        btn.textContent = btn.dataset.originalText;
      }
    }

    // Punto unico para mostrar errores del flujo PDF.
    function mostrarAlertaPdf(mensaje) {
      const texto = String(mensaje || "").trim();
      if (texto) {
        AppToast.error(TOAST_PROCESS_IDS.pdf || AppToast.show(texto, { type: "error" }), texto, {
          actionLabel: "Reintentar",
          onAction: TOAST_ACTIONS.reintentarPdf,
        });
      }
    }

    // Limpia timeouts individuales del ciclo de impresion para evitar liberaciones duplicadas.
    function limpiarTemporizadorImpresion(key) {
      const state = window.__epicrisisPdfPrintState;
      if (state[key]) {
        window.clearTimeout(state[key]);
        state[key] = null;
      }
    }

    // Resetea todos los temporizadores asociados al iframe de impresion.
    function limpiarTemporizadoresImpresion() {
      limpiarTemporizadorImpresion("cleanupTimerId");
      limpiarTemporizadorImpresion("focusFallbackTimerId");
    }

    // Desmonta el iframe activo y sus listeners para dejar el flujo en estado reutilizable.
    function desmontarIframeImpresion() {
      const state = window.__epicrisisPdfPrintState;
      if (typeof state.releaseListeners === "function") {
        try {
          state.releaseListeners();
        } catch (_) {}
      }
      state.releaseListeners = null;
      if (state.activeFrame?.parentNode) {
        state.activeFrame.parentNode.removeChild(state.activeFrame);
      }
      state.activeFrame = null;
      state.printRequested = false;
    }

    // Cierra ordenadamente el flujo PDF, sin importar si termino por exito, cancelacion o fallback.
    function finalizarFlujoPdf(reason) {
      const state = window.__epicrisisPdfPrintState;
      limpiarTemporizadoresImpresion();
      desmontarIframeImpresion();
      state.isGenerating = false;
      actualizarBotonGenerarPdf({ disabled: false, resetText: true });
      if (TOAST_PROCESS_IDS.pdf) {
        if (reason === "error" || reason === "print-error") {
          AppToast.error(TOAST_PROCESS_IDS.pdf, "Falló la generación/impresión del PDF.", {
            actionLabel: "Reintentar",
            onAction: TOAST_ACTIONS.reintentarPdf,
          });
        } else {
          AppToast.success(TOAST_PROCESS_IDS.pdf, "Flujo de impresión finalizado.", {
            description: "Puedes volver a imprimir o revisar el historial.",
            actionLabel: "Imprimir de nuevo",
            onAction: TOAST_ACTIONS.reintentarPdf,
          });
        }
      }
    }

    // Crea un iframe oculto reutilizable como superficie de impresion sin cambiar el flujo visible.
    function crearIframeImpresion() {
      const frame = document.createElement("iframe");
      frame.id = "epicrisis_pdf_print_frame";
      frame.style.position = "fixed";
      frame.style.right = "0";
      frame.style.bottom = "0";
      frame.style.width = "0";
      frame.style.height = "0";
      frame.style.border = "0";
      frame.style.visibility = "hidden";
      frame.setAttribute("aria-hidden", "true");
      document.body.appendChild(frame);
      return frame;
    }

    // Espera a que el documento del iframe este realmente listo antes de invocar print().
    function esperarIframeListoParaImprimir(frame, timeoutMs = 8000) {
      return new Promise((resolve, reject) => {
        let loadDetectado = false;

        const cleanup = () => {
          frame.removeEventListener("load", onLoad);
          window.clearInterval(intervalId);
          window.clearTimeout(timeoutId);
        };

        const listo = () => {
          try {
            const frameWin = frame.contentWindow;
            const frameDoc = frameWin?.document;
            if (!frameDoc || frameDoc.readyState !== "complete") return false;
            if (frameWin.__epicrisisPrintReady === true) return true;
            return Boolean(loadDetectado && frameDoc.body && frameDoc.body.innerText.trim().length > 0);
          } catch (_) {
            return false;
          }
        };

        const onLoad = () => {
          loadDetectado = true;
          if (listo()) {
            cleanup();
            resolve();
          }
        };

        const intervalId = window.setInterval(() => {
          if (listo()) {
            cleanup();
            resolve();
          }
        }, 100);

        const timeoutId = window.setTimeout(() => {
          cleanup();
          reject(new Error("Timeout esperando a que el iframe del PDF quedara listo"));
        }, timeoutMs);

        frame.addEventListener("load", onLoad);
        if (listo()) {
          cleanup();
          resolve();
        }
      });
    }

    // Registra señales de cierre de impresion y fallbacks para navegadores donde afterprint no es fiable.
    function registrarListenersImpresion(frame) {
      const state = window.__epicrisisPdfPrintState;
      const frameWindow = frame.contentWindow;
      if (!frameWindow) {
        throw new Error("No se pudo obtener la ventana del iframe de impresion");
      }

      const programarLimpiezaPorFoco = () => {
        if (!state.printRequested || state.activeFrame !== frame) return;
        limpiarTemporizadorImpresion("focusFallbackTimerId");
        state.focusFallbackTimerId = window.setTimeout(() => {
          if (state.printRequested && state.activeFrame === frame) {
            finalizarFlujoPdf("focus-fallback");
          }
        }, 1200);
      };

      const onAfterPrint = () => {
        if (state.activeFrame !== frame) return;
        finalizarFlujoPdf("afterprint");
      };

      const onFrameFocus = () => {
        programarLimpiezaPorFoco();
      };

      const onWindowFocus = () => {
        programarLimpiezaPorFoco();
      };

      frameWindow.addEventListener("afterprint", onAfterPrint);
      frameWindow.addEventListener("focus", onFrameFocus);
      window.addEventListener("focus", onWindowFocus);

      state.releaseListeners = () => {
        frameWindow.removeEventListener("afterprint", onAfterPrint);
        frameWindow.removeEventListener("focus", onFrameFocus);
        window.removeEventListener("focus", onWindowFocus);
      };
    }

    // Ejecuta print() una sola vez por intento y deja programada la limpieza del flujo.
    function lanzarImpresionEnIframe(frame) {
      const state = window.__epicrisisPdfPrintState;
      if (state.activeFrame !== frame) {
        throw new Error("El iframe de impresion ya no esta activo");
      }
      if (state.printRequested) return;

      state.printRequested = true;
      actualizarBotonGenerarPdf({ disabled: true, text: "Abriendo impresion..." });
      registrarListenersImpresion(frame);

      limpiarTemporizadorImpresion("cleanupTimerId");
      state.cleanupTimerId = window.setTimeout(() => {
        if (state.printRequested && state.activeFrame === frame) {
          finalizarFlujoPdf("timeout-fallback");
        }
      }, 20000);

      try {
        frame.contentWindow.focus();
        frame.contentWindow.print();
      } catch (error) {
        finalizarFlujoPdf("print-error");
        throw error;
      }
    }

    // Persiste el HTML imprimible antes de abrir el dialogo para mantener trazabilidad del PDF generado.
    async function guardarPdfEpicrisisCache(payload) {
      try {
        const response = await fetch("/epicrisis/pdf_cache", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(payload),
        });

        if (!response.ok) {
          let detalle = `HTTP ${response.status}`;
          try {
            const dataError = await response.json();
            if (dataError?.detail) detalle = dataError.detail;
          } catch (_) {}
          throw new Error(detalle);
        }

        const data = await response.json();
        window.__ultimoPdfCacheId = data?.cache_id || null;
        return data;
      } catch (_) {
        return null;
      }
    }

    // Construye el HTML final, lo guarda en cache y lanza la impresion protegida por iframe oculto.
    async function generarPdfEpicrisis() {
      const state = window.__epicrisisPdfPrintState;
      if (state.isGenerating) {
        AppToast.show("Ya hay un proceso de PDF en ejecución.", {
          type: "info",
          duration: 2500,
        });
        return;
      }

      state.isGenerating = true;
      state.printRequested = false;
      limpiarTemporizadoresImpresion();
      desmontarIframeImpresion();
      actualizarBotonGenerarPdf({ disabled: true, text: "Generando PDF..." });
      TOAST_PROCESS_IDS.pdf = AppToast.start("Iniciando generación de PDF...", {
        description: "Construyendo contenido de epicrisis.",
        actionLabel: "Ver historial",
        onAction: TOAST_ACTIONS.verHistorial,
      });

      try {
        const data = EPICRISIS_PDF_DATA;
        const metadatos = data.metadatos || {};
        const nombrePaciente = data.nombrePaciente || "No especificado";
        const diagnosticosSeleccionados = obtenerElementosSeleccionados("diagnosticos");
        const procedimientosSeleccionados = obtenerElementosSeleccionados("procedimientos");
        const medicamentosSeleccionados = obtenerElementosSeleccionados("medicamentos");
        const mapaCie10Canonico = construirMapaCie10Canonico();
        const hallazgosExtra = obtenerTextoAmpliacion("hallazgos_extra");
        const descripcionProcedimientoExtra = obtenerTextoAmpliacion("descripcion_procedimiento_extra");

        const resumen = stripHtml(data.resumen) || "No especificado";
        const hallazgos = combinarTextoConAmpliacion(data.hallazgos, hallazgosExtra);
        const descripcionQx = combinarTextoConAmpliacion(
          data.descripcionProcedimiento,
          descripcionProcedimientoExtra
        );
        const fechaGeneracion = new Date().toLocaleString("es-CO");

        const filasDiagnosticos = diagnosticosSeleccionados.length
          ? diagnosticosSeleccionados.map((texto) => {
              const diag = parseDiagnosticoParaPdf(texto, mapaCie10Canonico);
              const codigo = diag.codigo || "";
              const descripcion = diag.descripcion || stripHtml(texto);
              return `
                <tr>
                  <td>${escapeHtml(codigo)}</td>
                  <td>${escapeHtml(descripcion)}</td>
                </tr>
              `;
            }).join("")
          : `<tr><td colspan="2">No hay diagnosticos disponibles.</td></tr>`;

        const filasCups = procedimientosSeleccionados.length
          ? procedimientosSeleccionados.map((texto) => {
              const value = stripHtml(texto).replace(/\s+/g, " ").trim();
              const match = value.match(/^\s*(\d{6})\s*(?:[-:]|\s)\s*(.+)$/);
              const codigo = match ? match[1] : "";
              const descripcion = match ? match[2].trim() : value;
              return `
                <tr>
                  <td>${escapeHtml(codigo)}</td>
                  <td>${escapeHtml(descripcion)}</td>
                </tr>
              `;
            }).join("")
          : `<tr><td colspan="2">No hay procedimientos disponibles.</td></tr>`;

        const filasMedicamentos = medicamentosSeleccionados.length
          ? medicamentosSeleccionados.map((item) => {
              const med = parseMedicamentoParaPdf(item);
              const medicamentoMostrar = obtenerEtiquetaPrincipalMedicamento(med);
              return `
              <tr>
                <td>${escapeHtml(medicamentoMostrar)}</td>
                <td>${escapeHtml(med.dosis || "")}</td>
                <td>${escapeHtml(med.cantidad || "")}</td>
              </tr>
            `;
            }).join("")
          : `<tr><td colspan="3">No hay medicamentos registrados.</td></tr>`;

        const html = `
        <!doctype html>
        <html lang="es">
        <head>
          <meta charset="utf-8" />
          <title>Epicrisis - ${escapeHtml(nombrePaciente)}</title>
          <style>
            @page { size: A4; margin: 16mm 14mm 18mm 14mm; }
            html, body { width: 100%; }
            body { font-family: Arial, sans-serif; color: #1f2937; margin: 0; padding: 0; }
            .pdf-header { margin-bottom: 10px; page-break-after: avoid; break-after: avoid-page; }
            h1 { margin: 0 0 8px 0; color: #1d4ed8; }
            h2 { margin: 0 0 10px 0; color: #1e3a8a; border-bottom: 2px solid #dbeafe; padding-bottom: 6px; page-break-after: avoid; break-after: avoid-page; }
            p { line-height: 1.45; margin: 8px 0; }
            .meta { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; }
            .pdf-section { margin-top: 16px; page-break-inside: avoid; break-inside: avoid-page; }
            table { width: 100%; border-collapse: collapse; margin-top: 8px; page-break-inside: auto; break-inside: auto; }
            th, td { border: 1px solid #d1d5db; padding: 8px; font-size: 12px; text-align: left; vertical-align: top; }
            th { background: #eff6ff; }
            thead { display: table-header-group; }
            tr { page-break-inside: avoid; break-inside: avoid-page; }
            .text-block { white-space: pre-wrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; page-break-inside: avoid; break-inside: avoid-page; }
            .firma { margin-top: 24px; padding-top: 16px; page-break-inside: avoid; break-inside: avoid-page; }
            .footer { margin-top: 22px; font-size: 11px; color: #6b7280; }
          </style>
        </head>
        <body>
          <div class="pdf-header">
            <h1>Epicrisis</h1>
            <p><strong>Paciente:</strong> ${escapeHtml(nombrePaciente)}</p>
            <p><strong>Fecha de generacion:</strong> ${escapeHtml(fechaGeneracion)}</p>
          </div>

          <section class="pdf-section">
            <h2>1. Informacion del Paciente</h2>
            <table>
              <tbody>
                <tr>
                  <td><strong>Nombre del paciente</strong></td>
                  <td>${escapeHtml(metadatos.nombre_paciente || nombrePaciente || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Identificacion</strong></td>
                  <td>${escapeHtml(metadatos.datos_identificacion_paciente || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Sexo</strong></td>
                  <td>${escapeHtml(metadatos.sexo || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Edad</strong></td>
                  <td>${escapeHtml(metadatos.edad || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Fecha de nacimiento</strong></td>
                  <td>${escapeHtml(metadatos.fecha_nacimiento || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Prestador de servicio</strong></td>
                  <td>${escapeHtml(metadatos.prestador_servicio || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>No. de Caso</strong></td>
                  <td>${escapeHtml(metadatos.caso || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Fecha de ingreso</strong></td>
                  <td>${escapeHtml(metadatos.fecha_ingreso || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Motivo de consulta</strong></td>
                  <td>${escapeHtml(metadatos.motivo_consulta || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Telefono</strong></td>
                  <td>${escapeHtml(metadatos.telefono || metadatos.celular || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Correo</strong></td>
                  <td>${escapeHtml(metadatos.correo || metadatos.email || "No especificado")}</td>
                </tr>
                <tr>
                  <td><strong>Direccion</strong></td>
                  <td>${escapeHtml(metadatos.direccion || "No especificado")}</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section class="pdf-section">
            <h2>2. Resumen Clinico</h2>
            <div class="text-block">${escapeHtml(resumen)}</div>
          </section>

          <section class="pdf-section">
            <h2>3. Diagnosticos</h2>
            <table>
              <thead>
                <tr>
                  <th>Codigo CIE-10</th>
                  <th>Descripcion CIE-10</th>
                </tr>
              </thead>
              <tbody>${filasDiagnosticos}</tbody>
            </table>
          </section>

          <section class="pdf-section">
            <h2>4. Hallazgos y Descripcion Quirurgica</h2>
            <p><strong>Hallazgos:</strong></p>
            <div class="text-block">${escapeHtml(hallazgos)}</div>
            <p><strong>Descripcion del procedimiento:</strong></p>
            <div class="text-block">${escapeHtml(descripcionQx)}</div>
          </section>

          <section class="pdf-section">
            <h2>5. Procedimientos</h2>
            <table>
              <thead>
                <tr>
                  <th>Codigo CUPS</th>
                  <th>Procedimiento</th>
                </tr>
              </thead>
              <tbody>${filasCups}</tbody>
            </table>
          </section>

          <section class="pdf-section">
            <h2>6. Medicamentos Administrados</h2>
            <table>
              <thead>
                <tr>
                  <th>Medicamento</th>
                  <th>Dosis</th>
                  <th>Cantidad</th>
                </tr>
              </thead>
              <tbody>${filasMedicamentos}</tbody>
            </table>
          </section>

          <section class="pdf-section">
            <h2>7. Firma Medico Tratante</h2>
            <div class="firma">
              <p>________________________________________</p>
              <p><strong>Firma medico tratante</strong></p>
              <p>Nombre: ________________________________________</p>
              <p>Registro medico: _________________________________</p>
              <p>Fecha: __________________________________________</p>
            </div>
          </section>

          <div class="footer">
            Documento generado desde Epicrisis IA.
          </div>
          <script>
            (function () {
              if (window.__epicrisisPrintSetupDone) return;
              window.__epicrisisPrintSetupDone = true;
              window.__epicrisisPrintReady = false;
              function markReady() {
                if (window.__epicrisisPrintReady) return;
                window.__epicrisisPrintReady = true;
              }
              function waitForFontsThenMark() {
                if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === "function") {
                  document.fonts.ready.then(markReady).catch(markReady);
                  return;
                }
                markReady();
              }
              if (document.readyState === "complete") {
                waitForFontsThenMark();
              } else {
                window.addEventListener("load", waitForFontsThenMark, { once: true });
              }
            })();
          <\/script>
        </body>
        </html>
      `;

        AppToast.progress(TOAST_PROCESS_IDS.pdf, "Guardando PDF en caché...", {
          description: "Preparando versión para impresión.",
        });
        const cacheResult = await guardarPdfEpicrisisCache({
          nombre_paciente: nombrePaciente,
          case_key: obtenerEpicrisisCaseKeyDesdeUrl(),
          epicrisis_base_id: obtenerEpicrisisBaseIdDesdeUrl(),
          historia_id: data.historiaId || null,
          quirurgico_id: data.quirurgicoId || null,
          factura_id: data.facturaId || null,
          resumen_clinico: resumen,
          hallazgos_quirurgicos: hallazgos,
          descripcion_procedimiento: descripcionQx,
          diagnosticos: diagnosticosSeleccionados,
          procedimientos: procedimientosSeleccionados,
          medicamentos: medicamentosSeleccionados,
          notas_medicas: {
            hallazgos_extra: hallazgosExtra,
            descripcion_procedimiento_extra: descripcionProcedimientoExtra,
          },
          html_pdf: html,
        });

        if (!cacheResult?.cache_id) {
          throw new Error("No se pudo guardar el PDF de epicrisis en cache");
        }

        const frame = crearIframeImpresion();
        state.activeFrame = frame;

        const frameDoc = frame.contentWindow?.document;
        if (!frameDoc) {
          throw new Error("No se pudo inicializar el documento del iframe");
        }

        frameDoc.open();
        frameDoc.write(html);
        frameDoc.close();

        AppToast.progress(TOAST_PROCESS_IDS.pdf, "Abriendo diálogo de impresión...", {
          description: "Confirma o cancela desde la ventana del navegador.",
          actionLabel: "Imprimir de nuevo",
          onAction: TOAST_ACTIONS.reintentarPdf,
        });
        await esperarIframeListoParaImprimir(frame);
        lanzarImpresionEnIframe(frame);
      } catch (_) {
        finalizarFlujoPdf("error");
        mostrarAlertaPdf("No se pudo generar o imprimir el PDF de la epicrisis.");
      }
    }

    // Scripts para funcionalidad de SOAT en epicrisis

    // Función para agregar un nuevo campo de código SOAT
    function agregarCodigo() {
      const container = document.getElementById('codigos_container');
      const nuevoGrupo = document.createElement('div');
      nuevoGrupo.className = 'codigo-input-group';
      nuevoGrupo.style.cssText = 'display: flex; gap: 10px; margin-bottom: 10px;';

      nuevoGrupo.innerHTML = `
        <input type="text" name="codigo_soat" placeholder="Código SOAT (ej: 90201)" style="flex: 0 0 120px; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
        <input type="text" name="descripcion" placeholder="Descripción del procedimiento" style="flex: 1; padding: 8px; border: 1px solid #d1d5db; border-radius: 4px;">
        <button type="button" onclick="eliminarCodigo(this)" style="padding: 8px; background: #ef4444; color: white; border: none; border-radius: 4px; cursor: pointer;">✕</button>
      `;

      container.appendChild(nuevoGrupo);
    }

    // Función para eliminar un campo de código SOAT
    function eliminarCodigo(button) {
      const grupo = button.parentElement;
      const container = document.getElementById('codigos_container');

      // No permitir eliminar si solo queda uno
      if (container.children.length > 1) {
        grupo.remove();
      } else {
        AppToast.show('Debe mantener al menos un código SOAT.', {
          type: 'error',
          duration: 4200,
        });
      }
    }

    // Manejar el envío del formulario
    const formGenerarCodigos = document.getElementById('form_generar_codigos');
    if (formGenerarCodigos) {
      formGenerarCodigos.addEventListener('submit', async function(e) {
        e.preventDefault();

      // Recopilar datos del formulario
      const grupos = document.querySelectorAll('.codigo-input-group');
      const descripciones = [];

      grupos.forEach(grupo => {
        const codigoInput = grupo.querySelector('input[name="codigo_soat"]');
        const descripcionInput = grupo.querySelector('input[name="descripcion"]');

        if (descripcionInput.value.trim()) {
          descripciones.push({
            codigo_soat: codigoInput.value.trim(),
            descripcion: descripcionInput.value.trim()
          });
        }
      });

      if (descripciones.length === 0) {
        AppToast.show('Por favor ingresa al menos una descripción.', {
          type: 'error',
          duration: 4200,
        });
        return;
      }

      // Mostrar indicador de carga
      const submitButton = e.target.querySelector('button[type="submit"]');
      const originalText = submitButton.textContent;
      submitButton.textContent = '⏳ Generando...';
      submitButton.disabled = true;
      TOAST_PROCESS_IDS.soat = AppToast.start('Iniciando generación de códigos SOAT...', {
        description: 'Procesando descripciones con IA.',
        actionLabel: 'Ver historial',
        onAction: TOAST_ACTIONS.verHistorial,
      });

      try {
        AppToast.progress(TOAST_PROCESS_IDS.soat, 'Generando sugerencias CIE-10/CUPS...', {
          description: 'El proceso puede tardar unos segundos.',
        });
        // Enviar request a la API
        const response = await fetch('/soat/generar_codigos_gemini', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ descripciones: descripciones })
        });

        if (!response.ok) {
          throw new Error(`Error ${response.status}: ${response.statusText}`);
        }

        const data = await response.json();

        // Mostrar resultados
        mostrarResultados(data.resultados);
        AppToast.success(TOAST_PROCESS_IDS.soat, 'Codificación SOAT completada.', {
          description: `${Array.isArray(data.resultados) ? data.resultados.length : 0} resultado(s) generado(s).`,
          actionLabel: 'Imprimir',
          onAction: TOAST_ACTIONS.reintentarPdf,
        });
        
        // Ocultar formulario y mostrar resultados
        document.getElementById('form_codigos_soat').style.display = 'none';
        
      } catch (error) {
        console.error('Error:', error);
        AppToast.error(TOAST_PROCESS_IDS.soat, 'Error al generar códigos: ' + error.message, {
          actionLabel: 'Reintentar',
          onAction: () => formGenerarCodigos.requestSubmit(),
        });
      } finally {
        // Restaurar botón
        submitButton.textContent = originalText;
        submitButton.disabled = false;
      }
      });
    }
    
    // Función para mostrar los resultados generados
    function mostrarResultados(resultadosInput) {
      const resultados = Array.isArray(resultadosInput) ? resultadosInput : [];
      window.__dynamicSoatResults = resultados;
      const container = document.querySelector('.container');
      const existente = document.getElementById('resultados_soat_auto');
      if (existente) {
        existente.remove();
      }
      
      // Crear elemento de resultados
      const resultadosDiv = document.createElement('div');
      resultadosDiv.id = 'resultados_soat_auto';
      resultadosDiv.className = 'card';
      resultadosDiv.innerHTML = `
        <div class="section-header" style="background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);">
          🤖 Codificación Inteligente desde SOAT - Resultados
        </div>
        
        <div style="background: #f3f4f6; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #8b5cf6;">
          <p style="margin: 0; color: #4b5563; font-size: 0.95em;">
            <strong>ℹ️ Información:</strong> Estos códigos CIE-10 y CUPS han sido generados automáticamente por IA a partir de las descripciones SOAT ingresadas. Se recomienda validar con criterio clínico.
          </p>
        </div>
        
        <div id="resultados_container"></div>
        
        <div style="background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); padding: 20px; border-radius: 8px; margin-top: 20px; border: 2px solid #d1d5db;">
          <h5 style="margin: 0 0 15px 0; color: #374151; font-size: 1.1em; display: flex; align-items: center; gap: 8px;">
            <span style="font-size: 1.3em;">📈</span> Resumen de Codificación
          </h5>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
            <div style="background: white; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #8b5cf6;">
              <div style="font-size: 2em; font-weight: 700; color: #8b5cf6;">${resultados.length}</div>
              <div style="color: #6b7280; font-size: 0.9em; margin-top: 5px;">Códigos SOAT Procesados</div>
            </div>
            <div style="background: white; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #3b82f6;">
              <div style="font-size: 2em; font-weight: 700; color: #3b82f6;" id="total_cie10">0</div>
              <div style="color: #6b7280; font-size: 0.9em; margin-top: 5px;">Códigos CIE-10 Generados</div>
            </div>
            <div style="background: white; padding: 15px; border-radius: 6px; text-align: center; border-left: 4px solid #10b981;">
              <div style="font-size: 2em; font-weight: 700; color: #10b981;" id="total_cups">0</div>
              <div style="color: #6b7280; font-size: 0.9em; margin-top: 5px;">Códigos CUPS Generados</div>
            </div>
          
          </div>
        </div>
      `;
      
      // Insertar después del formulario si existe; si no, al final
      const formCard = document.getElementById('form_codigos_soat');
      if (formCard && formCard.parentNode) {
        formCard.parentNode.insertBefore(resultadosDiv, formCard.nextSibling);
      } else {
        container.appendChild(resultadosDiv);
      }
      
      // Generar contenido de cada resultado
      const resultadosContainer = document.getElementById('resultados_container');
      let totalCie10 = 0;
      let totalCups = 0;
      
      resultados.forEach((item, index) => {
        const itemDiv = document.createElement('div');
        itemDiv.style.cssText = 'background: white; border: 2px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);';
        
        let contenido = `
          <div style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; padding: 15px; border-radius: 8px; margin: -20px -20px 20px -20px;">
            <h4 style="margin: 0; font-size: 1.15em; color: white;">
              ${item.codigo_soat ? `📋 Código SOAT: <span style="font-weight: 700; font-size: 1.1em;">${item.codigo_soat}</span>` : '📋 Descripción SOAT'}
            </h4>
            <p style="margin: 8px 0 0 0; font-size: 0.95em; opacity: 0.95;">${item.descripcion}</p>
          </div>
        `;
        
        // CIE-10 Principal
        if (item.cie10_principal) {
          totalCie10++;
          contenido += `
            <div style="background: #dbeafe; border-left: 5px solid #3b82f6; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
              <h5 style="margin: 0 0 12px 0; color: #1e40af; font-size: 1.1em; display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 1.3em;">🏥</span> CIE-10 PRINCIPAL
              </h5>
              <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #93c5fd;">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                  <span style="background: #3b82f6; color: white; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 1.05em;">
                    ${item.cie10_principal.codigo}
                  </span>
                  <span style="font-weight: 600; color: #1e40af; flex: 1;">${item.cie10_principal.descripcion}</span>
                </div>
                <p style="margin: 10px 0 0 0; padding: 10px; background: #f0f9ff; border-radius: 4px; color: #374151; line-height: 1.6; font-size: 0.9em;">
                  <strong style="color: #1e40af;">Justificación:</strong> ${item.cie10_principal.justificacion}
                </p>
              </div>
            </div>
          `;
        }
        
        // CIE-10 Secundarios
        if (item.cie10_secundarios && item.cie10_secundarios.length > 0) {
          totalCie10 += item.cie10_secundarios.length;
          contenido += `
            <div style="background: #e0e7ff; border-left: 5px solid #6366f1; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
              <h5 style="margin: 0 0 12px 0; color: #4338ca; font-size: 1em; display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 1.2em;">📋</span> CIE-10 SECUNDARIOS (${item.cie10_secundarios.length})
              </h5>
          `;
          
          item.cie10_secundarios.forEach(cie10 => {
            contenido += `
              <div style="background: white; padding: 12px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #c7d2fe;">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
                  <span style="background: #6366f1; color: white; padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 0.9em;">
                    ${cie10.codigo}
                  </span>
                  <span style="color: #4338ca; font-weight: 500; font-size: 0.9em;">${cie10.descripcion}</span>
                </div>
                <p style="margin: 6px 0 0 0; padding-left: 12px; color: #6b7280; font-size: 0.85em; line-height: 1.5;">
                  <em>${cie10.justificacion}</em>
                </p>
              </div>
            `;
          });
          
          contenido += '</div>';
        }
        
        // CUPS Principal
        if (item.cups_principal) {
          totalCups++;
          contenido += `
            <div style="background: #d1fae5; border-left: 5px solid #10b981; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
              <h5 style="margin: 0 0 12px 0; color: #065f46; font-size: 1.1em; display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 1.3em;">🔧</span> CUPS PRINCIPAL
              </h5>
              <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #6ee7b7;">
                <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 10px;">
                  <span style="background: #10b981; color: white; padding: 6px 14px; border-radius: 6px; font-weight: 700; font-size: 1.05em; letter-spacing: 1px;">
                    ${item.cups_principal.codigo}
                  </span>
                  <span style="font-weight: 600; color: #065f46; flex: 1; font-size: 0.95em;">${item.cups_principal.descripcion}</span>
                </div>
                <p style="margin: 10px 0 0 0; padding: 10px; background: #ecfdf5; border-radius: 4px; color: #374151; line-height: 1.6; font-size: 0.9em;">
                  <strong style="color: #065f46;">Justificación:</strong> ${item.cups_principal.justificacion}
                </p>
              </div>
            </div>
          `;
        }
        
        // CUPS Alternativos
        if (item.cups_alternativos && item.cups_alternativos.length > 0) {
          totalCups += item.cups_alternativos.length;
          contenido += `
            <div style="background: #d1fae5; border-left: 5px solid #34d399; padding: 18px; border-radius: 8px; margin-bottom: 18px;">
              <h5 style="margin: 0 0 12px 0; color: #047857; font-size: 1em; display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 1.2em;">⚙️</span> CUPS ALTERNATIVOS (${item.cups_alternativos.length})
              </h5>
          `;
          
          item.cups_alternativos.forEach(cups => {
            contenido += `
              <div style="background: white; padding: 12px; border-radius: 6px; margin-bottom: 10px; border: 1px solid #a7f3d0;">
                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
                  <span style="background: #34d399; color: white; padding: 4px 10px; border-radius: 4px; font-weight: 600; font-size: 0.9em; letter-spacing: 0.5px;">
                    ${cups.codigo}
                  </span>
                  <span style="color: #047857; font-weight: 500; font-size: 0.9em;">${cups.descripcion}</span>
                </div>
                <p style="margin: 6px 0 0 0; padding-left: 12px; color: #6b7280; font-size: 0.85em; line-height: 1.5;">
                  <em>${cups.justificacion}</em>
                </p>
              </div>
            `;
          });
          
          contenido += '</div>';
        }
        
        // Análisis Clínico
        if (item.analisis_clinico) {
          contenido += `
            <div style="background: #fef3c7; border-left: 5px solid #f59e0b; padding: 18px; border-radius: 8px;">
              <h5 style="margin: 0 0 12px 0; color: #92400e; font-size: 1em; display: flex; align-items: center; gap: 8px;">
                <span style="font-size: 1.2em;">📊</span> ANÁLISIS CLÍNICO DETALLADO
              </h5>
              <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #fcd34d; max-height: 400px; overflow-y: auto;">
                <pre style="white-space: pre-wrap; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 0.9em; line-height: 1.7; margin: 0; color: #374151;">${item.analisis_clinico}</pre>
              </div>
            </div>
          `;
        }
        
        itemDiv.innerHTML = contenido;
        resultadosContainer.appendChild(itemDiv);
      });
      
      // Actualizar contadores
      document.getElementById('total_cie10').textContent = totalCie10;
      document.getElementById('total_cups').textContent = totalCups;
      inicializarSeleccionPDF();
    }

    document.addEventListener('DOMContentLoaded', async () => {
      inicializarSeleccionPDF();
      await ejecutarAgenteHallazgosQx();
    });
  </script>

</body>
</html>
