/**
 * Estilos das telas de acesso: card de login, coluna lateral (cliente e
 * parceiro) e indicador de força de senha.
 *
 * Responsabilidades:
 * - Estilizar o card de login e a arte lateral em desktop e mobile.
 * - Estilizar o medidor de força de senha (fraca, média, forte).
 *
 * CSS puro, editado à mão: o portal não tem Sass nem build do Tailwind. Depois
 * de editar, rode build-css.sh e comite o public/css/app.css gerado.
 *
 * @package Portal\Recursos\CSS
 * @llmdoc A posição deste arquivo na cascata está declarada em build-css.sh;
 *         não reordenar.
 */
.login-card {
  max-width: 634px;
  display: flex;
  text-align: center;
  border-radius: 10px;
  max-height: 720px;
}

@media (min-width: 1024px) {
  .login-card .content {
    padding: 35px;
  }
}

@media (max-width: 1023px) {
  .login-card .content {
    padding: 16px;
  }

  .asside-login {
    height: 230px;
    background: url("../png/eutbem_app-simulador_1500x656px.png") no-repeat;
    background-size: cover;
    background-blend-mode: soft-light, normal;
  }

  .asside-login-parceiro {
    height: 230px;
    background: url("../fulldigital/assets/parceiro/login-mobile.jpeg") no-repeat;
    background-size: cover;
    background-blend-mode: soft-light, normal;
  }
}

@media (min-width: 1024px) {
  .asside-login {
    background: url("../png/eutbem_app-simulador_663x1074px-novo.png") no-repeat !important;
    background-size: contain !important;
  }

  .asside-login-parceiro {
    background: url("../fulldigital/assets/parceiro/login-desktop.jpeg") no-repeat !important;
    background-size: contain !important;
  }
}

.password-strength {
  height: 10px;
  width: 100%;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 1px solid #C5C5C5;
  background-color: #FFF;
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  transition: all 150ms ease-in-out;
}

.password-strength .weak {
  height: 4px;
  background-color: #E41919;
  border-radius: 100px;
  transition: all 150ms ease-in-out;
}

.password-strength .medium {
  height: 4px;
  background-color: #FBFE51;
  border-radius: 100px;
  transition: all 150ms ease-in-out;
}

.password-strength .strong {
  height: 4px;
  background-color: #02CE6A;
  border-radius: 100px;
  transition: all 150ms ease-in-out;
}