admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implementação completa dos módulos profissionais (Dossiê, Crises, Atas, Stickers, CSV e MindLab)

Browse Source
This commit is contained in:
admtracksteel
2026-08-31 11:39:10 +00:00
parent 837762c1af
commit 549d4432ef
3 changed files with 1851 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+368 -33
View File
@@ -73,56 +73,64 @@
<!-- Divisor -->
<div class="sidebar-divider"></div>
<!-- Seção: Observações -->
<!-- Seção: Observações & Rotina -->
<div class="sidebar-actions-obs" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
<!-- Botão: Minhas Observações -->
<button class="btn-observacoes" id="btnObservacoes" style="border-color: #f43f5e; color: #f43f5e; background: rgba(244, 63, 94, 0.05);">
<button class="btn-observacoes" id="btnObservacoes" style="border-color: #f43f5e; color: #f43f5e; background: rgba(244, 63, 94, 0.05);" title="Ver e gerenciar observações registradas">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
</svg>
<span>Minhas Observações</span>
</button>
<!-- Botão: Obs. Especiais -->
<button class="btn-observacoes" id="btnObsEspeciais" style="border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.05);">
<button class="btn-observacoes" id="btnObsEspeciais" style="border-color: #f59e0b; color: #f59e0b; background: rgba(245, 158, 11, 0.05);" title="Observações de Educação Especial e Inclusiva">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
</svg>
<span>Obs. Educação Especial</span>
<span>Obs. Especial</span>
</button>
<!-- Botão: Protocolo de Crises -->
<button class="btn-observacoes" id="btnProtocoloCrise" style="border-color: #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08);" title="Protocolo de Acolhimento & Mediação de Crises">
<span style="font-size: 1rem;">🚨</span>
<span>Protocolo de Crise</span>
</button>
</div>
<!-- Divisor -->
<div class="sidebar-divider"></div>
<!-- Seção: Minha Turma -->
<!-- Seção: Minha Turma & Gestão -->
<div class="sidebar-actions-turma" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
<button class="btn-observacoes" id="btnMinhaTurma" style="border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.05);">
<button class="btn-observacoes" id="btnMinhaTurma" style="border-color: #3b82f6; color: #3b82f6; background: rgba(59, 130, 246, 0.05);" title="Gerenciar turmas e lista de alunos">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
<span>Minha Turma</span>
</button>
<!-- Botão: Stickers Gamificados -->
<button class="btn-observacoes" id="btnStickersConquistas" style="border-color: #f59e0b; color: #fbbf24; background: rgba(245, 158, 11, 0.08);" title="Stickers de Conquistas & Impressão com QR Code">
<span style="font-size: 1rem;">🌟</span>
<span>Stickers & Conquistas</span>
</button>
</div>
<!-- Divisor -->
<div class="sidebar-divider"></div>
<!-- Seção: Relatórios -->
<!-- Seção: Relatórios & Atas -->
<div class="sidebar-actions-reports" style="display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 4px 16px;">
<!-- Botão: Emitir Relatório -->
<button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);">
<button class="btn-observacoes" id="btnEmitirRelatorio" style="border-color: var(--brand-green); color: var(--brand-green); background: rgba(16, 163, 127, 0.05);" title="Gerar relatório individual ou em lote">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
<span>Emitir Relatório</span>
<span>Emitir Relatórios</span>
</button>
<!-- Botão: Modelos de Relatório -->
<button class="btn-observacoes" id="btnModelosRelatorio" style="border-color: #14b8a6; color: #14b8a6; background: rgba(20, 184, 166, 0.05);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span>Modelos de Relatório</span>
<!-- Botão: Atas de Reunião -->
<button class="btn-observacoes" id="btnAtasReuniao" style="border-color: #8b5cf6; color: #a78bfa; background: rgba(139, 92, 246, 0.08);" title="Gerar e salvar Atas de Reuniões e Conselho">
<span style="font-size: 1rem;">📋</span>
<span>Atas de Reunião</span>
</button>
</div>
@@ -2154,7 +2162,7 @@
<div style="background: var(--bg-secondary); padding: 14px; border-radius: 12px; display: flex; gap: 14px; border: 1px solid var(--border-light); align-items: center;">
<img id="videoMindThumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Thumbnail" style="width: 120px; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-light);">
<div style="display: flex; flex-direction: column; gap: 4px;">
<h4 id="videoMindTitle" style="margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Título do Vídeo</h4>
<h4 id="videoMindTitle" style="margin: 0; color: var(--text-primary); font-size: 1rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">Título do Vídeo</h4>
<span id="videoMindAuthor" style="font-size: 0.85rem; color: var(--text-secondary);">Canal</span>
</div>
</div>
@@ -2664,26 +2672,353 @@
</div>
<div style="display: flex; align-items: center; gap: 12px;">
<span id="comicsPresCounter" style="background: rgba(255,255,255,0.15); padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; color: #fef08a;">1 / 5</span>
<button type="button" id="btnCloseComicsPresModal" style="background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s;">✕</button>
</div>
</div>
<div class="comics-pres-stage">
<div class="comics-pres-card">
<img id="comicsPresImage" class="comics-pres-img" src="" alt="Quadrinho em Apresentação">
<div id="comicsPresCaption" class="comics-pres-caption">
Falas do quadrinho aparecerão aqui...
<!-- ========================================== -->
<!-- MODAL: PROTOCOLO DE CRISES & MEDIAÇÃO -->
<!-- ========================================== -->
<div id="criseModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 900px; width: 95%; max-height: 92vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.4rem;">🚨</span>
<div>
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: #ef4444;">Protocolo de Acolhimento & Mediação de Crise</h3>
<span style="font-size: 0.75rem; color: var(--text-secondary);">Registro seguro de ocorrência, checklist de intervenção e mensagem acolhedora para WhatsApp dos pais</span>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" id="btnOpenCrisesHistory" style="background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600;">🕒 Histórico</button>
<button type="button" id="btnCloseCriseModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
</div>
</div>
<div class="comics-pres-nav">
<button type="button" id="btnPresPrev" class="btn-pres-nav">
<span>⬅️ Anterior</span>
</button>
<button type="button" id="btnPresNext" class="btn-pres-nav" style="background: var(--brand-pink, #db2777); font-weight: 700;">
<span>Próximo ➡️</span>
</button>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 20px; flex: 1; flex-wrap: wrap;">
<!-- Formulário de Registro -->
<div style="flex: 1.1; min-width: 300px; display: flex; flex-direction: column; gap: 12px;">
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma</label>
<select id="criseTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="">-- Selecionar Turma --</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Nome da Criança</label>
<input type="text" id="criseAlunoInput" placeholder="Ex: Lucas, Sofia..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
</div>
</div>
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Tipo de Ocorrência</label>
<select id="criseTipoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Desregulação Sensorial / Emocional">Desregulação Sensorial / Emocional</option>
<option value="Conflito Físico / Mordida">Conflito Físico / Disputa / Mordida</option>
<option value="Queda / Pequeno Acidente">Queda / Pequeno Acidente / Arranhão</option>
<option value="Choro Intenso / Adaptação">Choro Intenso / Adaptação Escolar</option>
<option value="Recusa Alimentar / Sono">Recusa Alimentar / Sono</option>
<option value="Outro">Outro Comportamento Atípico</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Intensidade</label>
<select id="criseIntensidadeSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Leve">🟢 Leve (Resolvido rápido)</option>
<option value="Moderada" selected>🟡 Moderada (Exigiu acolhimento)</option>
<option value="Alta">🔴 Alta (Necessitou apoio coordenador)</option>
</select>
</div>
</div>
<!-- Checklist de Ação Imediata -->
<div style="background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.2); border-radius: 8px; padding: 10px;">
<label style="color: #f87171; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 6px;">⚡ Checklist de Ação Imediata:</label>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 0.75rem; color: var(--text-primary);">
<label><input type="checkbox" id="chkSeguranca" checked> 1. Garantir segurança física</label>
<label><input type="checkbox" id="chkReduzirEstimulos" checked> 2. Reduzir barulho/luz</label>
<label><input type="checkbox" id="chkAgua"> 3. Oferecer água / respirar</label>
<label><input type="checkbox" id="chkAcolhimento" checked> 4. Abraço / Escuta afetiva</label>
</div>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Descrição do Ocorrido & Gatilho</label>
<textarea id="criseDescricaoInput" placeholder="Descreva brevemente o que aconteceu e o que disparou o momento..." class="obs-input" style="width: 100%; min-height: 55px; padding: 8px; font-size: 0.85rem; resize: vertical;"></textarea>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Medidas Tomadas & Acolhimento</label>
<input type="text" id="criseMedidasInput" placeholder="Ex: Criança conduzida ao cantinho da leitura, acalmou-se em 5 min..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
</div>
<button type="button" id="btnSalvarCrise" style="width: 100%; padding: 10px; background: #ef4444; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
<span>🛡️ Registrar & Gerar Mensagem WhatsApp</span>
</button>
</div>
<!-- Lado Direito: Mensagem para a Família & Resolução -->
<div style="flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 10px; border: 1px solid var(--border-light);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<strong style="color: #34d399; font-size: 0.85rem;">📱 Mensagem Humanizada para a Família:</strong>
<button type="button" id="btnCopyCriseWhatsapp" style="background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; cursor: pointer;">📋 Copiar Texto</button>
</div>
<div id="criseWhatsappOutput" style="font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; border: 1px dashed var(--border-light); flex: 1; min-height: 140px;">
A mensagem para os pais aparecerá aqui com tom acolhedor e transparente após clicar em "Registrar".
</div>
<a id="btnSendWhatsappDirect" href="#" target="_blank" style="display: none; background: #10b981; color: white; text-decoration: none; padding: 8px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; text-align: center;">
💬 Abrir no WhatsApp Web / Celular
</a>
</div>
</div>
</div>
</div>
<!-- Modal: Histórico de Crises -->
<div id="criseHistoryModal" class="settings-modal" style="display: none; z-index: 10001;">
<div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 80vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #f87171;">🕒 Histórico de Ocorrências e Mediações</h3>
<button type="button" id="btnCloseCriseHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
<div id="criseHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1;"></div>
</div>
</div>
<!-- ========================================== -->
<!-- MODAL: ATAS DE REUNIÃO & CONSELHO -->
<!-- ========================================== -->
<div id="ataModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 950px; width: 95%; max-height: 92vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.4rem;">📋</span>
<div>
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: #a78bfa;">Atas de Reunião & Conselho de Classe</h3>
<span style="font-size: 0.75rem; color: var(--text-secondary);">Geração de atas escolares formais, deliberações e pautas com formatação oficial</span>
</div>
</div>
<div style="display: flex; gap: 8px; align-items: center;">
<button type="button" id="btnOpenAtasHistory" style="background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.3); color: #c084fc; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; font-weight: 600;">🕒 Histórico de Atas</button>
<button type="button" id="btnCloseAtaModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
</div>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 20px; flex: 1; flex-wrap: wrap;">
<!-- Formulário da Ata -->
<div style="flex: 1; min-width: 320px; display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Tipo de Reunião</label>
<select id="ataTipoSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Reunião de Pais e Mestres">Reunião de Pais e Mestres</option>
<option value="Conselho de Classe / Avaliação">Conselho de Classe / Avaliação</option>
<option value="HTPC / Formação Continuada">HTPC / Formação Continuada</option>
<option value="Alinhamento Pedagógico Interno">Alinhamento Pedagógico Interno</option>
</select>
</div>
<div class="settings-group" style="flex: 1; min-width: 140px;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma</label>
<select id="ataTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="">-- Geral / Toda a Escola --</option>
</select>
</div>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Título da Reunião</label>
<input type="text" id="ataTituloInput" placeholder="Ex: Reunião de Acolhimento do 1º Bimestre..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Participantes Presentes</label>
<input type="text" id="ataParticipantesInput" placeholder="Ex: Professora Camila, Coordenação, Famílias..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Pauta da Reunião</label>
<input type="text" id="ataPautaInput" placeholder="Ex: Adaptação das crianças, rotina de alimentação, passeios..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Discussões & Tópicos Abordados</label>
<textarea id="ataDiscussoesInput" placeholder="Resuma os pontos tratados na reunião..." class="obs-input" style="width: 100%; min-height: 60px; padding: 8px; font-size: 0.85rem; resize: vertical;"></textarea>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Deliberações & Decisões Acordadas</label>
<input type="text" id="ataDeliberacoesInput" placeholder="Ex: Combinados de pontualidade, envio de agenda..." class="obs-input" style="width: 100%; padding: 8px; font-size: 0.85rem;">
</div>
<button type="button" id="btnGerarAta" style="width: 100%; padding: 10px; background: #8b5cf6; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
<span>📋 Gerar Ata Oficial Formatada</span>
</button>
</div>
<!-- Visualizador da Ata Formatada -->
<div style="flex: 1.2; min-width: 320px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 10px; border: 1px solid var(--border-light);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<strong style="color: #a78bfa; font-size: 0.85rem;">📄 Documento Oficial da Ata:</strong>
<div style="display: flex; gap: 6px;">
<button type="button" id="btnCopyAta" style="background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 3px 8px; border-radius: 4px; font-size: 0.72rem; cursor: pointer;">📋 Copiar</button>
<button type="button" id="btnPrintAtaPdf" style="background: #8b5cf6; color: white; border: none; padding: 3px 10px; border-radius: 4px; font-size: 0.72rem; font-weight: 700; cursor: pointer;">📄 Imprimir PDF</button>
</div>
</div>
<div id="ataOutputText" style="font-family: 'Outfit', sans-serif; font-size: 0.88rem; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; background: rgba(255,255,255,0.03); padding: 14px; border-radius: 8px; border: 1px solid var(--border-light); flex: 1; min-height: 240px; overflow-y: auto;">
Preencha os dados da reunião e clique em "Gerar Ata Oficial" para redigir o documento formal.
</div>
</div>
</div>
</div>
</div>
<!-- Modal: Histórico de Atas -->
<div id="atasHistoryModal" class="settings-modal" style="display: none; z-index: 10001;">
<div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 80vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #a78bfa;">🕒 Histórico de Atas de Reunião</h3>
<button type="button" id="btnCloseAtasHistory" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
<div id="atasHistoryList" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1;"></div>
</div>
</div>
<!-- ========================================== -->
<!-- MODAL: STICKERS GAMIFICADOS & SHEET A4 -->
<!-- ========================================== -->
<div id="stickerModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 980px; width: 95%; max-height: 92vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="font-size: 1.4rem;">🌟</span>
<div>
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: #fbbf24;">Stickers Gamificados & Conquistas Pedagógicas</h3>
<span style="font-size: 0.75rem; color: var(--text-secondary);">Emissão de badges de conquistas, cartela de adesivos A4 para impressão e QR Code para os pais</span>
</div>
</div>
<button type="button" id="btnCloseStickerModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: row; gap: 20px; flex: 1; flex-wrap: wrap;">
<!-- Conceder Sticker -->
<div style="flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 12px;">
<h4 style="margin: 0; color: var(--text-primary); font-size: 0.92rem; border-bottom: 1px dashed var(--border-light); padding-bottom: 4px;">🏆 Conceder Conquista</h4>
<div style="display: flex; gap: 10px;">
<div class="settings-group" style="flex: 1;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma</label>
<select id="stickerTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="">-- Selecionar Turma --</option>
</select>
</div>
<div class="settings-group" style="flex: 1;">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Criança</label>
<input type="text" id="stickerAlunoInput" placeholder="Ex: Arthur, Valentina..." class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
</div>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Categoria do Sticker</label>
<select id="stickerCategoriaSelect" class="obs-select" style="width: 100%; margin-top: 4px;">
<option value="Cooperação & Gentileza">🤝 Cooperação & Gentileza (Ajudou o colega)</option>
<option value="Curiosidade & Ciência">🔬 Curiosidade & Ciência (Explorador nato)</option>
<option value="Autonomia & Cuidado">🌱 Autonomia & Cuidado (Guardou os brinquedos)</option>
<option value="Expressão Artística">🎨 Expressão Artística (Criatividade e cores)</option>
<option value="Superação & Coragem">⭐ Superação & Coragem (Tentou algo novo)</option>
<option value="Roda de Conversa">🗣️ Roda de Conversa (Ótimo ouvinte e narrador)</option>
</select>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Título do Sticker</label>
<input type="text" id="stickerTituloInput" value="Guardião da Gentileza" class="obs-input" style="width: 100%; margin-top: 4px; padding: 8px;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Descrição da Conquista</label>
<textarea id="stickerDescricaoInput" placeholder="Ex: Hoje o Arthur compartilhou os blocos e acolheu um amigo que estava triste..." class="obs-input" style="width: 100%; min-height: 50px; padding: 8px; font-size: 0.85rem; resize: vertical;"></textarea>
</div>
<button type="button" id="btnEmitirSticker" style="width: 100%; padding: 10px; background: #f59e0b; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;">
<span>🌟 Salvar Conquista & Gerar Badge</span>
</button>
</div>
<!-- Visualizador da Cartela de Impressão A4 -->
<div style="flex: 1.2; min-width: 320px; display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.08); padding: 14px; border-radius: 10px; border: 1px solid var(--border-light);">
<div style="display: flex; justify-content: space-between; align-items: center;">
<strong style="color: #fbbf24; font-size: 0.85rem;">🖨️ Cartela de Adesivos A4 (Papel Autocolante):</strong>
<button type="button" id="btnPrintStickerSheet" style="background: #f59e0b; color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; cursor: pointer;">📄 Imprimir Cartela A4</button>
</div>
<div id="stickersListGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 380px; overflow-y: auto; padding: 6px;">
<!-- Stickers renderizados dinamicamente -->
</div>
</div>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- MODAL: IMPORTAÇÃO CSV DE ALUNOS -->
<!-- ========================================== -->
<div id="csvImportModal" class="settings-modal" style="display: none; z-index: 20002;">
<div class="settings-modal-content" style="max-width: 550px; width: 95%; max-height: 85vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.1rem; color: #3b82f6;">📊 Importação de Alunos via CSV</h3>
<button type="button" id="btnCloseCsvImport" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
<div class="settings-modal-body" style="padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto;">
<p style="margin: 0; font-size: 0.82rem; color: var(--text-secondary);">
Carregue o arquivo CSV da secretaria ou cole a lista de chamada abaixo. O sistema reconhece colunas como: <strong>Nome, Data Nasc, Responsáveis, Contato, Alergias</strong>.
</p>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Turma Destino</label>
<select id="csvImportTurmaSelect" class="obs-select" style="width: 100%; margin-top: 4px;"></select>
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Arquivo CSV</label>
<input type="file" id="csvFileInput" accept=".csv,.txt" style="width: 100%; margin-top: 4px; font-size: 0.85rem;">
</div>
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; text-transform: uppercase;">Ou cole o conteúdo CSV:</label>
<textarea id="csvTextContent" placeholder="Nome,Data_Nasc,Pais,Alergias&#10;Arthur Silva,15/03/2020,Maria Silva,Nenhuma&#10;Valentina Santos,22/07/2020,Carlos Santos,Alergia a lactose" class="obs-input" style="width: 100%; min-height: 100px; padding: 8px; font-size: 0.8rem; font-family: monospace;"></textarea>
</div>
<button type="button" id="btnProcessCsvImport" style="width: 100%; padding: 10px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer;">
📥 Importar Alunos
</button>
</div>
</div>
</div>
<!-- ========================================== -->
<!-- MODAL: TIMELINE DO ALUNO & DOSSIÊ -->
<!-- ========================================== -->
<div id="alunoTimelineModal" class="settings-modal" style="display: none; z-index: 20002;">
<div class="settings-modal-content" style="max-width: 750px; width: 95%; max-height: 88vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;">
<div>
<h3 id="timelineAlunoNome" style="margin: 0; font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: #3b82f6;">Dossiê & Linha do Tempo da Criança</h3>
<span id="timelineAlunoInfo" style="font-size: 0.75rem; color: var(--text-secondary);">Observações, Conquistas, Histórias e Relatórios</span>
</div>
<div style="display: flex; gap: 8px;">
<button type="button" id="btnExportFichaConselho" style="background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3); color: #60a5fa; padding: 4px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 600; cursor: pointer;">📄 Ficha Conselho</button>
<button type="button" id="btnCloseAlunoTimeline" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem; line-height: 1;">&times;</button>
</div>
</div>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; flex: 1;">
<div id="timelineContentArea" style="display: flex; flex-direction: column; gap: 10px;">
<!-- Itens da timeline renderizados dinamicamente -->
</div>
</div>
</div>
</div>