/* Login desktop (Figma PR_App-Cliente - Desktop, node 3150:2963). Só vale >= 1024px; abaixo disso segue o layout mobile do style.css. */
#frm-autenticar .link-desktop,
.login-marca {
  display: none;
}
@media (min-width: 1024px) {
  body#center {
    background: #F0F0F0;
  }
  body#center:has(.login-marca) {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 0;
  }
  .login-marca ~ .logos {
    display: none;
  }
  .login-marca {
    background: #FAFAFA;
    display: block;
    flex: 0 0 57.08%;
    min-height: 100vh;
    position: relative;
  }
  .login-marca-logo {
    left: 16.58%;
    position: absolute;
    top: 37.3%;
    width: 66.87%;
  }
  .login-marca-logo img {
    display: block;
    height: auto;
  }
  .login-marca-logo .logotipo {
    width: 100%;
  }
  .login-marca-logo .consorcio {
    margin-top: 12px;
    width: 51.3%;
  }
  .login-marca-lista {
    left: 0;
    position: absolute;
    top: 82%;
    width: 100%;
  }
  .login-marca-lista p {
    color: #71717A;
    font-size: 13.9px;
    font-weight: 500;
    margin-bottom: 21px;
    text-align: center;
    text-transform: uppercase;
  }
  .login-marca-lista ul {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 21px;
    justify-content: center;
    list-style: none;
    padding: 0 5%;
  }
  .login-marca-lista img {
    display: block;
  }
  .login-marca ~ .login-coluna {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }
  .login-coluna .topo-icon {
    margin: 0 0 32px;
    padding: 0;
    width: 320px;
  }
  .login-coluna .topo-icon .container {
    max-width: none;
    width: 100%;
  }
  .login-marca ~ .voltar.float {
    left: calc(57.08% + 32px);
  }
  .login-marca ~ .formulario.login {
    align-items: center;
    display: flex;
    flex: 1;
    justify-content: center;
  }
  /* Ícone fora do input: o autofill do Chrome zera o background-image do campo preenchido. */
  .formulario.login .wrap_input #login,
  .formulario.login .wrap_input #cpf,
  .formulario.login .wrap_input #senha {
    background: transparent;
    font: 300 16px/48px 'Lato', sans-serif;
    padding: 0 50px;
  }
  .formulario.login .wrap_input #login:-webkit-autofill,
  .formulario.login .wrap_input #cpf:-webkit-autofill,
  .formulario.login .wrap_input #senha:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #F0F0F0 inset;
  }
  .formulario.login .wrap_input:has(#login)::before,
  .formulario.login .wrap_input:has(#cpf)::before,
  .formulario.login .wrap_input:has(#senha)::before {
    background: url(../imagem/login-user-profile-03.svg) center / 24px 24px no-repeat;
    bottom: 12px;
    content: '';
    height: 24px;
    left: 14px;
    pointer-events: none;
    position: absolute;
    width: 24px;
  }
  .formulario.login .wrap_input:has(#senha)::before {
    background-image: url(../imagem/login-password-02.svg);
  }
  #frm-autenticar .wrap_input label {
    font-weight: 400;
  }
  #frm-autenticar .mostra_senha {
    background: url(../imagem/login-eye-closed.svg) center / 24px 24px no-repeat;
    bottom: 12px;
    cursor: pointer;
    height: 24px;
    right: 14px;
    width: 24px;
  }
  #frm-autenticar .mostra_senha.on {
    background-image: url(../imagem/senha-on.png);
  }
  #frm-autenticar .botao {
    font-weight: 800;
  }
  #frm-autenticar .links {
    margin-top: 32px;
    text-align: center;
  }
  #frm-autenticar .links a {
    color: #52525B;
    font-weight: 500;
    text-decoration: underline;
  }
  #frm-autenticar .link-mobile {
    display: none;
  }
  #frm-autenticar .link-desktop {
    display: inline;
  }
  .formulario.login > .container {
    flex: 0 0 320px;
    margin: 0;
    max-width: 320px;
    width: 320px;
  }
}