From cef90bc062c2adf0f012eed6595c6237de835884 Mon Sep 17 00:00:00 2001
From: deploy <deploy@athleticmap>
Date: Tue, 13 Oct 2026 15:34:52 +0000
Subject: [PATCH] chore(tenants): conteudo de publico/ atualizado

---
 moldes/consolidado/95-frontend-spa.yaml       |    3 +
 moldes/consolidado/96-publico-configmap.yaml  |  194 +-
 tenants/acme/95-frontend-spa.yaml             |    6 +
 tenants/acme/96-publico-configmap.yaml        | 3046 ++++++++++++++++-
 tenants/demo/95-frontend-spa.yaml             |    6 +
 tenants/demo/96-publico-configmap.yaml        | 3046 ++++++++++++++++-
 .../escolinha-de-teste-2/95-frontend-spa.yaml |    6 +
 .../96-publico-configmap.yaml                 | 3046 ++++++++++++++++-
 .../escolinha-de-teste/95-frontend-spa.yaml   |    6 +
 .../96-publico-configmap.yaml                 | 3046 ++++++++++++++++-
 tenants/escolinha/95-frontend-spa.yaml        |    6 +
 tenants/escolinha/96-publico-configmap.yaml   | 3046 ++++++++++++++++-
 tenants/piloto/95-frontend-spa.yaml           |    6 +
 tenants/piloto/96-publico-configmap.yaml      | 3046 ++++++++++++++++-
 tenants/plataforma/95-frontend-spa.yaml       |    3 +
 tenants/plataforma/96-publico-configmap.yaml  |  194 +-
 tenants/teste5/95-frontend-spa.yaml           |    6 +
 tenants/teste5/96-publico-configmap.yaml      | 3046 ++++++++++++++++-
 tenants/zico-0/95-frontend-spa.yaml           |    6 +
 tenants/zico-0/96-publico-configmap.yaml      | 3046 ++++++++++++++++-
 20 files changed, 24146 insertions(+), 664 deletions(-)

diff --git a/moldes/consolidado/95-frontend-spa.yaml b/moldes/consolidado/95-frontend-spa.yaml
index fe3e513..fffcfe3 100644
--- a/moldes/consolidado/95-frontend-spa.yaml
+++ b/moldes/consolidado/95-frontend-spa.yaml
@@ -142,6 +142,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
diff --git a/moldes/consolidado/96-publico-configmap.yaml b/moldes/consolidado/96-publico-configmap.yaml
index 1f9eeaf..2e0e01b 100644
--- a/moldes/consolidado/96-publico-configmap.yaml
+++ b/moldes/consolidado/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -7785,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -7854,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/acme/95-frontend-spa.yaml b/tenants/acme/95-frontend-spa.yaml
index 2bbc727..015257d 100644
--- a/tenants/acme/95-frontend-spa.yaml
+++ b/tenants/acme/95-frontend-spa.yaml
@@ -132,6 +132,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -139,6 +142,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/acme/96-publico-configmap.yaml b/tenants/acme/96-publico-configmap.yaml
index 2740d0e..6be6614 100644
--- a/tenants/acme/96-publico-configmap.yaml
+++ b/tenants/acme/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/demo/95-frontend-spa.yaml b/tenants/demo/95-frontend-spa.yaml
index 9008b69..a82aa5b 100644
--- a/tenants/demo/95-frontend-spa.yaml
+++ b/tenants/demo/95-frontend-spa.yaml
@@ -132,6 +132,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -139,6 +142,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/demo/96-publico-configmap.yaml b/tenants/demo/96-publico-configmap.yaml
index caa3b77..93699c6 100644
--- a/tenants/demo/96-publico-configmap.yaml
+++ b/tenants/demo/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/escolinha-de-teste-2/95-frontend-spa.yaml b/tenants/escolinha-de-teste-2/95-frontend-spa.yaml
index 9e18055..6e40d73 100644
--- a/tenants/escolinha-de-teste-2/95-frontend-spa.yaml
+++ b/tenants/escolinha-de-teste-2/95-frontend-spa.yaml
@@ -141,6 +141,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -148,6 +151,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/escolinha-de-teste-2/96-publico-configmap.yaml b/tenants/escolinha-de-teste-2/96-publico-configmap.yaml
index 4317238..df343f8 100644
--- a/tenants/escolinha-de-teste-2/96-publico-configmap.yaml
+++ b/tenants/escolinha-de-teste-2/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/escolinha-de-teste/95-frontend-spa.yaml b/tenants/escolinha-de-teste/95-frontend-spa.yaml
index b69879d..2847fa3 100644
--- a/tenants/escolinha-de-teste/95-frontend-spa.yaml
+++ b/tenants/escolinha-de-teste/95-frontend-spa.yaml
@@ -141,6 +141,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -148,6 +151,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/escolinha-de-teste/96-publico-configmap.yaml b/tenants/escolinha-de-teste/96-publico-configmap.yaml
index 3788013..a0fc7c2 100644
--- a/tenants/escolinha-de-teste/96-publico-configmap.yaml
+++ b/tenants/escolinha-de-teste/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/escolinha/95-frontend-spa.yaml b/tenants/escolinha/95-frontend-spa.yaml
index b0e751e..a280323 100644
--- a/tenants/escolinha/95-frontend-spa.yaml
+++ b/tenants/escolinha/95-frontend-spa.yaml
@@ -132,6 +132,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -139,6 +142,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/escolinha/96-publico-configmap.yaml b/tenants/escolinha/96-publico-configmap.yaml
index 28cd64a..70e2580 100644
--- a/tenants/escolinha/96-publico-configmap.yaml
+++ b/tenants/escolinha/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/piloto/95-frontend-spa.yaml b/tenants/piloto/95-frontend-spa.yaml
index 16f50d0..81d907f 100644
--- a/tenants/piloto/95-frontend-spa.yaml
+++ b/tenants/piloto/95-frontend-spa.yaml
@@ -132,6 +132,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -139,6 +142,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/piloto/96-publico-configmap.yaml b/tenants/piloto/96-publico-configmap.yaml
index e3effda..4221758 100644
--- a/tenants/piloto/96-publico-configmap.yaml
+++ b/tenants/piloto/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/plataforma/95-frontend-spa.yaml b/tenants/plataforma/95-frontend-spa.yaml
index 7c6877f..d5739c7 100644
--- a/tenants/plataforma/95-frontend-spa.yaml
+++ b/tenants/plataforma/95-frontend-spa.yaml
@@ -129,6 +129,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
diff --git a/tenants/plataforma/96-publico-configmap.yaml b/tenants/plataforma/96-publico-configmap.yaml
index f9f363a..9716b68 100644
--- a/tenants/plataforma/96-publico-configmap.yaml
+++ b/tenants/plataforma/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -7785,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -7854,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/teste5/95-frontend-spa.yaml b/tenants/teste5/95-frontend-spa.yaml
index 1455a74..258d4a5 100644
--- a/tenants/teste5/95-frontend-spa.yaml
+++ b/tenants/teste5/95-frontend-spa.yaml
@@ -141,6 +141,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -148,6 +151,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/teste5/96-publico-configmap.yaml b/tenants/teste5/96-publico-configmap.yaml
index 4945e8b..18aeafb 100644
--- a/tenants/teste5/96-publico-configmap.yaml
+++ b/tenants/teste5/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>
diff --git a/tenants/zico-0/95-frontend-spa.yaml b/tenants/zico-0/95-frontend-spa.yaml
index 4588ef0..5012f36 100644
--- a/tenants/zico-0/95-frontend-spa.yaml
+++ b/tenants/zico-0/95-frontend-spa.yaml
@@ -141,6 +141,9 @@ spec:
                     - { key: "convite.html", path: "convite.html" }
                     - { key: "convite.js", path: "convite.js" }
                     - { key: "desafio.js", path: "desafio.js" }
+                    - { key: "excluir-conta.css", path: "excluir-conta.css" }
+                    - { key: "excluir-conta.html", path: "excluir-conta.html" }
+                    - { key: "excluir-conta.js", path: "excluir-conta.js" }
                     - { key: "fontes--fontes.css", path: "fontes/fontes.css" }
                     - { key: "lp-escolinhas.css", path: "lp-escolinhas.css" }
                     - { key: "lp-escolinhas.html", path: "lp-escolinhas.html" }
@@ -148,6 +151,9 @@ spec:
                     - { key: "minha-conta.css", path: "minha-conta.css" }
                     - { key: "minha-conta.html", path: "minha-conta.html" }
                     - { key: "minha-conta.js", path: "minha-conta.js" }
+                    - { key: "painel-c4.css", path: "painel-c4.css" }
+                    - { key: "painel-c4.js", path: "painel-c4.js" }
+                    - { key: "painel-markdown.js", path: "painel-markdown.js" }
                     - { key: "painel.css", path: "painel.css" }
                     - { key: "painel.html", path: "painel.html" }
                     - { key: "painel.js", path: "painel.js" }
diff --git a/tenants/zico-0/96-publico-configmap.yaml b/tenants/zico-0/96-publico-configmap.yaml
index 3ea2405..c90b276 100644
--- a/tenants/zico-0/96-publico-configmap.yaml
+++ b/tenants/zico-0/96-publico-configmap.yaml
@@ -696,6 +696,191 @@ data:
       global.AtmDesafio = { resolver: resolver };
     })(window);
 
+  excluir-conta.css: |
+    /* Formulário de /excluir-conta. Arquivo próprio: a CSP da página não aceita atributo style="..." nem <style>. */
+    .sem-margem { margin-top: 0; }
+    form#pedido { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.2rem; margin: 1.2rem 0; }
+    form#pedido label { display: block; font-weight: 600; margin: 1rem 0 .3rem; }
+    form#pedido label:first-child { margin-top: 0; }
+    form#pedido input, form#pedido select, form#pedido textarea {
+      width: 100%; padding: .6rem .7rem; border: 1px solid #b9c2c8; border-radius: 6px;
+      font: inherit; color: var(--navy); background: #fff;
+    }
+    form#pedido input:focus, form#pedido select:focus, form#pedido textarea:focus {
+      outline: 3px solid rgba(245, 130, 32, .35); border-color: var(--orange);
+    }
+    form#pedido button {
+      margin-top: 1.2rem; padding: .7rem 1.4rem; border: 0; border-radius: 6px; background: var(--orange); color: #fff;
+      font: inherit; font-weight: 700; cursor: pointer;
+    }
+    form#pedido button[disabled] { opacity: .6; cursor: default; }
+    #resposta { margin: 1rem 0 0; font-weight: 600; }
+    #resposta.ok { color: #1b6e3c; }
+    #resposta.erro { color: #b3261e; }
+    /* Fora da tela, e não display:none: alguns robôs ignoram campo que não renderiza. */
+    .isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
+
+  excluir-conta.html: |
+    <!DOCTYPE html>
+    <html lang="pt-BR">
+    <head>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <title>Exclusão de conta e de dados — Athletic Map</title>
+      <link rel="stylesheet" href="/publico/_estilo.css">
+      <link rel="stylesheet" href="/publico/excluir-conta.css">
+    </head>
+    <body>
+    <header><div class="marca">/// Athletic <span>Map</span></div></header>
+    <main>
+
+      <div class="minuta">
+        <strong>⚠️ MINUTA — não publicar nesta forma.</strong>
+        Este texto ainda <b>não passou por revisão jurídica</b>. Remover este aviso é parte da publicação, não antes dela.
+      </div>
+
+      <h1>Exclusão de conta e de dados</h1>
+      <p class="data">Para pais, responsáveis, alunos, atletas e funcionários de escolas que usam o Athletic Map. Não precisa de login.</p>
+
+      <div class="destaque">
+        <h3 class="sem-margem">Quem decide sobre os seus dados é a escola</h3>
+        <p>A escola onde você ou seu filho treina é a <i>controladora</i> dos dados; a Athletic Map é a <i>operadora</i> e
+        segue as instruções dela. Por isso, <b>o seu pedido é encaminhado à escola</b>, que decide e nos pede a exclusão.
+        Você recebe a resposta no e-mail que informar, <b>em até 15 dias</b>.</p>
+      </div>
+
+      <h2>Como pedir</h2>
+      <p>De um dos dois jeitos — o resultado é o mesmo:</p>
+      <ul>
+        <li><b>Pelo formulário abaixo.</b></li>
+        <li><b>Por e-mail</b>, para <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>, informando seu nome,
+            o nome da escola e o que você quer (excluir a conta e os dados, acessar ou corrigir).</li>
+      </ul>
+
+      <form id="pedido" novalidate>
+        <label for="tipo">O que você quer?</label>
+        <select id="tipo" name="tipo" required>
+          <option value="EXCLUSAO">Excluir a minha conta e os meus dados</option>
+          <option value="ACESSO">Saber quais dados vocês têm sobre mim</option>
+          <option value="CORRECAO">Corrigir dados</option>
+          <option value="OUTRO">Outro pedido sobre dados pessoais</option>
+        </select>
+
+        <label for="nome">Seu nome</label>
+        <input id="nome" name="nome" type="text" autocomplete="name" maxlength="120" required>
+
+        <label for="email">Seu e-mail (a resposta chega aqui)</label>
+        <input id="email" name="email" type="email" autocomplete="email" maxlength="200" required>
+
+        <label for="escola">Nome da escola (se souber)</label>
+        <input id="escola" name="escola" type="text" maxlength="160">
+
+        <label for="mensagem">Detalhes (opcional)</label>
+        <textarea id="mensagem" name="mensagem" rows="4" maxlength="2000"></textarea>
+
+        <!-- Campo-isca: pessoas não o veem; robôs costumam preenchê-lo. Preenchido, o pedido é descartado em silêncio. -->
+        <div class="isca" aria-hidden="true">
+          <label for="site">Não preencha</label>
+          <input id="site" name="site" type="text" tabindex="-1" autocomplete="off">
+        </div>
+
+        <button type="submit" id="enviar">Enviar pedido</button>
+        <p id="resposta" role="status" aria-live="polite"></p>
+      </form>
+
+      <p>Por segurança, a resposta desta página é a mesma para qualquer e-mail: ela não confirma se o endereço está ou não
+      cadastrado em alguma escola.</p>
+
+      <h2>O que é apagado e o que fica</h2>
+      <ul>
+        <li><b>Apagamos</b> os dados do aluno e do responsável que a escola mandar excluir: cadastro, fichas, registros de
+            treino e de saúde, documentos e acessos ao sistema e aos aplicativos.</li>
+        <li><b>Pode ficar, por obrigação legal</b>, o que a lei manda guardar — como os registros de cobrança e de notas
+            fiscais — e o mínimo necessário para provar o cumprimento do seu pedido.</li>
+        <li><b>Cópias de segurança</b> (backups) deixam de conter os dados em até <b>7 dias</b> depois da exclusão.</li>
+      </ul>
+
+      <h2>Prazos</h2>
+      <p>Respondemos em até <b>15 dias</b> (art. 19, II da LGPD). Para falar do pedido, escreva para
+      <a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a>. O Encarregado pelo tratamento de dados é
+      Carlos Oliveira, e este é o canal dele — veja a <a href="/privacidade">Política de Privacidade</a>.</p>
+
+      <footer>
+        <p>Athletic Map · <a href="/privacidade">Política de Privacidade</a> · <a href="/termos">Termos de Uso</a></p>
+      </footer>
+    </main>
+    <script src="/publico/excluir-conta.js"></script>
+    </body>
+    </html>
+
+  excluir-conta.js: |
+    /* Pedido de exclusão de conta e de dados (/excluir-conta). Sem biblioteca, sem terceiro: manda o formulário ao
+       servidor da própria Athletic Map (POST /api/public/privacidade/pedidos) e mostra a resposta, que é a mesma para
+       qualquer e-mail — a página nunca diz se o endereço está cadastrado. */
+    (function () {
+      "use strict";
+
+      var API = "/api/public/privacidade/pedidos";
+      var EMAIL = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+
+      function mostrar(resposta, texto, ok) {
+        resposta.textContent = texto;
+        resposta.className = ok ? "ok" : "erro";
+      }
+
+      /* Valida o que dá para validar sem o servidor. Devolve a mensagem de erro, ou "" se está certo. */
+      function conferir(v) {
+        if (!v.nome || v.nome.trim().length < 2) return "Digite o seu nome.";
+        if (!EMAIL.test((v.email || "").trim())) return "Digite um e-mail válido.";
+        return "";
+      }
+
+      function ler(f) {
+        function v(id) { return document.getElementById(id).value; }
+        return { tipo: v("tipo"), nome: v("nome"), email: v("email"), escola: v("escola"), mensagem: v("mensagem"), site: v("site") };
+      }
+
+      function iniciar() {
+        var f = document.getElementById("pedido");
+        if (!f) return;
+        var resposta = document.getElementById("resposta");
+        var botao = document.getElementById("enviar");
+
+        f.addEventListener("submit", function (e) {
+          e.preventDefault();
+          var pedido = ler(f);
+          var erro = conferir(pedido);
+          if (erro) { mostrar(resposta, erro, false); return; }
+          botao.disabled = true;
+          mostrar(resposta, "Enviando…", true);
+          fetch(API, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(pedido)
+          }).then(function (r) {
+            return r.json().catch(function () { return {}; }).then(function (corpo) { return { status: r.status, corpo: corpo }; });
+          }).then(function (r) {
+            if (r.status === 202) {
+              f.reset();
+              mostrar(resposta, r.corpo.detail || "Recebemos o seu pedido.", true);
+            } else {
+              mostrar(resposta, r.corpo.detail || "Não foi possível enviar agora. Escreva para suporte@athleticmap.com.", false);
+            }
+          }).catch(function () {
+            mostrar(resposta, "Sem conexão com o servidor. Tente de novo ou escreva para suporte@athleticmap.com.", false);
+          }).then(function () { botao.disabled = false; });
+        });
+      }
+
+      if (typeof module !== "undefined" && module.exports) {
+        module.exports = { conferir: conferir, ler: ler, iniciar: iniciar };
+      }
+      if (typeof document !== "undefined") {
+        if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", iniciar);
+        else iniciar();
+      }
+    })();
+
   fontes--fontes.css: |
     /* ============================================================
      * As fontes da landing page, servidas POR NOS.
@@ -3157,6 +3342,1867 @@ data:
       comecar();
     })();
 
+  painel-c4.css: |
+    /* gerado de governanca/assets/c4.js (ATM_C4.ESTILO) por governanca/gerar.py - nao edite */
+    .c4-f-pessoa{fill:var(--c4-pessoa, #08427B);}.c4-t-pessoa{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema{fill:var(--c4-sistema, #1168BD);}.c4-t-sistema{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-sistema-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-sistema-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container{fill:var(--c4-container, #438DD5);}.c4-t-container{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-container-externo{fill:var(--c4-externo, #6B6B6B);}.c4-t-container-externo{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-componente{fill:var(--c4-componente, #85BBF0);}.c4-t-componente{fill:var(--c4-texto-componente, #0B2C3D);}
+    .c4-f-banco{fill:var(--c4-banco, #438DD5);}.c4-t-banco{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-fila{fill:var(--c4-container, #438DD5);}.c4-t-fila{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-f-no-de-infra{fill:var(--c4-infra, #2F4F5F);}.c4-t-no-de-infra{fill:var(--c4-texto-caixa, #FFFFFF);}
+    .c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}
+    .c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}
+    figure[data-c4]{margin:1.5rem 0;}
+    .c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}
+    .c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}
+    .c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}
+    .c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}
+    .c4-palco .c4-svg{display:block;}
+    .c4-no{cursor:pointer;outline:none;}
+    .c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}
+    .c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}
+    .c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}
+    .c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}
+    .c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}
+    .c4-legenda li{display:flex;align-items:center;gap:.35rem;}
+    .c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}
+    .c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}
+    .c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}
+    .c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}
+    .c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}
+    .c4-tabela{margin:.5rem 0;font-size:.88rem;}
+    .c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}
+    .c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}
+    .c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}
+    .c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}
+    .c4-tabela code{font-size:.85em;word-break:break-all;}
+    .c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}
+    @media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}
+
+  painel-c4.js: |
+    /*
+     * c4.js — desenha as vistas do modelo C4 (governanca/c4/modelo.json) em SVG.
+     *
+     * Sem dependência. Uso:
+     *   window.ATM_C4.desenhar(raiz, modelo)
+     * procura `figure[data-c4]` dentro de `raiz` (o valor do atributo é o id da vista),
+     * troca o conteúdo da figura por: título, diagrama SVG (com <title>/<desc>),
+     * botão de tamanho, legenda, painel de detalhe (clique ou Enter numa caixa) e uma
+     * tabela textual equivalente (elementos e relações), útil para impressão e leitores
+     * de tela. Vista inexistente vira uma mensagem dentro da figura.
+     *
+     * Cores por variáveis CSS, com padrão: --c4-pessoa, --c4-sistema, --c4-container,
+     * --c4-componente, --c4-externo, --c4-banco, --c4-infra, --c4-texto, --c4-linha,
+     * --c4-fundo, --c4-texto-caixa.
+     *
+     * O layout é por camadas: pessoas no topo; quem só chama o foco logo abaixo; o
+     * que está dentro do foco no meio (quem chama acima de quem é chamado); externos,
+     * bancos de fora e o resto embaixo. Cada linha é ordenada pela média da posição
+     * dos vizinhos (heurística do baricentro) para cruzar menos setas.
+     *
+     * As funções puras (prepararVista, calcularLayout, gerarSvg, quebrarTexto,
+     * validarModelo) ficam expostas para os testes (node governanca/assets/c4.teste.js).
+     */
+    (function (global) {
+      'use strict';
+
+      var ROTULO_TIPO = {
+        'pessoa': 'Pessoa',
+        'sistema': 'Sistema',
+        'sistema-externo': 'Sistema externo',
+        'container': 'Container',
+        'container-externo': 'Container externo',
+        'componente': 'Componente',
+        'banco': 'Banco de dados',
+        'fila': 'Fila',
+        'no-de-infra': 'Nó de infraestrutura'
+      };
+      var TIPOS = Object.keys(ROTULO_TIPO);
+      var EXTERNO = { 'sistema-externo': true, 'container-externo': true };
+      var NIVEIS = { contexto: 'Contexto', containers: 'Containers', componentes: 'Componentes', implantacao: 'Implantação' };
+
+      // cor padrão (preenchimento, texto) de cada tipo. O desenho usa classe + atributo de
+      // apresentação (fill/stroke), nunca style="": assim funciona sob CSP style-src 'self'
+      // (o painel do dono). As variáveis CSS (--c4-*) entram pela folha ESTILO, quando ela
+      // puder ser aplicada; sem ela, valem estas cores.
+      var COR = {
+        'pessoa': ['#08427B', '#FFFFFF'],
+        'sistema': ['#1168BD', '#FFFFFF'],
+        'sistema-externo': ['#6B6B6B', '#FFFFFF'],
+        'container': ['#438DD5', '#FFFFFF'],
+        'container-externo': ['#6B6B6B', '#FFFFFF'],
+        'componente': ['#85BBF0', '#0B2C3D'],
+        'banco': ['#438DD5', '#FFFFFF'],
+        'fila': ['#438DD5', '#FFFFFF'],
+        'no-de-infra': ['#2F4F5F', '#FFFFFF']
+      };
+      var VAR_TIPO = {
+        'pessoa': '--c4-pessoa', 'sistema': '--c4-sistema', 'sistema-externo': '--c4-externo', 'container': '--c4-container',
+        'container-externo': '--c4-externo', 'componente': '--c4-componente', 'banco': '--c4-banco', 'fila': '--c4-container',
+        'no-de-infra': '--c4-infra'
+      };
+      function pinta(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-f-' + k + ' c4-borda" fill="' + COR[k][0] + '" stroke="#5C6870" stroke-width="1"'; }
+      function letra(tipo) { var k = COR[tipo] ? tipo : 'container'; return ' class="c4-t-' + k + '" fill="' + COR[k][1] + '"'; }
+      var LINHA = ' class="c4-linha" stroke="#5C6870"';
+      var TEXTO = ' class="c4-txt" fill="#1B2A33"';
+      var FUNDO = ' class="c4-fundo-rotulo" fill="#FFFFFF" fill-opacity=".93"';
+
+      var CFG = {
+        largura: 216,        // largura de cada caixa
+        folgaX: 64,          // espaço horizontal entre caixas
+        folgaY: 132,         // espaço vertical entre linhas (é onde ficam os rótulos)
+        margem: 28,
+        maxPorLinha: 6,
+        cabeca: 30,          // altura da "cabeça" da pessoa
+        linhaNome: 16,
+        linhaTexto: 14,
+        charsNome: 24,
+        charsTipo: 32,
+        charsDesc: 34,
+        linhasDesc: 4,
+        charsRotulo: 28,
+        linhasRotulo: 3,
+        fronteira: 22,       // folga da fronteira em volta do foco
+        tituloFronteira: 22,
+        larguraAjustavel: 1240
+      };
+
+      // ───────────────────────── utilidades ─────────────────────────
+
+      function esc(s) {
+        return String(s == null ? '' : s)
+          .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+      }
+
+      /** Quebra `texto` em linhas de até `max` caracteres (no máximo `maxLinhas`; o resto vira "…"). */
+      function quebrarTexto(texto, max, maxLinhas) {
+        var palavras = String(texto == null ? '' : texto).replace(/\s+/g, ' ').trim().split(' ');
+        var linhas = [];
+        var atual = '';
+        for (var i = 0; i < palavras.length; i++) {
+          var p = palavras[i];
+          if (!p) continue;
+          while (p.length > max) {                 // palavra maior que a linha: corta
+            if (atual) { linhas.push(atual); atual = ''; }
+            linhas.push(p.slice(0, max - 1) + '-');
+            p = p.slice(max - 1);
+          }
+          if (!atual) atual = p;
+          else if ((atual + ' ' + p).length <= max) atual += ' ' + p;
+          else { linhas.push(atual); atual = p; }
+        }
+        if (atual) linhas.push(atual);
+        if (maxLinhas && linhas.length > maxLinhas) {
+          linhas = linhas.slice(0, maxLinhas);
+          var ult = linhas[maxLinhas - 1];
+          if (ult.length >= max) ult = ult.slice(0, max - 1);
+          linhas[maxLinhas - 1] = ult.replace(/[\s,.;:-]+$/, '') + '…';
+        }
+        return linhas;
+      }
+
+      function indexar(modelo) {
+        var porId = {};
+        (modelo && modelo.elementos || []).forEach(function (e) { porId[e.id] = e; });
+        return porId;
+      }
+
+      function ancestrais(porId, id) {
+        var lista = [];
+        var visto = {};
+        var e = porId[id];
+        while (e && e.pai && !visto[e.pai]) {
+          visto[e.pai] = true;
+          lista.push(e.pai);
+          e = porId[e.pai];
+        }
+        return lista;
+      }
+
+      // ───────────────────────── validação estrutural ─────────────────────────
+
+      /** Confere a forma do modelo. Devolve a lista de erros (vazia = válido). */
+      function validarModelo(modelo) {
+        var erros = [];
+        if (!modelo || typeof modelo !== 'object') return ['modelo ausente'];
+        if (modelo.versao !== 1) erros.push('versao deve ser 1');
+        var els = Array.isArray(modelo.elementos) ? modelo.elementos : (erros.push('elementos deve ser lista'), []);
+        var rels = Array.isArray(modelo.relacoes) ? modelo.relacoes : (erros.push('relacoes deve ser lista'), []);
+        var vistas = Array.isArray(modelo.vistas) ? modelo.vistas : (erros.push('vistas deve ser lista'), []);
+        var ids = {};
+        els.forEach(function (e, i) {
+          var onde = 'elemento ' + (e && e.id || '#' + i);
+          if (!e || typeof e.id !== 'string' || !/^[a-z0-9]+(-[a-z0-9]+)*$/.test(e.id)) erros.push(onde + ': id fora do padrão kebab');
+          else if (ids[e.id]) erros.push(onde + ': id repetido');
+          else ids[e.id] = e;
+          if (TIPOS.indexOf(e && e.tipo) < 0) erros.push(onde + ': tipo desconhecido "' + (e && e.tipo) + '"');
+          if (!e || !e.nome) erros.push(onde + ': sem nome');
+          if (!e || !e.descricao) erros.push(onde + ': sem descrição');
+          if (!e || !Array.isArray(e.fontes) || !e.fontes.length || e.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        els.forEach(function (e) {
+          if (e && e.pai) {
+            if (!ids[e.pai]) erros.push('elemento ' + e.id + ': pai inexistente "' + e.pai + '"');
+            else if (e.pai === e.id || ancestrais(ids, e.id).indexOf(e.id) >= 0) erros.push('elemento ' + e.id + ': ciclo de pai');
+          }
+        });
+        rels.forEach(function (r, i) {
+          var onde = 'relação #' + i + ' (' + (r && r.de) + ' → ' + (r && r.para) + ')';
+          if (!r || !ids[r.de]) erros.push(onde + ': "de" inexistente');
+          if (!r || !ids[r.para]) erros.push(onde + ': "para" inexistente');
+          if (r && r.de === r.para) erros.push(onde + ': relação consigo mesmo');
+          if (!r || !r.descricao) erros.push(onde + ': sem descrição');
+          if (!r || !Array.isArray(r.fontes) || !r.fontes.length || r.fontes.some(function (f) { return typeof f !== 'string' || !f.trim(); })) {
+            erros.push(onde + ': sem fontes');
+          }
+        });
+        var idsVista = {};
+        vistas.forEach(function (v, i) {
+          var onde = 'vista ' + (v && v.id || '#' + i);
+          if (!v || !v.id) erros.push(onde + ': sem id');
+          else if (idsVista[v.id]) erros.push(onde + ': id repetido');
+          else idsVista[v.id] = true;
+          if (!v || !NIVEIS[v.nivel]) erros.push(onde + ': nível desconhecido "' + (v && v.nivel) + '"');
+          if (!v || !v.titulo) erros.push(onde + ': sem título');
+          if (v && v.foco && !ids[v.foco]) erros.push(onde + ': foco inexistente "' + v.foco + '"');
+          if (v && (v.nivel === 'containers' || v.nivel === 'componentes') && !v.foco) erros.push(onde + ': nível ' + v.nivel + ' exige foco');
+          if (!v || !Array.isArray(v.incluir) || !v.incluir.length) erros.push(onde + ': incluir vazio');
+          else {
+            var vistos = {};
+            v.incluir.forEach(function (id) {
+              if (!ids[id]) erros.push(onde + ': inclui id inexistente "' + id + '"');
+              if (vistos[id]) erros.push(onde + ': inclui "' + id + '" duas vezes');
+              vistos[id] = true;
+            });
+          }
+        });
+        return erros;
+      }
+
+      // ───────────────────────── preparação da vista ─────────────────────────
+
+      /**
+       * Monta o que uma vista desenha: os elementos incluídos e as relações entre eles.
+       * Relação entre elementos mais finos (ex.: componente → componente) "sobe" para o
+       * ancestral incluído na vista; se já houver relação direta entre o mesmo par, só
+       * as diretas são usadas.
+       */
+      function prepararVista(modelo, vistaId) {
+        var vistas = (modelo && modelo.vistas) || [];
+        var vista = null;
+        for (var i = 0; i < vistas.length; i++) if (vistas[i].id === vistaId) vista = vistas[i];
+        if (!vista) return { erro: 'A vista "' + vistaId + '" não existe no modelo C4.' };
+        var porId = indexar(modelo);
+        var avisos = [];
+        var incluidos = {};
+        var elementos = [];
+        vista.incluir.forEach(function (id) {
+          if (!porId[id]) { avisos.push('id inexistente: ' + id); return; }
+          if (id === vista.foco || incluidos[id]) return;  // o foco vira fronteira, não caixa
+          incluidos[id] = true;
+          elementos.push(porId[id]);
+        });
+        var foco = vista.foco ? porId[vista.foco] || null : null;
+
+        function mapear(id) {
+          if (incluidos[id]) return id;
+          var anc = ancestrais(porId, id);
+          for (var k = 0; k < anc.length; k++) if (incluidos[anc[k]]) return anc[k];
+          return null;
+        }
+        var grupos = {};
+        var ordem = [];
+        (modelo.relacoes || []).forEach(function (r) {
+          var a = mapear(r.de);
+          var b = mapear(r.para);
+          if (!a || !b || a === b) return;
+          // as duas pontas subiram (ex.: componente de um container → componente de outro): é relação
+          // interna de dois níveis abaixo; no nível da vista ela vira ruído, e fica só na vista de componentes
+          if (a !== r.de && b !== r.para) return;
+          var chave = a + '\u0000' + b;
+          if (!grupos[chave]) { grupos[chave] = { de: a, para: b, diretas: [], derivadas: [] }; ordem.push(chave); }
+          (a === r.de && b === r.para ? grupos[chave].diretas : grupos[chave].derivadas).push(r);
+        });
+        var relacoes = ordem.map(function (chave) {
+          var g = grupos[chave];
+          var usar = g.diretas.length ? g.diretas : g.derivadas;
+          var techs = [];
+          usar.forEach(function (r) { if (r.tecnologia && techs.indexOf(r.tecnologia) < 0) techs.push(r.tecnologia); });
+          var descricao = usar[0].descricao + (usar.length > 1 ? ' (+' + (usar.length - 1) + ')' : '');
+          return {
+            de: g.de, para: g.para, descricao: descricao,
+            tecnologia: techs.slice(0, 2).join(', ') + (techs.length > 2 ? '…' : ''),
+            derivada: !g.diretas.length,
+            origem: usar
+          };
+        });
+
+        var interno = {};
+        elementos.forEach(function (e) {
+          if (foco) interno[e.id] = ancestrais(porId, e.id).indexOf(foco.id) >= 0;
+          else interno[e.id] = !EXTERNO[e.tipo] && e.tipo !== 'pessoa';
+        });
+        // com foco, só entram as relações que tocam algo de dentro (as de fora entre si são de outra vista)
+        if (foco) relacoes = relacoes.filter(function (rel) { return interno[rel.de] || interno[rel.para]; });
+        return { vista: vista, foco: foco, elementos: elementos, relacoes: relacoes, interno: interno, avisos: avisos, porId: porId };
+      }
+
+      // ───────────────────────── layout ─────────────────────────
+
+      function textoTipo(e) {
+        var t = ROTULO_TIPO[e.tipo] || e.tipo;
+        return '[' + t + (e.tecnologia ? ': ' + e.tecnologia : '') + ']';
+      }
+
+      function medirCaixa(e, cfg) {
+        var nome = quebrarTexto(e.nome, cfg.charsNome, 2);
+        var tipo = quebrarTexto(textoTipo(e), cfg.charsTipo, 2);
+        var desc = quebrarTexto(e.descricao, cfg.charsDesc, cfg.linhasDesc);
+        var h = 14 + nome.length * cfg.linhaNome + 4 + tipo.length * cfg.linhaTexto + 6 + desc.length * cfg.linhaTexto + 10;
+        if (e.tipo === 'banco') h += 14;
+        return { nome: nome, tipo: tipo, desc: desc, h: h };
+      }
+
+      /**
+       * Calcula posições de caixas, fronteira, setas e rótulos. Não usa DOM: a largura
+       * do texto é estimada pelo número de caracteres (as linhas já vêm quebradas).
+       */
+      function calcularLayout(prep, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+
+        var els = prep.elementos;
+        var porIdV = {};
+        els.forEach(function (e, i) { porIdV[e.id] = { e: e, ordem: i }; });
+        var saem = {}, entram = {};
+        els.forEach(function (e) { saem[e.id] = []; entram[e.id] = []; });
+        prep.relacoes.forEach(function (r) { saem[r.de].push(r.para); entram[r.para].push(r.de); });
+
+        // 1. grupos verticais
+        var grupo = {};
+        els.forEach(function (e) {
+          if (e.tipo === 'pessoa') grupo[e.id] = 'topo';
+          else if (prep.interno[e.id]) grupo[e.id] = 'meio';
+          else if (EXTERNO[e.tipo]) grupo[e.id] = 'base';
+          else {
+            var paraDentro = saem[e.id].some(function (d) { return prep.interno[d]; });
+            var deDentro = entram[e.id].some(function (o) { return prep.interno[o]; });
+            grupo[e.id] = paraDentro && !deDentro ? 'entrada' : 'base';
+          }
+        });
+
+        // 2. camadas do meio: caminho mais longo, ignorando arestas de retorno (ciclos)
+        var meio = els.filter(function (e) { return grupo[e.id] === 'meio'; }).map(function (e) { return e.id; });
+        var arestasMeio = {};
+        meio.forEach(function (id) { arestasMeio[id] = saem[id].filter(function (d) { return grupo[d] === 'meio'; }); });
+        var estado = {}, retorno = {};
+        function dfs(u) {
+          estado[u] = 1;
+          arestasMeio[u].forEach(function (v) {
+            if (estado[v] === 1) retorno[u + '>' + v] = true;
+            else if (!estado[v]) dfs(v);
+          });
+          estado[u] = 2;
+        }
+        // começa por quem recebe de fora do meio (ou não recebe de ninguém do meio)
+        var inicio = meio.filter(function (id) { return !entram[id].some(function (o) { return grupo[o] === 'meio'; }); });
+        inicio.concat(meio).forEach(function (id) { if (!estado[id]) dfs(id); });
+        var camada = {};
+        meio.forEach(function (id) { camada[id] = 0; });
+        for (var it = 0; it < meio.length; it++) {
+          var mudou = false;
+          meio.forEach(function (u) {
+            arestasMeio[u].forEach(function (v) {
+              if (retorno[u + '>' + v]) return;
+              if (camada[v] < camada[u] + 1) { camada[v] = camada[u] + 1; mudou = true; }
+            });
+          });
+          if (!mudou) break;
+        }
+        // bancos e filas sem saída descem para a última camada do meio
+        var maxCamada = 0;
+        meio.forEach(function (id) { if (camada[id] > maxCamada) maxCamada = camada[id]; });
+        meio.forEach(function (id) {
+          var t = porIdV[id].e.tipo;
+          if ((t === 'banco' || t === 'fila') && !arestasMeio[id].length) camada[id] = Math.max(camada[id], maxCamada);
+        });
+
+        // 3. linhas (cada linha com no máximo cfg.maxPorLinha caixas)
+        function quebrarEmLinhas(ids, rotulo) {
+          var linhas = [];
+          // linhas equilibradas: 13 caixas com máximo 6 viram 5 + 4 + 4, e não 6 + 6 + 1
+          var n = Math.max(1, Math.ceil(ids.length / cfg.maxPorLinha));
+          var por = Math.ceil(ids.length / n);
+          for (var i = 0; i < ids.length; i += por) linhas.push({ grupo: rotulo, ids: ids.slice(i, i + por) });
+          return linhas;
+        }
+        function doGrupo(g) { return els.filter(function (e) { return grupo[e.id] === g; }).map(function (e) { return e.id; }); }
+        var linhas = [];
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('topo'), 'topo'));
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('entrada'), 'entrada'));
+        var camadasMeio = [];
+        meio.forEach(function (id) { (camadasMeio[camada[id]] = camadasMeio[camada[id]] || []).push(id); });
+        camadasMeio.forEach(function (ids) { if (ids && ids.length) linhas = linhas.concat(quebrarEmLinhas(ids, 'meio')); });
+        linhas = linhas.concat(quebrarEmLinhas(doGrupo('base'), 'base'));
+
+        // 4. ordem dentro de cada linha: baricentro dos vizinhos (algumas passadas)
+        var vizinhos = {};
+        els.forEach(function (e) { vizinhos[e.id] = saem[e.id].concat(entram[e.id]); });
+        var x = {};
+        function posicionar(l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          l.ids.forEach(function (id, i) { x[id] = -w / 2 + i * (cfg.largura + cfg.folgaX) + cfg.largura / 2; });
+        }
+        linhas.forEach(posicionar);
+        function passada(lista) {
+          lista.forEach(function (l) {
+            var chave = {};
+            l.ids.forEach(function (id, i) {
+              var vs = vizinhos[id].filter(function (v) { return l.ids.indexOf(v) < 0; });
+              chave[id] = vs.length ? vs.reduce(function (s, v) { return s + x[v]; }, 0) / vs.length : x[id];
+              chave[id] += i * 1e-6;  // estável
+            });
+            l.ids.sort(function (a, b) { return chave[a] - chave[b]; });
+            posicionar(l);
+          });
+        }
+        for (var p = 0; p < 4; p++) { passada(linhas); passada(linhas.slice().reverse()); }
+
+        // 5. alturas das caixas
+        var medida = {};
+        els.forEach(function (e) { medida[e.id] = medirCaixa(e, cfg); });
+        var larguraMax = 0;
+        linhas.forEach(function (l) {
+          var w = l.ids.length * cfg.largura + (l.ids.length - 1) * cfg.folgaX;
+          if (w > larguraMax) larguraMax = w;
+        });
+        var temFronteira = !!prep.foco && linhas.some(function (l) { return l.grupo === 'meio'; });
+        var extraLado = temFronteira ? cfg.fronteira + 8 : 0;
+        var largura = larguraMax + 2 * cfg.margem + 2 * extraLado;
+        var centro = largura / 2;
+        var linhaDe = {};
+        linhas.forEach(function (l, i) { l.ids.forEach(function (id) { linhaDe[id] = i; }); });
+
+        // 6. posiciona as linhas com as folgas dadas (uma por intervalo entre linhas)
+        function montar(folgas) {
+          var y = cfg.margem;
+          var nos = {};
+          var faixas = [];   // [topo, base] de cada linha (inclui a cabeça das pessoas)
+          linhas.forEach(function (l, i) {
+            if (i > 0) {
+              y += folgas[i - 1];
+              var ant = linhas[i - 1].grupo;
+              if (temFronteira && l.grupo === 'meio' && ant !== 'meio') y += cfg.fronteira + cfg.tituloFronteira;
+              if (temFronteira && l.grupo !== 'meio' && ant === 'meio') y += cfg.fronteira;
+            }
+            var cabeca = l.ids.some(function (id) { return porIdV[id].e.tipo === 'pessoa'; }) ? cfg.cabeca : 0;
+            var h = 0;
+            l.ids.forEach(function (id) { if (medida[id].h > h) h = medida[id].h; });
+            l.ids.forEach(function (id) {
+              var e = porIdV[id].e;
+              var m = medida[id];
+              var c = e.tipo === 'pessoa' ? cfg.cabeca : 0;
+              nos[id] = {
+                id: id, tipo: e.tipo, x: centro + x[id] - cfg.largura / 2, y: y + cabeca, w: cfg.largura, h: h,
+                cabeca: c, nome: m.nome, linhaTipo: m.tipo, desc: m.desc, grupo: l.grupo, linha: i
+              };
+            });
+            faixas.push([y, y + cabeca + h]);
+            y += cabeca + h;
+          });
+          return { nos: nos, faixas: faixas, altura: y + cfg.margem };
+        }
+
+        function retDe(n) { return { x: n.x, y: n.y - n.cabeca, w: n.w, h: n.h + n.cabeca }; }
+
+        // 7. rotas: porta no lado de cima/baixo de cada caixa, distribuída pela posição
+        // da outra ponta; entre linhas não vizinhas a seta desce pelos corredores
+        // entre as caixas das linhas do meio (não atravessa caixa).
+        function rotear(geo) {
+          var nos = geo.nos, faixas = geo.faixas;
+          var lados = {};  // id|lado -> [{rel, outroX}]
+          function lado(id, qual, item) { (lados[id + '|' + qual] = lados[id + '|' + qual] || []).push(item); }
+          var rotas = prep.relacoes.map(function (r) {
+            var a = nos[r.de], b = nos[r.para];
+            var rota = { r: r, a: a, b: b };
+            if (a.linha < b.linha) { rota.tipo = 'desce'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'cima', { rota: rota, ponta: 'b', outro: a }); }
+            else if (a.linha > b.linha) { rota.tipo = 'sobe'; lado(r.de, 'cima', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            else { rota.tipo = 'mesma'; lado(r.de, 'baixo', { rota: rota, ponta: 'a', outro: b }); lado(r.para, 'baixo', { rota: rota, ponta: 'b', outro: a }); }
+            return rota;
+          });
+          Object.keys(lados).forEach(function (k) {
+            var lista = lados[k];
+            var id = k.split('|')[0], qual = k.split('|')[1];
+            var n = nos[id];
+            lista.sort(function (p, q) { return (p.outro.x - q.outro.x) || (p.outro.linha - q.outro.linha); });
+            var util = n.w - 24;
+            lista.forEach(function (it, i) {
+              var px = n.x + 12 + util * (i + 1) / (lista.length + 1);
+              var py = qual === 'baixo' ? n.y + n.h : n.y - n.cabeca;
+              if (qual === 'cima' && n.tipo === 'pessoa') py = n.y;  // entra pelo corpo, não pela cabeça
+              it.rota[it.ponta === 'a' ? 'pa' : 'pb'] = { x: px, y: py };
+            });
+          });
+          var usoCorredor = {};
+          function corredor(iLinha, xDesejado) {
+            var ids = linhas[iLinha].ids.slice().sort(function (p, q) { return nos[p].x - nos[q].x; });
+            var opcoes = [];
+            opcoes.push({ k: 0, x: nos[ids[0]].x - cfg.folgaX / 2, larg: cfg.folgaX });
+            for (var i = 0; i + 1 < ids.length; i++) {
+              var esq = nos[ids[i]].x + cfg.largura, dir = nos[ids[i + 1]].x;
+              opcoes.push({ k: i + 1, x: (esq + dir) / 2, larg: dir - esq });
+            }
+            opcoes.push({ k: ids.length, x: nos[ids[ids.length - 1]].x + cfg.largura + cfg.folgaX / 2, larg: cfg.folgaX });
+            var melhor = opcoes[0];
+            opcoes.forEach(function (o) { if (Math.abs(o.x - xDesejado) < Math.abs(melhor.x - xDesejado)) melhor = o; });
+            var chave = iLinha + ':' + melhor.k;
+            var u = usoCorredor[chave] = (usoCorredor[chave] || 0) + 1;
+            var passo = Math.min(7, (melhor.larg / 2 - 6) / 4);
+            var desloc = u === 1 ? 0 : (u % 2 ? -1 : 1) * Math.ceil((u - 1) / 2) * passo;
+            return melhor.x + desloc;
+          }
+          rotas.forEach(function (rota) {
+            var a = rota.a, b = rota.b;
+            var pts = [], folgaDoRotulo = [];   // índices de segmentos que estão numa folga entre linhas
+            if (rota.tipo === 'mesma') {
+              var yb = faixas[a.linha][1] + 22 + (Math.abs(a.x - b.x) / (cfg.largura + cfg.folgaX)) * 6;
+              pts = [rota.pa, { x: rota.pa.x, y: yb }, { x: rota.pb.x, y: yb }, { x: rota.pb.x, y: rota.pb.y + 3 }];
+              folgaDoRotulo = [1];
+            } else {
+              var desce = rota.tipo === 'desce';
+              var ini = rota.pa, fim = rota.pb;
+              pts.push({ x: ini.x, y: ini.y });
+              var la = a.linha, lb = b.linha;
+              var passoL = desce ? 1 : -1;
+              var y0 = ini.y, y1 = fim.y;
+              for (var L = la + passoL; L !== lb; L += passoL) {
+                var topo = faixas[L][0], base = faixas[L][1];
+                var yEntrada = desce ? topo - 6 : base + 6, ySaida = desce ? base + 6 : topo - 6;
+                var t = (yEntrada - y0) / ((y1 - y0) || 1);
+                var xd = ini.x + (fim.x - ini.x) * t;
+                var xc = corredor(L, xd);
+                pts.push({ x: xc, y: yEntrada });
+                pts.push({ x: xc, y: ySaida });
+              }
+              pts.push({ x: fim.x, y: desce ? fim.y - 3 : fim.y + 3 });
+              for (var s = 0; s + 1 < pts.length; s += 2) folgaDoRotulo.push(s);
+            }
+            rota.pts = pts;
+            rota.folgas = folgaDoRotulo;
+            // folga (intervalo entre linhas) onde o rótulo prefere ficar: a da ponta de origem
+            if (rota.tipo === 'desce' || rota.tipo === 'mesma') rota.intervalo = a.linha;
+            else if (rota.tipo === 'sobe') rota.intervalo = a.linha - 1;
+          });
+          return rotas;
+        }
+
+        function medirRotulo(r) {
+          var linhasR = quebrarTexto(r.descricao, cfg.charsRotulo, cfg.linhasRotulo);
+          var tec = r.tecnologia ? quebrarTexto('[' + r.tecnologia + ']', cfg.charsRotulo + 4, 1) : [];
+          var maior = 0;
+          linhasR.concat(tec).forEach(function (s) { if (s.length > maior) maior = s.length; });
+          return { linhas: linhasR, tec: tec, w: maior * 6.1 + 10, h: (linhasR.length + tec.length) * 13 + 6 };
+        }
+
+        // 1ª passada: folgas padrão, conta quantos rótulos caem em cada intervalo
+        var folgas = linhas.map(function () { return cfg.folgaY; });
+        var geo = montar(folgas);
+        var rotas = rotear(geo);
+        var porIntervalo = {};
+        rotas.forEach(function (rt) {
+          if (rt.intervalo === null || rt.intervalo < 0) return;
+          var m = medirRotulo(rt.r);
+          var p = porIntervalo[rt.intervalo] = porIntervalo[rt.intervalo] || { area: 0, n: 0 };
+          p.area += (m.w + 8) * (m.h + 6);
+          p.n++;
+        });
+        var mudou = false;
+        Object.keys(porIntervalo).forEach(function (k) {
+          // área livre de um intervalo ≈ largura útil × altura; deixa folga de 2,4× para posicionar sem colisão
+          var precisa = Math.ceil(2.4 * porIntervalo[k].area / (largura - 2 * cfg.margem)) + 36;
+          if (precisa > folgas[k]) { folgas[k] = Math.min(precisa, 520); mudou = true; }
+        });
+        if (mudou) { geo = montar(folgas); rotas = rotear(geo); }
+        var nos = geo.nos;
+        var altura = geo.altura;
+
+        // 8. fronteira do foco
+        var fronteira = null;
+        if (temFronteira) {
+          var x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+          Object.keys(nos).forEach(function (id) {
+            var n = nos[id];
+            if (n.grupo !== 'meio') return;
+            x0 = Math.min(x0, n.x); y0 = Math.min(y0, n.y - n.cabeca);
+            x1 = Math.max(x1, n.x + n.w); y1 = Math.max(y1, n.y + n.h);
+          });
+          fronteira = {
+            x: x0 - cfg.fronteira, y: y0 - cfg.fronteira - cfg.tituloFronteira,
+            w: x1 - x0 + 2 * cfg.fronteira, h: y1 - y0 + 2 * cfg.fronteira + cfg.tituloFronteira,
+            titulo: prep.foco.nome, tipo: textoTipo(prep.foco)
+          };
+        }
+
+        // 9. rótulos: no segmento que está numa folga entre linhas, onde não haja caixa nem outro rótulo
+        var caixas = Object.keys(nos).map(function (id) { return retDe(nos[id]); });
+        if (fronteira) caixas.push({ x: fronteira.x, y: fronteira.y, w: Math.min(fronteira.w, 40 + (fronteira.titulo.length + fronteira.tipo.length) * 7), h: cfg.tituloFronteira + 4 });
+        var rotulos = [];
+        function sobreposicao(a, b) {
+          var w = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+          var h = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+          return w > 0 && h > 0 ? w * h : 0;
+        }
+        // os rótulos das rotas mais longas primeiro têm menos opções; ordena pelos de menos opções
+        var ordemRotulo = rotas.slice().sort(function (p, q) { return p.folgas.length - q.folgas.length; });
+        ordemRotulo.forEach(function (rt) {
+          var m = medirRotulo(rt.r);
+          var fracoes = [0.5, 0.36, 0.64, 0.24, 0.76, 0.14, 0.86];
+          var desvios = [0, -1, 1];
+          var melhor = null, melhorCusto = Infinity;
+          rt.folgas.forEach(function (s, ordemSeg) {
+            var p1 = rt.pts[s], p2 = rt.pts[s + 1];
+            fracoes.forEach(function (t, ordemT) {
+              desvios.forEach(function (d) {
+                var px = p1.x + (p2.x - p1.x) * t + d * (m.w / 2 + 6);
+                var py = p1.y + (p2.y - p1.y) * t;
+                var ret = { x: px - m.w / 2, y: py - m.h / 2, w: m.w, h: m.h };
+                var custo = ordemSeg * 2 + ordemT * 0.5 + Math.abs(d) * 4;
+                caixas.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 3, y: k.y - 3, w: k.w + 6, h: k.h + 6 }) * 10; });
+                rotulos.forEach(function (k) { custo += sobreposicao(ret, { x: k.x - 2, y: k.y - 2, w: k.w + 4, h: k.h + 4 }) * 3; });
+                if (ret.x < 0 || ret.x + ret.w > largura) custo += 500;
+                if (custo < melhorCusto) { melhorCusto = custo; melhor = ret; }
+              });
+            });
+          });
+          melhor.apertado = melhorCusto >= 40;
+          rotulos.push(melhor);
+          rt.rotulo = melhor;
+          rt.medida = m;
+        });
+        var arestas = rotas.map(function (rt) {
+          return {
+            de: rt.r.de, para: rt.r.para, pontos: rt.pts,
+            x1: rt.pts[0].x, y1: rt.pts[0].y, x2: rt.pts[rt.pts.length - 1].x, y2: rt.pts[rt.pts.length - 1].y,
+            rotulo: rt.rotulo, linhas: rt.medida.linhas, tecnologia: rt.medida.tec, derivada: rt.r.derivada
+          };
+        });
+
+        // 10. o rótulo pode passar da borda: aumenta a área
+        var minX = 0, minY = 0, maxX = largura, maxY = altura;
+        rotulos.forEach(function (k) {
+          minX = Math.min(minX, k.x - 4); minY = Math.min(minY, k.y - 4);
+          maxX = Math.max(maxX, k.x + k.w + 4); maxY = Math.max(maxY, k.y + k.h + 4);
+        });
+        arestas.forEach(function (a) {
+          a.pontos.forEach(function (p) {
+            minX = Math.min(minX, p.x - 12); maxX = Math.max(maxX, p.x + 12);
+            minY = Math.min(minY, p.y - 12); maxY = Math.max(maxY, p.y + 12);
+          });
+        });
+        return { minX: minX, minY: minY, largura: maxX - minX, altura: maxY - minY, nos: nos, arestas: arestas, fronteira: fronteira, linhas: linhas };
+      }
+
+      // ───────────────────────── SVG ─────────────────────────
+
+      function textoLinhas(linhas, x, y, passo, atributos) {
+        return linhas.map(function (l, i) {
+          return '<text x="' + x.toFixed(1) + '" y="' + (y + i * passo).toFixed(1) + '"' + atributos + '>' + esc(l) + '</text>';
+        }).join('');
+      }
+
+      function desenharNo(n, e, cfg) {
+        var s = '';
+        var rotuloAcessivel = e.nome + ', ' + (ROTULO_TIPO[e.tipo] || e.tipo) + (e.tecnologia ? ' (' + e.tecnologia + ')' : '') + '. ' + e.descricao;
+        s += '<g class="c4-no c4-' + esc(n.tipo) + '" data-c4-id="' + esc(n.id) + '" tabindex="0" role="button" aria-label="' + esc(rotuloAcessivel) + '">';
+        s += '<title>' + esc(e.nome + ' — ' + e.descricao) + '</title>';
+        var x = n.x, y = n.y, w = n.w, h = n.h;
+        var forma = pinta(n.tipo);
+        if (n.tipo === 'pessoa') {
+          s += '<circle cx="' + (x + w / 2).toFixed(1) + '" cy="' + (y - cfg.cabeca / 2 + 2).toFixed(1) + '" r="' + (cfg.cabeca / 2 + 2) + '"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="22"' + forma + '/>';
+        } else if (n.tipo === 'banco') {
+          var ry = 9;
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + w + ',0 v' + (h - 2 * ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,1 ' + (-w) + ',0 z"' + forma + '/>';
+          s += '<path d="M' + x + ',' + (y + ry) + ' a' + (w / 2) + ',' + ry + ' 0 0,0 ' + w + ',0" fill="none"' + LINHA + '/>';
+          y += 12;
+        } else if (n.tipo === 'fila') {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="' + Math.min(30, h / 2) + '"' + forma + '/>';
+        } else if (n.tipo === 'no-de-infra') {
+          s += '<rect x="' + (x + 5).toFixed(1) + '" y="' + (y - 5).toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3" opacity=".45"' + forma + '/>';
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="3"' + forma + '/>';
+        } else {
+          s += '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + w + '" height="' + h + '" rx="6"' + forma + '/>';
+        }
+        var cx = x + w / 2;
+        var ty = y + 14 + 11;
+        s += textoLinhas(n.nome, cx, ty, cfg.linhaNome, ' text-anchor="middle" font-weight="700" font-size="13"' + letra(n.tipo));
+        ty += n.nome.length * cfg.linhaNome + 2;
+        s += textoLinhas(n.linhaTipo, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="10.5" opacity=".92"' + letra(n.tipo));
+        ty += n.linhaTipo.length * cfg.linhaTexto + 6;
+        s += textoLinhas(n.desc, cx, ty, cfg.linhaTexto, ' text-anchor="middle" font-size="11"' + letra(n.tipo));
+        s += '</g>';
+        return s;
+      }
+
+      /** Gera o SVG da vista (string). `idBase` torna únicos os ids internos (marcador, title, desc). */
+      function gerarSvg(prep, lay, idBase, opcoes) {
+        var cfg = {};
+        Object.keys(CFG).forEach(function (k) { cfg[k] = CFG[k]; });
+        Object.keys(opcoes || {}).forEach(function (k) { cfg[k] = opcoes[k]; });
+        idBase = idBase || 'c4';
+        var v = prep.vista;
+        var nomes = prep.elementos.map(function (e) { return e.nome; });
+        var desc = (NIVEIS[v.nivel] || v.nivel) + '. ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length +
+          ' relações' + (prep.foco ? ', dentro de ' + prep.foco.nome : '') + ': ' + nomes.join(', ') +
+          '. A tabela logo abaixo do diagrama traz o mesmo conteúdo em texto.';
+        var s = '<svg xmlns="http://www.w3.org/2000/svg" class="c4-svg" role="group" aria-labelledby="' + idBase + '-t ' + idBase + '-d" ' +
+          'viewBox="' + lay.minX.toFixed(0) + ' ' + lay.minY.toFixed(0) + ' ' + lay.largura.toFixed(0) + ' ' + lay.altura.toFixed(0) + '" ' +
+          'width="' + lay.largura.toFixed(0) + '" height="' + lay.altura.toFixed(0) + '" ' +
+          'font-family="Inter, \'Segoe UI\', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif">';
+        s += '<title id="' + idBase + '-t">' + esc(v.titulo) + '</title>';
+        s += '<desc id="' + idBase + '-d">' + esc(desc) + '</desc>';
+        s += '<defs><marker id="' + idBase + '-seta" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">' +
+          '<path d="M0,0 L10,5 L0,10 z" class="c4-seta-ponta" fill="#5C6870"/></marker></defs>';
+        if (lay.fronteira) {
+          var f = lay.fronteira;
+          s += '<g class="c4-fronteira"><rect x="' + f.x.toFixed(1) + '" y="' + f.y.toFixed(1) + '" width="' + f.w.toFixed(1) + '" height="' + f.h.toFixed(1) + '" rx="8" fill="none" stroke-dasharray="8 5" stroke-width="1.5"' + LINHA + '/>';
+          s += '<text x="' + (f.x + 12).toFixed(1) + '" y="' + (f.y + 18).toFixed(1) + '" font-size="13" font-weight="700"' + TEXTO + '>' + esc(f.titulo) +
+            ' <tspan font-weight="400" font-size="11">' + esc(f.tipo) + '</tspan></text></g>';
+        }
+        s += '<g class="c4-setas">';
+        lay.arestas.forEach(function (a) {
+          var d = a.pontos.map(function (p, k) { return (k ? 'L' : 'M') + p.x.toFixed(1) + ',' + p.y.toFixed(1); }).join(' ');
+          s += '<path d="' + d + '" fill="none" stroke-width="1.3" stroke-linejoin="round" stroke-dasharray="' + (a.derivada ? '2 4' : '6 4') + '"' + LINHA + ' marker-end="url(#' + idBase + '-seta)"/>';
+        });
+        s += '</g><g class="c4-nos">';
+        prep.elementos.forEach(function (e) { s += desenharNo(lay.nos[e.id], e, cfg); });
+        s += '</g><g class="c4-rotulos">';
+        lay.arestas.forEach(function (a) {
+          var r = a.rotulo;
+          s += '<g class="c4-rotulo"><rect x="' + r.x.toFixed(1) + '" y="' + r.y.toFixed(1) + '" width="' + r.w.toFixed(1) + '" height="' + r.h.toFixed(1) + '" rx="3"' + FUNDO + '/>';
+          var cx = r.x + r.w / 2;
+          s += textoLinhas(a.linhas, cx, r.y + 13, 13, ' text-anchor="middle" font-size="10.5"' + TEXTO);
+          s += textoLinhas(a.tecnologia, cx, r.y + 13 + a.linhas.length * 13, 13, ' text-anchor="middle" font-size="10" font-style="italic" opacity=".8"' + TEXTO);
+          s += '</g>';
+        });
+        s += '</g></svg>';
+        return s;
+      }
+
+      // ───────────────────────── HTML em volta ─────────────────────────
+
+      function linkDaFonte(f) {
+        // caminho do nova-atm: relativo a governanca/index.html; outro repositório (repo@branch:caminho): só texto
+        if (/^[A-Za-z0-9_.-]+@[^:]+:/.test(f) || /^https?:/i.test(f)) return '<code>' + esc(f) + '</code>';
+        return '<a href="../' + esc(f) + '" target="_blank" rel="noopener"><code>' + esc(f) + '</code></a>';
+      }
+
+      function legendaHtml(prep) {
+        var tipos = {};
+        prep.elementos.forEach(function (e) { tipos[e.tipo] = true; });
+        if (prep.foco) tipos.__fronteira = true;
+        var itens = TIPOS.filter(function (t) { return tipos[t]; }).map(function (t) {
+          var forma = t === 'pessoa' ? '<circle cx="9" cy="9" r="7"' : t === 'banco' ? '<ellipse cx="9" cy="9" rx="8" ry="6"' : '<rect x="1" y="3" width="16" height="12" rx="' + (t === 'no-de-infra' ? 1 : 3) + '"';
+          return '<li><svg width="18" height="18" aria-hidden="true" focusable="false">' + forma + pinta(t) + '/></svg>' + esc(ROTULO_TIPO[t]) + '</li>';
+        });
+        if (tipos.__fronteira) itens.push('<li><svg width="18" height="18" aria-hidden="true" focusable="false"><rect x="1" y="3" width="16" height="12" rx="2" fill="none" stroke-dasharray="3 2"' + LINHA + '/></svg>Fronteira de ' + esc(prep.foco.nome) + '</li>');
+        itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="6 4"' + LINHA + '/></svg>Relação (descrição e [tecnologia])</li>');
+        if (prep.relacoes.some(function (r) { return r.derivada; })) {
+          itens.push('<li><svg width="26" height="18" aria-hidden="true" focusable="false"><line x1="1" y1="9" x2="24" y2="9" stroke-dasharray="2 4"' + LINHA + '/></svg>Relação resumida (vem de partes internas)</li>');
+        }
+        return '<ul class="c4-legenda" aria-label="Legenda">' + itens.join('') + '</ul>';
+      }
+
+      function tabelaHtml(prep) {
+        var porId = prep.porId;
+        var s = '<details class="c4-tabela"><summary>Tabela equivalente: ' + prep.elementos.length + ' elementos e ' + prep.relacoes.length + ' relações</summary>';
+        s += '<table><caption>Elementos — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">Elemento</th><th scope="col">Tipo</th><th scope="col">Tecnologia</th><th scope="col">Descrição</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.elementos.forEach(function (e) {
+          s += '<tr><th scope="row">' + esc(e.nome) + '</th><td>' + esc(ROTULO_TIPO[e.tipo] || e.tipo) + (prep.interno[e.id] && prep.foco ? ' (dentro de ' + esc(prep.foco.nome) + ')' : '') + '</td><td>' + esc(e.tecnologia || '—') + '</td><td>' + esc(e.descricao) + '</td><td>' +
+            e.fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table>';
+        s += '<table><caption>Relações — ' + esc(prep.vista.titulo) + '</caption><thead><tr><th scope="col">De</th><th scope="col">Para</th><th scope="col">Descrição</th><th scope="col">Tecnologia</th><th scope="col">Fontes</th></tr></thead><tbody>';
+        prep.relacoes.forEach(function (r) {
+          var fontes = [];
+          r.origem.forEach(function (o) { o.fontes.forEach(function (f) { if (fontes.indexOf(f) < 0) fontes.push(f); }); });
+          var descs = r.origem.map(function (o) {
+            var detalhe = (o.de !== r.de || o.para !== r.para) ? ' (' + (porId[o.de] || {}).nome + ' → ' + (porId[o.para] || {}).nome + ')' : '';
+            return esc(o.descricao + detalhe);
+          });
+          var techs = [];
+          r.origem.forEach(function (o) { if (o.tecnologia && techs.indexOf(o.tecnologia) < 0) techs.push(o.tecnologia); });
+          s += '<tr><td>' + esc(porId[r.de].nome) + '</td><td>' + esc(porId[r.para].nome) + '</td><td>' + descs.join('<br>') + '</td><td>' + esc(techs.join(', ') || '—') + '</td><td>' + fontes.map(linkDaFonte).join('<br>') + '</td></tr>';
+        });
+        s += '</tbody></table></details>';
+        return s;
+      }
+
+      function detalheHtml(e, prep) {
+        var porId = prep.porId;
+        var s = '<button type="button" class="c4-fechar" data-c4-fechar aria-label="Fechar detalhe">×</button>';
+        s += '<p class="c4-detalhe-titulo"><strong>' + esc(e.nome) + '</strong> <span>' + esc(textoTipo(e)) + '</span></p>';
+        s += '<p>' + esc(e.descricao) + '</p>';
+        if (e.pai && porId[e.pai]) s += '<p class="c4-detalhe-pai">Dentro de: ' + esc(porId[e.pai].nome) + '</p>';
+        var rel = prep.relacoes.filter(function (r) { return r.de === e.id || r.para === e.id; });
+        if (rel.length) {
+          s += '<p class="c4-detalhe-sub">Relações nesta vista</p><ul>';
+          rel.forEach(function (r) {
+            s += '<li>' + (r.de === e.id ? '→ ' + esc(porId[r.para].nome) : '← ' + esc(porId[r.de].nome)) + ': ' + esc(r.descricao) + (r.tecnologia ? ' <em>[' + esc(r.tecnologia) + ']</em>' : '') + '</li>';
+          });
+          s += '</ul>';
+        }
+        s += '<p class="c4-detalhe-sub">Fontes</p><ul>' + e.fontes.map(function (f) { return '<li>' + linkDaFonte(f) + '</li>'; }).join('') + '</ul>';
+        return s;
+      }
+
+      var ESTILO = [
+        Object.keys(COR).map(function (t) {
+          var txt = t === 'componente' ? 'var(--c4-texto-componente, ' + COR[t][1] + ')' : 'var(--c4-texto-caixa, ' + COR[t][1] + ')';
+          return '.c4-f-' + t + '{fill:var(' + VAR_TIPO[t] + ', ' + COR[t][0] + ');}.c4-t-' + t + '{fill:' + txt + ';}';
+        }).join('\n'),
+        '.c4-borda,.c4-linha{stroke:var(--c4-linha,var(--mudo,#5C6870));}.c4-seta-ponta{fill:var(--c4-linha,var(--mudo,#5C6870));}',
+        '.c4-txt{fill:var(--c4-texto,var(--texto,#1B2A33));}.c4-fundo-rotulo{fill:var(--c4-fundo,var(--superficie,#FFFFFF));}',
+        'figure[data-c4]{margin:1.5rem 0;}',
+        '.c4-titulo{font-weight:700;margin:0 0 .5rem;color:var(--titulo,inherit);}',
+        '.c4-titulo span{font-weight:400;color:var(--mudo,#5C6870);font-size:.85em;margin-left:.4rem;}',
+        '.c4-palco{overflow:auto;border:1px solid var(--linha,#E7E5E1);border-radius:var(--raio,10px);background:var(--c4-fundo,var(--superficie,#FFF));}',
+        '.c4-palco[data-tamanho="ajustado"] .c4-svg{width:100%;height:auto;}',
+        '.c4-palco .c4-svg{display:block;}',
+        '.c4-no{cursor:pointer;outline:none;}',
+        '.c4-no:focus-visible > rect,.c4-no:focus-visible > path,.c4-no:focus-visible > circle,.c4-no[data-c4-ativo] > rect,.c4-no[data-c4-ativo] > path{stroke:var(--foco,#2563EB);stroke-width:3;}',
+        '.c4-barra{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.5rem 0;}',
+        '.c4-barra button,.c4-fechar{font:inherit;font-size:.85rem;padding:.2rem .6rem;border:1px solid var(--linha-forte,#D6D2CB);border-radius:6px;background:var(--superficie,#FFF);color:var(--texto,#1B2A33);cursor:pointer;}',
+        '.c4-dica{font-size:.85rem;color:var(--mudo,#5C6870);}',
+        '.c4-legenda{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;padding:0;margin:.25rem 0 .5rem;font-size:.85rem;color:var(--texto,#1B2A33);}',
+        '.c4-legenda li{display:flex;align-items:center;gap:.35rem;}',
+        '.c4-detalhe{position:relative;border:1px solid var(--linha-forte,#D6D2CB);border-left:4px solid var(--c4-container,#438DD5);border-radius:6px;padding:.6rem 2.5rem .6rem .9rem;margin:.5rem 0;background:var(--superficie,#FFF);font-size:.92rem;}',
+        '.c4-detalhe p{margin:.25rem 0;}.c4-detalhe ul{margin:.2rem 0 .4rem 1.1rem;padding:0;}',
+        '.c4-detalhe-titulo span{color:var(--mudo,#5C6870);font-size:.85em;}',
+        '.c4-detalhe-sub{font-weight:600;margin-top:.5rem !important;}',
+        '.c4-fechar{position:absolute;top:.4rem;right:.4rem;line-height:1;}',
+        '.c4-tabela{margin:.5rem 0;font-size:.88rem;}',
+        '.c4-tabela summary{cursor:pointer;color:var(--link,#A24C08);}',
+        '.c4-tabela table{border-collapse:collapse;width:100%;margin:.5rem 0;}',
+        '.c4-tabela caption{text-align:left;font-weight:600;padding:.25rem 0;}',
+        '.c4-tabela th,.c4-tabela td{border:1px solid var(--linha,#E7E5E1);padding:.3rem .45rem;vertical-align:top;text-align:left;}',
+        '.c4-tabela code{font-size:.85em;word-break:break-all;}',
+        '.c4-erro{border:1px dashed var(--linha-forte,#D6D2CB);border-radius:6px;padding:.75rem 1rem;color:var(--mudo,#5C6870);}',
+        '@media print{.c4-barra,.c4-detalhe,.c4-fechar{display:none !important;}.c4-palco{overflow:visible;border:0;}.c4-palco .c4-svg{width:100% !important;height:auto !important;}figure[data-c4]{break-inside:avoid-page;}.c4-tabela summary{display:none;}}'
+      ].join('\n');
+
+      function injetarEstilo(doc) {
+        if (!doc || !doc.head || !doc.createElement) return;
+        if (doc.getElementById && doc.getElementById('atm-c4-estilo')) return;
+        var st = doc.createElement('style');
+        st.id = 'atm-c4-estilo';
+        st.textContent = ESTILO;
+        doc.head.appendChild(st);
+      }
+
+      var contador = 0;
+      var impressaoLigada = false;
+
+      function ligarImpressao() {
+        if (impressaoLigada || typeof global.addEventListener !== 'function' || !global.document) return;
+        impressaoLigada = true;
+        var abertas = [];
+        global.addEventListener('beforeprint', function () {
+          abertas = [];
+          var ds = global.document.querySelectorAll('details.c4-tabela');
+          for (var i = 0; i < ds.length; i++) if (!ds[i].open) { ds[i].open = true; abertas.push(ds[i]); }
+        });
+        global.addEventListener('afterprint', function () {
+          abertas.forEach(function (d) { d.open = false; });
+          abertas = [];
+        });
+      }
+
+      function acharNo(alvo, fig) {
+        var n = alvo;
+        while (n && n !== fig) {
+          if (n.getAttribute && n.getAttribute('data-c4-id')) return n;
+          if (n.getAttribute && n.getAttribute('data-c4-fechar') !== null && n.getAttribute('data-c4-fechar') !== undefined) return n;
+          n = n.parentNode;
+        }
+        return null;
+      }
+
+      function ouvir(fig) {
+        if (fig.__c4Ouvindo || typeof fig.addEventListener !== 'function') return;
+        fig.__c4Ouvindo = true;
+        function abrir(no) {
+          var estado = fig.__c4;
+          if (!estado) return;
+          var painel = fig.querySelector('.c4-detalhe');
+          if (!painel) return;
+          if (no.getAttribute('data-c4-fechar') !== null && !no.getAttribute('data-c4-id')) {
+            painel.hidden = true;
+            painel.innerHTML = '';
+            var ativo = fig.querySelector('[data-c4-ativo]');
+            if (ativo) { ativo.removeAttribute('data-c4-ativo'); if (ativo.focus) ativo.focus(); }
+            return;
+          }
+          var id = no.getAttribute('data-c4-id');
+          var e = estado.prep.porId[id];
+          if (!e) return;
+          var antes = fig.querySelectorAll('[data-c4-ativo]');
+          for (var i = 0; i < antes.length; i++) antes[i].removeAttribute('data-c4-ativo');
+          no.setAttribute('data-c4-ativo', '');
+          painel.innerHTML = detalheHtml(e, estado.prep);
+          painel.hidden = false;
+        }
+        fig.addEventListener('click', function (ev) {
+          var alvo = ev.target;
+          if (alvo && alvo.getAttribute && alvo.getAttribute('data-c4-tamanho') !== null && alvo.getAttribute('data-c4-tamanho') !== undefined) {
+            var palco = fig.querySelector('.c4-palco');
+            var real = palco.getAttribute('data-tamanho') === 'ajustado';
+            palco.setAttribute('data-tamanho', real ? 'real' : 'ajustado');
+            alvo.textContent = real ? 'Ajustar à largura' : 'Tamanho real';
+            alvo.setAttribute('aria-pressed', real ? 'true' : 'false');
+            return;
+          }
+          var no = acharNo(alvo, fig);
+          if (no) abrir(no);
+        });
+        fig.addEventListener('keydown', function (ev) {
+          if (ev.key !== 'Enter' && ev.key !== ' ') return;
+          var no = acharNo(ev.target, fig);
+          if (no && no.getAttribute('data-c4-id')) { if (ev.preventDefault) ev.preventDefault(); abrir(no); }
+        });
+      }
+
+      /** Renderiza a vista de uma figura. Devolve true se desenhou. */
+      function desenharFigura(fig, modelo, opcoes) {
+        var vistaId = String(fig.getAttribute('data-c4') || '').trim();
+        if (!modelo || !Array.isArray(modelo.vistas)) {
+          fig.innerHTML = '<p class="c4-erro" role="note">Modelo C4 não carregado: não foi possível desenhar a vista "' + esc(vistaId) + '".</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var prep = prepararVista(modelo, vistaId);
+        if (prep.erro) {
+          fig.innerHTML = '<p class="c4-erro" role="note">' + esc(prep.erro) + ' Vistas disponíveis: ' + esc(modelo.vistas.map(function (v) { return v.id; }).join(', ')) + '.</p>';
+          fig.setAttribute('data-c4-estado', 'erro');
+          return false;
+        }
+        var lay = calcularLayout(prep, opcoes);
+        contador += 1;
+        var idBase = 'c4-' + vistaId.replace(/[^a-z0-9-]/gi, '') + '-' + contador;
+        // ajusta à largura quando o texto ainda fica legível (escala >= 62%); senão, tamanho real com rolagem
+        var disponivel = fig.clientWidth || 0;
+        var ajustado = disponivel ? disponivel >= lay.largura * 0.62 : lay.largura <= CFG.larguraAjustavel;
+        var html = '';
+        html += '<figcaption class="c4-titulo">' + esc(prep.vista.titulo) + '<span>C4 · ' + esc(NIVEIS[prep.vista.nivel] || prep.vista.nivel) + '</span></figcaption>';
+        html += '<div class="c4-barra"><button type="button" data-c4-tamanho aria-pressed="' + (ajustado ? 'false' : 'true') + '">' + (ajustado ? 'Tamanho real' : 'Ajustar à largura') + '</button>' +
+          '<span class="c4-dica">Clique (ou Enter) numa caixa para ver a descrição e as fontes.</span></div>';
+        html += '<div class="c4-palco" data-tamanho="' + (ajustado ? 'ajustado' : 'real') + '">' + gerarSvg(prep, lay, idBase, opcoes) + '</div>';
+        html += legendaHtml(prep);
+        html += '<div class="c4-detalhe" aria-live="polite" hidden></div>';
+        html += tabelaHtml(prep);
+        fig.innerHTML = html;
+        fig.setAttribute('data-c4-estado', 'ok');
+        fig.__c4 = { prep: prep, layout: lay };
+        ouvir(fig);
+        return true;
+      }
+
+      /** Acha `figure[data-c4]` em `raiz` e desenha cada vista. Devolve quantas desenhou. */
+      function desenhar(raiz, modelo, opcoes) {
+        raiz = raiz || global.document;
+        if (!raiz || typeof raiz.querySelectorAll !== 'function') return 0;
+        injetarEstilo(raiz.ownerDocument || global.document);
+        ligarImpressao();
+        var figs = raiz.querySelectorAll('figure[data-c4]');
+        var n = 0;
+        for (var i = 0; i < figs.length; i++) if (desenharFigura(figs[i], modelo, opcoes)) n++;
+        return n;
+      }
+
+      var api = {
+        desenhar: desenhar,
+        prepararVista: prepararVista,
+        calcularLayout: calcularLayout,
+        gerarSvg: gerarSvg,
+        tabelaHtml: tabelaHtml,
+        quebrarTexto: quebrarTexto,
+        validarModelo: validarModelo,
+        ESTILO: ESTILO,   // folha do diagrama; sob CSP sem estilo inline, sirva-a como .css com id="atm-c4-estilo" (aí não é injetada)
+        TIPOS: TIPOS.slice()
+      };
+      global.ATM_C4 = api;
+      if (typeof module !== 'undefined' && module.exports) module.exports = api;
+    })(typeof window !== 'undefined' ? window : globalThis);
+
+  painel-markdown.js: |
+    /* ===========================================================================
+       markdown.js — renderizador Markdown do visualizador de governança.
+
+       Sem dependências. Funciona no navegador (window.ATMMarkdown) e no Node
+       (module.exports), para os testes em markdown.teste.js.
+
+       SEGURANÇA
+       Todo texto do conteúdo é escapado. HTML cru escrito no Markdown NÃO é
+       interpretado: aparece como texto. As únicas exceções são <br> (comum em
+       célula de tabela), que vira quebra de linha, e comentários <!-- -->, que
+       são descartados. Links e imagens só aceitam http, https, mailto, âncora e
+       caminho relativo; qualquer outro esquema (javascript:, data:, ...) vira "#".
+
+       SUPORTE
+       Títulos ATX (#) e setext (=== / ---), parágrafos, ênfase (* _ ** __ ~~),
+       código inline e em bloco (``` ~~~ e recuo de 4 espaços), listas ordenadas
+       e não ordenadas aninhadas (inclusive de tarefa: - [ ] / - [x]), tabelas
+       GFM com alinhamento, citações aninhadas, links inline, de referência e
+       automáticos (<https://...> e URL solta), imagens, regras horizontais e
+       quebras de linha (dois espaços ou barra invertida no fim da linha).
+       Bloco cercado ```c4 <vista> vira <figure class="c4" data-c4="<vista>">,
+       que o c4.js desenha a partir do modelo (ATM_GOV.c4).
+
+       CÓPIA NO PAINEL DO DONO
+       frontend/publico/painel-markdown.js é cópia byte a byte deste arquivo
+       (`python governanca/gerar.py --copiar-para-o-painel`); o gerar.py avisa
+       quando as duas divergem.
+
+       USO
+         ATMMarkdown.render(md, {
+           resolverLink:   function (href) { return hrefNovo ou null },
+           resolverImagem: function (src)  { return srcNovo ou null },
+           prefixoId: '',         // prefixo dos ids dos títulos
+           alinhamentoPorClasse: false  // true: alinhamento de tabela por classe, sem style=
+         })
+         -> { html: '...', titulos: [{ nivel, texto, id }] }
+       =========================================================================== */
+    (function (raiz, fabrica) {
+      var api = fabrica();
+      if (typeof module === 'object' && module.exports) module.exports = api;
+      else raiz.ATMMarkdown = api;
+    })(typeof self !== 'undefined' ? self : this, function () {
+      'use strict';
+
+      /* ---------------------------------------------------------------- util */
+
+      function escapar(s) {
+        return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#39;');
+      }
+
+      var PONTUACAO = /[!-\/:-@\[-`{-~¡-¿‐-‧‰-⁞]/;
+      var ESPACO = /\s/;
+
+      function ehBranca(linha) { return /^\s*$/.test(linha); }
+
+      function recuo(linha) {
+        var m = /^ */.exec(linha);
+        return m[0].length;
+      }
+
+      /* Slug no estilo do GitHub: minúsculas, mantém letras acentuadas, troca
+         espaço por hífen e descarta o resto da pontuação. Assim uma âncora
+         escrita à mão pelo autor ("#visão-geral") bate com o id gerado. */
+      function slug(texto) {
+        return String(texto)
+          .trim()
+          .toLowerCase()
+          .replace(/[^\p{L}\p{N}\p{M}_\- ]/gu, '')
+          .replace(/ /g, '-');
+      }
+
+      function semAcento(s) {
+        return String(s).normalize('NFD').replace(/[̀-ͯ]/g, '');
+      }
+
+      var ESQUEMA = /^([a-zA-Z][a-zA-Z0-9+.\-]*):/;
+
+      /* Devolve um href seguro, ou "#" se o esquema não for permitido. */
+      function urlSegura(url) {
+        var u = String(url).trim();
+        // Remove caracteres de controle e espaços que navegadores ignoram dentro
+        // do esquema ("java\tscript:").
+        var limpo = u.replace(/[\u0000- \u007F]/g, '');
+        var m = ESQUEMA.exec(limpo);
+        if (m) {
+          var esq = m[1].toLowerCase();
+          if (esq !== 'http' && esq !== 'https' && esq !== 'mailto') return '#';
+        }
+        return u;
+      }
+
+      function textoPuro(html) {
+        return html
+          .replace(/<[^>]*>/g, '')
+          .replace(/&lt;/g, '<')
+          .replace(/&gt;/g, '>')
+          .replace(/&quot;/g, '"')
+          .replace(/&#39;/g, "'")
+          .replace(/&amp;/g, '&');
+      }
+
+      /* -------------------------------------------------------------- inline */
+
+      /* O texto vira uma lista de nós: texto cru, HTML já pronto (código, link)
+         e delimitadores de ênfase. A ênfase é resolvida depois, numa versão
+         simplificada do algoritmo do CommonMark ("process emphasis"). */
+
+      function Inline(ctx) { this.ctx = ctx; }
+
+      Inline.prototype.render = function (texto) {
+        var nos = this.tokenizar(texto);
+        this.enfase(nos);
+        return this.serializar(nos);
+      };
+
+      Inline.prototype.tokenizar = function (s) {
+        var nos = [];
+        var buf = '';
+        var i = 0;
+        var n = s.length;
+        var self = this;
+
+        function despejar() {
+          if (buf) { nos.push({ t: 'txt', v: buf }); buf = ''; }
+        }
+        function html(v) { despejar(); nos.push({ t: 'html', v: v }); }
+
+        while (i < n) {
+          var c = s.charAt(i);
+
+          // Escape com barra invertida.
+          if (c === '\\') {
+            var prox = s.charAt(i + 1);
+            if (prox === '\n') { html('<br>\n'); i += 2; continue; }
+            if (prox && PONTUACAO.test(prox) && prox.charCodeAt(0) < 128) {
+              buf += prox; i += 2; continue;
+            }
+            buf += c; i++; continue;
+          }
+
+          // Código inline.
+          if (c === '`') {
+            var ini = i;
+            while (i < n && s.charAt(i) === '`') i++;
+            var marca = s.slice(ini, i);
+            var fim = acharCrases(s, i, marca.length);
+            if (fim < 0) { buf += marca; continue; }
+            var cod = s.slice(i, fim).replace(/\n/g, ' ');
+            if (/^ .*[^ ].* $/.test(cod) || /^ [^ ] $/.test(cod)) cod = cod.slice(1, -1);
+            html('<code>' + escapar(cod) + '</code>');
+            i = fim + marca.length;
+            continue;
+          }
+
+          // Quebra dura: dois ou mais espaços antes da quebra de linha.
+          if (c === '\n') {
+            var mb = / {2,}$/.exec(buf);
+            if (mb) { buf = buf.slice(0, mb.index); html('<br>\n'); }
+            else { buf = buf.replace(/ +$/, ''); buf += '\n'; }
+            i++;
+            while (s.charAt(i) === ' ') i++;
+            continue;
+          }
+
+          // Comentário HTML: descartado.
+          if (c === '<' && s.substr(i, 4) === '<!--') {
+            var fc = s.indexOf('-->', i + 4);
+            if (fc >= 0) { i = fc + 3; continue; }
+          }
+
+          // <br> permitido.
+          if (c === '<') {
+            var mbr = /^<br\s*\/?>/i.exec(s.slice(i));
+            if (mbr) { html('<br>'); i += mbr[0].length; continue; }
+            var mal = /^<((?:https?|mailto):[^\s<>]*)>/i.exec(s.slice(i));
+            if (mal) { html(self.link(mal[1], escapar(mal[1]), '')); i += mal[0].length; continue; }
+            var mem = /^<([A-Za-z0-9._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,})>/.exec(s.slice(i));
+            if (mem) { html(self.link('mailto:' + mem[1], escapar(mem[1]), '')); i += mem[0].length; continue; }
+          }
+
+          // Imagem e link.
+          if (c === '!' && s.charAt(i + 1) === '[') {
+            var img = self.lerLink(s, i + 1);
+            if (img) {
+              html(self.imagem(img.dest, textoPuro(self.render(img.texto)), img.titulo));
+              i = img.fim; continue;
+            }
+          }
+          // Link dentro de link não existe em HTML: o "[" interno fica como texto.
+          if (c === '[' && !self.ctx.dentroDeLink) {
+            var lk = self.lerLink(s, i);
+            if (lk) {
+              self.ctx.dentroDeLink = true;
+              var dentro = self.render(lk.texto);
+              self.ctx.dentroDeLink = false;
+              html(self.link(lk.dest, dentro, lk.titulo));
+              i = lk.fim; continue;
+            }
+          }
+
+          // URL solta (extensão GFM).
+          if ((c === 'h' || c === 'H') && !self.ctx.dentroDeLink) {
+            var antes = i > 0 ? s.charAt(i - 1) : ' ';
+            if (!/[A-Za-z0-9]/.test(antes)) {
+              var mu = /^https?:\/\/[^\s<]+/i.exec(s.slice(i));
+              if (mu) {
+                var url = aparaUrl(mu[0]);
+                html(self.link(url, escapar(url), ''));
+                i += url.length; continue;
+              }
+            }
+          }
+
+          // Delimitadores de ênfase.
+          if (c === '*' || c === '_' || c === '~') {
+            var j = i;
+            while (j < n && s.charAt(j) === c) j++;
+            var qtd = j - i;
+            if (c === '~' && qtd !== 2) { buf += s.slice(i, j); i = j; continue; }
+            var ant = i > 0 ? s.charAt(i - 1) : ' ';
+            var dep = j < n ? s.charAt(j) : ' ';
+            var antEsp = ESPACO.test(ant), depEsp = ESPACO.test(dep);
+            var antPont = PONTUACAO.test(ant), depPont = PONTUACAO.test(dep);
+            var esq = !depEsp && (!depPont || antEsp || antPont);
+            var dir = !antEsp && (!antPont || depEsp || depPont);
+            var abre, fecha;
+            if (c === '_') {
+              abre = esq && (!dir || antPont);
+              fecha = dir && (!esq || depPont);
+            } else {
+              abre = esq; fecha = dir;
+            }
+            despejar();
+            nos.push({ t: 'del', c: c, n: qtd, orig: qtd, abre: abre, fecha: fecha });
+            i = j;
+            continue;
+          }
+
+          buf += c;
+          i++;
+        }
+        despejar();
+        return nos;
+      };
+
+      function acharCrases(s, de, tam) {
+        var i = de;
+        while (i < s.length) {
+          var p = s.indexOf('`', i);
+          if (p < 0) return -1;
+          var j = p;
+          while (j < s.length && s.charAt(j) === '`') j++;
+          if (j - p === tam) return p;
+          i = j;
+        }
+        return -1;
+      }
+
+      function aparaUrl(url) {
+        // Pontuação final não faz parte da URL; ")" só fica se estiver casado.
+        for (;;) {
+          var ult = url.charAt(url.length - 1);
+          if (/[.,:;!?*_~'"]/.test(ult)) { url = url.slice(0, -1); continue; }
+          if (ult === ')') {
+            var abre = (url.match(/\(/g) || []).length;
+            var fecha = (url.match(/\)/g) || []).length;
+            if (fecha > abre) { url = url.slice(0, -1); continue; }
+          }
+          return url;
+        }
+      }
+
+      /* Lê [texto](destino "título") ou [texto][ref] / [texto][] / [texto]
+         a partir de s[i] === '['. Devolve null se não for link. */
+      Inline.prototype.lerLink = function (s, i) {
+        var n = s.length;
+        var prof = 0;
+        var j = i;
+        for (; j < n; j++) {
+          var c = s.charAt(j);
+          if (c === '\\') { j++; continue; }
+          if (c === '`') {
+            var k = j; while (k < n && s.charAt(k) === '`') k++;
+            var f = acharCrases(s, k, k - j);
+            if (f >= 0) { j = f + (k - j) - 1; continue; }
+            j = k - 1; continue;
+          }
+          if (c === '[') prof++;
+          else if (c === ']') { prof--; if (prof === 0) break; }
+        }
+        if (j >= n) return null;
+        var texto = s.slice(i + 1, j);
+        var p = j + 1;
+
+        if (s.charAt(p) === '(') {
+          var q = p + 1;
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var dest = '';
+          if (s.charAt(q) === '<') {
+            var fimA = s.indexOf('>', q);
+            if (fimA < 0) return null;
+            dest = s.slice(q + 1, fimA);
+            q = fimA + 1;
+          } else {
+            var par = 0;
+            var d0 = q;
+            while (q < n) {
+              var ch = s.charAt(q);
+              if (ch === '\\') { q += 2; continue; }
+              if (/\s/.test(ch)) break;
+              if (ch === '(') par++;
+              else if (ch === ')') { if (par === 0) break; par--; }
+              q++;
+            }
+            dest = s.slice(d0, q);
+          }
+          while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          var titulo = '';
+          var ab = s.charAt(q);
+          if (ab === '"' || ab === "'" || ab === '(') {
+            var fe = ab === '(' ? ')' : ab;
+            var ft = s.indexOf(fe, q + 1);
+            if (ft < 0) return null;
+            titulo = s.slice(q + 1, ft);
+            q = ft + 1;
+            while (q < n && /[ \t\n]/.test(s.charAt(q))) q++;
+          }
+          if (s.charAt(q) !== ')') return null;
+          return { texto: texto, dest: dest.replace(/\\([!-\/:-@\[-`{-~])/g, '$1'), titulo: titulo, fim: q + 1 };
+        }
+
+        // Referência.
+        var refs = this.ctx.refs;
+        var rotulo = null;
+        var fim = p;
+        if (s.charAt(p) === '[') {
+          var fr = s.indexOf(']', p + 1);
+          if (fr >= 0) {
+            rotulo = s.slice(p + 1, fr) || texto;
+            fim = fr + 1;
+          }
+        }
+        if (rotulo === null) rotulo = texto;
+        var def = refs[normRotulo(rotulo)];
+        if (!def) return null;
+        return { texto: texto, dest: def.dest, titulo: def.titulo, fim: fim };
+      };
+
+      function normRotulo(r) { return String(r).trim().replace(/\s+/g, ' ').toLowerCase(); }
+
+      Inline.prototype.link = function (dest, htmlTexto, titulo) {
+        var href = dest;
+        var externo = /^(https?:)?\/\//i.test(dest);
+        if (this.ctx.resolverLink && !externo && !/^mailto:/i.test(dest)) {
+          var r = this.ctx.resolverLink(dest);
+          if (r) href = r;
+        }
+        href = urlSegura(href);
+        var attrs = ' href="' + escapar(href) + '"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        if (externo) attrs += ' class="externo" target="_blank" rel="noopener noreferrer"';
+        return '<a' + attrs + '>' + htmlTexto + '</a>';
+      };
+
+      Inline.prototype.imagem = function (src, alt, titulo) {
+        var s = src;
+        if (this.ctx.resolverImagem && !/^(https?:)?\/\//i.test(src)) {
+          var r = this.ctx.resolverImagem(src);
+          if (r) s = r;
+        }
+        s = urlSegura(s);
+        if (/^mailto:/i.test(s)) s = '#';
+        var attrs = ' src="' + escapar(s) + '" alt="' + escapar(alt) + '" loading="lazy"';
+        if (titulo) attrs += ' title="' + escapar(titulo) + '"';
+        return '<img' + attrs + '>';
+      };
+
+      Inline.prototype.enfase = function (nos) {
+        var k = 0;
+        while (k < nos.length) {
+          var fe = nos[k];
+          if (fe.t !== 'del' || !fe.fecha || fe.n === 0) { k++; continue; }
+          // Procura um abridor compatível para trás.
+          var a = k - 1;
+          var achou = -1;
+          for (; a >= 0; a--) {
+            var ab = nos[a];
+            if (ab.t !== 'del' || ab.c !== fe.c || !ab.abre || ab.n === 0) continue;
+            if (fe.c === '~' && ab.n !== fe.n) continue;
+            // Regra do múltiplo de 3 (CommonMark).
+            if ((ab.fecha || fe.abre) && (ab.orig + fe.orig) % 3 === 0 &&
+                !(ab.orig % 3 === 0 && fe.orig % 3 === 0)) continue;
+            achou = a; break;
+          }
+          if (achou < 0) {
+            if (!fe.abre) fe.fecha = false; // não fecha nada; vira texto
+            k++;
+            continue;
+          }
+          var abr = nos[achou];
+          var usa = fe.c === '~' ? 2 : (abr.n >= 2 && fe.n >= 2 ? 2 : 1);
+          var tag = fe.c === '~' ? 'del' : (usa === 2 ? 'strong' : 'em');
+          var meio = nos.slice(achou + 1, k);
+          var htmlMeio = this.serializar(meio);
+          abr.n -= usa;
+          fe.n -= usa;
+          var novo = { t: 'html', v: '<' + tag + '>' + htmlMeio + '</' + tag + '>' };
+          nos.splice(achou + 1, k - achou - 1, novo);
+          k = achou + 2; // posição do fechador
+          if (abr.n === 0) { nos.splice(achou, 1); k--; }
+          if (fe.n === 0) { nos.splice(k, 1); }
+        }
+      };
+
+      Inline.prototype.serializar = function (nos) {
+        var out = '';
+        for (var i = 0; i < nos.length; i++) {
+          var no = nos[i];
+          if (no.t === 'txt') out += escapar(no.v);
+          else if (no.t === 'html') out += no.v;
+          else if (no.t === 'del') out += escapar(new Array(no.n + 1).join(no.c));
+        }
+        return out;
+      };
+
+      /* -------------------------------------------------------------- blocos */
+
+      var RX = {
+        cerca: /^( {0,3})(`{3,}|~{3,})[ \t]*([^\s`]*)[^`]*$/,
+        cercaTil: /^( {0,3})(~{3,})[ \t]*(\S*).*$/,
+        atx: /^ {0,3}(#{1,6})(?:[ \t]+(.*?))?(?:[ \t]+#+)?[ \t]*$/,
+        hr: /^ {0,3}([-*_])(?:[ \t]*\1){2,}[ \t]*$/,
+        citacao: /^ {0,3}> ?/,
+        setext1: /^ {0,3}=+[ \t]*$/,
+        setext2: /^ {0,3}-+[ \t]*$/,
+        comentario: /^ {0,3}<!--/,
+        ref: /^ {0,3}\[([^\]]+)\]:[ \t]*<?([^\s>]+)>?(?:[ \t]+(?:"([^"]*)"|'([^']*)'|\(([^)]*)\)))?[ \t]*$/,
+        delimTabela: /^ {0,3}\|?[ \t]*:?-+:?[ \t]*(?:\|[ \t]*:?-+:?[ \t]*)*\|?[ \t]*$/
+      };
+
+      function marcador(linha) {
+        var m = /^( {0,3})([-+*]|(\d{1,9})([.)]))(?:([ \t]+)(.*))?$/.exec(linha);
+        if (!m) return null;
+        var ordenada = !!m[3];
+        var esp = m[5] ? m[5].replace(/\t/g, '    ').length : 0;
+        var conteudo = m[6] || '';
+        var vazio = !conteudo.trim();
+        if (vazio) esp = 1;
+        else if (esp > 4) { conteudo = new Array(esp).join(' ') + conteudo; esp = 1; }
+        return {
+          recuo: m[1].length,
+          ordenada: ordenada,
+          inicio: ordenada ? parseInt(m[3], 10) : 1,
+          sinal: ordenada ? m[4] : m[2],
+          largura: m[1].length + m[2].length + esp,
+          conteudo: conteudo,
+          vazio: vazio
+        };
+      }
+
+      function abreCerca(linha) {
+        var m = RX.cerca.exec(linha) || RX.cercaTil.exec(linha);
+        if (!m) return null;
+        // `resto`: a linha de informação depois da linguagem (```c4 contexto -> "contexto").
+        var resto = linha.replace(/^ {0,3}(`{3,}|~{3,})[ \t]*/, '').slice((m[3] || '').length).trim();
+        return { recuo: m[1].length, marca: m[2], info: m[3] || '', resto: resto };
+      }
+
+      function ehInicioTabela(linhas, i) {
+        var l = linhas[i];
+        if (l === undefined || l.indexOf('|') < 0) return false;
+        var d = linhas[i + 1];
+        if (d === undefined || !RX.delimTabela.test(d) || d.indexOf('-') < 0) return false;
+        // O delimitador precisa de "|" ou o cabeçalho de mais de uma coluna;
+        // sem isso "texto\n---" é título setext, não tabela.
+        if (d.indexOf('|') < 0) return false;
+        return celulas(l).length === celulas(d).length;
+      }
+
+      /* Uma linha que interrompe um parágrafo. */
+      function interrompe(linhas, i) {
+        var l = linhas[i];
+        if (abreCerca(l) || RX.atx.test(l) || RX.hr.test(l) || RX.citacao.test(l)) return true;
+        if (RX.comentario.test(l)) return true;
+        var mk = marcador(l);
+        if (mk && !mk.vazio && (!mk.ordenada || mk.inicio === 1)) return true;
+        if (ehInicioTabela(linhas, i)) return true;
+        return false;
+      }
+
+      function celulas(linha) {
+        var s = linha.trim();
+        if (s.charAt(0) === '|') s = s.slice(1);
+        if (s.charAt(s.length - 1) === '|' && s.charAt(s.length - 2) !== '\\') s = s.slice(0, -1);
+        var out = [];
+        var atual = '';
+        var emCodigo = 0;
+        for (var i = 0; i < s.length; i++) {
+          var c = s.charAt(i);
+          if (c === '\\' && s.charAt(i + 1) === '|') { atual += '|'; i++; continue; }
+          if (c === '`') {
+            var j = i; while (s.charAt(j) === '`') j++;
+            var tam = j - i;
+            if (emCodigo === 0) { if (acharCrases(s, j, tam) >= 0) emCodigo = tam; }
+            else if (emCodigo === tam) emCodigo = 0;
+            atual += s.slice(i, j); i = j - 1; continue;
+          }
+          if (c === '|' && !emCodigo) { out.push(atual.trim()); atual = ''; continue; }
+          atual += c;
+        }
+        out.push(atual.trim());
+        return out;
+      }
+
+      function Analisador(ctx) { this.ctx = ctx; }
+
+      /* Devolve a lista de blocos de um trecho. Cada bloco guarda ini/fim
+         (linhas) para a decisão de lista "solta" ou "justa". */
+      Analisador.prototype.blocos = function (linhas) {
+        var out = [];
+        var i = 0;
+        var n = linhas.length;
+
+        while (i < n) {
+          var l = linhas[i];
+          var ini = i;
+          if (ehBranca(l)) { i++; continue; }
+
+          // Bloco de código cercado.
+          var cerca = abreCerca(l);
+          if (cerca) {
+            var corpo = [];
+            i++;
+            var fechaRx = new RegExp('^ {0,3}' + cerca.marca.charAt(0) + '{' + cerca.marca.length + ',}[ \\t]*$');
+            while (i < n && !fechaRx.test(linhas[i])) {
+              var cl = linhas[i];
+              var r = Math.min(recuo(cl), cerca.recuo);
+              corpo.push(cl.slice(r));
+              i++;
+            }
+            if (i < n) i++; // consome o fechamento
+            out.push({ t: 'codigo', lang: cerca.info, resto: cerca.resto, texto: corpo.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Comentário HTML em bloco: descartado.
+          if (RX.comentario.test(l)) {
+            while (i < n && linhas[i].indexOf('-->') < 0) i++;
+            i++;
+            continue;
+          }
+
+          // Título ATX.
+          var mh = RX.atx.exec(l);
+          if (mh) {
+            out.push({ t: 'titulo', nivel: mh[1].length, texto: (mh[2] || '').trim(), ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Regra horizontal.
+          if (RX.hr.test(l)) {
+            out.push({ t: 'hr', ini: ini, fim: i + 1 });
+            i++;
+            continue;
+          }
+
+          // Citação.
+          if (RX.citacao.test(l)) {
+            var cit = [];
+            while (i < n) {
+              var lc = linhas[i];
+              if (RX.citacao.test(lc)) { cit.push(lc.replace(RX.citacao, '')); i++; continue; }
+              // Continuação preguiçosa de parágrafo.
+              if (!ehBranca(lc) && cit.length && !ehBranca(cit[cit.length - 1]) && !interrompe(linhas, i)) {
+                cit.push(lc); i++; continue;
+              }
+              break;
+            }
+            out.push({ t: 'citacao', filhos: this.blocos(cit), ini: ini, fim: i });
+            continue;
+          }
+
+          // Lista.
+          var mk = marcador(l);
+          if (mk) {
+            var lista = this.lista(linhas, i);
+            out.push(lista.bloco);
+            i = lista.prox;
+            continue;
+          }
+
+          // Código por recuo.
+          if (recuo(l) >= 4) {
+            var cod = [];
+            while (i < n && (recuo(linhas[i]) >= 4 || ehBranca(linhas[i]))) {
+              cod.push(linhas[i].slice(Math.min(4, recuo(linhas[i]))));
+              i++;
+            }
+            while (cod.length && ehBranca(cod[cod.length - 1])) { cod.pop(); }
+            // Não consome as linhas em branco do fim.
+            i = ini + cod.length;
+            out.push({ t: 'codigo', lang: '', texto: cod.join('\n'), ini: ini, fim: i });
+            continue;
+          }
+
+          // Tabela.
+          if (ehInicioTabela(linhas, i)) {
+            var cab = celulas(linhas[i]);
+            var alin = celulas(linhas[i + 1]).map(function (d) {
+              var e = d.charAt(0) === ':', r = d.charAt(d.length - 1) === ':';
+              return e && r ? 'center' : r ? 'right' : e ? 'left' : '';
+            });
+            i += 2;
+            var linhasT = [];
+            while (i < n && !ehBranca(linhas[i]) && linhas[i].indexOf('|') >= 0 &&
+                   !abreCerca(linhas[i]) && !RX.citacao.test(linhas[i])) {
+              var cs = celulas(linhas[i]);
+              while (cs.length < cab.length) cs.push('');
+              linhasT.push(cs.slice(0, cab.length));
+              i++;
+            }
+            out.push({ t: 'tabela', cab: cab, alin: alin, linhas: linhasT, ini: ini, fim: i });
+            continue;
+          }
+
+          // Parágrafo (ou título setext).
+          var par = [l.replace(/^\s+/, '')];
+          i++;
+          var setext = 0;
+          while (i < n && !ehBranca(linhas[i])) {
+            if (RX.setext1.test(linhas[i])) { setext = 1; i++; break; }
+            if (RX.setext2.test(linhas[i])) { setext = 2; i++; break; }
+            if (interrompe(linhas, i)) break;
+            par.push(linhas[i].replace(/^\s+/, ''));
+            i++;
+          }
+          // Espaços no fim do parágrafo não viram quebra de linha.
+          var txt = par.join('\n').replace(/\s+$/, '');
+          if (setext) out.push({ t: 'titulo', nivel: setext, texto: txt.replace(/\n/g, ' '), ini: ini, fim: i });
+          else out.push({ t: 'par', texto: txt, ini: ini, fim: i });
+        }
+        return out;
+      };
+
+      Analisador.prototype.lista = function (linhas, i) {
+        var n = linhas.length;
+        var primeiro = marcador(linhas[i]);
+        var itens = [];
+        var solta = false;
+        var ini = i;
+
+        while (i < n) {
+          var mk = marcador(linhas[i]);
+          if (!mk || mk.ordenada !== primeiro.ordenada || mk.sinal !== primeiro.sinal) break;
+          if (RX.hr.test(linhas[i])) break;
+          var larg = mk.largura;
+          var conteudo = [mk.conteudo];
+          i++;
+          while (i < n) {
+            var l = linhas[i];
+            if (ehBranca(l)) { conteudo.push(''); i++; continue; }
+            var r = recuo(l);
+            if (r >= larg) { conteudo.push(l.slice(larg)); i++; continue; }
+            var anteriorBranca = ehBranca(conteudo[conteudo.length - 1]);
+            // Tolerância: sublista recuada menos que o exigido (ex.: 2 espaços
+            // sob "1."), comum em texto escrito à mão.
+            var sub = marcador(l);
+            if (sub && r > mk.recuo) { larg = r; conteudo.push(l.slice(r)); i++; continue; }
+            if (anteriorBranca) break;
+            if (!interrompe(linhas, i) && !sub) { conteudo.push(l); i++; continue; }
+            break;
+          }
+          // Linhas em branco no fim do item.
+          var brancas = 0;
+          while (conteudo.length > 1 && ehBranca(conteudo[conteudo.length - 1])) { conteudo.pop(); brancas++; }
+          var proxMk = i < n ? marcador(linhas[i]) : null;
+          var continua = proxMk && proxMk.ordenada === primeiro.ordenada && proxMk.sinal === primeiro.sinal && !RX.hr.test(linhas[i]);
+          if (brancas && continua) solta = true;
+          if (!continua) i -= brancas;
+
+          // Item de tarefa.
+          var tarefa = null;
+          var mt = /^\[([ xX])\][ \t]+/.exec(conteudo[0]);
+          if (mt) { tarefa = mt[1] !== ' '; conteudo[0] = conteudo[0].slice(mt[0].length); }
+
+          var filhos = this.blocos(conteudo);
+          for (var k = 1; k < filhos.length; k++) {
+            if (filhos[k].ini > filhos[k - 1].fim) solta = true;
+          }
+          itens.push({ filhos: filhos, tarefa: tarefa });
+          if (!continua) break;
+        }
+        return {
+          bloco: { t: 'lista', ordenada: primeiro.ordenada, inicio: primeiro.inicio, itens: itens, solta: solta, ini: ini, fim: i },
+          prox: i
+        };
+      };
+
+      /* ------------------------------------------------------------ geração */
+
+      function Gerador(ctx) {
+        this.ctx = ctx;
+        this.inline = new Inline(ctx);
+      }
+
+      Gerador.prototype.blocos = function (blocos, justa) {
+        var out = '';
+        for (var i = 0; i < blocos.length; i++) out += this.bloco(blocos[i], justa);
+        return out;
+      };
+
+      Gerador.prototype.bloco = function (b, justa) {
+        var ctx = this.ctx;
+        switch (b.t) {
+          case 'par':
+            var h = this.inline.render(b.texto);
+            return justa ? h + '\n' : '<p>' + h + '</p>\n';
+          case 'titulo':
+            var conteudo = this.inline.render(b.texto);
+            var texto = textoPuro(conteudo).trim();
+            var base = slug(texto) || 'secao';
+            var id = base;
+            if (ctx.slugs[base] !== undefined) {
+              ctx.slugs[base]++;
+              id = base + '-' + ctx.slugs[base];
+            } else {
+              ctx.slugs[base] = 0;
+            }
+            var idFinal = ctx.prefixoId + id;
+            ctx.titulos.push({ nivel: b.nivel, texto: texto, id: idFinal, ancora: id });
+            return '<h' + b.nivel + ' id="' + escapar(idFinal) + '">' + conteudo + '</h' + b.nivel + '>\n';
+          case 'hr':
+            return '<hr>\n';
+          case 'codigo':
+            // ```c4 <id-da-vista> -> lugar de um diagrama C4, desenhado depois por
+            // c4.js (window.ATM_C4.desenhar). O id só aceita [a-z0-9-]; sem id
+            // válido, o bloco continua sendo código comum.
+            if (String(b.lang || '').toLowerCase() === 'c4') {
+              var vista = String(b.resto || '').toLowerCase().replace(/[^a-z0-9-]/g, '');
+              if (vista) {
+                return '<figure class="c4" data-c4="' + vista + '"><figcaption>Diagrama C4: ' + vista +
+                  '</figcaption></figure>\n';
+              }
+            }
+            var lang = String(b.lang || '').replace(/[^\w+#.\-]/g, '');
+            var cls = lang ? ' class="language-' + escapar(lang) + '"' : '';
+            var dl = lang ? ' data-lang="' + escapar(lang) + '"' : '';
+            return '<pre' + dl + '><code' + cls + '>' + escapar(b.texto) + (b.texto ? '\n' : '') + '</code></pre>\n';
+          case 'citacao':
+            return '<blockquote>\n' + this.blocos(b.filhos, false) + '</blockquote>\n';
+          case 'lista':
+            var tag = b.ordenada ? 'ol' : 'ul';
+            var attrs = b.ordenada && b.inicio !== 1 ? ' start="' + b.inicio + '"' : '';
+            var temTarefa = b.itens.some(function (it) { return it.tarefa !== null; });
+            if (temTarefa) attrs += ' class="tarefas"';
+            var out = '<' + tag + attrs + '>\n';
+            for (var i = 0; i < b.itens.length; i++) {
+              var it = b.itens[i];
+              var caixa = '';
+              if (it.tarefa !== null) {
+                caixa = '<input type="checkbox" disabled' + (it.tarefa ? ' checked' : '') +
+                  ' aria-label="' + (it.tarefa ? 'concluído' : 'pendente') + '"> ';
+              }
+              var corpo = this.blocos(it.filhos, !b.solta).replace(/\n$/, '');
+              out += '<li>' + caixa + corpo + '</li>\n';
+            }
+            return out + '</' + tag + '>\n';
+          case 'tabela':
+            var self = this;
+            function celula(t, v, k) {
+              // Com `alinhamentoPorClasse` (o painel do dono: a CSP recusa style=),
+              // o alinhamento vira a classe `alinha-<left|center|right>`.
+              var a = !b.alin[k] ? '' : ctx.alinhamentoPorClasse
+                ? ' class="alinha-' + b.alin[k] + '"' : ' style="text-align:' + b.alin[k] + '"';
+              var sc = t === 'th' ? ' scope="col"' : '';
+              return '<' + t + sc + a + '>' + self.inline.render(v) + '</' + t + '>';
+            }
+            var html = '<div class="tabela" role="region" tabindex="0" aria-label="Tabela (role horizontalmente se não couber)">\n<table>\n<thead>\n<tr>';
+            html += b.cab.map(function (v, k) { return celula('th', v, k); }).join('');
+            html += '</tr>\n</thead>\n';
+            if (b.linhas.length) {
+              html += '<tbody>\n';
+              for (var r = 0; r < b.linhas.length; r++) {
+                html += '<tr>' + b.linhas[r].map(function (v, k) { return celula('td', v, k); }).join('') + '</tr>\n';
+              }
+              html += '</tbody>\n';
+            }
+            return html + '</table>\n</div>\n';
+        }
+        return '';
+      };
+
+      /* --------------------------------------------------------------- API */
+
+      function preparar(md) {
+        var texto = String(md == null ? '' : md)
+          .replace(/^/, '')
+          .replace(/\r\n?/g, '\n')
+          .replace(/\u0000/g, '�');
+        var linhas = texto.split('\n').map(function (l) {
+          // Tabulação no recuo vira 4 espaços.
+          return l.replace(/^\t+/, function (t) { return new Array(t.length * 4 + 1).join(' '); });
+        });
+        // Definições de referência ([rótulo]: url "título"), fora de código.
+        var refs = {};
+        var restantes = [];
+        var cerca = null;
+        for (var i = 0; i < linhas.length; i++) {
+          var l = linhas[i];
+          if (cerca) {
+            if (new RegExp('^ {0,3}' + cerca.charAt(0) + '{' + cerca.length + ',}[ \\t]*$').test(l)) cerca = null;
+            restantes.push(l);
+            continue;
+          }
+          var c = abreCerca(l);
+          if (c) { cerca = c.marca; restantes.push(l); continue; }
+          var m = RX.ref.exec(l);
+          if (m && !/^\^/.test(m[1])) {
+            var k = normRotulo(m[1]);
+            if (!refs[k]) refs[k] = { dest: m[2], titulo: m[3] || m[4] || m[5] || '' };
+            continue;
+          }
+          restantes.push(l);
+        }
+        return { linhas: restantes, refs: refs };
+      }
+
+      function render(md, opcoes) {
+        opcoes = opcoes || {};
+        var prep = preparar(md);
+        var ctx = {
+          refs: prep.refs,
+          resolverLink: opcoes.resolverLink || null,
+          resolverImagem: opcoes.resolverImagem || null,
+          prefixoId: opcoes.prefixoId || '',
+          alinhamentoPorClasse: !!opcoes.alinhamentoPorClasse,
+          slugs: {},
+          titulos: [],
+          dentroDeLink: false
+        };
+        var blocos = new Analisador(ctx).blocos(prep.linhas);
+        var html = new Gerador(ctx).blocos(blocos, false);
+        return { html: html, titulos: ctx.titulos };
+      }
+
+      return {
+        render: render,
+        escapar: escapar,
+        slug: slug,
+        semAcento: semAcento,
+        urlSegura: urlSegura,
+        textoPuro: textoPuro
+      };
+    });
+
   painel.css: |
     /* O painel do dono, na identidade do escolinha: papel, azul-marinho e laranja,
      * titulos em Poppins, e as cores de plano iguais as do painel do comprador.
@@ -3490,6 +5536,153 @@ data:
     .catalogo-acoes { display: flex; gap: 14px; align-items: center; margin: 4px 0 24px; }
     .catalogo-acoes .erro { color: var(--perigo); }
 
+    /* ── informacoes: o Documento de Governanca dentro do painel ─────────────── */
+    .sr-only {
+      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+    }
+    .topo .info { display: inline-flex; align-items: center; gap: 6px; }
+    .topo .info svg { flex: none; }
+    .topo .info[aria-expanded="true"] { border-color: var(--orange); color: var(--orange-600); background: var(--orange-claro); }
+    .topo .acao:focus-visible, .topo .sair:focus-visible, .sino:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
+
+    /* O topo e fixo: ao abrir, a cabeca da documentacao para logo abaixo dele. */
+    .documentacao { scroll-margin-top: 84px; }
+    .doc-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
+    .doc-cabeca-texto { flex: 1 1 260px; min-width: 0; }
+    .doc-cabeca h1 { margin: 0; font-size: 22px; }
+    .doc-cabeca h1:focus { outline: none; }
+    .doc-cabeca .secao { margin: 0 0 2px; }
+    .doc-busca { flex: 1 1 260px; max-width: 380px; }
+    .doc-busca input {
+      width: 100%; font: inherit; font-size: 14px; padding: 9px 12px; border: 1px solid var(--line);
+      border-radius: 10px; background: var(--branco); color: var(--navy);
+    }
+    .doc-busca input:focus { outline: 2px solid var(--orange); border-color: transparent; }
+    .doc-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
+    .doc-acoes .btn { margin-top: 0; font-size: 14px; padding: 8px 14px; }
+    .doc-estado { color: var(--muted); }
+    .doc-estado.erro { color: var(--perigo); margin-top: 0; font-size: 15px; }
+
+    .doc-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
+    .doc-layout .cartao { margin-bottom: 0; }
+    .doc-menu { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px 12px; }
+    .doc-arvore, .doc-arvore ul { list-style: none; margin: 0; padding: 0; }
+    .doc-arvore a {
+      display: block; padding: 5px 10px; border-radius: 8px; color: var(--navy);
+      text-decoration: none; font-size: 13.5px; line-height: 1.35;
+    }
+    .doc-arvore a:hover { background: var(--paper); color: var(--orange-600); }
+    .doc-arvore a[aria-current="page"] { background: var(--orange-claro); font-weight: 700; box-shadow: inset 3px 0 0 var(--orange); }
+    .doc-arvore-secao { margin-top: 12px; }
+    .doc-arvore-nome { display: block; padding: 0 10px 4px; font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; font-size: 13px; }
+    .doc-arvore-secao .ajuda { padding: 0 10px; }
+    .doc-num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--orange-600); }
+
+    .doc-principal { min-width: 0; }
+    .doc-trilha ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--muted); }
+    .doc-trilha li + li::before { content: "/"; margin: 0 8px; color: var(--line); }
+    .doc-trilha a { color: var(--muted); text-decoration: none; }
+    .doc-trilha a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-trilha [aria-current] { color: var(--navy); font-weight: 600; }
+
+    .doc-sumario { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; padding-left: 14px; border-left: 1px solid var(--line); }
+    .doc-sumario h2 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
+    .doc-sumario ol { list-style: none; margin: 0; padding: 0; }
+    .doc-sumario a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
+    .doc-sumario .nivel-3 a { padding-left: 12px; font-size: 12.5px; }
+    .doc-sumario a:hover { color: var(--orange-600); }
+
+    .doc-paginacao { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
+    .doc-paginacao a {
+      display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--line);
+      border-radius: 14px; background: var(--branco); color: var(--navy); text-decoration: none;
+    }
+    .doc-paginacao a:hover { border-color: var(--orange); }
+    .doc-paginacao .doc-prox { grid-column: 2; text-align: right; }
+    .doc-cartoes { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
+    .doc-cartoes .bloco { border-top-color: var(--orange); }
+    .doc-cartoes a, .doc-cartoes b { font-family: 'Poppins', 'Barlow', system-ui, sans-serif; font-weight: 600; color: var(--navy); text-decoration: none; }
+    .doc-cartoes a:hover { color: var(--orange-600); text-decoration: underline; }
+    .doc-resultados { list-style: none; padding: 0; }
+    .doc-texto .doc-cartoes, .doc-texto .doc-resultados { padding-left: 0; }
+    .doc-resultados li { padding: 12px 0; border-bottom: 1px solid var(--line); }
+    .doc-resultados a { font-weight: 700; }
+
+    /* O texto renderizado do Markdown. */
+    .doc-texto { overflow-wrap: break-word; line-height: 1.65; }
+    .doc-texto:focus { outline: none; }
+    .doc-texto > .secao:first-child { margin-top: 0; }
+    .doc-texto h1 { font-size: 26px; margin: 0 0 16px; line-height: 1.25; }
+    .doc-texto h2 { font-size: 20px; margin: 1.8em 0 .6em; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
+    .doc-texto h3 { font-size: 16.5px; margin: 1.5em 0 .5em; }
+    .doc-texto h4, .doc-texto h5, .doc-texto h6 { font-size: 15px; margin: 1.3em 0 .4em; }
+    .doc-texto h1:focus, .doc-texto h2:focus, .doc-texto h3:focus { outline: none; }
+    .doc-texto h2, .doc-texto h3 { scroll-margin-top: 80px; }
+    .doc-texto ul, .doc-texto ol { padding-left: 1.4em; }
+    .doc-texto ul li::marker { color: var(--orange); }
+    .doc-texto ul.tarefas { list-style: none; padding-left: .2em; }
+    .doc-texto blockquote { margin: 0 0 1em; padding: .6em 1em; border-left: 4px solid var(--orange); background: var(--orange-claro); border-radius: 0 10px 10px 0; }
+    .doc-texto code { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: .86em; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: .1em .35em; }
+    .doc-texto pre { overflow-x: auto; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; line-height: 1.5; }
+    .doc-texto pre code { background: none; border: 0; padding: 0; white-space: pre; }
+    .doc-texto .tabela { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1em; }
+    .doc-texto table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
+    .doc-texto th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); background: #fbfaf8; border-bottom: 1px solid var(--line); padding: 8px 10px; }
+    .doc-texto td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
+    .doc-texto tbody tr:last-child td { border-bottom: 0; }
+    .doc-texto .alinha-left { text-align: left; }
+    .doc-texto .alinha-center { text-align: center; }
+    .doc-texto .alinha-right { text-align: right; }
+    .doc-texto hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
+    .doc-texto a.externo::after { content: "\2197"; font-size: .8em; margin-left: 2px; }
+    .doc-arquivo { font-family: 'IBM Plex Mono', monospace; font-size: .9em; border-bottom: 1px dotted var(--muted); cursor: help; }
+    .doc-origem { margin-top: 2em; padding-top: 1em; border-top: 1px dashed var(--line); }
+
+    /* Diagrama C4 (o desenho vem do painel-c4.js; sem ele, fica so a legenda).
+       O SVG le as cores destas variaveis. */
+    .c4 {
+      --c4-pessoa: var(--navy); --c4-sistema: var(--azul); --c4-externo: #8A94A0;
+      --c4-conteiner: #2F7BA3; --c4-componente: #5FA3C7; --c4-texto: var(--branco);
+      --c4-linha: var(--muted); --c4-fundo: var(--branco); --c4-borda: var(--line); --c4-destaque: var(--orange);
+      margin: 0 0 1.2em; padding: 14px; background: var(--c4-fundo); border: 1px solid var(--c4-borda); border-radius: 14px; overflow-x: auto;
+    }
+    .c4 svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
+    .c4 figcaption { font-size: 12.5px; color: var(--muted); margin-top: 8px; text-align: center; }
+
+    @media (max-width: 1180px) {
+      .doc-layout { grid-template-columns: 240px minmax(0, 1fr); }
+      .doc-sumario { display: none; }
+    }
+    @media (max-width: 760px) {
+      .topo .info { margin-left: auto; }
+      .topo { gap: 8px; }
+      .topo .logo { height: 26px; }
+      .topo .acao, .topo .sair { padding: 7px 10px; }
+      .documentacao { scroll-margin-top: 120px; }
+      .topo .info:not(.oculto) ~ .acao { margin-left: 0; }
+      .topo .info span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+      .doc-layout { grid-template-columns: 1fr; }
+      .doc-menu { position: static; max-height: 40vh; }
+      .doc-busca { max-width: none; }
+      .doc-paginacao { grid-template-columns: 1fr; }
+      .doc-paginacao .doc-prox { grid-column: 1; }
+    }
+
+    /* "Imprimir pagina": so o texto aberto. */
+    @media print {
+      body.doc-aberta { background: #fff; }
+      body.doc-aberta .topo, body.doc-aberta .doc-cabeca, body.doc-aberta .doc-estado, body.doc-aberta .doc-menu,
+      body.doc-aberta .doc-sumario, body.doc-aberta .doc-trilha, body.doc-aberta .doc-paginacao,
+      body.doc-aberta #conteudo, body.doc-aberta .ficha { display: none !important; }
+      body.doc-aberta .wrap { max-width: none; padding: 0; }
+      body.doc-aberta .doc-layout { display: block; }
+      body.doc-aberta .doc-texto { border: 0; box-shadow: none; padding: 0; }
+      .doc-texto pre, .doc-texto pre code { white-space: pre-wrap; }
+      .doc-texto h2, .doc-texto h3 { break-after: avoid; }
+      .doc-texto pre, .doc-texto tr, .c4 { break-inside: avoid; }
+    }
+
   painel.html: |
     <!DOCTYPE html>
     <html lang="pt-BR">
@@ -3501,10 +5694,13 @@ data:
     <!--
       O PAINEL DO DONO.
 
-      Quem barra e o `x-atm-admin-token`, conferido no servidor em tempo constante.
-      Esta pagina so o guarda em `sessionStorage`: fechar a aba esquece. Nao e
-      `localStorage` de proposito — um token de administracao que sobrevive ao
-      fechamento da aba fica numa maquina que ninguem lembra que o tem.
+      Desde 07/10/2026 a entrada e o LOGIN do Keycloak da plataforma (realm
+      `athleticmap`, client `spa`, code + PKCE), e so quem tem o papel `atm_admin`
+      passa — o 2FA desse papel e o Keycloak quem cobra. O token de acesso vive so
+      em memoria (ver o cabecalho de `painel.js`).
+
+      Desde 08/10/2026 nao ha mais plano B nesta tela: o token de administracao
+      (`x-atm-admin-token`) so existe no servidor, para scripts e CronJobs.
 
       NAO HA ESTILO EMBUTIDO: a CSP da plataforma recusa `style=` e `<style>`, e ha
       teste guardando isso na landing page. O visual vive em `painel.css`; as
@@ -3512,9 +5708,17 @@ data:
 
       O `?v=` NOS ARQUIVOS NAO E ENFEITE: o nginx serve js e css com
       `Cache-Control: immutable` por um ano. Suba o numero a cada publicacao.
+
+      "INFORMACOES" (o Documento de Governanca, 07/10/2026): o CONTEUDO nao mora
+      aqui. Ele tem detalhe de infraestrutura e vem da captacao, com o mesmo login
+      do painel (GET /api/plataforma/painel/documentacao), so quando o dono clica.
+      Daqui so saem o renderizador (`painel-markdown.js`, copia de
+      governanca/assets/markdown.js) e o desenho C4 (`painel-c4.js`, carregado na
+      primeira abertura; sem ele o diagrama fica so com a legenda).
     -->
     <link rel="stylesheet" href="/publico/fontes/fontes.css">
-    <link rel="stylesheet" href="/publico/painel.css?v=2.86">
+    <link rel="stylesheet" href="/publico/painel.css?v=2.89">
+    <link rel="stylesheet" id="atm-c4-estilo" href="/publico/painel-c4.css?v=1">
     </head>
     <body>
 
@@ -3534,26 +5738,34 @@ data:
           <p id="sinoIndisponivel" class="ajuda oculto">Não consegui falar com o monitoramento agora.</p>
         </div>
       </div>
+      <button type="button" id="informacoes" class="acao info oculto" aria-controls="documentacao" aria-expanded="false"
+              title="Documento de Governança: negócio, arquitetura, dados e operação">
+        <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24" width="16" height="16"><circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.5v.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        <span>Informações</span>
+      </button>
       <button type="button" id="atualizar" class="acao oculto">Atualizar</button>
       <button type="button" id="sair" class="sair oculto">Sair</button>
     </header>
 
     <main class="wrap">
 
-      <!-- A porta. Aparece quando nao ha token guardado, e some depois. -->
+      <!-- A porta. Aparece quando nao ha sessao, e some depois. -->
       <section id="porta" class="cartao porta">
         <h1>Entrar</h1>
         <p class="ajuda">
-          Cole o token de administracao. Ele fica guardado ate voce fechar a aba.
+          Entre com a sua conta de administrador da plataforma.
         </p>
-        <form id="formEntrar">
-          <label for="token">Token</label>
-          <input id="token" type="password" autocomplete="off" spellcheck="false" required>
-          <button type="submit" class="btn">Entrar</button>
-        </form>
+        <button type="button" id="entrarLogin" class="btn">Entrar</button>
         <p id="erroEntrar" class="erro oculto"></p>
       </section>
 
+      <!-- Logou, mas a conta nao tem `atm_admin`. -->
+      <section id="negado" class="cartao porta oculto">
+        <h1>Sem acesso</h1>
+        <p id="negadoTexto">Esta conta não é administradora da plataforma.</p>
+        <button type="button" id="sairNegado" class="btn claro">Sair</button>
+      </section>
+
       <section id="carregando" class="cartao oculto"><p class="ajuda">Juntando os dados do banco, do Asaas e do login&hellip;</p></section>
 
       <section id="conteudo" class="oculto">
@@ -3746,6 +5958,39 @@ data:
 
       </section>
 
+      <!-- INFORMACOES: o Documento de Governanca, dentro do painel. O conteudo vem
+           da captacao (com o login), so quando o dono clica no botao do topo. -->
+      <section id="documentacao" class="documentacao oculto" aria-labelledby="docTitulo">
+        <div class="cartao doc-cabeca">
+          <div class="doc-cabeca-texto">
+            <p class="secao">Informações</p>
+            <h1 id="docTitulo" tabindex="-1">Documento de Governança</h1>
+            <p id="docGerado" class="ajuda"></p>
+          </div>
+          <form id="docFormBusca" class="doc-busca" role="search" autocomplete="off">
+            <label for="docBusca" class="sr-only">Buscar na documentação</label>
+            <input id="docBusca" type="search" placeholder="Buscar na documentação&hellip;" enterkeyhint="search">
+          </form>
+          <div class="doc-acoes">
+            <button type="button" id="docImprimir" class="btn claro">Imprimir página</button>
+            <button type="button" id="docFechar" class="btn claro">Voltar ao painel</button>
+          </div>
+        </div>
+        <p id="docEstado" class="cartao doc-estado" role="status"></p>
+        <div id="docCorpo" class="doc-layout oculto">
+          <nav id="docMenu" class="cartao doc-menu" aria-label="Seções da documentação"></nav>
+          <div class="doc-principal">
+            <nav class="doc-trilha" aria-label="Você está em"><ol id="docTrilha"></ol></nav>
+            <article id="docPagina" class="cartao doc-texto" tabindex="-1"></article>
+            <nav id="docPaginacao" class="doc-paginacao" aria-label="Páginas anterior e próxima"></nav>
+          </div>
+          <aside id="docSumario" class="doc-sumario oculto" aria-labelledby="docSumarioTitulo">
+            <h2 id="docSumarioTitulo">Nesta página</h2>
+            <ol id="docSumarioLista"></ol>
+          </aside>
+        </div>
+      </section>
+
       <!-- A FICHA de um cliente. Abre por cima, e fecha com Esc ou no X. -->
       <div id="ficha" class="ficha oculto" role="dialog" aria-modal="true" aria-labelledby="fichaTitulo">
         <div class="ficha-caixa">
@@ -3756,22 +6001,41 @@ data:
 
     </main>
 
-    <script src="/publico/painel.js?v=2.89"></script>
+    <script src="/publico/painel-markdown.js?v=1"></script>
+    <script src="/publico/painel.js?v=2.93"></script>
     </body>
     </html>
 
   painel.js: |
     /* O painel do dono.
      *
-     * ── O TOKEN ──────────────────────────────────────────────────────────────────
+     * ── A ENTRADA: LOGIN DO KEYCLOAK DA PLATAFORMA (07/10/2026) ─────────────────
      *
-     * Fica em `sessionStorage`, e nao em `localStorage`: fechar a aba esquece. Um
-     * token de administracao que sobrevive ao fechamento fica numa maquina que
-     * ninguem lembra que o tem.
+     * Realm `athleticmap` de auth-plataforma, client publico `spa`, Authorization
+     * Code com PKCE (S256) e `state` contra CSRF — o mesmo desenho do
+     * `minha-conta.js`, escrito a mao pelo mesmo motivo de la e por mais um: o
+     * keycloak-js 25 guarda o `code_verifier` do login em `localStorage`
+     * (`kc-callback-*`), sem opcao de trocar, e esta tela nao poe nada la.
      *
-     * Ele NUNCA e escrito na URL. Query string vai para historico do navegador,
-     * para log de servidor e para o `Referer` de qualquer link clicado a partir
-     * daqui — tres lugares onde ninguem procura quando o segredo vaza.
+     * So entra quem tem o papel de realm `atm_admin`; o 2FA desse papel e o
+     * Keycloak quem cobra. Ler o papel aqui e so para a tela nao abrir uma porta
+     * que o servidor vai fechar — quem barra e a captacao, conferindo o JWT.
+     *
+     * O token de acesso e o de renovacao vivem SO EM MEMORIA. Em `sessionStorage`
+     * ficam apenas o `code_verifier`/`state` enquanto o login esta em andamento
+     * (apagados na volta) e uma marca sem segredo de que esta aba tinha sessao —
+     * com ela, recarregar a pagina e um ida e volta invisivel ao Keycloak.
+     *
+     * ── O TOKEN DE ADMINISTRACAO NAO ENTRA AQUI ─────────────────────────────────
+     *
+     * Desde 08/10/2026 (decisao do dono) esta tela so aceita o login do Keycloak:
+     * o antigo plano B — o `x-atm-admin-token` colado a mao — saiu. O token de
+     * administracao continua existindo, mas so no servidor (scripts e CronJobs).
+     *
+     * Nem o token do login nem o de renovacao sao escritos na URL nem no console. Query string vai para
+     * historico do navegador, para log de servidor e para o `Referer` de qualquer
+     * link clicado a partir daqui — tres lugares onde ninguem procura quando o
+     * segredo vaza. O `?code=` da volta do login sai da URL antes de virar token.
      *
      * ── TUDO QUE VEM DO SERVIDOR E ESCAPADO ─────────────────────────────────────
      *
@@ -3794,12 +6058,24 @@ data:
       var API_TERMO = "/api/plataforma/painel/termo-de-dados";
       var API_CATALOGO = "/api/plataforma/painel/catalogo";
       var API_TERMOS_DE_USO = "/api/plataforma/painel/termos-de-uso";
-      var CHAVE = "atm.painel.token";
       var INTERVALO_SINO_MS = 60000;
 
+      var OIDC = {
+        // Endereco PUBLICO do realm. Nao e segredo — e o que o navegador visita
+        // para entrar, e tem de bater com o `connect-src` do bloco
+        // `location = /painel-do-dono` no nginx.conf.template.
+        EMISSOR: "https://auth-plataforma.athleticmap.com/realms/athleticmap",
+        CLIENTE: "spa",
+        PAPEL: "atm_admin"
+      };
+      var CHAVE_LOGIN = "atm.painel.login";     // verifier + state, so durante o login
+      var CHAVE_SESSAO = "atm.painel.sessao";   // "1": esta aba tinha sessao (sem segredo)
+      var FOLGA_RENOVAR_S = 30;                 // renova 30 s antes de o token vencer
+
       var $ = function (id) { return document.getElementById(id); };
-      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando");
-      var formEntrar = $("formEntrar"), campoToken = $("token"), erroEntrar = $("erroEntrar");
+      var porta = $("porta"), conteudo = $("conteudo"), carregando = $("carregando"), negado = $("negado");
+      var erroEntrar = $("erroEntrar");
+      var botaoEntrarLogin = $("entrarLogin"), botaoSairNegado = $("sairNegado");
       var botaoSair = $("sair"), botaoAtualizar = $("atualizar"), apurado = $("apurado");
       var corpo = $("linhas"), vazio = $("vazio");
       var sinoCaixa = $("sinoCaixa"), sino = $("sino"), sinoContagem = $("sinoContagem"),
@@ -3807,19 +6083,221 @@ data:
           sinoVazio = $("sinoVazio"), sinoIndisponivel = $("sinoIndisponivel");
 
       var visao = null;
-      var tokenAtual = null;
       var sinoIntervalo = null;
 
-      /* ── token ──────────────────────────────────────────────────────────────── */
+      /* A credencial da aba, SO EM MEMORIA:
+           { tipo: "login", acesso, renovacao }  — o JWT do Keycloak (Bearer) */
+      var cred = null;
+      var renovando = null, relogioRenovar = null;
 
-      function guardado() { try { return sessionStorage.getItem(CHAVE); } catch (e) { return null; } }
-      function guardar(t) { try { sessionStorage.setItem(CHAVE, t); } catch (e) { /* aba privada */ } }
-      function esquecer() { try { sessionStorage.removeItem(CHAVE); } catch (e) { /* idem */ } }
+      /* A UNICA saida da pagina passa por aqui (login e logout).
+         No navegador e `location.assign`. Existe como funcao porque o jsdom torna
+         `location` imutavel — sem esta costura nenhum teste ve PARA ONDE o login
+         manda. Mesma costura do minha-conta.js. */
+      function navegar(url) {
+        if (typeof window.__atmNavegar === "function") { window.__atmNavegar(url); return; }
+        location.assign(url);
+      }
 
-      function buscar(token, fresco) {
-        return fetch(API + (fresco ? "?fresco=true" : ""), { headers: { "x-atm-admin-token": token } })
+      /* ── login: PKCE ────────────────────────────────────────────────────────── */
+
+      function aleatorio(tamanho) {
+        var bytes = new Uint8Array(tamanho);
+        crypto.getRandomValues(bytes);
+        return base64url(bytes);
+      }
+      function base64url(bytes) {
+        var s = "";
+        for (var i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
+        return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+      }
+      function desafio(verifier) {
+        return crypto.subtle.digest("SHA-256", new TextEncoder().encode(verifier))
+          .then(function (buf) { return base64url(new Uint8Array(buf)); });
+      }
+      function retorno() { return location.origin + "/painel-do-dono"; }
+
+      function lembrarSessao() { try { sessionStorage.setItem(CHAVE_SESSAO, "1"); } catch (e) { /* idem */ } }
+      function esquecerSessao() { try { sessionStorage.removeItem(CHAVE_SESSAO); } catch (e) { /* idem */ } }
+      function tinhaSessao() { try { return sessionStorage.getItem(CHAVE_SESSAO) === "1"; } catch (e) { return false; } }
+
+      function irAoLogin() {
+        var verifier = aleatorio(64), state = aleatorio(24);
+        try { sessionStorage.setItem(CHAVE_LOGIN, JSON.stringify({ v: verifier, s: state })); } catch (e) { /* idem */ }
+        return desafio(verifier).then(function (challenge) {
+          navegar(OIDC.EMISSOR + "/protocol/openid-connect/auth?" + new URLSearchParams({
+            client_id: OIDC.CLIENTE,
+            response_type: "code",
+            scope: "openid",
+            redirect_uri: retorno(),
+            state: state,
+            code_challenge: challenge,
+            code_challenge_method: "S256"
+          }).toString());
+        });
+      }
+
+      function pedirTokens(campos) {
+        return fetch(OIDC.EMISSOR + "/protocol/openid-connect/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: new URLSearchParams(campos).toString()
+        }).then(function (r) {
+          if (!r.ok) throw new Error("token " + r.status);
+          return r.json();
+        });
+      }
+
+      function usarTokens(d) {
+        if (!d || !d.access_token) throw new Error("resposta sem token");
+        cred = { tipo: "login", acesso: d.access_token,
+                 renovacao: d.refresh_token || (cred && cred.renovacao) || null,
+                 // So para o "Sair" (id_token_hint): sem ele o Keycloak pede confirmacao numa tela fora do padrao.
+                 identidade: d.id_token || (cred && cred.identidade) || null };
+        agendarRenovacao(Number(d.expires_in));
+      }
+
+      function pararRenovacao() {
+        if (relogioRenovar) { clearTimeout(relogioRenovar); relogioRenovar = null; }
+      }
+      function agendarRenovacao(segundos) {
+        pararRenovacao();
+        if (!isFinite(segundos) || segundos <= 0) return;
+        var ms = Math.max(5, segundos - FOLGA_RENOVAR_S) * 1000;
+        relogioRenovar = setTimeout(function () { renovar().catch(sessaoPerdida); }, ms);
+      }
+
+      /* Uma renovacao por vez: o sino, a visao e uma aba podem dar 401 juntos. */
+      function renovar() {
+        if (renovando) return renovando;
+        if (!cred || cred.tipo !== "login" || !cred.renovacao) return Promise.reject(new Error("sem renovacao"));
+        renovando = pedirTokens({ grant_type: "refresh_token", client_id: OIDC.CLIENTE, refresh_token: cred.renovacao })
+          .then(function (d) { renovando = null; usarTokens(d); },
+                function (e) { renovando = null; throw e; });
+        return renovando;
+      }
+
+      /* So o conteudo do JWT, sem conferir assinatura: e para a TELA decidir o que
+         mostrar. Quem confere e o servidor. */
+      function conteudoDoJwt(jwt) {
+        try {
+          var p = String(jwt).split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
+          while (p.length % 4) p += "=";
+          return JSON.parse(atob(p)) || {};
+        } catch (e) { return {}; }
+      }
+      function ehAdmin(jwt) {
+        var ra = conteudoDoJwt(jwt).realm_access;
+        return !!(ra && ra.roles && ra.roles.indexOf(OIDC.PAPEL) >= 0);
+      }
+
+      /* A volta do Keycloak: `?code=&state=` (ou `?error=`). */
+      function voltarDoLogin(q) {
+        // O codigo sai da URL ANTES de qualquer outra coisa: e de uso unico, mas
+        // ficaria no historico e no `Referer` do proximo pedido.
+        history.replaceState({}, "", location.pathname);
+        var pendente = null;
+        try {
+          pendente = JSON.parse(sessionStorage.getItem(CHAVE_LOGIN) || "null");
+          sessionStorage.removeItem(CHAVE_LOGIN);          // o verifier nao se reusa
+        } catch (e) { pendente = null; }
+
+        if (q.get("error")) {
+          esquecerSessao();
+          naPorta("O login não foi concluído.");
+          return Promise.resolve();
+        }
+        // Sem o verifier, ou com `state` de outro login, o codigo NAO vira token:
+        // e o caso de quem cola a URL de volta noutra aba — ou de quem foi mandado
+        // para ca com um codigo que nao pediu.
+        if (!pendente || !pendente.v || !pendente.s || pendente.s !== q.get("state")) {
+          esquecerSessao();
+          naPorta("O login expirou ou não começou nesta aba. Entre de novo.");
+          return Promise.resolve();
+        }
+        mostrar(carregando);
+        return pedirTokens({
+          grant_type: "authorization_code",
+          client_id: OIDC.CLIENTE,
+          code: q.get("code"),
+          redirect_uri: retorno(),
+          code_verifier: pendente.v
+        }).then(function (d) {
+          usarTokens(d);
+          return entrarComLogin();
+        }).catch(function () {
+          cred = null;
+          pararRenovacao();
+          esquecerSessao();
+          naPorta("Não consegui concluir o login. Tente de novo.");
+        });
+      }
+
+      /* A renovacao falhou (sessao do Keycloak acabou): de volta a porta. */
+      function sessaoPerdida() {
+        if (!cred || cred.tipo !== "login") return;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        desligarSino();
+        fecharFicha();
+        naPorta("A sessão expirou. Entre de novo.");
+      }
+
+      /* Saida por POST (07/10/2026): com o `id_token_hint` o Keycloak encerra a sessao sem a tela de
+         confirmacao. Vai no CORPO de um formulario, e nao na URL, para o token nao ficar no historico do
+         navegador nem em log de acesso. Exige `form-action` com o emissor na CSP do /painel-do-dono. */
+      function sairPorFormulario(identidade) {
+        if (typeof window.__atmSairPorFormulario === "function") { window.__atmSairPorFormulario(identidade); return; }
+        var f = document.createElement("form");
+        f.method = "POST";
+        f.action = OIDC.EMISSOR + "/protocol/openid-connect/logout";
+        var campos = { client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno(), id_token_hint: identidade };
+        Object.keys(campos).forEach(function (k) {
+          var i = document.createElement("input");
+          i.type = "hidden"; i.name = k; i.value = campos[k];
+          f.appendChild(i);
+        });
+        document.body.appendChild(f);
+        f.submit();
+      }
+
+      function sairDoLogin() {
+        var identidade = cred && cred.identidade;
+        cred = null;
+        pararRenovacao();
+        esquecerSessao();
+        // Encerra tambem a sessao NO KEYCLOAK: limpar so daqui deixaria o proximo
+        // "Entrar" passar direto, e quem clicou em sair esperava o contrario.
+        if (identidade) { sairPorFormulario(identidade); return; }
+        // Sem id_token (nao deveria acontecer com o login): o Keycloak pede confirmacao.
+        navegar(OIDC.EMISSOR + "/protocol/openid-connect/logout?" + new URLSearchParams({
+          client_id: OIDC.CLIENTE, post_logout_redirect_uri: retorno() }).toString());
+      }
+
+      /* ── todo pedido a API passa por aqui ─────────────────────────────────────
+       * Poe a credencial no cabecalho (o Bearer do login).
+       * Com o login, um 401 tenta renovar UMA vez e repete o pedido; se a
+       * renovacao falhar, a sessao acabou e a tela volta para "Entrar". */
+      function pedir(url, init) {
+        init = init || {};
+        var tentar = function () {
+          var h = {};
+          Object.keys(init.headers || {}).forEach(function (k) { h[k] = init.headers[k]; });
+          if (cred && cred.tipo === "login") h.Authorization = "Bearer " + cred.acesso;
+          return fetch(url, { method: init.method, headers: h, body: init.body });
+        };
+        return tentar().then(function (r) {
+          if (r.status !== 401 || !cred || cred.tipo !== "login") return r;
+          return renovar().then(tentar, function () { sessaoPerdida(); return r; });
+        });
+      }
+
+      function buscar(fresco) {
+        return pedir(API + (fresco ? "?fresco=true" : ""))
           .then(function (r) {
             if (r.status === 401) { var e = new Error("token"); e.token = true; throw e; }
+            if (r.status === 403) { var p = new Error("papel"); p.papel = true; throw p; }
             if (!r.ok) throw new Error("HTTP " + r.status);
             return r.json();
           });
@@ -3832,8 +6310,8 @@ data:
        * se o servidor nao responder, o sino so fica "sem dado" — nao pode
        * derrubar o painel inteiro por causa de um widget auxiliar.
        */
-      function buscarAlertasInfra(token) {
-        return fetch(API_ALERTAS, { headers: { "x-atm-admin-token": token } })
+      function buscarAlertasInfra() {
+        return pedir(API_ALERTAS)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .catch(function () { return null; }); // null = "sem dado", diferente de "zero alertas"
       }
@@ -3876,15 +6354,16 @@ data:
         });
       }
 
-      function atualizarSino(token) {
-        buscarAlertasInfra(token).then(pintarSino);
+      function atualizarSino() {
+        if (!cred) return;
+        buscarAlertasInfra().then(pintarSino);
       }
 
-      function ligarSino(token) {
+      function ligarSino() {
         sinoCaixa.classList.remove("oculto");
-        atualizarSino(token);
+        atualizarSino();
         if (sinoIntervalo) clearInterval(sinoIntervalo);
-        sinoIntervalo = setInterval(function () { atualizarSino(token); }, INTERVALO_SINO_MS);
+        sinoIntervalo = setInterval(atualizarSino, INTERVALO_SINO_MS);
       }
 
       function desligarSino() {
@@ -4490,9 +6969,9 @@ data:
       }
 
       function pedirCatalogo(metodo, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
+        return pedir(API_CATALOGO, { method: metodo, headers: h, body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
             return r.json().catch(function () { return {}; }).then(function (d) {
@@ -4502,7 +6981,7 @@ data:
       }
 
       function carregarCatalogo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirCatalogo("GET").then(function (c) { catalogo = c || {}; pintarCatalogo(); })
           .catch(function (e) {
             $("catalogoPacotes").innerHTML = '<p class="ajuda">Não consegui carregar: ' + esc(e.message) + "</p>";
@@ -4531,9 +7010,9 @@ data:
       /* ── termo de dados ─────────────────────────────────────────────────────── */
 
       function pedirTermo(metodo, caminho, corpo) {
-        var h = { "x-atm-admin-token": tokenAtual };
+        var h = {};
         if (corpo) h["Content-Type"] = "application/json";
-        return fetch(API_TERMO + (caminho || ""), { method: metodo, headers: h,
+        return pedir(API_TERMO + (caminho || ""), { method: metodo, headers: h,
                                                     body: corpo ? JSON.stringify(corpo) : undefined })
           .then(function (r) {
             if (r.ok) return r.json();
@@ -4562,7 +7041,7 @@ data:
       }
 
       function carregarTermo() {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         return pedirTermo("GET").then(function (lista) {
           $("termoVersoes").innerHTML = (lista || []).map(versaoDoTermo).join("")
             || '<p class="ajuda">Nenhuma versão.</p>';
@@ -4630,8 +7109,8 @@ data:
       }
 
       function carregarTermosDeUso() {
-        if (!tokenAtual) return Promise.resolve();
-        return fetch(API_TERMOS_DE_USO, { headers: { "x-atm-admin-token": tokenAtual } })
+        if (!cred) return Promise.resolve();
+        return pedir(API_TERMOS_DE_USO)
           .then(function (r) { if (!r.ok) throw new Error("HTTP " + r.status); return r.json(); })
           .then(function (d) {
             d = d || {};
@@ -4670,56 +7149,82 @@ data:
       }
 
       function mostrar(qual) {
-        [porta, carregando, conteudo].forEach(function (s) { s.classList.add("oculto"); });
+        [porta, carregando, conteudo, negado].forEach(function (s) { s.classList.add("oculto"); });
         qual.classList.remove("oculto");
         var dentro = qual === conteudo;
-        [botaoSair, botaoAtualizar, apurado].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        [botaoSair, botaoAtualizar, apurado, botaoInformacoes].forEach(function (b) { b.classList.toggle("oculto", !dentro); });
+        // "Informacoes" aberta continua aberta depois do "Atualizar"; fora do painel (porta, sem acesso), fecha.
+        // Fora do painel o documento carregado tambem sai da memoria: a proxima credencial busca de novo.
+        if (!dentro) { fecharDocumentacao(false); doc = null; docAtual = null; docIndiceBusca = null; }
+        else if (docAberta) conteudo.classList.add("oculto");
       }
 
-      function carregar(token, fresco) {
-        return buscar(token, fresco).then(function (v) {
+      function naPorta(mensagem) {
+        erroEntrar.textContent = mensagem || "";
+        erroEntrar.classList.toggle("oculto", !mensagem);
+        mostrar(porta);
+      }
+
+      function carregar(fresco) {
+        return buscar(fresco).then(function (v) {
           visao = v || {};
-          tokenAtual = token;
           pintar();
           mostrar(conteudo);
-          ligarSino(token);
+          ligarSino();
         });
       }
 
-      function entrar(token) {
+      /* Com o JWT do Keycloak em maos. */
+      function entrarComLogin() {
+        if (!ehAdmin(cred.acesso)) {
+          // A conta existe e logou, mas nao administra a plataforma. Nada de
+          // chamar a API: o servidor recusaria, e a tela diria menos que isto.
+          negar();
+          return Promise.resolve();
+        }
         erroEntrar.classList.add("oculto");
         mostrar(carregando);
-        return carregar(token, false)
-          .then(function () { guardar(token); })
+        return carregar(false)
+          .then(function () { lembrarSessao(); })
           .catch(function (e) {
-            // O token errado esquece o guardado: manter um token que nao vale so
-            // faz a proxima abertura falhar em silencio.
-            if (e && e.token) esquecer();
-            erroEntrar.textContent = e && e.token
-              ? "Token recusado."
-              : "Nao consegui falar com o servidor. Tente de novo.";
-            erroEntrar.classList.remove("oculto");
-            mostrar(porta);
+            if (!cred) return;                 // a sessao ja caiu (sessaoPerdida cuidou)
+            if (e && e.papel) { negar(); return; }
+            var recusado = e && e.token;
+            cred = null;
+            pararRenovacao();
+            esquecerSessao();
+            naPorta(recusado
+              ? "O servidor recusou o login."
+              : "Nao consegui falar com o servidor. Tente de novo.");
           });
       }
 
+      function negar() {
+        // O token dessa conta nao serve a esta tela; fica so o id_token, para o "Sair" encerrar sem confirmacao.
+        cred = cred && cred.identidade ? { tipo: "saida", identidade: cred.identidade } : null;
+        pararRenovacao();
+        esquecerSessao();
+        mostrar(negado);
+      }
+
       /* ── eventos ────────────────────────────────────────────────────────────── */
 
-      formEntrar.addEventListener("submit", function (e) {
-        e.preventDefault();
-        var t = (campoToken.value || "").trim();
-        if (t) entrar(t);
+      botaoEntrarLogin.addEventListener("click", function () {
+        botaoEntrarLogin.disabled = true;
+        irAoLogin().catch(function () {
+          botaoEntrarLogin.disabled = false;
+          naPorta("Este navegador não conseguiu preparar o login. Tente de novo.");
+        });
       });
 
       botaoSair.addEventListener("click", function () {
-        esquecer();
-        campoToken.value = "";
-        location.reload();
+        sairDoLogin();
       });
+      botaoSairNegado.addEventListener("click", sairDoLogin);
 
       sino.addEventListener("click", function () {
         var abrindo = sinoPainel.classList.contains("oculto");
-        if (abrindo) { abrirSino(); if (tokenAtual) atualizarSino(tokenAtual); } else { fecharSino(); }
+        if (abrindo) { abrirSino(); atualizarSino(); } else { fecharSino(); }
       });
       document.addEventListener("click", function (ev) {
         if (!sinoPainel.classList.contains("oculto") && !sinoCaixa.contains(ev.target)) fecharSino();
@@ -4729,10 +7234,10 @@ data:
       });
 
       botaoAtualizar.addEventListener("click", function () {
-        if (!tokenAtual) return;
+        if (!cred) return;
         botaoAtualizar.disabled = true;
         botaoAtualizar.textContent = "Atualizando…";
-        carregar(tokenAtual, true).catch(function () { /* mantem o que ja esta na tela */ })
+        carregar(true).catch(function () { /* mantem o que ja esta na tela */ })
           .then(function () { botaoAtualizar.disabled = false; botaoAtualizar.textContent = "Atualizar"; });
       });
 
@@ -4772,7 +7277,7 @@ data:
       var API_LICENCA = "/api/plataforma/painel/licencas/";
 
       function acaoDaLicenca(tenant, acao, aviso) {
-        if (!tokenAtual) return Promise.resolve();
+        if (!cred) return Promise.resolve();
         if (acao === "trocar") {
           var digitado = window.prompt("TROCAR a chave de " + tenant + "?\n\n"
             + "A chave atual para de valer e os apps de TODOS da escola (dono, treinadores e pais) saem da conta "
@@ -4785,10 +7290,10 @@ data:
           }
         }
         aviso.textContent = "Enviando…";
-        return fetch(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
-          method: "POST", headers: { "x-atm-admin-token": tokenAtual, "Content-Type": "application/json" }, body: "{}"
+        return pedir(API_LICENCA + encodeURIComponent(tenant) + "/" + acao, {
+          method: "POST", headers: { "Content-Type": "application/json" }, body: "{}"
         }).then(function (r) {
-          if (r.status === 401) throw new Error("O token expirou. Saia e entre de novo no painel.");
+          if (r.status === 401) throw new Error("A sessão expirou. Saia e entre de novo no painel.");
           return r.json().then(function (d) {
             if (!r.ok) throw new Error((d && d.detail) || ("O servidor recusou (" + r.status + ")."));
             return d;
@@ -4814,8 +7319,384 @@ data:
       $("ficha").addEventListener("click", function (ev) { if (ev.target === $("ficha")) fecharFicha(); });
       document.addEventListener("keydown", function (ev) { if (ev.key === "Escape") fecharFicha(); });
 
-      var jaTem = guardado();
-      if (jaTem) entrar(jaTem);
+      /* ── informacoes: o Documento de Governanca, dentro do painel ─────────────
+       *
+       * O conteudo tem detalhe de infraestrutura e fraquezas conhecidas: por isso
+       * NAO vem do ConfigMap publico, e sim da captacao, com a MESMA credencial do
+       * painel (`pedir()`), e so quando o dono clica em "Informacoes". Fica em
+       * memoria ate a aba fechar; nada vai para storage.
+       *
+       * O Markdown passa pelo renderizador do visualizador (`painel-markdown.js`,
+       * copia de governanca/assets/markdown.js), que escapa todo HTML e so aceita
+       * link http(s)/mailto/relativo. Alinhamento de tabela vai por classe: a CSP
+       * desta pagina recusa `style=`. Ids dos titulos com prefixo `doc-`, para nao
+       * colidir com os ids do painel (um "## Busca" viraria outro `#busca`).
+       *
+       * Navegacao interna, sem mexer na URL: o painel ja usa a URL para a volta do
+       * login, e um `#` a mais nao deve atrapalhar o "recarregar e continuar".
+       */
+      var API_DOCUMENTACAO = "/api/plataforma/painel/documentacao";
+      var URL_C4 = "/publico/painel-c4.js?v=1";
+      var documentacao = $("documentacao"), botaoInformacoes = $("informacoes");
+      var docEstado = $("docEstado"), docCorpo = $("docCorpo"), docMenu = $("docMenu"),
+          docPagina = $("docPagina"), docSumario = $("docSumario"), docSumarioLista = $("docSumarioLista"),
+          docPaginacao = $("docPaginacao"), docTrilha = $("docTrilha"), docBusca = $("docBusca");
+      var doc = null;            // {geradoEm, secoes, c4, paginas, porCaminho, porChave}
+      var docAberta = false, docCarregando = null, docAtual = null, docIndiceBusca = null, c4Pedido = false;
+
+      function md() { return window.ATMMarkdown || null; }
+
+      function prepararDocumento(d) {
+        var D = { geradoEm: d && d.geradoEm, secoes: (d && d.secoes) || [], c4: (d && d.c4) || null,
+                  paginas: [], porCaminho: {}, porChave: {} };
+        D.secoes.forEach(function (s, si) {
+          s.numero = si + 1;
+          s.paginas = s.paginas || [];
+          s.paginas.forEach(function (p) {
+            p.secao = s;
+            p.chave = s.id + "/" + p.id;
+            p.indice = D.paginas.length;
+            D.paginas.push(p);
+            D.porCaminho[p.caminho] = p;
+            D.porChave[p.chave] = p;
+          });
+        });
+        return D;
+      }
+
+      function normalizarCaminho(c) {
+        var out = [];
+        c.split("/").forEach(function (seg) {
+          if (seg === "" || seg === ".") return;
+          if (seg === "..") { if (out.length) out.pop(); return; }
+          out.push(seg);
+        });
+        return out.join("/");
+      }
+      function pastaDe(c) { var i = c.lastIndexOf("/"); return i < 0 ? "" : c.slice(0, i); }
+      function decodificar(s) { try { return decodeURIComponent(s); } catch (e) { return s; } }
+
+      /* Link para outro .md vira `#doc:<secao/pagina>[#ancora]` (navegacao interna);
+         arquivo do repositorio, que daqui nao se alcanca, vira `#doc-arquivo:` e
+         depois texto com o caminho (aprimorarDoc). */
+      function resolvedoresDoc(p) {
+        return {
+          prefixoId: "doc-",
+          alinhamentoPorClasse: true,
+          resolverLink: function (href) {
+            if (href.charAt(0) === "#") return "#doc:" + p.chave + href;
+            if (/^[a-z][a-z0-9+.\-]*:/i.test(href) || href.indexOf("//") === 0) return null;
+            var partes = href.split("#");
+            var caminho = decodificar(partes[0].split("?")[0]);
+            var ancora = partes.slice(1).join("#");
+            if (!caminho) return "#doc:" + p.chave + (ancora ? "#" + ancora : "");
+            var alvo = normalizarCaminho(pastaDe(p.caminho) + "/" + caminho);
+            if (doc.porCaminho[alvo]) return "#doc:" + doc.porCaminho[alvo].chave + (ancora ? "#" + ancora : "");
+            return "#doc-arquivo:" + alvo;
+          },
+          // Imagem do repositorio nao chega aqui (e a CSP so aceita 'self' e data:).
+          resolverImagem: function () { return "#doc-sem-imagem"; }
+        };
+      }
+
+      function docMensagem(texto, erro) {
+        docEstado.textContent = texto;
+        docEstado.classList.toggle("erro", !!erro);
+        docEstado.classList.remove("oculto");
+        docCorpo.classList.add("oculto");
+      }
+
+      function carregarDocumentacao() {
+        if (doc) return Promise.resolve(doc);
+        if (docCarregando) return docCarregando;
+        docMensagem("Carregando a documentação…");
+        docCarregando = pedir(API_DOCUMENTACAO).then(function (r) {
+          if (r.status === 404) { var e = new Error("nao publicada"); e.naoPublicada = true; throw e; }
+          if (r.status === 401 || r.status === 403) { var a = new Error("acesso"); a.acesso = true; throw a; }
+          if (!r.ok) throw new Error("HTTP " + r.status);
+          return r.json();
+        }).then(function (d) {
+          if (!d || !Array.isArray(d.secoes)) throw new Error("resposta sem secoes");
+          doc = prepararDocumento(d);
+          docIndiceBusca = null;
+          docCarregando = null;
+          return doc;
+        }, function (e) { docCarregando = null; throw e; });
+        return docCarregando;
+      }
+
+      /* O desenho C4 so e baixado na primeira abertura (quem nunca abre nao paga). */
+      function carregarC4() {
+        if (c4Pedido || window.ATM_C4) return;
+        c4Pedido = true;
+        var s = document.createElement("script");
+        s.src = URL_C4;
+        s.async = true;
+        // Sem o painel-c4.js (ainda nao publicado), o diagrama fica so com a legenda.
+        s.onload = function () { if (docAtual && docAtual.tipo === "pagina") desenharC4(); };
+        document.head.appendChild(s);
+      }
+      function desenharC4() {
+        if (window.ATM_C4 && typeof window.ATM_C4.desenhar === "function" && doc && doc.c4) {
+          try { window.ATM_C4.desenhar(docPagina, doc.c4); } catch (e) { /* o texto continua legivel */ }
+        }
+      }
+
+      function abrirDocumentacao() {
+        docAberta = true;
+        document.body.classList.add("doc-aberta");
+        conteudo.classList.add("oculto");
+        documentacao.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "true");
+        botaoInformacoes.classList.add("ativo");
+        fecharSino();
+        carregarC4();
+        if (!md()) {
+          docMensagem("Não consegui carregar o leitor da documentação. Recarregue a página.", true);
+          return Promise.resolve();
+        }
+        return carregarDocumentacao().then(function () {
+          if (!docAberta) return;
+          docEstado.classList.add("oculto");
+          docCorpo.classList.remove("oculto");
+          $("docGerado").textContent = doc.geradoEm ? "Gerado em " + dataHora(doc.geradoEm) + "." : "";
+          montarMenuDoc();
+          if (docAtual && docAtual.tipo === "pagina") abrirPaginaDoc(docAtual.p); else mostrarCapaDoc();
+          $("docTitulo").focus();
+        }).catch(function (e) {
+          if (e && e.naoPublicada) docMensagem("Documentação ainda não publicada.");
+          else if (e && e.acesso) docMensagem("O servidor recusou o acesso à documentação. Saia e entre de novo.", true);
+          else docMensagem("Não consegui carregar a documentação agora. Tente de novo em instantes.", true);
+        });
+      }
+
+      function fecharDocumentacao(devolverFoco) {
+        if (!docAberta) return;
+        docAberta = false;
+        document.body.classList.remove("doc-aberta");
+        documentacao.classList.add("oculto");
+        if (cred) conteudo.classList.remove("oculto");
+        botaoInformacoes.setAttribute("aria-expanded", "false");
+        botaoInformacoes.classList.remove("ativo");
+        if (devolverFoco) botaoInformacoes.focus();
+      }
+
+      function numero2(n) { return (n < 10 ? "0" : "") + n; }
+
+      function montarMenuDoc() {
+        var h = '<ul class="doc-arvore"><li><a href="#doc:" data-doc-capa>Início</a></li>';
+        doc.secoes.forEach(function (s) {
+          h += '<li class="doc-arvore-secao"><span class="doc-arvore-nome"><span class="doc-num">' + numero2(s.numero)
+            + "</span> " + esc(s.titulo) + "</span>";
+          if (!s.paginas.length) h += '<p class="ajuda">Em elaboração.</p>';
+          else {
+            h += "<ul>";
+            s.paginas.forEach(function (p) {
+              h += '<li><a href="#doc:' + esc(p.chave) + '" data-doc="' + esc(p.chave) + '">' + esc(p.titulo) + "</a></li>";
+            });
+            h += "</ul>";
+          }
+          h += "</li>";
+        });
+        docMenu.innerHTML = h + "</ul>";
+      }
+
+      function marcarNoMenu(chave) {
+        docMenu.querySelectorAll("a").forEach(function (a) {
+          var atual = chave === null ? a.hasAttribute("data-doc-capa") : a.getAttribute("data-doc") === chave;
+          if (atual) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
+        });
+      }
+
+      function trilhaDoc(itens) {
+        docTrilha.innerHTML = itens.map(function (t, i) {
+          return "<li>" + (i === itens.length - 1 ? '<span aria-current="page">' + esc(t.texto) + "</span>"
+            : '<a href="' + esc(t.href) + '">' + esc(t.texto) + "</a>") + "</li>";
+        }).join("");
+      }
+
+      function sumarioDoc(titulos) {
+        var itens = (titulos || []).filter(function (t) { return t.nivel === 2 || t.nivel === 3; });
+        docSumario.classList.toggle("oculto", itens.length < 2);
+        docSumarioLista.innerHTML = itens.length < 2 ? "" : itens.map(function (t) {
+          return '<li class="nivel-' + t.nivel + '"><a href="#doc:' + esc(docAtual.p.chave + "#" + t.ancora) + '">'
+            + esc(t.texto) + "</a></li>";
+        }).join("");
+      }
+
+      function paginacaoDoc(p) {
+        if (!p) { docPaginacao.innerHTML = ""; return; }
+        var ant = doc.paginas[p.indice - 1], prox = doc.paginas[p.indice + 1];
+        docPaginacao.innerHTML = (ant ? '<a class="doc-ant" rel="prev" href="#doc:' + esc(ant.chave)
+            + '"><span class="ajuda">← Anterior</span><b>' + esc(ant.titulo) + "</b></a>" : "<span></span>")
+          + (prox ? '<a class="doc-prox" rel="next" href="#doc:' + esc(prox.chave)
+            + '"><span class="ajuda">Próxima →</span><b>' + esc(prox.titulo) + "</b></a>" : "");
+      }
+
+      function mostrarCapaDoc() {
+        docAtual = { tipo: "capa" };
+        var h = '<h1 tabindex="-1">Documento de Governança</h1><p class="ajuda">Negócio, requisitos, arquitetura de aplicação, '
+          + "de dados e técnica, documentação técnica e operação — com as fontes de cada afirmação.</p>";
+        if (!doc.paginas.length) h += '<p class="ajuda">Nenhuma página publicada ainda.</p>';
+        h += '<ol class="doc-cartoes">';
+        doc.secoes.forEach(function (s) {
+          var primeira = s.paginas[0];
+          h += '<li class="bloco"><span class="rotulo">Seção ' + numero2(s.numero) + "</span>"
+            + (primeira ? '<a href="#doc:' + esc(primeira.chave) + '">' + esc(s.titulo) + "</a>" : "<b>" + esc(s.titulo) + "</b>")
+            + '<span class="detalhe">' + (s.paginas.length ? s.paginas.length + (s.paginas.length === 1 ? " página" : " páginas")
+              : "em elaboração") + "</span></li>";
+        });
+        docPagina.innerHTML = h + "</ol>";
+        trilhaDoc([{ texto: "Início", href: "#doc:" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu(null);
+      }
+
+      /* Depois do render: arquivo do repositorio vira texto, imagem que nao chega vira legenda. */
+      function aprimorarDoc() {
+        docPagina.querySelectorAll('a[href^="#doc-arquivo:"]').forEach(function (a) {
+          var s = document.createElement("span");
+          s.className = "doc-arquivo";
+          s.title = "Arquivo do repositório: " + a.getAttribute("href").slice("#doc-arquivo:".length);
+          s.textContent = a.textContent;
+          a.parentNode.replaceChild(s, a);
+        });
+        docPagina.querySelectorAll('img[src="#doc-sem-imagem"]').forEach(function (img) {
+          var s = document.createElement("span");
+          s.className = "ajuda";
+          s.textContent = "[imagem: " + (img.getAttribute("alt") || "sem descrição") + "]";
+          img.parentNode.replaceChild(s, img);
+        });
+      }
+
+      function abrirPaginaDoc(p, ancora) {
+        docAtual = { tipo: "pagina", p: p };
+        var r = md().render(p.md, resolvedoresDoc(p));
+        docPagina.innerHTML = '<p class="secao">Seção ' + numero2(p.secao.numero) + " · " + esc(p.secao.titulo) + "</p>"
+          + r.html + '<p class="ajuda doc-origem">Arquivo de origem: <code>governanca/conteudo/' + esc(p.caminho) + "</code></p>";
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.setAttribute("tabindex", "-1");
+        aprimorarDoc();
+        desenharC4();
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: p.secao.titulo, href: "#doc:" + p.secao.paginas[0].chave },
+                   { texto: p.titulo }]);
+        sumarioDoc(r.titulos);
+        paginacaoDoc(p);
+        marcarNoMenu(p.chave);
+        if (ancora) irParaAncoraDoc(ancora);
+        else if (documentacao.scrollIntoView) documentacao.scrollIntoView({ block: "start" });
+      }
+
+      function irParaAncoraDoc(ancora) {
+        var a = decodificar(ancora);
+        var alvo = document.getElementById("doc-" + a);
+        if (!alvo && md()) alvo = document.getElementById("doc-" + md().slug(a));
+        if (!alvo || !docPagina.contains(alvo)) return;
+        if (alvo.scrollIntoView) alvo.scrollIntoView({ block: "start" });
+        if (!alvo.hasAttribute("tabindex")) alvo.setAttribute("tabindex", "-1");
+        alvo.focus();
+      }
+
+      /* `#doc:<secao/pagina>[#ancora]` -> a tela certa. */
+      function navegarDoc(href) {
+        var resto = href.slice("#doc:".length);
+        if (!resto) { mostrarCapaDoc(); $("docTitulo").focus(); return; }
+        var i = resto.indexOf("#");
+        var chave = decodificar(i < 0 ? resto : resto.slice(0, i)), ancora = i < 0 ? "" : resto.slice(i + 1);
+        var p = doc.porChave[chave];
+        if (!p) {
+          docAtual = { tipo: "ausente" };
+          docPagina.innerHTML = '<h1 tabindex="-1">Página não encontrada</h1><p class="ajuda">'
+            + esc(chave) + " não está nesta versão da documentação.</p>";
+          return;
+        }
+        if (docAtual && docAtual.p === p && ancora) { irParaAncoraDoc(ancora); return; }
+        abrirPaginaDoc(p, ancora);
+        if (!ancora) { var h1 = docPagina.querySelector("h1"); if (h1) h1.focus(); }
+      }
+
+      /* Busca: todas as palavras (2+ letras), sem acento nem maiuscula. */
+      function semAcentoMin(s) { return md().semAcento(String(s)).toLowerCase(); }
+      function indiceDoc() {
+        if (docIndiceBusca) return docIndiceBusca;
+        docIndiceBusca = doc.paginas.map(function (p) {
+          var texto = md().textoPuro(md().render(p.md, resolvedoresDoc(p)).html).replace(/\s+/g, " ").trim();
+          return { p: p, texto: texto, norm: semAcentoMin(texto), titulo: semAcentoMin(p.titulo) };
+        });
+        return docIndiceBusca;
+      }
+      function buscarDoc(q) {
+        var termos = semAcentoMin(q).split(/\s+/).filter(function (t) { return t.length >= 2; });
+        docAtual = { tipo: "busca" };
+        var res = [];
+        if (termos.length) {
+          indiceDoc().forEach(function (e) {
+            var pont = 0;
+            for (var i = 0; i < termos.length; i++) {
+              var noTitulo = e.titulo.indexOf(termos[i]) >= 0, noTexto = e.norm.indexOf(termos[i]) >= 0;
+              if (!noTitulo && !noTexto) return;
+              pont += (noTitulo ? 10 : 0) + (noTexto ? 1 : 0);
+            }
+            res.push({ e: e, pont: pont });
+          });
+          res.sort(function (a, b) { return b.pont - a.pont || a.e.p.indice - b.e.p.indice; });
+        }
+        var h = '<h1 tabindex="-1">Busca</h1>';
+        if (!termos.length) h += '<p class="ajuda">Digite ao menos duas letras.</p>';
+        else {
+          h += '<p class="ajuda">' + (res.length ? res.length + (res.length === 1 ? " página encontrada" : " páginas encontradas")
+            : "Nada encontrado") + " para <b>" + esc(q.trim()) + '</b>.</p><ol class="doc-resultados">';
+          res.forEach(function (r) {
+            var e = r.e, pos = Math.max(0, e.norm.indexOf(termos[0]));
+            var ini = Math.max(0, pos - 80), trecho = e.texto.slice(ini, ini + 220);
+            h += '<li><a href="#doc:' + esc(e.p.chave) + '">' + esc(e.p.titulo) + '</a><span class="sub">' + esc(e.p.secao.titulo)
+              + '</span><p class="ajuda">' + (ini > 0 ? "…" : "") + esc(trecho) + "…</p></li>";
+          });
+          h += "</ol>";
+        }
+        docPagina.innerHTML = h;
+        trilhaDoc([{ texto: "Início", href: "#doc:" }, { texto: "Busca" }]);
+        sumarioDoc([]);
+        paginacaoDoc(null);
+        marcarNoMenu("");
+        var h1 = docPagina.querySelector("h1");
+        if (h1) h1.focus();
+      }
+
+      botaoInformacoes.addEventListener("click", function () {
+        if (docAberta) fecharDocumentacao(true); else abrirDocumentacao();
+      });
+      $("docFechar").addEventListener("click", function () { fecharDocumentacao(true); });
+      $("docImprimir").addEventListener("click", function () { window.print(); });
+      $("docFormBusca").addEventListener("submit", function (ev) {
+        ev.preventDefault();
+        if (doc && md()) buscarDoc(docBusca.value || "");
+      });
+      documentacao.addEventListener("click", function (ev) {
+        var a = ev.target.closest ? ev.target.closest("a[href]") : null;
+        if (!a || !doc) return;
+        var href = a.getAttribute("href");
+        if (href.indexOf("#doc:") === 0) { ev.preventDefault(); navegarDoc(href); }
+      });
+
+      /* ── a abertura ─────────────────────────────────────────────────────────── */
+
+      function comecar() {
+        var q = new URLSearchParams(location.search);
+        if (q.get("code") || q.get("error")) { voltarDoLogin(q); return; }
+        // Esta aba ja tinha sessao (recarregou): ida e volta ao Keycloak, que
+        // ainda tem a sessao dele — sem digitar nada. Sem a marca, a porta: um
+        // redirect automatico faria quem chegou por engano sair sem entender.
+        if (tinhaSessao()) {
+          mostrar(carregando);
+          irAoLogin().catch(function () { esquecerSessao(); naPorta(""); });
+          return;
+        }
+        mostrar(porta);
+      }
+
+      comecar();
     })();
 
   planos-modulos.json: |
@@ -5089,8 +7970,8 @@ data:
         <tr><th>Quem</th><th>Para quê</th><th>O que recebe</th><th>Onde fica</th></tr>
         <tr><td><b>Asaas</b></td><td>Cobrar a mensalidade e emitir nota fiscal</td>
             <td>Nome, CPF, e-mail e valor de quem paga</td><td>Brasil</td></tr>
-        <tr><td>⟨provedor de hospedagem⟩</td><td>Servidores onde o sistema roda</td>
-            <td>Os dados, em repouso</td><td>⟨país⟩</td></tr>
+        <tr><td><b>Hostinger International Limited</b></td><td>Servidores onde o sistema roda</td>
+            <td>Os dados, em repouso</td><td>Brasil</td></tr>
         <tr><td><b>Garmin</b></td><td>Importar atividade e sono — <b>só se você conectar
             seu dispositivo</b></td><td>Identificador na Garmin, atividade, sono</td>
             <td><b>Estados Unidos</b></td></tr>
@@ -5158,11 +8039,12 @@ data:
         <table>
           <tr><th>Campo</th><th>Valor</th></tr>
           <tr><td>Nome do Encarregado</td><td>Carlos Oliveira</td></tr>
-          <tr><td>E-mail do canal</td><td><a href="mailto:carlos.oliveira@athleticmap.com">carlos.oliveira@athleticmap.com</a></td></tr>
+          <tr><td>E-mail do canal</td><td><a href="mailto:suporte@athleticmap.com">suporte@athleticmap.com</a></td></tr>
           <tr><td>Endereço para correspondência</td><td>⟨opcional, mas recomendado⟩</td></tr>
           <tr><td>Prazo de resposta declarado</td><td>15 dias (art. 19, II)</td></tr>
         </table>
-        <p style="margin-bottom:0">Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
+        <p>Para pedir a exclusão da conta e dos dados, ou exercer outro direito, use a página <a href="/excluir-conta">Exclusão de conta e de dados</a> ou escreva para o e-mail do canal.</p>
+        <p>Ver <code>docs/juridico/ato-de-nomeacao-encarregado.md</code>.</p>
       </div>
 
       <h2>10. Mudanças nesta política</h2>