<table>
    <tr>
        <td class="celda-i" style="width: 530px">
            <label>{{ numeracion1 }}. Tipo de identificación *</label>
            <div style="position: relative; height: 35px;">
                <!-- Opción 1: Cédula de ciudadanía -->
                <div class="chequeo-i" style="position: absolute; left: 0; min-width: 200px;">
                    <div style="position: relative;">
                        <i class="fa-regular fa-square" style="position: absolute; left: 0; font-size: 30px; color: #ccc;"></i>
                        {% if tipoIdentificacion == 1 %}
                        <i class="fa-regular fa-square-check" style="position: absolute; left: 0; font-size: 30px; color: #888;"></i>
                        {% endif %}
                        <p style="position: absolute; left: 35px; top: 5px; font-size: 15px; color: #002857; text-align: left; margin: 0px;">
                            Cédula de ciudadanía
                        </p>
                    </div>
                </div>

                <!-- Opción 2: Cédula de extranjería -->
                <div class="chequeo-i" style="position: absolute; left: 185px; min-width: 200px;">
                    <div style="position: relative;">
                        <i class="fa-regular fa-square" style="position: absolute; left: 0; font-size: 30px; color: #ccc;"></i>
                        {% if tipoIdentificacion == 2 %}
                        <i class="fa-regular fa-square-check" style="position: absolute; left: 0; font-size: 30px; color: #888;"></i>
                        {% endif %}
                        <p style="position: absolute; left: 35px; top: 5px; font-size: 15px; color: #002857; text-align: left; margin: 0px;">
                            Cédula de extranjería
                        </p>
                    </div>
                </div>

                <!-- Opción 3: Pasaporte -->
                <div class="chequeo-i" style="position: absolute; left: 365px; min-width: 200px;">
                    <div style="position: relative;">
                        <i class="fa-regular fa-square" style="position: absolute; left: 0; font-size: 30px; color: #ccc;"></i>
                        {% if tipoIdentificacion == 3 %}
                        <i class="fa-regular fa-square-check" style="position: absolute; left: 0; font-size: 30px; color: #888;"></i>
                        {% endif %}
                        <p style="position: absolute; left: 35px; top: 5px; font-size: 15px; color: #002857; text-align: left; margin: 0px;">
                            Pasaporte
                        </p>
                    </div>
                </div>
            </div>
        </td>
        <td class="celda-d" style="width: 270px;padding-right: 0px;padding-left: 30px;">
            <label>{{ numeracion2 }}</label>
            <input type="text" id="documento" name="numeroDocumento" value="{{ numeroIdentificacion }}">
        </td>
        <td class="celda-d" style="width: 240px;">
            <label for="expedicion">{{ numeracion3 }}</label>
            <input type="text" id="expedicion" name="expedicion" value="{{ fechaExpedicion }}">
        </td>
    </tr>
</table>