/* ===========================================
   FLUXO DE AUTENTICAÇÃO
   ======================================== */
.auth-section {
  display: flex;
  flex-direction: column;
  /* `safe center`: centraliza quando cabe, mas alinha ao TOPO (e deixa rolar)
     quando o conteúdo não cabe — ex.: teclado aberto encolhendo a área
     (interactive-widget=resizes-content). Sem o `safe`, a centralização em flex
     empurraria o topo do conteúdo para fora da área rolável (inalcançável) e o
     campo focado poderia ficar atrás do teclado. */
  justify-content: safe center;
  align-items: center;
  min-height: 100%;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  text-align: center;
  animation: stepFadeIn 0.3s ease-out forwards;
}

/* Especificidade composta (0,2,0) para vencer o `.icon { font-size:24px }`
   injetado pela folha do Google, independentemente da ordem de carregamento. */
.icon.auth-section__icon-hero {
  font-size: clamp(7rem, 32vw, 11rem);
  display: block;
  margin-top: 2rem;
  margin-bottom: 2rem;
  color: var(--a-gold);
}

/* .auth-section é usada só no #view-auth (intro/telefone/OTP) e no #view-install,
   ambos com fundo verde — por isso os textos base já nascem claros. */
.auth-section__title {
  color: var(--t-light);
  font-size: var(--fs-13);
  font-weight: var(--fw-heavy);
  line-height: 1.1;
}

.auth-section__text {
  max-width: 420px;
  color: var(--p-green-light);
  font-size: var(--fs-9);
  line-height: 1.5;
}

/* Número de telefone na tela do OTP: cor de texto NEUTRA (não dourada). O
   dourado passou a denotar ação clicável — o número é só informação, então não
   deve parecer um link. Preto seria ilegível no fundo verde escuro; --t-light
   (branco) é o "texto normal" deste tema escuro, prominente mas sem cara de
   link. Sobrepõe o dourado de `.text-accent` (id > classe). */
#text-display-phone {
  color: var(--t-light);
}

/* Intencional: container vazio gerenciado dinamicamente pelo Firebase reCAPTCHA */
.auth-section__captcha {}

/* Suprime o badge visual do reCAPTCHA (uso declarado nos termos legais do form) */
.grecaptcha-badge {
  visibility: hidden;
}

.auth-section__legal {
  margin-top: 15px;
  padding: 0 10px;
  color: var(--p-green-light);
  font-size: var(--fs-3);
  line-height: 1.4;
}

.auth-section__legal a {
  color: var(--a-gold);
  font-weight: var(--fw-medium);
  text-decoration: underline;
}

.auth-section__cooldown {
  margin-top: var(--space-md);
  color: var(--p-green-light);
  font-size: var(--fs-6);
}

/* OTP — UM input invisível sobre 6 células visuais.
   Um único campo mantém o foco o tempo todo, então o teclado não "pisca"/balança
   como acontecia ao mover o foco entre 6 inputs separados. As 6 células dão a
   estética de dígitos individuais; o input (texto/caret transparentes) cobre
   toda a área para capturar toque e teclado. Estados das células em auth.js:
   `otp-cell--filled` (tem dígito) e `otp-cell--active` (célula do cursor). */
.otp-field {
  position: relative;
  margin: var(--space-md) 0;
}

.otp-cells {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  pointer-events: none; /* cliques atravessam para o input por cima */
}

.otp-cell {
  width: 45px;
  height: 55px;
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  font-weight: var(--fw-heavy);
  color: var(--t-main);
  transition: background 0.15s ease;
}

.otp-cell--filled {
  background: var(--bg-white);
}

/* Célula ativa (posição atual) = mudança de COR (tint verde-claro), não sombra. */
.otp-cell--active {
  background: var(--p-green-light);
}

.otp-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: transparent;        /* o dígito aparece nas células, não no input */
  caret-color: transparent;  /* cursor simulado pela célula --active */
  text-align: center;
  font-size: var(--fs-12);   /* mantém o teclado numérico; texto é invisível */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ===========================================
   INTRO — CARROSSEL DE APRESENTAÇÃO
   3 painéis com deslize horizontal (scroll-snap nativo)
   + dots sincronizados via JS (auth.js)
   ======================================== */
.intro-carousel {
  width: 100%;
}

.intro-carousel__track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
}

.intro-carousel__track::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
}

.intro-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;         /* impede pular 2 painéis num arrasto forte */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: 0 var(--space-sm);
  box-sizing: border-box;
}

/* Mesmo truque de especificidade composta do icon-hero, em escala menor
   para caber junto do título + texto + dots + botão sem rolagem vertical.
   ALTURA FIXA (= font-size) + centralização flex: define o "slot" de ícone que
   TODOS os 3 slides compartilham (glifos e logo), garantindo que título e texto
   comecem no mesmo Y — sem isso, ícones de alturas diferentes desalinhavam o
   conteúdo ao deslizar entre os painéis. */
.icon.intro-carousel__icon {
  font-size: clamp(5.5rem, 26vw, 8.5rem);
  height: clamp(5.5rem, 26vw, 8.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  color: var(--a-gold);
}

.intro-carousel__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.intro-carousel__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 99px;
  background: var(--border-mid);
  cursor: pointer;
  transition: var(--transition);
}

.intro-carousel__dot--active {
  width: 22px;
  background: var(--p-green);
}

/* ===========================================
   FUNDO VERDE — fluxo de auth (intro + telefone + OTP) e tela de instalação
   Todo o #view-auth e o #view-install têm fundo verde. Inputs (telefone, OTP)
   e os cards de passos da instalação têm fundo claro/soft e se destacam
   sozinhos; só os textos/botões diretos sobre o verde é que mudam de cor.
   ======================================== */
#view-auth.screen {
  background: var(--p-green);
}

/* A tela de instalação usa o verde escuro canvas (o mesmo do cadastro e do
   feed); os cards de passos (--bg-soft) contrastam sozinhos sobre ele. */
#view-install.screen {
  background: var(--bg-canvas);
}

/* Botões primários (Enviar SMS, Verificar e Entrar, Instalar agora) ficam
   amarelos — verde sobre verde sumiria. */
#view-auth .btn--primary,
#view-install .btn--primary {
  background: var(--a-gold);
  color: var(--p-green-dark);
}

/* Botões de texto (Alterar número, Reenviar SMS, Continuar no navegador, etc.):
   DOURADO em vez do verde-claro. O verde-claro se camuflava no texto comum e não
   parecia clicável; o --a-gold (mesmo dos links legais) denota ação/link sobre o
   verde. */
#view-auth .btn--text,
#view-install .btn--text {
  color: var(--a-gold);
}

/* Logo (capacete) do 1º slide — fundo transparente, funde com o verde da tela;
   o check continua verde. Fonte: icon-intro.svg, um recorte JUSTO do operário
   (viewBox só ao redor da arte, ~pequena margem) em vez de icon-transparent.svg
   (que tem ~23% de margem transparente embutida e deixava o operário menor que
   os glifos). Ocupa o MESMO slot de altura dos glifos Material dos outros slides
   (clamp igual) — então título/texto continuam alinhados ao deslizar —, mas por
   ser recortado o operário PREENCHE mais o box, ficando um pouco maior que os
   glifos. width:auto preserva a proporção; margin-top igual mantém o espaçamento. */
.intro-carousel__icon-img {
  height: clamp(5.5rem, 26vw, 8.5rem);
  width: auto;
  display: block;
  margin-top: 1rem;
}

/* Dots: inativos em branco translúcido, ativo em AZUL claro (seleção = azul;
   o --info-blue cheio somiria no verde escuro, daí o tom bright) */
#step-intro .intro-carousel__dot {
  background: var(--on-green-muted);
}

#step-intro .intro-carousel__dot--active {
  background: var(--t-light);   /* branco: destaque limpo sobre o verde (era azul) */
}