From 1728a2dbddc36c3258feb3c6f4d171efe092a1a1 Mon Sep 17 00:00:00 2001
From: Gustavo <eric.fullmetal@gmail.com>
Date: Fri, 14 Aug 2026 08:52:35 -0300
Subject: [PATCH] fix: sidebar fixa na tela (nao sobe com tabelas longas) +
 mostrar/ocultar senha no login

Sidebar antes esticava junto com o conteudo (align-items:stretch do
flex), entao em telas com tabela longa (Clientes) o rodape (tema/sair/
recolher) ficava fora da area visivel sem rolar a pagina toda. Agora
fica position:sticky, presa ao topo da viewport, com rolagem propria
se a lista de links for maior que a tela.

Login ganha um botao de olho pra mostrar/ocultar a senha digitada.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/static/estilo.css    |  4 ++++
 app/templates/login.html | 28 +++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/app/static/estilo.css b/app/static/estilo.css
index de18979..51f6c8e 100644
--- a/app/static/estilo.css
+++ b/app/static/estilo.css
@@ -88,6 +88,10 @@ a { color: var(--cor-acento-texto); }
   border-right: 1px solid var(--cor-borda);
   display: flex;
   flex-direction: column;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
   transition: width var(--transicao), transform var(--transicao);
 }
 
diff --git a/app/templates/login.html b/app/templates/login.html
index 7752063..ae4567e 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -18,6 +18,15 @@
     .login-subtitulo { color: var(--cor-texto-secundario); font-size: 0.9rem; margin: 0 0 20px; }
     .login-cartao form { text-align: left; }
     .login-cartao button { width: 100%; }
+    .campo-senha { position: relative; }
+    .campo-senha input { padding-right: 40px; }
+    .botao-ver-senha {
+      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
+      margin: 0; padding: 6px; width: auto; background: transparent; border: none;
+      color: var(--cor-texto-secundario); cursor: pointer; display: flex; align-items: center;
+    }
+    .botao-ver-senha:hover { color: var(--cor-texto); }
+    .botao-ver-senha svg { width: 18px; height: 18px; }
   </style>
 </head>
 <body>
@@ -32,9 +41,26 @@
       <label for="usuario">Usuário</label>
       <input type="text" id="usuario" name="usuario" required autofocus>
       <label for="senha">Senha</label>
-      <input type="password" id="senha" name="senha" required>
+      <div class="campo-senha">
+        <input type="password" id="senha" name="senha" required>
+        <button type="button" class="botao-ver-senha" id="botao-ver-senha" aria-label="Mostrar senha">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8Z"/><circle cx="12" cy="12" r="3"/></svg>
+        </button>
+      </div>
       <button type="submit">Entrar</button>
     </form>
   </div>
+  <script>
+    (function () {
+      var botao = document.getElementById('botao-ver-senha');
+      var campo = document.getElementById('senha');
+      if (!botao || !campo) return;
+      botao.addEventListener('click', function () {
+        var mostrando = campo.type === 'text';
+        campo.type = mostrando ? 'password' : 'text';
+        botao.setAttribute('aria-label', mostrando ? 'Mostrar senha' : 'Ocultar senha');
+      });
+    })();
+  </script>
 </body>
 </html>