<table>
  <!-- Encabezados -->
  <tr>
    {% for columna in columnas %}
      {% if forloop.first %}
        <td class="celda-i" style="width: {{ columna.ancho }}; padding: 5px 5px 5px 20px;">
      {% elif forloop.last %}
        <td class="celda-d" style="width: {{ columna.ancho }}; padding: 5px 20px 5px 5px;">
      {% else %}
        <td class="celda-c" style="width: {{ columna.ancho }}; padding: 5px 5px 5px 5px;">
      {% endif %}
        <label style="margin-bottom: 0px; font-weight: bold;">{{ columna.nombre }}</label>
      </td>
    {% endfor %}
  </tr>

  <!-- Filas -->
  {% for fila in filas %}
  <tr>
    <!-- Columna 1 -->
    <td class="celda-i" style="width: {{ columnas.0.ancho }}; padding: 5px 5px 5px 20px;">
      {% if columnas.0.tipo == 'text' %}
        <input type="text" value="{{ fila.valor1|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.0.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor1 == 'Sí' or fila.valor1 == True or fila.valor1 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor1 == 'No' or fila.valor1 == False or fila.valor1 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>

    <!-- Columna 2 -->
    {% if columnas|length > 1 %}
    <td class="celda-c" style="width: {{ columnas.1.ancho }}; padding: 5px 5px 5px 5px;">
      {% if columnas.1.tipo == 'text' %}
        <input type="text" value="{{ fila.valor2|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.1.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor2 == 'Sí' or fila.valor2 == True or fila.valor2 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor2 == 'No' or fila.valor2 == False or fila.valor2 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>
    {% endif %}

    <!-- Columna 3 -->
    {% if columnas|length > 2 %}
    <td class="celda-c" style="width: {{ columnas.2.ancho }}; padding: 5px 5px 5px 5px;">
      {% if columnas.2.tipo == 'text' %}
        <input type="text" value="{{ fila.valor3|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.2.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor3 == 'Sí' or fila.valor3 == True or fila.valor3 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor3 == 'No' or fila.valor3 == False or fila.valor3 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>
    {% endif %}

    <!-- Columna 4 -->
    {% if columnas|length > 3 %}
    <td class="celda-c" style="width: {{ columnas.3.ancho }}; padding: 5px 5px 5px 5px;">
      {% if columnas.3.tipo == 'text' %}
        <input type="text" value="{{ fila.valor4|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.3.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor4 == 'Sí' or fila.valor4 == True or fila.valor4 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor4 == 'No' or fila.valor4 == False or fila.valor4 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>
    {% endif %}

    <!-- Columna 5 -->
    {% if columnas|length > 4 %}
    <td class="celda-c" style="width: {{ columnas.4.ancho }}; padding: 5px 5px 5px 5px;">
      {% if columnas.4.tipo == 'text' %}
        <input type="text" value="{{ fila.valor5|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.4.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor5 == 'Sí' or fila.valor5 == True or fila.valor5 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor5 == 'No' or fila.valor5 == False or fila.valor5 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>
    {% endif %}

    <!-- Columna 6 -->
    {% if columnas|length > 5 %}
    <td class="celda-c" style="width: {{ columnas.5.ancho }}; padding: 5px 5px 5px 5px;">
      {% if columnas.5.tipo == 'text' %}
        <input type="text" value="{{ fila.valor6|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.5.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor6 == 'Sí' or fila.valor6 == True or fila.valor6 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor6 == 'No' or fila.valor6 == False or fila.valor6 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>
    {% endif %}

    <!-- Columna 7 -->
    {% if columnas|length > 6 %}
    <td class="celda-d" style="width: {{ columnas.6.ancho }}; padding: 5px 20px 5px 5px;">
      {% if columnas.6.tipo == 'text' %}
        <input type="text" value="{{ fila.valor7|default:'' }}" style="min-height: 50px; width: 100%; border: 1px solid #ddd; padding: 5px; font-size: 14px; color: #002857;">
      {% elif columnas.6.tipo == 'checkbox' %}
        <div style="text-align: center; height: 50px; line-height: 50px; white-space: nowrap;">
          {% if fila.valor7 == 'Sí' or fila.valor7 == True or fila.valor7 == 1 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857; margin-right: 5px;">Sí</span>
          {% if fila.valor7 == 'No' or fila.valor7 == False or fila.valor7 == 0 %}
            <i class="fa-regular fa-square-check" style="font-size: 16px; color: #888; margin-left: 10px;"></i>
          {% else %}
            <i class="fa-regular fa-square" style="font-size: 16px; color: #ccc; margin-left: 10px;"></i>
          {% endif %}
          <span style="font-size: 13px; color: #002857;">No</span>
        </div>
      {% endif %}
    </td>
    {% endif %}
  </tr>
  {% endfor %}
</table>