:root {
  --cor-navy: #0F172A;
  --cor-electric-blue: #3B82F6;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', 'Open Sans', sans-serif;
}

body {
  margin: 0;
}

input {
  font-weight: 300;
}

/* Layout principal: dados de login à esquerda, imagem de onboarding à direita */
.login-page {
  display: flex;
  min-height: 100vh;
}

/* Coluna esquerda: marca + formulário */
.login-panel {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: #ffffff;
}

.login-panel__inner {
  width: 100%;
  max-width: 360px;
}

.login-panel__logo {
  display: block;
  width: 120px;
  height: auto;
  margin-bottom: 1.75rem;
  border-radius: 8px;
}

.login-panel__titulo {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--cor-navy);
}

.login-panel__subtitulo {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: #6b7280;
}

.login-panel__erro {
  margin-bottom: 1.25rem;
}

.login-form .field:not(:last-child) {
  margin-bottom: 1.1rem;
}

.login-form__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--cor-navy);
  margin-bottom: 0.4rem;
}

.login-form__obrigatorio {
  color: #9ca3af;
  font-weight: 400;
}

.login-form__input {
  height: auto;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e5ea;
  border-radius: 10px;
  font-size: 0.95rem;
  box-shadow: none;
}

.login-form__input:focus {
  border-color: var(--cor-electric-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.login-form__senha-wrap {
  position: relative;
}

.login-form__senha-wrap .login-form__input {
  padding-right: 2.5rem;
}

.login-form__mostrar-senha {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.login-form__mostrar-senha:hover,
.login-form__mostrar-senha:focus {
  color: #4b5563;
}

.login-form__esqueci {
  margin: -0.35rem 0 1.5rem;
  font-size: 0.85rem;
}

.login-form__esqueci a {
  color: var(--cor-electric-blue);
  text-decoration: none;
}

.login-form__esqueci a:hover {
  text-decoration: underline;
}

.login-form__submit {
  height: auto;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: none;
  background: var(--cor-electric-blue);
  font-weight: 700;
  font-size: 0.95rem;
}

.login-form__submit:hover {
  background: #2f6fe0;
}

/* Coluna direita: identidade Decker/SiacBI (verde da marca, cards com números reais do sistema —
   4 lojas físicas, 3 cidades, 8 módulos — e os módulos em si), ocupa o espaço restante. Some abaixo
   de 769px (ver media query abaixo) — só a coluna de login aparece no celular. */
.onboarding-panel {
  display: none;
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--onb-verde-fundo);
  color: var(--onb-creme);
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
}

:root {
  --onb-verde-fundo: #0F3D2E;
  --onb-verde-bloom-1: #154C3A;
  --onb-verde-bloom-2: #0B2F24;
  --onb-verde-card: rgba(255, 255, 255, 0.06);
  --onb-verde-card-borda: rgba(255, 255, 255, 0.12);
  --onb-laranja: #E2672A;
  --onb-creme: #F4EDE1;
  --onb-menta: #9FC4B0;
  --onb-menta-fraca: rgba(159, 196, 176, 0.7);
}

/* Manchas suaves de fundo — decoração, não competem com o texto (aria-hidden no <aside> inteiro). */
.onboarding-mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
}

.onboarding-mancha--1 { width: 34rem; height: 34rem; top: -11rem; left: -10rem; background: var(--onb-verde-bloom-1); opacity: .55; }
.onboarding-mancha--2 { width: 42rem; height: 42rem; top: 7rem; left: -17rem; background: var(--onb-verde-bloom-2); opacity: .6; }
.onboarding-mancha--3 { width: 27rem; height: 27rem; bottom: 4rem; right: -9rem; background: var(--onb-verde-bloom-1); opacity: .5; }
.onboarding-mancha--4 { width: 19rem; height: 19rem; bottom: -8rem; left: 8rem; background: var(--onb-verde-bloom-2); opacity: .55; }

.onboarding-conteudo {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vw clamp(2rem, 5vw, 4.5rem);
}

.onboarding-marca {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(1.75rem, 4vh, 3.5rem);
}

.onboarding-wordmark {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.onboarding-wordmark__decker {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: var(--onb-creme);
}

.onboarding-wordmark__calcados {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--onb-laranja);
  text-transform: uppercase;
}

.onboarding-divisor {
  width: 1px;
  height: 1.1rem;
  background: rgba(244, 237, 225, 0.28);
}

.onboarding-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--onb-menta);
  text-transform: uppercase;
}

.onboarding-titulo {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 1.1rem;
  max-width: 11em;
  text-wrap: balance;
  color: var(--onb-creme);
}

.onboarding-texto {
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: rgba(244, 237, 225, 0.82);
  max-width: 34em;
  margin: 0 0 clamp(1.75rem, 3.5vh, 2.75rem);
}

.onboarding-texto strong {
  color: var(--onb-creme);
  font-weight: 600;
}

.onboarding-destaque {
  color: var(--onb-laranja);
  font-weight: 600;
}

.onboarding-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 3.5vh, 3rem);
  max-width: 34em;
}

.onboarding-card {
  background: var(--onb-verde-card);
  border: 1px solid var(--onb-verde-card-borda);
  border-radius: 14px;
  padding: 1.1rem 1rem;
  text-align: center;
}

.onboarding-card__numero {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1;
  color: var(--onb-creme);
  font-variant-numeric: tabular-nums;
}

.onboarding-card__legenda {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--onb-menta-fraca);
}

.onboarding-integra-legenda {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--onb-menta);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.onboarding-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.onboarding-chip {
  border: 1px solid rgba(244, 237, 225, 0.3);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--onb-creme);
  background: rgba(244, 237, 225, 0.045);
  white-space: nowrap;
}

/* A partir de telas médias/grandes, divide em duas colunas iguais (50/50) e mostra o onboarding */
@media screen and (min-width: 769px) {
  .login-panel {
    flex: 0 0 50%;
  }

  .onboarding-panel {
    display: block;
    flex: 0 0 50%;
  }
}