{% extends "enap_designsystem/base.html" %}
{% load static wagtailcore_tags %}

{% block title %}
    <title>{{ page.page_title }}</title>
{% endblock %}

{%block govnavbar %}
    <div style="background-color: #071E41;">
        <div class="menu">
            <div class="logo">
                <img style="width: 51px; height: 18px;" src="{% static 'enap_designsystem/icons/logo-white.png' %}" alt="Logo GovBR" height="40">
            </div>
            <a href="https://www.gov.br/secom/pt-br/acesso-a-informacao/comunicabr">Comunica BR</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/acessoainformacao/pt-br">Acesso à informação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/participacao-social/">Participe</a>
            <div class="separator"></div>
            <a href="https://www4.planalto.gov.br/legislacao/">Legislação</a>
            <div class="separator"></div>
            <a href="https://www.gov.br/pt-br/orgaos-do-governo">Órgãos do Governo</a>
        </div>
    </div>
{% endblock %}

{% block navbar %}
    {% if page.navbar %}
        {% include "enap_designsystem/blocks/navbar/navbar_block.html" with navbar=page.navbar %}
    {% else %}
        <p style="color: red;">DEBUG: Nenhuma Navbar foi definida.</p>
    {% endif %}
{% endblock %}

{% block stylecss %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
    :root {
        --votacao-primary-blue: #1e3a8a;
        --votacao-primary-teal: #007D7A;
        --votacao-secondary-teal: #0891b2;
        --votacao-accent-teal: #0d9488;
        --votacao-success-green: #059669;
        --votacao-error-red: #dc2626;
        --votacao-warning-orange: #ea580c;
        
        --votacao-gray-50: #f9fafb;
        --votacao-gray-100: #f3f4f6;
        --votacao-gray-200: #e5e7eb;
        --votacao-gray-300: #d1d5db;
        --votacao-gray-400: #9ca3af;
        --votacao-gray-500: #6b7280;
        --votacao-gray-600: #4b5563;
        --votacao-gray-700: #374151;
        --votacao-gray-800: #1f2937;
        --votacao-gray-900: #111827;
        
        --votacao-bg-primary: #ffffff;
        --votacao-bg-secondary: var(--votacao-gray-50);
        --votacao-bg-accent: var(--votacao-gray-100);
        
        --votacao-text-primary: var(--votacao-gray-900);
        --votacao-text-secondary: var(--votacao-gray-600);
        --votacao-text-muted: var(--votacao-gray-500);
        
        --votacao-border-light: var(--votacao-gray-200);
        --votacao-border-medium: var(--votacao-gray-300);
        --votacao-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --votacao-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --votacao-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        --votacao-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    }

    .sistema-btn-finalizar-modal {
        flex: 1;
        background: #007D7A;
        color: white;
        border: none;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }
    
    .sistema-btn-finalizar-modal:hover {
        background: #006969;
        transform: translateY(-1px);
    }

    .sistema-votacao-wrapper {
        background: #F5F7FA;
        color: var(--votacao-text-primary);
        min-height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        line-height: 1.6;
    }

    .sistema-votacao-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem;
    }

    .sistema-votacao-header {
        text-align: center;
        margin-bottom: 3rem;
        background: var(--votacao-bg-primary);
        border-radius: 16px;
        padding: 3rem 2rem;
        color: white;
        border-radius: 0;
    }

    .sistema-votacao-header.has-background {
        position: relative;
    }
    
    .sistema-votacao-header.has-background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1;
    }
    
    .sistema-votacao-header .votacao-content {
        position: relative;
        z-index: 2;
    }

    .sistema-votacao-icon {
        background: var(--votacao-primary-teal);
        color: white;
        width: 80px;
        height: 80px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .sistema-votacao-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    .sistema-votacao-subtitle {
        font-size: 1.125rem;
        color: white;
        margin: 0;
    }

    .sistema-votacao-descricao p{
        margin-top: 1.5rem;
        color: white;
    }

    .sistema-progresso-section {
        position: fixed;
        bottom: 0;
        display: flex;
        align-items: center;
        background: var(--votacao-bg-primary);
        border-radius: 12px;
        padding: 16px;
        box-shadow: var(--votacao-shadow-md);
        border: 1px solid var(--votacao-border-light);
        z-index: 400;
        right   : 40px;
        display: grid;
        gap: 20px;
    }

    .sistema-progresso-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
    }

    .sistema-progresso-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        color: #333840;
        text-align: center;
        margin-bottom: 20px;
    }

    .sistema-progresso-status {
        color: #333840;
        font-size: 0.875rem;
        font-weight: 500;
        text-align: center;
    }

    .sistema-progresso-bar {
        width: 100%;
        height: 12px;
        background: var(--votacao-gray-200);
        border-radius: 6px;
        overflow: hidden;
    }

    .sistema-progresso-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--votacao-primary-teal), var(--votacao-secondary-teal));
        border-radius: 6px;
        transition: width 0.5s ease;
    }

    .sistema-progresso-text {
        margin-top: 0.75rem;
        color: var(--votacao-text-muted);
        font-size: 0.875rem;
        text-align: center;
        margin: 0;
    }

    .sistema-tabs-container {
        margin-bottom: 3rem;
        border-radius: 20px;
    }

    .sistema-tabs-nav {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        background: var(--votacao-bg-primary);
        padding: 1rem;
        border-radius: 20px 20px 0 0;
        box-shadow: var(--votacao-shadow-sm);
        border: 1px solid var(--votacao-border-light);
    }

    .sistema-tab-button {
        background: #fdfbf0;
        color: #173741;
        border: 1px solid #e5cfda;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
        font-weight: 500;
        font-size: 0.9rem;
        max-width: 350px;
        white-space: normal;
    }

    .sistema-tab-button:hover {
        color: white;
        background: #B5302C;
    }

    .sistema-tab-button.active {
        background: #173741;
        color: white;
        font-weight: 600;
    }

    .sistema-tab-button i {
        margin-right: 0.5rem;
    }

    .sistema-tab-content {
        display: none;
        padding: 1rem;
    }

    .sistema-tab-content.active {
        display: block;
    }

    .sistema-categoria-header {
        margin: 2.5rem 0;
        text-align: center;
    }

    .sistema-categoria-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        color: #024248;
    }

    .sistema-categoria-subtitle {
        color: var(--votacao-text-secondary);
        font-size: 1.1rem;
    }

    .sistema-projetos-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    @media (max-width: 768px) {
        .sistema-projetos-grid {
            grid-template-columns: 1fr;
        }

        .sistema-progresso-section{
            display: none;
        }
    }

    .sistema-projeto-card {
        background: var(--votacao-bg-primary);
        border-radius: 16px;
        overflow: hidden;
        transition: all 0.3s ease;
        border: 1px solid var(--votacao-border-light);
        box-shadow: var(--votacao-shadow-md);
        padding: 16px;
        border-radius: 20px;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .sistema-projeto-card:hover {
        box-shadow: var(--votacao-shadow-xl);
        border-color: var(--votacao-primary-teal);
        background: #EBEFF5;
    }

    .sistema-projeto-video {
        position: relative;
        width: 100%;
        height: 200px;
        background: var(--votacao-gray-100);
        overflow: hidden;
    }

    .sistema-projeto-video iframe,
    .sistema-projeto-video video {
        width: 100%;
        height: 100%;
        border: none;
    }

    .sistema-video-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: var(--votacao-text-muted);
        font-size: 3rem;
        background: var(--votacao-gray-100);
    }

    .sistema-projeto-content {
        padding:10px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .sistema-projeto-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1.25rem;
        color: #024248;
        line-height: 1.4;
    }

    .sistema-projeto-equipe {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
    }

    .sistema-equipe-icon {
        width: 40px;
        height: 40px;
        background: var(--votacao-primary-teal);
        color: white;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .sistema-equipe-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .sistema-equipe-nome {
        font-weight: 600;
        color: var(--votacao-text-primary);
        font-size: 1rem;
    }

    .sistema-apresentadores {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }

    .sistema-apresentadores label {
        color: var(--votacao-text-secondary);
        font-size: 0.875rem;
        margin-right: 0.5rem;
        font-weight: 500;
    }

    .sistema-apresentador-badge {
        background: var(--votacao-gray-100);
        color: var(--votacao-text-secondary);
        padding: 0.375rem 0.875rem;
        border-radius: 50px;
        font-size: 0.875rem;
        border: 1px solid var(--votacao-border-light);
        font-weight: 500;
    }

    .sistema-projeto-descricao {
        color: var(--votacao-text-secondary);
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .sistema-projeto-contato {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--votacao-text-muted);
        font-size: 0.875rem;
        margin-bottom: 2rem;
    }

    .sistema-btn-votar {
        width: 100%;
        background: #007D7A;
        color: white;
        border: none;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: none;
    }

    .sistema-btn-votar:hover:not(:disabled) {
        background: #006969;
        transform: translateY(-1px);
        box-shadow: var(--votacao-shadow-md);
    }

    .sistema-btn-votar:disabled {
        background: var(--votacao-gray-300);
        color: var(--votacao-gray-500);
        cursor: not-allowed;
        transform: none;
    }

    .sistema-btn-votar.votado {
        background: var(--votacao-success-green);
        color: white;
    }

    .sistema-btn-votar.votado:hover {
        background: var(--votacao-success-green);
    }

    .sistema-votos-counter {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
        color: var(--votacao-text-muted);
        font-size: 0.875rem;
    }

    .sistema-votos-counter i {
        color: var(--votacao-error-red);
    }

    .sistema-loading {
        opacity: 0.7;
        pointer-events: none;
    }

    .sistema-btn-votar.loading::after {
        content: '';
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top: 2px solid currentColor;
        border-radius: 50%;
        animation: sistema-spin 1s linear infinite;
        margin-left: 0.75rem;
    }

    @keyframes sistema-spin {
        to { transform: rotate(360deg); }
    }

    .sistema-btn-finalizar {
        bottom: 2rem;
        right: 2rem;
        background: white;
        color: #007D7A;
        border: 1px solid #007D7A;
        padding: 0.875rem 1.25rem;
        border-radius: 50px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: var(--votacao-shadow-lg);
        z-index: 500;
        font-size: 0.875rem;
    }

    .sistema-btn-finalizar:hover {
        background: var(--votacao-gray-50);
        border-color: var(--votacao-primary-teal);
        color: var(--votacao-primary-teal);
        transform: translateY(-2px);
        box-shadow: var(--votacao-shadow-xl);
    }

    .sistema-btn-finalizar i {
        margin-right: 0.5rem;
    }

    .sistema-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(4px);
    }

    .sistema-modal-overlay.show {
        display: flex;
    }

    .sistema-modal-content {
        background: var(--votacao-bg-primary);
        border-radius: 20px;
        padding: 2.5rem;
        width: 90%;
        color: var(--votacao-text-primary);
        border: 1px solid var(--votacao-border-light);
        box-shadow: var(--votacao-shadow-xl);
        max-height: 80vh;
        overflow-y: auto;
    }

    .sistema-modal-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .sistema-modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.75rem;
        color: var(--votacao-primary-blue);
    }

    .sistema-modal-subtitle {
        color: var(--votacao-text-secondary);
        font-size: 1rem;
    }

    .sistema-modal-actions {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
    }

    .sistema-btn-continuar {
        flex: 1;
        background: var(--votacao-primary-teal);
        color: white;
        border: none;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .sistema-btn-continuar:hover {
        background: var(--votacao-accent-teal);
        transform: translateY(-1px);
    }

    .sistema-btn-parar {
        flex: 1;
        background: transparent;
        color: var(--votacao-primary-teal);
        border: 1px solid var(--votacao-primary-teal);
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .sistema-btn-parar:hover {
        background: var(--votacao-gray-50);
    }

    .sistema-proxima-categoria-preview {
        background: var(--votacao-bg-accent);
        border-radius: 12px;
        padding: 1.5rem;
        margin: 1.5rem 0;
        border: 1px solid var(--votacao-border-light);
    }

    .sistema-preview-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .sistema-preview-icon {
        background: var(--votacao-primary-teal);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem;
    }

    .sistema-preview-title {
        font-weight: 700;
        font-size: 1.125rem;
        margin: 0;
        color: var(--votacao-text-primary);
    }

    .sistema-preview-projetos {
        display: grid;
        gap: 0.75rem;
        max-height: 300px;
        overflow-y: auto;
    }

    .sistema-preview-projeto {
        background: var(--votacao-bg-primary);
        padding: 1rem;
        border-radius: 8px;
        border: 1px solid var(--votacao-border-light);
    }

    .sistema-preview-projeto-titulo {
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
        color: var(--votacao-text-primary);
    }

    .sistema-preview-projeto-equipe {
        font-size: 0.8rem;
        color: var(--votacao-text-secondary);
    }

    .sistema-modal-conclusao {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1100;
        backdrop-filter: blur(6px);
    }

    .sistema-modal-conclusao.show {
        display: flex;
    }

    .sistema-modal-conclusao-content {
        background: var(--votacao-bg-primary);
        border-radius: 24px;
        padding: 3rem 2rem;
        max-width: 450px;
        width: 90%;
        color: var(--votacao-text-primary);
        text-align: center;
        border: 1px solid var(--votacao-border-light);
        box-shadow: var(--votacao-shadow-xl);
        position: relative;
        overflow: hidden;
    }

    .sistema-modal-conclusao-content::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--votacao-primary-teal), var(--votacao-secondary-teal));
    }

    .sistema-conclusao-icon {
        background: var(--votacao-success-green);
        color: white;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        animation: sistema-celebracao 0.6s ease-out;
    }

    @keyframes sistema-celebracao {
        0% { transform: scale(0.8) rotate(-10deg); opacity: 0; }
        50% { transform: scale(1.1) rotate(5deg); }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    .sistema-conclusao-title {
        font-size: 1.75rem;
        font-weight: 700;
        margin-bottom: 1rem;
        color: var(--votacao-primary-blue);
    }

    .sistema-conclusao-subtitle {
        color: var(--votacao-text-secondary);
        font-size: 1.1rem;
        margin-bottom: 2rem;
        line-height: 1.5;
    }

    .sistema-conclusao-stats {
        background: var(--votacao-bg-accent);
        border-radius: 12px;
        padding: 1.5rem;
        margin: 2rem 0;
        border: 1px solid var(--votacao-border-light);
    }

    .sistema-conclusao-stats-title {
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--votacao-text-primary);
    }

    .sistema-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .sistema-stat-item {
        text-align: center;
    }

    .sistema-stat-number {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--votacao-primary-teal);
        display: block;
    }

    .sistema-stat-label {
        font-size: 0.875rem;
        color: var(--votacao-text-secondary);
    }

    .sistema-conclusao-actions {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
    }

    .sistema-btn-votar-novamente {
        flex: 1;
        background: var(--votacao-primary-teal);
        color: white;
        border: none;
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .sistema-btn-votar-novamente:hover {
        background: var(--votacao-accent-teal);
        transform: translateY(-1px);
    }

    .sistema-btn-encerrar-definitivo {
        flex: 1;
        background: transparent;
        color: var(--votacao-text-secondary);
        border: 1px solid var(--votacao-border-medium);
        padding: 1rem 1.5rem;
        border-radius: 50px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .alert-red {
        background-color: #FCF0F1;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
        text-align: center;
    }

    .sistema-btn-encerrar-definitivo:hover {
        background: var(--votacao-gray-50);
        border-color: var(--votacao-gray-400);
    }

    .sistema-feedback-message {
        position: fixed;
        top: 2rem;
        right: 2rem;
        background: var(--votacao-success-green);
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        font-weight: 600;
        transform: translateX(400px);
        transition: transform 0.3s ease;
        z-index: 1200;
        box-shadow: var(--votacao-shadow-lg);
    }

    .sistema-feedback-message.show {
        transform: translateX(0);
    }

    .sistema-feedback-message.error {
        background: var(--votacao-error-red);
    }

    .sistema-empty-state {
        text-align: center;
        padding: 4rem 2rem;
        color: var(--votacao-text-muted);
        background: var(--votacao-bg-primary);
        border-radius: 12px;
        border: 1px solid var(--votacao-border-light);
    }

    .sistema-empty-state i {
        font-size: 3rem;
        margin-bottom: 1rem;
        display: block;
        color: var(--votacao-gray-400);
    }

    .sistema-empty-state h3 {
        margin-bottom: 0.5rem;
        color: var(--votacao-text-secondary);
    }

    @media (max-width: 768px) {
        .sistema-votacao-container {
            padding: 1rem;
        }
        
        .sistema-votacao-title {
            font-size: 2rem;
        }
        
        .sistema-tabs-nav {
            gap: 0.25rem;
            padding: 0.75rem;
            display: flex;
            flex-direction: column;
        }
        
        .sistema-tab-button {
            padding: 0.5rem 1rem;
            font-size: 0.875rem;
        }
        
        .sistema-projetos-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
        
        .sistema-projeto-content {
            padding: 1.5rem;
        }

        .sistema-modal-content,
        .sistema-modal-conclusao-content {
            padding: 2rem 1.5rem;
            margin: 1rem;
        }
        
        .sistema-conclusao-actions,
        .sistema-modal-actions {
            flex-direction: column;
        }
        
        .sistema-stats-grid {
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }

        .sistema-btn-finalizar {
            font-size: 0.8rem;
            padding: 0.75rem 1rem;
        }
    }

    .sistema-votacao-encerrada {
        opacity: 0.7;
    }

    .sistema-votacao-encerrada .sistema-btn-votar {
        background: var(--votacao-gray-300);
        color: var(--votacao-gray-500);
        cursor: not-allowed;
    }

    .sistema-tab-button:focus,
    .sistema-btn-votar:focus,
    .sistema-btn-continuar:focus,
    .sistema-btn-parar:focus,
    .sistema-btn-finalizar:focus {
        outline: 2px solid var(--votacao-primary-teal);
        outline-offset: 2px;
    }
</style>
{% endblock %}

{% block content %}
{% load static %}
<section class="padding-mobile">
    <div class="sistema-votacao-wrapper"
        {% if page.background_image_fundo %}
            {% for block in page.background_image_fundo %}
                {% if block.block_type == 'background_image_stream' and block.value %}
                    style="background-image: url('{{ block.value.file.url }}'); 
                        background-size: cover; 
                        background-position: center; 
                        background-repeat: no-repeat;
                        background-attachment: fixed;"
                {% endif %}
            {% endfor %}
        {% endif %}>
        <div class="sistema-votacao-header{% if page.imagem_fundo %} has-background{% endif %}" 
            {% if page.imagem_fundo %}
                {% for block in page.imagem_fundo %}
                    style="background-image: url('{{ block.value.file.url }}'); object-fit: cover; object-position: top;"
                {% endfor %}
            {% endif %}>
                <div class="votacao-content">
                <div class="sistema-votacao-icon">
                    <i class="fas fa-vote-yea"></i>
                </div>
                <h1 class="sistema-votacao-title">{{ page.title }}</h1>
                <p class="sistema-votacao-subtitle">{{ page.subtitulo }}</p>
                
                {% if page.descricao_header %}
                    <div class="sistema-votacao-descricao">
                        {{ page.descricao_header|richtext }}
                    </div>
                {% endif %}
                </div>
    </div>
       

    {% if page.conteudo_pagina %}
            {% for block in page.conteudo_pagina %}
                {% include_block block %}
            {% endfor %}
    {% endif %}

    {% if page.exigir_recaptcha %}
    <div class="recaptcha-gate" style="display: block;">
        <div class="recaptcha-content" style="max-width: 600px; margin: 2rem auto; padding: 2rem; background: white; border-radius: 12px;">
            <h2>Verificação de Segurança</h2>
            <p>Para acessar o sistema de votação, confirme que você não é um robô:</p>
            
            {% include 'enap_designsystem/blocks/recaptcha.html' with value=recaptcha_config %}
            
            <button type="button" id="prosseguir-votacao" disabled style="margin-top: 1rem; padding: 1rem 2rem; background: #ccc; border: none; border-radius: 50px; width: 100%;     position: relative; z-index: 999999;">
                Complete a verificação acima
            </button>
        </div>
    </div>
    {% endif %}


    <div class="sistema-votacao-container" {% if page.exigir_recaptcha %}style="display: none;"{% endif %}>>
        <!-- Header -->
        

        <!-- Progresso da Votação -->
        {% if page.mostrar_progresso and categorias %}
        <div class="sistema-progresso-section">
            <div class="sistema-progresso-header">
                <div class="alert-red">
                <h2 class="sistema-progresso-title">Progresso da Votação</h2>
                <span class="sistema-progresso-status" id="progresso-status">0 de {{ total_categorias }} categorias</span>
                </div>
            </div>
            
            <!-- Botão Finalizar Votação -->
            <button class="sistema-btn-finalizar" onclick="SistemaVotacao.finalizarVotacao()">
                <i class="fas fa-check-circle"></i>
                <span>Finalizar Votação</span>
            </button>
        </div>
        {% endif %}

        <!-- Tabs das Categorias -->
        {% if categorias %}
        <div class="sistema-tabs-container">
            <div class="sistema-tabs-nav">
                {% for categoria in categorias %}
                <button class="sistema-tab-button {% if forloop.first %}active{% endif %}" 
                        data-tab-target="categoria-{{ categoria.id }}"
                        data-categoria-id="{{ categoria.id }}">
                    {% if categoria.icone %}
                        <i class="fas {{ categoria.icone }}"></i>
                    {% endif %}
                    {{ categoria.nome }}
                </button>
                {% endfor %}
            </div>

            <div>
            <!-- Conteúdo das Tabs -->
            {% for categoria in categorias %}
            <div class="sistema-tab-content {% if forloop.first %}active{% endif %}" 
                 id="categoria-{{ categoria.id }}"
                 data-categoria-id="{{ categoria.id }}">
                
                <div class="sistema-categoria-header">
                    <h2 class="sistema-categoria-title">{{ categoria.nome }}</h2>
                    <p class="sistema-categoria-subtitle">Selecione o melhor projeto desta categoria</p>
                </div>

                <!-- Grid de Projetos -->
                <div class="sistema-projetos-grid">
                    {% for projeto in categoria.projetos.all %}
                        {% if projeto.ativo %}
                    <div class="sistema-projeto-card" data-projeto-id="{{ projeto.id }}">
                        
                        <!-- Vídeo -->
                        <div class="sistema-projeto-video">
                            {% if projeto.video_embed_url %}
                                <iframe src="{{ projeto.video_embed_url }}" 
                                        allowfullscreen></iframe>
                            {% elif projeto.video_arquivo %}
                                <video controls>
                                    <source src="{{ projeto.video_arquivo.url }}" type="video/mp4">
                                </video>
                            {% else %}
                                <div class="sistema-video-placeholder">
                                    <i class="fas fa-play-circle"></i>
                                </div>
                            {% endif %}
                        </div>

                        <!-- Conteúdo -->
                        <div class="sistema-projeto-content">
                            <div>
                            <h3 class="sistema-projeto-title">{{ projeto.titulo }}</h3>
                            
                            <!-- Equipe -->
                            <div class="sistema-projeto-equipe">
                                <div class="sistema-equipe-icon">
                                    {% if projeto.icone_equipe %}
                                        <img src="{{ projeto.icone_equipe.url }}" alt="{{ projeto.nome_equipe }}">
                                    {% else %}
                                        <i class="fas fa-users"></i>
                                    {% endif %}
                                </div>
                                <span class="sistema-equipe-nome">{{ projeto.nome_equipe }}</span>
                            </div>

                            <!-- Apresentadores -->
                            {% if projeto.apresentadores.all %}
                            <div class="sistema-apresentadores">
                                <label>Apresentadores:</label>
                                {% for apresentador in projeto.apresentadores.all %}
                                    <span class="sistema-apresentador-badge">{{ apresentador.nome }}</span>
                                {% endfor %}
                            </div>
                            {% endif %}

                            <!-- Descrição -->
                            <div class="sistema-projeto-descricao">
                                {{ projeto.descricao|richtext }}
                            </div>

                            <!-- Contato -->
                            {% if projeto.email_contato %}
                            <div class="sistema-projeto-contato">
                                <i class="fas fa-envelope"></i>
                                <span>{{ projeto.email_contato }}</span>
                            </div>
                            {% endif %}
                            </div>

                            <!-- Botão Votar -->
                            <button class="sistema-btn-votar" 
                                    data-projeto-id="{{ projeto.id }}"
                                    data-categoria-id="{{ categoria.id }}"
                                    onclick="SistemaVotacao.votar({{ projeto.id }}, {{ categoria.id }}, this)">
                                Votar neste Projeto
                            </button>

                        </div>
                    </div>
                        {% endif %}
                    {% empty %}
                        <div class="sistema-empty-state" style="grid-column: 1 / -1;">
                            <i class="fas fa-inbox"></i>
                            <h3>Nenhum projeto cadastrado</h3>
                            <p>Ainda não há projetos cadastrados nesta categoria.</p>
                        </div>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
            <div class="sistema-empty-state">
                <i class="fas fa-cog"></i>
                <h3>Sistema em Configuração</h3>
                <p>As categorias e projetos ainda não foram configurados.</p>
            </div>
        {% endif %}
        </div>
    </div>
    </div>

    <!-- Modal de Conclusão -->
    <div id="modal-conclusao" class="sistema-modal-conclusao">
        <div class="sistema-modal-conclusao-content">
            <div class="sistema-conclusao-icon">
                <i class="fas fa-trophy"></i>
            </div>
            <h3 class="sistema-conclusao-title">Parabéns!</h3>
            <p class="sistema-conclusao-subtitle">Você votou em todas as categorias disponíveis!</p>
            
            <div class="sistema-conclusao-stats">
                <div class="sistema-conclusao-stats-title">Sua Participação</div>
                <div class="sistema-stats-grid">
                    <div class="sistema-stat-item">
                        <span class="sistema-stat-number" id="total-categorias-votadas">{{ total_categorias }}</span>
                        <span class="sistema-stat-label">Categorias</span>
                    </div>
                    <div class="sistema-stat-item">
                        <span class="sistema-stat-number" id="total-projetos-visualizados">-</span>
                        <span class="sistema-stat-label">Projetos</span>
                    </div>
                </div>
            </div>
            
            <div class="sistema-conclusao-actions">
                <button class="sistema-btn-votar-novamente" onclick="SistemaVotacao.reiniciarVotacao()">
                    <i class="fas fa-redo"></i>
                    Votar Novamente
                </button>
                <button class="sistema-btn-encerrar-definitivo" onclick="SistemaVotacao.encerrarDefinitivo()">
                    <i class="fas fa-check"></i>
                    Encerrar
                </button>
            </div>
        </div>
    </div>

    <!-- Modal de Escolha Pós-Voto -->
    <div id="modal-pos-voto" class="sistema-modal-overlay">
        <div class="sistema-modal-content">
            <div class="sistema-modal-header">
                <h3 class="sistema-modal-title">Voto registrado com sucesso!</h3>
            </div>

            <!-- Progresso da Votação no Modal -->
            {% if page.mostrar_progresso and categorias %}
            <div class="sistema-progresso-section" style="position: static; margin: 1.5rem 0; padding: 1.5rem; right: auto; bottom: auto;">
                <div class="sistema-progresso-header">
                    <h2 class="sistema-progresso-title">Progresso da Votação</h2>
                    <span class="sistema-progresso-status" id="progresso-status-modal">0 de {{ total_categorias }} categorias</span>
                </div>
                <div class="sistema-progresso-bar">
                    <div class="sistema-progresso-fill" id="progresso-fill-modal" style="width: 0%"></div>
                </div>
                <p class="sistema-progresso-text" id="progresso-text-modal">0% concluído</p>
            </div>
            {% endif %}

            
            <div class="sistema-modal-actions">
                <button class="sistema-btn-continuar" onclick="SistemaVotacao.continuarVotacao()">
                    Votar na próxima categoria
                    <i class="fas fa-arrow-right"></i>
                </button>
                <button class="sistema-btn-finalizar sistema-btn-finalizar-modal" onclick="SistemaVotacao.finalizarVotacao()">
                    <i class="fas fa-check-circle"></i>
                    <span>Finalizar Votação</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Mensagem de Feedback -->
    <div id="feedback-message" class="sistema-feedback-message"></div>
    {% endblock %}

{% block footer %}
    {% include "enap_designsystem/includes/footer.html" %}
{% endblock %}

{% block scriptjs %}
<!-- CSRF Token -->
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

</section>
<script>
    // reCAPTCHA handler
    window.onRecaptchaSuccess = function(response) {
        console.log('reCAPTCHA completado');
        
        // Habilitar botão
        const botao = document.getElementById('prosseguir-votacao');
        if (botao) {
            botao.disabled = false;
            botao.innerHTML = 'Iniciar Votação';
            botao.style.background = '#007D7A';
            botao.style.color = 'white';
            
            // Configurar clique
            botao.onclick = function() {
                document.querySelector('.recaptcha-gate').style.display = 'none';
                document.querySelector('.sistema-votacao-container').style.display = 'block';
                SistemaVotacao.init();
            };
        }
    };

    const SistemaVotacao = {
        // Estado da aplicação
        votosCategoria: new Set(),
        categoriasOrdem: [],
        proximaCategoriaData: null,
        elementos: {},
        configuracao: {
            votacaoAtiva: {% if votacao_ativa %}true{% else %}false{% endif %},
            totalCategorias: {{ total_categorias|default:0 }},
            permitirMultiplosVotos: {% if page.permitir_multiplos_votos %}true{% else %}false{% endif %},
            // URL corrigida - usar path absoluto
            urlVotar: '/votar/'
        },

        // Inicialização
        init() {
            console.log('🚀 Inicializando Sistema de Votação...');
            
            this.cacheElementos();
            this.configurarTabs();
            this.configurarCategorias();
            this.configurarModais();
            this.configurarCSRF();
            
            console.log('✅ Sistema inicializado');
            console.log('📊 Configuração:', this.configuracao);
        },

        // Cache de elementos DOM
        cacheElementos() {
            this.elementos = {
                tabButtons: document.querySelectorAll('.sistema-tab-button'),
                tabContents: document.querySelectorAll('.sistema-tab-content'),
                progressoFill: document.getElementById('progresso-fill'),
                progressoStatus: document.getElementById('progresso-status'),
                progressoText: document.querySelector('.sistema-progresso-text'),
                progressoFillModal: document.getElementById('progresso-fill-modal'),
                progressoStatusModal: document.getElementById('progresso-status-modal'),
                progressoTextModal: document.getElementById('progresso-text-modal'),
                modalPosVoto: document.getElementById('modal-pos-voto'),
                modalConclusao: document.getElementById('modal-conclusao'),
                previewProxima: document.getElementById('preview-proxima-categoria'),
                feedbackMessage: document.getElementById('feedback-message')
            };
            
            console.log('DOM Elements cached:', Object.keys(this.elementos).length);
        },

        // Configurar sistema de tabs
        configurarTabs() {
            this.elementos.tabButtons.forEach((button, index) => {
                const targetId = button.getAttribute('data-tab-target');
                const categoriaId = button.getAttribute('data-categoria-id');
                
                button.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.trocarTab(targetId, button);
                });
            });
        },

        // Trocar tab ativa
        trocarTab(targetId, clickedButton) {
            const targetContent = document.getElementById(targetId);
            
            if (!targetContent) {
                console.error('❌ Conteúdo não encontrado:', targetId);
                return;
            }

            // Remover active de todos
            this.elementos.tabButtons.forEach(btn => btn.classList.remove('active'));
            this.elementos.tabContents.forEach(content => content.classList.remove('active'));

            // Ativar clicado
            clickedButton.classList.add('active');
            targetContent.classList.add('active');

            // Scroll suave
            setTimeout(() => {
                const header = targetContent.querySelector('.sistema-categoria-header');
                if (header) {
                    header.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            }, 100);
        },

        // Configurar categorias
        configurarCategorias() {
            this.elementos.tabButtons.forEach(button => {
                const categoriaId = parseInt(button.getAttribute('data-categoria-id'));
                const iconElement = button.querySelector('i');
                
                this.categoriasOrdem.push({
                    id: categoriaId,
                    nome: button.textContent.trim(),
                    icone: iconElement ? iconElement.className : 'fas fa-folder'
                });
            });
        },

        // Configurar modais
        configurarModais() {
            if (this.elementos.modalPosVoto) {
                this.elementos.modalPosVoto.addEventListener('click', (e) => {
                    if (e.target === this.elementos.modalPosVoto) {
                        this.pararVotacao();
                    }
                });
            }
            
            if (this.elementos.modalConclusao) {
                this.elementos.modalConclusao.addEventListener('click', (e) => {
                    if (e.target === this.elementos.modalConclusao) {
                        this.encerrarDefinitivo();
                    }
                });
            }
        },

        // Configurar CSRF Token
        configurarCSRF() {
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
            if (!csrfToken) {
                console.warn('⚠️ CSRF token não encontrado');
            }
        },

        // FUNÇÃO PRINCIPAL DE VOTAÇÃO - CORRIGIDA
        async votar(projetoId, categoriaId, button) {
            console.log('🗳️ Iniciando votação...', { projetoId, categoriaId });
            
            if (!this.configuracao.votacaoAtiva) {
                this.showFeedback('Votação não está ativa no momento.', 'error');
                return;
            }

            // Verificar se botão já foi usado
            if (button.classList.contains('votado') || button.disabled) {
                this.showFeedback('Você já votou neste projeto.', 'warning');
                return;
            }

            // Estado de loading
            this.setLoadingState(button, true);

            try {
                // Preparar dados
                const dados = {
                    projeto_id: parseInt(projetoId),
                    categoria_id: parseInt(categoriaId)
                };

                console.log('📤 Enviando dados:', dados);

                // Headers da requisição
                const headers = {
                    'Content-Type': 'application/json',
                };

                // Adicionar CSRF token se disponível
                const csrfToken = this.getCsrfToken();
                if (csrfToken) {
                    headers['X-CSRFToken'] = csrfToken;
                }

                // Fazer requisição
                const response = await fetch(this.configuracao.urlVotar, {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify(dados),
                    credentials: 'same-origin'
                });

                console.log('📥 Response status:', response.status);

                // Verificar se response é válido
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }

                // Parse do JSON
                let data;
                try {
                    data = await response.json();
                    console.log('📊 Response data:', data);
                } catch (parseError) {
                    console.error('❌ Erro ao fazer parse do JSON:', parseError);
                    throw new Error('Resposta inválida do servidor');
                }

                if (data.success) {
                    this.processarVotoSucesso(projetoId, categoriaId, button, data);
                } else {
                    throw new Error(data.message || 'Erro desconhecido ao registrar voto');
                }

            } catch (error) {
                console.error('❌ Erro completo:', error);
                this.showFeedback(`Erro: ${error.message}`, 'error');
                this.setLoadingState(button, false);
            }
        },

        // Processar voto bem-sucedido
        processarVotoSucesso(projetoId, categoriaId, button, data) {
            console.log('✅ Voto processado com sucesso:', data);
            
            // Atualizar visual do botão
            button.classList.add('votado');
            button.innerHTML = `
                <i class="fas fa-check-circle"></i>
                Voto registrado!
            `;
            button.disabled = true;
            
            // Atualizar contador se existir
            this.atualizarContador(projetoId, data.total_votos);
            
            // Marcar categoria como votada
            this.votosCategoria.add(parseInt(categoriaId));
            this.atualizarProgresso();
            
            // Desabilitar outros botões da categoria se necessário
            if (!this.configuracao.permitirMultiplosVotos) {
                this.desabilitarOutrosBotoes(categoriaId, button);
            }
            
            // Verificar se votação está completa
            const votacaoCompleta = this.verificarVotacaoCompleta();
            
            // Mostrar feedback adequado
            if (votacaoCompleta) {
                this.showFeedback(`🎉 Parabéns! Você votou em todas as categorias!`, 'success');
            } else {
                this.showFeedback(`Voto registrado em "${data.projeto_titulo || 'projeto'}"!`, 'success');
            }
            
            // Mostrar próximo passo após delay
            setTimeout(() => {
                this.mostrarModalPosVoto(categoriaId);
            }, 2000);
        },
        

        // Atualizar contador de votos
        atualizarContador(projetoId, totalVotos) {
            const contadorElement = document.getElementById(`votos-${projetoId}`);
            if (contadorElement) {
                const novoTotal = totalVotos || 1;
                contadorElement.textContent = novoTotal;
                
                // Animação
                contadorElement.style.transform = 'scale(1.2)';
                contadorElement.style.color = '#28a745';
                
                setTimeout(() => {
                    contadorElement.style.transform = 'scale(1)';
                    contadorElement.style.color = '';
                }, 500);
            }
        },

        // Desabilitar outros botões da categoria
        desabilitarOutrosBotoes(categoriaId, buttonAtivo) {
            const categorySection = document.getElementById(`categoria-${categoriaId}`);
            if (categorySection) {
                const outrosBotoes = categorySection.querySelectorAll('.sistema-btn-votar');
                outrosBotoes.forEach(btn => {
                    if (btn !== buttonAtivo && !btn.classList.contains('votado')) {
                        btn.disabled = true;
                        btn.classList.add('disabled');
                        btn.innerHTML = `
                            <i class="fas fa-ban"></i>
                            Você já votou nesta categoria
                        `;
                    }
                });
            }
        },

        // Estado de loading do botão
        setLoadingState(button, loading) {
            if (loading) {
                button.classList.add('loading');
                button.disabled = true;
                button.innerHTML = `
                    <i class="fas fa-spinner fa-spin"></i>
                    Votando...
                `;
            } else if (!button.classList.contains('votado')) {
                button.classList.remove('loading');
                button.disabled = false;
                button.innerHTML = 'Votar neste Projeto';
            }
        },

        // Mostrar modal pós-voto

    // Mostrar modal pós-voto
    mostrarModalPosVoto(categoriaAtualId) {
        const indiceAtual = this.categoriasOrdem.findIndex(cat => cat.id === parseInt(categoriaAtualId));
        const proximoIndice = indiceAtual + 1;
        const temProximaCategoria = proximoIndice < this.categoriasOrdem.length;
        
        // NOVA VERIFICAÇÃO: Checar se todas as categorias foram votadas
        const todasVotadas = this.votosCategoria.size >= this.configuracao.totalCategorias;
        
        if (temProximaCategoria && !todasVotadas) {
            this.proximaCategoriaData = this.categoriasOrdem[proximoIndice];
            this.gerarPreviewProximaCategoria(this.proximaCategoriaData.id);
        } else {
            this.proximaCategoriaData = null;
        }
        
        // Se todas foram votadas, mostrar modal de conclusão em vez do modal pós-voto
        if (todasVotadas) {
            this.mostrarModalConclusao();
            return;
        }
        
        // Caso contrário, atualizar botões baseado se tem próxima categoria
        this.atualizarBotoesModal(temProximaCategoria);
        
        if (this.elementos.modalPosVoto) {
            this.elementos.modalPosVoto.classList.add('show');
        }
    },

    // Nova função para atualizar os botões do modal
    atualizarBotoesModal(temProximaCategoria) {
        const botaoContinuar = document.querySelector('.sistema-btn-continuar');
        const botaoFinalizar = document.querySelector('.sistema-modal-actions .sistema-btn-finalizar');
        
        // Verificar se todas as categorias foram votadas
        const todasVotadas = this.votosCategoria.size >= this.configuracao.totalCategorias;
        
        if (todasVotadas) {
            // TODAS VOTADAS: Esconder botão continuar, destacar finalizar
            if (botaoContinuar) {
                botaoContinuar.style.display = 'none';
            }
            if (botaoFinalizar) {
                botaoFinalizar.style.display = 'block';
                botaoFinalizar.style.width = '100%';
                botaoFinalizar.innerHTML = `
                    <i class="fas fa-trophy"></i>
                    <span>Parabéns! Finalizar Votação</span>
                `;
            }
        } else if (temProximaCategoria) {
            // AINDA HÁ CATEGORIAS: Mostrar ambos os botões
            if (botaoContinuar) {
                botaoContinuar.style.display = 'block';
                botaoContinuar.style.width = '';
                botaoContinuar.innerHTML = `
                    Votar na próxima categoria
                    <i class="fas fa-arrow-right"></i>
                `;
            }
            if (botaoFinalizar) {
                botaoFinalizar.style.display = 'block';
                botaoFinalizar.style.width = '';
            }
        } else {
            // ÚLTIMA CATEGORIA MAS NEM TODAS VOTADAS: Esconder continuar, destacar finalizar
            if (botaoContinuar) {
                botaoContinuar.style.display = 'none';
            }
            if (botaoFinalizar) {
                botaoFinalizar.style.display = 'block';
                botaoFinalizar.style.width = '100%';
                botaoFinalizar.innerHTML = `
                    <i class="fas fa-check-circle"></i>
                    <span>Finalizar Votação</span>
                `;
            }
        }
    },
    
    verificarVotacaoCompleta() {
        const todasVotadas = this.votosCategoria.size >= this.configuracao.totalCategorias;
        
        if (todasVotadas) {
            console.log('🎉 Todas as categorias foram votadas!');
            
            // Atualizar interface para indicar conclusão
            const progressoElements = document.querySelectorAll('.sistema-progresso-status');
            progressoElements.forEach(element => {
                if (element) {
                    element.innerHTML = `
                        <i class="fas fa-check-circle" style="color: #059669; margin-right: 0.5rem;"></i>
                        Votação Completa!
                    `;
                    element.style.color = '#059669';
                    element.style.fontWeight = 'bold';
                }
            });
            
            // Opcional: Adicionar efeito visual de conclusão
            const progressoBars = document.querySelectorAll('.sistema-progresso-fill');
            progressoBars.forEach(bar => {
                if (bar) {
                    bar.style.background = 'linear-gradient(90deg, #059669, #10b981)';
                    bar.style.boxShadow = '0 0 10px rgba(5, 150, 105, 0.3)';
                }
            });
            
            return true;
        }
        
        return false;
    },
    

        // Gerar preview da próxima categoria
        gerarPreviewProximaCategoria(proximaCategoriaId) {
            const proximaCategoria = document.getElementById(`categoria-${proximaCategoriaId}`);
            const projetos = proximaCategoria ? proximaCategoria.querySelectorAll('.sistema-projeto-card') : [];
            
            let previewHTML = '';
            
            if (projetos.length > 0) {
                const categoriaInfo = this.categoriasOrdem.find(cat => cat.id === proximaCategoriaId);
                
                previewHTML = `
                    <div class="sistema-preview-header">
                        <div class="sistema-preview-icon">
                            <i class="${categoriaInfo.icone}"></i>
                        </div>
                        <h4 class="sistema-preview-title">Próxima Categoria: ${categoriaInfo.nome}</h4>
                    </div>
                    <div class="sistema-preview-projetos">
                `;
                
                projetos.forEach(projeto => {
                    const titulo = projeto.querySelector('.sistema-projeto-title')?.textContent || 'Projeto';
                    const equipe = projeto.querySelector('.sistema-equipe-nome')?.textContent || 'Equipe';
                    
                    previewHTML += `
                        <div class="sistema-preview-projeto">
                            <div class="sistema-preview-projeto-titulo">${titulo}</div>
                            <div class="sistema-preview-projeto-equipe">por ${equipe}</div>
                        </div>
                    `;
                });
                
                previewHTML += `</div>`;
            }
            
            if (this.elementos.previewProxima) {
                this.elementos.previewProxima.innerHTML = previewHTML;
            }
        },

        // Continuar votação
        continuarVotacao() {
            if (this.elementos.modalPosVoto) {
                this.elementos.modalPosVoto.classList.remove('show');
            }
            
            if (this.proximaCategoriaData) {
                const proximaTab = document.querySelector(`[data-categoria-id="${this.proximaCategoriaData.id}"]`);
                if (proximaTab) {
                    proximaTab.click();
                }
            }
        },

        // Parar votação
        pararVotacao() {
            if (this.elementos.modalPosVoto) {
                this.elementos.modalPosVoto.classList.remove('show');
            }
            this.showFeedback('Obrigado pela sua participação!', 'success');
        },

        // Mostrar modal de conclusão
        mostrarModalConclusao() {
            if (this.elementos.modalConclusao) {
                this.elementos.modalConclusao.classList.add('show');
            }
        },

        // Reiniciar votação
        reiniciarVotacao() {
            if (this.elementos.modalConclusao) {
                this.elementos.modalConclusao.classList.remove('show');
            }
            
            // Reset estado
            this.votosCategoria.clear();
            this.proximaCategoriaData = null;
            
            // Reset botões
            const botoesVotar = document.querySelectorAll('.sistema-btn-votar');
            botoesVotar.forEach(botao => {
                botao.classList.remove('votado', 'loading', 'disabled');
                botao.disabled = false;
                botao.textContent = 'Votar neste Projeto';
            });
            
            this.atualizarProgresso();
            
            const primeiraTab = document.querySelector('.sistema-tab-button');
            if (primeiraTab) {
                primeiraTab.click();
            }
            
            this.showFeedback('Nova votação iniciada!', 'success');
        },

        // Encerrar definitivo
        encerrarDefinitivo() {
            if (this.elementos.modalConclusao) {
                this.elementos.modalConclusao.classList.remove('show');
            }
            this.showFeedback('Obrigado pela sua participação!', 'success');
        },

        // Finalizar votação
        finalizarVotacao() {
            if (this.votosCategoria.size === 0) {
                this.showFeedback('Você ainda não votou em nenhuma categoria.', 'warning');
                return;
            }
            
            const categoriasRestantes = this.configuracao.totalCategorias - this.votosCategoria.size;
            
            let mensagem = 'Tem certeza que deseja finalizar sua votação?';
            if (categoriasRestantes > 0) {
                mensagem += `\n\nAinda há ${categoriasRestantes} categoria${categoriasRestantes > 1 ? 's' : ''} disponíveis.`;
            }
            
            if (confirm(mensagem)) {
                this.showFeedback('Obrigado pela participação! Recarregando...', 'success');
                setTimeout(() => window.location.reload(), 1500);
            }
        },

        // Atualizar progresso
        atualizarProgresso() {
            const votadas = this.votosCategoria.size;
            const percentual = Math.round((votadas / this.configuracao.totalCategorias) * 100);
            const completa = votadas >= this.configuracao.totalCategorias;
            
            // Atualizar elementos de progresso
            const elementos = [
                { fill: this.elementos.progressoFill, status: this.elementos.progressoStatus, text: this.elementos.progressoText },
                { fill: this.elementos.progressoFillModal, status: this.elementos.progressoStatusModal, text: this.elementos.progressoTextModal }
            ];
            
            elementos.forEach(({ fill, status, text }) => {
                if (fill) {
                    fill.style.width = `${percentual}%`;
                    // Adicionar efeito visual quando completa
                    if (completa) {
                        fill.style.background = 'linear-gradient(90deg, #059669, #10b981)';
                        fill.style.boxShadow = '0 0 10px rgba(5, 150, 105, 0.3)';
                    }
                }
                
                if (status) {
                    if (completa) {
                        status.innerHTML = `
                            <i class="fas fa-trophy" style="color: #059669; margin-right: 0.5rem;"></i>
                            Parabéns! ${votadas} de ${this.configuracao.totalCategorias} categorias
                        `;
                        status.style.color = '#059669';
                    } else {
                        status.textContent = `${votadas} de ${this.configuracao.totalCategorias} categorias`;
                        status.style.color = '';
                    }
                }
                
                if (text) {
                    if (completa) {
                        text.innerHTML = `
                            <i class="fas fa-check-circle" style="color: #059669; margin-right: 0.25rem;"></i>
                            100% - Votação Completa!
                        `;
                        text.style.color = '#059669';
                        text.style.fontWeight = 'bold';
                    } else {
                        text.textContent = `${percentual}% concluído`;
                        text.style.color = '';
                        text.style.fontWeight = '';
                    }
                }
            });
            
            // Log para debug
            console.log(`📊 Progresso atualizado: ${votadas}/${this.configuracao.totalCategorias} (${percentual}%)`);
        },

        // Mostrar feedback
        showFeedback(message, type = 'success') {
            if (!this.elementos.feedbackMessage) {
                console.log(`Feedback: ${message} (${type})`);
                return;
            }
            
            this.elementos.feedbackMessage.textContent = message;
            this.elementos.feedbackMessage.className = `sistema-feedback-message ${type} show`;
            
            setTimeout(() => {
                this.elementos.feedbackMessage.classList.remove('show');
            }, 4000);
        },

        // Obter CSRF token
        getCsrfToken() {
            const csrfInput = document.querySelector('[name=csrfmiddlewaretoken]');
            if (csrfInput) {
                return csrfInput.value;
            }
            
            // Fallback do cookie
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                const [name, value] = cookie.trim().split('=');
                if (name === 'csrftoken') {
                    return value;
                }
            }
            
            console.warn('⚠️ CSRF token não encontrado');
            return '';
        }
    };

    // Inicialização
    document.addEventListener('DOMContentLoaded', function() {
        console.log('📄 DOM carregado, inicializando sistema...');
        SistemaVotacao.init();
    });

    // Expor globalmente
    window.SistemaVotacao = SistemaVotacao;
</script>
{% endblock %}