{% load css_tags %}{% block_css 'enap_designsystem/blocks/suap_calendario_block.css' %}
{% load i18n wagtailcore_tags %}

<div class="scal-outer"
     data-ano-inicial="{{ ano_inicial }}"
     data-api-url="{{ api_url }}"
     data-programas="{{ programas_json }}">
<section class="scal-wrapper">

  {% if bloco.title %}
  <div class="scal-header">
    <h2 class="scal-titulo" {% if bloco.cor_title %}style="color: #{{ bloco.cor_title }};"{% endif %}>
      {{ bloco.title }}
    </h2>
  </div>
  {% endif %}

  {% if todos_itens %}

  {# ── Barra de filtros ── #}
  <div class="scal-filtros" role="group" aria-label="Filtros">

    {# Linha 1: Selects + Toggle de view #}
    <div class="scal-filtros-top">
      <div class="scal-selects">


        {% if mostrar_filtro_programas and programas_disponiveis %}
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por programa</span>
            <div class="scal-area-dropdown" data-filtro="area">
              <button class="scal-area-btn" type="button" aria-expanded="false">
                <span class="scal-area-btn-label">Todos os programas</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-area-panel" hidden>
                {% for programa in programas_disponiveis %}
                <label class="scal-mes-item">
                  <input type="checkbox" class="scal-area-check" value="{{ programa }}">
                  <span>{{ programa }}</span>
                </label>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endif %}

        
        {% if anos_disponiveis %}
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por ano</span>
            <div class="scal-ano-dropdown" data-filtro="ano">
              <button class="scal-ano-btn" type="button" aria-expanded="false">
                <span class="scal-ano-btn-label">Todos os anos</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-ano-panel" hidden>
                <label class="scal-mes-item">
                  <input type="radio" class="scal-ano-radio" name="scal-ano" value="todos" checked>
                  <span>Todos os anos</span>
                </label>
                {% for ano in anos_disponiveis %}
                <label class="scal-mes-item">
                  <input type="radio" class="scal-ano-radio" name="scal-ano" value="{{ ano }}">
                  <span>{{ ano }}</span>
                </label>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        {% endif %}
        
        <div class="scal-filtros-chips">
          <div class="scal-filtro-grupo">
            <span class="scal-filtro-label">Por meses</span>
            {% if meses_disponiveis %}
            <div class="scal-mes-dropdown" data-filtro="mes">
              <button class="scal-mes-btn" type="button" aria-expanded="false">
                <span class="scal-mes-btn-label">Todos os meses</span>
                <span class="material-symbols-outlined" style="font-size:16px;line-height:1;" aria-hidden="true">expand_more</span>
              </button>
              <div class="scal-mes-panel" hidden>
                {% for item_mes in meses_disponiveis %}
                <label class="scal-mes-item" data-ano="{{ item_mes.ano }}">
                  <input type="checkbox" class="scal-mes-check"
                        value="{{ item_mes.ano }}-{{ item_mes.mes|stringformat:'02d' }}"
                        data-ano="{{ item_mes.ano }}">
                  <span>{{ item_mes.data_ref|date:"F"|capfirst }}<span class="scal-mes-item-ano"> {{ item_mes.ano }}</span></span>
                </label>
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="scal-filtros-chips scal-filtros-chips--right">
        <div class="scal-filtro-grupo">
          <span class="scal-filtro-label">Vizualização</span>
      <div class="scal-view-toggle" role="group" aria-label="Visualização">
        <button class="scal-view-btn" data-view="lista" title="Lista" aria-pressed="false">
          <span class="material-symbols-outlined">view_list</span>
        </button>
        <button class="scal-view-btn scal-view-btn--ativo" data-view="calendario" title="Calendário" aria-pressed="true">
          <span class="material-symbols-outlined">calendar_month</span>
        </button>
      </div>
      </div>
        <div class="scal-filtro-grupo">
          <span class="scal-filtro-label">Exportar</span>
          <button class="scal-pdf-btn" type="button" title="Exportar calendário como PDF">
            <span class="material-symbols-outlined">picture_as_pdf</span>
            <span>PDF</span>
          </button>
        </div>
      </div>
      </div>

    {# Linha 2: Chips de filtro #}
    <div class="scal-filtros-chips">
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Tipo</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="tipo" data-valor="todos">Todos</button>
          <button class="scal-chip" data-filtro="tipo" data-valor="curso">
            <span class="material-symbols-outlined scal-chip-icon">school</span>Curso
          </button>
          <button class="scal-chip" data-filtro="tipo" data-valor="evento">
            <span class="material-symbols-outlined scal-chip-icon">event</span>Evento
          </button>
        </div>
      </div>

      {% if modalidades_disponiveis|length > 1 %}
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Modalidade</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="modalidade" data-valor="todos">Todos</button>
          {% for m in modalidades_disponiveis %}
          <button class="scal-chip" data-filtro="modalidade" data-valor="{{ m.valor }}">
            <span class="material-symbols-outlined scal-chip-icon">{{ m.icone }}</span>{{ m.label }}
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      {% if situacoes_disponiveis|length > 0 %}
      <div class="scal-filtro-grupo">
        <span class="scal-filtro-label">Inscrições</span>
        <div class="scal-chips">
          <button class="scal-chip scal-chip--ativo" data-filtro="situacao" data-valor="todos">Todos</button>
          {% for s in situacoes_disponiveis %}
          <button class="scal-chip" data-filtro="situacao" data-valor="{{ s.valor }}">
            <span class="material-symbols-outlined scal-chip-icon">{{ s.icone }}</span>{{ s.label }}
          </button>
          {% endfor %}
        </div>
      </div>
      {% endif %}

      <button class="scal-limpar-filtros scal-limpar-filtros--inline" style="display:none;">
        <span class="material-symbols-outlined" style="font-size:16px;line-height:1;">filter_list_off</span>
        Limpar filtros
      </button>
    </div>

  </div>

  {% if aviso_ativo and aviso_mensagem %}
  <div class="scal-aviso" role="note" aria-live="polite">
    <span class="material-symbols-outlined scal-aviso-icone" aria-hidden="true">info</span>
    <p class="scal-aviso-texto">{{ aviso_mensagem }}</p>
    <button class="scal-aviso-fechar" type="button" aria-label="Fechar aviso">
      <span class="material-symbols-outlined" aria-hidden="true">close</span>
    </button>
  </div>
  {% endif %}

  <div class="scal-view" data-view-container="lista" style="display:none;">
    <div class="scal-lista">

      {% for grupo in calendario %}
      <div class="scal-lista-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">

        <div class="scal-lista-mes-header">
          <span class="scal-lista-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-lista-mes-count"><span class="scal-lista-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>

        <div class="scal-lista-itens">
          {% for item in grupo.itens %}
          <div class="scal-lista-row"
               data-modalidade="{{ item.cal_modalidade }}"
               data-situacao="{{ item.cal_situacao_inscricao }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-programa="{{ item.cal_programa }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-lista-data">
              <span class="scal-lista-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-lista-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-lista-badges">
              <span class="scal-badge scal-badge--{{ item.cal_tipo }}">{{ item.cal_tipo|capfirst }}</span>
              {% if item.cal_situacao_info %}
              <span class="scal-badge scal-badge--situacao scal-badge--{{ item.cal_situacao_inscricao }}">
                <span class="material-symbols-outlined scal-badge-icon">{{ item.cal_situacao_info.icone }}</span>{{ item.cal_situacao_info.label }}
              </span>
              {% endif %}
            </div>

            <p class="scal-lista-nome">
              {% if item.url %}
                <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
              {% else %}
                {{ item.cal_nome }}
              {% endif %}
            </p>

            <div class="scal-lista-meta">
              {% if item.cal_modalidade %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">{{ item.cal_modalidade_info.icone }}</span>{{ item.cal_modalidade_info.label }}
              </span>
              {% endif %}
              {% if item.horario %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}
              </span>
              {% endif %}
              {% if item.carga_horaria %}
              <span class="scal-meta-item">
                <span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h
              </span>
              {% endif %}
            </div>

            {% if item.data_inicio %}
            <div class="scal-lista-export" aria-label="Ações do item">
              <button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
              {% if item.url %}
              <button class="scal-share-btn" type="button" title="Compartilhar" aria-label="Compartilhar">
                <span class="material-symbols-outlined" aria-hidden="true">share</span>
              </button>
              {% endif %}
            </div>
            {% endif %}

          </div>
          {% endfor %}
        </div>

      </div>
      {% endfor %}

    </div>
  </div>


  <div class="scal-view" data-view-container="calendario">
    <div class="scal-grid-cards">
      {% for grupo in calendario %}
      <div class="scal-grid-grupo"
           data-mes="{{ grupo.ano }}-{{ grupo.mes|stringformat:'02d' }}">
        <div class="scal-grid-mes-header">
          <span class="scal-grid-mes-titulo">{{ grupo.data_ref|date:"F Y"|capfirst }}</span>
          <span class="scal-grid-mes-count"><span class="scal-grid-mes-num">{{ grupo.itens|length }}</span> itens</span>
        </div>
        <div class="scal-grid-mes-cards">
          {% for item in grupo.itens %}
          <div class="scal-card"
               data-modalidade="{{ item.cal_modalidade }}"
               data-situacao="{{ item.cal_situacao_inscricao }}"
               data-tipo="{{ item.cal_tipo }}"
               data-area="{{ item.cal_area }}"
               data-programa="{{ item.cal_programa }}"
               data-ano="{{ item.data_inicio|date:'Y' }}"
               data-mes="{{ item.data_inicio|date:'Y-m' }}"
               data-dia="{{ item.data_inicio|date:'j' }}"
               data-nome="{{ item.cal_nome }}"
               data-data-inicio="{{ item.data_inicio|date:'Y-m-d' }}"
               {% if item.url %}data-url="{{ item.url }}"{% endif %}
               {% if item.horario %}data-horario="{{ item.horario|slice:':5' }}"{% endif %}>

            {% if item.data_inicio %}
            <div class="scal-card-data">
              <span class="scal-card-dia">{{ item.data_inicio|date:"d" }}</span>
              <span class="scal-card-mes-abr">{{ item.data_inicio|date:"M" }}</span>
              <span class="scal-card-semana">{{ item.data_inicio|date:"D" }}</span>
            </div>
            {% endif %}

            <div class="scal-card-body">
              <div class="scal-card-badges-wrapper">
                <div class="wrapper-tag-title">
                  <div class="scal-card-badges">
                    <span class="scal-badge scal-badge--{{ item.cal_tipo }}">{{ item.cal_tipo|capfirst }}</span>
                    {% if item.cal_situacao_info %}
                    <span class="scal-badge scal-badge--situacao scal-badge--{{ item.cal_situacao_inscricao }}">
                      <span class="material-symbols-outlined scal-badge-icon">{{ item.cal_situacao_info.icone }}</span>{{ item.cal_situacao_info.label }}
                    </span>
                    {% endif %}
                  </div>
                  {% if item.cal_nome %}
                  <p class="scal-card-titulo">
                    {% if item.url %}
                      <a href="{{ item.url }}" target="_blank" rel="noopener noreferrer" class="scal-card-link">{{ item.cal_nome }}</a>
                    {% else %}
                      {{ item.cal_nome }}
                    {% endif %}
                  </p>
                  {% endif %}
                </div>
                <div class="scal-card-meta">
                  {% if item.cal_modalidade %}
                  <span class="scal-meta-item"><span class="material-symbols-outlined scal-meta-icon">{{ item.cal_modalidade_info.icone }}</span>{{ item.cal_modalidade_info.label }}</span>
                  {% endif %}
                  {% if item.horario %}
                  <span class="scal-meta-item"><span class="material-symbols-outlined scal-meta-icon">schedule</span>{{ item.horario|slice:":5" }}</span>
                  {% endif %}
                  {% if item.carga_horaria %}
                  <span class="scal-meta-item"><span class="material-symbols-outlined scal-meta-icon">timer</span>{{ item.carga_horaria }}h</span>
                  {% endif %}
                </div>
              </div>
            </div>

            {% if item.data_inicio %}
            <div class="scal-card-actions" role="group" aria-label="Ações do item">
              <button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">
                <span class="material-symbols-outlined" aria-hidden="true">event_available</span>
              </button>
              {% if item.url %}
              <button class="scal-share-btn" type="button" title="Compartilhar" aria-label="Compartilhar">
                <span class="material-symbols-outlined" aria-hidden="true">share</span>
              </button>
              {% endif %}
            </div>
            {% endif %}

          </div>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  {# ── Paginação ── #}
  <div class="scal-paginacao" style="display:none;">
    <button class="scal-ver-mais-btn" type="button">
      <span class="material-symbols-outlined">expand_more</span>Ver mais
    </button>
    <button class="scal-ver-menos-btn" type="button" style="display:none;">
      <span class="material-symbols-outlined">expand_less</span>Ver menos
    </button>
  </div>

  {# ── Estado vazio geral ── #}
  <div class="scal-vazio-filtro" style="display:none;" aria-live="polite">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item encontrado com os filtros selecionados.</p>
    <button class="scal-limpar-filtros">Limpar filtros</button>
  </div>

  {% else %}
  {% if aguardando_cache %}
  <div class="scal-loading-cache" id="scal-loading-cache">
    <span class="material-symbols-outlined scal-loading-icon scal-loading-icon--lg" aria-hidden="true">autorenew</span>
    <p class="scal-loading-titulo">Carregando calendário...</p>
    <p class="scal-loading-subtitulo">Os dados estão sendo carregados. A página será atualizada automaticamente.</p>
  </div>
  <script>
    (function () {
      var delay = 6000;
      var max = 5;
      var attempt = parseInt(sessionStorage.getItem('scal_reload') || '0', 10);
      if (attempt < max) {
        sessionStorage.setItem('scal_reload', attempt + 1);
        setTimeout(function () { location.reload(); }, delay);
      } else {
        sessionStorage.removeItem('scal_reload');
        var el = document.getElementById('scal-loading-cache');
        if (el) {
          el.querySelector('.scal-loading-titulo').textContent = 'Não foi possível carregar os dados. Tente recarregar a página.';
          var sub = el.querySelector('.scal-loading-subtitulo');
          if (sub) sub.hidden = true;
          el.querySelector('.scal-loading-icon').style.animation = 'none';
        }
      }
    }());
  </script>
  {% else %}
  <div class="scal-vazio-filtro">
    <span class="material-symbols-outlined scal-vazio-icon">calendar_today</span>
    <p>Nenhum item disponível no momento.</p>
  </div>
  {% endif %}
  {% endif %}

  {# Frame de impressão/PDF (montado por JS) #}
  <div class="scal-print-frame" aria-hidden="true"></div>

</section>
</div>

{# Popup global de export — fora dos cards para escapar do overflow:hidden #}
<div id="scal-share-popup" hidden role="menu" aria-label="Compartilhar">
  <button class="scal-export-option" data-share="whatsapp" type="button" role="menuitem">
    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;color:#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>WhatsApp
  </button>
  <button class="scal-export-option" data-share="linkedin" type="button" role="menuitem">
    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;color:#0A66C2"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>LinkedIn
  </button>
</div>

<div id="scal-export-popup" hidden role="menu" aria-label="Adicionar ao calendário">
  <button class="scal-export-option" data-export="google" type="button" role="menuitem">
    <span class="material-symbols-outlined" aria-hidden="true">event_available</span>Google Calendar
  </button>
  <button class="scal-export-option" data-export="outlook" type="button" role="menuitem">
    <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0;"><path d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 3c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm6 12H6v-1c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1z"/></svg>Microsoft Outlook
  </button>
</div>

<script>
  (function () {
    /* ── Encontra o wrapper: currentScript é mais confiável, fallback por marca ── */
    var wrapper = null;
    if (document.currentScript) {
      wrapper = document.currentScript.closest('.scal-outer');
    }
    if (!wrapper) {
      var outers = document.querySelectorAll('.scal-outer:not([data-scal-init])');
      wrapper = outers[outers.length - 1] || null;
    }
    if (!wrapper) return;
    wrapper.setAttribute('data-scal-init', '1');

    var filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', situacao: 'todos', tipo: 'todos' };
    var viewAtual = 'calendario';
    var viewManual = false; // true somente após clique manual no toggle

    var hoje = new Date();
    var anoInicial = parseInt(wrapper.dataset.anoInicial || hoje.getFullYear(), 10);
    var anoCarregado = anoInicial;
    var cacheAnos = {}; // dados já buscados: { 2026: {...}, 2025: {...} }

    /* ── Helpers de escape HTML ── */
    function esc(s) {
      return String(s == null ? '' : s)
        .replace(/&/g,'&amp;').replace(/</g,'&lt;')
        .replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    /* ── Constrói HTML de um scal-card (usado em kanban e calendario) ── */
    function construirCard(item) {
      var d = item.data_inicio;
      var html = '<div class="scal-card"'
        + ' data-modalidade="' + esc(item.cal_modalidade) + '"'
        + ' data-situacao="'   + esc(item.cal_situacao_inscricao) + '"'
        + ' data-tipo="'       + esc(item.cal_tipo) + '"'
        + ' data-area="'       + esc(item.cal_area) + '"'
        + ' data-programa="'   + esc(item.cal_programa) + '"'
        + ' data-ano="'        + (d ? d.ano : '') + '"'
        + ' data-mes="'        + (d ? d.ano_mes : '') + '"'
        + ' data-dia="'        + (d ? d.dia : '') + '"'
        + ' data-nome="'       + esc(item.cal_nome) + '"'
        + ' data-data-inicio="'+ (d ? d.iso : '') + '"'
        + (item.url     ? ' data-url="'     + esc(item.url) + '"'     : '')
        + (item.horario ? ' data-horario="' + esc(item.horario) + '"' : '')
        + '>';

      if (d) {
        html += '<div class="scal-card-data">'
          + '<span class="scal-card-dia">'     + esc(d.dia)    + '</span>'
          + '<span class="scal-card-mes-abr">' + esc(d.mes_abr)+ '</span>'
          + '<span class="scal-card-semana">'  + esc(d.semana) + '</span>'
          + '</div>';
      }

      var tipo_cap = item.cal_tipo ? item.cal_tipo.charAt(0).toUpperCase() + item.cal_tipo.slice(1) : '';
      html += '<div class="scal-card-body"><div class="scal-card-badges-wrapper"><div class="wrapper-tag-title">'
        + '<div class="scal-card-badges">'
        + '<span class="scal-badge scal-badge--' + esc(item.cal_tipo) + '">' + esc(tipo_cap) + '</span>';

      if (item.cal_situacao_info) {
        html += '<span class="scal-badge scal-badge--situacao scal-badge--' + esc(item.cal_situacao_inscricao) + '">'
          + '<span class="material-symbols-outlined scal-badge-icon">' + esc(item.cal_situacao_info.icone) + '</span>'
          + esc(item.cal_situacao_info.label) + '</span>';
      }
      html += '</div>';

      if (item.cal_nome) {
        html += '<p class="scal-card-titulo">';
        html += item.url
          ? '<a href="' + esc(item.url) + '" target="_blank" rel="noopener noreferrer" class="scal-card-link">' + esc(item.cal_nome) + '</a>'
          : esc(item.cal_nome);
        html += '</p>';
      }
      html += '</div><div class="scal-card-meta">';

      if (item.cal_modalidade && item.cal_modalidade_info) {
        html += '<span class="scal-meta-item">'
          + '<span class="material-symbols-outlined scal-meta-icon">' + esc(item.cal_modalidade_info.icone) + '</span>'
          + esc(item.cal_modalidade_info.label) + '</span>';
      }
      if (item.horario) {
        html += '<span class="scal-meta-item">'
          + '<span class="material-symbols-outlined scal-meta-icon">schedule</span>'
          + esc(item.horario) + '</span>';
      }
      if (item.carga_horaria) {
        html += '<span class="scal-meta-item">'
          + '<span class="material-symbols-outlined scal-meta-icon">timer</span>'
          + esc(String(item.carga_horaria)) + 'h</span>';
      }
      html += '</div></div></div>';

      if (d) {
        html += '<div class="scal-card-actions" role="group" aria-label="Ações do item">'
          + '<button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">'
          + '<span class="material-symbols-outlined" aria-hidden="true">event_available</span>'
          + '</button>';
        if (item.url) {
          html += '<button class="scal-share-btn" type="button" title="Compartilhar" aria-label="Compartilhar">'
            + '<span class="material-symbols-outlined" aria-hidden="true">share</span>'
            + '</button>';
        }
        html += '</div>';
      }
      html += '</div>';
      return html;
    }

    /* ── Constrói HTML de um scal-lista-row ── */
    function construirListaRow(item) {
      var d = item.data_inicio;
      var tipo_cap = item.cal_tipo ? item.cal_tipo.charAt(0).toUpperCase() + item.cal_tipo.slice(1) : '';
      var html = '<div class="scal-lista-row"'
        + ' data-modalidade="' + esc(item.cal_modalidade) + '"'
        + ' data-situacao="'   + esc(item.cal_situacao_inscricao) + '"'
        + ' data-tipo="'       + esc(item.cal_tipo) + '"'
        + ' data-area="'       + esc(item.cal_area) + '"'
        + ' data-programa="'   + esc(item.cal_programa) + '"'
        + ' data-ano="'        + (d ? d.ano : '') + '"'
        + ' data-mes="'        + (d ? d.ano_mes : '') + '"'
        + ' data-nome="'       + esc(item.cal_nome) + '"'
        + ' data-data-inicio="'+ (d ? d.iso : '') + '"'
        + (item.url     ? ' data-url="'     + esc(item.url) + '"'     : '')
        + (item.horario ? ' data-horario="' + esc(item.horario) + '"' : '')
        + '>';

      if (d) {
        html += '<div class="scal-lista-data">'
          + '<span class="scal-lista-dia">'     + esc(d.dia)    + '</span>'
          + '<span class="scal-lista-mes-abr">' + esc(d.mes_abr)+ '</span>'
          + '<span class="scal-card-semana">'   + esc(d.semana) + '</span>'
          + '</div>';
      }

      html += '<div class="scal-lista-badges">'
        + '<span class="scal-badge scal-badge--' + esc(item.cal_tipo) + '">' + esc(tipo_cap) + '</span>';
      if (item.cal_situacao_info) {
        html += '<span class="scal-badge scal-badge--situacao scal-badge--' + esc(item.cal_situacao_inscricao) + '">'
          + '<span class="material-symbols-outlined scal-badge-icon">' + esc(item.cal_situacao_info.icone) + '</span>'
          + esc(item.cal_situacao_info.label) + '</span>';
      }
      html += '</div>';

      html += '<p class="scal-lista-nome">';
      html += item.url
        ? '<a href="' + esc(item.url) + '" target="_blank" rel="noopener noreferrer" class="scal-card-link">' + esc(item.cal_nome) + '</a>'
        : esc(item.cal_nome);
      html += '</p><div class="scal-lista-meta">';

      if (item.cal_modalidade && item.cal_modalidade_info) {
        html += '<span class="scal-meta-item">'
          + '<span class="material-symbols-outlined scal-meta-icon">' + esc(item.cal_modalidade_info.icone) + '</span>'
          + esc(item.cal_modalidade_info.label) + '</span>';
      }
      if (item.horario) {
        html += '<span class="scal-meta-item">'
          + '<span class="material-symbols-outlined scal-meta-icon">schedule</span>'
          + esc(item.horario) + '</span>';
      }
      if (item.carga_horaria) {
        html += '<span class="scal-meta-item">'
          + '<span class="material-symbols-outlined scal-meta-icon">timer</span>'
          + esc(String(item.carga_horaria)) + 'h</span>';
      }
      html += '</div>';

      if (d) {
        html += '<div class="scal-lista-export" aria-label="Ações do item">'
          + '<button class="scal-export-btn scal-export-trigger" type="button" title="Adicionar ao calendário" aria-label="Adicionar ao calendário" aria-expanded="false">'
          + '<span class="material-symbols-outlined" aria-hidden="true">event_available</span>'
          + '</button>';
        if (item.url) {
          html += '<button class="scal-share-btn" type="button" title="Compartilhar" aria-label="Compartilhar">'
            + '<span class="material-symbols-outlined" aria-hidden="true">share</span>'
            + '</button>';
        }
        html += '</div>';
      }
      html += '</div>';
      return html;
    }

    /* ── Renderiza o calendário completo a partir de dados JSON ── */
    function renderizarCalendario(data) {
      // Lista
      var lista = wrapper.querySelector('.scal-lista');
      if (lista) {
        lista.innerHTML = '';
        data.calendario.forEach(function(grupo) {
          var g = document.createElement('div');
          g.className = 'scal-lista-grupo';
          g.setAttribute('data-mes', grupo.data_mes);
          g.innerHTML = '<div class="scal-lista-mes-header">'
            + '<span class="scal-lista-mes-titulo">' + esc(grupo.data_ref_label) + '</span>'
            + '<span class="scal-lista-mes-count"><span class="scal-lista-mes-num">' + grupo.itens.length + '</span> itens</span>'
            + '</div>'
            + '<div class="scal-lista-itens">' + grupo.itens.map(construirListaRow).join('') + '</div>';
          lista.appendChild(g);
        });
      }

      // Calendário (grid)
      var grid = wrapper.querySelector('.scal-grid-cards');
      if (grid) {
        grid.innerHTML = '';
        data.calendario.forEach(function(grupo) {
          var g = document.createElement('div');
          g.className = 'scal-grid-grupo';
          g.setAttribute('data-mes', grupo.data_mes);
          g.innerHTML = '<div class="scal-grid-mes-header">'
            + '<span class="scal-grid-mes-titulo">' + esc(grupo.data_ref_label) + '</span>'
            + '<span class="scal-grid-mes-count"><span class="scal-grid-mes-num">' + grupo.itens.length + '</span> itens</span>'
            + '</div>'
            + '<div class="scal-grid-mes-cards">' + grupo.itens.map(construirCard).join('') + '</div>';
          grid.appendChild(g);
        });
      }

      // Dropdown de meses
      var mesPanel = wrapper.querySelector('.scal-mes-panel');
      if (mesPanel) {
        mesPanel.innerHTML = '';
        data.meses_disponiveis.forEach(function(m) {
          var lbl = document.createElement('label');
          lbl.className = 'scal-mes-item';
          lbl.setAttribute('data-ano', m.ano);
          lbl.innerHTML = '<input type="checkbox" class="scal-mes-check" value="' + m.data_mes + '" data-ano="' + m.ano + '">'
            + '<span>' + esc(m.mes_abr_label) + '<span class="scal-mes-item-ano"> ' + m.ano + '</span></span>';
          mesPanel.appendChild(lbl);
        });
        mesPanel.querySelectorAll('.scal-mes-check').forEach(function(cb) {
          cb.addEventListener('change', function() {
            if (cb.checked) { filtros.meses.push(cb.value); }
            else { filtros.meses = filtros.meses.filter(function(m) { return m !== cb.value; }); }
            atualizarLabelMes();
            aplicarFiltros();
          });
        });
      }

      // Marcar mês atual nos novos elementos
      var mesAtualStr = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
      wrapper.querySelectorAll('[data-mes="' + mesAtualStr + '"]').forEach(function(grupo) {
        grupo.classList.add('scal-mes--atual');
        var header = grupo.querySelector('.scal-coluna-header, .scal-lista-mes-header, .scal-grid-mes-header');
        if (header && !header.querySelector('.scal-tag-mes-atual')) {
          var tag = document.createElement('span');
          tag.className = 'scal-tag-mes-atual';
          tag.textContent = 'Mês atual';
          var countEl = header.querySelector('.scal-coluna-count, .scal-lista-mes-count, .scal-grid-mes-count');
          header.insertBefore(tag, countEl || null);
        }
      });

      anoCarregado = data.ano;
      filtros.meses = [];
      atualizarLabelMes();
      filtrarMesesPorAno(String(data.ano));
      aplicarFiltros();
    }

    /* ── Carrega um ano via AJAX (com JS cache) ── */
    function carregarAno(ano) {
      if (ano === anoCarregado) {
        filtrarMesesPorAno(String(ano));
        aplicarFiltros();
        return;
      }
      if (cacheAnos[ano]) {
        renderizarCalendario(cacheAnos[ano]);
        return;
      }

      // Loading state
      var views = wrapper.querySelectorAll('.scal-view');
      views.forEach(function(v) { v.style.opacity = '0.4'; v.style.pointerEvents = 'none'; });

      var apiUrl = wrapper.dataset.apiUrl || '/api/suap/calendario/';
      var programas = [];
      try { programas = JSON.parse(wrapper.dataset.programas || '[]'); } catch(e) {}
      var url = apiUrl + '?ano=' + ano;
      programas.forEach(function(p) { url += '&programas=' + encodeURIComponent(p); });

      fetch(url)
        .then(function(r) {
          if (!r.ok) throw new Error('HTTP ' + r.status);
          return r.json();
        })
        .then(function(data) {
          cacheAnos[ano] = data;
          views.forEach(function(v) { v.style.opacity = ''; v.style.pointerEvents = ''; });
          renderizarCalendario(data);
        })
        .catch(function(err) {
          views.forEach(function(v) { v.style.opacity = ''; v.style.pointerEvents = ''; });
          console.error('Erro ao carregar calendário:', err);
        });
    }

    /* ── Marcar grupo do mês atual e inserir tag na linha do header (todas as views) ── */
    var mesAtualStr = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
    wrapper.querySelectorAll('[data-mes="' + mesAtualStr + '"]').forEach(function (grupo) {
      grupo.classList.add('scal-mes--atual');
      var header = grupo.querySelector('.scal-coluna-header, .scal-lista-mes-header, .scal-grid-mes-header');
      if (header && !header.querySelector('.scal-tag-mes-atual')) {
        var tag = document.createElement('span');
        tag.className = 'scal-tag-mes-atual';
        tag.textContent = 'Mês atual';
        var countEl = header.querySelector('.scal-coluna-count, .scal-lista-mes-count, .scal-grid-mes-count');
        header.insertBefore(tag, countEl || null);
      }
    });

    /* ── Toggle de view ── */
    wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        mudarView(btn.dataset.view, true);
      });
    });

    function mudarView(view, manual) {
      if (manual) viewManual = true;   // só seta true; nunca reseta para false aqui
      viewAtual = view;

      wrapper.querySelectorAll('.scal-view').forEach(function (el) {
        el.style.display = el.dataset.viewContainer === view ? '' : 'none';
      });
      wrapper.querySelectorAll('.scal-view-btn').forEach(function (btn) {
        var ativo = btn.dataset.view === view;
        btn.classList.toggle('scal-view-btn--ativo', ativo);
        btn.setAttribute('aria-pressed', ativo ? 'true' : 'false');
      });

    }

    /* ── Dropdown de ano ── */
    var anoDropdown = wrapper.querySelector('.scal-ano-dropdown');
    if (anoDropdown) {
      var anoBtn = anoDropdown.querySelector('.scal-ano-btn');
      var anoPanelEl = anoDropdown.querySelector('.scal-ano-panel');

      anoBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !anoPanelEl.hidden;
        anoPanelEl.hidden = aberto;
        anoBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      anoPanelEl.querySelectorAll('.scal-ano-radio').forEach(function (radio) {
        radio.addEventListener('change', function () {
          var anoSelecionado = radio.value;
          filtros.ano = anoSelecionado;
          atualizarLabelAno();
          anoPanelEl.hidden = true;
          anoBtn.setAttribute('aria-expanded', 'false');

          if (anoSelecionado === 'todos') {
            // Restaura o ano inicial (já está no DOM ou no cache)
            if (anoCarregado !== anoInicial) {
              carregarAno(anoInicial);
            } else {
              filtrarMesesPorAno('todos');
              aplicarFiltros();
            }
          } else {
            var anoNum = parseInt(anoSelecionado, 10);
            mudarView('calendario', true);
            carregarAno(anoNum);
          }
        });
      });

      document.addEventListener('click', function (e) {
        if (!anoDropdown.contains(e.target)) {
          anoPanelEl.hidden = true;
          anoBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelAno() {
      var btn = wrapper.querySelector('.scal-ano-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-ano-btn-label');
      if (!label) return;
      label.textContent = filtros.ano === 'todos' ? 'Todos os anos' : filtros.ano;
    }

    /* ── Chips ── */
    wrapper.querySelectorAll('.scal-chip').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var grupo = btn.dataset.filtro;
        filtros[grupo] = btn.dataset.valor;
        wrapper.querySelectorAll('.scal-chip[data-filtro="' + grupo + '"]')
          .forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        btn.classList.add('scal-chip--ativo');
        // Não altera viewManual — mantém a view atual
        aplicarFiltros();
      });
    });

    /* ── Dropdown de meses ── */
    var mesDropdown = wrapper.querySelector('.scal-mes-dropdown');
    if (mesDropdown) {
      var mesBtn = mesDropdown.querySelector('.scal-mes-btn');
      var mesPanelEl = mesDropdown.querySelector('.scal-mes-panel');

      mesBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !mesPanelEl.hidden;
        mesPanelEl.hidden = aberto;
        mesBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      mesPanelEl.querySelectorAll('.scal-mes-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.meses.push(cb.value);
          } else {
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
          atualizarLabelMes();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!mesDropdown.contains(e.target)) {
          mesPanelEl.hidden = true;
          mesBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    /* ── Dropdown de áreas ── */
    var areaDropdown = wrapper.querySelector('.scal-area-dropdown');
    if (areaDropdown) {
      var areaBtn = areaDropdown.querySelector('.scal-area-btn');
      var areaPanelEl = areaDropdown.querySelector('.scal-area-panel');

      areaBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        var aberto = !areaPanelEl.hidden;
        areaPanelEl.hidden = aberto;
        areaBtn.setAttribute('aria-expanded', aberto ? 'false' : 'true');
      });

      areaPanelEl.querySelectorAll('.scal-area-check').forEach(function (cb) {
        cb.addEventListener('change', function () {
          if (cb.checked) {
            filtros.areas.push(cb.value);
          } else {
            filtros.areas = filtros.areas.filter(function (a) { return a !== cb.value; });
          }
          atualizarLabelArea();
          aplicarFiltros();
        });
      });

      document.addEventListener('click', function (e) {
        if (!areaDropdown.contains(e.target)) {
          areaPanelEl.hidden = true;
          areaBtn.setAttribute('aria-expanded', 'false');
        }
      });
    }

    function atualizarLabelArea() {
      var btn = wrapper.querySelector('.scal-area-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-area-btn-label');
      if (!label) return;
      if (filtros.areas.length === 0) {
        label.textContent = 'Todas as áreas';
      } else if (filtros.areas.length === 1) {
        label.textContent = filtros.areas[0];
      } else {
        label.textContent = filtros.areas.length + ' áreas';
      }
    }

    function atualizarLabelMes() {
      var btn = wrapper.querySelector('.scal-mes-btn');
      if (!btn) return;
      var label = btn.querySelector('.scal-mes-btn-label');
      if (!label) return;
      if (filtros.meses.length === 0) {
        label.textContent = 'Todos os meses';
      } else if (filtros.meses.length === 1) {
        var cb = wrapper.querySelector('.scal-mes-check[value="' + filtros.meses[0] + '"]');
        if (cb) {
          var itemEl = cb.closest('.scal-mes-item');
          label.textContent = itemEl ? itemEl.querySelector('span').textContent.trim() : filtros.meses[0];
        }
      } else {
        label.textContent = filtros.meses.length + ' meses';
      }
    }

    function filtrarMesesPorAno(ano) {
      var panel = wrapper.querySelector('.scal-mes-panel');
      if (!panel) return;
      panel.classList.toggle('scal-mes-panel--ano-filtrado', ano !== 'todos');
      panel.querySelectorAll('.scal-mes-item').forEach(function (item) {
        var mostra = ano === 'todos' || item.dataset.ano === ano;
        item.classList.toggle('scal-mes-item--oculta', !mostra);
        if (!mostra) {
          var cb = item.querySelector('.scal-mes-check');
          if (cb && cb.checked) {
            cb.checked = false;
            filtros.meses = filtros.meses.filter(function (m) { return m !== cb.value; });
          }
        }
      });
      atualizarLabelMes();
    }

    /* ── Limpar filtros ── */
    wrapper.querySelectorAll('.scal-limpar-filtros').forEach(function (btnLimpar) {
      btnLimpar.addEventListener('click', function () {
        filtros = { areas: [], ano: 'todos', meses: [], status: 'todos', modalidade: 'todos', situacao: 'todos', tipo: 'todos' };
        var radioTodos = wrapper.querySelector('.scal-ano-radio[value="todos"]');
        if (radioTodos) radioTodos.checked = true;
        wrapper.querySelectorAll('.scal-mes-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-area-check').forEach(function (cb) { cb.checked = false; });
        wrapper.querySelectorAll('.scal-mes-item').forEach(function (item) { item.classList.remove('scal-mes-item--oculta'); });
        var resetPanel = wrapper.querySelector('.scal-mes-panel');
        if (resetPanel) resetPanel.classList.remove('scal-mes-panel--ano-filtrado');
        atualizarLabelAno();
        atualizarLabelMes();
        atualizarLabelArea();
        wrapper.querySelectorAll('.scal-chip[data-valor="todos"]').forEach(function (b) { b.classList.add('scal-chip--ativo'); });
        wrapper.querySelectorAll('.scal-chip:not([data-valor="todos"])').forEach(function (b) { b.classList.remove('scal-chip--ativo'); });
        viewManual = false;
        aplicarFiltros();
      });
    });


    /* ── Mostrar/ocultar botão limpar inline ── */
    function atualizarBtnLimpar() {
      var temFiltro = filtros.areas.length > 0 || filtros.meses.length > 0 ||
        Object.keys(filtros).some(function (k) {
          return k !== 'areas' && k !== 'meses' && filtros[k] !== 'todos';
        });
      var btnInline = wrapper.querySelector('.scal-limpar-filtros--inline');
      if (btnInline) btnInline.style.display = temFiltro ? '' : 'none';
    }

    /* ── Filtro por item ── */
    function itemPassaFiltro(el) {
      return (
        (filtros.areas.length === 0    || filtros.areas.indexOf(el.dataset.programa) !== -1) &&
        (filtros.ano        === 'todos' || el.dataset.ano        === filtros.ano) &&
        (filtros.meses.length === 0    || filtros.meses.indexOf(el.dataset.mes) !== -1) &&
        (filtros.status     === 'todos' || el.dataset.status     === filtros.status) &&
        (filtros.modalidade === 'todos' || el.dataset.modalidade === filtros.modalidade) &&
        (filtros.situacao   === 'todos' || el.dataset.situacao   === filtros.situacao) &&
        (filtros.tipo       === 'todos' || el.dataset.tipo       === filtros.tipo)
      );
    }

    /* ── Paginação ── */
    var PAGINA_ITENS = 50;
    var paginaAtual = PAGINA_ITENS;

    function aplicarPaginacao() {
      var cont = 0;
      var temMais = false;

      /* Lista: limita rows visíveis globalmente */
      cont = 0;
      wrapper.querySelectorAll('.scal-lista .scal-lista-grupo').forEach(function (grupo) {
        if (grupo.style.display === 'none') return;
        var visivelNaPag = 0;
        grupo.querySelectorAll('.scal-lista-row').forEach(function (row) {
          if (row.style.display === 'none') return; /* filtrado */
          cont++;
          var paginado = cont > paginaAtual;
          row.classList.toggle('scal-lista-row--paginado', paginado);
          if (paginado) temMais = true;
          else visivelNaPag++;
        });
        /* Se todas as rows do grupo foram paginadas, esconde o grupo */
        var totalNaoFiltradas = grupo.querySelectorAll('.scal-lista-row:not([style*="display: none"])').length;
        if (totalNaoFiltradas > 0 && visivelNaPag === 0) grupo.style.display = 'none';
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visivelNaPag;
      });

      /* Botões */
      var paginacaoEl = wrapper.querySelector('.scal-paginacao');
      var verMaisBtn  = wrapper.querySelector('.scal-ver-mais-btn');
      var verMenosBtn = wrapper.querySelector('.scal-ver-menos-btn');
      var mostraBotoes = temMais || paginaAtual > PAGINA_ITENS;
      if (paginacaoEl) paginacaoEl.style.display = mostraBotoes ? '' : 'none';
      if (verMaisBtn) {
        verMaisBtn.style.display = mostraBotoes ? '' : 'none';
        verMaisBtn.disabled = !temMais;
      }
      if (verMenosBtn) verMenosBtn.style.display = paginaAtual > PAGINA_ITENS ? '' : 'none';

      /* Atualiza visibilidade do divisor "O que já fizemos" após paginação */
      var mesAtualPag = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
      var listaContainer = wrapper.querySelector('.scal-lista');
      var listaDiv = listaContainer ? listaContainer.querySelector('.scal-historico-divisor') : null;
      if (listaDiv && listaContainer) {
        var passadosPag = Array.prototype.filter.call(
          listaContainer.querySelectorAll('.scal-lista-grupo'),
          function (g) { return (g.dataset.mes || '') < mesAtualPag; }
        );
        var algumPassadoVisivel = passadosPag.some(function (g) { return g.style.display !== 'none'; });
        listaDiv.style.display = algumPassadoVisivel ? '' : 'none';
      }

    }

    /* ── Reordenar grupos de meses no DOM ──
       Regra: mês atual + futuros em ordem crescente, passados em ordem decrescente.
       Quando filtro de ano específico: só considera meses daquele ano.
    ── */
    function reordenarGruposDom(container, seletor) {
      if (!container) return;
      var mesAtual = hoje.getFullYear() + '-' + (hoje.getMonth() + 1 < 10 ? '0' : '') + (hoje.getMonth() + 1);
      var grupos = Array.prototype.slice.call(container.querySelectorAll(seletor));
      if (grupos.length === 0) return;

      var futuros = [];
      var passados = [];
      grupos.forEach(function (el) {
        var mes = el.dataset.mes || '';
        if (mes >= mesAtual) {
          futuros.push(el);
        } else {
          passados.push(el);
        }
      });

      // futuros: crescente (já estão na ordem certa)
      // passados: decrescente (inverter)
      passados.reverse();

      var ordenados = futuros.concat(passados);
      ordenados.forEach(function (el) {
        container.appendChild(el);
      });

      /* ── Separador "O que já fizemos" ── */
      var divisor = container.querySelector('.scal-historico-divisor');
      if (passados.length > 0) {
        if (!divisor) {
          divisor = document.createElement('div');
          divisor.className = 'scal-historico-divisor';
          divisor.setAttribute('aria-hidden', 'true');
          divisor.innerHTML = '<span><span class="material-symbols-outlined" style="font-size:16px;vertical-align:middle;margin-right:6px;">keyboard_arrow_down</span>O que já fizemos</span>';
        }
        container.insertBefore(divisor, passados[0]);
        var temPassadosVisiveis = passados.some(function (el) { return el.style.display !== 'none'; });
        divisor.style.display = temPassadosVisiveis ? '' : 'none';
      } else {
        if (divisor) divisor.remove();
      }

    }

    /* ── Aplicar filtros ── */
    function aplicarFiltros() {
      paginaAtual = PAGINA_ITENS; /* reseta paginação ao mudar filtros */
      atualizarBtnLimpar();
      var totalVisiveis = 0;

      /* Lista */
      wrapper.querySelectorAll('.scal-lista-grupo').forEach(function (grupo) {
        var rows = grupo.querySelectorAll('.scal-lista-row');
        var visiveis = 0;
        rows.forEach(function (row) {
          var ok = itemPassaFiltro(row);
          row.style.display = ok ? '' : 'none';
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-lista-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
        totalVisiveis += visiveis;
      });
      reordenarGruposDom(wrapper.querySelector('.scal-lista'), '.scal-lista-grupo');

      /* Calendário */
      wrapper.querySelectorAll('.scal-grid-grupo').forEach(function (grupo) {
        var cards = grupo.querySelectorAll('.scal-card');
        var visiveis = 0;
        cards.forEach(function (card) {
          var ok = itemPassaFiltro(card);
          card.classList.toggle('scal-card--oculto', !ok);
          if (ok) visiveis++;
        });
        var numEl = grupo.querySelector('.scal-grid-mes-num');
        if (numEl) numEl.textContent = visiveis;
        grupo.style.display = visiveis === 0 ? 'none' : '';
      });
      reordenarGruposDom(wrapper.querySelector('.scal-grid-cards'), '.scal-grid-grupo');

      /* Estado vazio */
      var vazioEl = wrapper.querySelector('.scal-vazio-filtro');
      if (vazioEl) vazioEl.style.display = totalVisiveis === 0 ? '' : 'none';

      /* Auto-view: no mobile sempre calendário; no desktop troca para lista se muitos itens */
      if (!viewManual) {
        var autoView = (window.innerWidth > 640 && totalVisiveis > 80) ? 'lista' : 'calendario';
        mudarView(autoView, false);
      }

      aplicarPaginacao();
    }

    /* ── Ver mais / Ver menos ── */
    var verMaisBtn = wrapper.querySelector('.scal-ver-mais-btn');
    var verMenosBtn = wrapper.querySelector('.scal-ver-menos-btn');
    if (verMaisBtn) {
      verMaisBtn.addEventListener('click', function () {
        paginaAtual += PAGINA_ITENS;
        aplicarPaginacao();
      });
    }
    if (verMenosBtn) {
      verMenosBtn.addEventListener('click', function () {
        paginaAtual = PAGINA_ITENS;
        aplicarPaginacao();
      });
    }

    /* ── Exportar PDF ── */
    var pdfBtn = wrapper.querySelector('.scal-pdf-btn');
    if (pdfBtn) {
      pdfBtn.addEventListener('click', function () {
        var tituloEl = wrapper.querySelector('.scal-titulo');
        var titulo = tituloEl ? tituloEl.textContent.trim() : 'Calendário';

        var agora = new Date();
        var dataExport = agora.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })
          + ' às ' + agora.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });

        var filtrosDesc = [];
        if (filtros.ano !== 'todos') filtrosDesc.push('Ano: ' + filtros.ano);
        if (filtros.meses.length > 0) {
          filtrosDesc.push('Meses: ' + filtros.meses.map(function(m) {
            var p = m.split('-');
            return new Date(parseInt(p[0]), parseInt(p[1]) - 1, 1)
              .toLocaleDateString('pt-BR', { month: 'long', year: 'numeric' });
          }).join(', '));
        }
        if (filtros.modalidade !== 'todos') filtrosDesc.push('Modalidade: ' + filtros.modalidade);
        if (filtros.areas.length > 0) filtrosDesc.push('Áreas: ' + filtros.areas.join(', '));

        var bodyHtml = '';
        wrapper.querySelectorAll('.scal-grid-cards .scal-grid-grupo').forEach(function(grupo) {
          if (grupo.style.display === 'none') return;
          var cards = Array.prototype.filter.call(
            grupo.querySelectorAll('.scal-card'),
            function(c) { return !c.classList.contains('scal-card--oculto'); }
          );
          if (!cards.length) return;

          var labelEl = grupo.querySelector('.scal-grid-mes-titulo');
          var label = labelEl ? labelEl.textContent.trim() : '';

          bodyHtml += '<div class="mes">'
            + '<div class="mes-header">' + esc(label) + ' <span style="font-weight:400;font-size:11px;opacity:.75">(' + cards.length + ')</span></div>'
            + '<div class="mes-itens">';

          cards.forEach(function(card) {
            var dEl    = card.querySelector('.scal-card-data');
            var nome   = esc(card.dataset.nome || '');
            var url    = card.dataset.url || '';
            var tipo   = card.dataset.tipo || '';
            var dia    = dEl && dEl.querySelector('.scal-card-dia')     ? dEl.querySelector('.scal-card-dia').textContent.trim()     : '';
            var mesAbr = dEl && dEl.querySelector('.scal-card-mes-abr') ? dEl.querySelector('.scal-card-mes-abr').textContent.trim() : '';
            var dataStr = dia ? esc(dia + ' ' + mesAbr) : '';
            var tipoLabel = tipo ? tipo.charAt(0).toUpperCase() + tipo.slice(1) : '';

            bodyHtml += '<div class="row">'
              + (dataStr ? '<span class="pdata">' + dataStr + '</span>' : '')
              + (tipoLabel ? '<span class="ptipo">' + esc(tipoLabel) + '</span>' : '')
              + '<span class="pnome">' + (url ? '<a href="' + esc(url) + '" style="color:#007D7A;text-decoration:none">' + nome + '</a>' : nome) + '</span>'
              + '</div>';
          });

          bodyHtml += '</div></div>';
        });

        if (!bodyHtml) {
          alert('Nenhum item para exportar com os filtros atuais.');
          return;
        }

        var div = document.createElement('div');
        div.id = 'scal-pdf-tmp';
        div.innerHTML = '<p style="font-size:20px;font-weight:700;color:#024248;margin:0 0 4px">' + esc(titulo) + '</p>'
          + (filtrosDesc.length ? '<p style="font-size:11px;color:#666;margin:0 0 16px">Filtros: ' + filtrosDesc.join(' | ') + '</p>' : '<br>')
          + bodyHtml;
        document.body.appendChild(div);

        var s = document.createElement('style');
        s.id = 'scal-pdf-tmp-style';
        s.textContent = '@media print{'
          + 'body>*:not(#scal-pdf-tmp){display:none!important}'
          + '#scal-pdf-tmp,#scal-pdf-tmp *{visibility:visible!important}'
          + '#scal-pdf-tmp{display:block!important;position:static;background:#fff;padding:20px 28px}'
          + '#scal-pdf-tmp .mes{margin-bottom:20px}'
          + '#scal-pdf-tmp .mes-header{font-weight:700;font-size:14px;background:#024248;color:#fff;padding:6px 12px;border-radius:4px 4px 0 0;text-transform:capitalize}'
          + '#scal-pdf-tmp .mes-itens{border:1px solid #dde3ec;border-top:none;border-radius:0 0 4px 4px}'
          + '#scal-pdf-tmp .row{display:flex!important;gap:10px;padding:7px 12px;border-bottom:1px solid #f0f4f8;page-break-inside:avoid}'
          + '#scal-pdf-tmp .row:last-child{border-bottom:none}'
          + '#scal-pdf-tmp .pdata{min-width:60px;font-size:12px;color:#007D7A;font-weight:600;flex-shrink:0}'
          + '#scal-pdf-tmp .ptipo{font-size:11px;color:#666;flex-shrink:0;min-width:50px}'
          + '#scal-pdf-tmp .pnome{flex:1;font-size:13px}'
          + '}';
        document.head.appendChild(s);

        window.print();

        document.body.removeChild(div);
        document.head.removeChild(s);
      });
    }

    /* ── Banner de aviso ── */
    var avisoEl = wrapper.querySelector('.scal-aviso');
    if (avisoEl) {
      var fecharBtn = avisoEl.querySelector('.scal-aviso-fechar');
      if (fecharBtn) {
        fecharBtn.addEventListener('click', function () {
          avisoEl.style.display = 'none';
        });
      }
    }

    /* ── Init: default ao ano corrente ── */
    var anoAtualStr = String(anoInicial);
    var radioAnoAtual = wrapper.querySelector('.scal-ano-radio[value="' + anoAtualStr + '"]');
    if (radioAnoAtual) {
      radioAnoAtual.checked = true;
      filtros.ano = anoAtualStr;
      atualizarLabelAno();
      filtrarMesesPorAno(anoAtualStr);
    }
    aplicarFiltros();
  }());

  /* ── Export: Google Calendar / iCal (compartilhado entre instâncias) ── */
  (function () {
    if (window._scalExportInit) return;
    window._scalExportInit = true;

    function pad2(n) { return n < 10 ? '0' + n : '' + n; }

    function parseDtStart(dataInicio, horario) {
      if (!dataInicio) return null;
      var p = dataInicio.split('-');
      if (p.length < 3) return null;
      var base = p[0] + p[1] + p[2];
      if (horario) {
        var t = horario.split(':');
        return base + 'T' + (t[0] || '00') + (t[1] || '00') + '00';
      }
      return base;
    }

    function parseDtEnd(dataInicio, horario) {
      var p = dataInicio.split('-');
      if (horario) {
        var t = horario.split(':');
        var h = parseInt(t[0], 10) + 1;
        return p[0] + p[1] + p[2] + 'T' + pad2(h) + (t[1] || '00') + '00';
      }
      var d = new Date(parseInt(p[0], 10), parseInt(p[1], 10) - 1, parseInt(p[2], 10) + 1);
      return d.getFullYear() + '' + pad2(d.getMonth() + 1) + pad2(d.getDate());
    }

    /* ── Popup global de export (position:fixed para escapar overflow:hidden dos cards) ── */
    var exportPopup = document.getElementById('scal-export-popup');
    var exportActiveTrigger = null;

    function fecharExportPopup() {
      if (!exportPopup.hidden) {
        exportPopup.hidden = true;
        if (exportActiveTrigger) {
          exportActiveTrigger.setAttribute('aria-expanded', 'false');
          exportActiveTrigger = null;
        }
      }
    }

    document.addEventListener('click', function (e) {
      /* Abre/fecha ao clicar no trigger */
      var trigger = e.target.closest('.scal-export-trigger');
      if (trigger) {
        e.preventDefault();
        e.stopPropagation();
        if (exportActiveTrigger === trigger && !exportPopup.hidden) {
          fecharExportPopup();
          return;
        }
        fecharExportPopup();
        exportActiveTrigger = trigger;
        trigger.setAttribute('aria-expanded', 'true');

        /* Posiciona o popup via fixed, acima do botão */
        exportPopup.hidden = false;
        var rect = trigger.getBoundingClientRect();
        var popW = exportPopup.offsetWidth;
        var popH = exportPopup.offsetHeight;
        var top = rect.top - popH - 6;
        var left = rect.right - popW;
        if (top < 6) top = rect.bottom + 6; /* se não cabe acima, coloca abaixo */
        if (left < 6) left = 6;
        exportPopup.style.top  = top + 'px';
        exportPopup.style.left = left + 'px';

        /* Guarda dados do card no popup para uso na opção */
        var card = trigger.closest('[data-nome]');
        exportPopup.dataset.nome       = card ? (card.dataset.nome || '') : '';
        exportPopup.dataset.dataInicio = card ? (card.dataset.dataInicio || '') : '';
        exportPopup.dataset.horario    = card ? (card.dataset.horario || '') : '';
        exportPopup.dataset.url        = card ? (card.dataset.url || '') : '';
        return;
      }

      /* Clique em uma opção */
      var btn = e.target.closest('.scal-export-option[data-export]');
      if (btn && btn.closest('#scal-export-popup')) {
        e.preventDefault();
        e.stopPropagation();
        var nome       = exportPopup.dataset.nome || '';
        var dataInicio = exportPopup.dataset.dataInicio || '';
        var horario    = exportPopup.dataset.horario || '';
        var url        = exportPopup.dataset.url || '';
        var tipo       = btn.dataset.export;
        var dtStart    = parseDtStart(dataInicio, horario);
        var dtEnd      = dataInicio ? parseDtEnd(dataInicio, horario) : null;
        fecharExportPopup();

        if (tipo === 'google') {
          if (!dtStart) return;
          var gcUrl = 'https://calendar.google.com/calendar/render?action=TEMPLATE' +
            '&text=' + encodeURIComponent(nome) +
            '&dates=' + dtStart + '/' + dtEnd +
            (url ? '&details=' + encodeURIComponent(url) : '');
          window.open(gcUrl, '_blank', 'noopener,noreferrer');
        } else if (tipo === 'outlook') {
          if (!dataInicio) return;
          var p = dataInicio.split('-');
          var isoStart = p[0] + '-' + p[1] + '-' + p[2] + (horario ? 'T' + horario + ':00' : 'T00:00:00');
          var hEnd = horario ? pad2(parseInt(horario.split(':')[0], 10) + 1) + ':' + (horario.split(':')[1] || '00') + ':00' : '01:00:00';
          var isoEnd = p[0] + '-' + p[1] + '-' + p[2] + 'T' + hEnd;
          var outlookUrl = 'https://outlook.live.com/calendar/0/deeplink/compose?path=/calendar/action/compose&rru=addevent' +
            '&subject=' + encodeURIComponent(nome) +
            '&startdt=' + encodeURIComponent(isoStart) +
            '&enddt=' + encodeURIComponent(isoEnd) +
            (url ? '&body=' + encodeURIComponent(url) : '');
          window.open(outlookUrl, '_blank', 'noopener,noreferrer');
        }
        return;
      }

      /* Clique fora fecha */
      fecharExportPopup();
    });

    /* ── Popup de compartilhamento ── */
    var sharePopup = document.getElementById('scal-share-popup');
    var shareActiveTrigger = null;

    function fecharSharePopup() {
      if (!sharePopup || sharePopup.hidden) return;
      sharePopup.hidden = true;
      if (shareActiveTrigger) {
        shareActiveTrigger.setAttribute('aria-expanded', 'false');
        shareActiveTrigger = null;
      }
    }

    document.addEventListener('click', function (e) {
      /* Abre/fecha ao clicar no botão de share */
      var shareBtn = e.target.closest('.scal-share-btn');
      if (shareBtn) {
        e.preventDefault();
        e.stopPropagation();
        fecharExportPopup();
        if (shareActiveTrigger === shareBtn && !sharePopup.hidden) {
          fecharSharePopup();
          return;
        }
        fecharSharePopup();
        var card = shareBtn.closest('[data-nome]');
        sharePopup.dataset.shareUrl   = card ? (card.dataset.url  || '') : '';
        sharePopup.dataset.shareTitle = card ? (card.dataset.nome || '') : '';
        if (!sharePopup.dataset.shareUrl) return;
        shareActiveTrigger = shareBtn;
        shareBtn.setAttribute('aria-expanded', 'true');
        sharePopup.hidden = false;
        var rect = shareBtn.getBoundingClientRect();
        var popW = sharePopup.offsetWidth;
        var popH = sharePopup.offsetHeight;
        var top  = rect.top - popH - 6;
        var left = rect.right - popW;
        if (top < 6) top = rect.bottom + 6;
        if (left < 6) left = 6;
        sharePopup.style.top  = top + 'px';
        sharePopup.style.left = left + 'px';
        return;
      }

      /* Clique em uma opção de compartilhamento */
      var optBtn = e.target.closest('.scal-export-option[data-share]');
      if (optBtn && optBtn.closest('#scal-share-popup')) {
        e.preventDefault();
        e.stopPropagation();
        var url   = sharePopup.dataset.shareUrl   || '';
        var title = sharePopup.dataset.shareTitle || '';
        var rede  = optBtn.dataset.share;
        fecharSharePopup();
        if (rede === 'whatsapp') {
          window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(title + ' ' + url), '_blank', 'noopener,noreferrer');
        } else if (rede === 'linkedin') {
          window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(url), '_blank', 'noopener,noreferrer');
        }
        return;
      }

      /* Clique fora fecha */
      fecharSharePopup();
    });
  }());
</script>