diff --git a/app/templates/login.html b/app/templates/login.html
index ae4567e..ee561c8 100644
--- a/app/templates/login.html
+++ b/app/templates/login.html
@@ -17,16 +17,23 @@
     .login-cartao h1 { font-size: 1.3rem; margin-bottom: 4px; }
     .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;
+    .login-cartao > form > button[type="submit"] { width: 100%; }
+    .campo-senha {
+      display: flex; align-items: center;
+      border: 1px solid var(--cor-borda); border-radius: 8px; background: var(--cor-fundo);
     }
-    .botao-ver-senha:hover { color: var(--cor-texto); }
-    .botao-ver-senha svg { width: 18px; height: 18px; }
+    .campo-senha input {
+      flex: 1; min-width: 0; border: none; background: transparent;
+    }
+    .campo-senha input:focus-visible { outline: none; }
+    .campo-senha:focus-within { outline: 2px solid var(--cor-acento); outline-offset: 2px; }
+    .campo-senha .botao-ver-senha {
+      flex-shrink: 0; margin: 0; padding: 0 12px; width: auto; height: 100%;
+      background: transparent; border: none; color: var(--cor-texto-secundario);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+    }
+    .campo-senha .botao-ver-senha:hover { color: var(--cor-texto); }
+    .campo-senha .botao-ver-senha svg { width: 18px; height: 18px; }
   </style>
 </head>
 <body>