<?php
// FORMATO MSP-033: HISTORIA CLÍNICA ÚNICA DE SALUD BUCAL (VERSIÓN 2.0 - PRO)
// Ministerio de Salud Pública del Ecuador
?>
<style>
    /* ESTILOS CRÍTICOS INYECTADOS (NO CACHÉ) */
    .simbolo-overlay {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none !important;
        /* CRITICO: Permitir clicks a través */
        z-index: 30;
        display: block !important;
        background: transparent;
    }

    .stacked-sym {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        pointer-events: none !important;
        font-weight: bold;
        z-index: 31;
    }

    /* Asegurar que las caras reciban clicks */
    .cara {
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 20;
        /* Debajo del overlay visual pero clickeable si overlay es pass-through */
    }

    .diente-shape:hover .cara {
        /* z-index: 25; NO elevar sobre overlay, overlay debe ser transparente a clicks */
    }

    /* 3. VISUAL DEFINITIONS (Inyectado para romper caché CSS) */

    /* CORONA: Borde Rojo al Shape */
    .pat-corona .diente-shape {
        border: 2px solid #D32F2F !important;
        border-radius: 4px;
        box-sizing: border-box;
    }

    /* SÍMBOLOS ::AFTER CONTENIDO */
    .sym-extraccion::after {
        content: "X";
        color: #D32F2F;
        /* Rojo */
        font-size: 34px;
        line-height: 1;
        text-shadow: 0 0 2px white;
    }

    .sym-perdida-caries::after {
        content: "X";
        color: #1976D2;
        /* Azul */
        font-size: 34px;
        line-height: 1;
        text-shadow: 0 0 2px white;
    }

    .sym-perdida-otra::after {
        content: "⊗";
        color: #D32F2F;
        /* Rojo */
        font-size: 34px;
        line-height: 1;
        text-shadow: 0 0 2px white;
    }

    .sym-endodoncia::after {
        content: "▲";
        color: #D32F2F;
        font-size: 28px;
        line-height: 1;
        text-shadow: 0 0 2px white;
        margin-top: -5px;
    }

    .sym-ausente::after {
        content: "X";
        color: #333;
        font-size: 34px;
        line-height: 1;
        text-shadow: 0 0 2px white;
    }

    .sym-sellante-nec::after {
        content: "*";
        color: #D32F2F;
        font-size: 30px;
        line-height: 0.8;
    }

    .sym-sellante-rea::after {
        content: "*";
        color: #1976D2;
        font-size: 30px;
        line-height: 0.8;
    }

    /* PRÓTESIS */
    .sym-protesis-total::after {
        content: "=";
        color: #D32F2F;
        font-size: 36px;
        line-height: 0.8;
    }

    .sym-protesis-fija::after {
        content: "[ ]";
        color: #D32F2F;
        font-size: 26px;
        /* Ajustado */
        letter-spacing: -2px;
        font-weight: 900;
    }

    .sym-protesis-removible::after {
        content: "( )";
        color: #D32F2F;
        font-size: 26px;
        letter-spacing: -2px;
        font-weight: 900;
    }

    /* FIX: INPUTS RECESION/MOVILIDAD Y LAYOUT */
    .extra-input-box {
        width: 32px;
        /* Fit within 40px tooth */
        height: 16px;
        border: 1px solid #777;
        text-align: center;
        font-size: 11px;
        margin: 1px auto;
        display: block;
        padding: 0;
        line-height: 1;
    }

    .diente-columna {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 4px;
        /* Space between teeth */
        width: 44px;
        position: relative;
    }

    /* Layout containers */
    .arcada-row {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        /* Align bottom */
        justify-content: center;
    }

    .arcada-row.upper {
        align-items: flex-end;
        /* Teeth bottom aligned */
    }

    .arcada-row.lower {
        align-items: flex-start;
        /* Teeth top aligned */
    }

    /* Labels Column */
    .labels-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 10px;
        min-width: 80px;
        text-align: right;
    }

    .label-cell {
        font-size: 10px;
        font-weight: bold;
        color: #000;
        height: 18px;
        /* Approx input height included margin */
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text-transform: uppercase;
    }

    .label-tooth-row {
        height: 60px;
        /* Approx tooth + number height */
        align-items: center;
    }

    .odonto-flex-container {
        display: flex;
        justify-content: center;
    }

    .cuadrante {
        display: flex;
        gap: 2px;
    }
</style>

<form name="formulario_odonto" id="formulario_odonto" method="POST">
    <input type="hidden" name="idatencion" id="idatencion" value="<?php echo $_POST['idatencion'] ?? ''; ?>">
    <input type="hidden" name="tipo_formato" value="MSP_033_ODONTO">

    <!-- ENCABEZADO OFICIAL -->
    <div class="msp-033-header">
        FORM. 033 - HISTORIA CLÍNICA ÚNICA DE SALUD BUCAL
    </div>

    <!-- DATOS DEL PACIENTE -->
    <?php include 'partials/patient_header.php'; ?>

    <div class="msp-container">
        <!-- SECCIONES 1-5 (Sin Cambios Mayores) -->

        <!-- 1. MOTIVO DE CONSULTA -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">1. MOTIVO DE CONSULTA</div>
            <textarea class="msp-textarea" name="motivo_consulta_odonto" rows="2"
                placeholder="Describa el motivo..."></textarea>
        </div>

        <!-- 2. ENFERMEDAD O PROBLEMA ACTUAL -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">2. ENFERMEDAD O PROBLEMA ACTUAL</div>
            <div class="msp-subtitle" style="font-size:10px; color:#555;">Registrar síntomas, cronología, localización,
                características, intensidad, causa aparente, síntomas asociados, estado actual</div>
            <textarea class="msp-textarea" name="enfermedad_actual_odonto" rows="3"></textarea>
        </div>

        <!-- 3. ANTECEDENTES -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">3. ANTECEDENTES PERSONALES Y FAMILIARES</div>
            <div class="msp-row">
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox"
                            name="alergia_antibiotico" value="1"> 1. Alergia Antib.</label></div>
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="alergia_anestesia"
                            value="1"> 2. Alergia Anest.</label></div>
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="hemorragias"
                            value="1"> 3. Hemorragias</label></div>
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="vih" value="1"> 4.
                        VIH/SIDA</label></div>
            </div>
            <div class="msp-row msp-mt-5">
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="tuberculosis"
                            value="1"> 5. Tuberculosis</label></div>
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="asma" value="1">
                        6. Asma</label></div>
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="diabetes"
                            value="1"> 7. Diabetes</label></div>
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="hipertension"
                            value="1"> 8. Hipertensión</label></div>
            </div>
            <div class="msp-row msp-mt-5">
                <div class="msp-col-3"><label class="msp-checkbox-label"><input type="checkbox" name="cardiopatia"
                            value="1"> 9. Enf. Cardíaca</label></div>
                <div class="msp-col-9"><label class="msp-checkbox-label"><input type="checkbox"
                            name="otros_antecedentes_check" value="1"> 10. Otro</label></div>
            </div>
            <div class="msp-row msp-mt-10">
                <div class="msp-col-12">
                    <label class="msp-field-label">Observaciones Antecedentes</label>
                    <textarea class="msp-textarea" name="otros_antecedentes_odonto" rows="1"></textarea>
                </div>
            </div>
        </div>

        <!-- 4. SIGNOS VITALES -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">4. SIGNOS VITALES</div>
            <div class="msp-row">
                <div class="msp-col-3">
                    <label class="msp-field-label">Presión Arterial</label>
                    <input type="text" class="msp-input" name="presion_arterial"
                        value="<?php echo $paciente['presion_arterial'] ?? ''; ?>">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Frecuencia Cardíaca</label>
                    <input type="text" class="msp-input" name="frecuencia_cardiaca"
                        value="<?php echo $paciente['frecuencia_cardiaca'] ?? ''; ?>">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Temperatura (°C)</label>
                    <input type="text" class="msp-input" name="temperatura"
                        value="<?php echo $paciente['temperatura'] ?? ''; ?>">
                </div>
                <div class="msp-col-3">
                    <label class="msp-field-label">Frecuencia Resp.</label>
                    <input type="text" class="msp-input" name="frecuencia_respiratoria"
                        value="<?php echo $paciente['frecuencia_respiratoria'] ?? ''; ?>">
                </div>
            </div>
        </div>

        <!-- 5. EXAMEN DEL SISTEMA ESTOMATOGNÁTICO -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">5. EXAMEN DE SISTEMA ESTOMATOGNÁTICO</div>
            <div class="msp-row" style="font-size: 11px;">
                <div class="msp-col-2"><label><input type="checkbox" name="labios_patologia"> 1. Labios</label></div>
                <div class="msp-col-2"><label><input type="checkbox" name="mejillas_patologia"> 2. Mejillas</label>
                </div>
                <div class="msp-col-2"><label><input type="checkbox" name="maxilar_patologia"> 3. Maxilar Sup.</label>
                </div>
                <div class="msp-col-2"><label><input type="checkbox" name="maxilar_inf_patologia"> 4. Maxilar
                        Inf.</label></div>
                <div class="msp-col-2"><label><input type="checkbox" name="lengua_patologia"> 5. Lengua</label></div>
                <div class="msp-col-2"><label><input type="checkbox" name="paladar_patologia"> 6. Paladar</label></div>
            </div>
            <div class="msp-row msp-mt-5" style="font-size: 11px;">
                <div class="msp-col-2"><label><input type="checkbox" name="piso_patologia"> 7. Piso</label></div>
                <div class="msp-col-2"><label><input type="checkbox" name="carrillos_patologia"> 8. Carrillos</label>
                </div>
                <div class="msp-col-2"><label><input type="checkbox" name="glandulas_patologia"> 9. Glándulas</label>
                </div>
                <div class="msp-col-2"><label><input type="checkbox" name="orofaringe_patologia"> 10. Oro
                        Faringe</label></div>
                <div class="msp-col-2"><label><input type="checkbox" name="atm_patologia"> 11. A. T. M.</label></div>
                <div class="msp-col-2"><label><input type="checkbox" name="ganglios_patologia"> 12. Ganglios</label>
                </div>
            </div>
            <div class="msp-row msp-mt-10">
                <div class="msp-col-12">
                    <label class="msp-field-label">Descripción de la patología</label>
                    <textarea class="msp-textarea" name="examen_estomatognatico" rows="2"></textarea>
                </div>
            </div>
        </div>

        <!-- 6. ODONTOGRAMA PRO 2.0 -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">6. ODONTOGRAMA</div>

            <div class="odontograma-pro-container">
                <!-- BARRA DE HERRAMIENTAS - SIMBOLOGÍA COMPLETA OFICIAL -->
                <div class="odonto-toolbar sticky-toolbar">
                    <div class="toolbar-title">Simbología Oficial MSP (V3.0 FIXED)</div>
                    <div class="toolbar-items">
                        <!-- PATOLOGÍAS DE CARA (Clases .pat-) -->
                        <div class="tool-group">
                            <span class="tool-group-label">CARAS:</span>
                            <label class="tool-item"><input type="radio" name="tool" value="caries" checked> <span
                                    class="color-box bg-caries"></span> Caries (Rojo)</label>
                            <label class="tool-item"><input type="radio" name="tool" value="obturado"> <span
                                    class="color-box bg-obturado"></span> Obturado (Azul)</label>
                            <label class="tool-item"><input type="radio" name="tool" value="corona"> <span
                                    class="symbol-box color-red"
                                    style="border:2px solid #D32F2F; width:14px; height:14px;"></span> Corona</label>
                        </div>

                        <!-- SIMBOLOS GLOBALES (Clases .sym-) -->
                        <div class="tool-group">
                            <span class="tool-group-label">SÍMBOLOS:</span>
                            <label class="tool-item"><input type="radio" name="tool" value="sellante-nec"> <span
                                    class="symbol-box color-red" style="font-size:18px;">*</span> Sellante Nec.</label>
                            <label class="tool-item"><input type="radio" name="tool" value="sellante-rea"> <span
                                    class="symbol-box" style="color:#1976D2; font-size:18px;">*</span> Sellante
                                Rea.</label>
                            <label class="tool-item"><input type="radio" name="tool" value="extraccion"> <span
                                    class="symbol-box color-red">X</span> Extracción (Ind)</label>
                            <label class="tool-item"><input type="radio" name="tool" value="perdida-caries"> <span
                                    class="symbol-box" style="color:#1976D2;">X</span> Pérdida Caries</label>
                            <label class="tool-item"><input type="radio" name="tool" value="perdida-otra"> <span
                                    class="symbol-box color-red">⊗</span> Pérdida Otra</label>
                            <label class="tool-item"><input type="radio" name="tool" value="endodoncia"> <span
                                    class="symbol-box color-red">▲</span> Endodoncia</label>
                            <label class="tool-item"><input type="radio" name="tool" value="ausente"> <span
                                    class="symbol-box">X</span> Ausente</label>
                        </div>

                        <!-- PRÓTESIS -->
                        <div class="tool-group">
                            <span class="tool-group-label">PRÓTESIS:</span>
                            <label class="tool-item"><input type="radio" name="tool" value="protesis-fija"> <span
                                    class="symbol-box color-red" style="font-weight:bold; letter-spacing:2px;">[
                                    ]</span> Fija</label>
                            <label class="tool-item"><input type="radio" name="tool" value="protesis-removible"> <span
                                    class="symbol-box color-red" style="font-weight:bold; letter-spacing:2px;">(
                                    )</span> Removible</label>
                            <label class="tool-item"><input type="radio" name="tool" value="protesis-total"> <span
                                    class="symbol-box color-red" style="font-weight:bold;">=</span> Total</label>
                        </div>

                        <label class="tool-item tool-eraser"><input type="radio" name="tool" value="sano"> <span
                                class="symbol-box"><i class="fa fa-eraser"></i></span> BORRAR</label>
                    </div>
                </div>

                <!-- ODONTOGRAMA VISUAL CON ETIQUETAS (Fixed Grid Alignment) -->
                <style>
                    /* SISTEMA DE GRILLA ESTRICTA PARA ALINEACIÓN */
                    .cell-grid {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-sizing: border-box;
                        width: 100%;
                    }

                    /* Alturas Estandarizadas */
                    .h-input {
                        height: 20px;
                    }

                    .h-num {
                        height: 16px;
                    }

                    .h-tooth {
                        height: 44px;
                    }

                    /* Input Styling inside grid */
                    .extra-input-box {
                        width: 100%;
                        height: 16px;
                        border: 1px solid #999;
                        text-align: center;
                        font-size: 10px;
                        line-height: 1;
                        padding: 0;
                        margin: 0;
                    }

                    /* Etiquetas Text Styles */
                    .lbl-text {
                        justify-content: flex-end;
                        padding-right: 5px;
                        font-size: 10px;
                        font-weight: bold;
                        color: #444;
                        text-transform: uppercase;
                        /* Force Caps */
                    }

                    /* Columnas */
                    .labels-column {
                        display: flex;
                        flex-direction: column;
                        min-width: 90px;
                        margin-right: 4px;
                    }

                    /* Ajuste vertical de etiquetas */
                    .upper-container .labels-column {
                        margin-top: 10px;
                        /* Bajar etiquetas superiores */
                    }

                    .lower-container .labels-column {
                        margin-bottom: 10px;
                        /* Subir etiquetas inferiores */
                    }

                    .odonto-row-container {
                        display: flex;
                        justify-content: center;
                    }

                    /* CORRECCIÓN DE ALINEACIÓN VERTICAL */
                    /* Upper: Permanent teeth are at the TOP (Start). Deciduous below. Label block must align to TOP. */
                    .upper-container {
                        align-items: flex-start;
                        padding-top: 20px;
                        /* Ajuste fino: más cerca de las filas */
                    }

                    /* Lower: Deciduous are at the TOP. Permanent at BOTTOM (End). Label block must align to BOTTOM. */
                    .lower-container {
                        align-items: flex-end;
                        padding-bottom: 20px;
                        /* Ajuste fino: más cerca de las filas */
                    }
                </style>

                <div class="odontograma-visual">

                    <!-- BLOQUE SUPERIOR -->
                    <div class="odonto-row-container upper-container">
                        <!-- Etiquetas Izquierda Superior -->
                        <div class="labels-column">
                            <div class="cell-grid h-input lbl-text">RECESIÓN</div>
                            <div class="cell-grid h-input lbl-text">MOVILIDAD</div>
                            <div class="cell-grid h-num"></div>
                            <div class="cell-grid h-tooth lbl-text">VESTIBULAR</div>
                        </div>

                        <!-- Dientes -->
                        <div class="arcada-wrapper">
                            <div class="arcada-row upper">
                                <div class="cuadrante derecho">
                                    <?php for ($i = 18; $i >= 11; $i--)
                                        echo renderDientePro($i); ?>
                                </div>
                                <div style="width:10px;"></div>
                                <div class="cuadrante izquierdo">
                                    <?php for ($i = 21; $i <= 28; $i++)
                                        echo renderDientePro($i); ?>
                                </div>
                            </div>

                            <!-- TEMPORALES SUPERIORES (55-65) -->
                            <div class="arcada-row odonto-decidua-row"
                                style="display:flex; align-items:flex-end; justify-content:center; margin-top:5px;">
                                <div class="cuadrante derecho">
                                    <?php for ($i = 55; $i >= 51; $i--)
                                        echo renderDientePro($i, false, true); ?>
                                </div>
                                <div style="width:10px;"></div>
                                <div class="cuadrante izquierdo">
                                    <?php for ($i = 61; $i <= 65; $i++)
                                        echo renderDientePro($i, false, true); ?>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="separador-arcadas"
                        style="height:20px; display:flex; align-items:center; justify-content:center;">
                        <span style="font-size:10px; font-weight:bold; color:#777;">LINGUAL</span>
                    </div>

                    <!-- BLOQUE INFERIOR -->
                    <div class="odonto-row-container lower-container">
                        <div class="labels-column">
                            <div class="cell-grid h-tooth lbl-text">VESTIBULAR</div>
                            <div class="cell-grid h-num"></div>
                            <div class="cell-grid h-input lbl-text">MOVILIDAD</div>
                            <div class="cell-grid h-input lbl-text">RECESIÓN</div>
                        </div>

                        <div class="arcada-wrapper">
                            <!-- TEMPORALES INFERIORES (85-75) -->
                            <div class="arcada-row odonto-decidua-row"
                                style="display:flex; align-items:flex-start; justify-content:center; margin-bottom:5px;">
                                <div class="cuadrante derecho">
                                    <?php for ($i = 85; $i >= 81; $i--)
                                        echo renderDientePro($i, true, true); ?>
                                </div>
                                <div style="width:10px;"></div>
                                <div class="cuadrante izquierdo">
                                    <?php for ($i = 71; $i <= 75; $i++)
                                        echo renderDientePro($i, true, true); ?>
                                </div>
                            </div>

                            <!-- PERMANENTES INFERIORES -->
                            <div class="arcada-row lower">
                                <div class="cuadrante derecho">
                                    <?php for ($i = 48; $i >= 41; $i--)
                                        echo renderDientePro($i, true); ?>
                                </div>
                                <div style="width:10px;"></div>
                                <div class="cuadrante izquierdo">
                                    <?php for ($i = 31; $i <= 38; $i++)
                                        echo renderDientePro($i, true); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div id="hidden-inputs-container"></div>
            </div>
        </div>

        <!-- 7. INDICADORES DE SALUD BUCAL -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">7. INDICADORES DE SALUD BUCAL</div>
            <div class="msp-row">
                <div class="msp-col-12">
                    <table class="table table-bordered table-condensed" style="font-size:11px; text-align:center;">
                        <tr>
                            <th colspan="3">HIGIENE ORAL SIMPLIFICADA</th>
                            <th colspan="2">ENFERMEDAD PERIODONTAL</th>
                            <th colspan="2">MAL OCLUSIÓN</th>
                            <th colspan="2">FLUOROSIS</th>
                        </tr>
                        <tr>
                            <td>PIEZAS</td>
                            <td>PLACA</td>
                            <td>CÁLCULO</td>
                            <td>LEVE</td>
                            <td><input type="radio" name="periodontal" value="leve"></td>
                            <td>ANGLE I</td>
                            <td><input type="radio" name="maloclusion" value="angle1"></td>
                            <td>LEVE</td>
                            <td><input type="radio" name="fluorosis" value="leve"></td>
                        </tr>
                        <tr>
                            <td>16 17 55</td>
                            <td><input type="text" name="placa_1" size="2"></td>
                            <td><input type="text" name="calc_1" size="2"></td>
                            <td>MODERADA</td>
                            <td><input type="radio" name="periodontal" value="mod"></td>
                            <td>ANGLE II</td>
                            <td><input type="radio" name="maloclusion" value="angle2"></td>
                            <td>MODERADA</td>
                            <td><input type="radio" name="fluorosis" value="mod"></td>
                        </tr>
                        <tr>
                            <td>11 21 61</td>
                            <td><input type="text" name="placa_2" size="2"></td>
                            <td><input type="text" name="calc_2" size="2"></td>
                            <td>SEVERA</td>
                            <td><input type="radio" name="periodontal" value="sev"></td>
                            <td>ANGLE III</td>
                            <td><input type="radio" name="maloclusion" value="angle3"></td>
                            <td>SEVERA</td>
                            <td><input type="radio" name="fluorosis" value="sev"></td>
                        </tr>
                        <tr>
                            <td>26 27 65</td>
                            <td><input type="text" name="placa_3" size="2"></td>
                            <td><input type="text" name="calc_3" size="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td>36 37 85</td>
                            <td><input type="text" name="placa_4" size="2"></td>
                            <td><input type="text" name="calc_4" size="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td>31 41 81</td>
                            <td><input type="text" name="placa_5" size="2"></td>
                            <td><input type="text" name="calc_5" size="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td>46 47 75</td>
                            <td><input type="text" name="placa_6" size="2"></td>
                            <td><input type="text" name="calc_6" size="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td><b>TOTAL</b></td>
                            <td><input type="text" name="placa_total" size="2"></td>
                            <td><input type="text" name="calc_total" size="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                            <td colspan="2"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- 8. INDICES CPO-ceo -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">8. INDICES CPO-ceo</div>
            <div class="msp-row">
                <div class="msp-col-6">
                    <table class="table table-bordered table-condensed text-center">
                        <tr>
                            <td></td>
                            <td>C</td>
                            <td>P</td>
                            <td>O</td>
                            <td>TOTAL</td>
                        </tr>
                        <tr>
                            <td><b>D</b></td>
                            <td><input type="text" name="cpod_c" size="2"></td>
                            <td><input type="text" name="cpod_p" size="2"></td>
                            <td><input type="text" name="cpod_o" size="2"></td>
                            <td><input type="text" name="cpod_total" size="2"></td>
                        </tr>
                        <tr>
                            <td><b>d</b></td>
                            <td><input type="text" name="ceod_c" size="2"></td>
                            <td><input type="text" name="ceod_e" size="2"></td>
                            <td><input type="text" name="ceod_o" size="2"></td>
                            <td><input type="text" name="ceod_total" size="2"></td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <!-- 9. SIMBOLOGÍA (Imagen Referencia + Descripcion) -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">9. SIMBOLOGÍA DEL ODONTOGRAMA</div>
            <p style="font-size:11px; padding:5px;">
                <b>Nota:</b> La simbología gráfica se generará automáticamente en el reporte PDF.
            <ul>
                <li><span style="color:red">*</span> Sellante Necesario</li>
                <li><span style="color:#1976D2">*</span> Sellante Realizado</li>
                <li><span style="color:red">X</span> Extracción</li>
                <li><span style="color:#1976D2">X</span> Pérdida Caries</li>
                <li><span style="color:red">⊗</span> Pérdida Otra</li>
                <li><span style="color:red">▲</span> Endodoncia</li>
                <li><span style="color:red; font-weight:bold;">=</span> Prótesis Total</li>
                <li><span style="color:red; font-weight:bold;">[ ]</span> Prótesis Fija</li>
                <li><span style="color:red; font-weight:bold;">( )</span> Prótesis Removible</li>
                <li><span
                        style="color:red; border:1px solid red; display:inline-block; width:12px; height:12px;"></span>
                    Corona</li>
            </ul>
            </p>
        </div>

        <!-- 10. PLANES DE DIAGNÓSTICO -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">10. PLANES DE DIAGNÓSTICO, TERAPÉUTICO Y EDUCACIONAL
            </div>
            <div class="msp-row">
                <div class="msp-col-12">
                    <div style="margin-bottom:5px;">
                        <label class="msp-checkbox-label" style="margin-right:15px;"><input type="checkbox"
                                name="plan_biometria" value="1"> Biometría</label>
                        <label class="msp-checkbox-label" style="margin-right:15px;"><input type="checkbox"
                                name="plan_quimica" value="1"> Química Sanguínea</label>
                        <label class="msp-checkbox-label" style="margin-right:15px;"><input type="checkbox"
                                name="plan_rayos" value="1"> Rayos-X</label>
                        <label class="msp-checkbox-label"><input type="checkbox" name="plan_otros" value="1">
                            Otros</label>
                    </div>
                    <textarea class="msp-textarea" name="plan_descripcion" rows="3"
                        placeholder="Descripción de los planes..."></textarea>
                </div>
            </div>
        </div>

        <!-- 11. DIAGNOSTICO (CIE-10 con Autocompletado) -->
        <input type="hidden" name="diagnosticos" id="input_diagnosticos_json">
        <?php include 'partials/diagnostics.php'; ?>

        <!-- Script para sincronizar diagnósticos al JSON antes de guardar -->
        <script>
            // Asegurar que el array global existe
            if (typeof currentDiagnosticosCIE10 === 'undefined') {
                var currentDiagnosticosCIE10 = [];
            }

            // Función de sincronización segura y robusta
            function syncDiagnosticosToHidden() {
                if (typeof currentDiagnosticosCIE10 !== 'undefined' && Array.isArray(currentDiagnosticosCIE10)) {
                    var json = JSON.stringify(currentDiagnosticosCIE10);
                    var currentVal = $("#input_diagnosticos_json").val();

                    // Solo actualizar si cambió o si está vacío y tenemos datos
                    if (currentVal !== json && currentDiagnosticosCIE10.length > 0) {
                        $("#input_diagnosticos_json").val(json);
                        // console.log("Sync CIE-10 Data: " + currentDiagnosticosCIE10.length + " items");
                    }
                }
            }

            // 1. Sincronizar al cambiar la tabla (Event Driven)
            $(document).on('DOMSubtreeModified', '.tabla-diagnosticos tbody', function () {
                syncDiagnosticosToHidden();
            });

            // 2. Sincronizar periódicamente (Backstop crítico)
            setInterval(syncDiagnosticosToHidden, 800);

            // 3. Sincronizar explícitamente al guardar
            $(document).on('mousedown keydown touchstart', '#btnGuardar', function () {
                syncDiagnosticosToHidden();
            });

            // 4. Sincronizar al cargar si ya hay datos
            $(document).ready(function () {
                setTimeout(syncDiagnosticosToHidden, 1000);
            });
        </script>

        <!-- 12. TRATAMIENTO -->
        <div class="msp-section">
            <div class="msp-section-title odonto-section-title">12. TRATAMIENTO</div>
            <table class="table table-bordered table-condensed odonto-tratamiento-table" id="tabla_tratamientos">
                <thead style="background:#f5f5f5;">
                    <tr>
                        <th style="width:5%;">Sesión</th>
                        <th style="width:10%;">Fecha</th>
                        <th style="width:25%;">Diagnósticos y Complicaciones</th>
                        <th style="width:25%;">Procedimientos</th>
                        <th style="width:20%;">Prescripciones</th>
                        <th style="width:15%;">Código y Firma</th>
                    </tr>
                </thead>
                <tbody id="body_tratamiento">
                    <tr>
                        <td><input type="text" class="msp-input-sm text-center" name="trat_sesion[]" value="1"></td>
                        <td><input type="date" class="msp-input-sm" name="trat_fecha[]"
                                value="<?php echo date('Y-m-d'); ?>"></td>
                        <td><textarea class="msp-textarea-sm" name="trat_diag[]" rows="2"></textarea></td>
                        <td><textarea class="msp-textarea-sm" name="trat_proc[]" rows="2"></textarea></td>
                        <td><textarea class="msp-textarea-sm" name="trat_presc[]" rows="2"></textarea></td>
                        <td><input type="text" class="msp-input-sm" name="trat_firma[]"></td>
                    </tr>
                    <tr>
                        <td><input type="text" class="msp-input-sm text-center" name="trat_sesion[]" value="2"></td>
                        <td><input type="date" class="msp-input-sm" name="trat_fecha[]"></td>
                        <td><textarea class="msp-textarea-sm" name="trat_diag[]" rows="2"></textarea></td>
                        <td><textarea class="msp-textarea-sm" name="trat_proc[]" rows="2"></textarea></td>
                        <td><textarea class="msp-textarea-sm" name="trat_presc[]" rows="2"></textarea></td>
                        <td><input type="text" class="msp-input-sm" name="trat_firma[]"></td>
                    </tr>
                    <tr>
                        <td><input type="text" class="msp-input-sm text-center" name="trat_sesion[]" value="3"></td>
                        <td><input type="date" class="msp-input-sm" name="trat_fecha[]"></td>
                        <td><textarea class="msp-textarea-sm" name="trat_diag[]" rows="2"></textarea></td>
                        <td><textarea class="msp-textarea-sm" name="trat_proc[]" rows="2"></textarea></td>
                        <td><textarea class="msp-textarea-sm" name="trat_presc[]" rows="2"></textarea></td>
                        <td><input type="text" class="msp-input-sm" name="trat_firma[]"></td>
                    </tr>
                </tbody>
            </table>
            <button type="button" class="btn btn-xs btn-success" onclick="masFilasTratamiento()"><i
                    class="fa fa-plus"></i> Añadir Sesión</button>
        </div>

        <!-- BOTONES -->
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="guardar_odonto"
            style="margin-top:20px; display:none;">
            <button class="btn btn-primary btn-lg msp-btn-primary" type="submit"><i class="fa fa-save"></i> GUARDAR
                FORMULARIO 033</button>
        </div>
    </div>
</form>


<?php
// HELPER PHP PARA RENDERIZAR DIENTE PRO (CON RECESION/MOVILIDAD)
function renderDientePro($numero, $esInferior = false, $esTemporal = false)
{
    global $d;
    $id = 'diente_' . $numero;

    // Valores Face/Global
    $valTop = $d[$id . '_top'] ?? '';
    $valBottom = $d[$id . '_bottom'] ?? '';
    $valLeft = $d[$id . '_left'] ?? '';
    $valRight = $d[$id . '_right'] ?? '';
    $valCenter = $d[$id . '_center'] ?? '';
    $valGeneral = $d[$id . '_general'] ?? '';

    // Valores Recesion/Movilidad
    $valRec = $d[$id . '_recesion'] ?? '';
    $valMov = $d[$id . '_movilidad'] ?? '';

    // Inputs Extras (Wrapped in Grid Cell)
    // Note: input element fits inside the cell
    $inputRec = '<div class="cell-grid h-input"><input type="text" name="' . $id . '_recesion" value="' . $valRec . '" class="extra-input-box" title="Recesión"></div>';
    $inputMov = '<div class="cell-grid h-input"><input type="text" name="' . $id . '_movilidad" value="' . $valMov . '" class="extra-input-box" title="Movilidad"></div>';

    // Numero (Wrapped in Grid Cell) - Remove styles here since class handles it
    $htmlNum = '<div class="cell-grid h-num"><div class="diente-numero" style="font-size:10px; font-weight:bold;">' . $numero . '</div></div>';

    // Diente Shape wrapper - CRITICAL: Restore pointer-events for click functionality
    $dienteInner = '
    <div class="diente-wrapper ' . ($esTemporal ? 'deciduo' : '') . '" id="dw_' . $numero . '" data-diente="' . $numero . '">
        <input type="hidden" name="' . $id . '_top" class="inp-top" id="inp-top-' . $numero . '" value="' . $valTop . '">
        <input type="hidden" name="' . $id . '_bottom" class="inp-bottom" id="inp-bottom-' . $numero . '" value="' . $valBottom . '">
        <input type="hidden" name="' . $id . '_left" class="inp-left" id="inp-left-' . $numero . '" value="' . $valLeft . '">
        <input type="hidden" name="' . $id . '_right" class="inp-right" id="inp-right-' . $numero . '" value="' . $valRight . '">
        <input type="hidden" name="' . $id . '_center" class="inp-center" id="inp-center-' . $numero . '" value="' . $valCenter . '">
        <input type="hidden" name="' . $id . '_general" class="inp-general" id="inp-general-' . $numero . '" value="' . $valGeneral . '">

        <div class="diente-shape" style="pointer-events: none;">
            <div class="cara cara-arriba" data-cara="top" style="pointer-events: auto;"></div>
            <div class="cara cara-izquierda" data-cara="left" style="pointer-events: auto;"></div>
            <div class="cara cara-abajo" data-cara="bottom" style="pointer-events: auto;"></div>
            <div class="cara cara-derecha" data-cara="right" style="pointer-events: auto;"></div>
            <div class="cara cara-centro" data-cara="center" style="pointer-events: auto;"></div>
            <div class="simbolo-overlay" id="sym-overlay-' . $numero . '" style="pointer-events: none;"></div>
        </div>
    </div>';

    // Wrap Tooth in Cell
    $htmlDiente = '<div class="cell-grid h-tooth">' . $dienteInner . '</div>';

    // Layout Columna
    $html = '<div class="diente-columna">';

    if (!$esInferior) {
        // SUPERIOR: Rec -> Mov -> Num -> Tooth
        // Stack grows DOWN
        if (!$esTemporal) {
            $html .= $inputRec;
            $html .= $inputMov;
        }
        $html .= $htmlNum;
        $html .= $htmlDiente;
    } else {
        // INFERIOR: Tooth -> Num -> Mov -> Rec
        // Stack grows DOWN
        $html .= $htmlDiente;
        $html .= $htmlNum;
        if (!$esTemporal) {
            $html .= $inputMov;
            $html .= $inputRec;
        }
    }

    $html .= '</div>';
    return $html;
}
?>



<script>
    // LÓGICA DEL ODONTOGRAMA PRO V2.5 (Multi-Simbología Stacked)
    if (typeof window.currentOdontoTool === 'undefined') {
        window.currentOdontoTool = 'caries';
    }

    $(document).ready(function () {
        console.log("MSP-033 V3.0 READY");
        // ALERT REMOVED AS REQUESTED

        // 1. Selector
        $(document).off('change', 'input[name="tool"]').on('change', 'input[name="tool"]', function () {
            window.currentOdontoTool = $(this).val();
        });

        // 2. Click
        $(document).off('click', '.cara').on('click', '.cara', function (e) {
            e.stopPropagation();
            aplicarHerramienta($(this), window.currentOdontoTool);
        });

        // 3. Restaurar visuales al cargar (si hubiera valores, aqui se parsearía el CSV)
        // Por simplicidad, el PHP backend deberia renderizar clases, pero como usamos JS para todo interactivo,
        // dependemos del estado inicial. Si PHP imprimió values en hidden, tocaría leerlos y pintar.
        // TODO: Implementar initVisuals() si se requiere edicion posterior.

        window.masFilasTratamiento = function () {
            var html = '<tr><td><input type="text" class="msp-input-sm text-center" name="trat_sesion[]"></td>' +
                '<td><input type="date" class="msp-input-sm" name="trat_fecha[]"></td>' +
                '<td><textarea class="msp-textarea-sm" name="trat_diag[]" rows="2"></textarea></td>' +
                '<td><textarea class="msp-textarea-sm" name="trat_proc[]" rows="2"></textarea></td>' +
                '<td><textarea class="msp-textarea-sm" name="trat_presc[]" rows="2"></textarea></td>' +
                '<td><input type="text" class="msp-input-sm" name="trat_firma[]"></td></tr>';
            $("#body_tratamiento").append(html);
        }
    });

    function aplicarHerramienta(elemento, herramienta) {
        var diente = elemento.closest('.diente-wrapper');
        var cara = elemento.data('cara'); // FIXED: Changed from 'pos' to 'cara' to match HTML
        var inputFace = diente.find('.inp-' + cara); // Now correctly finds .inp-top, .inp-left, etc.

        // --- HERRAMIENTAS GLOBALES (Lista Exacta) ---
        var herramientasGlobales = [
            'ausente', 'extraccion', 'perdida-caries', 'perdida-otra',
            'endodoncia', 'protesis-total', 'protesis-fija', 'protesis-removible',
            'sellante-nec', 'sellante-rea', 'corona'
        ];

        if (herramientasGlobales.includes(herramienta)) {
            var inpGen = diente.find('.inp-general');
            var currentVal = inpGen.val();
            var symbols = currentVal ? currentVal.split(',') : [];

            // Lógica de exclusividad:
            // "Ausente / Extracción / Perdida" son estados EXCLUYENTES entre sí usualmente.
            // Si elijo uno de estos, borro otros estados de "ausencia".
            var groupAbsence = ['ausente', 'extraccion', 'perdida-caries', 'perdida-otra'];

            // Si la herramienta es de ausencia, remover previos de ausencia
            if (groupAbsence.includes(herramienta)) {
                symbols = symbols.filter(s => !groupAbsence.includes(s));
            }
            // Si la herramienta es Prótesis, quizás remover otras prótesis? (Fija vs Removible en mismo diente?)
            // Dejamos libertad al usuario (stacking).

            // Toggle Logic
            if (symbols.includes(herramienta)) {
                // Remove
                symbols = symbols.filter(s => s !== herramienta);
            } else {
                // Add
                symbols.push(herramienta);
            }

            var newVal = symbols.join(',');
            inpGen.val(newVal);

            renderGlobalVisuals(diente, symbols);
            console.log("Global applied: " + newVal);
            return;
        }

        // --- HERRAMIENTA BORRAR ---
        if (herramienta === 'sano') {
            // Borrar cara clickeada
            inputFace.val('');
            elemento.removeClass('pat-caries pat-obturado');
            // Borrar TODO el diente? O solo la cara? "Borrador" suele borrar diente completo en UX simple.
            // Si usuario quiere borrar cara, click en cara. Si quiere borrar global, click en diente?
            // Haremos borrado TOTAL para limpiar errores rapido
            diente.find('input').val('');
            diente.find('.cara').removeClass('pat-caries pat-obturado');
            diente.removeClass('pat-corona');
            diente.find('.simbolo-overlay').empty();
            return;
        }

        // --- HERRAMIENTAS DE CARA ---
        // Limpiar previas en esa cara
        elemento.removeClass('pat-caries pat-obturado');

        // Añadir nueva
        elemento.addClass('pat-' + herramienta);
        inputFace.val(herramienta);
    }

    function renderGlobalVisuals(diente, symbols) {
        var overlay = diente.find('.simbolo-overlay');
        overlay.empty(); // Limpiar
        diente.removeClass('pat-corona'); // Limpiar wrapper class

        symbols.forEach(function (sym) {
            if (sym === 'corona') {
                diente.addClass('pat-corona');
                // Tambien agregamos span para asegurar consistencia? No necesario si CSS usa .pat-corona
            } else if (sym) { // Ignorar vacios
                // Append span con la clase visual
                var span = $('<span class="stacked-sym"></span>');
                span.addClass('sym-' + sym);
                overlay.append(span);
            }
        });
    }
</script>