/* Acabamento visual do Portal de Importação: ícones consistentes e movimento sutil. */
:root,
button,
input,
select {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.login-copy h1 {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 38px;
  line-height: 1.07;
  font-weight: 350;
  letter-spacing: -.025em;
  color: #32134f;
}

.login-form-side {
  padding: 35px 52px 24px;
}

.login-copy {
  width: 368px;
  max-width: 100%;
  margin-top: 8px;
}

.login-copy > span,
.field input,
.company-value,
.remember {
  font-weight: 400 !important;
}

.login-form-side label {
  color: #32164b;
  font-weight: 600;
}

.login-button > span:first-child {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
}

.login-form-side form,
.exit-block {
  width: 368px;
  max-width: 100%;
}

.login-copy > span {
  color: #6e6380;
}

.field input,
.company-value {
  color: #2f2040;
}

.remember {
  color: #665a70;
}

.login-card {
  width: min(1320px, calc(100vw - 96px));
  height: min(850px, calc(100vh - 64px));
  animation: card-arrival 700ms cubic-bezier(.2,.75,.25,1) both;
  animation-fill-mode: none;
}

.login-shell {
  padding: 32px;
}

.sagol-brand {
  width: 368px;
  max-width: 100%;
  height: 156px;
  flex-basis: 156px;
  background-size: contain !important;
  background-position: center !important;
}

.sagol-brand {
  animation: content-arrival 650ms 100ms cubic-bezier(.2,.75,.25,1) both;
  animation-fill-mode: backwards;
}

.login-copy {
  animation: content-arrival 650ms 170ms cubic-bezier(.2,.75,.25,1) both;
  animation-fill-mode: backwards;
}

.login-form-side form,
.exit-block {
  animation: content-arrival 650ms 240ms cubic-bezier(.2,.75,.25,1) both;
  animation-fill-mode: backwards;
}

.field-icon {
  color: #77727f !important;
  transition: color 180ms ease, transform 180ms ease;
}

.remember {
  width: fit-content;
  justify-content: flex-start;
  padding-right: 0;
}

@media (max-width: 1200px) and (min-width: 981px) {
  .login-card {
    width: calc(100vw - 64px);
    height: calc(100vh - 64px);
  }
}

.field-icon svg,
#togglePassword svg,
.company-chevron svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
}

.field:focus-within .field-icon,
.company-dropdown.open .field-icon,
.field:hover .field-icon {
  color: #502067 !important;
}

.field:focus-within .field-icon {
  transform: translateY(-1px);
}

#togglePassword {
  color: #77727f;
  transition: color 180ms ease, background-color 180ms ease;
}

#togglePassword:hover,
#togglePassword:focus-visible {
  color: #502067;
  background: #f6f1f8 !important;
  outline: none;
}

.login-art {
  isolation: isolate;
}

.login-art::after,
.ambient-light {
  display: none;
}

.animated-waves {
  position: absolute;
  z-index: 2;
  right: -18%;
  bottom: -19%;
  width: 123%;
  height: 54%;
  pointer-events: none;
  opacity: .28;
  transform: rotate(-7deg);
  mix-blend-mode: screen;
  animation: wave-group-arrival 1200ms 250ms cubic-bezier(.18,.72,.25,1) both;
}

.animated-waves > i {
  position: absolute;
  width: 100%;
  height: 120%;
  border: 13px solid rgba(181,120,216,.48);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  animation: wave-drift 11s ease-in-out infinite alternate;
}

.animated-waves > i:nth-child(2) {
  inset: 62px 0 0 8%;
  border-width: 9px;
  opacity: .72;
  animation-duration: 14s;
  animation-delay: -3s;
}

.animated-waves > i:nth-child(3) {
  inset: 119px 0 0 16%;
  border-width: 6px;
  opacity: .5;
  animation-duration: 17s;
  animation-delay: -6s;
}

.art-copy {
  animation: art-copy-arrival 800ms 230ms cubic-bezier(.2,.75,.25,1) both;
  animation-fill-mode: backwards;
}

.art-signature {
  animation: signature-arrival 800ms 420ms cubic-bezier(.2,.75,.25,1) both;
  animation-fill-mode: backwards;
}

@keyframes card-arrival {
  from { opacity: 0; transform: translateY(12px) scale(.992); box-shadow: 0 10px 35px rgba(34,20,55,.07); }
  to { opacity: 1; transform: none; }
}

@keyframes content-arrival {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes art-copy-arrival {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: none; }
}

@keyframes signature-arrival {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes wave-group-arrival {
  from { opacity: 0; transform: translate(90px, 45px) rotate(-7deg); }
  to { opacity: .28; transform: translate(0, 0) rotate(-7deg); }
}

@keyframes wave-drift {
  from { transform: translate3d(-10px, 2px, 0) scale(1); }
  to { transform: translate3d(18px, -7px, 0) scale(1.012); }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .sagol-brand,
  .login-copy,
  .login-form-side form,
  .exit-block,
  .animated-waves,
  .animated-waves > i,
  .art-copy,
  .art-signature {
    animation: none !important;
  }
}