<!--Ventana Modal-->
<form method="POST">
    <input type="checkbox" id="btns-modal">
    <div class="container-modal">
        <div class="content-modal">
            <h2>Nueva consulta</h2>
            <hr>
            <label for="email"><b>Motivo de la consulta</b></label><span class="badge-warning">*</span>
            
            <!-- Contenedor de los textarea -->
            <div class="textarea-container">
                <textarea name="consl" id="consl" required placeholder="Motivo.."></textarea>
                <textarea name="CSV" id="CSV" required placeholder="SATURACION"></textarea>
                <textarea name="CFC" id="CFC" required placeholder="Frecuencia Cardiaca"></textarea>
                <textarea name="CFR" id="CFR" required placeholder="Frecuencia Respiratoria"></textarea>
                <textarea name="CTMP" id="CTMP" required placeholder="Temperatura.."></textarea>
                <textarea name="CT" id="CT" required placeholder="Talla"></textarea>
                <textarea name="CP" id="CP" required placeholder="Peso"></textarea>
                <textarea name="CIMC" id="CIMC" required placeholder="Indice de Masa Corporal (IMC)"></textarea>
                <textarea name="CPA" id="CPA" required placeholder="Tension Arterial (PA)"></textarea>
                <textarea name="CPC" id="CPC" required placeholder="Perimetro de Cintura"></textarea>
                <textarea name="CGL" id="CGL" required placeholder="Glucometria"></textarea>
                <textarea name="CTV" id="CTV" required placeholder="Tamizaje Visual"></textarea>
                <textarea name="CTA" id="CTA" required placeholder="Tamizaje Auditivo.."></textarea>
                <textarea name="CCB_CL" id="CCB_CL" required placeholder="Protesis dental"></textarea>
                <textarea name="CNEU" id="CNEU" required placeholder="NEUROLÓGICO"></textarea>
                <textarea name="CTRX" id="CTRX" required placeholder="TÓRAX"></textarea>
                <textarea name="CDOR" id="CDOR" required placeholder="DORSO"></textarea>
                <textarea name="CABD" id="CABD" required placeholder="ABDOMEN"></textarea>
                <textarea name="CPIE" id="CPIE" required placeholder="PIEL Y ANEXOS"></textarea>
                <textarea name="CGUN" id="CGUN" required placeholder="GENITOURINARIO"></textarea>
                <textarea name="CEXT" id="CEXT" required placeholder="EXTREMIDADES"></textarea>
                <textarea name="CLIM" id="CLIM" required placeholder="LIMITACIONES"></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="enviar();">
        </div>
        <label for="btns-modal" 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>
