{% extends "base.html" %}

{% block titulo %}
<title>Módulo {{ id }}</title>
{% endblock %}

{% block conteudo %}

{% if id == 1 %}

<div id="card-1" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto ">

    <!-- Header -->
    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Relacionamentos Saudáveis vs Abusivos</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <!-- Pergunta -->
    <h2 class="text-xl font-semibold mb-6">
        Seu parceiro pede a senha do seu celular para 
        <span class="font-bold">“provar confiança”</span>. Isso é:
    </h2>

    <!-- Opções -->
    <div class="space-y-4">
        <button class="opcao-1 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(1, false, this)">
            Demonstração de amor.
        </button>

        <button class="opcao-1 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(1, true, this)">
            Controle disfarçado.
        </button>

        <button class="opcao-1 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(1, false, this)">
            Algo normal em todo relacionamento.
        </button>
    </div>

    <!-- Feedback -->
    <p id="feedback-1" class="mt-4 hidden"></p>

    <!-- Botão -->
    <div class="flex justify-end mt-6">
        <button id="next-1"
                class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
                onclick="proximaPergunta(1)">
            Próxima →
        </button>
    </div>

</div>

<div id="card-2" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <!-- Header -->
    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Relacionamentos Saudáveis vs Abusivos</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-1/3"></div>
        </div>
    </div>

    <!-- Pergunta -->
    <h2 class="text-xl font-semibold mb-6">
        Ele critica suas roupas dizendo que é 
        <span class="font-bold">"para o seu bem"</span>. Isso pode indicar:
    </h2>

    <!-- Opções -->
    <div class="space-y-4">

        <button class="opcao-2 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(2, true, this)">
            Controle sobre sua autonomia.
        </button>

        <button class="opcao-2 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(2, false, this)">
            Cuidado e preocupação.
        </button>

        <button class="opcao-2 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(2, false, this)">
            Ele(a) só quer me proteger.
        </button>

    </div>

    <!-- Feedback -->
    <p id="feedback-2" class="mt-4 hidden"></p>

    <!-- Botão -->
    <div class="flex justify-end mt-6">
        <button id="next-2"
                class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
                onclick="proximaPergunta(2)">
            Próxima →
        </button>
    </div>

</div>


<div id="card-3" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Relacionamentos Saudáveis vs Abusivos</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ele(a) faz piadas que te deixam desconfortável na frente dos outros:
    </h2>

    <div class="space-y-4">
        <button class="opcao-3 w-full p-4 border rounded-xl text-left hover:border-gray-400 transition"
                onclick="resposta(3, false, this)">
            É só brincadeira.
        </button>

        <button class="opcao-3 w-full p-4 border rounded-xl text-left hover:border-gray-400 transition"
                onclick="resposta(3, true, this)">
            Se me machuca, não é brincadeira.
        </button>

        <button class="opcao-3 w-full p-4 border rounded-xl text-left hover:border-gray-400 transition"
                onclick="resposta(3, false, this)">
            Melhor ignorar para não criar confusão.
        </button>
    </div>

    <p id="feedback-3" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-3"
                class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
                onclick="proximaPergunta(3)">
            Próxima →
        </button>
    </div>

</div>



<div id="card-4" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Relacionamentos Saudáveis vs Abusivos</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ele(a) diz: 
        <span class="font-bold">“Ninguém vai te amar como eu”</span>. Isso é:
    </h2>

    <div class="space-y-4">
        <button class="opcao-4 w-full p-4 border rounded-xl text-left hover:border-gray-400 transition"
                onclick="resposta(4, false, this)">
            Frase romântica comum.
        </button>

        <button class="opcao-4 w-full p-4 border rounded-xl text-left hover:border-gray-400 transition"
                onclick="resposta(4, false, this)">
            Depende do tom usado.
        </button>

        <button class="opcao-4 w-full p-4 border rounded-xl text-left hover:border-gray-400 transition"
                onclick="resposta(4, true, this)">
            Pode ser uma forma de manipulação emocional.
        </button>
    </div>

    <p id="feedback-4" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-4"
                class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
                onclick="proximaPergunta(4)">
            Próxima →
        </button>
    </div>

</div>

<div id="card-5" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

<div class="mb-6">
    <div class="flex justify-between text-sm text-gray-500 mb-2">
        <span>Relacionamentos Saudáveis vs Abusivos</span>
        <span>5/7</span>
    </div>

    <div class="w-full bg-gray-200 h-2 rounded-full">
        <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
    </div>
</div>

<h2 class="text-xl font-semibold mb-6">
    Ele(a) pede localização em tempo real constantemente. Isso é:
</h2>

<div class="space-y-4">
    <button class="opcao-5 w-full p-4 border rounded-xl text-left hover:border-gray-400"
        onclick="resposta(5, false, this)">
        É cuidado.
    </button>

    <button class="opcao-5 w-full p-4 border rounded-xl text-left hover:border-gray-400"
        onclick="resposta(5, true, this)">
        Pode indicar desconfiança e controle.
    </button>

    <button class="opcao-5 w-full p-4 border rounded-xl text-left hover:border-gray-400"
        onclick="resposta(5, false, this)">
        Normal em relacionamento sério.
    </button>
</div>

<p id="feedback-5" class="mt-4 hidden"></p>

<div class="flex justify-end mt-6">
    <button id="next-5" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
        onclick="proximaPergunta(5)">
        Próxima →
    </button>
</div>

</div>

<div id="card-6" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <!-- Header -->
    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Relacionamentos Saudáveis vs Abusivos</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <!-- Pergunta -->
    <h2 class="text-xl font-semibold mb-6">
        Após uma discussão, ele(a) diz que você 
        <span class="font-bold">“está exagerando” ou “inventando coisas”</span>. Isso pode ser:
    </h2>

    <!-- Opções -->
    <div class="space-y-4">

        <button class="opcao-6 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(6, true, this)">
            Pode ser gaslighting, fazendo você duvidar da própria percepção.
        </button>

        <button class="opcao-6 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(6, false, this)">
            Apenas diferença de opinião.
        </button>

        <button class="opcao-6 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(6, false, this)">
            Algo comum em discussões.
        </button>

    </div>

    <!-- Feedback -->
    <p id="feedback-6" class="mt-4 hidden"></p>

    <!-- Botão -->
    <div class="flex justify-end mt-6">
        <button id="next-6"
                class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
                onclick="proximaPergunta(6)">
            Próxima →
        </button>
    </div>

</div>

<div id="card-7" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <!-- Header -->
    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Relacionamentos Saudáveis vs Abusivos</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <!-- Pergunta -->
    <h2 class="text-xl font-semibold mb-6">
        Você sente medo da reação dele(a) ao discordar:
    </h2>

    <!-- Opções -->
    <div class="space-y-4">

        <button class="opcao-7 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(7, false, this)">
            Significa que preciso evitar conflito.
        </button>

        <button class="opcao-7 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(7, false, this)">
            É só receio normal.
        </button>

        <button class="opcao-7 w-full text-left p-4 border rounded-xl hover:border-gray-400 transition"
                onclick="resposta(7, true, this)">
            Isso não é saudável e merece atenção.
        </button>

    </div>

    <!-- Feedback -->
    <p id="feedback-7" class="mt-4 hidden"></p>

    <!-- Botão -->
    <div class="flex justify-end mt-6">
        <button id="next-7"
                class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
                onclick="proximaPergunta(7)">
            Ver resultado →
        </button>
    </div>

</div>


<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-800">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>

{% endif %}



<!--MODULO 2-->
{% if id == 2 %}

<!-- CARD 8 -->
<div id="card-8" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Seu parceiro(a) faz você se sentir culpado(a) por querer sair com amigos. Isso é:
    </h2>

    <div class="space-y-4">
        <button class="opcao-8 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(8, false, this)">
            Prova de amor.
        </button>

        <button class="opcao-8 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(8, true, this)">
            Uma forma de manipulação emocional.
        </button>

        <button class="opcao-8 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(8, false, this)">
            Algo normal em todo relacionamento.
        </button>
    </div>

    <p id="feedback-8" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-8" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(8)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 9 -->
<div id="card-9" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[28%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ele(a) diz constantemente que você “não serve para nada”. Isso indica:
    </h2>

    <div class="space-y-4">
        <button class="opcao-9 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(9, true, this)">
            Violência psicológica, diminuindo sua autoestima.
        </button>

        <button class="opcao-9 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(9, false, this)">
            Apenas sinceridade.
        </button>

        <button class="opcao-9 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(9, false, this)">
            Um jeito de motivar você.
        </button>
    </div>

    <p id="feedback-9" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-9" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(9)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 10 -->
<div id="card-10" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ele(a) ameaça terminar o relacionamento se você não fizer o que ele(a) quer:
    </h2>

    <div class="space-y-4">
        <button class="opcao-10 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(10, false, this)">
            É só drama.
        </button>

        <button class="opcao-10 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(10, true, this)">
            Uma forma de chantagem emocional.
        </button>

        <button class="opcao-10 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(10, false, this)">
            Melhor ceder para evitar briga.
        </button>
    </div>

    <p id="feedback-10" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-10" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(10)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 11 -->
<div id="card-11" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ele(a) controla suas amizades dizendo que “não gosta de certas pessoas”:
    </h2>

    <div class="space-y-4">
        <button class="opcao-11 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(11, false, this)">
            Preocupação genuína.
        </button>

        <button class="opcao-11 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(11, false, this)">
            Depende da situação.
        </button>

        <button class="opcao-11 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(11, true, this)">
            Tentativa de isolamento e controle.
        </button>
    </div>

    <p id="feedback-11" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-11" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(11)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 12 -->
<div id="card-12" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>5/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ele(a) compara você negativamente com outras pessoas:
    </h2>

    <div class="space-y-4">
        <button class="opcao-12 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(12, false, this)">
            É cuidado.
        </button>

        <button class="opcao-12 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(12, true, this)">
            Pode ser violência psicológica.
        </button>

        <button class="opcao-12 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(12, false, this)">
            Normal em qualquer relação.
        </button>
    </div>

    <p id="feedback-12" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-12" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(12)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 13 -->
<div id="card-13" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Após uma discussão, ele(a) diz que você “está louco(a)”:
    </h2>

    <div class="space-y-4">
        <button class="opcao-13 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(13, true, this)">
            Pode ser gaslighting.
        </button>

        <button class="opcao-13 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(13, false, this)">
            Apenas diferença de opinião.
        </button>

        <button class="opcao-13 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(13, false, this)">
            Preciso evitar conflitos.
        </button>
    </div>

    <p id="feedback-13" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-13" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(13)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 14 -->
<div id="card-14" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Violência Psicológica</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você sente medo de falar o que pensa:
    </h2>

    <div class="space-y-4">
        <button class="opcao-14 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(14, true, this)">
            Isso mostra violência psicológica.
        </button>

        <button class="opcao-14 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(14, false, this)">
            É só receio normal.
        </button>

        <button class="opcao-14 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(14, false, this)">
            Preciso evitar conflito.
        </button>
    </div>

    <p id="feedback-14" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-14" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(14)">
            Ver resultado →
        </button>
    </div>
</div>

<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-1000">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>


{% endif %}

<!--MODULO 3-->
{% if id == 3 %}

<!-- CARD 15 -->
<div id="card-15" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você percebe que alguém está insistindo em saber onde você está a todo momento. O que fazer?
    </h2>

    <div class="space-y-4">
        <button class="opcao-15 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(15, false, this)">
            Ignorar, não é nada demais.
        </button>

        <button class="opcao-15 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(15, true, this)">
            Reconhecer que isso pode ser invasivo e impor limites.
        </button>

        <button class="opcao-15 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(15, false, this)">
            Compartilhar sempre para evitar conflitos.
        </button>
    </div>

    <p id="feedback-15" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-15" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(15)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 16 -->
<div id="card-16" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[28%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ao sentir que uma conversa está ficando agressiva, sua melhor atitude é:
    </h2>

    <div class="space-y-4">
        <button class="opcao-16 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(16, false, this)">
            Continuar discutindo para provar seu ponto.
        </button>

        <button class="opcao-16 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(16, true, this)">
            Manter a calma e se afastar para se proteger.
        </button>

        <button class="opcao-16 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(16, false, this)">
            Aceitar tudo para evitar briga.
        </button>
    </div>

    <p id="feedback-16" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-16" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(16)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 17 -->
<div id="card-17" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Se alguém tenta diminuir suas conquistas:
    </h2>

    <div class="space-y-4">
        <button class="opcao-17 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(17, false, this)">
            É só brincadeira.
        </button>

        <button class="opcao-17 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(17, true, this)">
            Reconhecer que isso afeta sua autoestima e não aceitar.
        </button>

        <button class="opcao-17 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(17, false, this)">
            Melhor não ligar.
        </button>
    </div>

    <p id="feedback-17" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-17" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(17)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 18 -->
<div id="card-18" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você sente que está sendo pressionado(a) a fazer algo contra sua vontade:
    </h2>

    <div class="space-y-4">
        <button class="opcao-18 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(18, false, this)">
            Normal em relacionamentos.
        </button>

        <button class="opcao-18 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(18, false, this)">
            Falta de consciência.
        </button>

        <button class="opcao-18 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(18, true, this)">
            Preciso respeitar meus limites.
        </button>
    </div>

    <p id="feedback-18" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-18" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(18)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 19 -->
<div id="card-19" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>5/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ao perceber sinais de manipulação:
    </h2>

    <div class="space-y-4">
        <button class="opcao-19 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(19, false, this)">
            Aceitar.
        </button>

        <button class="opcao-19 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(19, true, this)">
            Conversar e impor limites.
        </button>

        <button class="opcao-19 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(19, false, this)">
            Fingir que não percebe.
        </button>
    </div>

    <p id="feedback-19" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-19" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(19)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 20 -->
<div id="card-20" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Se você sente medo constante da reação do outro:
    </h2>

    <div class="space-y-4">
        <button class="opcao-20 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(20, true, this)">
            É um alerta de risco emocional.
        </button>

        <button class="opcao-20 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(20, false, this)">
            É só insegurança.
        </button>

        <button class="opcao-20 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(20, false, this)">
            Normal.
        </button>
    </div>

    <p id="feedback-20" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-20" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(20)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 21 -->
<div id="card-21" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autoproteção e Limites</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Quando você identifica comportamentos abusivos:
    </h2>

    <div class="space-y-4">
        <button class="opcao-21 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(21, true, this)">
            Reconhecer e dar importância ao que sente.
        </button>

        <button class="opcao-21 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(21, false, this)">
            Ignorar.
        </button>

        <button class="opcao-21 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(21, false, this)">
            Aceitar.
        </button>
    </div>

    <p id="feedback-21" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-21" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(21)">
            Ver resultado →
        </button>
    </div>
</div>

<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-800">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>


{% endif %}


<!--MODULO 4-->
{% if id == 4 %}

<!-- CARD 22 -->
<div id="card-22" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Um desconhecido pede fotos suas em uma rede social. O que fazer?
    </h2>

    <div class="space-y-4">
        <button class="opcao-22 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(22, false, this)">
            Enviar para não parecer mal-educada.
        </button>

        <button class="opcao-22 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(22, true, this)">
            Nunca compartilhar fotos pessoais com desconhecidos.
        </button>

        <button class="opcao-22 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(22, false, this)">
            Ignorar e continuar a conversa.
        </button>
    </div>

    <p id="feedback-22" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-22" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(22)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 23 -->
<div id="card-23" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[28%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você recebe mensagem de alguém dizendo ser “amigo de um amigo”:
    </h2>

    <div class="space-y-4">
        <button class="opcao-23 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(23, false, this)">
            Passar o número sem problemas.
        </button>

        <button class="opcao-23 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(23, true, this)">
            Confirmar com seu amigo antes de compartilhar.
        </button>

        <button class="opcao-23 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(23, false, this)">
            Não tem problema, é só um contato.
        </button>
    </div>

    <p id="feedback-23" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-23" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(23)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 24 -->
<div id="card-24" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Uma pessoa insiste em saber sua localização:
    </h2>

    <div class="space-y-4">
        <button class="opcao-24 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(24, false, this)">
            É cuidado.
        </button>

        <button class="opcao-24 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(24, true, this)">
            Pode ser invasão de privacidade.
        </button>

        <button class="opcao-24 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(24, false, this)">
            Normal.
        </button>
    </div>

    <p id="feedback-24" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-24" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(24)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 25 -->
<div id="card-25" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Alguém criou um perfil falso com suas fotos:
    </h2>

    <div class="space-y-4">
        <button class="opcao-25 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(25, false, this)">
            Ignorar.
        </button>

        <button class="opcao-25 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(25, false, this)">
            Tentar resolver com a pessoa.
        </button>

        <button class="opcao-25 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(25, true, this)">
            Denunciar imediatamente.
        </button>
    </div>

    <p id="feedback-25" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-25" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(25)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 26 -->
<div id="card-26" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>5/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ao postar fotos, como proteger sua privacidade:
    </h2>

    <div class="space-y-4">
        <button class="opcao-26 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(26, false, this)">
            Deixar tudo público.
        </button>

        <button class="opcao-26 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(26, true, this)">
            Usar configurações de privacidade.
        </button>

        <button class="opcao-26 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(26, false, this)">
            Não faz diferença.
        </button>
    </div>

    <p id="feedback-26" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-26" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(26)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 27 -->
<div id="card-27" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você recebe mensagens insistentes de desconhecido:
    </h2>

    <div class="space-y-4">
        <button class="opcao-27 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(27, true, this)">
            Bloquear e denunciar.
        </button>

        <button class="opcao-27 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(27, false, this)">
            Responder por educação.
        </button>

        <button class="opcao-27 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(27, false, this)">
            Continuar conversa.
        </button>
    </div>

    <p id="feedback-27" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-27" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(27)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 28 -->
<div id="card-28" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Segurança Digital</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Para se proteger online:
    </h2>

    <div class="space-y-4">
        <button class="opcao-28 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(28, true, this)">
            Usar senhas fortes e não compartilhar dados.
        </button>

        <button class="opcao-28 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(28, false, this)">
            Confiar em qualquer pessoa.
        </button>

        <button class="opcao-28 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(28, false, this)">
            Aceitar todos os pedidos.
        </button>
    </div>

    <p id="feedback-28" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-28" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(28)">
            Ver resultado →
        </button>
    </div>
</div>

<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-800">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>

{% endif %}

<!--MODULO 5-->
{% if id == 5 %}

<!-- CARD 29 -->
<div id="card-29" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você percebe que está sendo tratada diferente por ser menina. Isso é:
    </h2>

    <div class="space-y-4">
        <button class="opcao-29 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(29, false, this)">
            Algo normal.
        </button>

        <button class="opcao-29 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(29, true, this)">
            Discriminação de gênero.
        </button>

        <button class="opcao-29 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(29, false, this)">
            Só brincadeira.
        </button>
    </div>

    <p id="feedback-29" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-29" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(29)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 30 -->
<div id="card-30" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[28%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Comentários ofensivos por ser mulher:
    </h2>

    <div class="space-y-4">
        <button class="opcao-30 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(30, false, this)">
            Liberdade de expressão.
        </button>

        <button class="opcao-30 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(30, true, this)">
            Assédio moral ou sexual.
        </button>

        <button class="opcao-30 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(30, false, this)">
            Apenas opinião.
        </button>
    </div>

    <p id="feedback-30" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-30" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(30)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 31 -->
<div id="card-31" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Direito de estudar e escolher profissão:
    </h2>

    <div class="space-y-4">
        <button class="opcao-31 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(31, false, this)">
            Opcional.
        </button>

        <button class="opcao-31 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(31, true, this)">
            Garantido por lei.
        </button>

        <button class="opcao-31 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(31, false, this)">
            Só para maiores.
        </button>
    </div>

    <p id="feedback-31" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-31" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(31)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 32 -->
<div id="card-32" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Se você sofre violência:
    </h2>

    <div class="space-y-4">
        <button class="opcao-32 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(32, false, this)">
            Ficar em silêncio.
        </button>

        <button class="opcao-32 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(32, false, this)">
            Esperar melhorar.
        </button>

        <button class="opcao-32 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(32, true, this)">
            Procurar ajuda e denunciar.
        </button>
    </div>

    <p id="feedback-32" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-32" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(32)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 33 -->
<div id="card-33" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>5/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Alguém controla suas escolhas:
    </h2>

    <div class="space-y-4">
        <button class="opcao-33 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(33, false, this)">
            É cuidado.
        </button>

        <button class="opcao-33 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(33, true, this)">
            Violência psicológica.
        </button>

        <button class="opcao-33 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(33, false, this)">
            Normal.
        </button>
    </div>

    <p id="feedback-33" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-33" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(33)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 34 -->
<div id="card-34" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Seu direito de ser ouvida:
    </h2>

    <div class="space-y-4">
        <button class="opcao-34 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(34, true, this)">
            Sua voz importa.
        </button>

        <button class="opcao-34 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(34, false, this)">
            Não é tão importante.
        </button>

        <button class="opcao-34 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(34, false, this)">
            Outros são mais importantes.
        </button>
    </div>

    <p id="feedback-34" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-34" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(34)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 35 -->
<div id="card-35" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Direitos e Igualdade</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ao identificar abuso:
    </h2>

    <div class="space-y-4">
        <button class="opcao-35 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(35, true, this)">
            Reconhecer e buscar apoio.
        </button>

        <button class="opcao-35 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(35, false, this)">
            Ignorar.
        </button>

        <button class="opcao-35 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(35, false, this)">
            Aceitar.
        </button>
    </div>

    <p id="feedback-35" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-35" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(35)">
            Ver resultado →
        </button>
    </div>
</div>

<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-800">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>


{% endif %}

<!--MODULO 6-->

{% if id == 6 %}

<!-- CARD 36 -->
<div id="card-36" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Sua amiga conta que sofre violência psicológica. O que fazer?
    </h2>

    <div class="space-y-4">
        <button class="opcao-36 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(36, false, this)">
            Dizer para ignorar.
        </button>

        <button class="opcao-36 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(36, true, this)">
            Ouvir, validar e oferecer apoio.
        </button>

        <button class="opcao-36 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(36, false, this)">
            Criticar por não sair da relação.
        </button>
    </div>

    <p id="feedback-36" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-36" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(36)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 37 -->
<div id="card-37" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[28%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Sua amiga sofre assédio:
    </h2>

    <div class="space-y-4">
        <button class="opcao-37 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(37, true, this)">
            Incentivar denúncia e proteção.
        </button>

        <button class="opcao-37 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(37, false, this)">
            Ficar em silêncio.
        </button>

        <button class="opcao-37 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(37, false, this)">
            Dizer que é normal.
        </button>
    </div>

    <p id="feedback-37" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-37" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(37)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 38 -->
<div id="card-38" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Sua amiga tem medo de contar:
    </h2>

    <div class="space-y-4">
        <button class="opcao-38 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(38, false, this)">
            Obrigar a contar.
        </button>

        <button class="opcao-38 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(38, true, this)">
            Respeitar o tempo e apoiar.
        </button>

        <button class="opcao-38 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(38, false, this)">
            Pressionar novamente.
        </button>
    </div>

    <p id="feedback-38" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-38" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(38)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 39 -->
<div id="card-39" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Se ela está em perigo imediato:
    </h2>

    <div class="space-y-4">
        <button class="opcao-39 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(39, false, this)">
            Não se envolver.
        </button>

        <button class="opcao-39 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(39, false, this)">
            Esperar.
        </button>

        <button class="opcao-39 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(39, true, this)">
            Procurar ajuda imediatamente.
        </button>
    </div>

    <p id="feedback-39" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-39" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(39)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 40 -->
<div id="card-40" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>5/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Sua amiga se sente culpada:
    </h2>

    <div class="space-y-4">
        <button class="opcao-40 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(40, false, this)">
            Culpar ela.
        </button>

        <button class="opcao-40 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(40, true, this)">
            Reforçar que a culpa não é dela.
        </button>

        <button class="opcao-40 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(40, false, this)">
            Evitar o assunto.
        </button>
    </div>

    <p id="feedback-40" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-40" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(40)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 41 -->
<div id="card-41" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Ao apoiar alguém:
    </h2>

    <div class="space-y-4">
        <button class="opcao-41 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(41, true, this)">
            Escutar sem julgar.
        </button>

        <button class="opcao-41 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(41, false, this)">
            Dar ordens.
        </button>

        <button class="opcao-41 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(41, false, this)">
            Ignorar.
        </button>
    </div>

    <p id="feedback-41" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-41" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(41)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 42 -->
<div id="card-42" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Apoio e Empatia</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Se ela busca ajuda profissional:
    </h2>

    <div class="space-y-4">
        <button class="opcao-42 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(42, true, this)">
            Apoiar e acompanhar.
        </button>

        <button class="opcao-42 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(42, false, this)">
            Desencorajar.
        </button>

        <button class="opcao-42 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(42, false, this)">
            Minimizar.
        </button>
    </div>

    <p id="feedback-42" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-42" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(42)">
            Ver resultado →
        </button>
    </div>
</div>

<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-800">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>


{% endif %}

<!--MODULO 7-->
{% if id == 7 %}

<!-- CARD 43 -->
<div id="card-43" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>1/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[14%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Você sente que só é feliz em um relacionamento:
    </h2>

    <div class="space-y-4">
        <button class="opcao-43 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(43, false, this)">
            Depende emocionalmente de alguém.
        </button>

        <button class="opcao-43 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(43, true, this)">
            Sua felicidade também vem de você.
        </button>

        <button class="opcao-43 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(43, false, this)">
            É normal não ficar bem sozinha.
        </button>
    </div>

    <p id="feedback-43" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-43" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(43)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 44 -->
<div id="card-44" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>2/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[28%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Alguém decide por você:
    </h2>

    <div class="space-y-4">
        <button class="opcao-44 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(44, true, this)">
            Afeta sua autonomia e liberdade.
        </button>

        <button class="opcao-44 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(44, false, this)">
            Afeta só rotina.
        </button>

        <button class="opcao-44 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(44, false, this)">
            Não tem importância.
        </button>
    </div>

    <p id="feedback-44" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-44" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(44)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 45 -->
<div id="card-45" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>3/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[42%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Culpa por dizer "não":
    </h2>

    <div class="space-y-4">
        <button class="opcao-45 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(45, false, this)">
            Melhor aceitar.
        </button>

        <button class="opcao-45 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(45, true, this)">
            Precisa fortalecer limites.
        </button>

        <button class="opcao-45 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(45, false, this)">
            Não sabe se impor.
        </button>
    </div>

    <p id="feedback-45" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-45" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(45)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 46 -->
<div id="card-46" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>4/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[57%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Autonomia emocional:
    </h2>

    <div class="space-y-4">
        <button class="opcao-46 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(46, false, this)">
            Depender dos outros.
        </button>

        <button class="opcao-46 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(46, false, this)">
            Evitar relações.
        </button>

        <button class="opcao-46 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(46, true, this)">
            Decidir por si mesma.
        </button>
    </div>

    <p id="feedback-46" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-46" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(46)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 47 -->
<div id="card-47" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>5/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[71%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Falar sobre emoções:
    </h2>

    <div class="space-y-4">
        <button class="opcao-47 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(47, false, this)">
            Fraqueza.
        </button>

        <button class="opcao-47 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(47, true, this)">
            Autonomia emocional.
        </button>

        <button class="opcao-47 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(47, false, this)">
            Criar problemas.
        </button>
    </div>

    <p id="feedback-47" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-47" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(47)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 48 -->
<div id="card-48" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>6/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-[85%]"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Manipulação emocional:
    </h2>

    <div class="space-y-4">
        <button class="opcao-48 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(48, true, this)">
            Gaslighting.
        </button>

        <button class="opcao-48 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(48, false, this)">
            Só opinião.
        </button>

        <button class="opcao-48 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(48, false, this)">
            Melhor aceitar.
        </button>
    </div>

    <p id="feedback-48" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-48" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(48)">
            Próxima →
        </button>
    </div>
</div>

<!-- CARD 49 -->
<div id="card-49" class="bg-white rounded-2xl shadow p-8 max-w-3xl mx-auto hidden">

    <div class="mb-6">
        <div class="flex justify-between text-sm text-gray-500 mb-2">
            <span>Autonomia Emocional</span>
            <span>7/7</span>
        </div>

        <div class="w-full bg-gray-200 h-2 rounded-full">
            <div class="bg-purple-900 h-2 rounded-full w-full"></div>
        </div>
    </div>

    <h2 class="text-xl font-semibold mb-6">
        Para fortalecer sua autonomia:
    </h2>

    <div class="space-y-4">
        <button class="opcao-49 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(49, true, this)">
            Valorizar escolhas e limites.
        </button>

        <button class="opcao-49 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(49, false, this)">
            Depender dos outros.
        </button>

        <button class="opcao-49 w-full p-4 border rounded-xl text-left hover:border-gray-400"
            onclick="resposta(49, false, this)">
            Evitar sentimentos.
        </button>
    </div>

    <p id="feedback-49" class="mt-4 hidden"></p>

    <div class="flex justify-end mt-6">
        <button id="next-49" class="bg-purple-900 text-white px-6 py-2 rounded-lg hidden"
            onclick="proximaPergunta(49)">
            Ver resultado →
        </button>
    </div>
</div>


<div id="resultado-final" class="hidden flex items-center justify-center p-8">

    <div class="bg-white rounded-2xl shadow-md w-full max-w-3xl p-10 text-center">

        <!-- Círculo -->
        <div id="circulo-resultado"
             class="w-28 h-28 flex items-center justify-center rounded-full bg-green-200 mx-auto mb-6">
             
            <span id="porcentagem" class="text-3xl font-bold text-gray-800">
                0%
            </span>
        </div>

        <!-- Título -->
        <h2 class="text-2xl font-semibold mb-3">Resultado</h2>

        <!-- Texto -->
        <p id="pontuacao" class="text-gray-600 mb-4"></p>

        <!-- Mensagem -->
        <p id="mensagem" class="font-medium mb-8"></p>

        <!-- Botões -->
        <div class="flex justify-center gap-4">

            <button onclick="refazerTeste()"
                class="flex items-center gap-2 px-5 py-3 border rounded-lg hover:bg-gray-100">
                ↻ Refazer
            </button>

            <button onclick="window.location.href='/modulos16'"
                class="flex items-center gap-2 px-5 py-3 bg-purple-900 text-white rounded-lg hover:bg-purple-800">
                ← Voltar aos módulos
            </button>

        </div>

    </div>

</div>

</div>

{% endif %}

<script>
const MODULO_ID = "{{ id }}";
const USUARIO_ID = "{{ session['usuario_id'] }}";

let pontuacao = 0;
let perguntasRespondidas = 0;

// STATUS DO MÓDULO
let statusAtual = localStorage.getItem("modulo_" + MODULO_ID);

if (!statusAtual) {
    marcarModulo(MODULO_ID, false);
} else if (statusAtual === "Em andamento") {
    marcarModulo(MODULO_ID, "andamento");
}

// PROGRESSO
function getProgresso() {
    return JSON.parse(localStorage.getItem("progresso")) || {};
}

function salvarProgresso(progresso) {
    localStorage.setItem("progresso", JSON.stringify(progresso));
}

// RESPOSTA
function resposta(numero, correta, botao) {

    // evita clicar várias vezes
    const opcoes = document.querySelectorAll(".opcao-" + numero);
    opcoes.forEach(btn => btn.disabled = true);

    perguntasRespondidas++;

    if (correta) {
        pontuacao++;
        botao.classList.add("border-green-500", "bg-green-50");
    } else {
        botao.classList.add("border-red-500", "bg-red-50");
    }

    // mostra feedback
    const feedback = document.getElementById("feedback-" + numero);
    feedback.classList.remove("hidden");

    if (correta) {
        feedback.innerText = "Resposta correta!";
        feedback.classList.add("text-green-600");
    } else {
        feedback.innerText = "Resposta incorreta.";
        feedback.classList.add("text-red-600");
    }

    // mostra botão próxima
    document.getElementById("next-" + numero).classList.remove("hidden");

    // marca como em andamento
    localStorage.setItem("modulo_" + MODULO_ID, "Em andamento");
}

// PRÓXIMA PERGUNTA
function proximaPergunta(atual) {

    document.getElementById("card-" + atual).classList.add("hidden");

    if (atual < 7) {
        document.getElementById("card-" + (atual + 1)).classList.remove("hidden");
    } else {

        // FINAL DO TESTE
        document.querySelectorAll('[id^="card-"]').forEach(c => c.classList.add("hidden"));

        document.getElementById("resultado-final").classList.remove("hidden");
        document.getElementById("btn-refazer").classList.remove("hidden");

        mostrarResultado();

        // marca como concluído
        localStorage.setItem("modulo_" + MODULO_ID, "Concluído");
    }
}

// RESULTADO
function mostrarResultado() {

    const total = 7;

    // garante valor correto
    let acertos = pontuacao;

    if (typeof acertos !== "number" || isNaN(acertos)) {
        acertos = 0;
    }

    // cálculo correto
    const porcentagem = Math.round((acertos / total) * 100);

    // DEBUG (pode apagar depois)
    console.log("Acertos:", acertos);
    console.log("Porcentagem:", porcentagem);

    // elementos
    const textoPontuacao = document.getElementById("pontuacao");
    const textoPorcentagem = document.getElementById("porcentagem");
    const mensagem = document.getElementById("mensagem");
    const circulo = document.getElementById("circulo-resultado");

    // textos
    textoPontuacao.innerText = `Você acertou ${acertos} de ${total} perguntas.`;
    textoPorcentagem.innerText = porcentagem + "%";

    // RESET visual (MUITO IMPORTANTE)
    mensagem.className = "font-medium mb-8";
    circulo.className = "w-28 h-28 flex items-center justify-center rounded-full mx-auto mb-6";

    // lógica correta
    if (acertos <= 2) {
        mensagem.innerText = "Atenção! Existem sinais de alerta.";
        mensagem.classList.add("text-red-500");
        circulo.classList.add("bg-red-200");

    } else if (acertos <= 4) {
        mensagem.innerText = "Fique atento(a)!";
        mensagem.classList.add("text-yellow-500");
        circulo.classList.add("bg-yellow-200");

    } else {
        mensagem.innerText = "Parabéns! Você demonstrou bom conhecimento!";
        mensagem.classList.add("text-green-600");
        circulo.classList.add("bg-green-200");
    }

}
// REFAZER TESTE
function refazerTeste() {
    pontuacao = 0;
    perguntasRespondidas = 0;

    localStorage.removeItem("modulo_" + MODULO_ID);

    location.reload();
}
</script>

<script>
window.onload = function() {
    document.getElementById("resultado-final").classList.add("hidden");
}
</script>
{% endblock %}