/* ==========================================================================
   forms.css — componentes de formulário compartilhados entre as telas de auth
   (login, cadastro, reset) e as telas logadas (trocar senha). Consome os tokens
   de tokens.css e é carregado ANTES da camada de tela, que pode sobrescrever.

   Mora aqui o que se repete: campo + rótulo + ícone, estados de erro, medidor
   de força, botão primário e alertas. O que é de UMA tela só (aceite de termos,
   "lembrar-me", painel de marca) fica na camada dela.
   ========================================================================== */

/* ------------------------------- campos -------------------------------- */
.field { margin-bottom: 15px; }
.field label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.inp { position: relative; }
.inp .ic {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--text-faint);
  pointer-events: none;
}
.inp input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--border-strong);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  font: var(--fw-regular) 14px var(--font-sans);
  color: var(--text-strong);
  outline: none;
  transition: var(--ease);
}
.inp input::placeholder { color: var(--text-disabled); }
.inp input:focus { border-color: var(--brand-primary); background: var(--surface-card); box-shadow: var(--ring-focus); }
.inp:has(.eye) input { padding-right: 42px; }

.inp .eye {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-icons);
  font-size: 17px;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: var(--ease);
}
.inp .eye:hover { color: var(--brand-primary); }

/* estado de erro por campo */
.field.has-error input,
.inp input.input-error { border-color: var(--danger); background: var(--danger-soft); }
.field-error { display: block; margin-top: 6px; color: var(--danger); font-size: var(--fs-caption); line-height: 1.4; }
.field-hint  { display: block; margin-top: 6px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.4; }

/* medidor de força da senha */
.strength { display: flex; gap: 5px; margin-top: 9px; }
.strength i { height: 4px; flex: 1; border-radius: 3px; background: var(--surface-sunken); transition: var(--ease); }
.strength.lvl-1 i.on { background: var(--danger); }
.strength.lvl-2 i.on { background: var(--warn-dot); }
.strength.lvl-3 i.on { background: var(--entrada); }
.strength-lbl { font-size: 11.5px; font-weight: var(--fw-semibold); margin-top: 7px; min-height: 15px; }
.strength-lbl.lvl-1 { color: var(--danger); }
.strength-lbl.lvl-2 { color: var(--warn); }
.strength-lbl.lvl-3 { color: var(--entrada); }

/* ------------------------------- ações --------------------------------- */
.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 48px;
  border: none;
  background: var(--brand-primary);
  color: #fff;
  border-radius: var(--radius-md);
  font: var(--fw-bold) 15px var(--font-sans);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: var(--ease);
}
.submit:hover { background: var(--brand-primary-hover); }

/* ------------------------------- escolhas -------------------------------
   Caixa de marcar desenhada (a nativa não aceita cor de marca). A mecânica é
   sempre a mesma: o input de verdade fica escondido mas focável, e o `.box`
   ao lado dele reage por seletor irmão — assim o teclado continua funcionando
   e o rótulo inteiro vira área de clique.

   Estava só no `auth.css`, para o aceite de termos. O segundo uso real chegou
   com a escolha das contas do WhatsApp, então a mecânica desceu para cá (a
   camada compartilhada entre auth e telas logadas) e cada tela fica apenas com
   o que é seu. */
.escolhas { display: flex; flex-direction: column; gap: 4px; }
/* `label.escolha` e não `.escolha`: dentro de um `.field` a regra `.field label`
   (logo acima) tem especificidade maior e impunha `display:block`, quebrando a
   caixa para cima do texto. Os valores que ela também impõe — margem, tamanho e
   cor — são zerados aqui pelo mesmo motivo. */
label.escolha {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  line-height: 1.45;
}
.escolha-input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.escolha .box {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--ease);
}
.escolha .box .ic { font-family: var(--font-icons); font-size: 11px; color: #fff; opacity: 0; transition: var(--ease); }
.escolha-input:checked + .box { background: var(--brand-primary); border-color: var(--brand-primary); }
.escolha-input:checked + .box .ic { opacity: 1; }
.escolha-input:focus-visible + .box { box-shadow: var(--ring-focus); }
.escolha.has-error .box { border-color: var(--danger); }

/* ------ interruptor (`.tgl` do design system, core.card.html) ------
   Mesmo input escondido da caixa, outro indicador. A escolha entre os dois é de
   significado: a CAIXA marca item de uma lista para confirmar depois (aceitar
   termos); o INTERRUPTOR mostra o que está LIGADO agora — e é isso que a tela de
   contas reporta, já que cada conta ligada passa a receber conversas e a
   consumir a cota do plano. */
.tgl {
  position: relative;
  width: 44px;
  height: 25px;
  flex: none;
  border-radius: var(--radius-pill);
  background: #D9D9E3;
  transition: var(--ease);
}
.tgl .thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: var(--radius-round);
  background: #FFFFFF;
  box-shadow: var(--shadow-thumb);
  transition: var(--ease);
}
.escolha-input:checked + .tgl { background: var(--brand-primary); }
.escolha-input:checked + .tgl .thumb { left: 22px; }
.escolha-input:focus-visible + .tgl { box-shadow: var(--ring-focus); }
/* Mesmo interruptor, ligado por CLASSE em vez de por input marcado. Existe porque
   nem todo interruptor da aplicação é um campo de formulário: o de "o que enviamos"
   grava na hora, então ele é um botão que envia sozinho — e um checkbox ali diria,
   falsamente, que ainda falta confirmar. */
.tgl--on { background: var(--brand-primary); }
.tgl--on .thumb { left: 22px; }

/* Linha do item: nome à esquerda, id encostado à direita — com várias contas os
   ids formam coluna e a leitura desce reta, em vez de cada um parar onde o nome
   acabou. */
.escolha-txt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.escolha-txt b {
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.escolha-txt .mono { margin-left: auto; flex: none; }
/* separa uma linha da outra sem régua: elas são itens de escolha, não dados */
.escolhas .escolha { padding: 9px 2px; }
.escolhas .escolha + .escolha { border-top: 1px solid var(--border-hair); }

/* ------------------------------- alertas ------------------------------- */
.alerta {
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  line-height: 1.4;
  border-left: 4px solid;
}
.alerta--verde    { background: var(--entrada-surface); border-color: var(--ok-dot); color: var(--ok); }
.alerta--vermelho { background: var(--danger-soft);     border-color: var(--danger); color: var(--danger); }
/* âmbar = feito, mas incompleto (conectou sem número, um número ficou de fora):
   não é erro nem sucesso pleno, e verde mentiria sobre o estado */
.alerta--ambar    { background: var(--warn-soft);       border-color: var(--warn-dot); color: var(--warn); }
/* azul = próximo passo (escolher Página, conta ou Pixel). Já era emitido pelo
   fluxo da Meta sem regra correspondente, então caía no estilo base — a barra
   lateral ficava sem cor e a mensagem não se distinguia de um aviso qualquer. */
.alerta--azul     { background: var(--brand-primary-soft); border-color: var(--brand-primary); color: var(--brand-primary); }