<!--Ventana Modal-->
<form method="POST" id="formtoral">


<input type="checkbox" id="btns-toral">
    <div class="container-modal">
        <div class="content-modal">
            <h2>Tamizaje SALUD ORAL</h2>
            <hr>
            <label for="email"><b>De las siguientes ingresa el Motivo del TAMIZAJE SALUD ORAL</b></label><span class="badge-warning">*</span>
            
            <!-- Contenedor de los textarea -->
            <div class="textarea-container">
                <textarea name="tlavadientes" id="tlavadientes" required placeholder="SE ACUESTA SIN LAVARSE LOS DIENTES"></textarea>
                <textarea name="tgolpeb" id="tgolpeb" required placeholder="HA TENIDO ALGÚN GOLPE (TRAUMA) EN LA CARA O LA BOCA"></textarea>
                <textarea name="tsangred" id="tsangred" required placeholder="SANGRA AL ESCUPIR DESPUÉS DE LIMPIAR LOS DIENTES"></textarea>
                <textarea name="tprotesisd" id="tprotesisd" required placeholder="USA PRÓTESIS "></textarea>
                <textarea name="tcomesonrie" id="tcomesonrie" required placeholder="COME, SONRÍE HABLA SIN QUE SE CAIGA O MUEVA LA PRÓTESIS"></textarea>
                <textarea name="tlimpiab" id="tlimpiab" required placeholder="¿CON QUE LIMPIA SU BOCA O PRÓTESIS ?"></textarea>
                <textarea name="tdolorc" id="tdolorc" required placeholder="¿ DOLOR O MOLESTIA AL COMER,  MASTICAR O ABRIR LA BOCA?"></textarea>
                <textarea name="tmalolor" id="tmalolor" required placeholder="¿PERCIBE MAL OLOR EN SU BOCA O SE LO HAN MANIFES ?"></textarea>
                <textarea name="tperdidadientes" id="tperdidadientes" required placeholder="¿ HA PERDIDO DIENTES  ?"></textarea>
                <textarea name="tmaltratoprotesis" id="tmaltratoprotesis" required placeholder="¿ SIENTE QUÉ LE MALTRATA LA PRÓTESIS   ? "></textarea>
                <textarea name="tcicatriz" id="tcicatriz" required placeholder="¿PRESENTA ALGUNA HERIDA SIN CICATRIZAR COMO CONSECUENCIA DEL USO DE LA PRÓTESIS "></textarea>
                <textarea name="tbocabano" id="tbocabano" required placeholder="CUANTAS VECES SE BAÑA LA BOCA AL DIA "></textarea>
                <textarea name="tconsultaodont" id="tconsultaodont" required placeholder="ÚLTIMA CONSULTA AL ODONTÓLOGO "></textarea>
                <textarea name="tobservaciones" id="tobservaciones" required placeholder="OBSEVACIONES "></textarea>
                
            </div>


            <input type="hidden" id="csidpa" name="csidpa" value="<?php echo $d->idpa; ?>">
            <input type="hidden" id="csnopa" name="csnopa" value="<?php echo $d->nompa; ?>">
            
            <input type="button" class="registerbtn" name="submit" value="Guardar" onclick="insertartoral();">
        </div>
        
        <label for="btns-toral" class="cerrar-modal"></label>
    </div>
</form>
<!--Fin de Ventana Modal-->

<style>
    /* El contenedor general del modal */
    .container-modal {
        width: 100%;
        height: calc(100vh - 60px); /* ajustamos dejando espacio para el menú (ej. 60px) */
        position: fixed;
        top: 60px; /* inicia justo debajo del menú */
        left: 0;
        background-color: rgba(53, 9, 73, 0.8);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 99100;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
    }

    /* El contenido blanco interno del modal */
    .content-modal {
        background: white;
        padding: 20px;
        border-radius: 10px;
        max-width: 90vw;
        max-height: 90%;
        overflow-y: auto;
        box-sizing: border-box;
    }

    /* Grid con 3 columnas verticales */
    .textarea-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        padding: 10px 0;
    }

    /* Cada textarea */
    .textarea-container textarea {
        width: 100%;
        min-width: 200px;     /* Menor ancho */
        height: 50px;         /* Menor altura */
        resize: vertical;
        padding: 8px;
        font-size: 14px;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-sizing: border-box;
    }

    /* Botón guardar */
    .registerbtn {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    .registerbtn:hover {
        background-color: #45a049;
    }

    /* Botón para cerrar modal (opcional) */
    .cerrar-modal {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 30px;
        cursor: pointer;
    }
</style>
