/* Painel GO — tela de entrada, na moldura de acesso do ZAVIX CRM (22/09/2026).
 *
 * A estrutura é a que o dono aprovou no CRM (r205): painel de marca à esquerda, com fundo
 * trabalhado — dois radiais (violeta e ciano) sobre um linear diagonal grafite, mais os anéis
 * feitos com sombra —, onda de sinal de nove barras e a assinatura verbal do guia; formulário à
 * direita, seguindo o tema. Abaixo de 1024 px o painel de marca sai (roubaria a altura do
 * formulário) e a assinatura aparece no topo do cartão.
 *
 * Só o invólucro mudou. Campos, ids, MFA, "Voltar ao login", erro e login.mjs são os de antes.
 * Cores e tipografia vêm de zavix.css; aqui não há hex de marca.
 */
:root {
  font-family: var(--zx-font-sans);
  background: var(--zx-bg);
  color: var(--zx-text);
}

* { box-sizing: border-box }
body { margin: 0; min-height: 100vh }

.zx-acesso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--zx-bg);
}

.zx-acesso-marca { display: none }

.zx-acesso-painel {
  position: relative;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--zx-bg), var(--zx-surface));
}

main { width: 100%; max-width: 448px }

/* Em tela estreita a assinatura fica no topo do cartão; no desktop ela já está no painel. */
.brand { display: flex; justify-content: center; margin: 0 0 28px }
.brand .zx-marca-go { width: 199px; height: 44px }

section {
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-lg);
  padding: 32px;
  box-shadow: var(--zx-shadow-md);
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zx-link);
}
h1 { font-size: 28px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; margin: 14px 0 }
p { color: var(--zx-text-muted); font-size: 14px; line-height: 1.6; margin: 0 0 24px }
label { display: block; font-size: 14px; font-weight: 600; margin: 20px 0 9px }

/* Limite de campo com 3:1 contra a superfície (o cinza-500 do kit, medido nos dois temas). */
input {
  width: 100%;
  background: var(--zx-surface-2);
  border: 1px solid var(--zx-border-strong);
  border-radius: var(--zx-radius-sm);
  padding: 13px;
  font: inherit;
  color: var(--zx-text);
  min-height: 46px;
}

button {
  width: 100%;
  border: 0;
  border-radius: var(--zx-radius-md);
  margin-top: 24px;
  padding: 14px;
  background: var(--zx-primary);
  color: var(--zx-primary-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
button:hover:not(:disabled) { background: var(--zx-primary-hover) }
button:disabled { opacity: .65; cursor: wait }

#back {
  margin-top: 12px;
  background: transparent;
  color: var(--zx-text-muted);
  border: 1px solid var(--zx-border-strong);
}
#back:hover:not(:disabled) { background: var(--zx-surface-2) }

.recover { display: block; text-align: center; color: var(--zx-link); font-weight: 500; margin: 22px 0; font-size: 14px }
.note { font-size: 12px; text-align: center; margin: 0 }
main > footer { color: var(--zx-text-subtle); font-size: 12px; text-align: center; margin-top: 22px }

#error {
  padding: 12px;
  margin: 18px 0 0;
  border-radius: var(--zx-radius-sm);
  color: var(--zx-danger-forte);
  background: var(--zx-danger-soft);
  border: 1px solid color-mix(in srgb, var(--zx-danger) 35%, transparent);
  font-size: 13px;
}
#mfa-help { margin: 8px 0 12px }

/* Todo controle tem indicador de foco; o deslocamento mantém o anel fora do preenchimento. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--zx-focus);
  outline-offset: 2px;
}

[hidden] { display: none !important }

@media (max-width: 400px) {
  section { padding: 24px }
  h1 { font-size: 25px }
}

/* ─────────── Painel de marca: o padrão do CRM, com as cores da ZAVIX ─────────── */
@media (min-width: 1024px) {
  .zx-acesso { grid-template-columns: 1.05fr 0.95fr }

  .zx-acesso-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding: 9vh 5vw;
    color: #F1F5F9;
    background:
      radial-gradient(circle at 72% 26%, color-mix(in srgb, var(--zx-violet) 26%, transparent), transparent 42%),
      radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--zx-cyan) 18%, transparent), transparent 46%),
      linear-gradient(145deg, #0B1220, #111A2E 58%, #0B1220);
  }

  /* Os anéis: um círculo com duas sombras concêntricas. Decoração pura, sem conteúdo. */
  .zx-acesso-marca::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -110px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--zx-blue) 22%, transparent);
    box-shadow:
      0 0 0 80px color-mix(in srgb, var(--zx-blue) 4%, transparent),
      0 0 0 160px color-mix(in srgb, var(--zx-violet) 3%, transparent);
  }

  .zx-acesso-marca-conteudo { position: relative; z-index: 1; max-width: 560px }

  /* O painel é escuro mesmo no tema claro: a versão do arquivo acompanha o FUNDO, não o tema. */
  .zx-acesso-logotipo {
    display: block;
    width: 199px;
    height: 44px;
    margin-bottom: 8vh;
    background-image: url("/manager/marca/zavix-go-escuro.svg");
  }

  .zx-acesso-marca h1 {
    font: 800 clamp(34px, 3.4vw, 54px)/1.06 var(--zx-font-sans);
    letter-spacing: -0.04em;
    margin: 16px 0 0;
    color: #F1F5F9;
  }

  .zx-acesso-frase {
    max-width: 480px;
    margin: 18px 0 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #CBD5E1;
  }

  /* Onda de sinal: nove barras no gradiente da marca. */
  .zx-acesso-ondas { display: flex; align-items: center; gap: 7px; height: 96px; margin-top: 7vh; opacity: 0.75 }
  .zx-acesso-ondas i { display: block; width: 4px; height: 18px; border-radius: 4px; background: var(--zx-cyan-light) }
  .zx-acesso-ondas i:nth-child(2), .zx-acesso-ondas i:nth-child(8) { height: 34px; background: var(--zx-blue) }
  .zx-acesso-ondas i:nth-child(3), .zx-acesso-ondas i:nth-child(7) { height: 54px; background: var(--zx-blue) }
  .zx-acesso-ondas i:nth-child(4), .zx-acesso-ondas i:nth-child(6) { height: 74px; background: var(--zx-violet) }
  .zx-acesso-ondas i:nth-child(5) { height: 96px; background: var(--zx-violet) }

  .zx-acesso-rodape {
    position: absolute;
    bottom: 6vh;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #94A3B8;
  }

  /* Com a marca grande à esquerda, a assinatura no cartão seria a mesma coisa duas vezes. */
  .zx-acesso-painel .brand { display: none }
}

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