/* ===== pagina_login - estilos integrados ao seu HTML existente ===== */
.pagina_login_wrapper{
  width:100%;
  background: #F6F4F0 url("img/fundo_background_login.png") no-repeat center bottom;
  background-size: contain; /* ajuste se preferir cover */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 16px;
}

/* centraliza conteúdo e limita largura */
.pagina_login_inner{
  width:100%;
  max-width:1080px;
  min-height:80vh; /* centraliza verticalmente com a viewport */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:28px 20px;
  box-sizing:border-box;
}

/* título e texto */
.pagina_login_title{
  margin:0;
  font-size:20px;
  font-weight:700;
}
.pagina_login_text{
  margin:0;
  font-size:14px;
}

/* field: wrapper do input + icone */
.field{
  position:relative;
  width:100%;
  max-width:520px;
  box-sizing:border-box;
}

/* input */
.caixa_texto{
  width:100%;
  height:44px;
  padding:0 56px 0 12px; /* espaço à direita para o .note */
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.12);
  background:#ffffff;
  font-size:15px;
  box-sizing:border-box;
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* foco do input */
.caixa_texto:focus{
  border-color: rgba(0,0,0,0.28);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* a bolinha/nota com '!' */
.field .note{
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    color: rgb(239 239 239);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    transition: all .18s ease;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

/* caso queira estilo quando campo inválido — a lógica de cor vem do seu JS.
   Mas deixamos uma borda sutil que aponta para erro quando a classe .erro é adicionada */
.field.erro .caixa_texto{
  border-color: rgba(255,214,0,0.95);
  box-shadow: 0 8px 24px rgba(255,214,0,0.08);
}

/* botão enviar amarelo */
.botao1{
  width:100%;
  max-width:520px;
  height:46px;
  margin-top:10px;
  background:#ebe207;
  color:#001348;
  border:none;
  border-radius:8px;
  font-weight:700;
  font-size:14px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: transform .08s ease, opacity .18s ease;
}

/* estado desabilitado (você usa pointer-events para bloquear) */
#submitBtn[disabled], .botao1[aria-disabled="true"]{
  opacity:0.5;
  pointer-events:none;
}

/* responsividade */
@media (max-width:560px){
  .pagina_login_wrapper{ padding:28px 12px; }
  .pagina_login_inner{ padding:18px; min-height:60vh; }
  .field .note{ width:36px; height:36px; font-size:14px; right:6px; }
  .caixa_texto{ padding-right:48px; height:44px; }
  .botao1{ height:44px; }
}