<?php
// FORMATO ESPECIAL: PERIODONTOGRAMA
// Basado en el estándar visual de la referencia (4 Vistas: Bucal/Palatino Sup, Lingual/Bucal Inf)
?>
<style>
    /* ESTILOS ESPECÍFICOS DEL PERIODONTOGRAMA */
    .perio-container {
        font-family: 'Arial', sans-serif;
        background: #fff;
        padding: 10px;
        overflow-x: auto;
    }

    /* GRID LAYOUT */
    .perio-chart-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        border: 1px solid #ccc;
        padding: 5px;
        background: #f9f9f9;
        position: relative;
    }

    .perio-header-title {
        background: #3c8dbc;
        color: white;
        padding: 5px 10px;
        font-weight: bold;
        font-size: 14px;
        border-radius: 3px;
        margin-bottom: 5px;
        text-transform: uppercase;
    }

    /* DIENTES Y RAICES */
    .dientes-row {
        display: flex;
        justify-content: center;
        position: relative;
        padding: 10px 0;
        /* Espacio para dibujar */
    }

    .diente-perio-wrapper {
        width: 38px;
        margin: 0 1px;
        text-align: center;
        position: relative;
    }

    /* Input Grid Cells (M-C-D) */
    .mediciones-grid {
        display: flex;
        width: 100%;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
    }

    .med-cell {
        width: 33.33%;
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        height: 16px;
        font-size: 9px;
        padding: 0;
        text-align: center;
        line-height: 16px;
        background: white;
    }

    .med-cell input {
        width: 100%;
        height: 100%;
        border: none;
        text-align: center;
        font-size: 10px;
        padding: 0;
        margin: 0;
        background: transparent;
    }

    /* PUNTOS VISUALES EN EL DIENTE - REFORZADO */
    .perio-dot {
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        z-index: 100;
        /* Max visibility */
        pointer-events: none;
        box-shadow: 0 0 2px white;
    }

    .dot-sangrado {
        background-color: #ff0000 !important;
        border: 2px solid white;
    }

    .dot-placa {
        background-color: #0000ff !important;
        border: 2px solid white;
    }

    .row-label {
        font-size: 9px;
        font-weight: bold;
        text-align: right;
        padding-right: 5px;
        min-width: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Contenedor de la parte visual del diente (SVG) */
    .tooth-visual {
        width: 38px;
        height: 80px;
        /* Alto suficiente para raíz y corona */
        position: relative;
        z-index: 10;
        cursor: pointer;
    }

    /* LAYER DE DIBUJO (CANVAS/SVG OVERLAY) */
    .drawing-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        pointer-events: none;
        /* Dejar pasar clicks a inputs */
    }

    /* TOOLBAR FLOTANTE */
    .perio-toolbar {
        position: sticky;
        top: 0;
        background: #fff;
        border: 2px solid #3c8dbc;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 90;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-bottom: 15px;
        border-radius: 5px;
    }

    .p-tool-btn {
        display: flex;
        align-items: center;
        padding: 3px 8px;
        border: 1px solid #ddd;
        background: #f4f4f4;
        cursor: pointer;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
    }

    .p-tool-btn:hover {
        background: #e0e0e0;
    }

    .p-tool-btn.active {
        background: #3c8dbc;
        color: white;
        border-color: #2c6b8c;
    }

    .p-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* SIMBOLOS CSS */
    .sym-fistula {
        width: 10px;
        height: 10px;
        background: red;
        border-radius: 50%;
        display: inline-block;
    }

    .sym-furca-1::before {
        content: "V";
        color: red;
        font-weight: bold;
    }

    .sym-furca-2::before {
        content: "∇";
        color: red;
        font-weight: bold;
        font-size: 14px;
    }

    .sym-furca-3::before {
        content: "▼";
        color: red;
        font-weight: bold;
        font-size: 14px;
    }

    .sym-mov-1::before {
        content: "I";
        color: blue;
    }

    .sym-mov-2::before {
        content: "II";
        color: blue;
    }

    .sym-mov-3::before {
        content: "III";
        color: blue;
    }

    /* MODAL INDICADORES */
    .indicator-box {
        position: absolute;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        font-weight: bold;
        z-index: 60;
        pointer-events: none;
    }
</style>

<form id="form_periodontograma" method="POST">
    <input type="hidden" name="tipo_formato" value="PERIODONTOGRAMA">

    <!-- HEADER -->
    <div style="text-align: center; margin-bottom: 10px;">
        <h3 style="margin:0; color:#3c8dbc;">PERIODONTOGRAMA CLÍNICO</h3>
        <p style="margin:0; font-size:12px; color:#666;">Registros de Profundidad de Sondaje (PS), Margen Gingival (MG)
            y Nivel de Inserción (NIC)</p>
    </div>

    <!-- TOOLBAR -->
    <div class="perio-toolbar">
        <label class="p-tool-btn"><input type="radio" name="ptool" value="select" checked> <i
                class="fa fa-mouse-pointer"></i> Seleccionar</label>

        <div style="border-left: 1px solid #ccc; height: 20px; margin: 0 5px;"></div>
        <span style="font-size:10px; color:#555; line-height:24px; margin-right:5px;">SIMBOLOGÍA:</span>

        <label class="p-tool-btn"><input type="radio" name="ptool" value="sangrado"> <span class="p-icon"
                style="background:red; border-radius:50%; width:8px; height:8px;"></span> Sangrado</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="placa"> <span class="p-icon"
                style="background:blue; border-radius:50%; width:8px; height:8px;"></span> Placa/Supuración</label>

        <div style="border-left: 1px solid #ccc; height: 20px; margin: 0 5px;"></div>

        <label class="p-tool-btn"><input type="radio" name="ptool" value="furca1"> <span
                style="color:red; font-weight:bold;">V</span> Furca I</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="furca2"> <span
                style="color:red; font-weight:bold;">∇</span> Furca II</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="furca3"> <span
                style="color:red; font-weight:bold;">▼</span> Furca III</label>

        <div style="border-left: 1px solid #ccc; height: 20px; margin: 0 5px;"></div>

        <label class="p-tool-btn"><input type="radio" name="ptool" value="mov1"> <span style="color:blue;">I</span>
            Movilidad 1</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="mov2"> <span style="color:blue;">II</span>
            Movilidad 2</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="mov3"> <span style="color:blue;">III</span>
            Movilidad 3</label>

        <div style="border-left: 1px solid #ccc; height: 20px; margin: 0 5px;"></div>

        <label class="p-tool-btn"><input type="radio" name="ptool" value="fistula"> <span
                style="background:red; width:10px; height:10px; border-radius:50%; display:inline-block;"></span>
            Fístula</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="ausente"> <span
                style="color:black; font-weight:bold;">X</span> Ausente</label>
        <label class="p-tool-btn"><input type="radio" name="ptool" value="implante"> <span
                style="border:1px solid black; padding:0 2px;">IMP</span> Implante</label>

        <div style="flex-grow:1;"></div>
        <button type="button" class="btn btn-sm btn-warning" onclick="deshacerUltimo()" style="margin-right: 5px;"><i
                class="fa fa-undo"></i> Deshacer Último</button>
        <button type="button" class="btn btn-sm btn-danger" onclick="limpiarPeriodontograma()"><i
                class="fa fa-eraser"></i> Limpiar Todo</button>
    </div>

    <div class="perio-container">

        <!-- 1. VESTIBULAR SUPERIOR (18-28) -->
        <div class="perio-chart-row">
            <div class="perio-header-title">MAXILAR SUPERIOR - VESTIBULAR</div>
            <div class="dientes-row" id="row_sup_vest">
                <!-- Etiquetas Izquierda -->
                <div class="row-label">
                    <div>MG (mm)</div>
                    <div>PS (mm)</div>
                    <div>NIC (mm)</div>
                </div>
                <!-- Dientes -->
                <?php
                // 18 al 11
                for ($i = 18; $i >= 11; $i--) {
                    echo renderDientePerio($i, 'sup', 'vest');
                }
                // 21 al 28
                for ($i = 21; $i <= 28; $i++) {
                    echo renderDientePerio($i, 'sup', 'vest');
                }
                ?>
            </div>
            <!-- Canvas Overlay para Lineas -->
            <!-- Se insertará dinámicamente con JS para cubrir toda la fila -->
        </div>

        <!-- 2. PALATINO SUPERIOR (18-28) -->
        <div class="perio-chart-row">
            <div class="perio-header-title">MAXILAR SUPERIOR - PALATINO</div>
            <div class="dientes-row" id="row_sup_pal">
                <div class="row-label">
                    <div>NIC (mm)</div>
                    <div>PS (mm)</div>
                    <div>MG (mm)</div>
                </div>
                <?php
                for ($i = 18; $i >= 11; $i--) {
                    echo renderDientePerio($i, 'sup', 'pal');
                }
                for ($i = 21; $i <= 28; $i++) {
                    echo renderDientePerio($i, 'sup', 'pal');
                }
                ?>
            </div>
        </div>

        <!-- 3. LINGUAL INFERIOR (48-38) -->
        <div class="perio-chart-row">
            <div class="perio-header-title">MANDIBULA INFERIOR - LINGUAL</div>
            <div class="dientes-row" id="row_inf_lin">
                <div class="row-label">
                    <div>NIC (mm)</div>
                    <div>PS (mm)</div>
                    <div>MG (mm)</div>
                </div>
                <?php
                for ($i = 48; $i >= 41; $i--) {
                    echo renderDientePerio($i, 'inf', 'lin');
                }
                for ($i = 31; $i <= 38; $i++) {
                    echo renderDientePerio($i, 'inf', 'lin');
                }
                ?>
            </div>
        </div>

        <!-- 4. VESTIBULAR INFERIOR (48-38) -->
        <div class="perio-chart-row">
            <div class="perio-header-title">MANDIBULA INFERIOR - VESTIBULAR</div>
            <div class="dientes-row" id="row_inf_vest">
                <div class="row-label">
                    <div>MG (mm)</div>
                    <div>PS (mm)</div>
                    <div>NIC (mm)</div>
                </div>
                <?php
                for ($i = 48; $i >= 41; $i--) {
                    echo renderDientePerio($i, 'inf', 'vest');
                }
                for ($i = 31; $i <= 38; $i++) {
                    echo renderDientePerio($i, 'inf', 'vest');
                }
                ?>
            </div>
        </div>

        <!-- DIAGNOSTICO -->
        <div class="box box-solid box-primary">
            <div class="box-header">DIAGNÓSTICO PERIODONTAL</div>
            <div class="box-body">
                <textarea class="form-control" name="perio_diagnostico" rows="3"
                    placeholder="Diagnóstico Periodontal (ej: Periodontitis Estadio III Grado B)"></textarea>
            </div>
        </div>



    </div>
</form>

<?php
function renderDientePerio($num, $arcada, $cara)
{
    // ID único: ej p_18_vest
    $id = "p_{$num}_{$cara}";

    // Determinar orden de inputs visuales
    // Sup-Vest: Raiz arriba, Corona abajo. Datos arriba (MG, PS, NIC) ? No, datos grid usually aligns with crown margin.
    // La imagen referencia tiene grid arriba del diente superior y abajo del inferior.
    // Vamos a estandarizar:
    // Superior: Grid (MG, PS, NIC) -> Diente (Raiz->Corona)
    // Inferior: Diente (Corona->Raiz) -> Grid (MG, PS, NIC)
    // Palatino/Lingual invertido? Usually chart shows mirror.

    // Simplificación Layout Visual
    // Diente SVG
    $svg = getToothSVG($num, $arcada); // Retorna <svg> string

    // Grillas de inputs (3 celdas)
    $gridMG = '<div class="mediciones-grid"><div class="med-cell"><input type="text" name="' . $id . '_mg_d" maxlength="2" class="inp-mg"></div><div class="med-cell"><input type="text" name="' . $id . '_mg_c" maxlength="2" class="inp-mg"></div><div class="med-cell"><input type="text" name="' . $id . '_mg_m" maxlength="2" class="inp-mg"></div></div>';
    $gridPS = '<div class="mediciones-grid"><div class="med-cell"><input type="text" name="' . $id . '_ps_d" maxlength="2" class="inp-ps"></div><div class="med-cell"><input type="text" name="' . $id . '_ps_c" maxlength="2" class="inp-ps"></div><div class="med-cell"><input type="text" name="' . $id . '_ps_m" maxlength="2" class="inp-ps"></div></div>';
    $gridNIC = '<div class="mediciones-grid"><div class="med-cell"><input type="text" readonly name="' . $id . '_nic_d" class="inp-nic"></div><div class="med-cell"><input type="text" readonly name="' . $id . '_nic_c" class="inp-nic"></div><div class="med-cell"><input type="text" readonly name="' . $id . '_nic_m" class="inp-nic"></div></div>'; // Calculado

    $html = '<div class="diente-perio-wrapper" data-diente="' . $num . '" data-cara="' . $cara . '">';

    if ($arcada == 'sup') {
        // Superior: Grid Arriba
        $html .= $gridMG; // Margen
        $html .= $gridPS; // Profundidad
        $html .= $gridNIC; // Nivel Insercion
        $html .= '<div class="tooth-visual" id="v_' . $id . '">' . $svg . '</div>'; // Diente
        $html .= '<div style="font-weight:bold; font-size:10px;">' . $num . '</div>';
    } else {
        // Inferior: Grid Abajo
        $html .= '<div style="font-weight:bold; font-size:10px;">' . $num . '</div>';
        $html .= '<div class="tooth-visual"  id="v_' . $id . '">' . $svg . '</div>'; // Diente
        $html .= $gridMG;
        $html .= $gridPS;
        $html .= $gridNIC;
    }

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

function getToothSVG($num, $arcada)
{
    // Generar SVG simplificado de Raíz + Corona
    // Molar (3 raices sup, 2 inf), Premolar (1-2), Canino/Inc (1)

    // Colores
    $stroke = "#000";
    $fill = "#fff";

    // Tipo de diente simplificado
    $isMolar = in_array($num, [16, 17, 18, 26, 27, 28, 36, 37, 38, 46, 47, 48]);
    $isPrem = in_array($num, [14, 15, 24, 25, 34, 35, 44, 45]);

    // SVG Path dummy pero visualmente decente
    // Viewbox 0 0 38 80
    // Corona height approx 20px. Raiz approx 50px.

    $svg = '<svg viewBox="0 0 38 80" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">';

    if ($arcada == 'sup') {
        // Raiz Arriba (0), Corona Abajo (80)
        // Margen gingival visual approx en Y=50

        // Raiz
        if ($isMolar) {
            $pathRaiz = "M4,50 Q4,10 12,5 Q19,20 19,30 Q19,20 26,5 Q34,10 34,50"; // 2 raices visuales (tripode)
        } else {
            $pathRaiz = "M8,50 Q8,5 19,2 Q30,5 30,50"; // 1 raiz
        }

        // Corona
        $pathCorona = "M4,50 Q4,75 10,78 Q19,80 28,78 Q34,75 34,50 Z";

        // Linea cervical (CEJ)
        $cej = "M4,50 Q19,55 34,50";

        $svg .= '<path d="' . $pathRaiz . '" fill="' . $fill . '" stroke="' . $stroke . '" stroke-width="1" class="root-path"/>';
        $svg .= '<path d="' . $pathCorona . '" fill="' . $fill . '" stroke="' . $stroke . '" stroke-width="1" class="crown-path"/>';
        $svg .= '<path d="' . $cej . '" fill="none" stroke="' . $stroke . '" stroke-width="0.5" />';

    } else {
        // Inferior: Corona Arriba (0), Raiz Abajo (80)
        // Margen gingival visual approx en Y=30

        // Corona
        $pathCorona = "M4,30 Q4,5 10,2 Q19,0 28,2 Q34,5 34,30 Z";

        // Raiz
        if ($isMolar) {
            $pathRaiz = "M4,30 Q4,70 12,75 Q19,60 19,50 Q19,60 26,75 Q34,70 34,30";
        } else {
            $pathRaiz = "M8,30 Q8,75 19,78 Q30,75 30,30";
        }

        $cej = "M4,30 Q19,35 34,30"; // Curve down slightly visual fix
        $cej = "M4,30 Q19,25 34,30"; // Curve up relative to root? No, curve towards root typically.

        $svg .= '<path d="' . $pathRaiz . '" fill="' . $fill . '" stroke="' . $stroke . '" stroke-width="1" class="root-path"/>';
        $svg .= '<path d="' . $pathCorona . '" fill="' . $fill . '" stroke="' . $stroke . '" stroke-width="1" class="crown-path"/>';
        // $svg .= '<path d="'.$cej.'" fill="none" stroke="'.$stroke.'" stroke-width="0.5" />';
    }

    $svg .= '</svg>';
    return $svg;
}
?>

<script>
    // --- LOGICA PERIODONTOGRAMA ---
    var undoStack = []; // Pila de acciones para deshacer

    $(document).ready(function () {
        console.log("Periodontograma Init");

        // 1. CALCULOS AUTOMATICOS (NIC = PS + MG)
        // MG negativo = Encía cubre corona (hiperplasia)
        // MG positivo = Recesión
        $(".inp-mg, .inp-ps").on("input", function () {
            calcularNIC($(this));
            actualizarGrafico($(this));
        });

        // 2. HERRAMIENTAS
        var currentTool = "select";
        $("input[name='ptool']").change(function () {
            currentTool = $(this).val();
            $(".p-tool-btn").removeClass("active");
            $(this).parent().addClass("active");
        });

        // 3. CLIC EN CELDAS (Sólo selecciona, el visual va al diente)
        // Delegación
        $(document).on("click", ".med-cell input", function (e) {
            var input = $(this);
            var name = input.attr('name');
            if (!name) return;

            var wrapper = input.closest('.diente-perio-wrapper');
            // Determinar sector basado en el nombre del input (termina en _d, _c, _m)
            var parts = name.split('_');
            var pos = parts[parts.length - 1]; // d, c, m

            // Logic: Tool 'sangrado'/'placa' toggles status
            if (currentTool == 'sangrado' || currentTool == 'placa') {
                var type = currentTool;
                var hiddenName = name + '_' + type;
                var hiddenInput = $("input[name='" + hiddenName + "']");

                // Toggle
                var isActive = false;
                if (hiddenInput.length > 0) {
                    hiddenInput.remove();
                    isActive = false;
                } else {
                    $("#form_periodontograma").append('<input type="hidden" name="' + hiddenName + '" value="1">');
                    isActive = true;
                }

                // Actualizar Visuales en Diente
                actualizarVisualesDiente(wrapper);
            }
        });

        // (Función actualizarVisualesDiente movida al scope global)
        // 4. CLIC EN DIENTE
        $(".tooth-visual").click(function (e) {
            var wrapper = $(this).closest('.diente-perio-wrapper');
            var dienteId = wrapper.attr('data-diente');
            var caraId = wrapper.attr('data-cara');
            var baseName = 'p_' + dienteId + '_' + caraId;

            if (currentTool == 'sangrado' || currentTool == 'placa') {
                // Calcular sector clickeado (Izquierda, Centro, Derecha)
                var offset = $(this).offset();
                var relX = e.pageX - offset.left;
                var w = $(this).width();

                var sector = 'c';
                if (relX < w / 3) sector = 'd';
                else if (relX > (w * 2) / 3) sector = 'm';
                else sector = 'c';

                // Usamos input PS como ancla. Nombres: p_{num}_{cara}_ps_d, etc.
                var inputName = baseName + '_ps_' + sector;
                var hiddenName = inputName + '_' + currentTool;
                var hiddenInput = $("input[name='" + hiddenName + "']");

                if (hiddenInput.length > 0) {
                    hiddenInput.remove();
                } else {
                    $("#form_periodontograma").append('<input type="hidden" name="' + hiddenName + '" value="1">');
                }
                actualizarVisualesDiente(wrapper);
                return; // Fin logica sangrado/placa
            }

            // LOGICA SIMBOLOS (Ausente, Implante, Furca, Movilidad, Fistula)
            var hiddenInput = $("input[name='" + baseName + "_simbolos']");
            if (hiddenInput.length == 0) {
                hiddenInput = $('<input type="hidden" name="' + baseName + "_simbolos" + '" value="">');
                $("#form_periodontograma").append(hiddenInput);
            }
            var currentSyms = hiddenInput.val() ? hiddenInput.val().split(',') : [];

            if (currentTool == 'ausente') {
                var prevOpacity = wrapper.css('opacity');
                wrapper.css('opacity', '0.3');
                if (!currentSyms.includes('ausente')) currentSyms.push('ausente');
                hiddenInput.val(currentSyms.join(','));
                undoStack.push({ type: 'css-sym', el: wrapper, prop: 'opacity', oldVal: prevOpacity, sym: 'ausente', hidden: hiddenInput });

            } else if (currentTool == 'implante') {
                var newIcon = $('<div class="indicator-box" style="top:40%; left:10%; color:black;">IMP</div>');
                $(this).append(newIcon);
                if (!currentSyms.includes('implante')) currentSyms.push('implante');
                hiddenInput.val(currentSyms.join(','));
                undoStack.push({ type: 'add-sym', el: newIcon, sym: 'implante', hidden: hiddenInput });

            } else if (currentTool.includes('furca')) {
                var icon = "V";
                if (currentTool == 'furca2') icon = "∇";
                if (currentTool == 'furca3') icon = "▼";
                var offset = $(this).offset();
                var x = e.pageX - offset.left - 5;
                var y = e.pageY - offset.top - 5;
                var newIcon = $('<div class="indicator-box" style="top:' + y + 'px; left:' + x + 'px; color:red;">' + icon + '</div>');
                $(this).append(newIcon);
                if (!currentSyms.includes(currentTool)) currentSyms.push(currentTool);
                hiddenInput.val(currentSyms.join(','));
                undoStack.push({ type: 'add-sym', el: newIcon, sym: currentTool, hidden: hiddenInput });

            } else if (currentTool.includes('mov')) {
                var icon = "I";
                if (currentTool == 'mov2') icon = "II";
                if (currentTool == 'mov3') icon = "III";
                var newIcon = $('<div class="indicator-box" style="top:0; left:10px; color:blue;">' + icon + '</div>');
                $(this).append(newIcon);
                if (!currentSyms.includes(currentTool)) currentSyms.push(currentTool);
                hiddenInput.val(currentSyms.join(','));
                undoStack.push({ type: 'add-sym', el: newIcon, sym: currentTool, hidden: hiddenInput });

            } else if (currentTool == 'fistula') {
                var newIcon = $('<div class="indicator-box" style="top:30%; left:30%; width:10px; height:10px; background:red; border-radius:50%;"></div>');
                $(this).append(newIcon);
                if (!currentSyms.includes('fistula')) currentSyms.push('fistula');
                hiddenInput.val(currentSyms.join(','));
                undoStack.push({ type: 'add-sym', el: newIcon, sym: 'fistula', hidden: hiddenInput });
            }
        });

        // 5. INICIALIZAR GRAFICOS
        // setTimeout(dibujarLineas, 500); // Esperar render
    });

    function deshacerUltimo() {
        if (undoStack.length === 0) return;

        var action = undoStack.pop();

        if (action.type === 'add') {
            action.el.remove();
        } else if (action.type === 'css') {
            action.el.css(action.prop, action.oldVal);
        } else if (action.type === 'class') {
            action.el.toggleClass(action.cls);
        }
    }

    function calcularNIC(input) {
        var wrapper = input.closest('.mediciones-grid');
        // Encontrar inputs hermanos
        // Estructura: .mediciones-grid > .med-cell > input
        // Wrapper tiene 3 celdas. Necesitamos saber si soy D, C, o M.
        // Nombre input: p_18_vest_mg_d
        var name = input.attr('name');
        if (!name) return;

        var parts = name.split('_'); // [p, 18, vest, mg, d]
        var type = parts[3]; // mg o ps
        var site = parts[4]; // d, c, m
        var baseName = parts.slice(0, 3).join('_'); // p_18_vest

        var valMG = parseInt($("input[name='" + baseName + "_mg_" + site + "']").val()) || 0;
        var valPS = parseInt($("input[name='" + baseName + "_ps_" + site + "']").val()) || 0;

        var nic = valPS + valMG; // Formula basica
        $("input[name='" + baseName + "_nic_" + site + "']").val(nic);
    }

    function actualizarGrafico(input) {
        // Aquí iría lógica compleja para redibujar canvas sobre los dientes
        // Por ahora, solo cálculos numéricos.
        // Para V2: Canvas overlay conectado punto a punto.
    }

    function limpiarPeriodontograma() {
        if (!confirm("¿Está seguro de borrar todo el periodontograma?")) return;

        $("#form_periodontograma")[0].reset();

        // Limpieza visual profunda
        $(".indicator-box").remove();
        $(".perio-dot").remove(); // Limpiar también mis dots

        $(".med-cell input").removeClass('sangrado-activo placa-activo');
        $(".diente-perio-wrapper").css('opacity', '1');
        undoStack = [];
    }

    // --- FUNCION GLOBAL para Visualización ---
    function actualizarVisualesDiente(wrapper) {
        wrapper.find('.perio-dot').remove();

        var dienteId = parseInt(wrapper.attr('data-diente'));
        // Dientes 11-28 y 51-65 son Superiores.
        // Dientes 31-48 y 71-85 son Inferiores.
        var isSup = (dienteId < 30 || (dienteId >= 51 && dienteId <= 65));
        var topCS = isSup ? 55 : 25;

        var caraId = wrapper.attr('data-cara');
        var baseName = 'p_' + dienteId + '_' + caraId;
        var sectors = ['d', 'c', 'm'];

        sectors.forEach(function (sec, idx) {
            var left = 2 + (idx * 13);

            // Buscar Inputs Específicos (PS es el primario, pero buscamos MG por si acaso)
            // Lo más seguro es buscar el input hidden específico que creamos: _ps_X_sangrado
            var sNamePS = baseName + '_ps_' + sec + '_sangrado';
            var sNameMG = baseName + '_mg_' + sec + '_sangrado';
            var hasSangrado = ($("input[name='" + sNamePS + "']").length > 0 || $("input[name='" + sNameMG + "']").length > 0);

            if (hasSangrado) {
                var dot = $('<div class="perio-dot dot-sangrado"></div>');
                dot.css({ top: topCS + 'px', left: left + 'px' });
                wrapper.find('.tooth-visual').append(dot);
            }

            var pNamePS = baseName + '_ps_' + sec + '_placa';
            var pNameMG = baseName + '_mg_' + sec + '_placa';
            var hasPlaca = ($("input[name='" + pNamePS + "']").length > 0 || $("input[name='" + pNameMG + "']").length > 0);

            if (hasPlaca) {
                var dot = $('<div class="perio-dot dot-placa"></div>');
                // Offset si hay sangrado
                if (hasSangrado) {
                    dot.css({ top: (topCS - 5) + 'px', left: (left + 5) + 'px' });
                } else {
                    dot.css({ top: topCS + 'px', left: left + 'px' });
                }
                wrapper.find('.tooth-visual').append(dot);
            }
        });
    }

    // Inicializar visuales al cargar (por si hay datos guardados)
    $(window).on('load', function () {
        $(".diente-perio-wrapper").each(function () {
            actualizarVisualesDiente($(this));
        });
    });
</script>