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

    <input type="checkbox" id="btns-medicamentos">
    <div class="container-modal">
        <div class="content-modal">
            <h2>MEDICAMENTOS Y ANTECEDENTES</h2>
            <hr>
            <label for="email"><b>De las siguientes ingresa MEDICAMENTOS Y ANTECEDENTES</b></label><span class="badge-warning">*</span>
            
            <!-- Contenedor de los textarea -->
            <div class="textarea-container">
            <textarea name="mtomam" id="mtomam" required placeholder="¿Toma medicamentos?"></textarea>
            <textarea name="mcualm" id="mcualm" required placeholder="¿Cuáles medicamentos?"></textarea>
            <textarea name="mprescripcion" id="mprescripcion" required placeholder="¿Con prescripción médica?"></textarea>
            <textarea name="mautomedicacion" id="mautomedicacion" required placeholder="¿Se automedica?"></textarea>
            <textarea name="mquirurgicos" id="mquirurgicos" required placeholder="Antecedentes quirúrgicos"></textarea>
            <textarea name="mhospitalizacion" id="mhospitalizacion" required placeholder="Historial de hospitalizaciones"></textarea>
            <textarea name="mtraumaticos" id="mtraumaticos" required placeholder="Antecedentes traumáticos"></textarea>
            <textarea name="mhipertencion" id="mhipertencion" required placeholder="¿Tiene hipertensión?"></textarea>
            <textarea name="mtoxico" id="mtoxico" required placeholder="Antecedentes tóxicos"></textarea>
            <textarea name="malergico" id="malergico" required placeholder="Antecedentes alérgicos"></textarea>
            <textarea name="minfeccioso" id="minfeccioso" required placeholder="Antecedentes infecciosos"></textarea>
            <textarea name="menfermedadr" id="menfermedadr" required placeholder="Otras enfermedades relevantes"></textarea>
            <textarea name="mulcera" id="mulcera" required placeholder="¿Tiene úlcera?"></textarea>
            <textarea name="mlepra" id="mlepra" required placeholder="¿Ha tenido lepra?"></textarea>
            <textarea name="mdiabetes" id="mdiabetes" required placeholder="¿Tiene diabetes?"></textarea>
            <textarea name="masma" id="masma" required placeholder="¿Tiene asma?"></textarea>
            <textarea name="mcancer" id="mcancer" required placeholder="¿Tiene cáncer?"></textarea>
            <textarea name="mepoc" id="mepoc" required placeholder="¿Tiene EPOC?"></textarea>
            <textarea name="mepilepsia" id="mepilepsia" required placeholder="¿Tiene epilepsia?"></textarea>
            <textarea name="mautoinmunes" id="mautoinmunes" required placeholder="¿Tiene enfermedades autoinmunes?"></textarea>
            <textarea name="mingresourgencias" id="mingresourgencias" required placeholder="Últimos ingresos a urgencias"></textarea>
            <textarea name="motrom" id="motrom" required placeholder="Otros antecedentes médicos"></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="insertarmedicamentos();">
        </div>
        
        <label for="btns-medicamentos" 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>