<div class="subtitulo">
    <i class="fa-solid fa-align-left"></i>
    <p style="font-size: 16px; color: #002857; font-weight: 700; text-align: left; margin: 0px">
        Situación de amenaza y medio por el que se presentó
    </p>
</div>

<div class="columna" style="padding-top: 0px;">
    <p style="font-size: 14px; color: #002857; font-weight: 500; text-align: left; margin: 10px 20px 10px 20px">
        {{ pregunta_titulo|default:"81. Situación de amenaza *" }}
    </p>
</div>

<div class="especial-dos" style="margin-bottom: 10px;">

    <!-- Agrupar las opciones en filas de 3 -->
    {% for i in opciones|length|div:3|add:1|range %}
        {% if opciones|slice:i*3:i*3+3 %}
            <table style="margin-top: 4px;">
                <tr>
                    <td class="celda-i" style="width: 980px">
                        <div style="position: relative; height: 35px;">
                            {% for opcion in opciones|slice:i*3:i*3+3 %}
                                {% with index=forloop.counter0 offset=i|mul:3 total_index=offset|add:index %}
                                    <div class="chequeo-i" style="position: absolute; left: {{ total_index|div:3|mul:300 }}px; min-width: 300px; margin: 0px;">
                                        <div style="position: relative;">
                                            {% if seleccionadas and opcion.value in seleccionadas %}
                                                <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; text-align: left; margin: 0px;">
                                                {{ opcion.label }}
                                            </p>
                                            <!-- Input oculto para envío (solo si está marcado) -->
                                            <input type="checkbox" name="{{ nombre_campo }}" value="{{ opcion.value }}" 
                                                   {% if seleccionadas and opcion.value in seleccionadas %}checked{% endif %}
                                                   style="opacity: 0; position: absolute; width: 30px; height: 30px; left: 0; top: 0;">
                                        </div>
                                    </div>
                                {% endwith %}
                            {% endfor %}
                        </div>
                    </td>
                </tr>
            </table>
        {% endif %}
    {% endfor %}

    <!-- Opción "Otra" -->
    <table>
        <tr>
            <td class="celda-i" style="width: 156px">
                <div style="position: relative; height: 35px;">
                    <div class="chequeo-i" style="position: absolute; left: 0; min-width: 300px;">
                        <div style="position: relative;">
                            {% if seleccionadas and 'otra' in seleccionadas %}
                                <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; text-align: left; margin: 0px;">
                                Otra / 82. ¿Cuál?
                            </p>
                            <input type="checkbox" name="{{ nombre_campo }}" value="otra"
                                   {% if seleccionadas and 'otra' in seleccionadas %}checked{% endif %}
                                   style="opacity: 0; position: absolute; width: 30px; height: 30px; left: 0; top: 0;"
                                   id="{{ nombre_campo }}_otra">
                        </div>
                    </div>
                </div>
            </td>
            <td class="celda-i" style="width: 300px; display: inline-block; vertical-align: middle;">
                <input type="text" name="{{ nombre_campo }}_texto" 
                       value="{{ texto_otra|default:'' }}" 
                       {% if not seleccionadas or 'otra' not in seleccionadas %}disabled{% endif %}
                       style="width: 100%; padding: 5px;">
            </td>
        </tr>
    </table>

</div>