<div style="margin-bottom: 15px;">
    <p style="font-size: 14px; color: #002857; font-weight: 500; margin: 0 0 8px 0;">
        {{ pregunta }}
    </p>
    <div style="display: flex; flex-wrap: wrap; gap: 25px; align-items: center;">
        {% for opcion in opciones %}
            <label class="checkbox-label" style="display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;">
                <!-- Icono base (cuadrado vacío) -->
                <i class="fa-regular fa-square" style="font-size: 20px; color: #ccc;"></i>
                <!-- Icono check (solo si está seleccionado) -->
                {% if opcion.value in valores_seleccionados %}
                    <i class="fa-regular fa-square-check" style="position: absolute; font-size: 20px; color: #888; left: 0; top: 0;"></i>
                {% endif %}
                <!-- 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: 20px; height: 20px; left: 0; top: 0;">
                <!-- Texto de la opción -->
                <span style="font-size: 14px; color: #002857;">
                    {{ opcion.label }}
                </span>
            </label>
        {% endfor %}
    </div>
</div>