<!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>
    <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>
      <button onclick="window.print()">Imprimir</button>
      {% if regen_url %}
      <a href="{{ regen_url }}">Regenerar epicrisis</a>
      {% endif %}
      <button 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">Seleccion 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 class="selection-grid">
        <div class="selection-box">
          <h4>Diagnosticos</h4>
          <div id="diagnosticos_list" class="selection-list"></div>
          <textarea id="diagnosticos_extra" class="selection-extra" placeholder="Agregar diagnosticos (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="Agregar procedimientos (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="Agregar medicamentos (uno por linea)"></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 and medicamentos_hc|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 %}
                <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>
    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 }}
    };

    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]?(?:\.[0-9A-Z]{1,2})?)\s*[-:]\s*(.+)$/i);
      if (!match) {
        return { codigo: "", descripcion: "" };
      }
      return { codigo: match[1].toUpperCase(), descripcion: match[2].trim() };
    }

    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 || ""
        };
      });
    }

    function normalizarMedicamentos(lista) {
      return (lista || []).map((item) => {
        const texto = String(item || "").trim();
        const match = texto.match(/^\s*(\d{4})\s*[-:]\s*(.+)$/);
        return {
          codigo: match ? match[1] : "",
          detalle: match ? match[2] : texto
        };
      });
    }

    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 dinamicos = Array.isArray(window.__dynamicSoatResults)
        ? window.__dynamicSoatResults
        : [];
      return [...base, ...dinamicos];
    }

    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 = d.codigo ? `${d.codigo} - ${d.descripcion || d.diagnostico}` : (d.descripcion || d.diagnostico);
        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).forEach((m) => {
        const texto = m.codigo ? `${m.codigo} - ${m.detalle}` : m.detalle;
        medicamentos.push(texto);
      });

      const facturaJson = EPICRISIS_PDF_DATA.facturaJson || {};
      const servicios = facturaJson.servicios_procedimientos || {};
      (servicios.procedimientos_quirurgicos || []).forEach((p) => {
        const codigo = String(p?.codigo_cups || "").trim();
        const concepto = String(p?.concepto || p?.descripcion || "").trim();
        procedimientos.push(codigo ? `${codigo} - ${concepto}` : concepto);
      });
      (servicios.medicamentos || []).forEach((m) => {
        const med = String(m?.medicamento || "").trim();
        const dosis = String(m?.dosis || "").trim();
        const texto = [med, dosis].filter(Boolean).join(" ");
        if (texto) medicamentos.push(texto);
      });

      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: deduplicarTextos(medicamentos),
      };
    }

    function renderSeccionSeleccion(seccion, items) {
      const list = document.getElementById(`${seccion}_list`);
      if (!list) return;
      list.innerHTML = "";
      items.forEach((texto, index) => {
        const id = `${seccion}_item_${index}`;
        const row = document.createElement("label");
        row.className = "selection-item";
        row.innerHTML = `
          <input type="checkbox" id="${id}" checked data-text="${escapeHtml(texto)}">
          <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 checked = list
        ? Array.from(list.querySelectorAll("input[type='checkbox']:checked")).map((cb) => cb.dataset.text || "")
        : [];
      const extras = extra
        ? String(extra.value || "")
            .split(/\r?\n/)
            .map((line) => line.trim())
            .filter(Boolean)
        : [];
      return deduplicarTextos([...checked, ...extras]);
    }

    function generarPdfEpicrisis() {
      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 resumen = stripHtml(data.resumen) || "No especificado";
      const hallazgos = stripHtml(data.hallazgos) || "No especificado";
      const descripcionQx = stripHtml(data.descripcionProcedimiento) || "No especificado";
      const fechaGeneracion = new Date().toLocaleString("es-CO");

      const filasDiagnosticos = diagnosticosSeleccionados.length
        ? diagnosticosSeleccionados.map((texto) => {
            const match = texto.match(/^\s*([A-TV-Z][0-9]{2}[0-9A-Z]?(?:\.[0-9A-Z]{1,2})?)\s*[-:]\s*(.+)$/i);
            const codigo = match ? match[1].toUpperCase() : "";
            const descripcion = match ? match[2].trim() : 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 match = texto.match(/^\s*(\d{6})\s*[-:]\s*(.+)$/);
            const codigo = match ? match[1] : "";
            const descripcion = match ? match[2].trim() : texto;
            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((texto) => {
            const match = texto.match(/^\s*(\d{4})\s*[-:]\s*(.+)$/);
            const codigo = match ? match[1] : "-";
            const detalle = match ? match[2].trim() : texto;
            return `
            <tr>
              <td>${escapeHtml(codigo)}</td>
              <td>${escapeHtml(detalle || "No especificado")}</td>
            </tr>
          `;
          }).join("")
        : `<tr><td colspan="2">No hay medicamentos registrados.</td></tr>`;

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

          <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>

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

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

          <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>

          <h2>5. Procedimientos</h2>
          <table>
            <thead>
              <tr>
                <th>Codigo CUPS</th>
                <th>Procedimiento</th>
              </tr>
            </thead>
            <tbody>${filasCups}</tbody>
          </table>

          <h2>6. Medicamentos Administrados</h2>
          <table>
            <thead>
              <tr>
                <th>Codigo medicamento</th>
                <th>Detalle</th>
              </tr>
            </thead>
            <tbody>${filasMedicamentos}</tbody>
          </table>

          <h2>7. Firma Medico Tratante</h2>
          <div style="margin-top: 42px; padding-top: 16px;">
            <p>________________________________________</p>
            <p><strong>Firma medico tratante</strong></p>
            <p>Nombre: ________________________________________</p>
            <p>Registro medico: _________________________________</p>
            <p>Fecha: __________________________________________</p>
          </div>

          <div class="footer">
            Documento generado desde Epicrisis IA.
          </div>
        </body>
        </html>
      `;

      const frame = document.createElement("iframe");
      frame.style.position = "fixed";
      frame.style.right = "0";
      frame.style.bottom = "0";
      frame.style.width = "0";
      frame.style.height = "0";
      frame.style.border = "0";
      document.body.appendChild(frame);

      const frameDoc = frame.contentWindow.document;
      frameDoc.open();
      frameDoc.write(html);
      frameDoc.close();
      frame.contentWindow.focus();
      setTimeout(() => {
        frame.contentWindow.print();
        setTimeout(() => frame.remove(), 1000);
      }, 500);
    }

    // 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 {
        alert('Debe mantener al menos un código SOAT');
      }
    }
    
    // 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) {
        alert('Por favor ingresa al menos una descripción');
        return;
      }
      
      // Mostrar indicador de carga
      const submitButton = e.target.querySelector('button[type="submit"]');
      const originalText = submitButton.textContent;
      submitButton.textContent = '⏳ Generando...';
      submitButton.disabled = true;
      
      try {
        // 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);
        
        // Ocultar formulario y mostrar resultados
        document.getElementById('form_codigos_soat').style.display = 'none';
        
      } catch (error) {
        console.error('Error:', error);
        alert('Error al generar códigos: ' + error.message);
      } 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', () => {
      inicializarSeleccionPDF();
    });
  </script>

</body>
</html> 




