/* Página de senha (celular do visitante), no mesmo visual das telas do cofre. */
body.senha { min-height: 100vh; color: var(--branco); background: #081236; background: radial-gradient(140% 70% at 0% 100%, #10337F 0%, #0D2462 28%, #0A1742 60%, #081236 100%) fixed; }
.senha .folha { max-width: 520px; margin: 0 auto; padding: 22px 22px 48px; padding-top: max(22px, env(safe-area-inset-top)); }
.senha .topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.senha .logo { height: 26px; width: auto; }
.senha .marca { font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--azul-claro); }

.senha .titulo { margin: 0 0 14px; font-weight: 700; font-size: 34px; line-height: 1.12; letter-spacing: -0.03em; }
.senha em { font-style: normal; color: var(--azul-claro); }
.senha .apoio { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--texto-suave); }
.senha .apoio strong { color: #FFFFFF; font-weight: 600; white-space: nowrap; }
.senha .nota { margin: 0 0 22px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(61, 163, 255, 0.55); background: rgba(5, 131, 242, 0.18); font-size: 14px; line-height: 1.45; }

.senha form { margin: 0; }
.senha .campo { display: block; margin: 0 0 16px; }
.senha .campo > span:first-child { display: block; margin: 0 0 7px; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-claro); }
.senha input { display: block; width: 100%; height: 56px; padding: 0 16px; border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 16px; background: rgba(255, 255, 255, 0.07); color: #FFFFFF; font-family: inherit; font-size: 18px; font-weight: 500; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, background .15s ease; }
.senha input::placeholder { color: rgba(255, 255, 255, 0.3); }
.senha input:focus { border-color: var(--azul); background: rgba(255, 255, 255, 0.1); }
.senha input.invalido { border-color: var(--erro); }
.senha input:-webkit-autofill { -webkit-text-fill-color: #FFFFFF; box-shadow: 0 0 0 100px #16224F inset; caret-color: #FFFFFF; }
.senha .campo small { display: block; margin-top: 7px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.senha .campo small.achou { color: var(--ok); }
.senha .com-botao { position: relative; display: block; }
.senha .com-botao input { padding-right: 76px; }
.senha .ver { position: absolute; right: 6px; top: 6px; height: 44px; min-width: 60px; padding: 0 12px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: var(--texto-suave); font-size: 14px; font-weight: 600; cursor: pointer; }

.senha .regras { display: flex; flex-wrap: wrap; margin: -4px 0 18px; padding: 0; list-style: none; }
.senha .regras li { margin: 0 8px 8px 0; padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 13px; line-height: 1.4; color: var(--texto-apagado); }
.senha .regras li.ok { border-color: rgba(94, 226, 160, 0.6); color: var(--ok); background: rgba(94, 226, 160, 0.08); }

.senha .erro { margin: 4px 0 16px; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(255, 138, 122, 0.6); background: rgba(255, 138, 122, 0.12); font-size: 15px; line-height: 1.45; }
.senha .acao { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin: 6px 0 12px; padding: 10px 18px; border: 0; border-radius: 18px; background: var(--azul); color: #FFFFFF; font-family: inherit; font-size: 18px; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; box-shadow: 0 10px 30px rgba(5, 131, 242, 0.35); }
.senha .acao:disabled { opacity: .55; box-shadow: none; }
.senha .acao.secundaria { background: rgba(255, 255, 255, 0.09); box-shadow: none; font-weight: 600; }
.senha .rodape-nota { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--texto-apagado); }

.senha .estado { padding-top: 26px; }
.senha .selo-ok { width: 84px; height: 84px; margin: 0 0 22px; }
.senha .selo-ok svg { width: 84px; height: 84px; }
.senha .pontos { display: flex; margin: 8px 0 26px; }
.senha .pontos i { width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; background: var(--azul-claro); animation: ponto-salta 1s ease-in-out infinite; }
.senha .pontos i:nth-child(2) { animation-delay: .15s; }
.senha .pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ponto-salta { 0%, 60%, 100% { transform: translate3d(0, 0, 0); opacity: .45; } 30% { transform: translate3d(0, -9px, 0); opacity: 1; } }

@media (min-width: 560px) { .senha .folha { padding-top: 48px; } .senha .titulo { font-size: 40px; } }