/* Login do painel Gerizim — linguagem visual do app (Fase 16 do ciclo Painel web e Caixa 2.0).
   Hero da dashboard do app: céu em gradiente + montanhas + cruz, com a geometria
   proporcional do mockup dashboard.png (bloco 853x493 px) replicada em porcentagem.
   Nenhuma cor inline na view: todo valor visual vem dos tokens --gz-*.
   Tema escuro pela escolha salva (html[data-theme], localStorage.preferred_theme) e,
   sem escolha, pela preferência do sistema (Macrofase 40). */

:root {
  --gz-primary: #2E7D32;
  --gz-primary-mid: #43A047;
  --gz-primary-mid-aa: #318136;
  --gz-primary-dark: #1B5E20;
  --gz-primary-bg: #E8F5E9;
  --gz-primary-border: #A5D6A7;
  --gz-card: #FFFFFF;
  --gz-border: #E0E0E0;
  --gz-surface: #FAFAFA;
  --gz-surface-rgb: 250, 250, 250;
  --gz-text: #212121;
  --gz-text-muted: #616161;
  --gz-error: #EF5350;
  --gz-error-text: #B3261E;
  --gz-error-bg: #FDECEA;
  --gz-field-bg: #F8FCF8;
  --gz-field-border: #A5D6A7;
  --gz-icon: #1B5E20;
  --gz-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
  --gz-radius-md: 14px;
  --gz-radius-lg: 20px;
  --gz-font: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Camadas do hero (scrim, fade) e realces do login — mesmo valor nos dois temas;
     o fade acompanha --gz-surface-rgb, redefinido nos blocos escuros. O texto sobre
     o hero é --gz-text-on-hero (gz-theme.css). */
  --gz-login-scrim-top: rgba(0, 0, 0, 0.4);
  --gz-login-scrim-mid: rgba(0, 0, 0, 0.102);
  --gz-login-scrim-clear: rgba(0, 0, 0, 0);
  --gz-login-brand-scrim-top: rgba(0, 0, 0, 0.55);
  --gz-login-fade-0: rgba(var(--gz-surface-rgb), 0);
  --gz-login-fade-1: rgba(var(--gz-surface-rgb), 0.2353);
  --gz-login-fade-2: rgba(var(--gz-surface-rgb), 0.7451);
  --gz-login-fade-3: rgba(var(--gz-surface-rgb), 1);
  --gz-login-focus-ring: rgba(46, 125, 50, 0.18);
  --gz-login-shadow-submit: 0 4px 12px rgba(67, 160, 71, 0.35);
}

/* Escuro por escolha explícita do usuário (localStorage.preferred_theme) */
:root[data-theme="dark"] {
  --gz-card: #1E1E1E;
  --gz-border: #333333;
  --gz-surface: #121212;
  --gz-surface-rgb: 18, 18, 18;
  --gz-text: #FAFAFA;
  --gz-text-muted: #B0B0B0;
  --gz-error-text: #FFB4AB;
  --gz-error-bg: #3B1513;
  --gz-field-bg: #1F2A20;
  --gz-field-border: #2E7D32;
  --gz-icon: #A5D6A7;
  --gz-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.16);
}

/* Fallback do sistema, só quando não há escolha explícita de tema claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gz-card: #1E1E1E;
    --gz-border: #333333;
    --gz-surface: #121212;
    --gz-surface-rgb: 18, 18, 18;
    --gz-text: #FAFAFA;
    --gz-text-muted: #B0B0B0;
    --gz-error-text: #FFB4AB;
    --gz-error-bg: #3B1513;
    --gz-field-bg: #1F2A20;
    --gz-field-border: #2E7D32;
    --gz-icon: #A5D6A7;
    --gz-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.16);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gz-font);
  color: var(--gz-text);
  background-color: var(--gz-surface);
  overflow-x: hidden;
}

/* ── Página ─────────────────────────────────────────────────────────────── */
.gz-login {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Hero (céu → montanhas → cruz → scrim → fade) ───────────────────────── */
.gz-login__hero {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.gz-login__sky,
.gz-login__mountains,
.gz-login__cross,
.gz-login__scrim,
.gz-login__fade { position: absolute; }

.gz-login__sky {
  inset: 0;
  background-image: linear-gradient(
    180deg,
    #2273AD 0%,
    #97A5B2 38%,
    #CFA888 62%,
    #D09165 74%,
    #AD6057 82%,
    #37374A 95%,
    #243452 100%
  );
}

/* Recorte x∈[0,853] y∈[350,493] px do mockup. */
.gz-login__mountains {
  left: 0;
  width: 100%;
  top: 70.9939%;
  height: 29.0061%;
  background-image: url('/img/login/home_hero_mountains.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Recorte x∈[563,853] y∈[101,516] px do mockup, mesma escala das montanhas.
   O feather de 32 px do mockup equivale a 11.0345% da largura da cruz — referência
   do app. O PNG é RGB sem alpha e já contém o próprio céu, então a renderização
   web exige uma transição progressiva até 42% para evitar a emenda retangular
   contra o gradiente CSS (SF22-T01). */
.gz-login__cross {
  left: 66.0023%;
  width: 33.9977%;
  top: 20.4868%;
  height: 84.1785%;
  background-image: url('/img/login/home_hero_cross.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 8%,
    rgba(0, 0, 0, 0.55) 24%,
    #000 42%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 8%,
    rgba(0, 0, 0, 0.55) 24%,
    #000 42%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.gz-login__scrim {
  inset: 0;
  background-image: linear-gradient(
    180deg,
    var(--gz-login-scrim-top) 0%,
    var(--gz-login-scrim-mid) 45%,
    var(--gz-login-scrim-clear) 78%
  );
}

.gz-login__fade {
  left: 0;
  right: 0;
  bottom: 0;
  height: max(88px, 42%);
  background-image: linear-gradient(
    180deg,
    var(--gz-login-fade-0) 0%,
    var(--gz-login-fade-1) 45%,
    var(--gz-login-fade-2) 78%,
    var(--gz-login-fade-3) 100%
  );
}

/* ── Conteúdo sobre o hero ──────────────────────────────────────────────── */
.gz-login__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Scrim próprio do wordmark: garante >= 4.5:1 do texto sobre o hero
   (--gz-text-on-hero) em qualquer parada do céu (pior caso: a parada de 62 %
   com 0.40 de preto = 5.47:1). ThemeLayoutTest::test_h24 recalcula esse piso. */
.gz-login__brand {
  position: relative;
  width: 100%;
  padding: 28px 0 20px;
  text-align: center;
}

.gz-login__brand::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100vw;
  height: 100%;
  background-image: linear-gradient(180deg, var(--gz-login-brand-scrim-top) 0%, var(--gz-login-scrim-top) 100%);
  z-index: -1;
}

.gz-login__wordmark {
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--gz-text-on-hero);
}

/* Toggle de tema do login (Macrofase 40): fica sobre o scrim do wordmark, então usa a
   mesma cor de texto sobre o hero (contraste >= 4.5:1 nos dois temas), só com tokens. */
.gz-login__theme {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid currentColor;
  border-radius: var(--gz-radius-md); color: var(--gz-text-on-hero); cursor: pointer;
}
.gz-login__theme:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--gz-primary-border); }

/* ── Cartão ─────────────────────────────────────────────────────────────── */
.gz-login__card {
  width: 100%;
  max-width: 440px;
  margin: 24px 0;
  padding: 28px 20px 24px;
  background-color: var(--gz-card);
  border: 1px solid var(--gz-border);
  border-radius: var(--gz-radius-lg);
  box-shadow: var(--gz-shadow-card);
}

.gz-login__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--gz-text);
}

.gz-login__subtitle {
  margin: 4px 0 24px;
  font-size: 12px;
  color: var(--gz-text-muted);
}

.gz-login__form { margin: 0; }

/* ── Campos ─────────────────────────────────────────────────────────────── */
.gz-field {
  position: relative;
  margin-bottom: 20px;
}

.gz-field__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--gz-icon);
  pointer-events: none;
}

.gz-field__input {
  width: 100%;
  min-height: 54px;
  padding: 16px 16px 16px 48px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gz-text);
  background-color: var(--gz-field-bg);
  border: 1px solid var(--gz-field-border);
  border-radius: var(--gz-radius-md);
  appearance: none;
}

.gz-field__input--password { padding-right: 104px; }

.gz-field__input::placeholder { color: var(--gz-text-muted); opacity: 1; }

.gz-field__input:focus {
  outline: none;
  border-color: var(--gz-primary);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px var(--gz-login-focus-ring);
}

.gz-field__input[aria-invalid="true"] { border-color: var(--gz-error); border-width: 1.5px; }

.gz-field__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--gz-primary-dark);
  background-color: var(--gz-primary-bg);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .gz-field__toggle { color: var(--gz-primary-border); background-color: var(--gz-field-bg); }
}

/* A escolha explícita de tema (Macrofase 40) vence a preferência do sistema, só com tokens. */
[data-theme="dark"] .gz-field__toggle { color: var(--gz-primary-border); background-color: var(--gz-field-bg); }
@media (prefers-color-scheme: dark) {
  [data-theme="light"] .gz-field__toggle { color: var(--gz-primary-dark); background-color: var(--gz-primary-bg); }
}

.gz-field__toggle:focus-visible { outline: 2px solid var(--gz-primary); outline-offset: 2px; }

/* ── Região de erro persistente (contrato do LoginAccessibilityTest) ────── */
.gz-login__error {
  margin-bottom: 16px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--gz-error-text);
  background-color: var(--gz-error-bg);
  border: 1px solid var(--gz-error);
  border-radius: 8px;
}

/* ── Botão ──────────────────────────────────────────────────────────────── */
.gz-login__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--gz-text-on-primary);
  background-image: linear-gradient(90deg, var(--gz-primary) 0%, var(--gz-primary-mid-aa) 100%);
  border: 0;
  border-radius: var(--gz-radius-md);
  box-shadow: var(--gz-login-shadow-submit);
  cursor: pointer;
}

.gz-login__submit .bi { font-size: 20px; line-height: 1; }

.gz-login__submit:hover { background-image: linear-gradient(90deg, var(--gz-primary-dark) 0%, var(--gz-primary) 100%); }

.gz-login__submit:focus-visible { outline: 3px solid var(--gz-primary-border); outline-offset: 2px; }

/* ── Rodapé (dentro da faixa opaca do fade) ─────────────────────────────── */
.gz-login__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 16px 0 20px;
  font-size: 11px;
  color: var(--gz-text-muted);
  background-color: var(--gz-surface);
  margin-top: auto;
}

.gz-login__version { font-size: 10px; }
.gz-login__build { opacity: .7; }

/* ── Responsivo ─────────────────────────────────────────────────────────── */
/* >= 992 px: cartão à esquerda, cruz visível à direita. */
@media (min-width: 992px) {
  .gz-login__content { align-items: flex-start; padding: 0 48px; }
  .gz-login__brand { text-align: left; padding-left: 4px; }
  .gz-login__card { margin: 16px 0 32px; }
  .gz-login__footer { align-items: flex-start; padding-left: 4px; }
}

/* < 360 px: nada pode transbordar. */
@media (max-width: 359px) {
  .gz-login__content { padding: 0 12px; }
  .gz-login__card { padding: 20px 14px 18px; }
  .gz-login__wordmark { font-size: 34px; }
  .gz-field__input { padding-left: 44px; }
  .gz-field__input--password { padding-right: 44px; }
  .gz-field__toggle-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}