feat(atm-plataforma): tela de login Athletic Map

tenants/plataforma/36-kc-theme.yaml

@@ -1,5 +1,5 @@
 # GERADO por scripts/tema_login_escolinha.py — nao edite na mao.
-# Fonte: keycloak-theme/escolinha/{login,login-update-password,estilo}.ftl
+# Fonte: keycloak-theme/escolinha/{login,login-update-password,estilo,template}.ftl
 apiVersion: v1
 kind: ConfigMap
 metadata:
@@ -39,6 +39,13 @@ data:
       <#-- Ver estilo.ftl: o <style> vive la porque as imagens pesam 400 KB e
            a tela de definir senha usa o mesmo. -->
       <#include "estilo.ftl">
+      <#-- O JS de passkey do tema base (26.4+) importa `rfc4648` PELO NOME, e quem
+           diz onde ele esta e este importmap — que o template.ftl de fabrica traz e
+           este tema, por nao herdar o <head> de la, nao trazia. Sem ele: "Failed to
+           resolve module specifier rfc4648" e o botao de passkey nao faz nada
+           (achado em 07/10/2026). Tem de vir ANTES de qualquer <script type=module>.
+           O gerador recusa publicar sem esta linha. -->
+      <script type="importmap">{"imports":{"rfc4648":"${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"}}</script>
       <#-- O botao de passkey e da macro do tema base, com classes do PatternFly que
            este tema nao estiliza: aqui ele ganha o desenho do `.botao.social`. -->
       <style>
@@ -543,6 +550,31 @@ data:
              na base da foto. */
           .borda{display:none}
           .marca{margin-bottom:26px}
+          /* Sem isto a sobra da altura (min-height da tela) e repartida entre as
+             duas linhas, e a foto crescia nas telas curtas (definir senha, passkey). */
+          .stage{grid-template-rows:auto 1fr}
+        }
+    
+        /* ---------- Celular (folha do login do app, 360–430 px) ----------
+           O app abre o login numa folha (ASWebAuthenticationSession / Custom Tabs),
+           mais baixa que a tela. Aqui a foto vira uma faixa, o logo encolhe e o
+           formulario sobe — o botao "Entrar" fica a vista sem rolar. */
+        @media (max-width:480px){
+          /* dvh: no celular o 100vh conta a barra do navegador e sobra rolagem. */
+          .stage{min-height:100dvh}
+          .foto{min-height:112px;height:112px}
+          .painel{padding:22px 18px calc(28px + env(safe-area-inset-bottom,0px))}
+          .marca{width:58%;max-width:230px;margin-bottom:18px}
+          h1{font-size:26px}
+          .sub{font-size:14px;margin-top:6px}
+          form{margin-top:20px;gap:16px}
+          /* 16px no campo: abaixo disso o Safari do iPhone da zoom ao focar e a
+             tela fica deslocada para o lado. */
+          .caixa input{height:50px;font-size:16px}
+          .conteudo input[type=text],.conteudo input[type=email],.conteudo input[type=password]{font-size:16px}
+          .opcoes{flex-wrap:wrap;row-gap:8px}
+          .botao{height:52px}
+          .rodape{margin-top:24px}
         }
       </style>
     
@@ -597,6 +629,10 @@ data:
       <meta name="robots" content="noindex, nofollow">
       <title>${msg("loginTitle",(realm.displayName!''))}</title>
       <#include "estilo.ftl">
+      <#-- O mesmo importmap do template.ftl de fabrica: as paginas de passkey do tema
+           base (cadastrar passkey, escolher credencial) importam `rfc4648` pelo nome.
+           Ver o comentario no login.ftl. -->
+      <script type="importmap">{"imports":{"rfc4648":"${url.resourcesCommonPath}/vendor/rfc4648/rfc4648.js"}}</script>
     </head>
     <body>
       <div class="stage">