/* ===== Telas de acesso (login, primeiro acesso, minha senha) =====
   Usa os tokens do app.css (âmbar/preto/cinza). Sem JavaScript tudo funciona; o botão «Mostrar» só aparece com JS. */
body.acesso{min-height:100vh;display:flex;background:radial-gradient(760px 420px at 85% -10%,var(--ambar-sel),transparent 70%) no-repeat,radial-gradient(700px 420px at 0% 0%,var(--indigo-fundo),transparent 70%) no-repeat,var(--fundo)}
.acesso-wrap{margin:auto;width:100%;max-width:440px;padding:28px 16px 36px}
.acesso-card{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);box-shadow:var(--sombra-2);padding:30px 30px 26px;animation:entra-pagina .5s var(--ease) backwards}
.acesso-logo{margin:0 0 16px}
.acesso-logo img{display:block;width:210px;max-width:72%;height:auto;margin:0 auto}
.acesso-card h1{font-size:20px;text-align:center}
.acesso-sub{color:var(--cinza-700);text-align:center;margin:8px 0 18px;font-size:13.5px}
.acesso-centro{text-align:center}
.acesso-ajuda{color:var(--cinza-500);font-size:12.5px;margin:18px 0 0;text-align:center}
.acesso-rodape{color:var(--cinza-500);font-size:12px;text-align:center;margin:14px 0 0}

.acesso-form .campo{margin-bottom:14px}
.acesso-form input[type=text],.acesso-form input[type=password]{
  font:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--cinza-300);border-radius:var(--raio-p);
  background:var(--branco);color:var(--preto);width:100%}
.acesso-form input:focus{outline:none;border-color:var(--ambar);box-shadow:0 0 0 4px var(--ambar-sel)}
.acesso-form input[aria-invalid=true]{border-color:var(--vermelho);background:var(--vermelho-fundo)}
.acesso-senha{position:relative;display:flex}
.acesso-senha input{padding-right:84px}
.acesso-mostrar{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--azul);
  font:inherit;font-size:13px;font-weight:650;padding:6px 8px;border-radius:var(--raio-p);cursor:pointer}
.acesso-mostrar[hidden]{display:none}
@media (any-hover:hover){.acesso-mostrar:hover{background:var(--azul-fundo)}}
.acesso-mostrar:focus-visible{outline:2px solid var(--preto);outline-offset:1px}
.acesso-caps{font-size:12px;color:var(--ambar-tinta);background:var(--amarelo-fundo);border-radius:var(--raio-p);padding:4px 8px}
.acesso-caps[hidden]{display:none}
.acesso-erro-campo{font-size:12.5px;color:var(--vermelho);font-weight:600}
.acesso-entrar{width:100%;justify-content:center;padding:12px 16px;font-size:15px;margin-top:4px}
.acesso-rodape-form{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:13px}
.acesso-rodape-form form{margin:0}
@media (any-hover:hover){.btn-link:hover{color:var(--preto)}}

@media (max-width:480px){
  .acesso-mostrar{min-height:40px;padding:0 12px}                                  /* alvo de toque de 40 px (eram 31) */
  .acesso-wrap{padding:16px 12px 28px}
  .acesso-card{padding:20px 16px 18px}
}