/* ============================================================================
   AIONSAT CRM — TELA DE AUTENTICAÇÃO (login / criar conta / recuperar senha)
   Conceito: painel de marca (esquerda) com o "signature" — uma grade animada
   que funde dois mundos do negócio: nó de circuito (CFTV/alarme) e célula
   solar (energia solar) — + painel de formulário (direita).
   ============================================================================ */


.auth-shell {
  min-height: 100vh;
  min-height: 100dvh; /* dvh: desconta a barra do navegador no celular */
  display: grid;
  grid-template-columns: 1fr;
  font-family: var(--fonte-texto);
}

@media (min-width: 900px) {
  .auth-shell {
    grid-template-columns: 1.1fr 1fr;
  }
}

/* ---------- Painel de marca (signature element) ---------- */
.auth-brand {
  position: relative;
  overflow: hidden;
  background: var(--color-secondary);
  color: #F3F4F6;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
}

@media (min-width: 900px) {
  .auth-brand {
    padding: 3.5rem;
    min-height: 100vh;
    min-height: 100dvh; /* dvh: desconta a barra do navegador no celular */
  }
}

.auth-brand-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15, 98, 254, 0.35) 1.5px, transparent 0);
  background-size: 28px 28px;
  /* Movimento finito (WCAG 2.2.2): 3 ciclos e para */
  animation: gridDrift 18s linear 3;
  opacity: 0.6;
}

.auth-brand-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  top: -120px;
  right: -120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--acento-sol) 35%, transparent), rgba(15, 98, 254, 0.25) 45%, transparent 70%);
  filter: blur(10px);
  animation: glowPulse 7s ease-in-out 3;
}

.auth-brand-trace {
  position: absolute;
  border: 1px solid rgba(15, 98, 254, 0.4);
  border-radius: var(--radius-lg);
}

.auth-brand-trace--1 { width: 140px; height: 140px; top: 18%; left: 8%; transform: rotate(12deg); }
.auth-brand-trace--2 { width: 90px; height: 90px; bottom: 14%; left: 22%; transform: rotate(-8deg); }

/* Fora da tela (celular, depois de rolar até o formulário) não há por que
   continuar animando — utils/movimento.js → pausarForaDaTela */
.auth-brand.fora-da-tela .auth-brand-grid,
.auth-brand.fora-da-tela .auth-brand-glow {
  animation-play-state: paused;
}

@keyframes gridDrift {
  from { background-position: 0 0; }
  to { background-position: 280px 280px; }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

.auth-brand-content {
  position: relative;
  z-index: 1;
}

.auth-brand-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: var(--texto-grande);
  letter-spacing: -0.01em;
}

.auth-brand-logo .bi {
  color: var(--color-primary-text);
  font-size: var(--icone-grande);
}

.auth-brand-headline {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 2rem 0 0.75rem;
  max-width: 20ch;
  color: #F9FAFB; /* painel de marca é sempre escuro (o h1 global vinha escuro) */
}

.auth-brand-sub {
  color: #9CA3AF;
  font-size: var(--texto-base);
  max-width: 34ch;
}

.auth-brand-footnote {
  position: relative;
  z-index: 1;
  font-size: var(--texto-micro);
  color: #9CA3AF; /* painel de marca é sempre escuro: 7:1 */
  font-family: var(--fonte-codigo);
}

/* ---------- Painel de formulário ---------- */
.auth-form-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem 3rem;
  background: var(--bg-body);
}

/* No celular o botão flutuante do WhatsApp (52px, fixo no canto) cobria
   "Esqueci minha senha" e o botão Entrar. Reserva o espaço dele no fim do
   formulário para tudo poder rolar para cima do botão. */
@media (max-width: 899.98px) {
  .auth-form-panel {
    padding-bottom: calc(52px + 2.5rem + env(safe-area-inset-bottom, 0px));
  }
}

.auth-form-card {
  width: 100%;
  max-width: 400px;
}

.auth-theme-toggle {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
}

.auth-whatsapp-suporte {
  position: fixed;
  right: 1.25rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #1DA851; /* branco sobre ele: 3,1:1 (ícone) */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icone-grande);
  box-shadow: var(--shadow-md);
  z-index: 50;
  transition: transform var(--dur-feedback) var(--ease-chegada);
}

.auth-whatsapp-suporte:hover {
  color: #fff;
}

.auth-whatsapp-suporte:active {
  transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
  .auth-whatsapp-suporte:hover {
    transform: scale(1.06);
  }
}

.auth-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-surface-alt);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 1.75rem;
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--texto-pequeno);
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.auth-tab.active {
  background: var(--bg-surface);
  color: var(--color-primary-text);
  box-shadow: var(--shadow-sm);
}

.auth-view {
  display: none;
}

.auth-view.active {
  display: block;
  animation: viewFade 220ms ease;
}

@keyframes viewFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Reduzir movimento: a grade e o brilho do painel de marca ficam parados
   (continuam lá, só não se mexem); a troca de aba só esmaece. */
@media (prefers-reduced-motion: reduce) {
  .auth-brand-grid,
  .auth-brand-glow {
    animation: none;
  }

  .auth-view.active {
    animation-name: viewFadeReduzido;
  }

  @keyframes viewFadeReduzido {
    from { opacity: 0; }
  }

  .auth-whatsapp-suporte:hover {
    transform: none;
  }
}

.auth-title {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: var(--texto-titulo);
  margin-bottom: 0.25rem;
}

.auth-subtitle {
  color: var(--text-secondary);
  font-size: var(--texto-pequeno);
  margin-bottom: 1.5rem;
}

.auth-form .form-label {
  font-size: var(--texto-pequeno);
  font-weight: 600;
  color: var(--text-primary);
}

.auth-form .form-control {
  border-radius: var(--radius-sm);
  border-color: var(--border-color);
  padding: 0.65rem 0.9rem;
  background: var(--bg-surface);
  color: var(--text-primary);
}

.auth-form .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(15, 98, 254, 0.15);
}

.auth-submit {
  width: 100%;
  padding: 0.7rem;
  font-weight: 600;
  border: none;
  color: #fff;
}

.auth-alert {
  display: none;
  font-size: var(--texto-pequeno);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  margin-bottom: 1rem;
}

.auth-alert.show {
  display: block;
}

.auth-alert--error {
  background: var(--tom-vermelho-fundo);
  color: var(--tom-vermelho-texto);
}

.auth-alert--success {
  background: var(--tom-verde-fundo);
  color: var(--tom-verde-texto);
}

.auth-texto-erro {
  color: var(--tom-vermelho-texto);
  font-size: var(--texto-micro);
}

.auth-switch {
  text-align: center;
  font-size: var(--texto-pequeno);
  color: var(--text-secondary);
  margin-top: 1.25rem;
}

.auth-switch a {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   ÁREA SEGURA (iPhone com notch / ilha / barra de início)
   A meta viewport de todas as páginas usa viewport-fit=cover: a página ocupa
   a tela inteira e estas margens afastam o conteúdo da barra de status e da
   barra de início. env(safe-area-inset-*) vale 0 em qualquer aparelho sem
   notch — lá nada muda.
   -------------------------------------------------------------------------- */
.auth-theme-toggle {
  top: max(1.25rem, env(safe-area-inset-top));
  right: max(1.25rem, env(safe-area-inset-right));
}

.auth-whatsapp-suporte {
  right: max(1.25rem, env(safe-area-inset-right));
}

/* Olho de mostrar/esconder senha (assets/js/utils/olho-senha.js) */
.campo-senha {
  position: relative;
}

.auth-form .campo-senha .form-control {
  padding-right: 3rem;
}

.campo-senha-olho {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.campo-senha-olho:hover {
  color: var(--text-primary);
}

.campo-senha-olho:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

/* Oferta de parceiro no cadastro (login.html?parceiro=<link>) */
.auth-alert--oferta {
  background: var(--tom-ambar-fundo);
  color: var(--tom-ambar-texto);
  font-weight: 600;
}

.assinar-desconto {
  color: var(--tom-ambar-texto);
  margin-top: 0.5rem;
}

/* Botão "Instalar o app" (assets/js/utils/instalar-app.js) */
.auth-instalar {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  min-height: 44px;
  font-size: var(--texto-pequeno);
  color: var(--color-primary-text);
  text-decoration: none;
}

.auth-instalar:hover { text-decoration: underline; }

/* "Baixar o app para Android" colado ao "Instalar o app" quando os dois aparecem */
.btn-instalar-app:not(.d-none) + #link-app-android { margin-top: 0; }