/* THADOS / MICROSET LOGIN - versão profissional */

:root {
  --microset-core-1: #2D2B55;
  --microset-core-2: #393B82;
  --microset-core-3: #5B70B6;
  --microset-blue: #3F6EB3;
  --microset-light-blue: #86A9D8;
  --microset-gray: #C9C9C9;
  --microset-soft: #F4F6F6;
}

/*
  Remove o círculo/halo cinza antigo.
  Mantém o logo limpo.
*/
.logo-orb,
.logo-circle,
.brand-circle,
.login-logo-bg,
.circle-bg,
.logo-bg,
.brand-orb,
.orb,
.halo,
.login-halo,
.logo-wrapper::before,
.logo-container::before,
.brand-logo-wrap::before,
.login-logo-wrap::before {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/*
  Painel esquerdo / área visual.
  Não colocamos mais o SVG em cima do logo.
  Agora ele entra como elemento decorativo lateral.
*/
.login-left,
.login-brand,
.brand-side,
.login-visual,
.left-panel,
.auth-left,
.login-hero,
.brand-panel {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
}

/*
  Elemento principal de transporte:
  pequeno, deslocado para a esquerda/baixo, sem competir com o logo.
*/
.login-left::before,
.login-brand::before,
.brand-side::before,
.login-visual::before,
.left-panel::before,
.auth-left::before,
.login-hero::before,
.brand-panel::before {
  content: "" !important;
  position: absolute !important;
  left: -90px !important;
  bottom: -42px !important;
  width: 500px !important;
  height: 330px !important;
  background-image: url("/static/brand/transport-elements.svg") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left bottom !important;
  opacity: .16 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  filter: saturate(.9) contrast(.96) !important;
}

/*
  Arcos discretos inspirados no fechamento do brandbook,
  mas sem aquele círculo pesado atrás do logo.
*/
.login-left::after,
.login-brand::after,
.brand-side::after,
.login-visual::after,
.left-panel::after,
.auth-left::after,
.login-hero::after,
.brand-panel::after {
  content: "" !important;
  position: absolute !important;
  left: -210px !important;
  bottom: -230px !important;
  width: 430px !important;
  height: 430px !important;
  border-radius: 999px !important;
  border: 18px solid rgba(134,169,216,.18) !important;
  box-shadow:
    0 0 0 28px rgba(63,110,179,.10),
    0 0 0 54px rgba(201,201,201,.08) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/*
  Garante que logo e formulário fiquem sempre por cima.
*/
.login-left > *,
.login-brand > *,
.brand-side > *,
.login-visual > *,
.left-panel > *,
.auth-left > *,
.login-hero > *,
.brand-panel > * {
  position: relative !important;
  z-index: 2 !important;
}

/*
  Logo com fundo branco elegante, se existir wrapper.
*/
.brand-logo-wrap,
.login-logo-wrap,
.logo-wrapper,
.logo-container {
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(221,228,234,.95) !important;
  box-shadow: 0 14px 34px rgba(45,43,85,.08) !important;
  backdrop-filter: blur(8px) !important;
}

/*
  Caso o logo seja uma imagem simples sem wrapper:
  mantém ele limpo e com presença.
*/
.login-left img,
.login-brand img,
.brand-side img,
.login-visual img,
.left-panel img,
.auth-left img,
.login-hero img,
.brand-panel img {
  position: relative !important;
  z-index: 3 !important;
}

/*
  Mobile: reduz ainda mais a textura para não poluir.
*/
@media (max-width: 900px) {
  .login-left::before,
  .login-brand::before,
  .brand-side::before,
  .login-visual::before,
  .left-panel::before,
  .auth-left::before,
  .login-hero::before,
  .brand-panel::before {
    opacity: .10 !important;
    width: 420px !important;
    left: -140px !important;
  }
}