<table>
    <tr>
        <!-- Celda principal: pregunta + checkboxes horizontales -->
        <td class="celda-i" style="width: {{ ancho_opciones|default:'500px' }}">
            <label>{{ pregunta }}</label>
            <div style="position: relative; height: 35px;">
                {% for opcion in opciones %}
                    <div class="chequeo-i" style="position: absolute; left: {{ opcion.offset }}px; min-width: 200px;">
                        <div style="position: relative;">
                            <!-- Icono base (cuadrado vacío) -->
                            <i class="fa-regular fa-square" style="position: absolute; left: 0; font-size: 30px; color: #ccc;"></i>
                            <!-- Icono check si está seleccionado -->
                            {% if opcion.value in valores_seleccionados %}
                                <i class="fa-regular fa-square-check" style="position: absolute; left: 0; font-size: 30px; color: #888;"></i>
                            {% endif %}
                            <!-- Texto de la opción -->
                            <p style="position: absolute; left: 35px; top: 5px; font-size: 15px; color: #002857; text-align: left; margin: 0px;">
                                {{ opcion.label }}
                            </p>
                            <!-- Input oculto para envío -->
                            <input type="checkbox" name="{{ nombre_campo }}" value="{{ opcion.value }}"
                                   {% if opcion.value in valores_seleccionados %}checked{% endif %}
                                   style="opacity: 0; position: absolute; width: 30px; height: 30px; left: 0; top: 0;">
                        </div>
                    </div>
                {% endfor %}
            </div>
        </td>

        <!-- Campos adicionales (opcional) -->
        {% for campo in campos_adicionales %}
            <td class="celda-d" style="width: {{ campo.ancho }}; {{ campo.estilo|default:'' }}">
                <label>{{ campo.titulo }}</label>
                <input type="{{ campo.tipo|default:'text' }}" 
                       name="{{ campo.nombre }}" 
                       value="{{ campo.valor|default:'' }}"
                       id="{{ campo.nombre }}">
            </td>
        {% endfor %}
    </tr>
</table>