<table>
  <tr>
    <td class="celda-i" style="width: 80%">
      <p style="font-size: 15px; color: #002857; text-align: left; margin: 5px 0px;">
        {{ pregunta }} *
      </p>
    </td>
    <td class="celda-d" style="width: 20%">
      <div style="position: relative; height: 35px; margin-top: 5px;">
        <div class="chequeo-i" style="position: absolute; left: 0; min-width: 50%;">
          <div style="position: relative;">
            {% if valor == True %}
              <i class="fa-regular fa-square-check" style="position: absolute; left: 0; font-size: 30px; color: #888;"></i>
            {% else %}
              <i class="fa-regular fa-square" style="position: absolute; left: 0; font-size: 30px; color: #ccc;"></i>
            {% endif %}
            <p style="position: absolute; left: 35px; top: 5px; font-size: 15px; color: #002857; margin: 0;">Sí</p>
          </div>
        </div>
        <div class="chequeo-i" style="position: absolute; left: 60px; min-width: 50%;">
          <div style="position: relative;">
            {% if valor == False %}
              <i class="fa-regular fa-square-check" style="position: absolute; left: 0; font-size: 30px; color: #888;"></i>
            {% else %}
              <i class="fa-regular fa-square" style="position: absolute; left: 0; font-size: 30px; color: #ccc;"></i>
            {% endif %}
            <p style="position: absolute; left: 35px; top: 5px; font-size: 15px; color: #002857; margin: 0;">No</p>
          </div>
        </div>
      </div>
    </td>
  </tr>
</table>
